@datawire-ai/busyfile-design-library 1.24.0 → 1.26.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
 
@@ -358,7 +373,7 @@ A `radio button` is a user interface element that allows the user to select one
 
 ## Usage
 
-`````tsx
+```tsx
 'use client';
 
 import { RadioGroup, RadioGroupItem } from './radio-button';
@@ -375,6 +390,7 @@ export default function Example() {
   );
 }
 ```
+
 ### Props
 
 | Prop            | Type                      | Default  | Description                                   |
@@ -387,13 +403,12 @@ export default function Example() {
 | `className`     | `string`                  | –        | Tailwind/custom classes for the root wrapper. |
 | `children`      | `React.ReactNode`         | –        | One or more `<RadioGroupItem />`.             |
 
-
 The `Skeleton` component is used to display a placeholder while content is loading. It supports custom dimensions, border radius, and animations.
 It also includes a SkeletonText variant for rendering multiple placeholder text lines.
 
 ## Usage
 
-````tsx
+```tsx
 import { Skeleton, SkeletonText } from "@/components/ui/skeleton";
 
 // Basic skeleton block
@@ -420,58 +435,6 @@ import { Skeleton, SkeletonText } from "@/components/ui/skeleton";
 | `borderRadius` | `number \| string`     | `4px`   | Border radius (px or CSS value).     |
 | `style`        | `React.CSSProperties`  | `-`     | Inline styles override.              |
 
-
-## Badge
-
-The `Badge` component is used to display small status indicators, tags, or labels.
-It supports multiple variants, types `(filled / outline)`, and accepts custom children (icons, avatars, flags, etc.).
-
-### Usage
-
-````tsx
-<div className="flex gap-2 flex-wrap">
-  <Badge variant="primary">Primary</Badge>
-  <Badge variant="success">Success</Badge>
-  <Badge variant="warning">Warning</Badge>
-  <Badge variant="error">Error</Badge>
-  <Badge variant="gray">Gray</Badge>
-  <Badge variant="blue">Blue</Badge>
-  <Badge variant="purple">Purple</Badge>
-  <Badge variant="pink">Pink</Badge>
-  <Badge variant="rose">Rose</Badge>
-
-  {/* Outline badges */}
-  <Badge variant="blue" type="outline">
-    Outlined
-  </Badge>
-
-  {/* With icons */}
-  <Badge variant="success">
-    <span className="mr-1">✔</span>
-    Success with Icon
-  </Badge>
-</div>
-```
-
-| Prop       | Type                                                                                                              | Default     | Description                                                   |
-| ---------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------- |
-| `variant`  | `"primary" \| "success" \| "warning" \| "error" \| "gray" \| "neutral" \| "blue" \| "purple" \| "pink" \| "rose"` | `"primary"` | Color style of the badge.                                     |
-| `type`     | `"filled" \| "outline"`                                                                                           | `"filled"`  | Whether the badge is filled or outlined.                      |
-| `children` | `React.ReactNode`                                                                                                 | —           | Content inside the badge (text, icons, avatars, flags, etc.). |
-
-# Button
-
-The `Button` component is a core interactive element in the design system. It supports multiple variants, sizes, and icons while ensuring accessibility and consistency.
-
-## Usage
-
-```tsx
-<Button variant="default">Default</Button>
-<Button variant="primary">Primary</Button>
-<Button variant="outline" size="sm">Outline Small</Button>
-<Button size="icon"><Icon /></Button>
-```
-
 ### Typography
 
 The BusyFile Design System provides a consistent typography scale based on Nunito with predefined sizes and line-heights from Figma.
@@ -542,6 +505,7 @@ These tokens can be used directly as Tailwind utility classes like bg-primary-30
 
 ### Usage
 
+```tsx
 <div className="bg-primary-30 text-white p-4 rounded">
   Primary Button
 </div>
@@ -557,7 +521,7 @@ It supports multiple variants, types `(filled / outline)`, and accepts custom ch
 
 ### Usage
 
-`````
+```
 
 tsx
 
@@ -586,13 +550,40 @@ Success with Icon
 </div>
 ```
 
+````
+
+# Checkbox
+
+The `Checkbox` is a user interface element that allows the user to select one or more options from a list of independent options. They are typically used in interfaces where the user needs to choose one or more options from a set of options, such as in a filter menu.
+
+## Usage
+
 ```tsx
-| Prop       | Type                                                                                                              | Default     | Description                                                   |
-| ---------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------- |
-| `variant`  | `"primary" \| "success" \| "warning" \| "error" \| "gray" \| "neutral" \| "blue" \| "purple" \| "pink" \| "rose"` | `"primary"` | Color style of the badge.                                     |
-| `type`     | `"filled" \| "outline"`                                                                                           | `"filled"`  | Whether the badge is filled or outlined.                      |
-| `children` | `React.ReactNode`                                                                                                 | —           | Content inside the badge (text, icons, avatars, flags, etc.). |
-```
+import { Checkbox } from '@/components/ui/checkbox';
+
+export function Example() {
+  return (
+    <div className="flex items-center gap-2">
+      <Checkbox id="terms" />
+      <label htmlFor="terms" className="text-sm text-neutral-black-1">
+        Accept terms and conditions
+      </label>
+    </div>
+  );
+}
+
+### Props
+
+| Prop              | Type                                            | Default | Description                                                    |
+| ----------------- | ----------------------------------------------- | ------- | -------------------------------------------------------------- |
+| `className`       | `string`                                        | `—`     | Custom class names for styling.                                |
+| `checked`         | `boolean \| "indeterminate"`                    | `—`     | Controlled state of the checkbox.                              |
+| `defaultChecked`  | `boolean`                                       | `false` | Uncontrolled initial checked state.                            |
+| `disabled`        | `boolean`                                       | `false` | Disables the checkbox when true.                               |
+| `onCheckedChange` | `(checked: boolean \| "indeterminate") => void` | `—`     | Callback fired when the checked state changes.                 |
+| `id`              | `string`                                        | `—`     | Used to associate the checkbox with a `<label>` via `htmlFor`. |
+| `name`            | `string`                                        | `—`     | Name of the checkbox input (useful in forms).                  |
+| `value`           | `string`                                        | `—`     | Value associated with the checkbox input.                      |
 
 # Timeline