Merge pull request #18 from ruru-m07/component/switch

feat(components): add switch component to lib

apps/www/components/preview/index.tsx

@@ -7,7 +7,7 @@ import { Avatar } from "ruru-ui/components/avatar";
 import { Checkbox } from "ruru-ui/components/checkbox";
 import { Input } from "ruru-ui/components/input";
 import { Textarea } from "ruru-ui/components/textarea";
-import { Tab, Tabs } from "ruru-ui/components/tabs";
+import { Switch } from "ruru-ui/components/switch";
 import {
   Tooltip,
   TooltipContent,
@@ -119,4 +119,12 @@ export default {
       <Tabspreview />
     </Wrapper>
   ),
+  switch: (
+    <Wrapper>
+      <div className="flex items-center justify-center space-x-2">
+        <Switch id="airplane-mode" />
+        <label htmlFor="airplane-mode">Toggle Button</label>
+      </div>
+    </Wrapper>
+  ),
 } as Record<string, ReactNode>;

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

@@ -0,0 +1,104 @@
+---
+title: Switch
+description: The Switch component is used to toggle between two states.
+preview: switch
+---
+
+import { Tabs, Tab } from "fumadocs-ui/components/tabs";
+import { Switch } from "ruru-ui/components/switch";
+
+## Usage
+
+<Tabs items={["Preview", "Code"]}>
+    <Tab className={"flex justify-center"} value="Preview">
+        <Switch />
+    </Tab>
+    <Tab className={"-mt-8"} value="Code">
+        ```tsx
+        import { Switch } from "your-ui-library/components/switch";
+
+        export function SwitchDemo() {
+            return <Switch />;
+        }
+        ```
+
+  </Tab>
+</Tabs>
+
+## Variants
+
+### Default Switch
+
+<Tabs items={["Preview", "Code"]}>
+    <Tab className={"flex justify-center"} value="Preview">
+        <Switch />
+    </Tab>
+    <Tab className={"-mt-8"} value="Code">
+        ```tsx
+        import { Switch } from "your-ui-library/components/switch";
+
+        export function DefaultSwitchDemo() {
+            return <Switch />;
+        }
+        ```
+    </Tab>
+
+</Tabs>
+
+### Disabled Switch
+
+<Tabs items={["Preview", "Code"]}>
+    <Tab className={"flex justify-center"} value="Preview">
+        <Switch disabled />
+    </Tab>
+    <Tab className={"-mt-8"} value="Code">
+        ```tsx
+        import { Switch } from "your-ui-library/components/switch";
+
+        export function DisabledSwitchDemo() {
+            return <Switch disabled />;
+        }
+        ```
+    </Tab>
+
+</Tabs>
+
+## Props
+
+| Name          | Type    | Default | Description                            |
+| ------------- | ------- | ------- | -------------------------------------- |
+| **className** | string  | `"" `   | Additional class names for the switch. |
+| **disabled**  | boolean | `false` | Flag to disable the switch.            |
+
+## Examples
+
+### Switch with lables
+
+<Tabs items={["Preview", "Code"]}>
+    <Tab className={"flex justify-center"} value="Preview">
+        <div className="flex items-center space-x-2">
+          <Switch id="airplane-mode" />
+          <label htmlFor="airplane-mode">toggle Mode</label>
+        </div>
+    </Tab>
+    <Tab className={"-mt-8"} value="Code">
+        ```tsx
+        import { Switch } from "your-ui-library/components/switch";
+
+        export function DefaultSwitchExample() {
+            return (
+                <div className="flex items-center space-x-2">
+                    <Switch id="airplane-mode" />
+                    <label htmlFor="airplane-mode">toggle Mode</label>
+                </div>
+            );
+        }
+
+        ```
+    </Tab>
+
+</Tabs>
+
+---
+
+This document provides an overview of the Switch component, including usage examples, variants, props, and example implementations.

packages/ui/package.json

@@ -88,6 +88,7 @@
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-direction": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@swc/core": "^1.6.13",

packages/ui/src/components/switch.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@/utils/cn";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={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 bg-accent data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "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",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };