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

package/README.md

@@ -324,6 +324,54 @@ export default function Example() {
 | `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