@datawire-ai/busyfile-design-library 1.16.0 → 1.18.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,74 @@ 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 />`.             |
+
+
+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
+import { Skeleton, SkeletonText } from "@/components/ui/skeleton";
+
+// Basic skeleton block
+<Skeleton width={120} height={20} />
+
+// Rounded skeleton (e.g., avatar)
+<Skeleton width={40} height={40} borderRadius="50%" />
+
+// Animated skeleton
+<Skeleton width="100%" height={16} animation="pulse" />
+
+// Multi-line skeleton text
+<SkeletonText lines={3} />
+```
+
+### Props
+
+| Prop           | Type                   | Default | Description                          |
+| -------------- | ---------------------- | ------- | ------------------------------------ |
+| `className`    | `string`               | `-`     | Custom classes for styling.          |
+| `animation`    | `"shimmer" \| "pulse"` | `-`     | Animation style for skeleton.        |
+| `width`        | `number \| string`     | `-`     | Width of the skeleton (px, %, etc.). |
+| `height`       | `number \| string`     | `-`     | Height of the skeleton.              |
+| `borderRadius` | `number \| string`     | `4px`   | Border radius (px or CSS value).     |
+| `style`        | `React.CSSProperties`  | `-`     | Inline styles override.              |
+
 
 ## Badge
 
@@ -359,7 +428,137 @@ It supports multiple variants, types `(filled / outline)`, and accepts custom ch
 
 ### 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.
+
+| Token               | Font Size | Line Height | Example Class     |
+| ------------------- | --------- | ----------- | ----------------- |
+| `--text-display-lg` | 3rem      | 1.2rem      | `text-display-lg` |
+| `--text-display-md` | 2.25rem   | 1.2rem      | `text-display-md` |
+| `--text-display-sm` | 1.875rem  | 1.2rem      | `text-display-sm` |
+| `--text-display-xs` | 1.5rem    | 1.2rem      | `text-display-xs` |
+| `--text-xl`         | 1.25rem   | 1.6rem      | `text-xl`         |
+| `--text-lg`         | 1.125rem  | 1.6rem      | `text-lg`         |
+| `--text-md`         | 1rem      | 1.6rem      | `text-md`         |
+| `--text-sm`         | 0.875rem  | 1.6rem      | `text-sm`         |
+| `--text-xs`         | 0.75rem   | 1.6rem      | `text-xs`         |
+
+### Usage
+
+<p className="text-display-lg font-sans">
+  Large Display Heading
+</p>
+
+<p className="text-md font-sans">
+  Body text using medium size
+</p>
+
+### Colors
+
+The BusyFile Design System defines a unified color palette for primary, neutral, and semantic states.
+These tokens can be used directly as Tailwind utility classes like bg-primary-30 or text-neutral-60.
+
+### Primary Colors
+
+| Token                | Hex       | Example Class   |
+| -------------------- | --------- | --------------- |
+| `--color-primary-0`  | `#36060a` | `bg-primary-0`  |
+| `--color-primary-10` | `#6a131d` | `bg-primary-10` |
+| `--color-primary-20` | `#a52432` | `bg-primary-20` |
+| `--color-primary-30` | `#e33549` | `bg-primary-30` |
+| `--color-primary-40` | `#f17b83` | `bg-primary-40` |
+| `--color-primary-50` | `#f5b5b9` | `bg-primary-50` |
+| `--color-primary-60` | `#fceaea` | `bg-primary-60` |
+
+### Neutral Colors
+
+| Token                | Hex       | Example Class   |
+| -------------------- | --------- | --------------- |
+| `--color-neutral-0`  | `#0a0a0a` | `bg-neutral-0`  |
+| `--color-neutral-10` | `#1f1f1f` | `bg-neutral-10` |
+| `--color-neutral-20` | `#333333` | `bg-neutral-20` |
+| `--color-neutral-30` | `#474747` | `bg-neutral-30` |
+| `--color-neutral-40` | `#5c5c5c` | `bg-neutral-40` |
+| `--color-neutral-50` | `#707070` | `bg-neutral-50` |
+| `--color-neutral-60` | `#858585` | `bg-neutral-60` |
+| `--color-neutral-70` | `#999999` | `bg-neutral-70` |
+| `--color-neutral-80` | `#adadad` | `bg-neutral-80` |
+| `--color-neutral-90` | `#c2c2c2` | `bg-neutral-90` |
+| `--color-neutral-95` | `#d6d6d6` | `bg-neutral-95` |
+| `--color-neutral-99` | `#f1f1f1` | `bg-neutral-99` |
+
+### Semantic Colors
+
+| State       | Light     | Dark      | Example Classes                |
+| ----------- | --------- | --------- | ------------------------------ |
+| **Error**   | `#f9dcdf` | `#bf2234` | `bg-error-l`, `bg-error-d`     |
+| **Warning** | `#fbf2da` | `#e8b321` | `bg-warning-l`, `bg-warning-d` |
+| **Success** | `#c5fce3` | `#099a59` | `bg-success-l`, `bg-success-d` |
+
+### Usage
+
+<div className="bg-primary-30 text-white p-4 rounded">
+  Primary Button
+</div>
+
+<div className="bg-error-d text-white p-4 rounded">
+  Error Alert
+</div>
+
+## 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>
@@ -637,3 +836,4 @@ pnpm build-storybook
 ````
 
 Made with ❤️ by the BusyFile team
+```