feat: add switch

apps/www/src/content/docs/docs/components/switch.mdx

@@ -0,0 +1,42 @@
+---
+title: Switch
+description: A control that allows the user to toggle between checked and not checked.
+links:
+  doc: https://www.radix-ng.com/?path=/docs/primitives-switch--docs
+---
+
+<ComponentPreview name="switch-demo" />
+
+## Installation
+
+import { Tabs, TabItem } from "@astrojs/starlight/components";
+import { Steps } from "@astrojs/starlight/components";
+
+
+<Tabs>
+  <TabItem label="CLI">
+    ```bash frame="code"
+    npx shadcn-ng@latest add switch
+    ```
+  </TabItem>
+
+  <TabItem label="Manual">
+    <Steps>
+        1. Copy and paste the following code into your project.
+            <ComponentSource name="switch" />
+
+        2. Update the import paths to match your project setup.
+    </Steps>
+
+  </TabItem>
+</Tabs>
+
+## Usage
+
+```ts
+import { SwitchDirective } from '@/components/ui/switch.directive'
+```
+
+```angular-html
+<button ubSwitch />
+```

apps/www/src/registry/default/example/switch-demo.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+import { SwitchDirective } from '@/registry/default/ui/switch.directive'
+import { UbLabelDirective } from '@/registry/default/ui/label.directive'
+
+@Component({
+    standalone: true,
+    selector: 'switch-demo-default',
+    imports: [SwitchDirective, UbLabelDirective],
+    template: `
+    <div class="flex items-center space-x-2">
+        <button ubSwitch id="airplane-mode"></button>
+        <label for="airplane-mode">Airplane Mode</label>
+    </div>
+    `
+})
+export class SwitchDemoDefault { }
+
+export default SwitchDemoDefault;

apps/www/src/registry/default/ui/switch.directive.ts

@@ -0,0 +1,29 @@
+import { cn } from '@/lib/utils';
+import { Component, computed, input } from '@angular/core';
+
+import { RdxSwitchRootDirective, RdxSwitchThumbDirective } from '@radix-ng/primitives/switch'
+
+@Component({
+    standalone: true,
+    selector: 'button[ubSwitch]',
+    imports: [RdxSwitchThumbDirective],
+    hostDirectives: [
+        {
+            directive: RdxSwitchRootDirective,
+            inputs: ['id', 'required', 'checked', 'disabled'],
+            outputs: ['onCheckedChange']
+        }
+    ],
+    host: {
+        '[class]': 'computedClass()'
+    },
+    template: `
+    <span rdxSwitchThumb class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"></span>
+    `
+})
+export class SwitchDirective {
+    readonly class = input<string>();
+    readonly computedClass = computed(() => {
+        return cn('peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', this.class())
+    });
+}

apps/www/src/registry/new-york/example/switch-demo.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+import { SwitchDirective } from '@/registry/new-york/ui/switch.directive'
+import { UbLabelDirective } from '@/registry/new-york/ui/label.directive'
+
+@Component({
+    standalone: true,
+    selector: 'switch-demo-new-york',
+    imports: [SwitchDirective, UbLabelDirective],
+    template: `
+    <div class="flex items-center space-x-2">
+        <button ubSwitch id="airplane-mode"></button>
+        <label for="airplane-mode">Airplane Mode</label>
+    </div>
+    `
+})
+export class SwitchDemoNewYork { }
+
+export default SwitchDemoNewYork;

apps/www/src/registry/new-york/ui/switch.directive.ts

@@ -0,0 +1,29 @@
+import { cn } from '@/lib/utils';
+import { Component, computed, input } from '@angular/core';
+
+import { RdxSwitchRootDirective, RdxSwitchThumbDirective } from '@radix-ng/primitives/switch'
+
+@Component({
+    standalone: true,
+    selector: 'button[ubSwitch]',
+    imports: [RdxSwitchThumbDirective],
+    hostDirectives: [
+        {
+            directive: RdxSwitchRootDirective,
+            inputs: ['id', 'required', 'checked', 'disabled'],
+            outputs: ['onCheckedChange']
+        }
+    ],
+    host: {
+        '[class]': 'computedClass()'
+    },
+    template: `
+    <span rdxSwitchThumb class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"></span>
+    `
+})
+export class SwitchDirective {
+    readonly class = input<string>();
+    readonly computedClass = computed(() => {
+        return cn('peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', this.class())
+    });
+}

apps/www/src/registry/ui.ts

@@ -4,7 +4,7 @@ export const ui: Registry = [
     {
         name: "accordion",
         type: "components:ui",
-        dependencies: ["@ng-icons/core", "@ng-icons/lucide"],
+        dependencies: ["@ng-icons/core", "@ng-icons/lucide", "@radix-ng/primitives"],
         files: ["ui/accordion.directive.ts"],
     },
     {
@@ -54,6 +54,12 @@ export const ui: Registry = [
         type: "components:ui",
         files: ["ui/skeleton.directive.ts"],
     },
+    {
+        name: "switch",
+        type: "components:ui",
+        dependencies: ["@radix-ng/primitives"],
+        files: ["ui/switch.directive.ts"],
+    },
     {
         name: "table",
         type: "components:ui",