@datawire-ai/busyfile-design-library 1.14.0 → 1.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -2
- package/dist/index.js +2835 -2532
- package/dist/index.umd.cjs +31 -31
- package/dist/style.css +1 -1
- package/package.json +6 -3
package/README.md
CHANGED
|
@@ -308,8 +308,6 @@ These tokens can be used directly as Tailwind utility classes like bg-primary-30
|
|
|
308
308
|
|
|
309
309
|
The `Card` component provides a flexible container with two variants `(widget1, widget2)` for displaying grouped content consistently across applications.
|
|
310
310
|
|
|
311
|
-
## Usage
|
|
312
|
-
|
|
313
311
|
```tsx
|
|
314
312
|
<Card variant="widget-1">
|
|
315
313
|
<h3 className="text-lg font-semibold">Widget 1 Card</h3>
|
|
@@ -322,6 +320,38 @@ The `Card` component provides a flexible container with two variants `(widget1,
|
|
|
322
320
|
</Card>
|
|
323
321
|
```
|
|
324
322
|
|
|
323
|
+
# Toggle Button
|
|
324
|
+
|
|
325
|
+
A customizable and accessible `toggle button` (switch) component. Supports both controlled (Toggle) and uncontrolled/stateful (StatefulToggle) usage.
|
|
326
|
+
|
|
327
|
+
## Usage
|
|
328
|
+
|
|
329
|
+
```tsx
|
|
330
|
+
// Controlled toggle
|
|
331
|
+
<Toggle checked={enabled} onChange={setEnabled} variant="classic" />
|
|
332
|
+
|
|
333
|
+
// Uncontrolled toggle
|
|
334
|
+
<StatefulToggle defaultChecked={true} variant="classic" />
|
|
335
|
+
|
|
336
|
+
// Disabled toggle
|
|
337
|
+
<Toggle checked={true} disabled />
|
|
338
|
+
```
|
|
339
|
+
|
|
340
|
+
### Props
|
|
341
|
+
|
|
342
|
+
| Prop | Type | Default | Description |
|
|
343
|
+
| ----------------- | -------------------------------- | ----------- | ----------------------------------------------------------- |
|
|
344
|
+
| `checked` | `boolean` | `false` | Whether the toggle is on or off (controlled). |
|
|
345
|
+
| `onChange` | `(checked: boolean) => void` | `-` | Callback fired when the toggle changes. |
|
|
346
|
+
| `variant` | `"classic"` \| `"modern"` \| ... | `"classic"` | Visual style variant (extend via `toggleVariants`). |
|
|
347
|
+
| `disabled` | `boolean` | `false` | Disables the toggle. |
|
|
348
|
+
| `className` | `string` | `-` | Additional classes for styling. |
|
|
349
|
+
| `id` | `string` | `-` | Optional id for the button element. |
|
|
350
|
+
| `name` | `string` | `-` | Optional name (useful for forms). |
|
|
351
|
+
| `aria-label` | `string` | `-` | Accessible label (required if no visible label is present). |
|
|
352
|
+
| `aria-labelledby` | `string` | `-` | ID of an element labeling the toggle. |
|
|
353
|
+
|
|
354
|
+
|
|
325
355
|
## Badge
|
|
326
356
|
|
|
327
357
|
The `Badge` component is used to display small status indicators, tags, or labels.
|