@datawire-ai/busyfile-design-library 1.25.0 → 1.27.0

package/README.md

@@ -327,30 +327,45 @@ A customizable and accessible `toggle button` (switch) component. Supports both
 ## Usage
 
 ```tsx
-
 // Controlled toggle
-<Toggle checked={enabled} onChange={setEnabled} variant="classic" />
+'use client';
 
-// Uncontrolled toggle
-<StatefulToggle defaultChecked={true} variant="classic" />
+import * as React from 'react';
+import { Toggle } from '@/components/ui/toggle-button';
 
-// Disabled toggle
-<Toggle checked={true} disabled />
+export default function Example() {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <div className="flex items-center gap-3">
+      <Toggle
+        id="dark-mode"
+        checked={checked}
+        onCheckedChange={setChecked}
+        className="data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-gray-300"
+      />
+      <label
+        htmlFor="dark-mode"
+        className="cursor-pointer select-none text-sm font-medium"
+      >
+        Enable Dark Mode
+      </label>
+    </div>
+  );
+}
 ```
 
 ### Props
 
-| Prop              | Type                             | Default     | Description                                                 |
-| ----------------- | -------------------------------- | ----------- | ----------------------------------------------------------- |
-| `checked`         | `boolean`                        | `false`     | Whether the toggle is on or off (controlled).               |
-| `onChange`        | `(checked: boolean) => void`     | `-`         | Callback fired when the toggle changes.                     |
-| `variant`         | `"classic"` \| `"modern"` \| ... | `"classic"` | Visual style variant (extend via `toggleVariants`).         |
-| `disabled`        | `boolean`                        | `false`     | Disables the toggle.                                        |
-| `className`       | `string`                         | `-`         | Additional classes for styling.                             |
-| `id`              | `string`                         | `-`         | Optional id for the button element.                         |
-| `name`            | `string`                         | `-`         | Optional name (useful for forms).                           |
-| `aria-label`      | `string`                         | `-`         | Accessible label (required if no visible label is present). |
-| `aria-labelledby` | `string`                         | `-`         | ID of an element labeling the toggle.                       |
+| Prop              | Type                                                | Default | Description                                                     |
+| ----------------- | --------------------------------------------------- | ------- | --------------------------------------------------------------- |
+| `checked`         | `boolean`                                           | `false` | Controls the switch state (on/off).                             |
+| `defaultChecked`  | `boolean`                                           | `false` | Sets the initial state when using the switch uncontrolled.      |
+| `onCheckedChange` | `(checked: boolean) => void`                        | `—`     | Callback function fired when the checked state changes.         |
+| `disabled`        | `boolean`                                           | `false` | Disables the switch if `true`.                                  |
+| `id`              | `string`                                            | `—`     | Used to pair the switch with a `<label>` for accessibility.     |
+| `className`       | `string`                                            | `—`     | Apply custom Tailwind/utility classes.                          |
+| `...props`        | `React.ComponentProps<typeof SwitchPrimitive.Root>` | `—`     | Any additional props supported by Radix `SwitchPrimitive.Root`. |
 
 # Radio Button