@datawire-ai/busyfile-design-library 1.29.4 → 1.29.6
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 -10
- package/dist/index.js +3379 -3323
- package/dist/index.umd.cjs +34 -34
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +70 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -306,19 +306,41 @@ These tokens can be used directly as Tailwind utility classes like bg-primary-30
|
|
|
306
306
|
|
|
307
307
|
# Card
|
|
308
308
|
|
|
309
|
-
The `Card` component provides a flexible
|
|
309
|
+
The `Card` component provides a flexible and styled container for displaying grouped content consistently across your application.
|
|
310
|
+
It supports multiple visual variants and customizable shadow colors via both theme variables and direct color values.
|
|
311
|
+
|
|
312
|
+
## Usage
|
|
310
313
|
|
|
311
314
|
```tsx
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
315
|
+
import { Card } from '@/components/ui/card';
|
|
316
|
+
|
|
317
|
+
export function Example() {
|
|
318
|
+
return (
|
|
319
|
+
<section className="space-y-6">
|
|
320
|
+
{/* Widget 1 - Inner Shadow */}
|
|
321
|
+
<Card variant="widget-1" shadowColor="#3649EA">
|
|
322
|
+
<h3 className="text-lg font-semibold">Widget 1 Card</h3>
|
|
323
|
+
<p>This card uses an inner shadow and supports a custom inset color.</p>
|
|
324
|
+
</Card>
|
|
325
|
+
|
|
326
|
+
{/* Widget 2 - Border with Shadow */}
|
|
327
|
+
<Card variant="widget-2">
|
|
328
|
+
<h3 className="text-lg font-semibold">Widget 2 Card</h3>
|
|
329
|
+
<p>This card has a border with a subtle drop shadow.</p>
|
|
330
|
+
</Card>
|
|
331
|
+
</section>
|
|
332
|
+
);
|
|
333
|
+
}
|
|
321
334
|
```
|
|
335
|
+
| Prop | Type | Default | Description |
|
|
336
|
+
| ------------- | ----------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
337
|
+
| `variant` | `"widget-1"` | `"widget-2"` | `"widget-1"` | Determines the visual style of the card. |
|
|
338
|
+
| `shadowColor` | `string` | `undefined` | Optional. Accepts either a **HEX value** (e.g. `#3649EA`) or a **theme color variable** (e.g. `var(--color-primary-1)`) to customize the inner shadow color for `widget-1`. |
|
|
339
|
+
| `asChild` | `boolean` | `false` | If true, renders the component as a child element using Radix’s `<Slot>` for better composition. |
|
|
340
|
+
| `className` | `string` | `undefined` | Adds custom class names for additional styling. |
|
|
341
|
+
| `children` | `React.ReactNode` | — | Content inside the card. |
|
|
342
|
+
| `...props` | `React.HTMLAttributes<HTMLElement>` | — | Additional HTML attributes are spread onto the root element. |
|
|
343
|
+
|
|
322
344
|
|
|
323
345
|
# Toggle Button
|
|
324
346
|
|