@datawire-ai/busyfile-design-library 1.7.1 → 1.9.0

package/README.md

@@ -281,6 +281,99 @@ The `Button` component is a core interactive element in the design system. It su
 <Button variant="outline" size="sm">Outline Small</Button>
 <Button size="icon"><Icon /></Button>
 
+
+
+
+### Stepper
+A re-usable stepper component to lead users through multi-step workflows (checkout, sign-up, forms, etc.).
+Supports numeric, dots, progress, and labeled versions.
+
+### Example
+``` const steps = [
+  { title: "Account Setup" },
+  { title: "Profile Info" },
+  { title: "Preferences" },
+  { title: "Confirmation" },
+];
+
+export default function Example() {
+  return (
+    <div className="space-y-6">
+      {/* Numeric */}
+      <Stepper steps={steps} variant="numeric" />
+
+      {/* Dots */}
+      <Stepper steps={steps} variant="dots" />
+
+      {/* Progress */}
+      <Stepper steps={steps} variant="progress" />
+
+      {/* Labeled */}
+      <Stepper steps={steps} variant="labeled" />
+    </div>
+  );
+}```
+
+
+| Prop           | Type                                             | Default     | Description                        |
+| -------------- | ------------------------------------------------ | ----------- | ---------------------------------- |
+| `steps`        | `{ title?: string }[]`                           | `[]`        | Steps with optional labels         |
+| `variant`      | `"numeric" | "dots" | "progress" | "labeled"`    | `"numeric"` | Visual style of the stepper        |
+| `initialStep`  | `number`                                         | `0`         | Starting step index                |
+| `onStepChange` | `(step: number) => void`                         | `undefined` | Callback when step changes         |
+| `showControls` | `boolean`                                        | `true`      | Show back/next navigation controls |
+| `className`    | `string`                                         | `undefined` | Additional Tailwind classes        |
+
+### SelectOption
+A custom dropdown supporting single, multi(with chips), and grouped selections. Built with React and Tailwind CSS.
+
+### Usage
+```import { useState } from "react"
+import { SelectOption } from "@/components/select-option"
+
+const options = [
+  { label: "Option 1", value: "opt1" },
+  { label: "Option 2", value: "opt2" },
+]
+
+export default function Demo() {
+  const [single, setSingle] = useState("")
+  const [multi, setMulti] = useState<string[]>([])
+
+  return (
+    <>
+      <SelectOption
+        options={options}
+        value={single}
+        onChange={val => setSingle(val as string)}
+        placeholder="Single select"
+      />
+
+      <SelectOption
+        options={options}
+        multiple
+        value={multi}
+        onChange={val => setMulti(val as string[])}
+        placeholder="Multi select"
+      />
+    </>
+  )
+};  ```
+
+### Props
+
+| Prop          | Type                                      | Default       | Description                                |
+| ------------- | ----------------------------------------- | ------------- | ------------------------------------------ |
+| `options`     | `SelectOptionType[] \| SelectGroupType[]` | required      | List of options (flat or grouped)          |
+| `multiple`    | `boolean`                                 | `false`       | Enables multi-select with chips            |
+| `placeholder` | `string`                                  | `"Select..."` | Placeholder text when no value is selected |
+| `disabled`    | `boolean`                                 | `false`       | Disables the select                        |
+| `error`       | `string`                                  | `undefined`   | Error message, highlights border           |
+| `helperText`  | `string`                                  | `undefined`   | Helper text shown below the select         |
+| `value`       | `string \| string[]`                      | internal      | Controlled value                           |
+| `onChange`    | `(value: string \| string[]) => void`     | optional      | Callback when value changes                |
+
+
 ### TypeScript
 
 Full TypeScript support is included. No additional types package needed.