docs: add progress component

docs/src/components/Announcement.astro

@@ -2,8 +2,8 @@
 
 ---
 
-<a href="/docs/components/dialog" class="group mb-2 inline-flex items-center px-0.5 text-sm font-medium">
-  <span class="underline-offset-4 group-hover:underline"> New dialog component </span>
+<a href="/docs/components/progress" class="group mb-2 inline-flex items-center px-0.5 text-sm font-medium">
+  <span class="underline-offset-4 group-hover:underline"> New progress component </span>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"

docs/src/config/docs.ts

@@ -154,6 +154,12 @@ export const docsConfig: TDocsConfig = {
           href: '/docs/components/input',
           items: [],
         },
+        {
+          title: 'Progress',
+          href: '/docs/components/progress',
+          label: 'New',
+          items: [],
+        },
         {
           title: 'Separator',
           href: '/docs/components/separator',

docs/src/content/docs/components/progress.mdx

@@ -0,0 +1,60 @@
+---
+title: Progress
+description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+links:
+  doc: https://www.radix-ng.com/primitives/components/progress
+  api: https://www.radix-ng.com/primitives/components/progress#api-reference
+---
+
+<ComponentPreview
+  name="progress-demo"
+  description="A progress bar component."
+/>
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ng@latest add progress
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ng/primitives
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="progress" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```ts
+import { ProgressDirective } from '@/components/ui/progress'
+```
+
+```html
+<div ubProgress [progress]="10"></div>
+```

docs/src/registry/default/example/progress-demo.ts

@@ -0,0 +1,26 @@
+import { ProgressDirective } from '@/registry/default/ui/progress'
+
+import { Component, type OnDestroy, type OnInit } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[progress-demo-default]',
+  imports: [ProgressDirective],
+  template: `<div ubProgress [progress]="progress" class="w-[60%]"></div>`,
+})
+export default class ProgressDemoDefault implements OnInit, OnDestroy {
+  progress = 10
+  intervalId!: NodeJS.Timeout
+
+  ngOnInit(): void {
+    this.intervalId = setTimeout(() => {
+      this.progress = 66
+    }, 500)
+  }
+
+  ngOnDestroy(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId)
+    }
+  }
+}

docs/src/registry/default/ui/progress.ts

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils'
+import { Component, computed, input, numberAttribute } from '@angular/core'
+
+import { RdxProgressIndicatorDirective, RdxProgressRootDirective } from '@radix-ng/primitives/progress'
+
+@Component({
+  standalone: true,
+  selector: '[ubProgress]',
+  imports: [RdxProgressIndicatorDirective],
+  host: {
+    '[class]': 'computedClass()',
+  },
+  hostDirectives: [
+    {
+      directive: RdxProgressRootDirective,
+      inputs: ['rdxValue:progress', 'rdxMax:max', 'rdxValueLabel:valueLabel'],
+    },
+  ],
+  template: `
+    <div rdxProgressIndicator class="h-full w-full flex-1 bg-primary transition-all" [style.transform]="'translateX(-' + (100 - (progress() || 0)) + '%)'"></div>
+  `,
+})
+export class ProgressDirective {
+  progress = input(0, {
+    transform: numberAttribute,
+  })
+
+  class = input<string>()
+  computedClass = computed(() => cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', this.class()))
+}

docs/src/registry/new-york/example/progress-demo.ts

@@ -0,0 +1,26 @@
+import { ProgressDirective } from '@/registry/new-york/ui/progress'
+
+import { Component, type OnDestroy, type OnInit } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[progress-demo-new-york]',
+  imports: [ProgressDirective],
+  template: `<div ubProgress [progress]="progress" class="w-[60%]"></div>`,
+})
+export default class ProgressDemoNewYork implements OnInit, OnDestroy {
+  progress = 10
+  intervalId!: NodeJS.Timeout
+
+  ngOnInit(): void {
+    this.intervalId = setTimeout(() => {
+      this.progress = 66
+    }, 500)
+  }
+
+  ngOnDestroy(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId)
+    }
+  }
+}

docs/src/registry/new-york/ui/progress.ts

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils'
+import { Component, computed, input, numberAttribute } from '@angular/core'
+
+import { RdxProgressIndicatorDirective, RdxProgressRootDirective } from '@radix-ng/primitives/progress'
+
+@Component({
+  standalone: true,
+  selector: '[ubProgress]',
+  imports: [RdxProgressIndicatorDirective],
+  host: {
+    '[class]': 'computedClass()',
+  },
+  hostDirectives: [
+    {
+      directive: RdxProgressRootDirective,
+      inputs: ['rdxValue:progress', 'rdxMax:max', 'rdxValueLabel:valueLabel'],
+    },
+  ],
+  template: `
+    <div rdxProgressIndicator class="h-full w-full flex-1 bg-primary transition-all" [style.transform]="'translateX(-' + (100 - (progress() || 0)) + '%)'"></div>
+  `,
+})
+export class ProgressDirective {
+  progress = input(0, {
+    transform: numberAttribute,
+  })
+
+  class = input<string>()
+  computedClass = computed(() => cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', this.class()))
+}

docs/src/registry/registry-examples.ts

@@ -151,6 +151,12 @@ export const examples: Registry = [
     registryDependencies: ['input'],
     files: ['example/input-file.ts'],
   },
+  {
+    name: 'progress-demo',
+    type: 'registry:example',
+    registryDependencies: ['progress'],
+    files: ['example/progress-demo.ts'],
+  },
   {
     name: 'separator-demo',
     type: 'registry:example',

docs/src/registry/registry-ui.ts

@@ -89,6 +89,12 @@ export const ui: Registry = [
     dependencies: ['@radix-ng/primitives'],
     files: [{ path: 'ui/label.ts', type: 'registry:ui' }],
   },
+  {
+    name: 'progress',
+    type: 'registry:ui',
+    dependencies: ['@radix-ng/primitives'],
+    files: [{ path: 'ui/progress.ts', type: 'registry:ui' }],
+  },
   {
     name: 'separator',
     type: 'registry:ui',