@bloomkit/react 0.2.7 → 0.2.9
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 +12 -0
- package/dist/index.cjs +210 -210
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +210 -210
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -102,11 +102,11 @@ import { cva } from "class-variance-authority";
|
|
|
102
102
|
var buttonVariants = cva(
|
|
103
103
|
[
|
|
104
104
|
"inline-flex items-center justify-center",
|
|
105
|
-
"font-
|
|
105
|
+
"font-(family-name:--bloom-font) text-[14px] font-normal",
|
|
106
106
|
"h-[44px] px-[28px]",
|
|
107
|
-
"rounded-
|
|
108
|
-
"transition-all duration-
|
|
109
|
-
"focus-visible:outline-none focus-visible:ring-
|
|
107
|
+
"rounded-(--bloom-radius-pill)",
|
|
108
|
+
"transition-all duration-(--bloom-duration) ease-(--bloom-ease)",
|
|
109
|
+
"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-(--bloom-accent1)/30",
|
|
110
110
|
"disabled:pointer-events-none disabled:opacity-50",
|
|
111
111
|
"relative overflow-hidden cursor-pointer"
|
|
112
112
|
],
|
|
@@ -114,39 +114,39 @@ var buttonVariants = cva(
|
|
|
114
114
|
variants: {
|
|
115
115
|
variant: {
|
|
116
116
|
primary: [
|
|
117
|
-
"bg-
|
|
118
|
-
"hover:-translate-y-[2px] hover:shadow-
|
|
117
|
+
"bg-(--bloom-accent1-deep) text-white",
|
|
118
|
+
"hover:-translate-y-[2px] hover:shadow-(--bloom-shadow-hover)",
|
|
119
119
|
"active:translate-y-0 active:scale-[0.98]"
|
|
120
120
|
],
|
|
121
121
|
secondary: [
|
|
122
|
-
"bg-
|
|
123
|
-
"border border-
|
|
124
|
-
"hover:-translate-y-[2px] hover:shadow-
|
|
122
|
+
"bg-(--bloom-surface) color-(--bloom-text)",
|
|
123
|
+
"border border-(--bloom-surface2)",
|
|
124
|
+
"hover:-translate-y-[2px] hover:shadow-(--bloom-shadow-hover)",
|
|
125
125
|
"active:translate-y-0 active:scale-[0.98]"
|
|
126
126
|
],
|
|
127
127
|
ghost: [
|
|
128
|
-
"bg-transparent color-
|
|
129
|
-
"hover:bg-
|
|
128
|
+
"bg-transparent color-(--bloom-text)",
|
|
129
|
+
"hover:bg-(--bloom-surface)",
|
|
130
130
|
"active:scale-[0.98]"
|
|
131
131
|
],
|
|
132
132
|
accent: [
|
|
133
|
-
"bg-
|
|
134
|
-
"hover:-translate-y-[2px] hover:shadow-
|
|
133
|
+
"bg-(--bloom-accent3-deep) text-white",
|
|
134
|
+
"hover:-translate-y-[2px] hover:shadow-(--bloom-shadow-hover)",
|
|
135
135
|
"active:translate-y-0 active:scale-[0.98]"
|
|
136
136
|
],
|
|
137
137
|
danger: [
|
|
138
|
-
"bg-
|
|
139
|
-
"hover:-translate-y-[2px] hover:shadow-
|
|
138
|
+
"bg-(--bloom-accent4-deep) text-white",
|
|
139
|
+
"hover:-translate-y-[2px] hover:shadow-(--bloom-shadow-hover)",
|
|
140
140
|
"active:translate-y-0 active:scale-[0.98]"
|
|
141
141
|
],
|
|
142
142
|
warning: [
|
|
143
|
-
"bg-
|
|
144
|
-
"hover:-translate-y-[2px] hover:shadow-
|
|
143
|
+
"bg-(--bloom-accent2-deep) text-white",
|
|
144
|
+
"hover:-translate-y-[2px] hover:shadow-(--bloom-shadow-hover)",
|
|
145
145
|
"active:translate-y-0 active:scale-[0.98]"
|
|
146
146
|
],
|
|
147
147
|
success: [
|
|
148
|
-
"bg-
|
|
149
|
-
"hover:-translate-y-[2px] hover:shadow-
|
|
148
|
+
"bg-(--bloom-accent1) color-(--bloom-accent1-deep)",
|
|
149
|
+
"hover:-translate-y-[2px] hover:shadow-(--bloom-shadow-hover)",
|
|
150
150
|
"active:translate-y-0 active:scale-[0.98]"
|
|
151
151
|
]
|
|
152
152
|
}
|
|
@@ -182,9 +182,9 @@ import { forwardRef as forwardRef2 } from "react";
|
|
|
182
182
|
import { cva as cva2 } from "class-variance-authority";
|
|
183
183
|
var cardVariants = cva2(
|
|
184
184
|
[
|
|
185
|
-
"rounded-
|
|
186
|
-
"shadow-
|
|
187
|
-
"transition-all duration-
|
|
185
|
+
"rounded-(--bloom-radius-lg) bg-(--bloom-surface)",
|
|
186
|
+
"shadow-(--bloom-shadow)",
|
|
187
|
+
"transition-all duration-(--bloom-duration) ease-(--bloom-ease)",
|
|
188
188
|
"relative overflow-hidden"
|
|
189
189
|
],
|
|
190
190
|
{
|
|
@@ -194,11 +194,11 @@ var cardVariants = cva2(
|
|
|
194
194
|
interactive: [
|
|
195
195
|
"cursor-pointer",
|
|
196
196
|
"border border-transparent",
|
|
197
|
-
"hover:border-
|
|
198
|
-
"hover:-translate-y-[4px] hover:shadow-
|
|
197
|
+
"hover:border-(--bloom-surface2)",
|
|
198
|
+
"hover:-translate-y-[4px] hover:shadow-(--bloom-shadow-hover)"
|
|
199
199
|
],
|
|
200
200
|
featured: [
|
|
201
|
-
"border border-
|
|
201
|
+
"border border-(--bloom-accent1)/30"
|
|
202
202
|
]
|
|
203
203
|
}
|
|
204
204
|
},
|
|
@@ -215,7 +215,7 @@ var Card = forwardRef2(
|
|
|
215
215
|
);
|
|
216
216
|
Card.displayName = "Card";
|
|
217
217
|
var CardHeader = forwardRef2(
|
|
218
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("p-
|
|
218
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("p-(--space-xl) pb-0", className), ...props })
|
|
219
219
|
);
|
|
220
220
|
CardHeader.displayName = "CardHeader";
|
|
221
221
|
var CardTitle = forwardRef2(
|
|
@@ -224,7 +224,7 @@ var CardTitle = forwardRef2(
|
|
|
224
224
|
{
|
|
225
225
|
ref,
|
|
226
226
|
className: cn(
|
|
227
|
-
"font-
|
|
227
|
+
"font-(family-name:--bloom-font-display) text-[18px] font-medium color-(--bloom-text) leading-(--bloom-leading-heading)",
|
|
228
228
|
className
|
|
229
229
|
),
|
|
230
230
|
...props
|
|
@@ -237,18 +237,18 @@ var CardDescription = forwardRef2(
|
|
|
237
237
|
"p",
|
|
238
238
|
{
|
|
239
239
|
ref,
|
|
240
|
-
className: cn("text-
|
|
240
|
+
className: cn("text-(length:--bloom-text-caption) color-(--bloom-text-secondary) mt-(--space-xs)", className),
|
|
241
241
|
...props
|
|
242
242
|
}
|
|
243
243
|
)
|
|
244
244
|
);
|
|
245
245
|
CardDescription.displayName = "CardDescription";
|
|
246
246
|
var CardContent = forwardRef2(
|
|
247
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("p-
|
|
247
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("p-(--space-xl)", className), ...props })
|
|
248
248
|
);
|
|
249
249
|
CardContent.displayName = "CardContent";
|
|
250
250
|
var CardFooter = forwardRef2(
|
|
251
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("p-
|
|
251
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("p-(--space-xl) pt-0 flex items-center", className), ...props })
|
|
252
252
|
);
|
|
253
253
|
CardFooter.displayName = "CardFooter";
|
|
254
254
|
|
|
@@ -259,14 +259,14 @@ import { forwardRef as forwardRef3 } from "react";
|
|
|
259
259
|
import { cva as cva3 } from "class-variance-authority";
|
|
260
260
|
var inputVariants = cva3([
|
|
261
261
|
"w-full",
|
|
262
|
-
"rounded-
|
|
263
|
-
"color-
|
|
264
|
-
"font-
|
|
265
|
-
"px-
|
|
266
|
-
"border border-
|
|
267
|
-
"transition-all duration-
|
|
268
|
-
"placeholder:color-
|
|
269
|
-
"focus:outline-none focus:ring-
|
|
262
|
+
"rounded-(--bloom-radius) bg-(--bloom-surface)",
|
|
263
|
+
"color-(--bloom-text) text-(length:--bloom-text-body)",
|
|
264
|
+
"font-(family-name:--bloom-font)",
|
|
265
|
+
"px-(--space-lg) py-(--space-md)",
|
|
266
|
+
"border border-(--bloom-surface2)",
|
|
267
|
+
"transition-all duration-(--bloom-duration) ease-(--bloom-ease)",
|
|
268
|
+
"placeholder:color-(--bloom-text-secondary)/60",
|
|
269
|
+
"focus:outline-none focus:ring-4 focus:ring-(--bloom-accent1)/20 focus:border-(--bloom-accent1-deep)",
|
|
270
270
|
"disabled:opacity-50 disabled:cursor-not-allowed"
|
|
271
271
|
]);
|
|
272
272
|
|
|
@@ -301,20 +301,20 @@ import { forwardRef as forwardRef4 } from "react";
|
|
|
301
301
|
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
302
302
|
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
303
303
|
var Toggle = forwardRef4(
|
|
304
|
-
({ className, label, ...props }, ref) => /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-
|
|
304
|
+
({ className, label, ...props }, ref) => /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-(--space-md)", children: [
|
|
305
305
|
/* @__PURE__ */ jsx4(
|
|
306
306
|
SwitchPrimitive.Root,
|
|
307
307
|
{
|
|
308
308
|
ref,
|
|
309
309
|
className: cn(
|
|
310
310
|
"peer inline-flex h-[28px] w-[50px] shrink-0 cursor-pointer items-center",
|
|
311
|
-
"rounded-
|
|
311
|
+
"rounded-(--bloom-radius-pill)",
|
|
312
312
|
"border border-transparent",
|
|
313
|
-
"bg-
|
|
314
|
-
"transition-colors duration-
|
|
315
|
-
"focus-visible:outline-none focus-visible:ring-
|
|
313
|
+
"bg-(--bloom-surface2)",
|
|
314
|
+
"transition-colors duration-(--bloom-duration) ease-(--bloom-ease)",
|
|
315
|
+
"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-(--bloom-accent1)/30",
|
|
316
316
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
317
|
-
"data-[state=checked]:bg-
|
|
317
|
+
"data-[state=checked]:bg-(--bloom-accent1-deep)",
|
|
318
318
|
className
|
|
319
319
|
),
|
|
320
320
|
...props,
|
|
@@ -324,7 +324,7 @@ var Toggle = forwardRef4(
|
|
|
324
324
|
className: cn(
|
|
325
325
|
"pointer-events-none block h-[22px] w-[22px] rounded-full bg-white",
|
|
326
326
|
"shadow-[0_1px_4px_rgba(0,0,0,0.1)]",
|
|
327
|
-
"transition-transform duration-
|
|
327
|
+
"transition-transform duration-(--bloom-duration-fast) ease-(--bloom-ease)",
|
|
328
328
|
"data-[state=unchecked]:translate-x-[3px]",
|
|
329
329
|
"data-[state=checked]:translate-x-[25px]"
|
|
330
330
|
)
|
|
@@ -332,7 +332,7 @@ var Toggle = forwardRef4(
|
|
|
332
332
|
)
|
|
333
333
|
}
|
|
334
334
|
),
|
|
335
|
-
label && /* @__PURE__ */ jsx4("span", { className: "text-
|
|
335
|
+
label && /* @__PURE__ */ jsx4("span", { className: "text-(length:--bloom-text-body) font-(family-name:--bloom-font) color-(--bloom-text)", children: label })
|
|
336
336
|
] })
|
|
337
337
|
);
|
|
338
338
|
Toggle.displayName = "Toggle";
|
|
@@ -344,19 +344,19 @@ import { forwardRef as forwardRef5 } from "react";
|
|
|
344
344
|
import { cva as cva4 } from "class-variance-authority";
|
|
345
345
|
var badgeVariants = cva4(
|
|
346
346
|
[
|
|
347
|
-
"inline-flex items-center gap-
|
|
348
|
-
"rounded-
|
|
349
|
-
"px-
|
|
350
|
-
"text-
|
|
351
|
-
"tracking-
|
|
347
|
+
"inline-flex items-center gap-(--space-xs)",
|
|
348
|
+
"rounded-(--bloom-radius-pill)",
|
|
349
|
+
"px-(--space-md) py-(--space-xs)",
|
|
350
|
+
"text-(length:--bloom-text-micro) font-medium font-(family-name:--bloom-font)",
|
|
351
|
+
"tracking-(--bloom-letter-wide) uppercase"
|
|
352
352
|
],
|
|
353
353
|
{
|
|
354
354
|
variants: {
|
|
355
355
|
variant: {
|
|
356
|
-
sage: "bg-
|
|
357
|
-
sand: "bg-
|
|
358
|
-
lavender: "bg-
|
|
359
|
-
rose: "bg-
|
|
356
|
+
sage: "bg-(--bloom-accent1)/20 color-(--bloom-accent1-deep)",
|
|
357
|
+
sand: "bg-(--bloom-accent2)/20 color-(--bloom-accent2-deep)",
|
|
358
|
+
lavender: "bg-(--bloom-accent3)/20 color-(--bloom-accent3-deep)",
|
|
359
|
+
rose: "bg-(--bloom-accent4)/20 color-(--bloom-accent4-deep)"
|
|
360
360
|
}
|
|
361
361
|
},
|
|
362
362
|
defaultVariants: {
|
|
@@ -368,10 +368,10 @@ var badgeVariants = cva4(
|
|
|
368
368
|
// src/components/badge/badge.tsx
|
|
369
369
|
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
370
370
|
var dotColorMap = {
|
|
371
|
-
sage: "bg-
|
|
372
|
-
sand: "bg-
|
|
373
|
-
lavender: "bg-
|
|
374
|
-
rose: "bg-
|
|
371
|
+
sage: "bg-(--bloom-accent1-deep)",
|
|
372
|
+
sand: "bg-(--bloom-accent2-deep)",
|
|
373
|
+
lavender: "bg-(--bloom-accent3-deep)",
|
|
374
|
+
rose: "bg-(--bloom-accent4-deep)"
|
|
375
375
|
};
|
|
376
376
|
var Badge = forwardRef5(
|
|
377
377
|
({ className, variant = "sage", dot = false, children, ...props }, ref) => /* @__PURE__ */ jsxs2("span", { ref, className: cn(badgeVariants({ variant }), className), ...props, children: [
|
|
@@ -398,18 +398,18 @@ import { forwardRef as forwardRef6 } from "react";
|
|
|
398
398
|
import { cva as cva5 } from "class-variance-authority";
|
|
399
399
|
var alertVariants = cva5(
|
|
400
400
|
[
|
|
401
|
-
"relative flex gap-
|
|
402
|
-
"rounded-
|
|
403
|
-
"font-
|
|
401
|
+
"relative flex gap-(--space-md) items-start",
|
|
402
|
+
"rounded-(--bloom-radius-lg) p-(--space-lg)",
|
|
403
|
+
"font-(family-name:--bloom-font)",
|
|
404
404
|
"border"
|
|
405
405
|
],
|
|
406
406
|
{
|
|
407
407
|
variants: {
|
|
408
408
|
variant: {
|
|
409
|
-
info: "bg-
|
|
410
|
-
success: "bg-
|
|
411
|
-
warning: "bg-
|
|
412
|
-
error: "bg-
|
|
409
|
+
info: "bg-(--bloom-accent3)/10 border-(--bloom-accent3)/20",
|
|
410
|
+
success: "bg-(--bloom-accent1)/10 border-(--bloom-accent1)/20",
|
|
411
|
+
warning: "bg-(--bloom-accent2)/10 border-(--bloom-accent2)/20",
|
|
412
|
+
error: "bg-(--bloom-accent4)/10 border-(--bloom-accent4)/20"
|
|
413
413
|
}
|
|
414
414
|
},
|
|
415
415
|
defaultVariants: {
|
|
@@ -418,10 +418,10 @@ var alertVariants = cva5(
|
|
|
418
418
|
}
|
|
419
419
|
);
|
|
420
420
|
var alertIconColors = {
|
|
421
|
-
info: "color-
|
|
422
|
-
success: "color-
|
|
423
|
-
warning: "color-
|
|
424
|
-
error: "color-
|
|
421
|
+
info: "color-(--bloom-accent3-deep)",
|
|
422
|
+
success: "color-(--bloom-accent1-deep)",
|
|
423
|
+
warning: "color-(--bloom-accent2-deep)",
|
|
424
|
+
error: "color-(--bloom-accent4-deep)"
|
|
425
425
|
};
|
|
426
426
|
|
|
427
427
|
// src/components/alert/alert.tsx
|
|
@@ -459,7 +459,7 @@ var AlertTitle = forwardRef6(
|
|
|
459
459
|
{
|
|
460
460
|
ref,
|
|
461
461
|
className: cn(
|
|
462
|
-
"font-
|
|
462
|
+
"font-(family-name:--bloom-font-display) text-(length:--bloom-text-body) font-medium color-(--bloom-text)",
|
|
463
463
|
className
|
|
464
464
|
),
|
|
465
465
|
...props
|
|
@@ -472,7 +472,7 @@ var AlertDescription = forwardRef6(
|
|
|
472
472
|
"p",
|
|
473
473
|
{
|
|
474
474
|
ref,
|
|
475
|
-
className: cn("text-
|
|
475
|
+
className: cn("text-(length:--bloom-text-caption) color-(--bloom-text-secondary) mt-(--space-xs)", className),
|
|
476
476
|
...props
|
|
477
477
|
}
|
|
478
478
|
)
|
|
@@ -488,16 +488,16 @@ var avatarVariants = cva6(
|
|
|
488
488
|
[
|
|
489
489
|
"relative inline-flex items-center justify-center",
|
|
490
490
|
"rounded-full overflow-hidden",
|
|
491
|
-
"bg-
|
|
492
|
-
"font-
|
|
491
|
+
"bg-(--bloom-accent1)/20 color-(--bloom-accent1-deep)",
|
|
492
|
+
"font-(family-name:--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-
|
|
499
|
-
md: "h-[40px] w-[40px] text-
|
|
500
|
-
lg: "h-[56px] w-[56px] text-
|
|
498
|
+
sm: "h-[32px] w-[32px] text-(length:--bloom-text-micro)",
|
|
499
|
+
md: "h-[40px] w-[40px] text-(length:--bloom-text-caption)",
|
|
500
|
+
lg: "h-[56px] w-[56px] text-(length:--bloom-text-body)"
|
|
501
501
|
}
|
|
502
502
|
},
|
|
503
503
|
defaultVariants: {
|
|
@@ -552,12 +552,12 @@ function Tooltip({ content, children, side = "top", className }) {
|
|
|
552
552
|
side,
|
|
553
553
|
sideOffset: 8,
|
|
554
554
|
className: cn(
|
|
555
|
-
"bloom z-50 rounded-
|
|
556
|
-
"bg-
|
|
557
|
-
"border border-
|
|
558
|
-
"px-
|
|
559
|
-
"text-
|
|
560
|
-
"shadow-
|
|
555
|
+
"bloom z-50 rounded-(--bloom-radius)",
|
|
556
|
+
"bg-(--bloom-surface) color-(--bloom-text)",
|
|
557
|
+
"border border-(--bloom-surface2)",
|
|
558
|
+
"px-(--space-md) py-(--space-sm)",
|
|
559
|
+
"text-(length:--bloom-text-caption) font-(family-name:--bloom-font)",
|
|
560
|
+
"shadow-(--bloom-shadow)",
|
|
561
561
|
"animate-in fade-in-0 zoom-in-95",
|
|
562
562
|
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
563
563
|
className
|
|
@@ -575,14 +575,14 @@ import { forwardRef as forwardRef8 } from "react";
|
|
|
575
575
|
import { cva as cva7 } from "class-variance-authority";
|
|
576
576
|
var progressTrackVariants = cva7([
|
|
577
577
|
"relative w-full overflow-hidden",
|
|
578
|
-
"rounded-
|
|
579
|
-
"bg-
|
|
578
|
+
"rounded-(--bloom-radius-pill)",
|
|
579
|
+
"bg-(--bloom-surface2)",
|
|
580
580
|
"h-[8px]"
|
|
581
581
|
]);
|
|
582
582
|
var progressFillVariants = cva7([
|
|
583
|
-
"h-full rounded-
|
|
584
|
-
"transition-[width] duration-
|
|
585
|
-
"bg-
|
|
583
|
+
"h-full rounded-(--bloom-radius-pill)",
|
|
584
|
+
"transition-[width] duration-(--bloom-duration-slow) ease-(--bloom-ease)",
|
|
585
|
+
"bg-(--bloom-accent1-deep)",
|
|
586
586
|
"relative"
|
|
587
587
|
]);
|
|
588
588
|
|
|
@@ -609,7 +609,7 @@ var Progress = forwardRef8(
|
|
|
609
609
|
children: /* @__PURE__ */ jsx9(
|
|
610
610
|
"div",
|
|
611
611
|
{
|
|
612
|
-
className: "absolute inset-0 rounded-
|
|
612
|
+
className: "absolute inset-0 rounded-(--bloom-radius-pill) overflow-hidden",
|
|
613
613
|
children: /* @__PURE__ */ jsx9(
|
|
614
614
|
"div",
|
|
615
615
|
{
|
|
@@ -755,16 +755,16 @@ var Slider = forwardRef9(
|
|
|
755
755
|
{
|
|
756
756
|
className: cn(
|
|
757
757
|
"relative h-[6px] w-full grow overflow-hidden",
|
|
758
|
-
"rounded-
|
|
759
|
-
"bg-
|
|
758
|
+
"rounded-(--bloom-radius-pill)",
|
|
759
|
+
"bg-(--bloom-surface2)"
|
|
760
760
|
),
|
|
761
761
|
children: /* @__PURE__ */ jsx10(
|
|
762
762
|
SliderPrimitive.Range,
|
|
763
763
|
{
|
|
764
764
|
className: cn(
|
|
765
765
|
"absolute h-full",
|
|
766
|
-
"bg-
|
|
767
|
-
"rounded-
|
|
766
|
+
"bg-(--bloom-accent1-deep)",
|
|
767
|
+
"rounded-(--bloom-radius-pill)"
|
|
768
768
|
)
|
|
769
769
|
}
|
|
770
770
|
)
|
|
@@ -776,11 +776,11 @@ var Slider = forwardRef9(
|
|
|
776
776
|
"aria-disabled": disabled ? true : void 0,
|
|
777
777
|
className: cn(
|
|
778
778
|
"block h-[24px] w-[24px] rounded-full",
|
|
779
|
-
"bg-white border-[2px] border-
|
|
779
|
+
"bg-white border-[2px] border-(--bloom-accent1-deep)",
|
|
780
780
|
"shadow-[0_1px_4px_rgba(0,0,0,0.1)]",
|
|
781
|
-
"transition-transform duration-
|
|
781
|
+
"transition-transform duration-(--bloom-duration-fast) ease-(--bloom-ease)",
|
|
782
782
|
"hover:scale-110",
|
|
783
|
-
"focus-visible:outline-none focus-visible:ring-
|
|
783
|
+
"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-(--bloom-accent1)/30",
|
|
784
784
|
"cursor-grab active:cursor-grabbing"
|
|
785
785
|
)
|
|
786
786
|
}
|
|
@@ -813,9 +813,9 @@ function Modal({ open, onOpenChange, title, description, children, className })
|
|
|
813
813
|
"bloom fixed left-1/2 top-1/2 z-50",
|
|
814
814
|
"-translate-x-1/2 -translate-y-1/2",
|
|
815
815
|
"w-full max-w-[480px]",
|
|
816
|
-
"rounded-
|
|
817
|
-
"bg-
|
|
818
|
-
"shadow-
|
|
816
|
+
"rounded-(--bloom-radius-lg)",
|
|
817
|
+
"bg-(--bloom-surface) p-(--space-xl)",
|
|
818
|
+
"shadow-(--bloom-shadow-hover)",
|
|
819
819
|
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
820
820
|
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
821
821
|
"focus:outline-none",
|
|
@@ -825,14 +825,14 @@ function Modal({ open, onOpenChange, title, description, children, className })
|
|
|
825
825
|
title && /* @__PURE__ */ jsx11(
|
|
826
826
|
DialogPrimitive.Title,
|
|
827
827
|
{
|
|
828
|
-
className: "font-
|
|
828
|
+
className: "font-(family-name:--bloom-font-display) text-(length:--bloom-text-heading) font-medium color-(--bloom-text) mb-(--space-sm)",
|
|
829
829
|
children: title
|
|
830
830
|
}
|
|
831
831
|
),
|
|
832
832
|
description && /* @__PURE__ */ jsx11(
|
|
833
833
|
DialogPrimitive.Description,
|
|
834
834
|
{
|
|
835
|
-
className: "text-
|
|
835
|
+
className: "text-(length:--bloom-text-body) color-(--bloom-text-secondary) mb-(--space-lg)",
|
|
836
836
|
children: description
|
|
837
837
|
}
|
|
838
838
|
),
|
|
@@ -841,13 +841,13 @@ function Modal({ open, onOpenChange, title, description, children, className })
|
|
|
841
841
|
DialogPrimitive.Close,
|
|
842
842
|
{
|
|
843
843
|
className: cn(
|
|
844
|
-
"absolute top-
|
|
844
|
+
"absolute top-(--space-lg) right-(--space-lg)",
|
|
845
845
|
"inline-flex items-center justify-center",
|
|
846
846
|
"h-[32px] w-[32px] rounded-full",
|
|
847
|
-
"color-
|
|
848
|
-
"hover:bg-
|
|
849
|
-
"transition-colors duration-
|
|
850
|
-
"focus-visible:outline-none focus-visible:ring-
|
|
847
|
+
"color-(--bloom-text-secondary) hover:color-(--bloom-text)",
|
|
848
|
+
"hover:bg-(--bloom-surface2)",
|
|
849
|
+
"transition-colors duration-(--bloom-duration-fast)",
|
|
850
|
+
"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-(--bloom-accent1)/30"
|
|
851
851
|
),
|
|
852
852
|
"aria-label": "Close",
|
|
853
853
|
children: /* @__PURE__ */ jsx11("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx11("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
|
|
@@ -871,10 +871,10 @@ function Dropdown({ trigger, children, className }) {
|
|
|
871
871
|
sideOffset: 8,
|
|
872
872
|
className: cn(
|
|
873
873
|
"bloom z-50 min-w-[180px] overflow-hidden",
|
|
874
|
-
"rounded-
|
|
875
|
-
"bg-
|
|
876
|
-
"shadow-
|
|
877
|
-
"border border-
|
|
874
|
+
"rounded-(--bloom-radius)",
|
|
875
|
+
"bg-(--bloom-surface) p-(--space-xs)",
|
|
876
|
+
"shadow-(--bloom-shadow-hover)",
|
|
877
|
+
"border border-(--bloom-surface2)",
|
|
878
878
|
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
879
879
|
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
880
880
|
className
|
|
@@ -890,12 +890,12 @@ function DropdownItem({ className, ...props }) {
|
|
|
890
890
|
{
|
|
891
891
|
className: cn(
|
|
892
892
|
"relative flex items-center",
|
|
893
|
-
"rounded-
|
|
894
|
-
"px-
|
|
895
|
-
"text-
|
|
893
|
+
"rounded-(--bloom-radius-sm)",
|
|
894
|
+
"px-(--space-md) py-(--space-sm)",
|
|
895
|
+
"text-(length:--bloom-text-body) font-(family-name:--bloom-font) color-(--bloom-text)",
|
|
896
896
|
"cursor-pointer select-none outline-none",
|
|
897
|
-
"transition-colors duration-
|
|
898
|
-
"data-[highlighted]:bg-
|
|
897
|
+
"transition-colors duration-(--bloom-duration-fast)",
|
|
898
|
+
"data-[highlighted]:bg-(--bloom-surface2)",
|
|
899
899
|
"data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
|
|
900
900
|
className
|
|
901
901
|
),
|
|
@@ -907,7 +907,7 @@ function DropdownSeparator({ className, ...props }) {
|
|
|
907
907
|
return /* @__PURE__ */ jsx12(
|
|
908
908
|
DropdownMenuPrimitive.Separator,
|
|
909
909
|
{
|
|
910
|
-
className: cn("h-px my-
|
|
910
|
+
className: cn("h-px my-(--space-xs) bg-(--bloom-surface2)", className),
|
|
911
911
|
...props
|
|
912
912
|
}
|
|
913
913
|
);
|
|
@@ -921,16 +921,16 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
|
921
921
|
import { cva as cva8 } from "class-variance-authority";
|
|
922
922
|
var tabsListVariants = cva8(
|
|
923
923
|
[
|
|
924
|
-
"inline-flex items-center gap-
|
|
925
|
-
"font-
|
|
924
|
+
"inline-flex items-center gap-(--space-xs)",
|
|
925
|
+
"font-(family-name:--bloom-font)"
|
|
926
926
|
],
|
|
927
927
|
{
|
|
928
928
|
variants: {
|
|
929
929
|
variant: {
|
|
930
|
-
default: "border-b border-
|
|
930
|
+
default: "border-b border-(--bloom-surface2)",
|
|
931
931
|
pill: [
|
|
932
|
-
"bg-
|
|
933
|
-
"rounded-
|
|
932
|
+
"bg-(--bloom-surface) p-(--space-xs)",
|
|
933
|
+
"rounded-(--bloom-radius-pill)"
|
|
934
934
|
]
|
|
935
935
|
}
|
|
936
936
|
},
|
|
@@ -960,15 +960,15 @@ var TabsTrigger = forwardRef10(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
960
960
|
ref,
|
|
961
961
|
className: cn(
|
|
962
962
|
"inline-flex items-center justify-center whitespace-nowrap",
|
|
963
|
-
"px-
|
|
964
|
-
"text-
|
|
965
|
-
"color-
|
|
966
|
-
"rounded-
|
|
967
|
-
"transition-all duration-
|
|
968
|
-
"hover:color-
|
|
969
|
-
"data-[state=active]:color-
|
|
970
|
-
"data-[state=active]:bg-
|
|
971
|
-
"focus-visible:outline-none focus-visible:ring-
|
|
963
|
+
"px-(--space-lg) py-(--space-sm)",
|
|
964
|
+
"text-(length:--bloom-text-body) font-(family-name:--bloom-font)",
|
|
965
|
+
"color-(--bloom-text-secondary)",
|
|
966
|
+
"rounded-(--bloom-radius-pill)",
|
|
967
|
+
"transition-all duration-(--bloom-duration) ease-(--bloom-ease)",
|
|
968
|
+
"hover:color-(--bloom-text)",
|
|
969
|
+
"data-[state=active]:color-(--bloom-text)",
|
|
970
|
+
"data-[state=active]:bg-(--bloom-surface2)",
|
|
971
|
+
"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-(--bloom-accent1)/30",
|
|
972
972
|
"disabled:pointer-events-none disabled:opacity-50",
|
|
973
973
|
className
|
|
974
974
|
),
|
|
@@ -981,7 +981,7 @@ var TabsContent = forwardRef10(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
981
981
|
{
|
|
982
982
|
ref,
|
|
983
983
|
className: cn(
|
|
984
|
-
"mt-
|
|
984
|
+
"mt-(--space-lg)",
|
|
985
985
|
"focus-visible:outline-none",
|
|
986
986
|
className
|
|
987
987
|
),
|
|
@@ -1045,14 +1045,14 @@ function DatePicker({ value, onChange, placeholder = "Select date", className })
|
|
|
1045
1045
|
"button",
|
|
1046
1046
|
{
|
|
1047
1047
|
className: cn(
|
|
1048
|
-
"inline-flex items-center gap-
|
|
1049
|
-
"h-[44px] px-
|
|
1050
|
-
"rounded-
|
|
1051
|
-
"border border-
|
|
1052
|
-
"text-
|
|
1053
|
-
"transition-all duration-
|
|
1054
|
-
"focus-visible:outline-none focus-visible:ring-
|
|
1055
|
-
!formattedValue && "color-
|
|
1048
|
+
"inline-flex items-center gap-(--space-sm)",
|
|
1049
|
+
"h-[44px] px-(--space-lg)",
|
|
1050
|
+
"rounded-(--bloom-radius) bg-(--bloom-surface)",
|
|
1051
|
+
"border border-(--bloom-surface2)",
|
|
1052
|
+
"text-(length:--bloom-text-body) font-(family-name:--bloom-font) color-(--bloom-text)",
|
|
1053
|
+
"transition-all duration-(--bloom-duration) ease-(--bloom-ease)",
|
|
1054
|
+
"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-(--bloom-accent1)/20",
|
|
1055
|
+
!formattedValue && "color-(--bloom-text-secondary)",
|
|
1056
1056
|
className
|
|
1057
1057
|
),
|
|
1058
1058
|
children: [
|
|
@@ -1071,25 +1071,25 @@ function DatePicker({ value, onChange, placeholder = "Select date", className })
|
|
|
1071
1071
|
sideOffset: 8,
|
|
1072
1072
|
className: cn(
|
|
1073
1073
|
"bloom z-50 w-[280px]",
|
|
1074
|
-
"rounded-
|
|
1075
|
-
"bg-
|
|
1076
|
-
"shadow-
|
|
1077
|
-
"border border-
|
|
1074
|
+
"rounded-(--bloom-radius-lg)",
|
|
1075
|
+
"bg-(--bloom-surface) p-(--space-lg)",
|
|
1076
|
+
"shadow-(--bloom-shadow-hover)",
|
|
1077
|
+
"border border-(--bloom-surface2)",
|
|
1078
1078
|
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
1079
1079
|
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
|
|
1080
1080
|
),
|
|
1081
1081
|
children: [
|
|
1082
|
-
/* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between mb-
|
|
1082
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between mb-(--space-md)", children: [
|
|
1083
1083
|
/* @__PURE__ */ jsx14(
|
|
1084
1084
|
"button",
|
|
1085
1085
|
{
|
|
1086
1086
|
onClick: prevMonth,
|
|
1087
|
-
className: "p-
|
|
1087
|
+
className: "p-(--space-xs) rounded-full hover:bg-(--bloom-surface2) transition-colors",
|
|
1088
1088
|
"aria-label": "Previous month",
|
|
1089
1089
|
children: /* @__PURE__ */ jsx14("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx14("path", { d: "M10 4l-4 4 4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
1090
1090
|
}
|
|
1091
1091
|
),
|
|
1092
|
-
/* @__PURE__ */ jsxs10("span", { className: "font-
|
|
1092
|
+
/* @__PURE__ */ jsxs10("span", { className: "font-(family-name:--bloom-font-display) text-(length:--bloom-text-body) font-medium color-(--bloom-text)", children: [
|
|
1093
1093
|
MONTH_NAMES[viewMonth],
|
|
1094
1094
|
" ",
|
|
1095
1095
|
viewYear
|
|
@@ -1098,13 +1098,13 @@ function DatePicker({ value, onChange, placeholder = "Select date", className })
|
|
|
1098
1098
|
"button",
|
|
1099
1099
|
{
|
|
1100
1100
|
onClick: nextMonth,
|
|
1101
|
-
className: "p-
|
|
1101
|
+
className: "p-(--space-xs) rounded-full hover:bg-(--bloom-surface2) transition-colors",
|
|
1102
1102
|
"aria-label": "Next month",
|
|
1103
1103
|
children: /* @__PURE__ */ jsx14("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx14("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
1104
1104
|
}
|
|
1105
1105
|
)
|
|
1106
1106
|
] }),
|
|
1107
|
-
/* @__PURE__ */ jsx14("div", { className: "grid grid-cols-7 gap-[2px] mb-
|
|
1107
|
+
/* @__PURE__ */ jsx14("div", { className: "grid grid-cols-7 gap-[2px] mb-(--space-xs)", children: DAY_NAMES.map((d) => /* @__PURE__ */ jsx14("div", { className: "text-center text-(length:--bloom-text-micro) color-(--bloom-text-secondary) font-medium py-(--space-xs)", children: d }, d)) }),
|
|
1108
1108
|
/* @__PURE__ */ jsx14("div", { className: "grid grid-cols-7 gap-[2px]", children: days.map(
|
|
1109
1109
|
(day, i) => day === null ? /* @__PURE__ */ jsx14("div", {}, `empty-${i}`) : /* @__PURE__ */ jsx14(
|
|
1110
1110
|
"button",
|
|
@@ -1113,10 +1113,10 @@ function DatePicker({ value, onChange, placeholder = "Select date", className })
|
|
|
1113
1113
|
className: cn(
|
|
1114
1114
|
"h-[36px] w-[36px] rounded-full",
|
|
1115
1115
|
"flex items-center justify-center",
|
|
1116
|
-
"text-
|
|
1117
|
-
"transition-colors duration-
|
|
1118
|
-
"hover:bg-
|
|
1119
|
-
isSelected(day) ? "bg-
|
|
1116
|
+
"text-(length:--bloom-text-caption) font-(family-name:--bloom-font)",
|
|
1117
|
+
"transition-colors duration-(--bloom-duration-fast)",
|
|
1118
|
+
"hover:bg-(--bloom-accent1)/20",
|
|
1119
|
+
isSelected(day) ? "bg-(--bloom-accent1-deep) color-white" : "color-(--bloom-text)"
|
|
1120
1120
|
),
|
|
1121
1121
|
children: day
|
|
1122
1122
|
},
|
|
@@ -1142,23 +1142,23 @@ import {
|
|
|
1142
1142
|
import { cva as cva9 } from "class-variance-authority";
|
|
1143
1143
|
var toastVariants = cva9(
|
|
1144
1144
|
[
|
|
1145
|
-
"relative flex items-center gap-
|
|
1145
|
+
"relative flex items-center gap-(--space-md)",
|
|
1146
1146
|
"w-full max-w-[380px]",
|
|
1147
|
-
"rounded-
|
|
1148
|
-
"p-
|
|
1149
|
-
"shadow-
|
|
1147
|
+
"rounded-(--bloom-radius-lg)",
|
|
1148
|
+
"p-(--space-lg)",
|
|
1149
|
+
"shadow-(--bloom-shadow-hover)",
|
|
1150
1150
|
"border",
|
|
1151
|
-
"font-
|
|
1151
|
+
"font-(family-name:--bloom-font)",
|
|
1152
1152
|
"overflow-hidden",
|
|
1153
1153
|
"animate-in fade-in-0 slide-in-from-bottom-4"
|
|
1154
1154
|
],
|
|
1155
1155
|
{
|
|
1156
1156
|
variants: {
|
|
1157
1157
|
variant: {
|
|
1158
|
-
info: "bg-
|
|
1159
|
-
success: "bg-
|
|
1160
|
-
warning: "bg-
|
|
1161
|
-
error: "bg-
|
|
1158
|
+
info: "bg-(--bloom-surface) border-(--bloom-surface2)",
|
|
1159
|
+
success: "bg-(--bloom-accent1)/10 border-(--bloom-accent1)/20",
|
|
1160
|
+
warning: "bg-(--bloom-accent2)/10 border-(--bloom-accent2)/20",
|
|
1161
|
+
error: "bg-(--bloom-accent4)/10 border-(--bloom-accent4)/20"
|
|
1162
1162
|
}
|
|
1163
1163
|
},
|
|
1164
1164
|
defaultVariants: {
|
|
@@ -1167,10 +1167,10 @@ var toastVariants = cva9(
|
|
|
1167
1167
|
}
|
|
1168
1168
|
);
|
|
1169
1169
|
var toastIconColors = {
|
|
1170
|
-
info: "color-
|
|
1171
|
-
success: "color-
|
|
1172
|
-
warning: "color-
|
|
1173
|
-
error: "color-
|
|
1170
|
+
info: "color-(--bloom-accent3-deep)",
|
|
1171
|
+
success: "color-(--bloom-accent1-deep)",
|
|
1172
|
+
warning: "color-(--bloom-accent2-deep)",
|
|
1173
|
+
error: "color-(--bloom-accent4-deep)"
|
|
1174
1174
|
};
|
|
1175
1175
|
|
|
1176
1176
|
// src/components/toast/toast.tsx
|
|
@@ -1193,7 +1193,7 @@ function ToastProvider({ children }) {
|
|
|
1193
1193
|
}, []);
|
|
1194
1194
|
return /* @__PURE__ */ jsxs11(ToastContext.Provider, { value: { toast }, children: [
|
|
1195
1195
|
children,
|
|
1196
|
-
/* @__PURE__ */ jsx15("div", { className: "bloom fixed bottom-
|
|
1196
|
+
/* @__PURE__ */ jsx15("div", { className: "bloom fixed bottom-(--space-xl) right-(--space-xl) z-[100] flex flex-col gap-(--space-md)", children: toasts.map((t) => /* @__PURE__ */ jsx15(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
|
|
1197
1197
|
] });
|
|
1198
1198
|
}
|
|
1199
1199
|
var variantIcons2 = {
|
|
@@ -1226,14 +1226,14 @@ function ToastItem({ toast: t, onDismiss }) {
|
|
|
1226
1226
|
return /* @__PURE__ */ jsxs11("div", { className: cn(toastVariants({ variant: t.variant })), children: [
|
|
1227
1227
|
/* @__PURE__ */ jsx15("div", { className: cn("shrink-0 mt-[1px]", toastIconColors[variant]), children: variantIcons2[variant] }),
|
|
1228
1228
|
/* @__PURE__ */ jsxs11("div", { className: "flex-1 min-w-0", children: [
|
|
1229
|
-
/* @__PURE__ */ jsx15("p", { className: "text-
|
|
1230
|
-
t.description && /* @__PURE__ */ jsx15("p", { className: "text-
|
|
1229
|
+
/* @__PURE__ */ jsx15("p", { className: "text-(length:--bloom-text-body) font-medium color-(--bloom-text)", children: t.title }),
|
|
1230
|
+
t.description && /* @__PURE__ */ jsx15("p", { className: "text-(length:--bloom-text-caption) color-(--bloom-text-secondary) mt-(--space-xs)", children: t.description })
|
|
1231
1231
|
] }),
|
|
1232
1232
|
/* @__PURE__ */ jsx15(
|
|
1233
1233
|
"button",
|
|
1234
1234
|
{
|
|
1235
1235
|
onClick: () => onDismiss(t.id),
|
|
1236
|
-
className: "color-
|
|
1236
|
+
className: "color-(--bloom-text-secondary) hover:color-(--bloom-text) transition-colors shrink-0 rounded-full h-[28px] w-[28px] inline-flex items-center justify-center hover:bg-(--bloom-surface2)",
|
|
1237
1237
|
"aria-label": "Dismiss",
|
|
1238
1238
|
children: /* @__PURE__ */ jsx15("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx15("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
|
|
1239
1239
|
}
|
|
@@ -1248,14 +1248,14 @@ import { forwardRef as forwardRef11 } from "react";
|
|
|
1248
1248
|
import { cva as cva10 } from "class-variance-authority";
|
|
1249
1249
|
var skeletonVariants = cva10(
|
|
1250
1250
|
[
|
|
1251
|
-
"bg-
|
|
1251
|
+
"bg-(--bloom-surface2)",
|
|
1252
1252
|
"animate-[bloom-breathe_3s_ease-in-out_infinite]"
|
|
1253
1253
|
],
|
|
1254
1254
|
{
|
|
1255
1255
|
variants: {
|
|
1256
1256
|
variant: {
|
|
1257
|
-
text: "h-[16px] w-full rounded-
|
|
1258
|
-
card: "h-[200px] w-full rounded-
|
|
1257
|
+
text: "h-[16px] w-full rounded-(--bloom-radius-sm)",
|
|
1258
|
+
card: "h-[200px] w-full rounded-(--bloom-radius-lg)",
|
|
1259
1259
|
avatar: "h-[40px] w-[40px] rounded-full",
|
|
1260
1260
|
custom: ""
|
|
1261
1261
|
}
|
|
@@ -1291,15 +1291,15 @@ var Checkbox = forwardRef12(
|
|
|
1291
1291
|
CheckboxPrimitive.Root,
|
|
1292
1292
|
{
|
|
1293
1293
|
ref,
|
|
1294
|
+
style: { borderRadius: "var(--bloom-radius-checkbox)" },
|
|
1294
1295
|
className: cn(
|
|
1295
1296
|
"peer h-[20px] w-[20px] shrink-0 cursor-pointer",
|
|
1296
|
-
"
|
|
1297
|
-
"
|
|
1298
|
-
"
|
|
1299
|
-
"
|
|
1300
|
-
"focus-visible:outline-none focus-visible:ring-[4px] focus-visible:ring-[var(--bloom-accent1)]/30",
|
|
1297
|
+
"border border-(--bloom-surface2)",
|
|
1298
|
+
"bg-(--bloom-surface)",
|
|
1299
|
+
"transition-all duration-(--bloom-duration-fast) ease-(--bloom-ease)",
|
|
1300
|
+
"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-(--bloom-accent1)/30",
|
|
1301
1301
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
1302
|
-
"data-[state=checked]:bg-
|
|
1302
|
+
"data-[state=checked]:bg-(--bloom-accent1-deep) data-[state=checked]:border-(--bloom-accent1-deep)",
|
|
1303
1303
|
className
|
|
1304
1304
|
),
|
|
1305
1305
|
...props,
|
|
@@ -1320,9 +1320,9 @@ var Checkbox = forwardRef12(
|
|
|
1320
1320
|
}
|
|
1321
1321
|
);
|
|
1322
1322
|
if (!label) return checkbox;
|
|
1323
|
-
return /* @__PURE__ */ jsxs12("label", { className: "inline-flex items-center gap-
|
|
1323
|
+
return /* @__PURE__ */ jsxs12("label", { className: "inline-flex items-center gap-(--space-sm) cursor-pointer", children: [
|
|
1324
1324
|
checkbox,
|
|
1325
|
-
/* @__PURE__ */ jsx17("span", { className: "text-
|
|
1325
|
+
/* @__PURE__ */ jsx17("span", { className: "text-(length:--bloom-text-body) font-(family-name:--bloom-font) color-(--bloom-text)", children: label })
|
|
1326
1326
|
] });
|
|
1327
1327
|
}
|
|
1328
1328
|
);
|
|
@@ -1337,7 +1337,7 @@ var RadioGroup = forwardRef13(
|
|
|
1337
1337
|
RadioGroupPrimitive.Root,
|
|
1338
1338
|
{
|
|
1339
1339
|
ref,
|
|
1340
|
-
className: cn("flex flex-col gap-
|
|
1340
|
+
className: cn("flex flex-col gap-(--space-sm)", className),
|
|
1341
1341
|
...props
|
|
1342
1342
|
}
|
|
1343
1343
|
)
|
|
@@ -1352,22 +1352,22 @@ var RadioGroupItem = forwardRef13(
|
|
|
1352
1352
|
className: cn(
|
|
1353
1353
|
"h-[20px] w-[20px] shrink-0 cursor-pointer",
|
|
1354
1354
|
"rounded-full",
|
|
1355
|
-
"border border-
|
|
1356
|
-
"bg-
|
|
1357
|
-
"transition-all duration-
|
|
1358
|
-
"focus-visible:outline-none focus-visible:ring-
|
|
1355
|
+
"border border-(--bloom-surface2)",
|
|
1356
|
+
"bg-(--bloom-surface)",
|
|
1357
|
+
"transition-all duration-(--bloom-duration-fast) ease-(--bloom-ease)",
|
|
1358
|
+
"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-(--bloom-accent1)/30",
|
|
1359
1359
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
1360
|
-
"data-[state=checked]:border-
|
|
1360
|
+
"data-[state=checked]:border-(--bloom-accent1-deep)",
|
|
1361
1361
|
className
|
|
1362
1362
|
),
|
|
1363
1363
|
...props,
|
|
1364
|
-
children: /* @__PURE__ */ jsx18(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ jsx18("span", {
|
|
1364
|
+
children: /* @__PURE__ */ jsx18(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ jsx18("span", { style: { display: "block", width: 8, height: 8, borderRadius: "50%", backgroundColor: "var(--bloom-accent1-deep)" } }) })
|
|
1365
1365
|
}
|
|
1366
1366
|
);
|
|
1367
1367
|
if (!label) return item;
|
|
1368
|
-
return /* @__PURE__ */ jsxs13("label", { className: "inline-flex items-center gap-
|
|
1368
|
+
return /* @__PURE__ */ jsxs13("label", { className: "inline-flex items-center gap-(--space-sm) cursor-pointer", children: [
|
|
1369
1369
|
item,
|
|
1370
|
-
/* @__PURE__ */ jsx18("span", { className: "text-
|
|
1370
|
+
/* @__PURE__ */ jsx18("span", { className: "text-(length:--bloom-text-body) font-(family-name:--bloom-font) color-(--bloom-text)", children: label })
|
|
1371
1371
|
] });
|
|
1372
1372
|
}
|
|
1373
1373
|
);
|
|
@@ -1384,15 +1384,15 @@ var SelectTrigger = forwardRef14(
|
|
|
1384
1384
|
{
|
|
1385
1385
|
ref,
|
|
1386
1386
|
className: cn(
|
|
1387
|
-
"inline-flex items-center justify-between gap-
|
|
1388
|
-
"h-[44px] w-full px-
|
|
1389
|
-
"rounded-
|
|
1390
|
-
"border border-
|
|
1391
|
-
"text-
|
|
1392
|
-
"transition-all duration-
|
|
1393
|
-
"focus-visible:outline-none focus-visible:ring-
|
|
1387
|
+
"inline-flex items-center justify-between gap-(--space-sm)",
|
|
1388
|
+
"h-[44px] w-full px-(--space-lg)",
|
|
1389
|
+
"rounded-(--bloom-radius) bg-(--bloom-surface)",
|
|
1390
|
+
"border border-(--bloom-surface2)",
|
|
1391
|
+
"text-(length:--bloom-text-body) font-(family-name:--bloom-font) color-(--bloom-text)",
|
|
1392
|
+
"transition-all duration-(--bloom-duration) ease-(--bloom-ease)",
|
|
1393
|
+
"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-(--bloom-accent1)/20 focus-visible:border-(--bloom-accent1-deep)",
|
|
1394
1394
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
1395
|
-
"data-[placeholder]:color-
|
|
1395
|
+
"data-[placeholder]:color-(--bloom-text-secondary)",
|
|
1396
1396
|
className
|
|
1397
1397
|
),
|
|
1398
1398
|
...props,
|
|
@@ -1426,11 +1426,11 @@ var SelectContent = forwardRef14(
|
|
|
1426
1426
|
position,
|
|
1427
1427
|
sideOffset: 8,
|
|
1428
1428
|
className: cn(
|
|
1429
|
-
"bloom z-50 min-w-
|
|
1430
|
-
"rounded-
|
|
1431
|
-
"bg-
|
|
1432
|
-
"shadow-
|
|
1433
|
-
"border border-
|
|
1429
|
+
"bloom z-50 min-w-(--radix-select-trigger-width) overflow-hidden",
|
|
1430
|
+
"rounded-(--bloom-radius)",
|
|
1431
|
+
"bg-(--bloom-surface) p-(--space-xs)",
|
|
1432
|
+
"shadow-(--bloom-shadow-hover)",
|
|
1433
|
+
"border border-(--bloom-surface2)",
|
|
1434
1434
|
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
1435
1435
|
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
1436
1436
|
className
|
|
@@ -1440,7 +1440,7 @@ var SelectContent = forwardRef14(
|
|
|
1440
1440
|
SelectPrimitive.Viewport,
|
|
1441
1441
|
{
|
|
1442
1442
|
className: cn(
|
|
1443
|
-
position === "popper" && "w-full min-w-
|
|
1443
|
+
position === "popper" && "w-full min-w-(--radix-select-trigger-width)"
|
|
1444
1444
|
),
|
|
1445
1445
|
children
|
|
1446
1446
|
}
|
|
@@ -1456,18 +1456,18 @@ var SelectItem = forwardRef14(
|
|
|
1456
1456
|
ref,
|
|
1457
1457
|
className: cn(
|
|
1458
1458
|
"relative flex items-center",
|
|
1459
|
-
"rounded-
|
|
1460
|
-
"px-
|
|
1461
|
-
"text-
|
|
1459
|
+
"rounded-(--bloom-radius-sm)",
|
|
1460
|
+
"px-(--space-md) py-(--space-sm) pl-(--space-2xl)",
|
|
1461
|
+
"text-(length:--bloom-text-body) font-(family-name:--bloom-font) color-(--bloom-text)",
|
|
1462
1462
|
"cursor-pointer select-none outline-none",
|
|
1463
|
-
"transition-colors duration-
|
|
1464
|
-
"data-[highlighted]:bg-
|
|
1463
|
+
"transition-colors duration-(--bloom-duration-fast)",
|
|
1464
|
+
"data-[highlighted]:bg-(--bloom-surface2)",
|
|
1465
1465
|
"data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
|
|
1466
1466
|
className
|
|
1467
1467
|
),
|
|
1468
1468
|
...props,
|
|
1469
1469
|
children: [
|
|
1470
|
-
/* @__PURE__ */ jsx19("span", { className: "absolute left-
|
|
1470
|
+
/* @__PURE__ */ jsx19("span", { className: "absolute left-(--space-sm) flex h-[16px] w-[16px] items-center justify-center", children: /* @__PURE__ */ jsx19(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx19(
|
|
1471
1471
|
"svg",
|
|
1472
1472
|
{
|
|
1473
1473
|
width: "12",
|
|
@@ -1492,7 +1492,7 @@ var SelectSeparator = forwardRef14(
|
|
|
1492
1492
|
SelectPrimitive.Separator,
|
|
1493
1493
|
{
|
|
1494
1494
|
ref,
|
|
1495
|
-
className: cn("h-px my-
|
|
1495
|
+
className: cn("h-px my-(--space-xs) bg-(--bloom-surface2)", className),
|
|
1496
1496
|
...props
|
|
1497
1497
|
}
|
|
1498
1498
|
)
|