` | `—` | Any additional props supported by Radix `SwitchPrimitive.Root`. |\n\n# Radio Button\n\nA `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.\n\n## Usage\n\n```tsx\n'use client';\n\nimport { RadioGroup, RadioGroupItem } from './radio-button';\n\nexport default function Example() {\n return (\n \n Option 1 \n Option 2 \n \n Option 3 (Disabled)\n \n \n );\n}\n```\n\n### Props\n\n| Prop | Type | Default | Description |\n| --------------- | ------------------------- | -------- | --------------------------------------------- |\n| `value` | `string` | – | Controlled value of the selected radio. |\n| `defaultValue` | `string` | – | Uncontrolled initial value. |\n| `onValueChange` | `(value: string) => void` | – | Callback fired when the value changes. |\n| `name` | `string` | auto-gen | Name for the underlying native radio inputs. |\n| `disabled` | `boolean` | `false` | Disables all radios inside the group. |\n| `className` | `string` | – | Tailwind/custom classes for the root wrapper. |\n| `children` | `React.ReactNode` | – | One or more `\n Large Display Heading\n
\n\n\n Body text using medium size\n
\n\n### Colors\n\nThe BusyFile Design System defines a unified color palette for primary, neutral, and semantic states.\nThese tokens can be used directly as Tailwind utility classes like bg-primary-30 or text-neutral-60.\n\n### Primary Colors\n\n| Token | Hex | Example Class |\n| -------------------- | --------- | --------------- |\n| `--color-primary-0` | `#36060a` | `bg-primary-0` |\n| `--color-primary-10` | `#6a131d` | `bg-primary-10` |\n| `--color-primary-20` | `#a52432` | `bg-primary-20` |\n| `--color-primary-30` | `#e33549` | `bg-primary-30` |\n| `--color-primary-40` | `#f17b83` | `bg-primary-40` |\n| `--color-primary-50` | `#f5b5b9` | `bg-primary-50` |\n| `--color-primary-60` | `#fceaea` | `bg-primary-60` |\n\n### Neutral Colors\n\n| Token | Hex | Example Class |\n| -------------------------- | --------- | --------------------- |\n| `--color-neutral-0` | `#0a0a0a` | `bg-neutral-0` |\n| `--color-neutral-10` | `#1f1f1f` | `bg-neutral-10` |\n| `--color-neutral-20` | `#333333` | `bg-neutral-20` |\n| `--color-neutral-30` | `#474747` | `bg-neutral-30` |\n| `--color-neutral-40` | `#5c5c5c` | `bg-neutral-40` |\n| `--color-neutral-50` | `#707070` | `bg-neutral-50` |\n| `--color-neutral-60` | `#858585` | `bg-neutral-60` |\n| `--color-neutral-70` | `#999999` | `bg-neutral-70` |\n| `--color-neutral-80` | `#adadad` | `bg-neutral-80` |\n| `--color-neutral-90` | `#c2c2c2` | `bg-neutral-90` |\n| `--color-neutral-95` | `#d6d6d6` | `bg-neutral-95` |\n| `--color-neutral-99` | `#f1f1f1` | `bg-neutral-99` |\n| `--color-neutral-gray-50` | `#FAFAFA` | `bg-neutral-gray-50` |\n| `--color-neutral-gray-100` | `#F5F5F5` | `bg-neutral-gray-100` |\n\n### Semantic Colors\n\n| State | Light | Dark | Example Classes |\n| ----------- | --------- | --------- | ------------------------------ |\n| **Error** | `#f9dcdf` | `#bf2234` | `bg-error-l`, `bg-error-d` |\n| **Warning** | `#fbf2da` | `#e8b321` | `bg-warning-l`, `bg-warning-d` |\n| **Success** | `#c5fce3` | `#099a59` | `bg-success-l`, `bg-success-d` |\n\n### Usage\n\n```tsx\n\n Primary Button\n
\n\n\n Error Alert\n
\n\n## Badge\n\nThe `Badge` component is used to display small status indicators, tags, or labels.\nIt supports multiple variants, types `(filled / outline)`, and accepts custom children (icons, avatars, flags, etc.).\n\n### Usage\n\n```\n\ntsx\n\n\n Primary \n Success \n Warning \n Error \n Gray \n Blue \n Purple \n Pink \n Rose \n\n{/_ Outline badges _/}\n\nOutlined\n \n\n{/_ With icons _/}\n\n✔ \nSuccess with Icon\n \n\n
\n```\n\n````\n\n# Checkbox\n\nThe `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.\n\n## Usage\n\n```tsx\nimport { Checkbox } from '@/components/ui/checkbox';\n\nexport function Example() {\n return (\n \n \n Accept terms and conditions\n \n
\n );\n}\n\n### Props\n\n| Prop | Type | Default | Description |\n| ----------------- | ----------------------------------------------- | ------- | -------------------------------------------------------------- |\n| `className` | `string` | `—` | Custom class names for styling. |\n| `checked` | `boolean \\| \"indeterminate\"` | `—` | Controlled state of the checkbox. |\n| `defaultChecked` | `boolean` | `false` | Uncontrolled initial checked state. |\n| `disabled` | `boolean` | `false` | Disables the checkbox when true. |\n| `onCheckedChange` | `(checked: boolean \\| \"indeterminate\") => void` | `—` | Callback fired when the checked state changes. |\n| `id` | `string` | `—` | Used to associate the checkbox with a `` via `htmlFor`. |\n| `name` | `string` | `—` | Name of the checkbox input (useful in forms). |\n| `value` | `string` | `—` | Value associated with the checkbox input. |\n\n# Timeline\n\nA flexible and customizable timeline component built with React. Supports different visual styles (`filled`, `outlined`, and `icon`), visited/unvisited states, connectors, and custom content.\n\n## Usage\n\n```tsx\nimport { Timeline } from '@/components/timeline';\nimport { CheckCircle } from 'lucide-react';\n\nDefault \nPrimary \nOutline Small \n\n console.log('Marked all as read')}\n />\n\n \n \n \n );\n}\n```\n\nYou can also use:\n- `NotificationContent.Loading` while data is loading\n- `NotificationContent.Empty` when there are no notifications\n- `NotificationContent.Error` if something fails\n\n## Badge\n\nThe `Badge` component is used to display small status indicators, tags, or labels.\nIt supports multiple variants, types `(filled / outline)`, and accepts custom children (icons, avatars, flags, etc.).\n\n### Usage\n\n```tsx\n\n Primary \n Success \n Warning \n Error \n Gray \n Blue \n Purple \n Pink \n Rose \n\n {/* Outline badges */}\n \n Outlined\n \n\n {/* With icons */}\n \n ✔ \n Success with Icon\n \n
\n```\n\n| Prop | Type | Default | Description |\n| ---------- | ---------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------- |\n| `variant` | `\"primary\" \\| \"success\" \\| \"warning\" \\| \"error\" \\| \"secondary\" \\| \"neutral\"` | `\"primary\"` | Color style of the badge. |\n| `type` | `\"filled\" \\| \"outline\"` | `\"filled\"` | Whether the badge is filled or outlined. |\n| `children` | `React.ReactNode` | — | Content inside the badge (text, icons, avatars, flags, etc.). |\n\n## Divider\n\nThe `Divider` component is used to separate content visually.\nIt supports `vertical` and `horizontal` orientations, with configurable thickness (size) and custom width/height.\n\n```tsx\n\n {/* Horizontal Divider */}\n
\n\n {/* Vertical Divider */}\n
\n
\n \n \n Home \n \n \n Projects \n \n \n Project Alpha \n \n \n \n );\n}\n```\n\n### Props\n\n| Component | Props | Description |\n| ----------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| **Breadcrumb** | All native `nav` props | Root container with `aria-label=\"breadcrumb\"`. |\n| **BreadcrumbList** | `className?` + all native `ol` props | Wrapper for breadcrumb items (``). Adds spacing & layout classes. |\n| **BreadcrumbItem** | `className?` + all native `li` props | Represents each breadcrumb node (``). |\n| **BreadcrumbLink** | `asChild?: boolean`, `className?`, all native `a` props | Renders a link. If `asChild` is true, uses Radix `Slot` instead of ``. |\n| **BreadcrumbPage** | `className?` + all native `span` props | Represents the current page. Adds `aria-current=\"page\"`. |\n| **BreadcrumbSeparator** | `children?` (defaults to `\n {/* Numeric */}\n
\n );\n}\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| -------------- | ------------------------ | ----------- | ---------------------------------- | ---------- | ----------- | --------------------------- |\n| `steps` | `{ title?: string }[]` | `[]` | Steps with optional labels |\n| `variant` | `\"numeric\" | \"dots\" | \"progress\" | \"labeled\"` | `\"numeric\"` | Visual style of the stepper |\n| `initialStep` | `number` | `0` | Starting step index |\n| `onStepChange` | `(step: number) => void` | `undefined` | Callback when step changes |\n| `showControls` | `boolean` | `true` | Show back/next navigation controls |\n| `className` | `string` | `undefined` | Additional Tailwind classes |\n\n### SelectOption\n\nA custom dropdown supporting single, multi(with chips), and grouped selections. Built with React and Tailwind CSS.\n\n### Usage\n\n```tsx\nimport { useState } from 'react';\nimport { SelectOption } from '@/components/select-option';\n\nconst options = [\n { label: 'Option 1', value: 'opt1' },\n { label: 'Option 2', value: 'opt2' },\n];\n\nexport default function Demo() {\n const [single, setSingle] = useState('');\n const [multi, setMulti] = useState([]);\n\n return (\n <>\n setSingle(val as string)}\n placeholder=\"Single select\"\n />\n\n setMulti(val as string[])}\n placeholder=\"Multi select\"\n />\n \n );\n}\n```\n\n### Props\n\n| Prop | Type | Default | Description |\n| ------------- | ----------------------------------------- | ------------- | ------------------------------------------ |\n| `options` | `SelectOptionType[] \\| SelectGroupType[]` | required | List of options (flat or grouped) |\n| `multiple` | `boolean` | `false` | Enables multi-select with chips |\n| `placeholder` | `string` | `\"Select...\"` | Placeholder text when no value is selected |\n| `disabled` | `boolean` | `false` | Disables the select |\n| `error` | `string` | `undefined` | Error message, highlights border |\n| `helperText` | `string` | `undefined` | Helper text shown below the select |\n| `value` | `string \\| string[]` | internal | Controlled value |\n| `onChange` | `(value: string \\| string[]) => void` | optional | Callback when value changes |\n\n### TypeScript\n\nFull TypeScript support is included. No additional types package needed.\n\n## Building\n\n```tsx\nbash\n# Build for production\npnpm build\n\n# Build types\npnpm build:types\n\n# Build Storybook\npnpm build-storybook\n```\n\nMade with ❤️ by the BusyFile team\n````\n","readmeFilename":"README.md"}