@bloomkit/react 0.2.2 → 0.2.4
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 +71 -81
- package/dist/index.cjs +196 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.cts +25 -1
- package/dist/index.d.ts +25 -1
- package/dist/index.js +197 -17
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -29,6 +29,28 @@ Add the Google Fonts to your HTML `<head>`:
|
|
|
29
29
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Fraunces:opsz,wght@9..144,300;9..144,500&display=swap" rel="stylesheet" />
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
+
## Customization
|
|
33
|
+
|
|
34
|
+
All components accept a `className` prop for customization with Tailwind utility classes:
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
<Button variant="primary" className="rounded-full px-8">
|
|
38
|
+
Custom Button
|
|
39
|
+
</Button>
|
|
40
|
+
|
|
41
|
+
<Card className="bg-white shadow-xl max-w-md">
|
|
42
|
+
<CardContent>Custom styled card</CardContent>
|
|
43
|
+
</Card>
|
|
44
|
+
|
|
45
|
+
<Input className="border-blue-300 focus:border-blue-500" placeholder="Custom input" />
|
|
46
|
+
|
|
47
|
+
<Badge variant="sage" className="text-sm uppercase tracking-wider">
|
|
48
|
+
Custom Badge
|
|
49
|
+
</Badge>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Tailwind classes merge cleanly with bloom's defaults — your classes always win.
|
|
53
|
+
|
|
32
54
|
## Components
|
|
33
55
|
|
|
34
56
|
### Button
|
|
@@ -40,9 +62,12 @@ import { Button } from "@bloomkit/react";
|
|
|
40
62
|
<Button variant="secondary">Cancel</Button>
|
|
41
63
|
<Button variant="ghost">Skip</Button>
|
|
42
64
|
<Button variant="accent">Upgrade</Button>
|
|
65
|
+
<Button variant="success">Confirm</Button>
|
|
66
|
+
<Button variant="warning">Careful</Button>
|
|
67
|
+
<Button variant="danger">Delete</Button>
|
|
43
68
|
```
|
|
44
69
|
|
|
45
|
-
Variants: `primary` | `secondary` | `ghost` | `accent`
|
|
70
|
+
Variants: `primary` | `secondary` | `ghost` | `accent` | `success` | `warning` | `danger`
|
|
46
71
|
|
|
47
72
|
### Card
|
|
48
73
|
|
|
@@ -232,8 +257,11 @@ import { Skeleton } from "@bloomkit/react";
|
|
|
232
257
|
<Skeleton variant="text" />
|
|
233
258
|
<Skeleton variant="card" />
|
|
234
259
|
<Skeleton variant="avatar" />
|
|
260
|
+
<Skeleton variant="custom" className="h-[100px] w-[200px] rounded-full" />
|
|
235
261
|
```
|
|
236
262
|
|
|
263
|
+
Variants: `text` | `card` | `avatar` | `custom`
|
|
264
|
+
|
|
237
265
|
## Hooks
|
|
238
266
|
|
|
239
267
|
### useReducedMotion
|
|
@@ -271,7 +299,7 @@ import { ThemeProvider, useTheme } from "@bloomkit/react";
|
|
|
271
299
|
|
|
272
300
|
// Inside any component
|
|
273
301
|
function ThemeToggle() {
|
|
274
|
-
const { resolvedMode, toggleColorMode
|
|
302
|
+
const { resolvedMode, toggleColorMode } = useTheme();
|
|
275
303
|
|
|
276
304
|
return (
|
|
277
305
|
<button onClick={toggleColorMode}>
|
|
@@ -279,20 +307,54 @@ function ThemeToggle() {
|
|
|
279
307
|
</button>
|
|
280
308
|
);
|
|
281
309
|
}
|
|
282
|
-
|
|
283
|
-
// Or set explicitly
|
|
284
|
-
setColorMode("dark"); // force dark
|
|
285
|
-
setColorMode("light"); // force light
|
|
286
|
-
setColorMode("system"); // follow OS
|
|
287
310
|
```
|
|
288
311
|
|
|
289
|
-
|
|
312
|
+
### useTheme return values
|
|
313
|
+
|
|
314
|
+
| Property | Type | Description |
|
|
315
|
+
|----------|------|-------------|
|
|
316
|
+
| `colorMode` | `"light" \| "dark" \| "system"` | Current setting |
|
|
317
|
+
| `resolvedMode` | `"light" \| "dark"` | Resolved value (system preference applied) |
|
|
318
|
+
| `setColorMode` | `(mode) => void` | Set to `"dark"`, `"light"`, or `"system"` |
|
|
319
|
+
| `toggleColorMode` | `() => void` | Toggle between light and dark |
|
|
320
|
+
| `palette` | `string` | Active palette name |
|
|
321
|
+
| `setPalette` | `(name) => void` | Switch to a different palette |
|
|
322
|
+
| `palettes` | `string[]` | All available palette names |
|
|
323
|
+
|
|
324
|
+
The provider manages the `.dark` / `.light` class on `<html>` automatically and persists both color mode and palette choice to `localStorage`.
|
|
290
325
|
|
|
291
326
|
**Without the provider:** add the `dark` class or `data-theme="dark"` attribute to `<html>` manually, or let it follow the OS preference automatically (no setup needed).
|
|
292
327
|
|
|
293
328
|
## Palettes
|
|
294
329
|
|
|
295
|
-
|
|
330
|
+
### Built-in Presets
|
|
331
|
+
|
|
332
|
+
Bloom ships with 3 preset palettes you can use out of the box:
|
|
333
|
+
|
|
334
|
+
```tsx
|
|
335
|
+
import { ThemeProvider, builtInPalettes } from "@bloomkit/react";
|
|
336
|
+
|
|
337
|
+
// Pass all 3 presets — users can switch between bloom (default), midnight, desert, ocean
|
|
338
|
+
<ThemeProvider palettes={builtInPalettes}>
|
|
339
|
+
<App />
|
|
340
|
+
</ThemeProvider>
|
|
341
|
+
```
|
|
342
|
+
|
|
343
|
+
Or import individual palettes:
|
|
344
|
+
|
|
345
|
+
```tsx
|
|
346
|
+
import { midnightGarden, desertRose, oceanMist } from "@bloomkit/react";
|
|
347
|
+
```
|
|
348
|
+
|
|
349
|
+
| Preset | Fonts | Vibe |
|
|
350
|
+
|--------|-------|------|
|
|
351
|
+
| **Midnight Garden** | Playfair Display + Cormorant Garamond | Deep forest greens, moonlit silvers |
|
|
352
|
+
| **Desert Rose** | Lora + Karla | Terracotta, ochre, dried sage |
|
|
353
|
+
| **Ocean Mist** | Space Grotesk + Nunito | Cool aquas, seafoam, pearl whites |
|
|
354
|
+
|
|
355
|
+
### Custom Palettes
|
|
356
|
+
|
|
357
|
+
Define your own palettes and let users switch between them at runtime. Each palette can have its own light and dark mode colors, fonts, radius, and shadows.
|
|
296
358
|
|
|
297
359
|
```tsx
|
|
298
360
|
import { ThemeProvider, useTheme, type BloomPalette } from "@bloomkit/react";
|
|
@@ -358,78 +420,6 @@ function PaletteSwitcher() {
|
|
|
358
420
|
|
|
359
421
|
The `"bloom"` palette is always available as the default. Custom palettes override the default tokens — any token you don't specify falls back to Bloom's defaults. Both color mode and palette choice are persisted to `localStorage`.
|
|
360
422
|
|
|
361
|
-
## Theming with CSS
|
|
362
|
-
|
|
363
|
-
You can also theme with pure CSS instead of the provider — override tokens directly in your stylesheet:
|
|
364
|
-
|
|
365
|
-
### Example: "Ocean Mist" theme
|
|
366
|
-
|
|
367
|
-
```css
|
|
368
|
-
/* index.css */
|
|
369
|
-
@import "@bloomkit/react/styles.css";
|
|
370
|
-
|
|
371
|
-
/* Light mode */
|
|
372
|
-
:root {
|
|
373
|
-
/* Fonts */
|
|
374
|
-
--bloom-font: 'Nunito', sans-serif;
|
|
375
|
-
--bloom-font-display: 'Space Grotesk', sans-serif;
|
|
376
|
-
|
|
377
|
-
/* Surfaces */
|
|
378
|
-
--bloom-bg: #F4F8FA;
|
|
379
|
-
--bloom-surface: #E8F0F4;
|
|
380
|
-
--bloom-surface2: #D4E2EA;
|
|
381
|
-
|
|
382
|
-
/* Text */
|
|
383
|
-
--bloom-text: #1A2E3A;
|
|
384
|
-
--bloom-text-secondary: #5E7A8C;
|
|
385
|
-
|
|
386
|
-
/* Accents — success/primary (sage) */
|
|
387
|
-
--bloom-accent1: #6AB8C4;
|
|
388
|
-
--bloom-accent1-deep: #3A96A8;
|
|
389
|
-
|
|
390
|
-
/* Accents — warning (sand) */
|
|
391
|
-
--bloom-accent2: #E0A860;
|
|
392
|
-
--bloom-accent2-deep: #C08840;
|
|
393
|
-
|
|
394
|
-
/* Accents — info/accent (lavender) */
|
|
395
|
-
--bloom-accent3: #7CA0D4;
|
|
396
|
-
--bloom-accent3-deep: #5A80B8;
|
|
397
|
-
|
|
398
|
-
/* Accents — error/danger (rose) */
|
|
399
|
-
--bloom-accent4: #D47A7A;
|
|
400
|
-
--bloom-accent4-deep: #B85A5A;
|
|
401
|
-
|
|
402
|
-
/* Shadows */
|
|
403
|
-
--bloom-shadow: 0 2px 24px rgba(26, 46, 58, 0.06);
|
|
404
|
-
--bloom-shadow-hover: 0 8px 40px rgba(26, 46, 58, 0.1);
|
|
405
|
-
|
|
406
|
-
/* Shape — optional */
|
|
407
|
-
--bloom-radius-sm: 6px;
|
|
408
|
-
--bloom-radius: 10px;
|
|
409
|
-
--bloom-radius-lg: 14px;
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
/* Dark mode */
|
|
413
|
-
:root.dark,
|
|
414
|
-
[data-theme="dark"] {
|
|
415
|
-
--bloom-bg: #0E1A20;
|
|
416
|
-
--bloom-surface: #162228;
|
|
417
|
-
--bloom-surface2: #1E2E36;
|
|
418
|
-
--bloom-text: #D8E8EE;
|
|
419
|
-
--bloom-text-secondary: #7A9AAC;
|
|
420
|
-
--bloom-accent1: #4A9AAC;
|
|
421
|
-
--bloom-accent1-deep: #2A7A8C;
|
|
422
|
-
--bloom-accent2: #C89048;
|
|
423
|
-
--bloom-accent2-deep: #A87030;
|
|
424
|
-
--bloom-accent3: #5A80B8;
|
|
425
|
-
--bloom-accent3-deep: #3A60A0;
|
|
426
|
-
--bloom-accent4: #B85A5A;
|
|
427
|
-
--bloom-accent4-deep: #983A3A;
|
|
428
|
-
--bloom-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
|
|
429
|
-
--bloom-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.4);
|
|
430
|
-
}
|
|
431
|
-
```
|
|
432
|
-
|
|
433
423
|
### Available tokens
|
|
434
424
|
|
|
435
425
|
| Token | What it controls |
|
package/dist/index.cjs
CHANGED
|
@@ -119,13 +119,13 @@ var buttonVariants = _classvarianceauthority.cva.call(void 0,
|
|
|
119
119
|
"active:translate-y-0 active:scale-[0.98]"
|
|
120
120
|
],
|
|
121
121
|
secondary: [
|
|
122
|
-
"bg-[var(--bloom-surface)]
|
|
122
|
+
"bg-[var(--bloom-surface)] color-[var(--bloom-text)]",
|
|
123
123
|
"border border-[var(--bloom-surface2)]",
|
|
124
124
|
"hover:-translate-y-[2px] hover:shadow-[var(--bloom-shadow-hover)]",
|
|
125
125
|
"active:translate-y-0 active:scale-[0.98]"
|
|
126
126
|
],
|
|
127
127
|
ghost: [
|
|
128
|
-
"bg-transparent
|
|
128
|
+
"bg-transparent color-[var(--bloom-text)]",
|
|
129
129
|
"hover:bg-[var(--bloom-surface)]",
|
|
130
130
|
"active:scale-[0.98]"
|
|
131
131
|
],
|
|
@@ -145,7 +145,7 @@ var buttonVariants = _classvarianceauthority.cva.call(void 0,
|
|
|
145
145
|
"active:translate-y-0 active:scale-[0.98]"
|
|
146
146
|
],
|
|
147
147
|
success: [
|
|
148
|
-
"bg-[var(--bloom-accent1-deep)]
|
|
148
|
+
"bg-[var(--bloom-accent1)] color-[var(--bloom-accent1-deep)]",
|
|
149
149
|
"hover:-translate-y-[2px] hover:shadow-[var(--bloom-shadow-hover)]",
|
|
150
150
|
"active:translate-y-0 active:scale-[0.98]"
|
|
151
151
|
]
|
|
@@ -224,7 +224,7 @@ var CardTitle = _react.forwardRef.call(void 0,
|
|
|
224
224
|
{
|
|
225
225
|
ref,
|
|
226
226
|
className: cn(
|
|
227
|
-
"font-[family-name:var(--bloom-font-display)] text-[18px] font-medium
|
|
227
|
+
"font-[family-name:var(--bloom-font-display)] text-[18px] font-medium color-[var(--bloom-text)] leading-[var(--bloom-leading-heading)]",
|
|
228
228
|
className
|
|
229
229
|
),
|
|
230
230
|
...props
|
|
@@ -347,16 +347,16 @@ var badgeVariants = _classvarianceauthority.cva.call(void 0,
|
|
|
347
347
|
"inline-flex items-center gap-[var(--space-xs)]",
|
|
348
348
|
"rounded-[var(--bloom-radius-pill)]",
|
|
349
349
|
"px-[var(--space-md)] py-[var(--space-xs)]",
|
|
350
|
-
"text-[var(--bloom-text-micro)] font-medium font-[family-name:var(--bloom-font)]",
|
|
350
|
+
"text-[length:var(--bloom-text-micro)] font-medium font-[family-name:var(--bloom-font)]",
|
|
351
351
|
"tracking-[var(--bloom-letter-wide)] uppercase"
|
|
352
352
|
],
|
|
353
353
|
{
|
|
354
354
|
variants: {
|
|
355
355
|
variant: {
|
|
356
|
-
sage: "bg-[var(--bloom-accent1)]/20
|
|
357
|
-
sand: "bg-[var(--bloom-accent2)]/20
|
|
358
|
-
lavender: "bg-[var(--bloom-accent3)]/20
|
|
359
|
-
rose: "bg-[var(--bloom-accent4)]/20
|
|
356
|
+
sage: "bg-[var(--bloom-accent1)]/20 color-[var(--bloom-accent1-deep)]",
|
|
357
|
+
sand: "bg-[var(--bloom-accent2)]/20 color-[var(--bloom-accent2-deep)]",
|
|
358
|
+
lavender: "bg-[var(--bloom-accent3)]/20 color-[var(--bloom-accent3-deep)]",
|
|
359
|
+
rose: "bg-[var(--bloom-accent4)]/20 color-[var(--bloom-accent4-deep)]"
|
|
360
360
|
}
|
|
361
361
|
},
|
|
362
362
|
defaultVariants: {
|
|
@@ -488,16 +488,16 @@ var avatarVariants = _classvarianceauthority.cva.call(void 0,
|
|
|
488
488
|
[
|
|
489
489
|
"relative inline-flex items-center justify-center",
|
|
490
490
|
"rounded-full overflow-hidden",
|
|
491
|
-
"bg-[var(--bloom-accent1)]/20
|
|
491
|
+
"bg-[var(--bloom-accent1)]/20 color-[var(--bloom-accent1-deep)]",
|
|
492
492
|
"font-[family-name:var(--bloom-font)] font-medium",
|
|
493
493
|
"select-none shrink-0"
|
|
494
494
|
],
|
|
495
495
|
{
|
|
496
496
|
variants: {
|
|
497
497
|
size: {
|
|
498
|
-
sm: "h-[32px] w-[32px] text-[var(--bloom-text-micro)]",
|
|
499
|
-
md: "h-[40px] w-[40px] text-[var(--bloom-text-caption)]",
|
|
500
|
-
lg: "h-[56px] w-[56px] text-[var(--bloom-text-body)]"
|
|
498
|
+
sm: "h-[32px] w-[32px] text-[length:var(--bloom-text-micro)]",
|
|
499
|
+
md: "h-[40px] w-[40px] text-[length:var(--bloom-text-caption)]",
|
|
500
|
+
lg: "h-[56px] w-[56px] text-[length:var(--bloom-text-body)]"
|
|
501
501
|
}
|
|
502
502
|
},
|
|
503
503
|
defaultVariants: {
|
|
@@ -965,8 +965,8 @@ var TabsTrigger = _react.forwardRef.call(void 0, ({ className, ...props }, ref)
|
|
|
965
965
|
"color-[var(--bloom-text-secondary)]",
|
|
966
966
|
"rounded-[var(--bloom-radius-pill)]",
|
|
967
967
|
"transition-all duration-[var(--bloom-duration)] ease-[var(--bloom-ease)]",
|
|
968
|
-
"hover:
|
|
969
|
-
"data-[state=active]:
|
|
968
|
+
"hover:color-[var(--bloom-text)]",
|
|
969
|
+
"data-[state=active]:color-[var(--bloom-text)]",
|
|
970
970
|
"data-[state=active]:bg-[var(--bloom-surface2)]",
|
|
971
971
|
"focus-visible:outline-none focus-visible:ring-[4px] focus-visible:ring-[var(--bloom-accent1)]/30",
|
|
972
972
|
"disabled:pointer-events-none disabled:opacity-50",
|
|
@@ -1281,6 +1281,179 @@ var Skeleton = _react.forwardRef.call(void 0,
|
|
|
1281
1281
|
);
|
|
1282
1282
|
Skeleton.displayName = "Skeleton";
|
|
1283
1283
|
|
|
1284
|
+
// src/components/checkbox/checkbox.tsx
|
|
1285
|
+
|
|
1286
|
+
var _reactcheckbox = require('@radix-ui/react-checkbox'); var CheckboxPrimitive = _interopRequireWildcard(_reactcheckbox);
|
|
1287
|
+
|
|
1288
|
+
var Checkbox = _react.forwardRef.call(void 0,
|
|
1289
|
+
({ className, label, ...props }, ref) => {
|
|
1290
|
+
const checkbox = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1291
|
+
CheckboxPrimitive.Root,
|
|
1292
|
+
{
|
|
1293
|
+
ref,
|
|
1294
|
+
className: cn(
|
|
1295
|
+
"peer h-[20px] w-[20px] shrink-0 cursor-pointer",
|
|
1296
|
+
"rounded-[var(--bloom-radius-sm)]",
|
|
1297
|
+
"border border-[var(--bloom-surface2)]",
|
|
1298
|
+
"bg-[var(--bloom-surface)]",
|
|
1299
|
+
"transition-all duration-[var(--bloom-duration-fast)] ease-[var(--bloom-ease)]",
|
|
1300
|
+
"focus-visible:outline-none focus-visible:ring-[4px] focus-visible:ring-[var(--bloom-accent1)]/30",
|
|
1301
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
1302
|
+
"data-[state=checked]:bg-[var(--bloom-accent1-deep)] data-[state=checked]:border-[var(--bloom-accent1-deep)]",
|
|
1303
|
+
className
|
|
1304
|
+
),
|
|
1305
|
+
...props,
|
|
1306
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckboxPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1307
|
+
"svg",
|
|
1308
|
+
{
|
|
1309
|
+
width: "12",
|
|
1310
|
+
height: "12",
|
|
1311
|
+
viewBox: "0 0 12 12",
|
|
1312
|
+
fill: "none",
|
|
1313
|
+
stroke: "white",
|
|
1314
|
+
strokeWidth: "2",
|
|
1315
|
+
strokeLinecap: "round",
|
|
1316
|
+
strokeLinejoin: "round",
|
|
1317
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M2.5 6l2.5 2.5 4.5-5" })
|
|
1318
|
+
}
|
|
1319
|
+
) })
|
|
1320
|
+
}
|
|
1321
|
+
);
|
|
1322
|
+
if (!label) return checkbox;
|
|
1323
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "inline-flex items-center gap-[var(--space-sm)] cursor-pointer", children: [
|
|
1324
|
+
checkbox,
|
|
1325
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-[length:var(--bloom-text-body)] font-[family-name:var(--bloom-font)] color-[var(--bloom-text)]", children: label })
|
|
1326
|
+
] });
|
|
1327
|
+
}
|
|
1328
|
+
);
|
|
1329
|
+
Checkbox.displayName = "Checkbox";
|
|
1330
|
+
|
|
1331
|
+
// src/components/select/select.tsx
|
|
1332
|
+
|
|
1333
|
+
var _reactselect = require('@radix-ui/react-select'); var SelectPrimitive = _interopRequireWildcard(_reactselect);
|
|
1334
|
+
|
|
1335
|
+
var Select = SelectPrimitive.Root;
|
|
1336
|
+
var SelectTrigger = _react.forwardRef.call(void 0,
|
|
1337
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
1338
|
+
SelectPrimitive.Trigger,
|
|
1339
|
+
{
|
|
1340
|
+
ref,
|
|
1341
|
+
className: cn(
|
|
1342
|
+
"inline-flex items-center justify-between gap-[var(--space-sm)]",
|
|
1343
|
+
"h-[44px] w-full px-[var(--space-lg)]",
|
|
1344
|
+
"rounded-[var(--bloom-radius)] bg-[var(--bloom-surface)]",
|
|
1345
|
+
"border border-[var(--bloom-surface2)]",
|
|
1346
|
+
"text-[length:var(--bloom-text-body)] font-[family-name:var(--bloom-font)] color-[var(--bloom-text)]",
|
|
1347
|
+
"transition-all duration-[var(--bloom-duration)] ease-[var(--bloom-ease)]",
|
|
1348
|
+
"focus-visible:outline-none focus-visible:ring-[4px] focus-visible:ring-[var(--bloom-accent1)]/20 focus-visible:border-[var(--bloom-accent1-deep)]",
|
|
1349
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
1350
|
+
"data-[placeholder]:color-[var(--bloom-text-secondary)]",
|
|
1351
|
+
className
|
|
1352
|
+
),
|
|
1353
|
+
...props,
|
|
1354
|
+
children: [
|
|
1355
|
+
children,
|
|
1356
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Icon, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1357
|
+
"svg",
|
|
1358
|
+
{
|
|
1359
|
+
width: "16",
|
|
1360
|
+
height: "16",
|
|
1361
|
+
viewBox: "0 0 16 16",
|
|
1362
|
+
fill: "none",
|
|
1363
|
+
stroke: "currentColor",
|
|
1364
|
+
strokeWidth: "1.5",
|
|
1365
|
+
strokeLinecap: "round",
|
|
1366
|
+
strokeLinejoin: "round",
|
|
1367
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M4 6l4 4 4-4" })
|
|
1368
|
+
}
|
|
1369
|
+
) })
|
|
1370
|
+
]
|
|
1371
|
+
}
|
|
1372
|
+
)
|
|
1373
|
+
);
|
|
1374
|
+
SelectTrigger.displayName = "SelectTrigger";
|
|
1375
|
+
var SelectValue = SelectPrimitive.Value;
|
|
1376
|
+
var SelectContent = _react.forwardRef.call(void 0,
|
|
1377
|
+
({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1378
|
+
SelectPrimitive.Content,
|
|
1379
|
+
{
|
|
1380
|
+
ref,
|
|
1381
|
+
position,
|
|
1382
|
+
sideOffset: 8,
|
|
1383
|
+
className: cn(
|
|
1384
|
+
"bloom z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden",
|
|
1385
|
+
"rounded-[var(--bloom-radius)]",
|
|
1386
|
+
"bg-[var(--bloom-surface)] p-[var(--space-xs)]",
|
|
1387
|
+
"shadow-[var(--bloom-shadow-hover)]",
|
|
1388
|
+
"border border-[var(--bloom-surface2)]",
|
|
1389
|
+
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
1390
|
+
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
1391
|
+
className
|
|
1392
|
+
),
|
|
1393
|
+
...props,
|
|
1394
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1395
|
+
SelectPrimitive.Viewport,
|
|
1396
|
+
{
|
|
1397
|
+
className: cn(
|
|
1398
|
+
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
1399
|
+
),
|
|
1400
|
+
children
|
|
1401
|
+
}
|
|
1402
|
+
)
|
|
1403
|
+
}
|
|
1404
|
+
) })
|
|
1405
|
+
);
|
|
1406
|
+
SelectContent.displayName = "SelectContent";
|
|
1407
|
+
var SelectItem = _react.forwardRef.call(void 0,
|
|
1408
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
1409
|
+
SelectPrimitive.Item,
|
|
1410
|
+
{
|
|
1411
|
+
ref,
|
|
1412
|
+
className: cn(
|
|
1413
|
+
"relative flex items-center",
|
|
1414
|
+
"rounded-[var(--bloom-radius-sm)]",
|
|
1415
|
+
"px-[var(--space-md)] py-[var(--space-sm)] pl-[var(--space-2xl)]",
|
|
1416
|
+
"text-[length:var(--bloom-text-body)] font-[family-name:var(--bloom-font)] color-[var(--bloom-text)]",
|
|
1417
|
+
"cursor-pointer select-none outline-none",
|
|
1418
|
+
"transition-colors duration-[var(--bloom-duration-fast)]",
|
|
1419
|
+
"data-[highlighted]:bg-[var(--bloom-surface2)]",
|
|
1420
|
+
"data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
|
|
1421
|
+
className
|
|
1422
|
+
),
|
|
1423
|
+
...props,
|
|
1424
|
+
children: [
|
|
1425
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute left-[var(--space-sm)] flex h-[16px] w-[16px] items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1426
|
+
"svg",
|
|
1427
|
+
{
|
|
1428
|
+
width: "12",
|
|
1429
|
+
height: "12",
|
|
1430
|
+
viewBox: "0 0 12 12",
|
|
1431
|
+
fill: "none",
|
|
1432
|
+
stroke: "currentColor",
|
|
1433
|
+
strokeWidth: "2",
|
|
1434
|
+
strokeLinecap: "round",
|
|
1435
|
+
strokeLinejoin: "round",
|
|
1436
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M2.5 6l2.5 2.5 4.5-5" })
|
|
1437
|
+
}
|
|
1438
|
+
) }) }),
|
|
1439
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.ItemText, { children })
|
|
1440
|
+
]
|
|
1441
|
+
}
|
|
1442
|
+
)
|
|
1443
|
+
);
|
|
1444
|
+
SelectItem.displayName = "SelectItem";
|
|
1445
|
+
var SelectSeparator = _react.forwardRef.call(void 0,
|
|
1446
|
+
({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1447
|
+
SelectPrimitive.Separator,
|
|
1448
|
+
{
|
|
1449
|
+
ref,
|
|
1450
|
+
className: cn("h-px my-[var(--space-xs)] bg-[var(--bloom-surface2)]", className),
|
|
1451
|
+
...props
|
|
1452
|
+
}
|
|
1453
|
+
)
|
|
1454
|
+
);
|
|
1455
|
+
SelectSeparator.displayName = "SelectSeparator";
|
|
1456
|
+
|
|
1284
1457
|
// src/components/theme/theme.tsx
|
|
1285
1458
|
|
|
1286
1459
|
|
|
@@ -1630,5 +1803,12 @@ var builtInPalettes = [midnightGarden, desertRose, oceanMist];
|
|
|
1630
1803
|
|
|
1631
1804
|
|
|
1632
1805
|
|
|
1633
|
-
|
|
1806
|
+
|
|
1807
|
+
|
|
1808
|
+
|
|
1809
|
+
|
|
1810
|
+
|
|
1811
|
+
|
|
1812
|
+
|
|
1813
|
+
exports.Alert = Alert; exports.AlertDescription = AlertDescription; exports.AlertTitle = AlertTitle; exports.Avatar = Avatar; exports.AvatarGroup = AvatarGroup; exports.Badge = Badge; exports.Button = Button; exports.Card = Card; exports.CardContent = CardContent; exports.CardDescription = CardDescription; exports.CardFooter = CardFooter; exports.CardHeader = CardHeader; exports.CardTitle = CardTitle; exports.Checkbox = Checkbox; exports.DatePicker = DatePicker; exports.Dropdown = Dropdown; exports.DropdownItem = DropdownItem; exports.DropdownSeparator = DropdownSeparator; exports.Input = Input; exports.Modal = Modal; exports.Progress = Progress; exports.ProgressCircular = ProgressCircular; exports.Select = Select; exports.SelectContent = SelectContent; exports.SelectItem = SelectItem; exports.SelectSeparator = SelectSeparator; exports.SelectTrigger = SelectTrigger; exports.SelectValue = SelectValue; exports.Skeleton = Skeleton; exports.Slider = Slider; exports.Tabs = Tabs; exports.TabsContent = TabsContent; exports.TabsList = TabsList; exports.TabsTrigger = TabsTrigger; exports.Textarea = Textarea; exports.ThemeProvider = ThemeProvider; exports.ToastProvider = ToastProvider; exports.Toggle = Toggle; exports.Tooltip = Tooltip; exports.TooltipProvider = TooltipProvider; exports.alertVariants = alertVariants; exports.avatarVariants = avatarVariants; exports.badgeVariants = badgeVariants; exports.bloomSpring = bloomSpring; exports.bloomTransition = bloomTransition; exports.bloomTransitionFast = bloomTransitionFast; exports.bloomTransitionSlow = bloomTransitionSlow; exports.builtInPalettes = builtInPalettes; exports.buttonVariants = buttonVariants; exports.cardHoverLift = cardHoverLift; exports.cardVariants = cardVariants; exports.cn = cn; exports.desertRose = desertRose; exports.fadeIn = fadeIn; exports.hoverLift = hoverLift; exports.inputVariants = inputVariants; exports.midnightGarden = midnightGarden; exports.oceanMist = oceanMist; exports.progressFillVariants = progressFillVariants; exports.progressTrackVariants = progressTrackVariants; exports.skeletonVariants = skeletonVariants; exports.slideUp = slideUp; exports.tabsListVariants = tabsListVariants; exports.toastVariants = toastVariants; exports.useBreathing = useBreathing; exports.useReducedMotion = useReducedMotion; exports.useTheme = useTheme; exports.useToast = useToast;
|
|
1634
1814
|
//# sourceMappingURL=index.cjs.map
|