@datawire-ai/busyfile-design-library 1.16.0 → 1.17.0

package/README.md

@@ -327,6 +327,7 @@ A customizable and accessible `toggle button` (switch) component. Supports both
 ## Usage
 
 ```tsx
+
 // Controlled toggle
 <Toggle checked={enabled} onChange={setEnabled} variant="classic" />
 
@@ -351,6 +352,41 @@ A customizable and accessible `toggle button` (switch) component. Supports both
 | `aria-label`      | `string`                         | `-`         | Accessible label (required if no visible label is present). |
 | `aria-labelledby` | `string`                         | `-`         | ID of an element labeling the toggle.                       |
 
+# Radio Button
+
+A `radio button` is a user interface element that allows the user to select one option from a list of mutually exclusive options. They are typically used in interfaces where the user needs to choose a single option from a set of options, such as in a survey or form.
+
+## Usage
+
+````tsx
+'use client';
+
+import { RadioGroup, RadioGroupItem } from './radio-button';
+
+export default function Example() {
+  return (
+    <RadioGroup defaultValue="option1" className="flex flex-col gap-3">
+      <RadioGroupItem value="option1">Option 1</RadioGroupItem>
+      <RadioGroupItem value="option2">Option 2</RadioGroupItem>
+      <RadioGroupItem value="option3" disabled>
+        Option 3 (Disabled)
+      </RadioGroupItem>
+    </RadioGroup>
+  );
+}
+```
+
+### Props
+
+| Prop            | Type                      | Default  | Description                                   |
+| --------------- | ------------------------- | -------- | --------------------------------------------- |
+| `value`         | `string`                  | –        | Controlled value of the selected radio.       |
+| `defaultValue`  | `string`                  | –        | Uncontrolled initial value.                   |
+| `onValueChange` | `(value: string) => void` | –        | Callback fired when the value changes.        |
+| `name`          | `string`                  | auto-gen | Name for the underlying native radio inputs.  |
+| `disabled`      | `boolean`                 | `false`  | Disables all radios inside the group.         |
+| `className`     | `string`                  | –        | Tailwind/custom classes for the root wrapper. |
+| `children`      | `React.ReactNode`         | –        | One or more `<RadioGroupItem />`.             |
 
 ## Badge
 
@@ -359,7 +395,8 @@ It supports multiple variants, types `(filled / outline)`, and accepts custom ch
 
 ### Usage
 
-```tsx
+````
+tsx
 <div className="flex gap-2 flex-wrap">
   <Badge variant="primary">Primary</Badge>
   <Badge variant="success">Success</Badge>
@@ -637,3 +674,7 @@ pnpm build-storybook
 ````
 
 Made with ❤️ by the BusyFile team
+
+```
+
+```