docs: add toggle component

docs/src/components/Announcement.astro

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

docs/src/config/docs.ts

@@ -190,6 +190,12 @@ export const docsConfig: TDocsConfig = {
           href: '/docs/components/tabs',
           items: [],
         },
+        {
+          title: 'Toggle',
+          href: '/docs/components/toggle',
+          label: 'New',
+          items: [],
+        },
       ],
     },
   ],

docs/src/content/docs/components/toggle.mdx

@@ -0,0 +1,57 @@
+---
+title: Toggle
+description: A two-state button that can be either on or off.
+links:
+  doc: https://www.radix-ng.com/primitives/components/toggle
+  api: https://www.radix-ng.com/primitives/components/toggle#api-reference
+---
+
+<ComponentPreview name="toggle-demo" description="A toggle 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 toggle
+```
+
+</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="toggle" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```ts
+import { UbToggleDirective } from "@/components/ui/toggle"
+```
+
+```html
+<button ubToggle>Toggle</button>
+```

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

@@ -0,0 +1,18 @@
+import { UbToggleDirective } from '@/registry/default/ui/toggle'
+
+import { Component } from '@angular/core'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { lucideBold } from '@ng-icons/lucide'
+
+@Component({
+  standalone: true,
+  selector: '[toggle-demo-default]',
+  imports: [UbToggleDirective, NgIconComponent],
+  viewProviders: [provideIcons({ lucideBold })],
+  template: `
+    <button ubToggle>
+      <ng-icon name="lucideBold" class="h-4 w-4"></ng-icon>
+    </button>
+  `,
+})
+export default class ToggleDemoDefault { }

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

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils'
+import { computed, Directive, input } from '@angular/core'
+import { RdxToggleDirective } from '@radix-ng/primitives/toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 px-3 min-w-10',
+        sm: 'h-9 px-2.5 min-w-9',
+        lg: 'h-11 px-5 min-w-11',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+@Directive({
+  standalone: true,
+  selector: 'button[ubToggle]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+  hostDirectives: [RdxToggleDirective],
+})
+export class UbToggleDirective {
+  variant = input<VariantProps<typeof toggleVariants>['variant']>()
+  size = input<VariantProps<typeof toggleVariants>['size']>()
+  class = input<string>()
+  computedClass = computed(() => cn(
+    toggleVariants({
+      variant: this.variant(),
+      size: this.size(),
+      className: this.class(),
+    }),
+  ))
+}

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

@@ -0,0 +1,18 @@
+import { UbToggleDirective } from '@/registry/new-york/ui/toggle'
+
+import { Component } from '@angular/core'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { lucideBold } from '@ng-icons/lucide'
+
+@Component({
+  standalone: true,
+  selector: '[toggle-demo-new-york]',
+  imports: [UbToggleDirective, NgIconComponent],
+  viewProviders: [provideIcons({ lucideBold })],
+  template: `
+    <button ubToggle>
+      <ng-icon name="lucideBold" class="h-4 w-4"></ng-icon>
+    </button>
+  `,
+})
+export default class ToggleDemoNewYork { }

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

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils'
+import { computed, Directive, input } from '@angular/core'
+import { RdxToggleDirective } from '@radix-ng/primitives/toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+@Directive({
+  standalone: true,
+  selector: 'button[ubToggle]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+  hostDirectives: [RdxToggleDirective],
+})
+export class UbToggleDirective {
+  variant = input<VariantProps<typeof toggleVariants>['variant']>()
+  size = input<VariantProps<typeof toggleVariants>['size']>()
+  class = input<string>()
+  computedClass = computed(() => cn(
+    toggleVariants({
+      variant: this.variant(),
+      size: this.size(),
+      className: this.class(),
+    }),
+  ))
+}

docs/src/registry/registry-examples.ts

@@ -199,6 +199,12 @@ export const examples: Registry = [
     registryDependencies: ['tabs'],
     files: ['example/tabs-demo.ts'],
   },
+  {
+    name: 'toggle-demo',
+    type: 'registry:example',
+    registryDependencies: ['toggle'],
+    files: ['example/toggle-demo.ts'],
+  },
   {
     name: 'typography-blockquote',
     type: 'registry:example',

docs/src/registry/registry-ui.ts

@@ -128,4 +128,10 @@ export const ui: Registry = [
     dependencies: ['@radix-ng/primitives'],
     files: [{ path: 'ui/tabs.ts', type: 'registry:ui' }],
   },
+  {
+    name: 'toggle',
+    type: 'registry:ui',
+    dependencies: ['@radix-ng/primitives'],
+    files: [{ path: 'ui/toggle.ts', type: 'registry:ui' }],
+  },
 ]