@bloomkit/react 0.2.0 → 0.2.2
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/dist/index.cjs +228 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.cts +6 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.js +227 -6
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -577,13 +577,13 @@ var progressTrackVariants = _classvarianceauthority.cva.call(void 0, [
|
|
|
577
577
|
"relative w-full overflow-hidden",
|
|
578
578
|
"rounded-[var(--bloom-radius-pill)]",
|
|
579
579
|
"bg-[var(--bloom-surface2)]",
|
|
580
|
-
"h-[
|
|
580
|
+
"h-[8px]"
|
|
581
581
|
]);
|
|
582
582
|
var progressFillVariants = _classvarianceauthority.cva.call(void 0, [
|
|
583
583
|
"h-full rounded-[var(--bloom-radius-pill)]",
|
|
584
|
-
"transition-
|
|
585
|
-
"bg-
|
|
586
|
-
"
|
|
584
|
+
"transition-[width] duration-[var(--bloom-duration-slow)] ease-[var(--bloom-ease)]",
|
|
585
|
+
"bg-[var(--bloom-accent1-deep)]",
|
|
586
|
+
"relative"
|
|
587
587
|
]);
|
|
588
588
|
|
|
589
589
|
// src/components/progress/progress.tsx
|
|
@@ -605,7 +605,19 @@ var Progress = _react.forwardRef.call(void 0,
|
|
|
605
605
|
"div",
|
|
606
606
|
{
|
|
607
607
|
className: progressFillVariants(),
|
|
608
|
-
style: { width: `${clampedValue}%` }
|
|
608
|
+
style: { width: `${clampedValue}%` },
|
|
609
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
610
|
+
"div",
|
|
611
|
+
{
|
|
612
|
+
className: "absolute inset-0 rounded-[var(--bloom-radius-pill)] overflow-hidden",
|
|
613
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
614
|
+
"div",
|
|
615
|
+
{
|
|
616
|
+
className: "absolute inset-y-0 w-[60%] bg-gradient-to-r from-transparent via-white/25 to-transparent animate-[bloom-sweep_2.5s_ease-in-out_infinite]"
|
|
617
|
+
}
|
|
618
|
+
)
|
|
619
|
+
}
|
|
620
|
+
)
|
|
609
621
|
}
|
|
610
622
|
)
|
|
611
623
|
}
|
|
@@ -630,6 +642,49 @@ var ProgressCircular = _react.forwardRef.call(void 0,
|
|
|
630
642
|
className: cn("inline-flex", className),
|
|
631
643
|
...props,
|
|
632
644
|
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [
|
|
645
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "defs", { children: [
|
|
646
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
647
|
+
"linearGradient",
|
|
648
|
+
{
|
|
649
|
+
id: `bloom-sweep-grad-${size}`,
|
|
650
|
+
gradientUnits: "userSpaceOnUse",
|
|
651
|
+
x1: size / 2,
|
|
652
|
+
y1: "0",
|
|
653
|
+
x2: size / 2,
|
|
654
|
+
y2: size,
|
|
655
|
+
children: [
|
|
656
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
|
|
657
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "50%", stopColor: "white", stopOpacity: "0.3" }),
|
|
658
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "100%", stopColor: "white", stopOpacity: "0" }),
|
|
659
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
660
|
+
"animateTransform",
|
|
661
|
+
{
|
|
662
|
+
attributeName: "gradientTransform",
|
|
663
|
+
type: "rotate",
|
|
664
|
+
values: `0 ${size / 2} ${size / 2};360 ${size / 2} ${size / 2}`,
|
|
665
|
+
dur: "2.5s",
|
|
666
|
+
repeatCount: "indefinite"
|
|
667
|
+
}
|
|
668
|
+
)
|
|
669
|
+
]
|
|
670
|
+
}
|
|
671
|
+
),
|
|
672
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "mask", { id: `bloom-sweep-mask-${size}`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
673
|
+
"circle",
|
|
674
|
+
{
|
|
675
|
+
cx: size / 2,
|
|
676
|
+
cy: size / 2,
|
|
677
|
+
r: radius,
|
|
678
|
+
fill: "none",
|
|
679
|
+
stroke: "white",
|
|
680
|
+
strokeWidth,
|
|
681
|
+
strokeLinecap: "round",
|
|
682
|
+
strokeDasharray: circumference,
|
|
683
|
+
strokeDashoffset: offset,
|
|
684
|
+
transform: `rotate(-90 ${size / 2} ${size / 2})`
|
|
685
|
+
}
|
|
686
|
+
) })
|
|
687
|
+
] }),
|
|
633
688
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
634
689
|
"circle",
|
|
635
690
|
{
|
|
@@ -655,9 +710,21 @@ var ProgressCircular = _react.forwardRef.call(void 0,
|
|
|
655
710
|
strokeDashoffset: offset,
|
|
656
711
|
transform: `rotate(-90 ${size / 2} ${size / 2})`,
|
|
657
712
|
style: {
|
|
658
|
-
transition: `stroke-dashoffset var(--bloom-duration) var(--bloom-ease)`
|
|
713
|
+
transition: `stroke-dashoffset var(--bloom-duration-slow) var(--bloom-ease)`
|
|
659
714
|
}
|
|
660
715
|
}
|
|
716
|
+
),
|
|
717
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
718
|
+
"circle",
|
|
719
|
+
{
|
|
720
|
+
cx: size / 2,
|
|
721
|
+
cy: size / 2,
|
|
722
|
+
r: radius,
|
|
723
|
+
fill: "none",
|
|
724
|
+
stroke: `url(#bloom-sweep-grad-${size})`,
|
|
725
|
+
strokeWidth,
|
|
726
|
+
mask: `url(#bloom-sweep-mask-${size})`
|
|
727
|
+
}
|
|
661
728
|
)
|
|
662
729
|
] })
|
|
663
730
|
}
|
|
@@ -1352,6 +1419,160 @@ function ThemeProvider({
|
|
|
1352
1419
|
);
|
|
1353
1420
|
}
|
|
1354
1421
|
|
|
1422
|
+
// src/palettes/built-in.ts
|
|
1423
|
+
var midnightGarden = {
|
|
1424
|
+
name: "midnight",
|
|
1425
|
+
light: {
|
|
1426
|
+
"--bloom-font": "'Cormorant Garamond', serif",
|
|
1427
|
+
"--bloom-font-display": "'Playfair Display', serif",
|
|
1428
|
+
"--bloom-bg": "#F5F3F8",
|
|
1429
|
+
"--bloom-surface": "#EAE6F0",
|
|
1430
|
+
"--bloom-surface2": "#DBD5E4",
|
|
1431
|
+
"--bloom-text": "#1E1A28",
|
|
1432
|
+
"--bloom-text-secondary": "#6B6580",
|
|
1433
|
+
"--bloom-accent1": "#5E8C6A",
|
|
1434
|
+
"--bloom-accent1-deep": "#3D6B4A",
|
|
1435
|
+
"--bloom-accent2": "#6A7EC8",
|
|
1436
|
+
"--bloom-accent2-deep": "#4A5EA8",
|
|
1437
|
+
"--bloom-accent3": "#8B6AAE",
|
|
1438
|
+
"--bloom-accent3-deep": "#6A4A8E",
|
|
1439
|
+
"--bloom-accent4": "#C86A7E",
|
|
1440
|
+
"--bloom-accent4-deep": "#A84A5E",
|
|
1441
|
+
"--bloom-shadow": "0 2px 24px rgba(30,26,40,0.08)",
|
|
1442
|
+
"--bloom-shadow-hover": "0 8px 40px rgba(30,26,40,0.14)",
|
|
1443
|
+
"--bloom-radius-sm": "8px",
|
|
1444
|
+
"--bloom-radius": "12px",
|
|
1445
|
+
"--bloom-radius-lg": "16px",
|
|
1446
|
+
"--bloom-radius-pill": "999px"
|
|
1447
|
+
},
|
|
1448
|
+
dark: {
|
|
1449
|
+
"--bloom-font": "'Cormorant Garamond', serif",
|
|
1450
|
+
"--bloom-font-display": "'Playfair Display', serif",
|
|
1451
|
+
"--bloom-bg": "#0F1117",
|
|
1452
|
+
"--bloom-surface": "#1A1D27",
|
|
1453
|
+
"--bloom-surface2": "#252A36",
|
|
1454
|
+
"--bloom-text": "#E2E0EC",
|
|
1455
|
+
"--bloom-text-secondary": "#8B87A0",
|
|
1456
|
+
"--bloom-accent1": "#5E8C6A",
|
|
1457
|
+
"--bloom-accent1-deep": "#3D6B4A",
|
|
1458
|
+
"--bloom-accent2": "#6A7EC8",
|
|
1459
|
+
"--bloom-accent2-deep": "#4A5EA8",
|
|
1460
|
+
"--bloom-accent3": "#8B6AAE",
|
|
1461
|
+
"--bloom-accent3-deep": "#6A4A8E",
|
|
1462
|
+
"--bloom-accent4": "#C86A7E",
|
|
1463
|
+
"--bloom-accent4-deep": "#A84A5E",
|
|
1464
|
+
"--bloom-shadow": "0 2px 24px rgba(0,0,0,0.3)",
|
|
1465
|
+
"--bloom-shadow-hover": "0 8px 40px rgba(0,0,0,0.4)",
|
|
1466
|
+
"--bloom-radius-sm": "8px",
|
|
1467
|
+
"--bloom-radius": "12px",
|
|
1468
|
+
"--bloom-radius-lg": "16px",
|
|
1469
|
+
"--bloom-radius-pill": "999px"
|
|
1470
|
+
}
|
|
1471
|
+
};
|
|
1472
|
+
var desertRose = {
|
|
1473
|
+
name: "desert",
|
|
1474
|
+
light: {
|
|
1475
|
+
"--bloom-font": "'Karla', sans-serif",
|
|
1476
|
+
"--bloom-font-display": "'Lora', serif",
|
|
1477
|
+
"--bloom-bg": "#FBF5EE",
|
|
1478
|
+
"--bloom-surface": "#F2E8DA",
|
|
1479
|
+
"--bloom-surface2": "#E6D8C4",
|
|
1480
|
+
"--bloom-text": "#3D2E1E",
|
|
1481
|
+
"--bloom-text-secondary": "#8C7A66",
|
|
1482
|
+
"--bloom-accent1": "#B8A080",
|
|
1483
|
+
"--bloom-accent1-deep": "#96795A",
|
|
1484
|
+
"--bloom-accent2": "#D4956A",
|
|
1485
|
+
"--bloom-accent2-deep": "#B87040",
|
|
1486
|
+
"--bloom-accent3": "#C4887C",
|
|
1487
|
+
"--bloom-accent3-deep": "#A8685C",
|
|
1488
|
+
"--bloom-accent4": "#CC6B5E",
|
|
1489
|
+
"--bloom-accent4-deep": "#A84A3E",
|
|
1490
|
+
"--bloom-shadow": "0 2px 24px rgba(61,46,30,0.08)",
|
|
1491
|
+
"--bloom-shadow-hover": "0 8px 40px rgba(61,46,30,0.14)",
|
|
1492
|
+
"--bloom-radius-sm": "16px",
|
|
1493
|
+
"--bloom-radius": "20px",
|
|
1494
|
+
"--bloom-radius-lg": "28px",
|
|
1495
|
+
"--bloom-radius-pill": "999px"
|
|
1496
|
+
},
|
|
1497
|
+
dark: {
|
|
1498
|
+
"--bloom-font": "'Karla', sans-serif",
|
|
1499
|
+
"--bloom-font-display": "'Lora', serif",
|
|
1500
|
+
"--bloom-bg": "#1C1610",
|
|
1501
|
+
"--bloom-surface": "#28201A",
|
|
1502
|
+
"--bloom-surface2": "#362C22",
|
|
1503
|
+
"--bloom-text": "#E8DED0",
|
|
1504
|
+
"--bloom-text-secondary": "#9A8A76",
|
|
1505
|
+
"--bloom-accent1": "#A08868",
|
|
1506
|
+
"--bloom-accent1-deep": "#7E6848",
|
|
1507
|
+
"--bloom-accent2": "#C48050",
|
|
1508
|
+
"--bloom-accent2-deep": "#A06030",
|
|
1509
|
+
"--bloom-accent3": "#B07868",
|
|
1510
|
+
"--bloom-accent3-deep": "#905848",
|
|
1511
|
+
"--bloom-accent4": "#B85848",
|
|
1512
|
+
"--bloom-accent4-deep": "#983828",
|
|
1513
|
+
"--bloom-shadow": "0 2px 24px rgba(0,0,0,0.3)",
|
|
1514
|
+
"--bloom-shadow-hover": "0 8px 40px rgba(0,0,0,0.4)",
|
|
1515
|
+
"--bloom-radius-sm": "16px",
|
|
1516
|
+
"--bloom-radius": "20px",
|
|
1517
|
+
"--bloom-radius-lg": "28px",
|
|
1518
|
+
"--bloom-radius-pill": "999px"
|
|
1519
|
+
}
|
|
1520
|
+
};
|
|
1521
|
+
var oceanMist = {
|
|
1522
|
+
name: "ocean",
|
|
1523
|
+
light: {
|
|
1524
|
+
"--bloom-font": "'Nunito', sans-serif",
|
|
1525
|
+
"--bloom-font-display": "'Space Grotesk', sans-serif",
|
|
1526
|
+
"--bloom-bg": "#F4F8FA",
|
|
1527
|
+
"--bloom-surface": "#E8F0F4",
|
|
1528
|
+
"--bloom-surface2": "#D4E2EA",
|
|
1529
|
+
"--bloom-text": "#1A2E3A",
|
|
1530
|
+
"--bloom-text-secondary": "#5E7A8C",
|
|
1531
|
+
"--bloom-accent1": "#6AB8C4",
|
|
1532
|
+
"--bloom-accent1-deep": "#3A96A8",
|
|
1533
|
+
"--bloom-accent2": "#E0A860",
|
|
1534
|
+
"--bloom-accent2-deep": "#C08840",
|
|
1535
|
+
"--bloom-accent3": "#7CA0D4",
|
|
1536
|
+
"--bloom-accent3-deep": "#5A80B8",
|
|
1537
|
+
"--bloom-accent4": "#D47A7A",
|
|
1538
|
+
"--bloom-accent4-deep": "#B85A5A",
|
|
1539
|
+
"--bloom-shadow": "0 2px 24px rgba(26,46,58,0.06)",
|
|
1540
|
+
"--bloom-shadow-hover": "0 8px 40px rgba(26,46,58,0.1)",
|
|
1541
|
+
"--bloom-radius-sm": "6px",
|
|
1542
|
+
"--bloom-radius": "10px",
|
|
1543
|
+
"--bloom-radius-lg": "14px",
|
|
1544
|
+
"--bloom-radius-pill": "999px"
|
|
1545
|
+
},
|
|
1546
|
+
dark: {
|
|
1547
|
+
"--bloom-font": "'Nunito', sans-serif",
|
|
1548
|
+
"--bloom-font-display": "'Space Grotesk', sans-serif",
|
|
1549
|
+
"--bloom-bg": "#0E1A20",
|
|
1550
|
+
"--bloom-surface": "#162228",
|
|
1551
|
+
"--bloom-surface2": "#1E2E36",
|
|
1552
|
+
"--bloom-text": "#D8E8EE",
|
|
1553
|
+
"--bloom-text-secondary": "#7A9AAC",
|
|
1554
|
+
"--bloom-accent1": "#4A9AAC",
|
|
1555
|
+
"--bloom-accent1-deep": "#2A7A8C",
|
|
1556
|
+
"--bloom-accent2": "#C89048",
|
|
1557
|
+
"--bloom-accent2-deep": "#A87030",
|
|
1558
|
+
"--bloom-accent3": "#5A80B8",
|
|
1559
|
+
"--bloom-accent3-deep": "#3A60A0",
|
|
1560
|
+
"--bloom-accent4": "#B85A5A",
|
|
1561
|
+
"--bloom-accent4-deep": "#983A3A",
|
|
1562
|
+
"--bloom-shadow": "0 2px 24px rgba(0,0,0,0.3)",
|
|
1563
|
+
"--bloom-shadow-hover": "0 8px 40px rgba(0,0,0,0.4)",
|
|
1564
|
+
"--bloom-radius-sm": "6px",
|
|
1565
|
+
"--bloom-radius": "10px",
|
|
1566
|
+
"--bloom-radius-lg": "14px",
|
|
1567
|
+
"--bloom-radius-pill": "999px"
|
|
1568
|
+
}
|
|
1569
|
+
};
|
|
1570
|
+
var builtInPalettes = [midnightGarden, desertRose, oceanMist];
|
|
1571
|
+
|
|
1572
|
+
|
|
1573
|
+
|
|
1574
|
+
|
|
1575
|
+
|
|
1355
1576
|
|
|
1356
1577
|
|
|
1357
1578
|
|
|
@@ -1409,5 +1630,5 @@ function ThemeProvider({
|
|
|
1409
1630
|
|
|
1410
1631
|
|
|
1411
1632
|
|
|
1412
|
-
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.DatePicker = DatePicker; exports.Dropdown = Dropdown; exports.DropdownItem = DropdownItem; exports.DropdownSeparator = DropdownSeparator; exports.Input = Input; exports.Modal = Modal; exports.Progress = Progress; exports.ProgressCircular = ProgressCircular; 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.buttonVariants = buttonVariants; exports.cardHoverLift = cardHoverLift; exports.cardVariants = cardVariants; exports.cn = cn; exports.fadeIn = fadeIn; exports.hoverLift = hoverLift; exports.inputVariants = inputVariants; 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;
|
|
1633
|
+
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.DatePicker = DatePicker; exports.Dropdown = Dropdown; exports.DropdownItem = DropdownItem; exports.DropdownSeparator = DropdownSeparator; exports.Input = Input; exports.Modal = Modal; exports.Progress = Progress; exports.ProgressCircular = ProgressCircular; 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;
|
|
1413
1634
|
//# sourceMappingURL=index.cjs.map
|