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

package/README.md

@@ -51,6 +51,7 @@ pnpm test
 5. Submit a pull request
 
 ## PRs & Changeset Process
+
 - [ ] **Do not run `changeset` until your PR is ready for merge**
   - [ ] Complete all required changes
   - [ ] Apply PR review feedback
@@ -71,7 +72,7 @@ pnpm test
 ```
 src/
 ├── components/          # React components
-│   └── ui/              
+│   └── ui/
 │       ├── badge/       # Badge component
 │       │   ├── badge.tsx
 │       │   ├── badge.types.ts
@@ -86,7 +87,7 @@ src/
 |       ├── button.stories.tsx
 │       ├── divider/     # Divider component
 │       │   ├── divider.tsx
-│       │   ├── divider.types.ts   
+│       │   ├── divider.types.ts
 │       │   └── divider.test.tsx
 |       ├── divider.stories.tsx
 │       └── index.ts     # Component exports
@@ -152,7 +153,6 @@ module.exports = {
 };
 ```
 
-
 ### Typography
 
 The BusyFile Design System provides a consistent typography scale based on Nunito with predefined sizes and line-heights from Figma.
@@ -169,8 +169,8 @@ The BusyFile Design System provides a consistent typography scale based on Nunit
 | `--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>
@@ -179,13 +179,13 @@ The BusyFile Design System provides a consistent typography scale based on Nunit
   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`  |
@@ -196,8 +196,6 @@ These tokens can be used directly as Tailwind utility classes like bg-primary-30
 | `--color-primary-50` | `#f5b5b9` | `bg-primary-50` |
 | `--color-primary-60` | `#fceaea` | `bg-primary-60` |
 
-
-
 ### Neutral Colors
 
 | Token                | Hex       | Example Class   |
@@ -216,6 +214,7 @@ These tokens can be used directly as Tailwind utility classes like bg-primary-30
 | `--color-neutral-99` | `#f1f1f1` | `bg-neutral-99` |
 
 ### Semantic Colors
+
 | State       | Light     | Dark      | Example Classes                |
 | ----------- | --------- | --------- | ------------------------------ |
 | **Error**   | `#f9dcdf` | `#bf2234` | `bg-error-l`, `bg-error-d`     |
@@ -232,6 +231,23 @@ These tokens can be used directly as Tailwind utility classes like bg-primary-30
   Error Alert
 </div>
 
+# Card
+
+The `Card` component provides a flexible container with two variants `(widget1, widget2)` for displaying grouped content consistently across applications.
+
+## Usage
+
+```tsx
+<Card variant="widget-1">
+  <h3 className="text-lg font-semibold">Widget 1 Card</h3>
+  <p>This is a card with inner shadow and white background.</p>
+</Card>
+
+<Card variant="widget-2">
+  <h3 className="text-lg font-semibold">Widget 2 Card</h3>
+  <p>This card has a border with a subtle shadow.</p>
+</Card>
+```
 
 ## Badge
 
@@ -239,34 +255,37 @@ The `Badge` component is used to display small status indicators, tags, or label
 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>
-      <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>
+<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.).        |
+| 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
 
@@ -274,7 +293,7 @@ The `Button` component is a core interactive element in the design system. It su
 
 ## Usage
 
-```tsx
+````tsx
 ;
 <Button variant="default">Default</Button>
 <Button variant="primary">Primary</Button>
@@ -324,6 +343,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
@@ -341,6 +408,9 @@ pnpm build:types
 
 # Build Storybook
 pnpm build-storybook
+````
+
 ```
 
 Made with ❤️ by the BusyFile team
+```