@datawire-ai/busyfile-design-library 1.6.1 → 1.8.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 +45 -0
- package/dist/index.js +3478 -1542
- package/dist/index.umd.cjs +32 -32
- package/dist/style.css +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -281,6 +281,51 @@ The `Button` component is a core interactive element in the design system. It su
|
|
|
281
281
|
<Button variant="outline" size="sm">Outline Small</Button>
|
|
282
282
|
<Button size="icon"><Icon /></Button>
|
|
283
283
|
|
|
284
|
+
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
### Stepper
|
|
288
|
+
A re-usable stepper component to lead users through multi-step workflows (checkout, sign-up, forms, etc.).
|
|
289
|
+
Supports numeric, dots, progress, and labeled versions.
|
|
290
|
+
|
|
291
|
+
### Example
|
|
292
|
+
``` const steps = [
|
|
293
|
+
{ title: "Account Setup" },
|
|
294
|
+
{ title: "Profile Info" },
|
|
295
|
+
{ title: "Preferences" },
|
|
296
|
+
{ title: "Confirmation" },
|
|
297
|
+
];
|
|
298
|
+
|
|
299
|
+
export default function Example() {
|
|
300
|
+
return (
|
|
301
|
+
<div className="space-y-6">
|
|
302
|
+
{/* Numeric */}
|
|
303
|
+
<Stepper steps={steps} variant="numeric" />
|
|
304
|
+
|
|
305
|
+
{/* Dots */}
|
|
306
|
+
<Stepper steps={steps} variant="dots" />
|
|
307
|
+
|
|
308
|
+
{/* Progress */}
|
|
309
|
+
<Stepper steps={steps} variant="progress" />
|
|
310
|
+
|
|
311
|
+
{/* Labeled */}
|
|
312
|
+
<Stepper steps={steps} variant="labeled" />
|
|
313
|
+
</div>
|
|
314
|
+
);
|
|
315
|
+
}```
|
|
316
|
+
|
|
317
|
+
|
|
318
|
+
| Prop | Type | Default | Description |
|
|
319
|
+
| -------------- | ------------------------------------------------ | ----------- | ---------------------------------- |
|
|
320
|
+
| `steps` | `{ title?: string }[]` | `[]` | Steps with optional labels |
|
|
321
|
+
| `variant` | `"numeric" | "dots" | "progress" | "labeled"` | `"numeric"` | Visual style of the stepper |
|
|
322
|
+
| `initialStep` | `number` | `0` | Starting step index |
|
|
323
|
+
| `onStepChange` | `(step: number) => void` | `undefined` | Callback when step changes |
|
|
324
|
+
| `showControls` | `boolean` | `true` | Show back/next navigation controls |
|
|
325
|
+
| `className` | `string` | `undefined` | Additional Tailwind classes |
|
|
326
|
+
|
|
327
|
+
|
|
328
|
+
|
|
284
329
|
### TypeScript
|
|
285
330
|
|
|
286
331
|
Full TypeScript support is included. No additional types package needed.
|