@tenerife.music/ui 1.1.0 → 1.1.1
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 +2 -1
- package/dist/{index-Cj8oRSOc.d.cts → index-DInIMlaR.d.cts} +1 -485
- package/dist/{index-Cj8oRSOc.d.ts → index-DInIMlaR.d.ts} +1 -485
- package/dist/index.cjs +782 -2709
- package/dist/index.d.cts +82 -390
- package/dist/index.d.ts +82 -390
- package/dist/index.mjs +765 -2692
- package/dist/styles.css +0 -26
- package/dist/tokens/index.d.cts +486 -2
- package/dist/tokens/index.d.ts +486 -2
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var reactSlot = require('@radix-ui/react-slot');
|
|
4
|
-
var
|
|
4
|
+
var React49 = require('react');
|
|
5
5
|
var classVarianceAuthority = require('class-variance-authority');
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var tailwindMerge = require('tailwind-merge');
|
|
@@ -34,7 +34,7 @@ function _interopNamespace(e) {
|
|
|
34
34
|
return Object.freeze(n);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
var
|
|
37
|
+
var React49__namespace = /*#__PURE__*/_interopNamespace(React49);
|
|
38
38
|
var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
|
|
39
39
|
var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
|
|
40
40
|
var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
|
|
@@ -640,6 +640,162 @@ var MOTION_TOKENS = {
|
|
|
640
640
|
}
|
|
641
641
|
};
|
|
642
642
|
|
|
643
|
+
// src/FOUNDATION/tokens/components/badge.ts
|
|
644
|
+
var BADGE_TOKENS = {
|
|
645
|
+
/**
|
|
646
|
+
* Layout tokens
|
|
647
|
+
* Base layout utilities for badge component
|
|
648
|
+
*/
|
|
649
|
+
layout: "inline-flex items-center",
|
|
650
|
+
// Base layout for badge container
|
|
651
|
+
/**
|
|
652
|
+
* Badge padding
|
|
653
|
+
* Uses semantic spacing tokens
|
|
654
|
+
*/
|
|
655
|
+
padding: {
|
|
656
|
+
horizontal: "px-xs",
|
|
657
|
+
// 4px (0.25rem) - maps to semanticSpacing.xs
|
|
658
|
+
vertical: "py-xs"
|
|
659
|
+
// 4px (0.25rem) - maps to semanticSpacing.xs
|
|
660
|
+
},
|
|
661
|
+
/**
|
|
662
|
+
* Border radius for badges
|
|
663
|
+
* Uses fully rounded (pill shape) - maps to borderRadius.full
|
|
664
|
+
*
|
|
665
|
+
* @rule References borderRadius.full (9999px) from Radius Authority
|
|
666
|
+
* @see docs/architecture/RADIUS_AUTHORITY_CONTRACT.md
|
|
667
|
+
*/
|
|
668
|
+
radius: "rounded-full",
|
|
669
|
+
// References borderRadius.full (9999px) - Radius Authority compliant
|
|
670
|
+
/**
|
|
671
|
+
* Font size for badges
|
|
672
|
+
* References foundation typography fontSize tokens from Typography Authority
|
|
673
|
+
*
|
|
674
|
+
* @rule All fontSize values reference Typography Authority tokens
|
|
675
|
+
* @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
|
|
676
|
+
*/
|
|
677
|
+
fontSize: "text-xs",
|
|
678
|
+
// References fontSize.xs[0] from Typography Authority (~12px)
|
|
679
|
+
/**
|
|
680
|
+
* Font weight for badges
|
|
681
|
+
*/
|
|
682
|
+
fontWeight: "font-semibold",
|
|
683
|
+
// Semibold weight (600)
|
|
684
|
+
/**
|
|
685
|
+
* Border token
|
|
686
|
+
* Base border style
|
|
687
|
+
*/
|
|
688
|
+
border: "border",
|
|
689
|
+
// Base border
|
|
690
|
+
/**
|
|
691
|
+
* Underline offset for link variant
|
|
692
|
+
* Uses spacing token (xs = 4px) which matches underline-offset-4
|
|
693
|
+
*/
|
|
694
|
+
underlineOffset: "underline-offset-4",
|
|
695
|
+
// 4px (0.25rem) - matches semanticSpacing.xs
|
|
696
|
+
/**
|
|
697
|
+
* Transition tokens
|
|
698
|
+
* References Motion Authority tokens for consistent motion behavior
|
|
699
|
+
*
|
|
700
|
+
* @rule Uses MOTION_TOKENS.transitionPreset.colors from Motion Authority
|
|
701
|
+
* @rule Motion transitions MUST use canonical motion tokens only
|
|
702
|
+
* @see docs/architecture/MOTION_AUTHORITY_CONTRACT.md
|
|
703
|
+
*/
|
|
704
|
+
transition: {
|
|
705
|
+
colors: MOTION_TOKENS.transitionPreset.colors
|
|
706
|
+
// "transition-colors duration-normal ease-out" - Motion Authority compliant
|
|
707
|
+
},
|
|
708
|
+
/**
|
|
709
|
+
* Focus state tokens
|
|
710
|
+
* Focus ring for keyboard navigation
|
|
711
|
+
*
|
|
712
|
+
* @rule Focus MUST use focus-visible: prefix (keyboard navigation only)
|
|
713
|
+
* @rule Focus MUST be blocked when disabled={true}
|
|
714
|
+
*/
|
|
715
|
+
focus: {
|
|
716
|
+
ring: "focus-visible:ring-2 focus-visible:ring-ring",
|
|
717
|
+
// Focus ring using semantic ring color
|
|
718
|
+
outline: "focus-visible:outline-none",
|
|
719
|
+
// Remove default outline (replaced by ring)
|
|
720
|
+
offset: "focus-visible:ring-offset-2"
|
|
721
|
+
// Ring offset
|
|
722
|
+
},
|
|
723
|
+
/**
|
|
724
|
+
* Color tokens for badge variants
|
|
725
|
+
* Uses semantic color tokens that map to CSS variables
|
|
726
|
+
*/
|
|
727
|
+
variant: {
|
|
728
|
+
primary: {
|
|
729
|
+
border: "border-transparent",
|
|
730
|
+
// Transparent border
|
|
731
|
+
background: "bg-primary",
|
|
732
|
+
// Primary background using CSS var
|
|
733
|
+
text: "text-primary-foreground",
|
|
734
|
+
// Primary text using CSS var
|
|
735
|
+
hover: "hover:bg-primary/80"
|
|
736
|
+
// Primary hover background
|
|
737
|
+
},
|
|
738
|
+
secondary: {
|
|
739
|
+
border: "border-transparent",
|
|
740
|
+
// Transparent border
|
|
741
|
+
background: "bg-secondary",
|
|
742
|
+
// Secondary background using CSS var
|
|
743
|
+
text: "text-secondary-foreground",
|
|
744
|
+
// Secondary text using CSS var
|
|
745
|
+
hover: "hover:bg-secondary/80"
|
|
746
|
+
// Secondary hover background
|
|
747
|
+
},
|
|
748
|
+
accent: {
|
|
749
|
+
border: "border-transparent",
|
|
750
|
+
// Transparent border
|
|
751
|
+
background: "bg-accent",
|
|
752
|
+
// Accent background using CSS var
|
|
753
|
+
text: "text-accent-foreground",
|
|
754
|
+
// Accent text using CSS var
|
|
755
|
+
hover: "hover:bg-accent/80"
|
|
756
|
+
// Accent hover background
|
|
757
|
+
},
|
|
758
|
+
outline: {
|
|
759
|
+
border: "border-border",
|
|
760
|
+
// No background
|
|
761
|
+
text: "text-foreground"
|
|
762
|
+
// Foreground text using CSS var
|
|
763
|
+
},
|
|
764
|
+
ghost: {
|
|
765
|
+
border: "border-transparent",
|
|
766
|
+
// Transparent border
|
|
767
|
+
background: "bg-transparent",
|
|
768
|
+
// Transparent background
|
|
769
|
+
text: "text-foreground",
|
|
770
|
+
// Foreground text using CSS var
|
|
771
|
+
hover: "hover:bg-accent/10"
|
|
772
|
+
// Ghost hover background
|
|
773
|
+
},
|
|
774
|
+
link: {
|
|
775
|
+
border: "border-transparent",
|
|
776
|
+
// Transparent border
|
|
777
|
+
background: "bg-transparent",
|
|
778
|
+
// Transparent background
|
|
779
|
+
text: "text-primary",
|
|
780
|
+
// Primary text using CSS var
|
|
781
|
+
hover: "hover:text-primary/80",
|
|
782
|
+
// Primary hover text
|
|
783
|
+
underline: "hover:underline"
|
|
784
|
+
// Underline on hover
|
|
785
|
+
},
|
|
786
|
+
destructive: {
|
|
787
|
+
border: "border-transparent",
|
|
788
|
+
// Transparent border
|
|
789
|
+
background: "bg-destructive",
|
|
790
|
+
// Destructive background using CSS var
|
|
791
|
+
text: "text-destructive-foreground",
|
|
792
|
+
// Destructive text using CSS var
|
|
793
|
+
hover: "hover:bg-destructive/80"
|
|
794
|
+
// Destructive hover background
|
|
795
|
+
}
|
|
796
|
+
}
|
|
797
|
+
};
|
|
798
|
+
|
|
643
799
|
// src/FOUNDATION/tokens/components/button.ts
|
|
644
800
|
var BUTTON_TOKENS = {
|
|
645
801
|
/**
|
|
@@ -1063,68 +1219,6 @@ var CARD_TOKENS = {
|
|
|
1063
1219
|
}
|
|
1064
1220
|
};
|
|
1065
1221
|
|
|
1066
|
-
// src/FOUNDATION/tokens/components/artist.ts
|
|
1067
|
-
var ARTIST_TOKENS = {
|
|
1068
|
-
/**
|
|
1069
|
-
* Image container tokens
|
|
1070
|
-
* Layout classes for image container wrapper
|
|
1071
|
-
*/
|
|
1072
|
-
image: {
|
|
1073
|
-
/**
|
|
1074
|
-
* Container layout tokens
|
|
1075
|
-
* Positioning and sizing for image container
|
|
1076
|
-
*/
|
|
1077
|
-
container: {
|
|
1078
|
-
/**
|
|
1079
|
-
* Base container layout
|
|
1080
|
-
* Relative positioning, full width, overflow hidden
|
|
1081
|
-
* Uses Tailwind layout utilities (allowed per architecture)
|
|
1082
|
-
*/
|
|
1083
|
-
layout: "relative w-full overflow-hidden"
|
|
1084
|
-
},
|
|
1085
|
-
/**
|
|
1086
|
-
* Image sizing tokens
|
|
1087
|
-
* Full width and height for images
|
|
1088
|
-
*/
|
|
1089
|
-
sizing: {
|
|
1090
|
-
/**
|
|
1091
|
-
* Full size image
|
|
1092
|
-
* Uses Tailwind sizing utilities (allowed per architecture)
|
|
1093
|
-
*/
|
|
1094
|
-
full: "h-full w-full"
|
|
1095
|
-
},
|
|
1096
|
-
/**
|
|
1097
|
-
* Placeholder container tokens
|
|
1098
|
-
* Layout for placeholder icon container when no image is provided
|
|
1099
|
-
*/
|
|
1100
|
-
placeholder: {
|
|
1101
|
-
/**
|
|
1102
|
-
* Placeholder container layout
|
|
1103
|
-
* Flex centering for placeholder icon
|
|
1104
|
-
* Uses Tailwind layout utilities (allowed per architecture)
|
|
1105
|
-
*/
|
|
1106
|
-
container: "flex h-full w-full items-center justify-center"
|
|
1107
|
-
}
|
|
1108
|
-
},
|
|
1109
|
-
/**
|
|
1110
|
-
* Footer border tokens
|
|
1111
|
-
* Border styling for card footer separator
|
|
1112
|
-
*/
|
|
1113
|
-
footer: {
|
|
1114
|
-
/**
|
|
1115
|
-
* Footer border tokens
|
|
1116
|
-
* Top border separator for footer section
|
|
1117
|
-
*/
|
|
1118
|
-
border: {
|
|
1119
|
-
/**
|
|
1120
|
-
* Footer border top
|
|
1121
|
-
* Uses semantic border color token
|
|
1122
|
-
*/
|
|
1123
|
-
top: "border-t border-border"
|
|
1124
|
-
}
|
|
1125
|
-
}
|
|
1126
|
-
};
|
|
1127
|
-
|
|
1128
1222
|
// src/FOUNDATION/tokens/spacing.ts
|
|
1129
1223
|
var spacing = {
|
|
1130
1224
|
// Zero spacing
|
|
@@ -1511,609 +1605,87 @@ var ICON_TOKENS = {
|
|
|
1511
1605
|
}
|
|
1512
1606
|
};
|
|
1513
1607
|
|
|
1514
|
-
// src/FOUNDATION/tokens/components/
|
|
1515
|
-
var
|
|
1608
|
+
// src/FOUNDATION/tokens/components/input.ts
|
|
1609
|
+
var INPUT_TOKENS = {
|
|
1516
1610
|
/**
|
|
1517
|
-
*
|
|
1518
|
-
*
|
|
1611
|
+
* Input heights by size
|
|
1612
|
+
* Supports xs, sm, md, lg, xl sizes
|
|
1519
1613
|
*/
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
/**
|
|
1532
|
-
* Border styles
|
|
1533
|
-
* Maps to semantic border tokens
|
|
1534
|
-
*/
|
|
1535
|
-
border: {
|
|
1536
|
-
default: "border border-border",
|
|
1537
|
-
// Default border - maps to semantic border tokens
|
|
1538
|
-
hover: "hover:border-primary/20"
|
|
1539
|
-
// Hover state border with primary color at 20% opacity
|
|
1540
|
-
},
|
|
1541
|
-
/**
|
|
1542
|
-
* Border radius
|
|
1543
|
-
* References borderRadius.xl (0.75rem / 12px)
|
|
1544
|
-
* Using Tailwind class "rounded-xl" which maps to borderRadius.xl
|
|
1545
|
-
*/
|
|
1546
|
-
radius: {
|
|
1547
|
-
default: "rounded-xl"
|
|
1548
|
-
// References borderRadius.xl (0.75rem / 12px) via Tailwind
|
|
1549
|
-
},
|
|
1550
|
-
/**
|
|
1551
|
-
* Shadow (elevation) tokens
|
|
1552
|
-
* References elevationShadows.md
|
|
1553
|
-
* Using Tailwind class "shadow-md" which maps to elevationShadows.md
|
|
1554
|
-
*/
|
|
1555
|
-
shadow: {
|
|
1556
|
-
default: "shadow-md"
|
|
1557
|
-
// References elevationShadows.md via Tailwind
|
|
1558
|
-
},
|
|
1559
|
-
/**
|
|
1560
|
-
* Elevation change on hover
|
|
1561
|
-
* References elevationShadows.xl
|
|
1562
|
-
* Using Tailwind class "hover:shadow-xl" which maps to elevationShadows.xl
|
|
1563
|
-
*/
|
|
1564
|
-
elevation: {
|
|
1565
|
-
hover: "hover:shadow-xl"
|
|
1566
|
-
// References elevationShadows.xl via Tailwind
|
|
1567
|
-
}
|
|
1614
|
+
height: {
|
|
1615
|
+
xs: "h-7",
|
|
1616
|
+
// 28px (1.75rem)
|
|
1617
|
+
sm: "h-8",
|
|
1618
|
+
// 32px (2rem)
|
|
1619
|
+
md: "h-9",
|
|
1620
|
+
// 36px (2.25rem) - default
|
|
1621
|
+
lg: "h-10",
|
|
1622
|
+
// 40px (2.5rem)
|
|
1623
|
+
xl: "h-11"
|
|
1624
|
+
// 44px (2.75rem)
|
|
1568
1625
|
},
|
|
1569
1626
|
/**
|
|
1570
|
-
*
|
|
1571
|
-
*
|
|
1572
|
-
* Note: Tailwind classes are used for component className application
|
|
1627
|
+
* Input padding by size
|
|
1628
|
+
* Horizontal and vertical padding values
|
|
1573
1629
|
*/
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
*/
|
|
1587
|
-
badges: {
|
|
1588
|
-
offsetX: semanticSpacing.md,
|
|
1589
|
-
// Horizontal offset for badges (16px)
|
|
1590
|
-
offsetY: semanticSpacing.md
|
|
1591
|
-
// Vertical offset for badges (16px)
|
|
1592
|
-
},
|
|
1593
|
-
/**
|
|
1594
|
-
* Image spacing
|
|
1595
|
-
*/
|
|
1596
|
-
image: {
|
|
1597
|
-
bottomMargin: semanticSpacing.none
|
|
1598
|
-
// Margin below image (0px)
|
|
1599
|
-
},
|
|
1600
|
-
/**
|
|
1601
|
-
* Card vertical gap
|
|
1602
|
-
*/
|
|
1603
|
-
card: {
|
|
1604
|
-
verticalGap: semanticSpacing.md
|
|
1605
|
-
// Vertical gap in card content (16px)
|
|
1606
|
-
},
|
|
1607
|
-
/**
|
|
1608
|
-
* Metadata item gap
|
|
1609
|
-
*/
|
|
1610
|
-
metadata: {
|
|
1611
|
-
itemGap: semanticSpacing.xs
|
|
1612
|
-
// Gap between metadata items (4px)
|
|
1613
|
-
},
|
|
1614
|
-
/**
|
|
1615
|
-
* Footer spacing
|
|
1616
|
-
*/
|
|
1617
|
-
footer: {
|
|
1618
|
-
paddingTopDefault: "pt-sm",
|
|
1619
|
-
// Footer padding top default - references semanticSpacing.sm (8px) via Tailwind
|
|
1620
|
-
paddingTopCompact: "pt-xs"
|
|
1621
|
-
// Footer padding top compact - references semanticSpacing.xs (4px) via Tailwind
|
|
1630
|
+
padding: {
|
|
1631
|
+
horizontal: {
|
|
1632
|
+
xs: "px-xs",
|
|
1633
|
+
// 4px (0.25rem)
|
|
1634
|
+
sm: "px-sm",
|
|
1635
|
+
// 8px (0.5rem)
|
|
1636
|
+
md: "px-sm",
|
|
1637
|
+
// 8px (0.5rem) - default
|
|
1638
|
+
lg: "px-md",
|
|
1639
|
+
// 16px (1rem)
|
|
1640
|
+
xl: "px-lg"
|
|
1641
|
+
// 24px (1.5rem)
|
|
1622
1642
|
},
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1643
|
+
vertical: {
|
|
1644
|
+
xs: "py-xs",
|
|
1645
|
+
// 4px (0.25rem)
|
|
1646
|
+
sm: "py-xs",
|
|
1647
|
+
// 4px (0.25rem)
|
|
1648
|
+
md: "py-xs",
|
|
1649
|
+
// 4px (0.25rem) - default
|
|
1650
|
+
lg: "py-sm",
|
|
1651
|
+
// 8px (0.5rem)
|
|
1652
|
+
xl: "py-md"
|
|
1653
|
+
// 16px (1rem)
|
|
1633
1654
|
}
|
|
1634
1655
|
},
|
|
1635
1656
|
/**
|
|
1636
|
-
*
|
|
1637
|
-
* References semanticSpacing tokens
|
|
1638
|
-
* Note: Tailwind utilities are used for component className application
|
|
1657
|
+
* Border radius by size
|
|
1639
1658
|
*/
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
},
|
|
1652
|
-
/**
|
|
1653
|
-
* Gap tokens for spacing between card elements
|
|
1654
|
-
* References semanticSpacing (md = 16px, xs = 4px)
|
|
1655
|
-
* Note: "gap-md" and "gap-xs" are Tailwind utilities that apply semanticSpacing values
|
|
1656
|
-
*/
|
|
1657
|
-
gap: {
|
|
1658
|
-
default: "gap-md",
|
|
1659
|
-
// Default gap - references semanticSpacing.md (16px)
|
|
1660
|
-
compact: "gap-xs"
|
|
1661
|
-
// Compact variant gap - references semanticSpacing.xs (4px)
|
|
1662
|
-
}
|
|
1659
|
+
radius: {
|
|
1660
|
+
xs: "rounded-sm",
|
|
1661
|
+
// 4px (0.25rem)
|
|
1662
|
+
sm: "rounded-md",
|
|
1663
|
+
// 6px (0.375rem)
|
|
1664
|
+
md: "rounded-md",
|
|
1665
|
+
// 6px (0.375rem) - default
|
|
1666
|
+
lg: "rounded-md",
|
|
1667
|
+
// 6px (0.375rem)
|
|
1668
|
+
xl: "rounded-lg"
|
|
1669
|
+
// 8px (0.5rem)
|
|
1663
1670
|
},
|
|
1664
1671
|
/**
|
|
1665
|
-
*
|
|
1666
|
-
*
|
|
1672
|
+
* Font sizes by size variant
|
|
1673
|
+
* Maps to foundation typography fontSize tokens
|
|
1667
1674
|
*/
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
//
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
*/
|
|
1680
|
-
radius: "rounded-t-xl",
|
|
1681
|
-
// References borderRadius.xl (0.75rem / 12px) via Tailwind
|
|
1682
|
-
/**
|
|
1683
|
-
* Overlay gradient tokens for image overlays
|
|
1684
|
-
* Used for hover states and text readability
|
|
1685
|
-
*/
|
|
1686
|
-
overlay: {
|
|
1687
|
-
gradient: "bg-gradient-to-t from-black/60 via-transparent to-transparent"
|
|
1688
|
-
// Gradient overlay for image hover states
|
|
1689
|
-
},
|
|
1690
|
-
/**
|
|
1691
|
-
* Placeholder gradient tokens for image placeholders
|
|
1692
|
-
* Used when no image URL is provided
|
|
1693
|
-
*/
|
|
1694
|
-
placeholder: {
|
|
1695
|
-
gradient: "bg-gradient-to-br from-muted to-muted/50"
|
|
1696
|
-
// Placeholder gradient background
|
|
1697
|
-
}
|
|
1675
|
+
fontSize: {
|
|
1676
|
+
xs: "text-xs",
|
|
1677
|
+
// Maps to fontSize.xs[0]
|
|
1678
|
+
sm: "text-sm",
|
|
1679
|
+
// Maps to fontSize.sm[0]
|
|
1680
|
+
md: "text-base",
|
|
1681
|
+
// Maps to fontSize.base[0] - default
|
|
1682
|
+
lg: "text-base",
|
|
1683
|
+
// Maps to fontSize.base[0]
|
|
1684
|
+
xl: "text-lg"
|
|
1685
|
+
// Maps to fontSize.lg[0]
|
|
1698
1686
|
},
|
|
1699
1687
|
/**
|
|
1700
|
-
*
|
|
1701
|
-
* Defines hover states and line clamping for titles and descriptions
|
|
1702
|
-
*/
|
|
1703
|
-
text: {
|
|
1704
|
-
/**
|
|
1705
|
-
* Hover state tokens for text elements
|
|
1706
|
-
* Used for interactive text elements like titles
|
|
1707
|
-
*/
|
|
1708
|
-
hover: {
|
|
1709
|
-
primary: "group-hover:text-primary"
|
|
1710
|
-
// Hover state for primary text color
|
|
1711
|
-
},
|
|
1712
|
-
/**
|
|
1713
|
-
* Line clamp tokens for text truncation
|
|
1714
|
-
* Used for limiting text to specific number of lines
|
|
1715
|
-
*/
|
|
1716
|
-
lineClamp: {
|
|
1717
|
-
one: "line-clamp-1",
|
|
1718
|
-
// Single line clamp
|
|
1719
|
-
two: "line-clamp-2",
|
|
1720
|
-
// Two line clamp
|
|
1721
|
-
three: "line-clamp-3"
|
|
1722
|
-
// Three line clamp
|
|
1723
|
-
}
|
|
1724
|
-
},
|
|
1725
|
-
/**
|
|
1726
|
-
* Metadata tokens for card information displays
|
|
1727
|
-
* Used for date/time, location, and other metadata patterns
|
|
1728
|
-
* Maps to TEXT_TOKENS, ICON_TOKENS, and semanticSpacing
|
|
1729
|
-
*/
|
|
1730
|
-
metadata: {
|
|
1731
|
-
/**
|
|
1732
|
-
* Text color tokens
|
|
1733
|
-
* Maps to semantic text color tokens
|
|
1734
|
-
*/
|
|
1735
|
-
text: {
|
|
1736
|
-
primary: "text-foreground",
|
|
1737
|
-
// Primary metadata text - maps to semantic text color
|
|
1738
|
-
secondary: "text-muted-foreground"
|
|
1739
|
-
// Secondary metadata text - maps to semantic muted text color
|
|
1740
|
-
},
|
|
1741
|
-
/**
|
|
1742
|
-
* Icon tokens
|
|
1743
|
-
* Maps to ICON_TOKENS for sizes and colors
|
|
1744
|
-
*/
|
|
1745
|
-
icon: {
|
|
1746
|
-
default: "text-muted-foreground",
|
|
1747
|
-
// Default icon color - maps to ICON_TOKENS.colors.muted
|
|
1748
|
-
sizeSm: ICON_TOKENS.sizes.md
|
|
1749
|
-
// Small icon size - references ICON_TOKENS.sizes.md (16px)
|
|
1750
|
-
},
|
|
1751
|
-
/**
|
|
1752
|
-
* Spacing tokens for metadata layouts
|
|
1753
|
-
* References semanticSpacing (xs = 4px, sm = 8px)
|
|
1754
|
-
* Using Tailwind classes which map to semanticSpacing values
|
|
1755
|
-
*/
|
|
1756
|
-
spacing: {
|
|
1757
|
-
vertical: "gap-xs",
|
|
1758
|
-
// References semanticSpacing.xs (4px) via Tailwind
|
|
1759
|
-
horizontal: "gap-sm"
|
|
1760
|
-
// References semanticSpacing.sm (8px) via Tailwind
|
|
1761
|
-
}
|
|
1762
|
-
},
|
|
1763
|
-
/**
|
|
1764
|
-
* Badge tokens for featured/popular badges
|
|
1765
|
-
* References semanticSpacing, borderRadius, and elevationShadows
|
|
1766
|
-
*/
|
|
1767
|
-
badges: {
|
|
1768
|
-
/**
|
|
1769
|
-
* Badge size tokens (padding)
|
|
1770
|
-
* References semanticSpacing for padding values
|
|
1771
|
-
* Using Tailwind classes which map to semanticSpacing values
|
|
1772
|
-
*/
|
|
1773
|
-
size: {
|
|
1774
|
-
sm: "px-xs py-xs",
|
|
1775
|
-
// References semanticSpacing.xs (4px) for both horizontal and vertical via Tailwind
|
|
1776
|
-
md: "px-sm py-xs"
|
|
1777
|
-
// References semanticSpacing.sm (8px) horizontal, semanticSpacing.xs (4px) vertical via Tailwind
|
|
1778
|
-
},
|
|
1779
|
-
/**
|
|
1780
|
-
* Badge positioning tokens
|
|
1781
|
-
* References semanticSpacing for absolute positioning
|
|
1782
|
-
* Using Tailwind classes which map to semanticSpacing values
|
|
1783
|
-
*/
|
|
1784
|
-
position: {
|
|
1785
|
-
default: "right-md top-md",
|
|
1786
|
-
// References semanticSpacing.md (16px) for both right and top via Tailwind
|
|
1787
|
-
compact: "right-sm top-sm"
|
|
1788
|
-
// References semanticSpacing.sm (8px) for both right and top via Tailwind
|
|
1789
|
-
},
|
|
1790
|
-
/**
|
|
1791
|
-
* Additional vertical positioning tokens for multi-badge scenarios
|
|
1792
|
-
* References semanticSpacing for top positioning
|
|
1793
|
-
* Using Tailwind classes which map to semanticSpacing values
|
|
1794
|
-
*/
|
|
1795
|
-
positionY: {
|
|
1796
|
-
xl: "top-xl",
|
|
1797
|
-
// References semanticSpacing.xl (32px) via Tailwind
|
|
1798
|
-
"2xl": "top-2xl",
|
|
1799
|
-
// References semanticSpacing["2xl"] (48px) via Tailwind
|
|
1800
|
-
"3xl": "top-3xl"
|
|
1801
|
-
// References semanticSpacing["3xl"] (64px) via Tailwind
|
|
1802
|
-
},
|
|
1803
|
-
/**
|
|
1804
|
-
* Badge surface (background) tokens
|
|
1805
|
-
* Maps to semantic color tokens
|
|
1806
|
-
*/
|
|
1807
|
-
surface: {
|
|
1808
|
-
default: "bg-primary",
|
|
1809
|
-
// Default badge background - maps to semantic primary color
|
|
1810
|
-
featured: "bg-gradient-to-r from-accent-500 to-primary-600"
|
|
1811
|
-
// Featured badge gradient
|
|
1812
|
-
},
|
|
1813
|
-
/**
|
|
1814
|
-
* Badge text color
|
|
1815
|
-
* White for contrast on colored backgrounds
|
|
1816
|
-
*/
|
|
1817
|
-
text: {
|
|
1818
|
-
color: "text-white"
|
|
1819
|
-
// Badge text color - white for contrast on colored backgrounds
|
|
1820
|
-
},
|
|
1821
|
-
/**
|
|
1822
|
-
* Badge border radius
|
|
1823
|
-
* References borderRadius.full (pill shape)
|
|
1824
|
-
* Using Tailwind class "rounded-full" which maps to borderRadius.full
|
|
1825
|
-
*/
|
|
1826
|
-
radius: "rounded-full",
|
|
1827
|
-
// References borderRadius.full via Tailwind
|
|
1828
|
-
/**
|
|
1829
|
-
* Badge shadow
|
|
1830
|
-
* References elevationShadows.lg
|
|
1831
|
-
* Using Tailwind class "shadow-lg" which maps to elevationShadows.lg
|
|
1832
|
-
*/
|
|
1833
|
-
shadow: "shadow-lg"
|
|
1834
|
-
// References elevationShadows.lg via Tailwind
|
|
1835
|
-
},
|
|
1836
|
-
/**
|
|
1837
|
-
* Price/Capacity tokens for displaying price and capacity information
|
|
1838
|
-
* Maps to semantic text color tokens and semanticSpacing
|
|
1839
|
-
*/
|
|
1840
|
-
priceCapacity: {
|
|
1841
|
-
/**
|
|
1842
|
-
* Text color tokens
|
|
1843
|
-
* Maps to semantic text color tokens
|
|
1844
|
-
*/
|
|
1845
|
-
text: {
|
|
1846
|
-
primary: "text-foreground",
|
|
1847
|
-
// Primary price/capacity text - maps to semantic text color
|
|
1848
|
-
secondary: "text-muted-foreground"
|
|
1849
|
-
// Secondary price/capacity text - maps to semantic muted text color
|
|
1850
|
-
},
|
|
1851
|
-
/**
|
|
1852
|
-
* Spacing between price and capacity elements
|
|
1853
|
-
* References semanticSpacing.sm (8px)
|
|
1854
|
-
* Using Tailwind class "gap-sm" which maps to semanticSpacing.sm
|
|
1855
|
-
*/
|
|
1856
|
-
spacing: "gap-sm"
|
|
1857
|
-
// References semanticSpacing.sm (8px) via Tailwind
|
|
1858
|
-
},
|
|
1859
|
-
/**
|
|
1860
|
-
* Motion tokens for hover and interaction states
|
|
1861
|
-
* References MOTION_TOKENS for transitions and animations
|
|
1862
|
-
*/
|
|
1863
|
-
motion: {
|
|
1864
|
-
/**
|
|
1865
|
-
* Hover state tokens
|
|
1866
|
-
* References MOTION_TOKENS and elevationShadows
|
|
1867
|
-
*/
|
|
1868
|
-
hover: {
|
|
1869
|
-
transition: MOTION_TOKENS.transitionPreset.normal,
|
|
1870
|
-
// References MOTION_TOKENS.transitionPreset.normal
|
|
1871
|
-
scale: "hover:scale-110",
|
|
1872
|
-
// Hover scale transform (110% scale) - domain-specific value
|
|
1873
|
-
elevation: "hover:shadow-xl"
|
|
1874
|
-
// References elevationShadows.xl via Tailwind
|
|
1875
|
-
}
|
|
1876
|
-
},
|
|
1877
|
-
/**
|
|
1878
|
-
* Skeleton tokens for loading states
|
|
1879
|
-
* References DATA_TOKENS.skeleton for skeleton patterns and semanticSpacing for dimensions
|
|
1880
|
-
*/
|
|
1881
|
-
skeleton: {
|
|
1882
|
-
/**
|
|
1883
|
-
* Base skeleton wrapper tokens
|
|
1884
|
-
* Default styling for skeleton wrapper components
|
|
1885
|
-
*/
|
|
1886
|
-
base: {
|
|
1887
|
-
/**
|
|
1888
|
-
* Default border radius for skeleton wrapper
|
|
1889
|
-
* References DATA_TOKENS.skeleton.radius.text
|
|
1890
|
-
*/
|
|
1891
|
-
radius: DATA_TOKENS.skeleton.radius.text,
|
|
1892
|
-
/**
|
|
1893
|
-
* Default animation for skeleton wrapper
|
|
1894
|
-
* References DATA_TOKENS.skeleton.animation.pulse
|
|
1895
|
-
*/
|
|
1896
|
-
animation: DATA_TOKENS.skeleton.animation.pulse,
|
|
1897
|
-
/**
|
|
1898
|
-
* Default background for skeleton wrapper
|
|
1899
|
-
* References DATA_TOKENS.skeleton.background.default
|
|
1900
|
-
*/
|
|
1901
|
-
background: DATA_TOKENS.skeleton.background.default
|
|
1902
|
-
},
|
|
1903
|
-
/**
|
|
1904
|
-
* Image skeleton height
|
|
1905
|
-
* Domain-specific: card images need 192px (spacing[48] = 12rem)
|
|
1906
|
-
* Note: DATA_TOKENS.skeleton.height.card is 128px, but card images need 192px
|
|
1907
|
-
* Using Tailwind class "h-48" which maps to spacing[48] (12rem / 192px)
|
|
1908
|
-
*/
|
|
1909
|
-
image: {
|
|
1910
|
-
height: "h-48"
|
|
1911
|
-
// References spacing[48] (12rem / 192px) via Tailwind
|
|
1912
|
-
},
|
|
1913
|
-
/**
|
|
1914
|
-
* Content gap for skeleton elements
|
|
1915
|
-
* References semanticSpacing.md (16px)
|
|
1916
|
-
* Using Tailwind class "gap-md" which maps to semanticSpacing.md
|
|
1917
|
-
*/
|
|
1918
|
-
content: {
|
|
1919
|
-
gap: "gap-md",
|
|
1920
|
-
// References semanticSpacing.md (16px) via Tailwind
|
|
1921
|
-
/**
|
|
1922
|
-
* Content width tokens for skeleton elements
|
|
1923
|
-
* References DATA_TOKENS where available, uses Tailwind fraction classes for domain-specific values
|
|
1924
|
-
*/
|
|
1925
|
-
width: {
|
|
1926
|
-
full: DATA_TOKENS.skeleton.width.full,
|
|
1927
|
-
// References DATA_TOKENS.skeleton.width.full
|
|
1928
|
-
threeQuarters: "w-3/4",
|
|
1929
|
-
// Three quarters width (75%) - domain-specific, using Tailwind fraction
|
|
1930
|
-
half: "w-1/2"
|
|
1931
|
-
// Half width (50%) - domain-specific, using Tailwind fraction
|
|
1932
|
-
}
|
|
1933
|
-
},
|
|
1934
|
-
/**
|
|
1935
|
-
* Badge skeleton dimensions
|
|
1936
|
-
* Domain-specific values for badge skeleton sizing
|
|
1937
|
-
* References spacing values via Tailwind classes
|
|
1938
|
-
*/
|
|
1939
|
-
badge: {
|
|
1940
|
-
width: "w-20",
|
|
1941
|
-
// References spacing[20] (5rem / 80px) via Tailwind
|
|
1942
|
-
height: "h-6"
|
|
1943
|
-
// References spacing[6] (1.5rem / 24px) via Tailwind
|
|
1944
|
-
}
|
|
1945
|
-
},
|
|
1946
|
-
/**
|
|
1947
|
-
* CTA (Call-to-Action) button tokens for domain card components
|
|
1948
|
-
* Provides PromoCard-specific CTA button styling tokens
|
|
1949
|
-
* These tokens are semantically owned by domain card components, not by the Button component
|
|
1950
|
-
* References foundation tokens (spacing, typography, radius, shadows, motion) for consistency
|
|
1951
|
-
*/
|
|
1952
|
-
cta: {
|
|
1953
|
-
/**
|
|
1954
|
-
* CTA button styling tokens
|
|
1955
|
-
* Used by PromoCard and other domain card components for CTA button elements
|
|
1956
|
-
*/
|
|
1957
|
-
button: {
|
|
1958
|
-
/**
|
|
1959
|
-
* Button heights by size
|
|
1960
|
-
* Maps to Tailwind height utilities: h-8, h-9
|
|
1961
|
-
*/
|
|
1962
|
-
height: {
|
|
1963
|
-
sm: "h-8",
|
|
1964
|
-
// 32px (2rem) - compact size
|
|
1965
|
-
md: "h-9"
|
|
1966
|
-
// 36px (2.25rem) - default size
|
|
1967
|
-
},
|
|
1968
|
-
/**
|
|
1969
|
-
* Button padding by size
|
|
1970
|
-
* Horizontal and vertical padding values
|
|
1971
|
-
* References semanticSpacing tokens
|
|
1972
|
-
*/
|
|
1973
|
-
padding: {
|
|
1974
|
-
horizontal: {
|
|
1975
|
-
sm: "px-sm",
|
|
1976
|
-
// 8px (0.5rem) - maps to semanticSpacing.sm
|
|
1977
|
-
md: "px-md"
|
|
1978
|
-
// 16px (1rem) - maps to semanticSpacing.md
|
|
1979
|
-
},
|
|
1980
|
-
vertical: {
|
|
1981
|
-
sm: "py-xs"
|
|
1982
|
-
// 4px (0.25rem) - maps to semanticSpacing.xs
|
|
1983
|
-
}
|
|
1984
|
-
},
|
|
1985
|
-
/**
|
|
1986
|
-
* Border radius for CTA buttons
|
|
1987
|
-
* References borderRadius.md (6px / 0.375rem)
|
|
1988
|
-
* Using Tailwind class "rounded-md" which maps to borderRadius.md
|
|
1989
|
-
*/
|
|
1990
|
-
radius: "rounded-md",
|
|
1991
|
-
// References borderRadius.md via Tailwind
|
|
1992
|
-
/**
|
|
1993
|
-
* Font sizes by button size
|
|
1994
|
-
* Maps to foundation typography fontSize tokens
|
|
1995
|
-
*/
|
|
1996
|
-
fontSize: {
|
|
1997
|
-
sm: "text-xs",
|
|
1998
|
-
// Maps to fontSize.xs[0]
|
|
1999
|
-
md: "text-sm"
|
|
2000
|
-
// Maps to fontSize.sm[0]
|
|
2001
|
-
},
|
|
2002
|
-
/**
|
|
2003
|
-
* Shadow tokens for CTA buttons
|
|
2004
|
-
* Maps to foundation elevation shadow tokens
|
|
2005
|
-
*/
|
|
2006
|
-
shadow: {
|
|
2007
|
-
primary: "shadow"
|
|
2008
|
-
// Maps to elevationShadows.xs (primary variant uses shadow)
|
|
2009
|
-
},
|
|
2010
|
-
/**
|
|
2011
|
-
* Color tokens for CTA button variants
|
|
2012
|
-
* Uses semantic color tokens that map to CSS variables
|
|
2013
|
-
*/
|
|
2014
|
-
variant: {
|
|
2015
|
-
primary: {
|
|
2016
|
-
background: "bg-primary",
|
|
2017
|
-
// Primary background using CSS var
|
|
2018
|
-
text: "text-primary-foreground",
|
|
2019
|
-
// Primary text using CSS var
|
|
2020
|
-
hover: "hover:bg-primary/90"
|
|
2021
|
-
// Primary hover using CSS var
|
|
2022
|
-
}
|
|
2023
|
-
},
|
|
2024
|
-
/**
|
|
2025
|
-
* Transition tokens for CTA buttons
|
|
2026
|
-
* References MOTION_TOKENS for transitions
|
|
2027
|
-
*/
|
|
2028
|
-
transition: {
|
|
2029
|
-
colors: "transition-colors"
|
|
2030
|
-
// Color transition using motion tokens
|
|
2031
|
-
}
|
|
2032
|
-
}
|
|
2033
|
-
}
|
|
2034
|
-
};
|
|
2035
|
-
|
|
2036
|
-
// src/FOUNDATION/tokens/components/input.ts
|
|
2037
|
-
var INPUT_TOKENS = {
|
|
2038
|
-
/**
|
|
2039
|
-
* Input heights by size
|
|
2040
|
-
* Supports xs, sm, md, lg, xl sizes
|
|
2041
|
-
*/
|
|
2042
|
-
height: {
|
|
2043
|
-
xs: "h-7",
|
|
2044
|
-
// 28px (1.75rem)
|
|
2045
|
-
sm: "h-8",
|
|
2046
|
-
// 32px (2rem)
|
|
2047
|
-
md: "h-9",
|
|
2048
|
-
// 36px (2.25rem) - default
|
|
2049
|
-
lg: "h-10",
|
|
2050
|
-
// 40px (2.5rem)
|
|
2051
|
-
xl: "h-11"
|
|
2052
|
-
// 44px (2.75rem)
|
|
2053
|
-
},
|
|
2054
|
-
/**
|
|
2055
|
-
* Input padding by size
|
|
2056
|
-
* Horizontal and vertical padding values
|
|
2057
|
-
*/
|
|
2058
|
-
padding: {
|
|
2059
|
-
horizontal: {
|
|
2060
|
-
xs: "px-xs",
|
|
2061
|
-
// 4px (0.25rem)
|
|
2062
|
-
sm: "px-sm",
|
|
2063
|
-
// 8px (0.5rem)
|
|
2064
|
-
md: "px-sm",
|
|
2065
|
-
// 8px (0.5rem) - default
|
|
2066
|
-
lg: "px-md",
|
|
2067
|
-
// 16px (1rem)
|
|
2068
|
-
xl: "px-lg"
|
|
2069
|
-
// 24px (1.5rem)
|
|
2070
|
-
},
|
|
2071
|
-
vertical: {
|
|
2072
|
-
xs: "py-xs",
|
|
2073
|
-
// 4px (0.25rem)
|
|
2074
|
-
sm: "py-xs",
|
|
2075
|
-
// 4px (0.25rem)
|
|
2076
|
-
md: "py-xs",
|
|
2077
|
-
// 4px (0.25rem) - default
|
|
2078
|
-
lg: "py-sm",
|
|
2079
|
-
// 8px (0.5rem)
|
|
2080
|
-
xl: "py-md"
|
|
2081
|
-
// 16px (1rem)
|
|
2082
|
-
}
|
|
2083
|
-
},
|
|
2084
|
-
/**
|
|
2085
|
-
* Border radius by size
|
|
2086
|
-
*/
|
|
2087
|
-
radius: {
|
|
2088
|
-
xs: "rounded-sm",
|
|
2089
|
-
// 4px (0.25rem)
|
|
2090
|
-
sm: "rounded-md",
|
|
2091
|
-
// 6px (0.375rem)
|
|
2092
|
-
md: "rounded-md",
|
|
2093
|
-
// 6px (0.375rem) - default
|
|
2094
|
-
lg: "rounded-md",
|
|
2095
|
-
// 6px (0.375rem)
|
|
2096
|
-
xl: "rounded-lg"
|
|
2097
|
-
// 8px (0.5rem)
|
|
2098
|
-
},
|
|
2099
|
-
/**
|
|
2100
|
-
* Font sizes by size variant
|
|
2101
|
-
* Maps to foundation typography fontSize tokens
|
|
2102
|
-
*/
|
|
2103
|
-
fontSize: {
|
|
2104
|
-
xs: "text-xs",
|
|
2105
|
-
// Maps to fontSize.xs[0]
|
|
2106
|
-
sm: "text-sm",
|
|
2107
|
-
// Maps to fontSize.sm[0]
|
|
2108
|
-
md: "text-base",
|
|
2109
|
-
// Maps to fontSize.base[0] - default
|
|
2110
|
-
lg: "text-base",
|
|
2111
|
-
// Maps to fontSize.base[0]
|
|
2112
|
-
xl: "text-lg"
|
|
2113
|
-
// Maps to fontSize.lg[0]
|
|
2114
|
-
},
|
|
2115
|
-
/**
|
|
2116
|
-
* Responsive font size (md breakpoint)
|
|
1688
|
+
* Responsive font size (md breakpoint)
|
|
2117
1689
|
*/
|
|
2118
1690
|
fontSizeResponsive: {
|
|
2119
1691
|
md: "md:text-sm"
|
|
@@ -5530,41 +5102,246 @@ var EMPTY_STATE_TOKENS = {
|
|
|
5530
5102
|
center: "text-center"}
|
|
5531
5103
|
};
|
|
5532
5104
|
|
|
5533
|
-
// src/FOUNDATION/tokens/
|
|
5534
|
-
var
|
|
5535
|
-
|
|
5536
|
-
|
|
5537
|
-
|
|
5538
|
-
|
|
5539
|
-
|
|
5540
|
-
|
|
5541
|
-
|
|
5542
|
-
|
|
5543
|
-
|
|
5544
|
-
|
|
5545
|
-
|
|
5546
|
-
|
|
5547
|
-
|
|
5548
|
-
|
|
5549
|
-
|
|
5550
|
-
// Strong, decisive
|
|
5551
|
-
};
|
|
5552
|
-
var motionV2Transitions = {
|
|
5553
|
-
fast: `${motionV2Durations.fast} ${motionV2Easings.standard}`,
|
|
5554
|
-
normal: `${motionV2Durations.normal} ${motionV2Easings.standard}`,
|
|
5555
|
-
slow: `${motionV2Durations.slow} ${motionV2Easings.emphasized}`,
|
|
5556
|
-
soft: `${motionV2Durations.normal} ${motionV2Easings.soft}`,
|
|
5557
|
-
reduced: `${motionV2Durations.reduced} linear`
|
|
5558
|
-
};
|
|
5559
|
-
var motionV2Fade = {
|
|
5560
|
-
in: {
|
|
5561
|
-
from: { opacity: 0 },
|
|
5562
|
-
to: { opacity: 1 }
|
|
5105
|
+
// src/FOUNDATION/tokens/components/link.ts
|
|
5106
|
+
var LINK_TOKENS = {
|
|
5107
|
+
/**
|
|
5108
|
+
* Link heights by size
|
|
5109
|
+
* Maps to Tailwind height utilities
|
|
5110
|
+
*/
|
|
5111
|
+
height: {
|
|
5112
|
+
xs: "h-7",
|
|
5113
|
+
// 28px (1.75rem)
|
|
5114
|
+
sm: "h-8",
|
|
5115
|
+
// 32px (2rem)
|
|
5116
|
+
md: "h-9",
|
|
5117
|
+
// 36px (2.25rem)
|
|
5118
|
+
lg: "h-10",
|
|
5119
|
+
// 40px (2.5rem)
|
|
5120
|
+
xl: "h-11"
|
|
5121
|
+
// 44px (2.75rem)
|
|
5563
5122
|
},
|
|
5564
|
-
|
|
5565
|
-
|
|
5566
|
-
|
|
5567
|
-
|
|
5123
|
+
/**
|
|
5124
|
+
* Link padding by size
|
|
5125
|
+
* Horizontal and vertical padding values
|
|
5126
|
+
*/
|
|
5127
|
+
padding: {
|
|
5128
|
+
horizontal: {
|
|
5129
|
+
xs: "px-xs",
|
|
5130
|
+
// 4px (0.25rem) - maps to semanticSpacing.xs
|
|
5131
|
+
sm: "px-sm",
|
|
5132
|
+
// 8px (0.5rem) - maps to semanticSpacing.sm
|
|
5133
|
+
md: "px-md",
|
|
5134
|
+
// 16px (1rem) - maps to semanticSpacing.md
|
|
5135
|
+
lg: "px-lg",
|
|
5136
|
+
// 24px (1.5rem) - maps to semanticSpacing.lg
|
|
5137
|
+
xl: "px-xl"
|
|
5138
|
+
// 32px (2rem) - maps to semanticSpacing.xl
|
|
5139
|
+
},
|
|
5140
|
+
vertical: {
|
|
5141
|
+
xs: "py-xs",
|
|
5142
|
+
// 4px (0.25rem) - maps to semanticSpacing.xs
|
|
5143
|
+
sm: "py-sm",
|
|
5144
|
+
// 8px (0.5rem) - maps to semanticSpacing.sm
|
|
5145
|
+
md: "py-md"
|
|
5146
|
+
// 16px (1rem) - maps to semanticSpacing.md
|
|
5147
|
+
}
|
|
5148
|
+
},
|
|
5149
|
+
/**
|
|
5150
|
+
* Layout tokens
|
|
5151
|
+
* Base layout utilities for link component
|
|
5152
|
+
*/
|
|
5153
|
+
layout: "inline-flex items-center justify-center whitespace-nowrap",
|
|
5154
|
+
// Base layout for link container
|
|
5155
|
+
/**
|
|
5156
|
+
* Font weight token
|
|
5157
|
+
* References foundation typography fontWeight tokens from Typography Authority
|
|
5158
|
+
*
|
|
5159
|
+
* @rule References fontWeight.medium (500) from Typography Authority
|
|
5160
|
+
* @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
|
|
5161
|
+
*/
|
|
5162
|
+
fontWeight: "font-medium",
|
|
5163
|
+
// References fontWeight.medium (500) - Typography Authority compliant
|
|
5164
|
+
/**
|
|
5165
|
+
* Icon wrapper layout
|
|
5166
|
+
* Layout utilities for icon containers
|
|
5167
|
+
*/
|
|
5168
|
+
iconWrapper: "inline-flex items-center",
|
|
5169
|
+
// Layout for left/right icon wrappers
|
|
5170
|
+
/**
|
|
5171
|
+
* Font sizes by link size
|
|
5172
|
+
* References foundation typography fontSize tokens from Typography Authority
|
|
5173
|
+
*
|
|
5174
|
+
* @rule All fontSize values reference Typography Authority tokens
|
|
5175
|
+
* @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
|
|
5176
|
+
*/
|
|
5177
|
+
fontSize: {
|
|
5178
|
+
xs: "text-xs",
|
|
5179
|
+
// References fontSize.xs[0] from Typography Authority (~12px)
|
|
5180
|
+
sm: "text-xs",
|
|
5181
|
+
// References fontSize.xs[0] from Typography Authority (~12px)
|
|
5182
|
+
md: "text-sm",
|
|
5183
|
+
// References fontSize.sm[0] from Typography Authority (~14px)
|
|
5184
|
+
lg: "text-sm",
|
|
5185
|
+
// References fontSize.sm[0] from Typography Authority (~14px)
|
|
5186
|
+
xl: "text-base"
|
|
5187
|
+
// References fontSize.base[0] from Typography Authority (~16px)
|
|
5188
|
+
},
|
|
5189
|
+
/**
|
|
5190
|
+
* Border radius for outline and ghost variants
|
|
5191
|
+
* References componentRadius from Radius Authority
|
|
5192
|
+
*
|
|
5193
|
+
* @rule References borderRadius.md (6px / 0.375rem) from Radius Authority
|
|
5194
|
+
* @see docs/architecture/RADIUS_AUTHORITY_CONTRACT.md
|
|
5195
|
+
*/
|
|
5196
|
+
radius: "rounded-md",
|
|
5197
|
+
// References borderRadius.md (6px / 0.375rem) - Radius Authority compliant
|
|
5198
|
+
/**
|
|
5199
|
+
* Underline offset for text decoration
|
|
5200
|
+
* Uses spacing token (xs = 4px) which matches underline-offset-4
|
|
5201
|
+
*/
|
|
5202
|
+
underlineOffset: "underline-offset-4",
|
|
5203
|
+
// 4px (0.25rem) - matches semanticSpacing.xs
|
|
5204
|
+
/**
|
|
5205
|
+
* Transition tokens
|
|
5206
|
+
* References Motion Authority tokens for consistent motion behavior
|
|
5207
|
+
*
|
|
5208
|
+
* @rule Uses MOTION_TOKENS.transitionPreset.colors from Motion Authority
|
|
5209
|
+
* @rule Motion transitions MUST use canonical motion tokens only
|
|
5210
|
+
* @see docs/architecture/MOTION_AUTHORITY_CONTRACT.md
|
|
5211
|
+
*/
|
|
5212
|
+
transition: {
|
|
5213
|
+
colors: MOTION_TOKENS.transitionPreset.colors
|
|
5214
|
+
// "transition-colors duration-normal ease-out" - Motion Authority compliant
|
|
5215
|
+
},
|
|
5216
|
+
/**
|
|
5217
|
+
* Focus state tokens
|
|
5218
|
+
* Focus ring for keyboard navigation
|
|
5219
|
+
*
|
|
5220
|
+
* @rule Focus MUST use focus-visible: prefix (keyboard navigation only)
|
|
5221
|
+
* @rule Focus MUST be blocked when disabled={true}
|
|
5222
|
+
*/
|
|
5223
|
+
focus: {
|
|
5224
|
+
ring: "focus-visible:ring-2 focus-visible:ring-ring",
|
|
5225
|
+
// Focus ring using semantic ring color
|
|
5226
|
+
outline: "focus-visible:outline-none",
|
|
5227
|
+
// Remove default outline (replaced by ring)
|
|
5228
|
+
offset: "focus-visible:ring-offset-2"
|
|
5229
|
+
// Ring offset
|
|
5230
|
+
},
|
|
5231
|
+
/**
|
|
5232
|
+
* Disabled state tokens
|
|
5233
|
+
*/
|
|
5234
|
+
state: {
|
|
5235
|
+
disabled: {
|
|
5236
|
+
pointerEvents: "disabled:pointer-events-none",
|
|
5237
|
+
// Disable pointer events
|
|
5238
|
+
opacity: "disabled:opacity-50"
|
|
5239
|
+
// Disabled opacity
|
|
5240
|
+
}
|
|
5241
|
+
},
|
|
5242
|
+
/**
|
|
5243
|
+
* Color tokens for link variants
|
|
5244
|
+
* Uses semantic color tokens that map to CSS variables
|
|
5245
|
+
*/
|
|
5246
|
+
variant: {
|
|
5247
|
+
primary: {
|
|
5248
|
+
text: "text-primary",
|
|
5249
|
+
// Primary text using CSS var
|
|
5250
|
+
hover: "hover:text-primary/80",
|
|
5251
|
+
// Primary hover text
|
|
5252
|
+
underline: "hover:underline"
|
|
5253
|
+
// Underline on hover
|
|
5254
|
+
},
|
|
5255
|
+
secondary: {
|
|
5256
|
+
text: "text-secondary-foreground",
|
|
5257
|
+
// Secondary text using CSS var
|
|
5258
|
+
hover: "hover:underline"
|
|
5259
|
+
// Underline on hover
|
|
5260
|
+
},
|
|
5261
|
+
accent: {
|
|
5262
|
+
text: "text-accent-foreground",
|
|
5263
|
+
// Accent text using CSS var
|
|
5264
|
+
hover: "hover:text-accent-foreground/80",
|
|
5265
|
+
// Accent hover text
|
|
5266
|
+
underline: "hover:underline"
|
|
5267
|
+
// Underline on hover
|
|
5268
|
+
},
|
|
5269
|
+
outline: {
|
|
5270
|
+
border: "border border-input",
|
|
5271
|
+
// Input border using CSS var
|
|
5272
|
+
background: "bg-background",
|
|
5273
|
+
// Background using CSS var
|
|
5274
|
+
text: "text-foreground",
|
|
5275
|
+
// Foreground text using CSS var
|
|
5276
|
+
hover: {
|
|
5277
|
+
background: "hover:bg-accent",
|
|
5278
|
+
// Hover background
|
|
5279
|
+
text: "hover:text-accent-foreground"
|
|
5280
|
+
// Hover text
|
|
5281
|
+
}
|
|
5282
|
+
},
|
|
5283
|
+
ghost: {
|
|
5284
|
+
text: "text-foreground",
|
|
5285
|
+
// Foreground text using CSS var
|
|
5286
|
+
hover: {
|
|
5287
|
+
background: "hover:bg-accent",
|
|
5288
|
+
// Hover background
|
|
5289
|
+
text: "hover:text-accent-foreground"
|
|
5290
|
+
// Hover text
|
|
5291
|
+
}
|
|
5292
|
+
},
|
|
5293
|
+
link: {
|
|
5294
|
+
text: "text-primary",
|
|
5295
|
+
// Primary text using CSS var
|
|
5296
|
+
hover: "hover:underline"
|
|
5297
|
+
// Underline on hover
|
|
5298
|
+
},
|
|
5299
|
+
destructive: {
|
|
5300
|
+
text: "text-destructive",
|
|
5301
|
+
// Destructive text using CSS var
|
|
5302
|
+
hover: "hover:text-destructive/80",
|
|
5303
|
+
// Destructive hover text
|
|
5304
|
+
underline: "hover:underline"
|
|
5305
|
+
// Underline on hover
|
|
5306
|
+
}
|
|
5307
|
+
}
|
|
5308
|
+
};
|
|
5309
|
+
|
|
5310
|
+
// src/FOUNDATION/tokens/motion/v2.ts
|
|
5311
|
+
var motionV2Durations = {
|
|
5312
|
+
fast: "150ms",
|
|
5313
|
+
// Quick interactions
|
|
5314
|
+
normal: "250ms",
|
|
5315
|
+
// Default transitions
|
|
5316
|
+
slow: "350ms",
|
|
5317
|
+
// Emphasized animations
|
|
5318
|
+
reduced: "0ms"
|
|
5319
|
+
// For prefers-reduced-motion
|
|
5320
|
+
};
|
|
5321
|
+
var motionV2Easings = {
|
|
5322
|
+
soft: "cubic-bezier(0.22, 1, 0.36, 1)",
|
|
5323
|
+
// Gentle, smooth
|
|
5324
|
+
standard: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
5325
|
+
// Material Design standard
|
|
5326
|
+
emphasized: "cubic-bezier(0.2, 0, 0, 1)"
|
|
5327
|
+
// Strong, decisive
|
|
5328
|
+
};
|
|
5329
|
+
var motionV2Transitions = {
|
|
5330
|
+
fast: `${motionV2Durations.fast} ${motionV2Easings.standard}`,
|
|
5331
|
+
normal: `${motionV2Durations.normal} ${motionV2Easings.standard}`,
|
|
5332
|
+
slow: `${motionV2Durations.slow} ${motionV2Easings.emphasized}`,
|
|
5333
|
+
soft: `${motionV2Durations.normal} ${motionV2Easings.soft}`,
|
|
5334
|
+
reduced: `${motionV2Durations.reduced} linear`
|
|
5335
|
+
};
|
|
5336
|
+
var motionV2Fade = {
|
|
5337
|
+
in: {
|
|
5338
|
+
from: { opacity: 0 },
|
|
5339
|
+
to: { opacity: 1 }
|
|
5340
|
+
},
|
|
5341
|
+
out: {
|
|
5342
|
+
from: { opacity: 1 },
|
|
5343
|
+
to: { opacity: 0 }
|
|
5344
|
+
}
|
|
5568
5345
|
};
|
|
5569
5346
|
var motionV2Scale = {
|
|
5570
5347
|
in: {
|
|
@@ -6927,13 +6704,6 @@ function tokenCVA(config) {
|
|
|
6927
6704
|
function cn(...inputs) {
|
|
6928
6705
|
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
6929
6706
|
}
|
|
6930
|
-
function formatDate(date) {
|
|
6931
|
-
return new Intl.DateTimeFormat("en-US", {
|
|
6932
|
-
month: "long",
|
|
6933
|
-
day: "numeric",
|
|
6934
|
-
year: "numeric"
|
|
6935
|
-
}).format(new Date(date));
|
|
6936
|
-
}
|
|
6937
6707
|
var buttonVariants = tokenCVA({
|
|
6938
6708
|
base: `inline-flex items-center justify-center whitespace-nowrap ${BUTTON_TOKENS.radius} font-medium ${BUTTON_TOKENS.transition.colors} ${BUTTON_TOKENS.state.focus.outline} ${BUTTON_TOKENS.state.focus.ring} ${BUTTON_TOKENS.state.disabled.cursor} ${BUTTON_TOKENS.state.disabled.pointerEvents} [&_svg]:pointer-events-none [&_svg]:shrink-0`,
|
|
6939
6709
|
variants: {
|
|
@@ -6957,7 +6727,7 @@ var buttonVariants = tokenCVA({
|
|
|
6957
6727
|
size: "md"
|
|
6958
6728
|
}
|
|
6959
6729
|
});
|
|
6960
|
-
var Button =
|
|
6730
|
+
var Button = React49__namespace.forwardRef(
|
|
6961
6731
|
({ className, variant, size, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
|
|
6962
6732
|
const Comp = asChild ? reactSlot.Slot : "button";
|
|
6963
6733
|
const finalClassName = cn(buttonVariants({ variant, size, className }));
|
|
@@ -7063,7 +6833,7 @@ var textVariants = classVarianceAuthority.cva("text-foreground", {
|
|
|
7063
6833
|
muted: false
|
|
7064
6834
|
}
|
|
7065
6835
|
});
|
|
7066
|
-
var Text =
|
|
6836
|
+
var Text = React49__namespace.forwardRef(
|
|
7067
6837
|
({ className, size, weight, muted, variant, ...props }, ref) => {
|
|
7068
6838
|
const isMuted = muted !== void 0 ? muted : variant === "muted";
|
|
7069
6839
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -7097,7 +6867,7 @@ var alertVariants = classVarianceAuthority.cva(`${ALERT_TOKENS.radius} border ${
|
|
|
7097
6867
|
variant: "default"
|
|
7098
6868
|
}
|
|
7099
6869
|
});
|
|
7100
|
-
var Alert =
|
|
6870
|
+
var Alert = React49__namespace.forwardRef(
|
|
7101
6871
|
({ className, variant, ...props }, ref) => {
|
|
7102
6872
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7103
6873
|
"div",
|
|
@@ -7111,6 +6881,81 @@ var Alert = React48__namespace.forwardRef(
|
|
|
7111
6881
|
}
|
|
7112
6882
|
);
|
|
7113
6883
|
Alert.displayName = "Alert";
|
|
6884
|
+
var LINK_VARIANTS = [
|
|
6885
|
+
"primary",
|
|
6886
|
+
"secondary",
|
|
6887
|
+
"accent",
|
|
6888
|
+
"outline",
|
|
6889
|
+
"ghost",
|
|
6890
|
+
"link",
|
|
6891
|
+
"destructive"
|
|
6892
|
+
];
|
|
6893
|
+
var LINK_SIZES = ["xs", "sm", "md", "lg", "xl"];
|
|
6894
|
+
var linkVariants = tokenCVA({
|
|
6895
|
+
base: `${LINK_TOKENS.layout} ${LINK_TOKENS.fontWeight} ${LINK_TOKENS.transition.colors} ${LINK_TOKENS.focus.outline} ${LINK_TOKENS.focus.ring} ${LINK_TOKENS.focus.offset} ${LINK_TOKENS.state.disabled.pointerEvents} ${LINK_TOKENS.state.disabled.opacity}`,
|
|
6896
|
+
variants: {
|
|
6897
|
+
variant: {
|
|
6898
|
+
primary: `${LINK_TOKENS.variant.primary.text} ${LINK_TOKENS.variant.primary.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.primary.underline}`,
|
|
6899
|
+
secondary: `${LINK_TOKENS.variant.secondary.text} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.secondary.hover}`,
|
|
6900
|
+
accent: `${LINK_TOKENS.variant.accent.text} ${LINK_TOKENS.variant.accent.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.accent.underline}`,
|
|
6901
|
+
outline: `${LINK_TOKENS.variant.outline.border} ${LINK_TOKENS.variant.outline.background} ${LINK_TOKENS.variant.outline.text} ${LINK_TOKENS.radius} ${LINK_TOKENS.variant.outline.hover.background} ${LINK_TOKENS.variant.outline.hover.text}`,
|
|
6902
|
+
ghost: `${LINK_TOKENS.variant.ghost.text} ${LINK_TOKENS.variant.ghost.hover.background} ${LINK_TOKENS.variant.ghost.hover.text} ${LINK_TOKENS.radius}`,
|
|
6903
|
+
link: `${LINK_TOKENS.variant.link.text} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.link.hover}`,
|
|
6904
|
+
destructive: `${LINK_TOKENS.variant.destructive.text} ${LINK_TOKENS.variant.destructive.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.destructive.underline}`
|
|
6905
|
+
},
|
|
6906
|
+
size: {
|
|
6907
|
+
xs: `${LINK_TOKENS.height.xs} ${LINK_TOKENS.fontSize.xs} ${LINK_TOKENS.padding.horizontal.xs} ${LINK_TOKENS.padding.vertical.xs}`,
|
|
6908
|
+
sm: `${LINK_TOKENS.height.sm} ${LINK_TOKENS.fontSize.sm} ${LINK_TOKENS.padding.horizontal.sm} ${LINK_TOKENS.padding.vertical.xs}`,
|
|
6909
|
+
md: `${LINK_TOKENS.height.md} ${LINK_TOKENS.fontSize.md} ${LINK_TOKENS.padding.horizontal.md} ${LINK_TOKENS.padding.vertical.sm}`,
|
|
6910
|
+
lg: `${LINK_TOKENS.height.lg} ${LINK_TOKENS.fontSize.lg} ${LINK_TOKENS.padding.horizontal.lg} ${LINK_TOKENS.padding.vertical.sm}`,
|
|
6911
|
+
xl: `${LINK_TOKENS.height.xl} ${LINK_TOKENS.fontSize.xl} ${LINK_TOKENS.padding.horizontal.xl} ${LINK_TOKENS.padding.vertical.md}`
|
|
6912
|
+
}
|
|
6913
|
+
},
|
|
6914
|
+
defaultVariants: {
|
|
6915
|
+
variant: "link",
|
|
6916
|
+
size: "md"
|
|
6917
|
+
}
|
|
6918
|
+
});
|
|
6919
|
+
var Link = React49__namespace.forwardRef(
|
|
6920
|
+
({ className, variant, size, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
|
|
6921
|
+
const Comp = asChild ? reactSlot.Slot : "a";
|
|
6922
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { className: cn(linkVariants({ variant, size, className })), ref, ...props, children: [
|
|
6923
|
+
leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: LINK_TOKENS.iconWrapper, children: leftIcon }),
|
|
6924
|
+
children,
|
|
6925
|
+
rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: LINK_TOKENS.iconWrapper, children: rightIcon })
|
|
6926
|
+
] });
|
|
6927
|
+
}
|
|
6928
|
+
);
|
|
6929
|
+
Link.displayName = "Link";
|
|
6930
|
+
var BADGE_VARIANTS = [
|
|
6931
|
+
"primary",
|
|
6932
|
+
"secondary",
|
|
6933
|
+
"accent",
|
|
6934
|
+
"outline",
|
|
6935
|
+
"ghost",
|
|
6936
|
+
"link",
|
|
6937
|
+
"destructive"
|
|
6938
|
+
];
|
|
6939
|
+
var badgeVariants = tokenCVA({
|
|
6940
|
+
base: `${BADGE_TOKENS.layout} ${BADGE_TOKENS.radius} ${BADGE_TOKENS.border} ${BADGE_TOKENS.padding.horizontal} ${BADGE_TOKENS.padding.vertical} ${BADGE_TOKENS.fontSize} ${BADGE_TOKENS.fontWeight} ${BADGE_TOKENS.transition.colors} ${BADGE_TOKENS.focus.outline} ${BADGE_TOKENS.focus.ring} ${BADGE_TOKENS.focus.offset}`,
|
|
6941
|
+
variants: {
|
|
6942
|
+
variant: {
|
|
6943
|
+
primary: `${BADGE_TOKENS.variant.primary.border} ${BADGE_TOKENS.variant.primary.background} ${BADGE_TOKENS.variant.primary.text} ${BADGE_TOKENS.variant.primary.hover}`,
|
|
6944
|
+
secondary: `${BADGE_TOKENS.variant.secondary.border} ${BADGE_TOKENS.variant.secondary.background} ${BADGE_TOKENS.variant.secondary.text} ${BADGE_TOKENS.variant.secondary.hover}`,
|
|
6945
|
+
accent: `${BADGE_TOKENS.variant.accent.border} ${BADGE_TOKENS.variant.accent.background} ${BADGE_TOKENS.variant.accent.text} ${BADGE_TOKENS.variant.accent.hover}`,
|
|
6946
|
+
outline: `${BADGE_TOKENS.variant.outline.border} ${BADGE_TOKENS.variant.outline.text}`,
|
|
6947
|
+
ghost: `${BADGE_TOKENS.variant.ghost.border} ${BADGE_TOKENS.variant.ghost.background} ${BADGE_TOKENS.variant.ghost.text} ${BADGE_TOKENS.variant.ghost.hover}`,
|
|
6948
|
+
link: `${BADGE_TOKENS.variant.link.border} ${BADGE_TOKENS.variant.link.background} ${BADGE_TOKENS.variant.link.text} ${BADGE_TOKENS.variant.link.hover} ${BADGE_TOKENS.underlineOffset} ${BADGE_TOKENS.variant.link.underline}`,
|
|
6949
|
+
destructive: `${BADGE_TOKENS.variant.destructive.border} ${BADGE_TOKENS.variant.destructive.background} ${BADGE_TOKENS.variant.destructive.text} ${BADGE_TOKENS.variant.destructive.hover}`
|
|
6950
|
+
}
|
|
6951
|
+
},
|
|
6952
|
+
defaultVariants: {
|
|
6953
|
+
variant: "primary"
|
|
6954
|
+
}
|
|
6955
|
+
});
|
|
6956
|
+
function Badge({ className, variant, ...props }) {
|
|
6957
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
6958
|
+
}
|
|
7114
6959
|
var levelConfig = {
|
|
7115
6960
|
1: [
|
|
7116
6961
|
TEXT_TOKENS.fontSize["5xl"],
|
|
@@ -7197,7 +7042,7 @@ var headingVariants = classVarianceAuthority.cva("font-display text-foreground",
|
|
|
7197
7042
|
muted: false
|
|
7198
7043
|
}
|
|
7199
7044
|
});
|
|
7200
|
-
var Heading =
|
|
7045
|
+
var Heading = React49__namespace.forwardRef(
|
|
7201
7046
|
({ className, level = 1, weight, muted, as, children, ...props }, ref) => {
|
|
7202
7047
|
const Component = as || `h${level}`;
|
|
7203
7048
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -7396,7 +7241,7 @@ var SelectRoot = ({ children, ...props }) => {
|
|
|
7396
7241
|
return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Root, { ...props, children });
|
|
7397
7242
|
};
|
|
7398
7243
|
SelectRoot.displayName = SelectPrimitive__namespace.Root.displayName;
|
|
7399
|
-
var SelectTrigger =
|
|
7244
|
+
var SelectTrigger = React49__namespace.forwardRef(
|
|
7400
7245
|
({ className, size, variant, width, ...props }, ref) => {
|
|
7401
7246
|
const baseSize = getBaseValue(size) ?? "md";
|
|
7402
7247
|
const baseVariant = variant ?? "outline";
|
|
@@ -7423,13 +7268,13 @@ var SelectTrigger = React48__namespace.forwardRef(
|
|
|
7423
7268
|
}
|
|
7424
7269
|
);
|
|
7425
7270
|
SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
|
|
7426
|
-
var SelectValue =
|
|
7271
|
+
var SelectValue = React49__namespace.forwardRef(
|
|
7427
7272
|
({ className, ...props }, ref) => {
|
|
7428
7273
|
return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { ref, className: cn("truncate", className), ...props });
|
|
7429
7274
|
}
|
|
7430
7275
|
);
|
|
7431
7276
|
SelectValue.displayName = SelectPrimitive__namespace.Value.displayName;
|
|
7432
|
-
var SelectIcon =
|
|
7277
|
+
var SelectIcon = React49__namespace.forwardRef(
|
|
7433
7278
|
({ className, ...props }, ref) => {
|
|
7434
7279
|
return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
7435
7280
|
lucideReact.ChevronDown,
|
|
@@ -7449,14 +7294,14 @@ var SelectIcon = React48__namespace.forwardRef(
|
|
|
7449
7294
|
}
|
|
7450
7295
|
);
|
|
7451
7296
|
SelectIcon.displayName = SelectPrimitive__namespace.Icon.displayName;
|
|
7452
|
-
var SelectContent =
|
|
7297
|
+
var SelectContent = React49__namespace.forwardRef(
|
|
7453
7298
|
({ className, size, sideOffset, alignOffset, position = "popper", ...props }, ref) => {
|
|
7454
7299
|
const baseSize = getBaseValue(size) ?? "md";
|
|
7455
|
-
const sideOffsetPx =
|
|
7300
|
+
const sideOffsetPx = React49__namespace.useMemo(() => {
|
|
7456
7301
|
const baseOffset = getBaseValue(sideOffset);
|
|
7457
7302
|
return baseOffset ? getSpacingPx(baseOffset) : getSpacingPx("xs");
|
|
7458
7303
|
}, [sideOffset]);
|
|
7459
|
-
const alignOffsetPx =
|
|
7304
|
+
const alignOffsetPx = React49__namespace.useMemo(() => {
|
|
7460
7305
|
const baseOffset = getBaseValue(alignOffset);
|
|
7461
7306
|
return baseOffset ? getSpacingPx(baseOffset) : void 0;
|
|
7462
7307
|
}, [alignOffset]);
|
|
@@ -7481,7 +7326,7 @@ var SelectContent = React48__namespace.forwardRef(
|
|
|
7481
7326
|
}
|
|
7482
7327
|
);
|
|
7483
7328
|
SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
|
|
7484
|
-
var SelectViewport =
|
|
7329
|
+
var SelectViewport = React49__namespace.forwardRef(
|
|
7485
7330
|
({ className, ...props }, ref) => {
|
|
7486
7331
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7487
7332
|
SelectPrimitive__namespace.Viewport,
|
|
@@ -7498,7 +7343,7 @@ var SelectViewport = React48__namespace.forwardRef(
|
|
|
7498
7343
|
}
|
|
7499
7344
|
);
|
|
7500
7345
|
SelectViewport.displayName = SelectPrimitive__namespace.Viewport.displayName;
|
|
7501
|
-
var SelectItem =
|
|
7346
|
+
var SelectItem = React49__namespace.forwardRef(
|
|
7502
7347
|
({ className, size, children, ...props }, ref) => {
|
|
7503
7348
|
const baseSize = getBaseValue(size) ?? "md";
|
|
7504
7349
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -7530,19 +7375,19 @@ var SelectItem = React48__namespace.forwardRef(
|
|
|
7530
7375
|
}
|
|
7531
7376
|
);
|
|
7532
7377
|
SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
|
|
7533
|
-
var SelectItemText =
|
|
7378
|
+
var SelectItemText = React49__namespace.forwardRef(
|
|
7534
7379
|
({ className, ...props }, ref) => {
|
|
7535
7380
|
return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { ref, className, ...props });
|
|
7536
7381
|
}
|
|
7537
7382
|
);
|
|
7538
7383
|
SelectItemText.displayName = SelectPrimitive__namespace.ItemText.displayName;
|
|
7539
|
-
var SelectItemIndicator =
|
|
7384
|
+
var SelectItemIndicator = React49__namespace.forwardRef(
|
|
7540
7385
|
({ className, ...props }, ref) => {
|
|
7541
7386
|
return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { ref, className, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn(SELECT_TOKENS.item.indicator.size) }) });
|
|
7542
7387
|
}
|
|
7543
7388
|
);
|
|
7544
7389
|
SelectItemIndicator.displayName = SelectPrimitive__namespace.ItemIndicator.displayName;
|
|
7545
|
-
var SelectSeparator =
|
|
7390
|
+
var SelectSeparator = React49__namespace.forwardRef(
|
|
7546
7391
|
({ className, size, ...props }, ref) => {
|
|
7547
7392
|
const baseSize = getBaseValue(size) ?? "md";
|
|
7548
7393
|
const marginHorizontal = baseSize === "xs" || baseSize === "sm" || baseSize === "md" ? SELECT_TOKENS.separator.margin.horizontal.md : SELECT_TOKENS.separator.margin.horizontal.lg;
|
|
@@ -7564,13 +7409,13 @@ var SelectSeparator = React48__namespace.forwardRef(
|
|
|
7564
7409
|
}
|
|
7565
7410
|
);
|
|
7566
7411
|
SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
|
|
7567
|
-
var SelectGroup =
|
|
7412
|
+
var SelectGroup = React49__namespace.forwardRef(
|
|
7568
7413
|
({ className, ...props }, ref) => {
|
|
7569
7414
|
return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Group, { ref, className, ...props });
|
|
7570
7415
|
}
|
|
7571
7416
|
);
|
|
7572
7417
|
SelectGroup.displayName = SelectPrimitive__namespace.Group.displayName;
|
|
7573
|
-
var SelectLabel =
|
|
7418
|
+
var SelectLabel = React49__namespace.forwardRef(
|
|
7574
7419
|
({ className, size, ...props }, ref) => {
|
|
7575
7420
|
const baseSize = getBaseValue(size) ?? "md";
|
|
7576
7421
|
const paddingHorizontal = SELECT_TOKENS.label.padding.horizontal[baseSize];
|
|
@@ -7642,14 +7487,14 @@ var ModalRoot = ({ children, ...props }) => {
|
|
|
7642
7487
|
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props, children });
|
|
7643
7488
|
};
|
|
7644
7489
|
ModalRoot.displayName = DialogPrimitive__namespace.Root.displayName;
|
|
7645
|
-
var ModalTrigger =
|
|
7490
|
+
var ModalTrigger = React49__namespace.forwardRef(
|
|
7646
7491
|
({ className, ...props }, ref) => {
|
|
7647
7492
|
return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { ref, className, ...props });
|
|
7648
7493
|
}
|
|
7649
7494
|
);
|
|
7650
7495
|
ModalTrigger.displayName = DialogPrimitive__namespace.Trigger.displayName;
|
|
7651
7496
|
DialogPrimitive__namespace.Portal.displayName;
|
|
7652
|
-
var ModalOverlay =
|
|
7497
|
+
var ModalOverlay = React49__namespace.forwardRef(
|
|
7653
7498
|
({ className, ...props }, ref) => {
|
|
7654
7499
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7655
7500
|
DialogPrimitive__namespace.Overlay,
|
|
@@ -7662,7 +7507,7 @@ var ModalOverlay = React48__namespace.forwardRef(
|
|
|
7662
7507
|
}
|
|
7663
7508
|
);
|
|
7664
7509
|
ModalOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
|
|
7665
|
-
var ModalContent =
|
|
7510
|
+
var ModalContent = React49__namespace.forwardRef(
|
|
7666
7511
|
({ className, size = "md", width, height, padding, radius, surface, children, ...props }, ref) => {
|
|
7667
7512
|
const baseSize = getBaseValue(size) ?? "md";
|
|
7668
7513
|
const baseWidth = width ? getBaseValue(width) : void 0;
|
|
@@ -7700,7 +7545,7 @@ var ModalContent = React48__namespace.forwardRef(
|
|
|
7700
7545
|
}
|
|
7701
7546
|
);
|
|
7702
7547
|
ModalContent.displayName = DialogPrimitive__namespace.Content.displayName;
|
|
7703
|
-
var ModalHeader =
|
|
7548
|
+
var ModalHeader = React49__namespace.forwardRef(
|
|
7704
7549
|
({ className, gap, ...props }, ref) => {
|
|
7705
7550
|
const baseGap = gap ? getBaseValue(gap) : "md";
|
|
7706
7551
|
const gapClass = getSpacingClass("gap", baseGap) ?? MODAL_TOKENS.header.gap.md;
|
|
@@ -7715,7 +7560,7 @@ var ModalHeader = React48__namespace.forwardRef(
|
|
|
7715
7560
|
}
|
|
7716
7561
|
);
|
|
7717
7562
|
ModalHeader.displayName = "ModalHeader";
|
|
7718
|
-
var ModalTitle =
|
|
7563
|
+
var ModalTitle = React49__namespace.forwardRef(
|
|
7719
7564
|
({ className, ...props }, ref) => {
|
|
7720
7565
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7721
7566
|
DialogPrimitive__namespace.Title,
|
|
@@ -7734,7 +7579,7 @@ var ModalTitle = React48__namespace.forwardRef(
|
|
|
7734
7579
|
}
|
|
7735
7580
|
);
|
|
7736
7581
|
ModalTitle.displayName = DialogPrimitive__namespace.Title.displayName;
|
|
7737
|
-
var ModalDescription =
|
|
7582
|
+
var ModalDescription = React49__namespace.forwardRef(
|
|
7738
7583
|
({ className, ...props }, ref) => {
|
|
7739
7584
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
7740
7585
|
DialogPrimitive__namespace.Description,
|
|
@@ -7751,7 +7596,7 @@ var ModalDescription = React48__namespace.forwardRef(
|
|
|
7751
7596
|
}
|
|
7752
7597
|
);
|
|
7753
7598
|
ModalDescription.displayName = DialogPrimitive__namespace.Description.displayName;
|
|
7754
|
-
var ModalFooter =
|
|
7599
|
+
var ModalFooter = React49__namespace.forwardRef(
|
|
7755
7600
|
({ className, gap, align = "right", ...props }, ref) => {
|
|
7756
7601
|
const baseGap = gap ? getBaseValue(gap) : "md";
|
|
7757
7602
|
const gapClass = getSpacingClass("gap", baseGap) ?? MODAL_TOKENS.footer.gap.md;
|
|
@@ -7773,7 +7618,7 @@ var ModalFooter = React48__namespace.forwardRef(
|
|
|
7773
7618
|
}
|
|
7774
7619
|
);
|
|
7775
7620
|
ModalFooter.displayName = "ModalFooter";
|
|
7776
|
-
var ModalClose =
|
|
7621
|
+
var ModalClose = React49__namespace.forwardRef(
|
|
7777
7622
|
({ className, ...props }, ref) => {
|
|
7778
7623
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7779
7624
|
DialogPrimitive__namespace.Close,
|
|
@@ -8186,7 +8031,7 @@ var checkboxVariants = classVarianceAuthority.cva(
|
|
|
8186
8031
|
}
|
|
8187
8032
|
}
|
|
8188
8033
|
);
|
|
8189
|
-
var Checkbox =
|
|
8034
|
+
var Checkbox = React49__namespace.forwardRef(
|
|
8190
8035
|
({
|
|
8191
8036
|
className,
|
|
8192
8037
|
variant,
|
|
@@ -8205,23 +8050,23 @@ var Checkbox = React48__namespace.forwardRef(
|
|
|
8205
8050
|
onKeyDown,
|
|
8206
8051
|
...props
|
|
8207
8052
|
}, ref) => {
|
|
8208
|
-
const [uncontrolledChecked, setUncontrolledChecked] =
|
|
8053
|
+
const [uncontrolledChecked, setUncontrolledChecked] = React49__namespace.useState(false);
|
|
8209
8054
|
const isControlled = controlledChecked !== void 0;
|
|
8210
8055
|
const checked = isControlled ? controlledChecked : uncontrolledChecked;
|
|
8211
8056
|
const isDisabled = disabled || state === "disabled";
|
|
8212
8057
|
const isError = state === "error";
|
|
8213
|
-
const effectiveState =
|
|
8058
|
+
const effectiveState = React49__namespace.useMemo(() => {
|
|
8214
8059
|
if (isDisabled) return "disabled";
|
|
8215
8060
|
if (isError) return "error";
|
|
8216
8061
|
if (indeterminate) return "indeterminate";
|
|
8217
8062
|
if (checked) return "checked";
|
|
8218
8063
|
return "default";
|
|
8219
8064
|
}, [isDisabled, isError, indeterminate, checked]);
|
|
8220
|
-
const ariaChecked =
|
|
8065
|
+
const ariaChecked = React49__namespace.useMemo(() => {
|
|
8221
8066
|
if (indeterminate) return "mixed";
|
|
8222
8067
|
return checked ? "true" : "false";
|
|
8223
8068
|
}, [indeterminate, checked]);
|
|
8224
|
-
const handleClick =
|
|
8069
|
+
const handleClick = React49__namespace.useCallback(
|
|
8225
8070
|
(event) => {
|
|
8226
8071
|
if (isDisabled) {
|
|
8227
8072
|
event.preventDefault();
|
|
@@ -8235,7 +8080,7 @@ var Checkbox = React48__namespace.forwardRef(
|
|
|
8235
8080
|
},
|
|
8236
8081
|
[isDisabled, isControlled, checked, onCheckedChange, onClick]
|
|
8237
8082
|
);
|
|
8238
|
-
const handleKeyDown =
|
|
8083
|
+
const handleKeyDown = React49__namespace.useCallback(
|
|
8239
8084
|
(event) => {
|
|
8240
8085
|
if (isDisabled) return;
|
|
8241
8086
|
if (event.key === " " || event.key === "Spacebar") {
|
|
@@ -8321,7 +8166,7 @@ function shadowToClass(value) {
|
|
|
8321
8166
|
if (!value || value === "none") return void 0;
|
|
8322
8167
|
return `shadow-${value}`;
|
|
8323
8168
|
}
|
|
8324
|
-
var Box =
|
|
8169
|
+
var Box = React49__namespace.forwardRef(
|
|
8325
8170
|
({
|
|
8326
8171
|
as: Component = "div",
|
|
8327
8172
|
p,
|
|
@@ -8422,7 +8267,7 @@ function justifyToClass(value) {
|
|
|
8422
8267
|
if (value === "evenly") return "justify-evenly";
|
|
8423
8268
|
return void 0;
|
|
8424
8269
|
}
|
|
8425
|
-
var Stack =
|
|
8270
|
+
var Stack = React49__namespace.forwardRef(
|
|
8426
8271
|
({ direction = "vertical", spacing: spacing2, gap, align, justify, className, style, ...props }, ref) => {
|
|
8427
8272
|
const gapValue = spacing2 ?? gap;
|
|
8428
8273
|
const gapBaseValue = getBaseValue(gapValue);
|
|
@@ -8482,7 +8327,7 @@ function getMaxWidthValue(value) {
|
|
|
8482
8327
|
}
|
|
8483
8328
|
return getSpacingCSSVar(stringValue);
|
|
8484
8329
|
}
|
|
8485
|
-
var Container =
|
|
8330
|
+
var Container = React49__namespace.forwardRef(
|
|
8486
8331
|
({ maxWidth, padding, center = true, className, style, ...props }, ref) => {
|
|
8487
8332
|
const maxWidthValue = maxWidth ? getBaseValue(maxWidth) : void 0;
|
|
8488
8333
|
const paddingValue = getBaseValue(
|
|
@@ -8597,7 +8442,7 @@ function shrinkToClass(value) {
|
|
|
8597
8442
|
if (value === true || value === 1) return "shrink";
|
|
8598
8443
|
return void 0;
|
|
8599
8444
|
}
|
|
8600
|
-
var Flex =
|
|
8445
|
+
var Flex = React49__namespace.forwardRef(
|
|
8601
8446
|
({ direction, wrap, grow, shrink, basis, align, justify, gap, className, style, ...props }, ref) => {
|
|
8602
8447
|
const directionValue = getFlexBaseValue(
|
|
8603
8448
|
direction
|
|
@@ -8700,7 +8545,7 @@ function justifyToClass3(value) {
|
|
|
8700
8545
|
if (value === "evenly") return "justify-evenly";
|
|
8701
8546
|
return void 0;
|
|
8702
8547
|
}
|
|
8703
|
-
var Grid =
|
|
8548
|
+
var Grid = React49__namespace.forwardRef(
|
|
8704
8549
|
({
|
|
8705
8550
|
cols,
|
|
8706
8551
|
sm,
|
|
@@ -8802,7 +8647,7 @@ var Grid = React48__namespace.forwardRef(
|
|
|
8802
8647
|
}
|
|
8803
8648
|
);
|
|
8804
8649
|
Grid.displayName = "Grid";
|
|
8805
|
-
var Row =
|
|
8650
|
+
var Row = React49__namespace.forwardRef((props, ref) => {
|
|
8806
8651
|
return /* @__PURE__ */ jsxRuntime.jsx(Stack, { ref, direction: "horizontal", ...props });
|
|
8807
8652
|
});
|
|
8808
8653
|
Row.displayName = "Row";
|
|
@@ -8820,7 +8665,7 @@ var surfaceVariants = classVarianceAuthority.cva("", {
|
|
|
8820
8665
|
variant: "flat"
|
|
8821
8666
|
}
|
|
8822
8667
|
});
|
|
8823
|
-
var Surface =
|
|
8668
|
+
var Surface = React49__namespace.forwardRef(
|
|
8824
8669
|
({ variant = "flat", p, radius, className, ...props }, ref) => {
|
|
8825
8670
|
const variantPadding = SURFACE_TOKENS.variant[variant].padding;
|
|
8826
8671
|
const defaultPadding = variantPadding.replace("p-", "");
|
|
@@ -8841,7 +8686,7 @@ var Surface = React48__namespace.forwardRef(
|
|
|
8841
8686
|
}
|
|
8842
8687
|
);
|
|
8843
8688
|
Surface.displayName = "Surface";
|
|
8844
|
-
var Card =
|
|
8689
|
+
var Card = React49__namespace.forwardRef(
|
|
8845
8690
|
({ size = "md", radius, shadow, p, className, ...props }, ref) => {
|
|
8846
8691
|
const sizeTokens = CARD_TOKENS.size[size];
|
|
8847
8692
|
const radiusValue = radius ?? sizeTokens.radius.replace("rounded-", "");
|
|
@@ -8863,7 +8708,7 @@ var Card = React48__namespace.forwardRef(
|
|
|
8863
8708
|
}
|
|
8864
8709
|
);
|
|
8865
8710
|
Card.displayName = "Card";
|
|
8866
|
-
var CardHeader =
|
|
8711
|
+
var CardHeader = React49__namespace.forwardRef(
|
|
8867
8712
|
({ size = "md", p, className, ...props }, ref) => {
|
|
8868
8713
|
const sizeTokens = CARD_TOKENS.size[size];
|
|
8869
8714
|
const paddingValue = p ?? sizeTokens.padding.replace("p-", "");
|
|
@@ -8872,7 +8717,7 @@ var CardHeader = React48__namespace.forwardRef(
|
|
|
8872
8717
|
}
|
|
8873
8718
|
);
|
|
8874
8719
|
CardHeader.displayName = "CardHeader";
|
|
8875
|
-
var CardBody =
|
|
8720
|
+
var CardBody = React49__namespace.forwardRef(
|
|
8876
8721
|
({ size = "md", p, className, ...props }, ref) => {
|
|
8877
8722
|
const sizeTokens = CARD_TOKENS.size[size];
|
|
8878
8723
|
const paddingValue = p ?? sizeTokens.padding.replace("p-", "");
|
|
@@ -8880,7 +8725,7 @@ var CardBody = React48__namespace.forwardRef(
|
|
|
8880
8725
|
}
|
|
8881
8726
|
);
|
|
8882
8727
|
CardBody.displayName = "CardBody";
|
|
8883
|
-
var CardFooter =
|
|
8728
|
+
var CardFooter = React49__namespace.forwardRef(
|
|
8884
8729
|
({ size = "md", p, className, ...props }, ref) => {
|
|
8885
8730
|
const sizeTokens = CARD_TOKENS.size[size];
|
|
8886
8731
|
const paddingValue = p ?? sizeTokens.padding.replace("p-", "");
|
|
@@ -8891,7 +8736,7 @@ CardFooter.displayName = "CardFooter";
|
|
|
8891
8736
|
Card.Header = CardHeader;
|
|
8892
8737
|
Card.Body = CardBody;
|
|
8893
8738
|
Card.Footer = CardFooter;
|
|
8894
|
-
var Section =
|
|
8739
|
+
var Section = React49__namespace.forwardRef(
|
|
8895
8740
|
({ padding = "md", gap, className, as, ...props }, ref) => {
|
|
8896
8741
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
8897
8742
|
Stack,
|
|
@@ -8910,38 +8755,38 @@ Section.displayName = "Section";
|
|
|
8910
8755
|
var labelVariants = classVarianceAuthority.cva(
|
|
8911
8756
|
`${TEXT_TOKENS.fontSize.sm} ${TEXT_TOKENS.fontWeight.medium} ${TEXT_TOKENS.lineHeight.none} peer-disabled:cursor-not-allowed peer-disabled:opacity-70`
|
|
8912
8757
|
);
|
|
8913
|
-
var Label2 =
|
|
8758
|
+
var Label2 = React49__namespace.forwardRef(
|
|
8914
8759
|
({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(LabelPrimitive__namespace.Root, { ref, className: cn(labelVariants(), className), ...props, children: [
|
|
8915
8760
|
children,
|
|
8916
8761
|
required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(FORM_TOKENS.label.requiredMark, "ml-xs"), children: "*" })
|
|
8917
8762
|
] })
|
|
8918
8763
|
);
|
|
8919
8764
|
Label2.displayName = LabelPrimitive__namespace.Root.displayName;
|
|
8920
|
-
var Field =
|
|
8765
|
+
var Field = React49__namespace.forwardRef(
|
|
8921
8766
|
({ className, children, ...props }, ref) => {
|
|
8922
8767
|
return /* @__PURE__ */ jsxRuntime.jsx(Stack, { ref, gap: "sm", className: cn(className), ...props, children });
|
|
8923
8768
|
}
|
|
8924
8769
|
);
|
|
8925
8770
|
Field.displayName = "Field";
|
|
8926
|
-
var FieldLabel =
|
|
8771
|
+
var FieldLabel = React49__namespace.forwardRef(
|
|
8927
8772
|
({ className, ...props }, ref) => {
|
|
8928
8773
|
return /* @__PURE__ */ jsxRuntime.jsx(Label2, { ref, className, ...props });
|
|
8929
8774
|
}
|
|
8930
8775
|
);
|
|
8931
8776
|
FieldLabel.displayName = "FieldLabel";
|
|
8932
|
-
var FieldControl =
|
|
8777
|
+
var FieldControl = React49__namespace.forwardRef(
|
|
8933
8778
|
({ className, children, ...props }, ref) => {
|
|
8934
8779
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(className), ...props, children });
|
|
8935
8780
|
}
|
|
8936
8781
|
);
|
|
8937
8782
|
FieldControl.displayName = "FieldControl";
|
|
8938
|
-
var FieldDescription =
|
|
8783
|
+
var FieldDescription = React49__namespace.forwardRef(
|
|
8939
8784
|
({ className, ...props }, ref) => {
|
|
8940
8785
|
return /* @__PURE__ */ jsxRuntime.jsx(Text, { ref, size: "sm", muted: true, className: cn(className), ...props });
|
|
8941
8786
|
}
|
|
8942
8787
|
);
|
|
8943
8788
|
FieldDescription.displayName = "FieldDescription";
|
|
8944
|
-
var FieldError =
|
|
8789
|
+
var FieldError = React49__namespace.forwardRef(
|
|
8945
8790
|
({ className, ...props }, ref) => {
|
|
8946
8791
|
return /* @__PURE__ */ jsxRuntime.jsx(Text, { ref, size: "sm", className: cn("text-destructive", className), ...props });
|
|
8947
8792
|
}
|
|
@@ -8989,7 +8834,7 @@ var inputVariants = classVarianceAuthority.cva(
|
|
|
8989
8834
|
}
|
|
8990
8835
|
}
|
|
8991
8836
|
);
|
|
8992
|
-
var Input =
|
|
8837
|
+
var Input = React49__namespace.forwardRef(
|
|
8993
8838
|
({
|
|
8994
8839
|
className,
|
|
8995
8840
|
type = "text",
|
|
@@ -9007,8 +8852,8 @@ var Input = React48__namespace.forwardRef(
|
|
|
9007
8852
|
const isError = state === "error" || ariaInvalid === true;
|
|
9008
8853
|
const isDisabled = disabled || state === "disabled";
|
|
9009
8854
|
const ariaInvalidValue = isError ? true : ariaInvalid;
|
|
9010
|
-
const inputId =
|
|
9011
|
-
const [describedById] =
|
|
8855
|
+
const inputId = React49__namespace.useId();
|
|
8856
|
+
const [describedById] = React49__namespace.useState(() => {
|
|
9012
8857
|
if (ariaDescribedBy) return ariaDescribedBy;
|
|
9013
8858
|
if (state === "error" || state === "success") {
|
|
9014
8859
|
return `input-${inputId}-message`;
|
|
@@ -9111,8 +8956,8 @@ var radioVariants = classVarianceAuthority.cva(
|
|
|
9111
8956
|
}
|
|
9112
8957
|
}
|
|
9113
8958
|
);
|
|
9114
|
-
var RadioGroupContext =
|
|
9115
|
-
var RadioGroup =
|
|
8959
|
+
var RadioGroupContext = React49__namespace.createContext(void 0);
|
|
8960
|
+
var RadioGroup = React49__namespace.forwardRef(
|
|
9116
8961
|
({
|
|
9117
8962
|
value: controlledValue,
|
|
9118
8963
|
defaultValue,
|
|
@@ -9124,17 +8969,17 @@ var RadioGroup = React48__namespace.forwardRef(
|
|
|
9124
8969
|
children,
|
|
9125
8970
|
...props
|
|
9126
8971
|
}, ref) => {
|
|
9127
|
-
const [internalValue, setInternalValue] =
|
|
8972
|
+
const [internalValue, setInternalValue] = React49__namespace.useState(defaultValue || "");
|
|
9128
8973
|
const isControlled = controlledValue !== void 0;
|
|
9129
8974
|
const value = isControlled ? controlledValue : internalValue;
|
|
9130
|
-
const name =
|
|
8975
|
+
const name = React49__namespace.useMemo(() => {
|
|
9131
8976
|
if (propName) return propName;
|
|
9132
8977
|
if (typeof document !== "undefined") {
|
|
9133
8978
|
return `radio-group-${Math.random().toString(36).substr(2, 9)}`;
|
|
9134
8979
|
}
|
|
9135
8980
|
return "radio-group";
|
|
9136
8981
|
}, [propName]);
|
|
9137
|
-
const handleValueChange =
|
|
8982
|
+
const handleValueChange = React49__namespace.useCallback(
|
|
9138
8983
|
(newValue) => {
|
|
9139
8984
|
if (!isControlled) {
|
|
9140
8985
|
setInternalValue(newValue);
|
|
@@ -9143,7 +8988,7 @@ var RadioGroup = React48__namespace.forwardRef(
|
|
|
9143
8988
|
},
|
|
9144
8989
|
[isControlled, onValueChange]
|
|
9145
8990
|
);
|
|
9146
|
-
const contextValue =
|
|
8991
|
+
const contextValue = React49__namespace.useMemo(
|
|
9147
8992
|
() => ({
|
|
9148
8993
|
value,
|
|
9149
8994
|
onValueChange: handleValueChange,
|
|
@@ -9170,7 +9015,7 @@ var RadioGroup = React48__namespace.forwardRef(
|
|
|
9170
9015
|
}
|
|
9171
9016
|
);
|
|
9172
9017
|
RadioGroup.displayName = "RadioGroup";
|
|
9173
|
-
var Radio =
|
|
9018
|
+
var Radio = React49__namespace.forwardRef(
|
|
9174
9019
|
({
|
|
9175
9020
|
className,
|
|
9176
9021
|
variant,
|
|
@@ -9188,11 +9033,11 @@ var Radio = React48__namespace.forwardRef(
|
|
|
9188
9033
|
onKeyDown,
|
|
9189
9034
|
...props
|
|
9190
9035
|
}, ref) => {
|
|
9191
|
-
const radioGroupContext =
|
|
9036
|
+
const radioGroupContext = React49__namespace.useContext(RadioGroupContext);
|
|
9192
9037
|
const isControlled = controlledChecked !== void 0;
|
|
9193
9038
|
const isGroupControlled = radioGroupContext !== void 0;
|
|
9194
9039
|
const checkedInGroup = isGroupControlled && value !== void 0 && radioGroupContext ? radioGroupContext.value === value : false;
|
|
9195
|
-
const [uncontrolledChecked, setUncontrolledChecked] =
|
|
9040
|
+
const [uncontrolledChecked, setUncontrolledChecked] = React49__namespace.useState(false);
|
|
9196
9041
|
const finalChecked = (() => {
|
|
9197
9042
|
if (isControlled) return controlledChecked;
|
|
9198
9043
|
if (isGroupControlled) return checkedInGroup;
|
|
@@ -9201,19 +9046,19 @@ var Radio = React48__namespace.forwardRef(
|
|
|
9201
9046
|
const effectiveSize = size || radioGroupContext?.size || "md";
|
|
9202
9047
|
const isDisabled = disabled || state === "disabled";
|
|
9203
9048
|
const isError = state === "error";
|
|
9204
|
-
const effectiveState =
|
|
9049
|
+
const effectiveState = React49__namespace.useMemo(() => {
|
|
9205
9050
|
if (isDisabled) return "disabled";
|
|
9206
9051
|
if (isError) return "error";
|
|
9207
9052
|
if (finalChecked) return "checked";
|
|
9208
9053
|
return "default";
|
|
9209
9054
|
}, [isDisabled, isError, finalChecked]);
|
|
9210
|
-
const tabIndex =
|
|
9055
|
+
const tabIndex = React49__namespace.useMemo(() => {
|
|
9211
9056
|
if (isGroupControlled) {
|
|
9212
9057
|
return finalChecked ? 0 : -1;
|
|
9213
9058
|
}
|
|
9214
9059
|
return 0;
|
|
9215
9060
|
}, [isGroupControlled, finalChecked]);
|
|
9216
|
-
const handleClick =
|
|
9061
|
+
const handleClick = React49__namespace.useCallback(
|
|
9217
9062
|
(event) => {
|
|
9218
9063
|
if (isDisabled) {
|
|
9219
9064
|
event.preventDefault();
|
|
@@ -9237,7 +9082,7 @@ var Radio = React48__namespace.forwardRef(
|
|
|
9237
9082
|
onClick
|
|
9238
9083
|
]
|
|
9239
9084
|
);
|
|
9240
|
-
const handleKeyDown =
|
|
9085
|
+
const handleKeyDown = React49__namespace.useCallback(
|
|
9241
9086
|
(event) => {
|
|
9242
9087
|
if (isDisabled) return;
|
|
9243
9088
|
if (event.key === " " || event.key === "Spacebar") {
|
|
@@ -9392,7 +9237,7 @@ var textareaVariants = classVarianceAuthority.cva(
|
|
|
9392
9237
|
}
|
|
9393
9238
|
}
|
|
9394
9239
|
);
|
|
9395
|
-
var Textarea =
|
|
9240
|
+
var Textarea = React49__namespace.forwardRef(
|
|
9396
9241
|
({
|
|
9397
9242
|
className,
|
|
9398
9243
|
variant,
|
|
@@ -9411,8 +9256,8 @@ var Textarea = React48__namespace.forwardRef(
|
|
|
9411
9256
|
const isError = state === "error" || ariaInvalid === true;
|
|
9412
9257
|
const isDisabled = disabled || state === "disabled";
|
|
9413
9258
|
const ariaInvalidValue = isError ? true : ariaInvalid;
|
|
9414
|
-
const generatedId =
|
|
9415
|
-
const [describedById] =
|
|
9259
|
+
const generatedId = React49__namespace.useId();
|
|
9260
|
+
const [describedById] = React49__namespace.useState(() => {
|
|
9416
9261
|
if (ariaDescribedBy) return ariaDescribedBy;
|
|
9417
9262
|
if (state === "error" || state === "success") {
|
|
9418
9263
|
return `textarea-${generatedId}-message`;
|
|
@@ -9476,16 +9321,6 @@ var Textarea = React48__namespace.forwardRef(
|
|
|
9476
9321
|
}
|
|
9477
9322
|
);
|
|
9478
9323
|
Textarea.displayName = "Textarea";
|
|
9479
|
-
var Progress = ({ value, max = 100, className }) => {
|
|
9480
|
-
const percentage = Math.min(100, Math.max(0, value / max * 100));
|
|
9481
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-2 w-full rounded-full bg-secondary", className), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
9482
|
-
"div",
|
|
9483
|
-
{
|
|
9484
|
-
className: "h-2 rounded-full bg-primary transition-[width] duration-normal",
|
|
9485
|
-
style: { width: `${percentage}%` }
|
|
9486
|
-
}
|
|
9487
|
-
) });
|
|
9488
|
-
};
|
|
9489
9324
|
var skeletonVariants = classVarianceAuthority.cva(
|
|
9490
9325
|
`${DATA_TOKENS.skeleton.background.default} ${DATA_TOKENS.skeleton.animation.pulse}`,
|
|
9491
9326
|
{
|
|
@@ -9503,7 +9338,7 @@ var skeletonVariants = classVarianceAuthority.cva(
|
|
|
9503
9338
|
}
|
|
9504
9339
|
}
|
|
9505
9340
|
);
|
|
9506
|
-
var Skeleton =
|
|
9341
|
+
var Skeleton = React49__namespace.forwardRef(
|
|
9507
9342
|
({ className, variant, "aria-hidden": ariaHidden = true, ...props }, ref) => {
|
|
9508
9343
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9509
9344
|
"div",
|
|
@@ -9517,10 +9352,10 @@ var Skeleton = React48__namespace.forwardRef(
|
|
|
9517
9352
|
}
|
|
9518
9353
|
);
|
|
9519
9354
|
Skeleton.displayName = "Skeleton";
|
|
9520
|
-
var Portal3 =
|
|
9355
|
+
var Portal3 = React49__namespace.forwardRef(
|
|
9521
9356
|
({ children, container, className, style }, ref) => {
|
|
9522
|
-
const [mounted, setMounted] =
|
|
9523
|
-
|
|
9357
|
+
const [mounted, setMounted] = React49__namespace.useState(false);
|
|
9358
|
+
React49__namespace.useEffect(() => {
|
|
9524
9359
|
setMounted(true);
|
|
9525
9360
|
}, []);
|
|
9526
9361
|
if (!mounted || typeof window === "undefined") {
|
|
@@ -9549,7 +9384,7 @@ var backdropVariants = classVarianceAuthority.cva("fixed inset-0 z-40 transition
|
|
|
9549
9384
|
variant: "default"
|
|
9550
9385
|
}
|
|
9551
9386
|
});
|
|
9552
|
-
var Backdrop =
|
|
9387
|
+
var Backdrop = React49__namespace.forwardRef(
|
|
9553
9388
|
({ variant = "default", isVisible = true, onClick, className, ...props }, ref) => {
|
|
9554
9389
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9555
9390
|
"div",
|
|
@@ -9569,14 +9404,14 @@ var Backdrop = React48__namespace.forwardRef(
|
|
|
9569
9404
|
);
|
|
9570
9405
|
Backdrop.displayName = "Backdrop";
|
|
9571
9406
|
var DialogRoot = ({ titleId, descriptionId, children, ...props }) => {
|
|
9572
|
-
const titleIdRef =
|
|
9573
|
-
const descriptionIdRef =
|
|
9407
|
+
const titleIdRef = React49__namespace.useId();
|
|
9408
|
+
const descriptionIdRef = React49__namespace.useId();
|
|
9574
9409
|
const finalTitleId = titleId || titleIdRef;
|
|
9575
9410
|
const finalDescriptionId = descriptionId || descriptionIdRef;
|
|
9576
9411
|
return /* @__PURE__ */ jsxRuntime.jsx(Modal.Root, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Modal.Content, { children: [
|
|
9577
|
-
|
|
9578
|
-
if (
|
|
9579
|
-
return
|
|
9412
|
+
React49__namespace.Children.map(children, (child) => {
|
|
9413
|
+
if (React49__namespace.isValidElement(child)) {
|
|
9414
|
+
return React49__namespace.cloneElement(child, {
|
|
9580
9415
|
titleId: finalTitleId,
|
|
9581
9416
|
descriptionId: finalDescriptionId
|
|
9582
9417
|
});
|
|
@@ -9587,7 +9422,7 @@ var DialogRoot = ({ titleId, descriptionId, children, ...props }) => {
|
|
|
9587
9422
|
] }) });
|
|
9588
9423
|
};
|
|
9589
9424
|
DialogRoot.displayName = "DialogRoot";
|
|
9590
|
-
var DialogHeader =
|
|
9425
|
+
var DialogHeader = React49__namespace.forwardRef(
|
|
9591
9426
|
({ className, ...props }, ref) => {
|
|
9592
9427
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9593
9428
|
"div",
|
|
@@ -9605,7 +9440,7 @@ var DialogHeader = React48__namespace.forwardRef(
|
|
|
9605
9440
|
}
|
|
9606
9441
|
);
|
|
9607
9442
|
DialogHeader.displayName = "DialogHeader";
|
|
9608
|
-
var DialogTitle =
|
|
9443
|
+
var DialogTitle = React49__namespace.forwardRef(
|
|
9609
9444
|
({ titleId, className, children, ...props }, ref) => {
|
|
9610
9445
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9611
9446
|
Heading,
|
|
@@ -9623,7 +9458,7 @@ var DialogTitle = React48__namespace.forwardRef(
|
|
|
9623
9458
|
}
|
|
9624
9459
|
);
|
|
9625
9460
|
DialogTitle.displayName = "DialogTitle";
|
|
9626
|
-
var DialogDescription =
|
|
9461
|
+
var DialogDescription = React49__namespace.forwardRef(
|
|
9627
9462
|
({ descriptionId, className, children, ...props }, ref) => {
|
|
9628
9463
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9629
9464
|
"p",
|
|
@@ -9638,7 +9473,7 @@ var DialogDescription = React48__namespace.forwardRef(
|
|
|
9638
9473
|
}
|
|
9639
9474
|
);
|
|
9640
9475
|
DialogDescription.displayName = "DialogDescription";
|
|
9641
|
-
var DialogBody =
|
|
9476
|
+
var DialogBody = React49__namespace.forwardRef(
|
|
9642
9477
|
({ className, ...props }, ref) => {
|
|
9643
9478
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9644
9479
|
"div",
|
|
@@ -9651,7 +9486,7 @@ var DialogBody = React48__namespace.forwardRef(
|
|
|
9651
9486
|
}
|
|
9652
9487
|
);
|
|
9653
9488
|
DialogBody.displayName = "DialogBody";
|
|
9654
|
-
var DialogFooter =
|
|
9489
|
+
var DialogFooter = React49__namespace.forwardRef(
|
|
9655
9490
|
({ className, ...props }, ref) => {
|
|
9656
9491
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9657
9492
|
Row,
|
|
@@ -9691,7 +9526,7 @@ var toastVariants = classVarianceAuthority.cva(
|
|
|
9691
9526
|
}
|
|
9692
9527
|
}
|
|
9693
9528
|
);
|
|
9694
|
-
var ToastRoot =
|
|
9529
|
+
var ToastRoot = React49__namespace.forwardRef(
|
|
9695
9530
|
({ toast, variant, className, ...props }, ref) => {
|
|
9696
9531
|
const toastVariant = variant || toast.variant || "default";
|
|
9697
9532
|
const durationMs = toast.duration ? getDelayMs(toast.duration, 5e3) : 5e3;
|
|
@@ -9759,7 +9594,7 @@ var ToastRoot = React48__namespace.forwardRef(
|
|
|
9759
9594
|
}
|
|
9760
9595
|
);
|
|
9761
9596
|
ToastRoot.displayName = ToastPrimitives__namespace.Root.displayName;
|
|
9762
|
-
var ToastTitle =
|
|
9597
|
+
var ToastTitle = React49__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
9763
9598
|
ToastPrimitives__namespace.Title,
|
|
9764
9599
|
{
|
|
9765
9600
|
ref,
|
|
@@ -9768,7 +9603,7 @@ var ToastTitle = React48__namespace.forwardRef(({ className, ...props }, ref) =>
|
|
|
9768
9603
|
}
|
|
9769
9604
|
));
|
|
9770
9605
|
ToastTitle.displayName = ToastPrimitives__namespace.Title.displayName;
|
|
9771
|
-
var ToastDescription =
|
|
9606
|
+
var ToastDescription = React49__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
9772
9607
|
ToastPrimitives__namespace.Description,
|
|
9773
9608
|
{
|
|
9774
9609
|
ref,
|
|
@@ -9777,7 +9612,7 @@ var ToastDescription = React48__namespace.forwardRef(({ className, ...props }, r
|
|
|
9777
9612
|
}
|
|
9778
9613
|
));
|
|
9779
9614
|
ToastDescription.displayName = ToastPrimitives__namespace.Description.displayName;
|
|
9780
|
-
var ToastAction =
|
|
9615
|
+
var ToastAction = React49__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
9781
9616
|
ToastPrimitives__namespace.Action,
|
|
9782
9617
|
{
|
|
9783
9618
|
ref,
|
|
@@ -9792,7 +9627,7 @@ var ToastAction = React48__namespace.forwardRef(({ className, ...props }, ref) =
|
|
|
9792
9627
|
}
|
|
9793
9628
|
));
|
|
9794
9629
|
ToastAction.displayName = ToastPrimitives__namespace.Action.displayName;
|
|
9795
|
-
var ToastClose =
|
|
9630
|
+
var ToastClose = React49__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
9796
9631
|
ToastPrimitives__namespace.Close,
|
|
9797
9632
|
{
|
|
9798
9633
|
ref,
|
|
@@ -9825,7 +9660,7 @@ var positionClasses = {
|
|
|
9825
9660
|
"bottom-center": `fixed ${TOAST_TOKENS.position.spacing.bottom} inset-x-0 z-[100] flex flex-col-reverse items-center ${TOAST_TOKENS.spacing.gap}`,
|
|
9826
9661
|
"bottom-right": `fixed ${TOAST_TOKENS.position.spacing.bottom} ${TOAST_TOKENS.position.spacing.right} z-[100] flex flex-col-reverse ${TOAST_TOKENS.spacing.gap}`
|
|
9827
9662
|
};
|
|
9828
|
-
var ToastViewport =
|
|
9663
|
+
var ToastViewport = React49__namespace.forwardRef(
|
|
9829
9664
|
({ position = "top-right", className, ...props }, ref) => {
|
|
9830
9665
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9831
9666
|
ToastPrimitives__namespace.Viewport,
|
|
@@ -9842,16 +9677,16 @@ var ToastViewport = React48__namespace.forwardRef(
|
|
|
9842
9677
|
}
|
|
9843
9678
|
);
|
|
9844
9679
|
ToastViewport.displayName = ToastPrimitives__namespace.Viewport.displayName;
|
|
9845
|
-
var ToastContext =
|
|
9680
|
+
var ToastContext = React49__namespace.createContext(void 0);
|
|
9846
9681
|
function ToastProvider({
|
|
9847
9682
|
children,
|
|
9848
9683
|
position = "top-right",
|
|
9849
9684
|
swipeDirection = "right",
|
|
9850
9685
|
duration = 5e3
|
|
9851
9686
|
}) {
|
|
9852
|
-
const [toasts, setToasts] =
|
|
9853
|
-
const [openStates, setOpenStates] =
|
|
9854
|
-
const toast =
|
|
9687
|
+
const [toasts, setToasts] = React49__namespace.useState([]);
|
|
9688
|
+
const [openStates, setOpenStates] = React49__namespace.useState({});
|
|
9689
|
+
const toast = React49__namespace.useCallback((options) => {
|
|
9855
9690
|
const id = Math.random().toString(36).substr(2, 9);
|
|
9856
9691
|
const newToast = {
|
|
9857
9692
|
id,
|
|
@@ -9862,7 +9697,7 @@ function ToastProvider({
|
|
|
9862
9697
|
setOpenStates((prev) => ({ ...prev, [id]: true }));
|
|
9863
9698
|
return id;
|
|
9864
9699
|
}, []);
|
|
9865
|
-
const dismiss =
|
|
9700
|
+
const dismiss = React49__namespace.useCallback((id) => {
|
|
9866
9701
|
setOpenStates((prev) => ({ ...prev, [id]: false }));
|
|
9867
9702
|
setTimeout(() => {
|
|
9868
9703
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
@@ -9873,7 +9708,7 @@ function ToastProvider({
|
|
|
9873
9708
|
});
|
|
9874
9709
|
}, 300);
|
|
9875
9710
|
}, []);
|
|
9876
|
-
const dismissAll =
|
|
9711
|
+
const dismissAll = React49__namespace.useCallback(() => {
|
|
9877
9712
|
setOpenStates((prev) => {
|
|
9878
9713
|
const next = { ...prev };
|
|
9879
9714
|
Object.keys(next).forEach((id) => {
|
|
@@ -9886,7 +9721,7 @@ function ToastProvider({
|
|
|
9886
9721
|
setOpenStates({});
|
|
9887
9722
|
}, 300);
|
|
9888
9723
|
}, []);
|
|
9889
|
-
const contextValue =
|
|
9724
|
+
const contextValue = React49__namespace.useMemo(
|
|
9890
9725
|
() => ({
|
|
9891
9726
|
toast,
|
|
9892
9727
|
dismiss,
|
|
@@ -9917,7 +9752,7 @@ function ToastProvider({
|
|
|
9917
9752
|
] }) });
|
|
9918
9753
|
}
|
|
9919
9754
|
function useToast() {
|
|
9920
|
-
const context =
|
|
9755
|
+
const context = React49__namespace.useContext(ToastContext);
|
|
9921
9756
|
if (context === void 0) {
|
|
9922
9757
|
throw new Error("useToast must be used within a ToastProvider");
|
|
9923
9758
|
}
|
|
@@ -9929,8 +9764,8 @@ function notifyListeners() {
|
|
|
9929
9764
|
globalListeners.forEach((listener) => listener());
|
|
9930
9765
|
}
|
|
9931
9766
|
function useGlobalToast() {
|
|
9932
|
-
const [toasts, setToasts] =
|
|
9933
|
-
|
|
9767
|
+
const [toasts, setToasts] = React49.useState(globalToasts);
|
|
9768
|
+
React49__namespace.useEffect(() => {
|
|
9934
9769
|
const listener = () => {
|
|
9935
9770
|
setToasts([...globalToasts]);
|
|
9936
9771
|
};
|
|
@@ -9939,11 +9774,11 @@ function useGlobalToast() {
|
|
|
9939
9774
|
globalListeners.delete(listener);
|
|
9940
9775
|
};
|
|
9941
9776
|
}, []);
|
|
9942
|
-
const dismiss =
|
|
9777
|
+
const dismiss = React49.useCallback((toastId) => {
|
|
9943
9778
|
globalToasts = globalToasts.filter((toast2) => toast2.id !== toastId);
|
|
9944
9779
|
notifyListeners();
|
|
9945
9780
|
}, []);
|
|
9946
|
-
const toast =
|
|
9781
|
+
const toast = React49.useCallback(
|
|
9947
9782
|
(toastData) => {
|
|
9948
9783
|
const id = Math.random().toString(36).substr(2, 9);
|
|
9949
9784
|
const newToast = {
|
|
@@ -9962,7 +9797,7 @@ function useGlobalToast() {
|
|
|
9962
9797
|
},
|
|
9963
9798
|
[dismiss]
|
|
9964
9799
|
);
|
|
9965
|
-
const dismissAll =
|
|
9800
|
+
const dismissAll = React49.useCallback(() => {
|
|
9966
9801
|
globalToasts = [];
|
|
9967
9802
|
notifyListeners();
|
|
9968
9803
|
}, []);
|
|
@@ -10013,8 +9848,8 @@ function useFocusLock({
|
|
|
10013
9848
|
returnFocusRef,
|
|
10014
9849
|
additionalFocusableElements = []
|
|
10015
9850
|
}) {
|
|
10016
|
-
const previousActiveElementRef =
|
|
10017
|
-
|
|
9851
|
+
const previousActiveElementRef = React49__namespace.useRef(null);
|
|
9852
|
+
React49__namespace.useEffect(() => {
|
|
10018
9853
|
if (!enabled || !containerRef.current) {
|
|
10019
9854
|
return;
|
|
10020
9855
|
}
|
|
@@ -10261,9 +10096,9 @@ var CONTEXT_MENU_TOKENS = {
|
|
|
10261
10096
|
indicator: {
|
|
10262
10097
|
size: "size-4"}
|
|
10263
10098
|
};
|
|
10264
|
-
var ContextMenuSizeContext =
|
|
10099
|
+
var ContextMenuSizeContext = React49__namespace.createContext(void 0);
|
|
10265
10100
|
function useContextMenuSize(providedSize) {
|
|
10266
|
-
const contextSize =
|
|
10101
|
+
const contextSize = React49__namespace.useContext(ContextMenuSizeContext);
|
|
10267
10102
|
const baseSize = providedSize ? getBaseValue(providedSize) : void 0;
|
|
10268
10103
|
return baseSize ?? contextSize ?? "md";
|
|
10269
10104
|
}
|
|
@@ -10330,11 +10165,11 @@ var ContextMenuRoot = ({ children, ...props }) => {
|
|
|
10330
10165
|
return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Root, { ...props, children });
|
|
10331
10166
|
};
|
|
10332
10167
|
ContextMenuRoot.displayName = ContextMenuPrimitive__namespace.Root.displayName;
|
|
10333
|
-
var ContextMenuTrigger =
|
|
10168
|
+
var ContextMenuTrigger = React49__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
10334
10169
|
return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Trigger, { ref, className: cn(className), ...props });
|
|
10335
10170
|
});
|
|
10336
10171
|
ContextMenuTrigger.displayName = ContextMenuPrimitive__namespace.Trigger.displayName;
|
|
10337
|
-
var ContextMenuContent =
|
|
10172
|
+
var ContextMenuContent = React49__namespace.forwardRef(({ className, size = "md", width, padding, radius, surface, ...props }, ref) => {
|
|
10338
10173
|
const baseSize = getBaseValue(size) ?? "md";
|
|
10339
10174
|
const baseWidth = width ? getBaseValue(width) : void 0;
|
|
10340
10175
|
const basePadding = padding ? getBaseValue(padding) : void 0;
|
|
@@ -10363,7 +10198,7 @@ var ContextMenuContent = React48__namespace.forwardRef(({ className, size = "md"
|
|
|
10363
10198
|
) }) });
|
|
10364
10199
|
});
|
|
10365
10200
|
ContextMenuContent.displayName = ContextMenuPrimitive__namespace.Content.displayName;
|
|
10366
|
-
var ContextMenuItem =
|
|
10201
|
+
var ContextMenuItem = React49__namespace.forwardRef(({ className, size, tone = "neutral", gap, inset, ...props }, ref) => {
|
|
10367
10202
|
const baseSize = useContextMenuSize(size);
|
|
10368
10203
|
const baseGap = gap ? getBaseValue(gap) : void 0;
|
|
10369
10204
|
const gapClass = getSpacingClass2("gap", baseGap);
|
|
@@ -10385,7 +10220,7 @@ var ContextMenuItem = React48__namespace.forwardRef(({ className, size, tone = "
|
|
|
10385
10220
|
);
|
|
10386
10221
|
});
|
|
10387
10222
|
ContextMenuItem.displayName = ContextMenuPrimitive__namespace.Item.displayName;
|
|
10388
|
-
var ContextMenuCheckboxItem =
|
|
10223
|
+
var ContextMenuCheckboxItem = React49__namespace.forwardRef(({ className, size, tone = "neutral", gap, children, ...props }, ref) => {
|
|
10389
10224
|
const baseSize = useContextMenuSize(size);
|
|
10390
10225
|
const baseGap = gap ? getBaseValue(gap) : void 0;
|
|
10391
10226
|
const gapClass = getSpacingClass2("gap", baseGap);
|
|
@@ -10410,11 +10245,11 @@ var ContextMenuCheckboxItem = React48__namespace.forwardRef(({ className, size,
|
|
|
10410
10245
|
);
|
|
10411
10246
|
});
|
|
10412
10247
|
ContextMenuCheckboxItem.displayName = ContextMenuPrimitive__namespace.CheckboxItem.displayName;
|
|
10413
|
-
var ContextMenuRadioGroup =
|
|
10248
|
+
var ContextMenuRadioGroup = React49__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
10414
10249
|
return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.RadioGroup, { ref, className: cn(className), ...props });
|
|
10415
10250
|
});
|
|
10416
10251
|
ContextMenuRadioGroup.displayName = ContextMenuPrimitive__namespace.RadioGroup.displayName;
|
|
10417
|
-
var ContextMenuRadioItem =
|
|
10252
|
+
var ContextMenuRadioItem = React49__namespace.forwardRef(({ className, size, tone = "neutral", gap, children, ...props }, ref) => {
|
|
10418
10253
|
const baseSize = useContextMenuSize(size);
|
|
10419
10254
|
const baseGap = gap ? getBaseValue(gap) : void 0;
|
|
10420
10255
|
const gapClass = getSpacingClass2("gap", baseGap);
|
|
@@ -10439,7 +10274,7 @@ var ContextMenuRadioItem = React48__namespace.forwardRef(({ className, size, ton
|
|
|
10439
10274
|
);
|
|
10440
10275
|
});
|
|
10441
10276
|
ContextMenuRadioItem.displayName = ContextMenuPrimitive__namespace.RadioItem.displayName;
|
|
10442
|
-
var ContextMenuSeparator =
|
|
10277
|
+
var ContextMenuSeparator = React49__namespace.forwardRef(({ className, ...props }, ref) => {
|
|
10443
10278
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10444
10279
|
ContextMenuPrimitive__namespace.Separator,
|
|
10445
10280
|
{
|
|
@@ -10453,7 +10288,7 @@ var ContextMenuSeparator = React48__namespace.forwardRef(({ className, ...props
|
|
|
10453
10288
|
);
|
|
10454
10289
|
});
|
|
10455
10290
|
ContextMenuSeparator.displayName = ContextMenuPrimitive__namespace.Separator.displayName;
|
|
10456
|
-
var ContextMenuLabel =
|
|
10291
|
+
var ContextMenuLabel = React49__namespace.forwardRef(({ className, padding, ...props }, ref) => {
|
|
10457
10292
|
const basePadding = padding ? getBaseValue(padding) : void 0;
|
|
10458
10293
|
const paddingClass = getSpacingClass2("p", basePadding);
|
|
10459
10294
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -10475,7 +10310,7 @@ var ContextMenuSub = ({ children, ...props }) => {
|
|
|
10475
10310
|
return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuPrimitive__namespace.Sub, { ...props, children });
|
|
10476
10311
|
};
|
|
10477
10312
|
ContextMenuSub.displayName = ContextMenuPrimitive__namespace.Sub.displayName;
|
|
10478
|
-
var ContextMenuSubTrigger =
|
|
10313
|
+
var ContextMenuSubTrigger = React49__namespace.forwardRef(({ className, size, tone = "neutral", gap, children, ...props }, ref) => {
|
|
10479
10314
|
const baseSize = useContextMenuSize(size);
|
|
10480
10315
|
const baseGap = gap ? getBaseValue(gap) : void 0;
|
|
10481
10316
|
const gapClass = getSpacingClass2("gap", baseGap);
|
|
@@ -10500,8 +10335,8 @@ var ContextMenuSubTrigger = React48__namespace.forwardRef(({ className, size, to
|
|
|
10500
10335
|
);
|
|
10501
10336
|
});
|
|
10502
10337
|
ContextMenuSubTrigger.displayName = ContextMenuPrimitive__namespace.SubTrigger.displayName;
|
|
10503
|
-
var ContextMenuSubContent =
|
|
10504
|
-
const contextSize =
|
|
10338
|
+
var ContextMenuSubContent = React49__namespace.forwardRef(({ className, size, width, padding, radius, surface, ...props }, ref) => {
|
|
10339
|
+
const contextSize = React49__namespace.useContext(ContextMenuSizeContext);
|
|
10505
10340
|
const baseSize = size ? getBaseValue(size) : contextSize ?? "md";
|
|
10506
10341
|
const baseWidth = width ? getBaseValue(width) : void 0;
|
|
10507
10342
|
const basePadding = padding ? getBaseValue(padding) : void 0;
|
|
@@ -10544,18 +10379,18 @@ var ContextMenu = {
|
|
|
10544
10379
|
SubTrigger: ContextMenuSubTrigger,
|
|
10545
10380
|
SubContent: ContextMenuSubContent
|
|
10546
10381
|
};
|
|
10547
|
-
var NotificationContext =
|
|
10382
|
+
var NotificationContext = React49__namespace.createContext(void 0);
|
|
10548
10383
|
function NotificationCenterProvider({
|
|
10549
10384
|
children,
|
|
10550
10385
|
maxHistory = 100,
|
|
10551
10386
|
persistent = true
|
|
10552
10387
|
}) {
|
|
10553
|
-
const [notifications, setNotifications] =
|
|
10554
|
-
const [history, setHistory] =
|
|
10555
|
-
const remove =
|
|
10388
|
+
const [notifications, setNotifications] = React49__namespace.useState([]);
|
|
10389
|
+
const [history, setHistory] = React49__namespace.useState([]);
|
|
10390
|
+
const remove = React49__namespace.useCallback((id) => {
|
|
10556
10391
|
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
10557
10392
|
}, []);
|
|
10558
|
-
const push =
|
|
10393
|
+
const push = React49__namespace.useCallback(
|
|
10559
10394
|
(options) => {
|
|
10560
10395
|
const id = Math.random().toString(36).substr(2, 9);
|
|
10561
10396
|
const timestamp = Date.now();
|
|
@@ -10600,13 +10435,13 @@ function NotificationCenterProvider({
|
|
|
10600
10435
|
},
|
|
10601
10436
|
[maxHistory, persistent]
|
|
10602
10437
|
);
|
|
10603
|
-
const clearAll =
|
|
10438
|
+
const clearAll = React49__namespace.useCallback(() => {
|
|
10604
10439
|
setNotifications([]);
|
|
10605
10440
|
}, []);
|
|
10606
|
-
const clearChannel =
|
|
10441
|
+
const clearChannel = React49__namespace.useCallback((channel) => {
|
|
10607
10442
|
setNotifications((prev) => prev.filter((n) => n.channel !== channel));
|
|
10608
10443
|
}, []);
|
|
10609
|
-
const groupBy =
|
|
10444
|
+
const groupBy = React49__namespace.useCallback(
|
|
10610
10445
|
(fn) => {
|
|
10611
10446
|
return notifications.reduce(
|
|
10612
10447
|
(acc, notification) => {
|
|
@@ -10622,30 +10457,30 @@ function NotificationCenterProvider({
|
|
|
10622
10457
|
},
|
|
10623
10458
|
[notifications]
|
|
10624
10459
|
);
|
|
10625
|
-
const getHistory =
|
|
10460
|
+
const getHistory = React49__namespace.useCallback(() => {
|
|
10626
10461
|
return history;
|
|
10627
10462
|
}, [history]);
|
|
10628
|
-
const getByChannel =
|
|
10463
|
+
const getByChannel = React49__namespace.useCallback(
|
|
10629
10464
|
(channel) => {
|
|
10630
10465
|
return notifications.filter((n) => n.channel === channel);
|
|
10631
10466
|
},
|
|
10632
10467
|
[notifications]
|
|
10633
10468
|
);
|
|
10634
|
-
const getAll =
|
|
10469
|
+
const getAll = React49__namespace.useCallback(() => {
|
|
10635
10470
|
return notifications;
|
|
10636
10471
|
}, [notifications]);
|
|
10637
|
-
const markAsRead =
|
|
10472
|
+
const markAsRead = React49__namespace.useCallback((id) => {
|
|
10638
10473
|
setNotifications((prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n));
|
|
10639
10474
|
setHistory((prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n));
|
|
10640
10475
|
}, []);
|
|
10641
|
-
const markAllAsRead =
|
|
10476
|
+
const markAllAsRead = React49__namespace.useCallback(() => {
|
|
10642
10477
|
setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
|
|
10643
10478
|
setHistory((prev) => prev.map((n) => ({ ...n, read: true })));
|
|
10644
10479
|
}, []);
|
|
10645
|
-
const getUnreadCount =
|
|
10480
|
+
const getUnreadCount = React49__namespace.useCallback(() => {
|
|
10646
10481
|
return notifications.filter((n) => !n.read).length;
|
|
10647
10482
|
}, [notifications]);
|
|
10648
|
-
const contextValue =
|
|
10483
|
+
const contextValue = React49__namespace.useMemo(
|
|
10649
10484
|
() => ({
|
|
10650
10485
|
push,
|
|
10651
10486
|
remove,
|
|
@@ -10676,7 +10511,7 @@ function NotificationCenterProvider({
|
|
|
10676
10511
|
return /* @__PURE__ */ jsxRuntime.jsx(NotificationContext.Provider, { value: contextValue, children });
|
|
10677
10512
|
}
|
|
10678
10513
|
function useNotificationCenterContext() {
|
|
10679
|
-
const context =
|
|
10514
|
+
const context = React49__namespace.useContext(NotificationContext);
|
|
10680
10515
|
if (context === void 0) {
|
|
10681
10516
|
throw new Error(
|
|
10682
10517
|
"useNotificationCenterContext must be used within a NotificationCenterProvider"
|
|
@@ -10684,7 +10519,7 @@ function useNotificationCenterContext() {
|
|
|
10684
10519
|
}
|
|
10685
10520
|
return context;
|
|
10686
10521
|
}
|
|
10687
|
-
var NotificationCenterDismissAll =
|
|
10522
|
+
var NotificationCenterDismissAll = React49__namespace.forwardRef(({ confirm = false, confirmMessage = "Clear all notifications?", className, ...props }, ref) => {
|
|
10688
10523
|
const { clearAll, getAll } = useNotificationCenterContext();
|
|
10689
10524
|
const notifications = getAll();
|
|
10690
10525
|
const handleClick = () => {
|
|
@@ -10715,7 +10550,7 @@ var NotificationCenterDismissAll = React48__namespace.forwardRef(({ confirm = fa
|
|
|
10715
10550
|
);
|
|
10716
10551
|
});
|
|
10717
10552
|
NotificationCenterDismissAll.displayName = "NotificationCenter.DismissAll";
|
|
10718
|
-
var NotificationCenterGroupHeader =
|
|
10553
|
+
var NotificationCenterGroupHeader = React49__namespace.forwardRef(
|
|
10719
10554
|
({ label, collapsed = false, onToggleCollapse, collapsible = false, className, ...props }, ref) => {
|
|
10720
10555
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10721
10556
|
"div",
|
|
@@ -10778,7 +10613,7 @@ function formatRelativeTime(timestamp) {
|
|
|
10778
10613
|
if (days < 7) return `${days}d ago`;
|
|
10779
10614
|
return new Date(timestamp).toLocaleDateString();
|
|
10780
10615
|
}
|
|
10781
|
-
var NotificationCenterItem =
|
|
10616
|
+
var NotificationCenterItem = React49__namespace.forwardRef(
|
|
10782
10617
|
({ notification, onDismiss, onClick, expandable: _expandable = false, className, ...props }, ref) => {
|
|
10783
10618
|
const variant = notification.variant || "default";
|
|
10784
10619
|
const Icon3 = getNotificationIcon(variant);
|
|
@@ -10853,7 +10688,7 @@ var NotificationCenterItem = React48__namespace.forwardRef(
|
|
|
10853
10688
|
}
|
|
10854
10689
|
);
|
|
10855
10690
|
NotificationCenterItem.displayName = "NotificationCenter.Item";
|
|
10856
|
-
var NotificationCenterList =
|
|
10691
|
+
var NotificationCenterList = React49__namespace.forwardRef(({ children, className, "aria-label": ariaLabel, ...props }, ref) => {
|
|
10857
10692
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10858
10693
|
Stack,
|
|
10859
10694
|
{
|
|
@@ -10876,12 +10711,12 @@ function useSwipe(options = {}) {
|
|
|
10876
10711
|
onSwipe,
|
|
10877
10712
|
enabled = true
|
|
10878
10713
|
} = options;
|
|
10879
|
-
const [isSwiping, setIsSwiping] =
|
|
10880
|
-
const [distance, setDistance] =
|
|
10881
|
-
const [direction, setDirection] =
|
|
10882
|
-
const startPosRef =
|
|
10883
|
-
const elementRef =
|
|
10884
|
-
|
|
10714
|
+
const [isSwiping, setIsSwiping] = React49.useState(false);
|
|
10715
|
+
const [distance, setDistance] = React49.useState(0);
|
|
10716
|
+
const [direction, setDirection] = React49.useState(null);
|
|
10717
|
+
const startPosRef = React49.useRef(null);
|
|
10718
|
+
const elementRef = React49.useRef(null);
|
|
10719
|
+
React49.useEffect(() => {
|
|
10885
10720
|
if (typeof window === "undefined" || !enabled) {
|
|
10886
10721
|
return;
|
|
10887
10722
|
}
|
|
@@ -11010,11 +10845,11 @@ function groupByDate(notification) {
|
|
|
11010
10845
|
if (days < 30) return "This Month";
|
|
11011
10846
|
return "Older";
|
|
11012
10847
|
}
|
|
11013
|
-
var NotificationCenterPanel =
|
|
10848
|
+
var NotificationCenterPanel = React49__namespace.forwardRef(
|
|
11014
10849
|
({ isOpen, onClose, groupBy = groupByDate, width = "md", autoCollapse = true, returnFocusRef }, ref) => {
|
|
11015
|
-
const panelRef =
|
|
10850
|
+
const panelRef = React49__namespace.useRef(null);
|
|
11016
10851
|
const { getAll, markAsRead } = useNotificationCenterContext();
|
|
11017
|
-
const [collapsedGroups, setCollapsedGroups] =
|
|
10852
|
+
const [collapsedGroups, setCollapsedGroups] = React49__namespace.useState(/* @__PURE__ */ new Set());
|
|
11018
10853
|
const { handlers: swipeHandlers } = useSwipe({
|
|
11019
10854
|
directions: ["right"],
|
|
11020
10855
|
threshold: 100,
|
|
@@ -11024,7 +10859,7 @@ var NotificationCenterPanel = React48__namespace.forwardRef(
|
|
|
11024
10859
|
enabled: isOpen
|
|
11025
10860
|
});
|
|
11026
10861
|
const notifications = getAll();
|
|
11027
|
-
const grouped =
|
|
10862
|
+
const grouped = React49__namespace.useMemo(() => {
|
|
11028
10863
|
return groupBy ? notifications.reduce(
|
|
11029
10864
|
(acc, notification) => {
|
|
11030
10865
|
const key = groupBy(notification);
|
|
@@ -11037,7 +10872,7 @@ var NotificationCenterPanel = React48__namespace.forwardRef(
|
|
|
11037
10872
|
{}
|
|
11038
10873
|
) : { default: notifications };
|
|
11039
10874
|
}, [notifications, groupBy]);
|
|
11040
|
-
|
|
10875
|
+
React49__namespace.useEffect(() => {
|
|
11041
10876
|
if (autoCollapse && isOpen) {
|
|
11042
10877
|
const groups = Object.keys(grouped);
|
|
11043
10878
|
const olderGroups = groups.filter((g) => g !== "Today" && g !== "Yesterday");
|
|
@@ -11049,7 +10884,7 @@ var NotificationCenterPanel = React48__namespace.forwardRef(
|
|
|
11049
10884
|
enabled: isOpen,
|
|
11050
10885
|
returnFocusRef
|
|
11051
10886
|
});
|
|
11052
|
-
|
|
10887
|
+
React49__namespace.useEffect(() => {
|
|
11053
10888
|
if (!isOpen) return;
|
|
11054
10889
|
function handleKeyDown(event) {
|
|
11055
10890
|
if (event.key === "Escape") {
|
|
@@ -11061,7 +10896,7 @@ var NotificationCenterPanel = React48__namespace.forwardRef(
|
|
|
11061
10896
|
document.removeEventListener("keydown", handleKeyDown);
|
|
11062
10897
|
};
|
|
11063
10898
|
}, [isOpen, onClose]);
|
|
11064
|
-
|
|
10899
|
+
React49__namespace.useEffect(() => {
|
|
11065
10900
|
if (isOpen) {
|
|
11066
10901
|
notifications.forEach((n) => {
|
|
11067
10902
|
if (!n.read) {
|
|
@@ -11070,7 +10905,7 @@ var NotificationCenterPanel = React48__namespace.forwardRef(
|
|
|
11070
10905
|
});
|
|
11071
10906
|
}
|
|
11072
10907
|
}, [isOpen, notifications, markAsRead]);
|
|
11073
|
-
|
|
10908
|
+
React49__namespace.useEffect(() => {
|
|
11074
10909
|
if (isOpen && typeof window !== "undefined") {
|
|
11075
10910
|
document.body.style.overflow = "hidden";
|
|
11076
10911
|
return () => {
|
|
@@ -11185,7 +11020,7 @@ var NotificationCenterPanel = React48__namespace.forwardRef(
|
|
|
11185
11020
|
}
|
|
11186
11021
|
);
|
|
11187
11022
|
NotificationCenterPanel.displayName = "NotificationCenter.Panel";
|
|
11188
|
-
var NotificationCenterTrigger =
|
|
11023
|
+
var NotificationCenterTrigger = React49__namespace.forwardRef(({ onClick, showBadge = true, className, ...props }, ref) => {
|
|
11189
11024
|
const { getUnreadCount } = useNotificationCenterContext();
|
|
11190
11025
|
const unreadCount = getUnreadCount();
|
|
11191
11026
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -11217,7 +11052,7 @@ var NotificationCenterTrigger = React48__namespace.forwardRef(({ onClick, showBa
|
|
|
11217
11052
|
NotificationCenterTrigger.displayName = "NotificationCenter.Trigger";
|
|
11218
11053
|
function useNotificationCenter() {
|
|
11219
11054
|
const context = useNotificationCenterContext();
|
|
11220
|
-
const success =
|
|
11055
|
+
const success = React49__namespace.useCallback(
|
|
11221
11056
|
(message, options) => {
|
|
11222
11057
|
return context.push({
|
|
11223
11058
|
...options,
|
|
@@ -11228,7 +11063,7 @@ function useNotificationCenter() {
|
|
|
11228
11063
|
},
|
|
11229
11064
|
[context]
|
|
11230
11065
|
);
|
|
11231
|
-
const error =
|
|
11066
|
+
const error = React49__namespace.useCallback(
|
|
11232
11067
|
(message, options) => {
|
|
11233
11068
|
return context.push({
|
|
11234
11069
|
...options,
|
|
@@ -11239,7 +11074,7 @@ function useNotificationCenter() {
|
|
|
11239
11074
|
},
|
|
11240
11075
|
[context]
|
|
11241
11076
|
);
|
|
11242
|
-
const info =
|
|
11077
|
+
const info = React49__namespace.useCallback(
|
|
11243
11078
|
(message, options) => {
|
|
11244
11079
|
return context.push({
|
|
11245
11080
|
...options,
|
|
@@ -11250,7 +11085,7 @@ function useNotificationCenter() {
|
|
|
11250
11085
|
},
|
|
11251
11086
|
[context]
|
|
11252
11087
|
);
|
|
11253
|
-
const warning =
|
|
11088
|
+
const warning = React49__namespace.useCallback(
|
|
11254
11089
|
(message, options) => {
|
|
11255
11090
|
return context.push({
|
|
11256
11091
|
...options,
|
|
@@ -11261,7 +11096,7 @@ function useNotificationCenter() {
|
|
|
11261
11096
|
},
|
|
11262
11097
|
[context]
|
|
11263
11098
|
);
|
|
11264
|
-
const system =
|
|
11099
|
+
const system = React49__namespace.useCallback(
|
|
11265
11100
|
(message, options) => {
|
|
11266
11101
|
return context.push({
|
|
11267
11102
|
...options,
|
|
@@ -11272,7 +11107,7 @@ function useNotificationCenter() {
|
|
|
11272
11107
|
},
|
|
11273
11108
|
[context]
|
|
11274
11109
|
);
|
|
11275
|
-
const log =
|
|
11110
|
+
const log = React49__namespace.useCallback(
|
|
11276
11111
|
(message, options) => {
|
|
11277
11112
|
return context.push({
|
|
11278
11113
|
...options,
|
|
@@ -11283,7 +11118,7 @@ function useNotificationCenter() {
|
|
|
11283
11118
|
},
|
|
11284
11119
|
[context]
|
|
11285
11120
|
);
|
|
11286
|
-
return
|
|
11121
|
+
return React49__namespace.useMemo(
|
|
11287
11122
|
() => ({
|
|
11288
11123
|
success,
|
|
11289
11124
|
error,
|
|
@@ -11338,12 +11173,12 @@ var popoverContentVariants = classVarianceAuthority.cva(
|
|
|
11338
11173
|
}
|
|
11339
11174
|
}
|
|
11340
11175
|
);
|
|
11341
|
-
var PopoverContent =
|
|
11342
|
-
const sideOffsetPx =
|
|
11176
|
+
var PopoverContent = React49__namespace.forwardRef(({ className, variant, size, align = "center", sideOffset, alignOffset, ...props }, ref) => {
|
|
11177
|
+
const sideOffsetPx = React49__namespace.useMemo(() => {
|
|
11343
11178
|
const baseOffset = getBaseValue(sideOffset);
|
|
11344
11179
|
return baseOffset ? getSpacingPx(baseOffset) : 4;
|
|
11345
11180
|
}, [sideOffset]);
|
|
11346
|
-
const alignOffsetPx =
|
|
11181
|
+
const alignOffsetPx = React49__namespace.useMemo(() => {
|
|
11347
11182
|
const baseOffset = getBaseValue(alignOffset);
|
|
11348
11183
|
return baseOffset ? getSpacingPx(baseOffset) : void 0;
|
|
11349
11184
|
}, [alignOffset]);
|
|
@@ -11361,9 +11196,9 @@ var PopoverContent = React48__namespace.forwardRef(({ className, variant, size,
|
|
|
11361
11196
|
) });
|
|
11362
11197
|
});
|
|
11363
11198
|
PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
|
|
11364
|
-
var HoverCardContext =
|
|
11199
|
+
var HoverCardContext = React49__namespace.createContext(null);
|
|
11365
11200
|
function useHoverCardContext() {
|
|
11366
|
-
const context =
|
|
11201
|
+
const context = React49__namespace.useContext(HoverCardContext);
|
|
11367
11202
|
if (!context) {
|
|
11368
11203
|
throw new Error("HoverCard components must be used within HoverCardRoot");
|
|
11369
11204
|
}
|
|
@@ -11378,20 +11213,20 @@ function HoverCardRoot({
|
|
|
11378
11213
|
modal = false,
|
|
11379
11214
|
...props
|
|
11380
11215
|
}) {
|
|
11381
|
-
const [uncontrolledOpen, setUncontrolledOpen] =
|
|
11382
|
-
const openTimeoutRef =
|
|
11383
|
-
const closeTimeoutRef =
|
|
11384
|
-
const openDelayMs =
|
|
11216
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React49__namespace.useState(defaultOpen);
|
|
11217
|
+
const openTimeoutRef = React49__namespace.useRef(null);
|
|
11218
|
+
const closeTimeoutRef = React49__namespace.useRef(null);
|
|
11219
|
+
const openDelayMs = React49__namespace.useMemo(() => {
|
|
11385
11220
|
const baseDelay = getBaseValue(openDelay);
|
|
11386
11221
|
return baseDelay ? getDurationMs(baseDelay) : 0;
|
|
11387
11222
|
}, [openDelay]);
|
|
11388
|
-
const closeDelayMs =
|
|
11223
|
+
const closeDelayMs = React49__namespace.useMemo(() => {
|
|
11389
11224
|
const baseDelay = getBaseValue(closeDelay);
|
|
11390
11225
|
return baseDelay ? getDurationMs(baseDelay) : 300;
|
|
11391
11226
|
}, [closeDelay]);
|
|
11392
11227
|
const isControlled = controlledOpen !== void 0;
|
|
11393
11228
|
const open = isControlled ? controlledOpen : uncontrolledOpen;
|
|
11394
|
-
const handleOpenChange =
|
|
11229
|
+
const handleOpenChange = React49__namespace.useCallback(
|
|
11395
11230
|
(newOpen) => {
|
|
11396
11231
|
if (openTimeoutRef.current) {
|
|
11397
11232
|
clearTimeout(openTimeoutRef.current);
|
|
@@ -11431,7 +11266,7 @@ function HoverCardRoot({
|
|
|
11431
11266
|
},
|
|
11432
11267
|
[openDelayMs, closeDelayMs, isControlled, controlledOnOpenChange]
|
|
11433
11268
|
);
|
|
11434
|
-
|
|
11269
|
+
React49__namespace.useEffect(() => {
|
|
11435
11270
|
return () => {
|
|
11436
11271
|
if (openTimeoutRef.current) {
|
|
11437
11272
|
clearTimeout(openTimeoutRef.current);
|
|
@@ -11441,7 +11276,7 @@ function HoverCardRoot({
|
|
|
11441
11276
|
}
|
|
11442
11277
|
};
|
|
11443
11278
|
}, []);
|
|
11444
|
-
const contextValue =
|
|
11279
|
+
const contextValue = React49__namespace.useMemo(
|
|
11445
11280
|
() => ({
|
|
11446
11281
|
onOpenChange: handleOpenChange
|
|
11447
11282
|
}),
|
|
@@ -11450,17 +11285,17 @@ function HoverCardRoot({
|
|
|
11450
11285
|
return /* @__PURE__ */ jsxRuntime.jsx(HoverCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(Popover, { open, onOpenChange: handleOpenChange, defaultOpen, modal, children: props.children }) });
|
|
11451
11286
|
}
|
|
11452
11287
|
HoverCardRoot.displayName = "HoverCardRoot";
|
|
11453
|
-
var HoverCardContent =
|
|
11288
|
+
var HoverCardContent = React49__namespace.forwardRef(
|
|
11454
11289
|
({ onMouseEnter, onMouseLeave, ...props }, ref) => {
|
|
11455
11290
|
const { onOpenChange } = useHoverCardContext();
|
|
11456
|
-
const handleMouseEnter =
|
|
11291
|
+
const handleMouseEnter = React49__namespace.useCallback(
|
|
11457
11292
|
(event) => {
|
|
11458
11293
|
onOpenChange(true);
|
|
11459
11294
|
onMouseEnter?.(event);
|
|
11460
11295
|
},
|
|
11461
11296
|
[onOpenChange, onMouseEnter]
|
|
11462
11297
|
);
|
|
11463
|
-
const handleMouseLeave =
|
|
11298
|
+
const handleMouseLeave = React49__namespace.useCallback(
|
|
11464
11299
|
(event) => {
|
|
11465
11300
|
onOpenChange(false);
|
|
11466
11301
|
onMouseLeave?.(event);
|
|
@@ -11480,31 +11315,31 @@ var HoverCardContent = React48__namespace.forwardRef(
|
|
|
11480
11315
|
}
|
|
11481
11316
|
);
|
|
11482
11317
|
HoverCardContent.displayName = "HoverCardContent";
|
|
11483
|
-
var HoverCardTrigger =
|
|
11318
|
+
var HoverCardTrigger = React49__namespace.forwardRef(
|
|
11484
11319
|
({ onMouseEnter, onMouseLeave, onFocus, onBlur, asChild = false, ...props }, ref) => {
|
|
11485
11320
|
const { onOpenChange } = useHoverCardContext();
|
|
11486
|
-
const handleMouseEnter =
|
|
11321
|
+
const handleMouseEnter = React49__namespace.useCallback(
|
|
11487
11322
|
(event) => {
|
|
11488
11323
|
onOpenChange(true);
|
|
11489
11324
|
onMouseEnter?.(event);
|
|
11490
11325
|
},
|
|
11491
11326
|
[onOpenChange, onMouseEnter]
|
|
11492
11327
|
);
|
|
11493
|
-
const handleMouseLeave =
|
|
11328
|
+
const handleMouseLeave = React49__namespace.useCallback(
|
|
11494
11329
|
(event) => {
|
|
11495
11330
|
onOpenChange(false);
|
|
11496
11331
|
onMouseLeave?.(event);
|
|
11497
11332
|
},
|
|
11498
11333
|
[onOpenChange, onMouseLeave]
|
|
11499
11334
|
);
|
|
11500
|
-
const handleFocus =
|
|
11335
|
+
const handleFocus = React49__namespace.useCallback(
|
|
11501
11336
|
(event) => {
|
|
11502
11337
|
onOpenChange(true);
|
|
11503
11338
|
onFocus?.(event);
|
|
11504
11339
|
},
|
|
11505
11340
|
[onOpenChange, onFocus]
|
|
11506
11341
|
);
|
|
11507
|
-
const handleBlur =
|
|
11342
|
+
const handleBlur = React49__namespace.useCallback(
|
|
11508
11343
|
(event) => {
|
|
11509
11344
|
onOpenChange(false);
|
|
11510
11345
|
onBlur?.(event);
|
|
@@ -11528,7 +11363,7 @@ var HoverCardTrigger = React48__namespace.forwardRef(
|
|
|
11528
11363
|
}
|
|
11529
11364
|
);
|
|
11530
11365
|
HoverCardTrigger.displayName = "HoverCardTrigger";
|
|
11531
|
-
var DataListItem =
|
|
11366
|
+
var DataListItem = React49__namespace.forwardRef(
|
|
11532
11367
|
({ padding = "md", className, children, ...props }, ref) => {
|
|
11533
11368
|
const paddingValue = getBaseValue(padding);
|
|
11534
11369
|
const paddingKey = paddingValue && ["sm", "md", "lg"].includes(String(paddingValue)) ? String(paddingValue) : "md";
|
|
@@ -11551,7 +11386,7 @@ var DataListItem = React48__namespace.forwardRef(
|
|
|
11551
11386
|
}
|
|
11552
11387
|
);
|
|
11553
11388
|
DataListItem.displayName = "DataListItem";
|
|
11554
|
-
var DataListLabel =
|
|
11389
|
+
var DataListLabel = React49__namespace.forwardRef(
|
|
11555
11390
|
({ className, children, ...props }, ref) => {
|
|
11556
11391
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
11557
11392
|
"dt",
|
|
@@ -11570,7 +11405,7 @@ var DataListLabel = React48__namespace.forwardRef(
|
|
|
11570
11405
|
}
|
|
11571
11406
|
);
|
|
11572
11407
|
DataListLabel.displayName = "DataListLabel";
|
|
11573
|
-
var DataListValue =
|
|
11408
|
+
var DataListValue = React49__namespace.forwardRef(
|
|
11574
11409
|
({ className, children, ...props }, ref) => {
|
|
11575
11410
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
11576
11411
|
"dd",
|
|
@@ -11584,7 +11419,7 @@ var DataListValue = React48__namespace.forwardRef(
|
|
|
11584
11419
|
}
|
|
11585
11420
|
);
|
|
11586
11421
|
DataListValue.displayName = "DataListValue";
|
|
11587
|
-
var DataListRoot =
|
|
11422
|
+
var DataListRoot = React49__namespace.forwardRef(
|
|
11588
11423
|
({ labelWidth: _labelWidth = "md", className, children, ...props }, ref) => {
|
|
11589
11424
|
return /* @__PURE__ */ jsxRuntime.jsx("dl", { ref, className: cn(DATA_LIST_TOKENS.spacing.gap, className), ...props, children });
|
|
11590
11425
|
}
|
|
@@ -11719,7 +11554,7 @@ var TabsRoot = ({ children, ...props }) => {
|
|
|
11719
11554
|
return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ...props, children });
|
|
11720
11555
|
};
|
|
11721
11556
|
TabsRoot.displayName = TabsPrimitive__namespace.Root.displayName;
|
|
11722
|
-
var TabsList =
|
|
11557
|
+
var TabsList = React49__namespace.forwardRef(
|
|
11723
11558
|
({ className, size, variant, ...props }, ref) => {
|
|
11724
11559
|
const baseSize = getBaseValue(size) ?? "md";
|
|
11725
11560
|
const baseVariant = variant ?? "underline";
|
|
@@ -11740,7 +11575,7 @@ var TabsList = React48__namespace.forwardRef(
|
|
|
11740
11575
|
}
|
|
11741
11576
|
);
|
|
11742
11577
|
TabsList.displayName = TabsPrimitive__namespace.List.displayName;
|
|
11743
|
-
var TabsTrigger =
|
|
11578
|
+
var TabsTrigger = React49__namespace.forwardRef(
|
|
11744
11579
|
({ className, size, variant, tone, leadingIcon, trailingIcon, icon, children, ...props }, ref) => {
|
|
11745
11580
|
const baseSize = getBaseValue(size) ?? "md";
|
|
11746
11581
|
const baseVariant = variant ?? "underline";
|
|
@@ -11789,7 +11624,7 @@ var TabsTrigger = React48__namespace.forwardRef(
|
|
|
11789
11624
|
}
|
|
11790
11625
|
);
|
|
11791
11626
|
TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
|
|
11792
|
-
var TabsContent =
|
|
11627
|
+
var TabsContent = React49__namespace.forwardRef(
|
|
11793
11628
|
({ className, size, ...props }, ref) => {
|
|
11794
11629
|
const baseSize = getBaseValue(size) ?? "md";
|
|
11795
11630
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -11854,17 +11689,17 @@ var segmentedControlItemVariants = classVarianceAuthority.cva(
|
|
|
11854
11689
|
}
|
|
11855
11690
|
}
|
|
11856
11691
|
);
|
|
11857
|
-
var SegmentedControlContext =
|
|
11692
|
+
var SegmentedControlContext = React49__namespace.createContext(
|
|
11858
11693
|
void 0
|
|
11859
11694
|
);
|
|
11860
11695
|
function useSegmentedControlContext() {
|
|
11861
|
-
const context =
|
|
11696
|
+
const context = React49__namespace.useContext(SegmentedControlContext);
|
|
11862
11697
|
if (!context) {
|
|
11863
11698
|
throw new Error("SegmentedControl components must be used within SegmentedControl.Root");
|
|
11864
11699
|
}
|
|
11865
11700
|
return context;
|
|
11866
11701
|
}
|
|
11867
|
-
var SegmentedControlRoot =
|
|
11702
|
+
var SegmentedControlRoot = React49__namespace.forwardRef(
|
|
11868
11703
|
({
|
|
11869
11704
|
value: controlledValue,
|
|
11870
11705
|
defaultValue,
|
|
@@ -11876,17 +11711,17 @@ var SegmentedControlRoot = React48__namespace.forwardRef(
|
|
|
11876
11711
|
children,
|
|
11877
11712
|
...props
|
|
11878
11713
|
}, ref) => {
|
|
11879
|
-
const [internalValue, setInternalValue] =
|
|
11714
|
+
const [internalValue, setInternalValue] = React49__namespace.useState(defaultValue || "");
|
|
11880
11715
|
const isControlled = controlledValue !== void 0;
|
|
11881
11716
|
const value = isControlled ? controlledValue : internalValue;
|
|
11882
|
-
const name =
|
|
11717
|
+
const name = React49__namespace.useMemo(() => {
|
|
11883
11718
|
if (propName) return propName;
|
|
11884
11719
|
if (typeof document !== "undefined") {
|
|
11885
11720
|
return `segmented-control-${Math.random().toString(36).substr(2, 9)}`;
|
|
11886
11721
|
}
|
|
11887
11722
|
return "segmented-control";
|
|
11888
11723
|
}, [propName]);
|
|
11889
|
-
const handleValueChange =
|
|
11724
|
+
const handleValueChange = React49__namespace.useCallback(
|
|
11890
11725
|
(newValue) => {
|
|
11891
11726
|
if (!isControlled) {
|
|
11892
11727
|
setInternalValue(newValue);
|
|
@@ -11895,7 +11730,7 @@ var SegmentedControlRoot = React48__namespace.forwardRef(
|
|
|
11895
11730
|
},
|
|
11896
11731
|
[isControlled, onValueChange]
|
|
11897
11732
|
);
|
|
11898
|
-
const contextValue =
|
|
11733
|
+
const contextValue = React49__namespace.useMemo(
|
|
11899
11734
|
() => ({
|
|
11900
11735
|
value,
|
|
11901
11736
|
onValueChange: handleValueChange,
|
|
@@ -11919,15 +11754,15 @@ var SegmentedControlRoot = React48__namespace.forwardRef(
|
|
|
11919
11754
|
}
|
|
11920
11755
|
);
|
|
11921
11756
|
SegmentedControlRoot.displayName = "SegmentedControl.Root";
|
|
11922
|
-
var SegmentedControlItem =
|
|
11757
|
+
var SegmentedControlItem = React49__namespace.forwardRef(
|
|
11923
11758
|
({ className, value, disabled, size, children, ...props }, ref) => {
|
|
11924
11759
|
const context = useSegmentedControlContext();
|
|
11925
11760
|
const isSelected = context.value === value;
|
|
11926
11761
|
const effectiveSize = size || context.size || "md";
|
|
11927
|
-
const itemRef =
|
|
11928
|
-
|
|
11762
|
+
const itemRef = React49__namespace.useRef(null);
|
|
11763
|
+
React49__namespace.useImperativeHandle(ref, () => itemRef.current);
|
|
11929
11764
|
const tabIndex = isSelected ? 0 : -1;
|
|
11930
|
-
const handleKeyDown =
|
|
11765
|
+
const handleKeyDown = React49__namespace.useCallback(
|
|
11931
11766
|
(event) => {
|
|
11932
11767
|
if (disabled) return;
|
|
11933
11768
|
const items = Array.from(
|
|
@@ -12011,7 +11846,7 @@ var SegmentedControl = Object.assign(SegmentedControlRoot, {
|
|
|
12011
11846
|
Root: SegmentedControlRoot,
|
|
12012
11847
|
Item: SegmentedControlItem
|
|
12013
11848
|
});
|
|
12014
|
-
var BreadcrumbsRoot =
|
|
11849
|
+
var BreadcrumbsRoot = React49__namespace.forwardRef(
|
|
12015
11850
|
({ items, separator, ariaLabel = "Breadcrumb", className, children, ...props }, ref) => {
|
|
12016
11851
|
const lastIndex = items.length - 1;
|
|
12017
11852
|
const defaultSeparator = /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -12072,13 +11907,13 @@ var BreadcrumbsRoot = React48__namespace.forwardRef(
|
|
|
12072
11907
|
}
|
|
12073
11908
|
);
|
|
12074
11909
|
BreadcrumbsRoot.displayName = "Breadcrumbs.Root";
|
|
12075
|
-
var BreadcrumbsItem =
|
|
11910
|
+
var BreadcrumbsItem = React49__namespace.forwardRef(
|
|
12076
11911
|
({ className, children, ...props }, ref) => {
|
|
12077
11912
|
return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, className: cn("flex items-center", className), ...props, children });
|
|
12078
11913
|
}
|
|
12079
11914
|
);
|
|
12080
11915
|
BreadcrumbsItem.displayName = "Breadcrumbs.Item";
|
|
12081
|
-
var BreadcrumbsSeparator =
|
|
11916
|
+
var BreadcrumbsSeparator = React49__namespace.forwardRef(
|
|
12082
11917
|
({ className, children, ...props }, ref) => {
|
|
12083
11918
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12084
11919
|
"span",
|
|
@@ -12127,7 +11962,7 @@ function getVisiblePages(currentPage, totalPages, delta = 2) {
|
|
|
12127
11962
|
}
|
|
12128
11963
|
return rangeWithDots;
|
|
12129
11964
|
}
|
|
12130
|
-
var PaginationRoot =
|
|
11965
|
+
var PaginationRoot = React49__namespace.forwardRef(
|
|
12131
11966
|
({
|
|
12132
11967
|
currentPage,
|
|
12133
11968
|
totalPages,
|
|
@@ -12140,7 +11975,7 @@ var PaginationRoot = React48__namespace.forwardRef(
|
|
|
12140
11975
|
}, ref) => {
|
|
12141
11976
|
const safeTotalPages = Math.max(1, totalPages);
|
|
12142
11977
|
const safeCurrentPage = Math.min(Math.max(1, currentPage), safeTotalPages);
|
|
12143
|
-
const handlePageChange =
|
|
11978
|
+
const handlePageChange = React49__namespace.useCallback(
|
|
12144
11979
|
(page) => {
|
|
12145
11980
|
const clamped = Math.min(Math.max(page, 1), safeTotalPages);
|
|
12146
11981
|
if (clamped !== safeCurrentPage) {
|
|
@@ -12149,7 +11984,7 @@ var PaginationRoot = React48__namespace.forwardRef(
|
|
|
12149
11984
|
},
|
|
12150
11985
|
[safeCurrentPage, safeTotalPages, onPageChange]
|
|
12151
11986
|
);
|
|
12152
|
-
const visiblePages =
|
|
11987
|
+
const visiblePages = React49__namespace.useMemo(
|
|
12153
11988
|
() => getVisiblePages(safeCurrentPage, safeTotalPages, delta),
|
|
12154
11989
|
[safeCurrentPage, safeTotalPages, delta]
|
|
12155
11990
|
);
|
|
@@ -12168,7 +12003,7 @@ var PaginationRoot = React48__namespace.forwardRef(
|
|
|
12168
12003
|
onClick: () => handlePageChange(safeCurrentPage - 1)
|
|
12169
12004
|
}
|
|
12170
12005
|
),
|
|
12171
|
-
visiblePages.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
12006
|
+
visiblePages.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React49__namespace.Fragment, { children: page === "..." ? /* @__PURE__ */ jsxRuntime.jsx(PaginationEllipsis, {}) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
12172
12007
|
PaginationItem,
|
|
12173
12008
|
{
|
|
12174
12009
|
page,
|
|
@@ -12190,7 +12025,7 @@ var PaginationRoot = React48__namespace.forwardRef(
|
|
|
12190
12025
|
}
|
|
12191
12026
|
);
|
|
12192
12027
|
PaginationRoot.displayName = "Pagination.Root";
|
|
12193
|
-
var PaginationItem =
|
|
12028
|
+
var PaginationItem = React49__namespace.forwardRef(
|
|
12194
12029
|
({ className, page, isCurrent, disabled, onClick, ...props }, ref) => {
|
|
12195
12030
|
if (page === "...") {
|
|
12196
12031
|
return null;
|
|
@@ -12226,7 +12061,7 @@ var PaginationItem = React48__namespace.forwardRef(
|
|
|
12226
12061
|
}
|
|
12227
12062
|
);
|
|
12228
12063
|
PaginationItem.displayName = "Pagination.Item";
|
|
12229
|
-
var PaginationPrev =
|
|
12064
|
+
var PaginationPrev = React49__namespace.forwardRef(
|
|
12230
12065
|
({ className, disabled, onClick, ...props }, ref) => {
|
|
12231
12066
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
12232
12067
|
"button",
|
|
@@ -12260,7 +12095,7 @@ var PaginationPrev = React48__namespace.forwardRef(
|
|
|
12260
12095
|
}
|
|
12261
12096
|
);
|
|
12262
12097
|
PaginationPrev.displayName = "Pagination.Prev";
|
|
12263
|
-
var PaginationNext =
|
|
12098
|
+
var PaginationNext = React49__namespace.forwardRef(
|
|
12264
12099
|
({ className, disabled, onClick, ...props }, ref) => {
|
|
12265
12100
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
12266
12101
|
"button",
|
|
@@ -12294,7 +12129,7 @@ var PaginationNext = React48__namespace.forwardRef(
|
|
|
12294
12129
|
}
|
|
12295
12130
|
);
|
|
12296
12131
|
PaginationNext.displayName = "Pagination.Next";
|
|
12297
|
-
var PaginationEllipsis =
|
|
12132
|
+
var PaginationEllipsis = React49__namespace.forwardRef(
|
|
12298
12133
|
({ className, ...props }, ref) => {
|
|
12299
12134
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12300
12135
|
"span",
|
|
@@ -12322,7 +12157,7 @@ var Pagination = Object.assign(PaginationRoot, {
|
|
|
12322
12157
|
Next: PaginationNext,
|
|
12323
12158
|
Ellipsis: PaginationEllipsis
|
|
12324
12159
|
});
|
|
12325
|
-
var StepperRoot =
|
|
12160
|
+
var StepperRoot = React49__namespace.forwardRef(
|
|
12326
12161
|
({
|
|
12327
12162
|
steps,
|
|
12328
12163
|
activeStep,
|
|
@@ -12368,7 +12203,7 @@ var StepperRoot = React48__namespace.forwardRef(
|
|
|
12368
12203
|
}
|
|
12369
12204
|
);
|
|
12370
12205
|
StepperRoot.displayName = "Stepper.Root";
|
|
12371
|
-
var StepperItem =
|
|
12206
|
+
var StepperItem = React49__namespace.forwardRef(
|
|
12372
12207
|
({
|
|
12373
12208
|
className,
|
|
12374
12209
|
step,
|
|
@@ -12409,7 +12244,7 @@ var StepperItem = React48__namespace.forwardRef(
|
|
|
12409
12244
|
}
|
|
12410
12245
|
);
|
|
12411
12246
|
StepperItem.displayName = "Stepper.Item";
|
|
12412
|
-
var StepperIndicator =
|
|
12247
|
+
var StepperIndicator = React49__namespace.forwardRef(
|
|
12413
12248
|
({ className, index, isActive, isCompleted, disabled, icon, showNumber = true, ...props }, ref) => {
|
|
12414
12249
|
const baseClasses = cn(
|
|
12415
12250
|
NAVIGATION_TOKENS.sizes.sm.height,
|
|
@@ -12470,7 +12305,7 @@ var StepperIndicator = React48__namespace.forwardRef(
|
|
|
12470
12305
|
}
|
|
12471
12306
|
);
|
|
12472
12307
|
StepperIndicator.displayName = "Stepper.Indicator";
|
|
12473
|
-
var StepperLabel =
|
|
12308
|
+
var StepperLabel = React49__namespace.forwardRef(
|
|
12474
12309
|
({ className, label, description, isActive, ...props }, ref) => {
|
|
12475
12310
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
12476
12311
|
"div",
|
|
@@ -12507,7 +12342,7 @@ var StepperLabel = React48__namespace.forwardRef(
|
|
|
12507
12342
|
}
|
|
12508
12343
|
);
|
|
12509
12344
|
StepperLabel.displayName = "Stepper.Label";
|
|
12510
|
-
var StepperContent =
|
|
12345
|
+
var StepperContent = React49__namespace.forwardRef(
|
|
12511
12346
|
({ className, isActive, children, ...props }, ref) => {
|
|
12512
12347
|
if (!isActive) {
|
|
12513
12348
|
return null;
|
|
@@ -12531,13 +12366,13 @@ var Stepper = Object.assign(StepperRoot, {
|
|
|
12531
12366
|
Label: StepperLabel,
|
|
12532
12367
|
Content: StepperContent
|
|
12533
12368
|
});
|
|
12534
|
-
var EmptyStateAction =
|
|
12369
|
+
var EmptyStateAction = React49__namespace.forwardRef(
|
|
12535
12370
|
({ className, children, ...props }, ref) => {
|
|
12536
12371
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(EMPTY_STATE_TOKENS.spacing.action, className), ...props, children });
|
|
12537
12372
|
}
|
|
12538
12373
|
);
|
|
12539
12374
|
EmptyStateAction.displayName = "EmptyStateAction";
|
|
12540
|
-
var EmptyStateDescription =
|
|
12375
|
+
var EmptyStateDescription = React49__namespace.forwardRef(
|
|
12541
12376
|
({ className, children, ...props }, ref) => {
|
|
12542
12377
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12543
12378
|
"p",
|
|
@@ -12557,7 +12392,7 @@ var EmptyStateDescription = React48__namespace.forwardRef(
|
|
|
12557
12392
|
}
|
|
12558
12393
|
);
|
|
12559
12394
|
EmptyStateDescription.displayName = "EmptyStateDescription";
|
|
12560
|
-
var EmptyStateIcon =
|
|
12395
|
+
var EmptyStateIcon = React49__namespace.forwardRef(
|
|
12561
12396
|
({ children, size = "md", className, ...props }, ref) => {
|
|
12562
12397
|
const iconSizeClass = EMPTY_STATE_TOKENS.icon.size[size];
|
|
12563
12398
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -12572,7 +12407,7 @@ var EmptyStateIcon = React48__namespace.forwardRef(
|
|
|
12572
12407
|
}
|
|
12573
12408
|
);
|
|
12574
12409
|
EmptyStateIcon.displayName = "EmptyStateIcon";
|
|
12575
|
-
var EmptyStateTitle =
|
|
12410
|
+
var EmptyStateTitle = React49__namespace.forwardRef(
|
|
12576
12411
|
({ className, children, ...props }, ref) => {
|
|
12577
12412
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12578
12413
|
"h3",
|
|
@@ -12591,9 +12426,9 @@ var EmptyStateTitle = React48__namespace.forwardRef(
|
|
|
12591
12426
|
}
|
|
12592
12427
|
);
|
|
12593
12428
|
EmptyStateTitle.displayName = "EmptyStateTitle";
|
|
12594
|
-
var EmptyState =
|
|
12429
|
+
var EmptyState = React49__namespace.forwardRef(
|
|
12595
12430
|
({ id, className, children, ...props }, ref) => {
|
|
12596
|
-
const generatedId =
|
|
12431
|
+
const generatedId = React49__namespace.useId();
|
|
12597
12432
|
const emptyStateId = id || `empty-state-${generatedId}`;
|
|
12598
12433
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12599
12434
|
Surface,
|
|
@@ -12615,13 +12450,13 @@ EmptyState.Icon = EmptyStateIcon;
|
|
|
12615
12450
|
EmptyState.Title = EmptyStateTitle;
|
|
12616
12451
|
EmptyState.Description = EmptyStateDescription;
|
|
12617
12452
|
EmptyState.Action = EmptyStateAction;
|
|
12618
|
-
var TableBody =
|
|
12453
|
+
var TableBody = React49__namespace.forwardRef(
|
|
12619
12454
|
({ className, ...props }, ref) => {
|
|
12620
12455
|
return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: cn(className), role: "rowgroup", ...props });
|
|
12621
12456
|
}
|
|
12622
12457
|
);
|
|
12623
12458
|
TableBody.displayName = "TableBody";
|
|
12624
|
-
var TableCell =
|
|
12459
|
+
var TableCell = React49__namespace.forwardRef(
|
|
12625
12460
|
({ align = "left", size = "md", className, ...props }, ref) => {
|
|
12626
12461
|
const paddingClass = TABLE_TOKENS.padding.cell[size];
|
|
12627
12462
|
const typographyClass = TABLE_TOKENS.typography.cell.fontSize;
|
|
@@ -12649,7 +12484,7 @@ var TableCell = React48__namespace.forwardRef(
|
|
|
12649
12484
|
}
|
|
12650
12485
|
);
|
|
12651
12486
|
TableCell.displayName = "TableCell";
|
|
12652
|
-
var TableEmpty =
|
|
12487
|
+
var TableEmpty = React49__namespace.forwardRef(
|
|
12653
12488
|
({ colSpan, message = "No data available", className, ...props }, ref) => {
|
|
12654
12489
|
return /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn(className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: TABLE_TOKENS.empty.padding, children: /* @__PURE__ */ jsxRuntime.jsxs(EmptyState, { children: [
|
|
12655
12490
|
/* @__PURE__ */ jsxRuntime.jsx(EmptyStateIcon, { children: "\u{1F4ED}" }),
|
|
@@ -12658,7 +12493,7 @@ var TableEmpty = React48__namespace.forwardRef(
|
|
|
12658
12493
|
}
|
|
12659
12494
|
);
|
|
12660
12495
|
TableEmpty.displayName = "TableEmpty";
|
|
12661
|
-
var TableExpandableContent =
|
|
12496
|
+
var TableExpandableContent = React49__namespace.forwardRef(
|
|
12662
12497
|
({ colSpan, expanded, children, className, ...props }, ref) => {
|
|
12663
12498
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12664
12499
|
"td",
|
|
@@ -12687,7 +12522,7 @@ var TableExpandableContent = React48__namespace.forwardRef(
|
|
|
12687
12522
|
}
|
|
12688
12523
|
);
|
|
12689
12524
|
TableExpandableContent.displayName = "TableExpandableContent";
|
|
12690
|
-
var TableSortIcon =
|
|
12525
|
+
var TableSortIcon = React49__namespace.forwardRef(
|
|
12691
12526
|
({ direction, className, ...props }, ref) => {
|
|
12692
12527
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12693
12528
|
"span",
|
|
@@ -12724,10 +12559,10 @@ var TableSortIcon = React48__namespace.forwardRef(
|
|
|
12724
12559
|
}
|
|
12725
12560
|
);
|
|
12726
12561
|
TableSortIcon.displayName = "TableSortIcon";
|
|
12727
|
-
var TableHead =
|
|
12562
|
+
var TableHead = React49__namespace.forwardRef(
|
|
12728
12563
|
({ align = "left", sortable = false, columnKey, size = "md", className, children, ...props }, ref) => {
|
|
12729
12564
|
const { sortState, setSortState } = useTableContext();
|
|
12730
|
-
const handleSort =
|
|
12565
|
+
const handleSort = React49__namespace.useCallback(() => {
|
|
12731
12566
|
if (!sortable || !columnKey) return;
|
|
12732
12567
|
const currentDirection = sortState.column === columnKey ? sortState.direction : null;
|
|
12733
12568
|
let nextDirection = null;
|
|
@@ -12786,7 +12621,7 @@ var TableHead = React48__namespace.forwardRef(
|
|
|
12786
12621
|
}
|
|
12787
12622
|
);
|
|
12788
12623
|
TableHead.displayName = "TableHead";
|
|
12789
|
-
var TableHeader =
|
|
12624
|
+
var TableHeader = React49__namespace.forwardRef(
|
|
12790
12625
|
({ sticky = false, className, ...props }, ref) => {
|
|
12791
12626
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12792
12627
|
"thead",
|
|
@@ -12800,13 +12635,13 @@ var TableHeader = React48__namespace.forwardRef(
|
|
|
12800
12635
|
}
|
|
12801
12636
|
);
|
|
12802
12637
|
TableHeader.displayName = "TableHeader";
|
|
12803
|
-
var TableLoadingState =
|
|
12638
|
+
var TableLoadingState = React49__namespace.forwardRef(
|
|
12804
12639
|
({ colSpan, rows = 5, className, ...props }, ref) => {
|
|
12805
12640
|
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref: index === 0 ? ref : void 0, className: cn(className), ...props, children: Array.from({ length: colSpan }).map((_2, cellIndex) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: TABLE_TOKENS.loading.cellPadding, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "text", className: TABLE_TOKENS.loading.skeletonWidth }) }, cellIndex)) }, index)) });
|
|
12806
12641
|
}
|
|
12807
12642
|
);
|
|
12808
12643
|
TableLoadingState.displayName = "TableLoadingState";
|
|
12809
|
-
var TableRow =
|
|
12644
|
+
var TableRow = React49__namespace.forwardRef(
|
|
12810
12645
|
({
|
|
12811
12646
|
selected = false,
|
|
12812
12647
|
expandable = false,
|
|
@@ -12835,9 +12670,9 @@ var TableRow = React48__namespace.forwardRef(
|
|
|
12835
12670
|
}
|
|
12836
12671
|
);
|
|
12837
12672
|
TableRow.displayName = "TableRow";
|
|
12838
|
-
var TableContext =
|
|
12673
|
+
var TableContext = React49__namespace.createContext(null);
|
|
12839
12674
|
function useTableContext() {
|
|
12840
|
-
const context =
|
|
12675
|
+
const context = React49__namespace.useContext(TableContext);
|
|
12841
12676
|
if (!context) {
|
|
12842
12677
|
throw new Error("Table components must be used within Table.Root");
|
|
12843
12678
|
}
|
|
@@ -12858,12 +12693,12 @@ function TableRoot({
|
|
|
12858
12693
|
children,
|
|
12859
12694
|
...props
|
|
12860
12695
|
}) {
|
|
12861
|
-
const [sortState, setSortState] =
|
|
12696
|
+
const [sortState, setSortState] = React49__namespace.useState({
|
|
12862
12697
|
column: null,
|
|
12863
12698
|
direction: null
|
|
12864
12699
|
});
|
|
12865
|
-
const [expandedRows, setExpandedRows] =
|
|
12866
|
-
const toggleRow =
|
|
12700
|
+
const [expandedRows, setExpandedRows] = React49__namespace.useState(/* @__PURE__ */ new Set());
|
|
12701
|
+
const toggleRow = React49__namespace.useCallback((key) => {
|
|
12867
12702
|
setExpandedRows((prev) => {
|
|
12868
12703
|
const next = new Set(prev);
|
|
12869
12704
|
if (next.has(key)) {
|
|
@@ -12874,7 +12709,7 @@ function TableRoot({
|
|
|
12874
12709
|
return next;
|
|
12875
12710
|
});
|
|
12876
12711
|
}, []);
|
|
12877
|
-
const contextValue =
|
|
12712
|
+
const contextValue = React49__namespace.useMemo(
|
|
12878
12713
|
() => ({
|
|
12879
12714
|
sortState,
|
|
12880
12715
|
setSortState,
|
|
@@ -12938,7 +12773,7 @@ var iconVariants = classVarianceAuthority.cva("shrink-0", {
|
|
|
12938
12773
|
stroke: "normal"
|
|
12939
12774
|
}
|
|
12940
12775
|
});
|
|
12941
|
-
var Icon2 =
|
|
12776
|
+
var Icon2 = React49__namespace.forwardRef(
|
|
12942
12777
|
({ name, size, color, stroke, className, asChild = false, ...props }, ref) => {
|
|
12943
12778
|
const IconComponent = ICONS_MAP[name] || ICONS_MAP.error;
|
|
12944
12779
|
if (!IconComponent) {
|
|
@@ -12968,1773 +12803,12 @@ var Icon2 = React48__namespace.forwardRef(
|
|
|
12968
12803
|
);
|
|
12969
12804
|
Icon2.displayName = "Icon";
|
|
12970
12805
|
|
|
12971
|
-
// src/COMPOSITION/motion/animation/tas.ts
|
|
12972
|
-
function shouldReduceMotion(override) {
|
|
12973
|
-
if (override === true) return true;
|
|
12974
|
-
if (override === false) return false;
|
|
12975
|
-
if (typeof window === "undefined") return false;
|
|
12976
|
-
try {
|
|
12977
|
-
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
12978
|
-
return mediaQuery.matches;
|
|
12979
|
-
} catch {
|
|
12980
|
-
return false;
|
|
12981
|
-
}
|
|
12982
|
-
}
|
|
12983
|
-
|
|
12984
|
-
// src/COMPOSITION/motion/animation/presets.ts
|
|
12985
|
-
var fadePresets = {
|
|
12986
|
-
/**
|
|
12987
|
-
* Fade in animation
|
|
12988
|
-
*/
|
|
12989
|
-
fadeIn: (config) => {
|
|
12990
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
12991
|
-
return {
|
|
12992
|
-
className: reduceMotion ? "" : "tm-motion-fade-in"
|
|
12993
|
-
};
|
|
12994
|
-
},
|
|
12995
|
-
/**
|
|
12996
|
-
* Fade out animation
|
|
12997
|
-
*/
|
|
12998
|
-
fadeOut: (config) => {
|
|
12999
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13000
|
-
return {
|
|
13001
|
-
className: reduceMotion ? "" : "tm-motion-fade-out"
|
|
13002
|
-
};
|
|
13003
|
-
},
|
|
13004
|
-
/**
|
|
13005
|
-
* Fade in from top
|
|
13006
|
-
*/
|
|
13007
|
-
fadeInUp: (config) => {
|
|
13008
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13009
|
-
return {
|
|
13010
|
-
className: reduceMotion ? "" : "tm-motion-fade-slide-up"
|
|
13011
|
-
};
|
|
13012
|
-
},
|
|
13013
|
-
/**
|
|
13014
|
-
* Fade in from bottom
|
|
13015
|
-
*/
|
|
13016
|
-
fadeInDown: (config) => {
|
|
13017
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13018
|
-
return {
|
|
13019
|
-
className: reduceMotion ? "" : "tm-motion-fade-slide-down"
|
|
13020
|
-
};
|
|
13021
|
-
},
|
|
13022
|
-
/**
|
|
13023
|
-
* Fade in from left
|
|
13024
|
-
*/
|
|
13025
|
-
fadeInLeft: (config) => {
|
|
13026
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13027
|
-
return {
|
|
13028
|
-
className: reduceMotion ? "" : "tm-motion-fade-slide-left"
|
|
13029
|
-
};
|
|
13030
|
-
},
|
|
13031
|
-
/**
|
|
13032
|
-
* Fade in from right
|
|
13033
|
-
*/
|
|
13034
|
-
fadeInRight: (config) => {
|
|
13035
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13036
|
-
return {
|
|
13037
|
-
className: reduceMotion ? "" : "tm-motion-fade-slide-right"
|
|
13038
|
-
};
|
|
13039
|
-
}
|
|
13040
|
-
};
|
|
13041
|
-
var slidePresets = {
|
|
13042
|
-
/**
|
|
13043
|
-
* Slide in from bottom
|
|
13044
|
-
*/
|
|
13045
|
-
slideInUp: (config) => {
|
|
13046
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13047
|
-
return {
|
|
13048
|
-
className: reduceMotion ? "" : "tm-motion-slide-up"
|
|
13049
|
-
};
|
|
13050
|
-
},
|
|
13051
|
-
/**
|
|
13052
|
-
* Slide in from top
|
|
13053
|
-
*/
|
|
13054
|
-
slideInDown: (config) => {
|
|
13055
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13056
|
-
return {
|
|
13057
|
-
className: reduceMotion ? "" : "tm-motion-slide-down"
|
|
13058
|
-
};
|
|
13059
|
-
},
|
|
13060
|
-
/**
|
|
13061
|
-
* Slide in from left
|
|
13062
|
-
*/
|
|
13063
|
-
slideInLeft: (config) => {
|
|
13064
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13065
|
-
return {
|
|
13066
|
-
className: reduceMotion ? "" : "tm-motion-slide-left"
|
|
13067
|
-
};
|
|
13068
|
-
},
|
|
13069
|
-
/**
|
|
13070
|
-
* Slide in from right
|
|
13071
|
-
*/
|
|
13072
|
-
slideInRight: (config) => {
|
|
13073
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13074
|
-
return {
|
|
13075
|
-
className: reduceMotion ? "" : "tm-motion-slide-right"
|
|
13076
|
-
};
|
|
13077
|
-
},
|
|
13078
|
-
/**
|
|
13079
|
-
* Slide out to top
|
|
13080
|
-
*/
|
|
13081
|
-
slideOutUp: (config) => {
|
|
13082
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13083
|
-
return {
|
|
13084
|
-
className: reduceMotion ? "" : "tm-motion-fade-slide-up-out"
|
|
13085
|
-
};
|
|
13086
|
-
},
|
|
13087
|
-
/**
|
|
13088
|
-
* Slide out to bottom
|
|
13089
|
-
*/
|
|
13090
|
-
slideOutDown: (config) => {
|
|
13091
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13092
|
-
return {
|
|
13093
|
-
className: reduceMotion ? "" : "tm-motion-fade-slide-down-out"
|
|
13094
|
-
};
|
|
13095
|
-
},
|
|
13096
|
-
/**
|
|
13097
|
-
* Slide out to left
|
|
13098
|
-
*/
|
|
13099
|
-
slideOutLeft: (config) => {
|
|
13100
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13101
|
-
return {
|
|
13102
|
-
className: reduceMotion ? "" : "tm-motion-fade-slide-left-out"
|
|
13103
|
-
};
|
|
13104
|
-
},
|
|
13105
|
-
/**
|
|
13106
|
-
* Slide out to right
|
|
13107
|
-
*/
|
|
13108
|
-
slideOutRight: (config) => {
|
|
13109
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13110
|
-
return {
|
|
13111
|
-
className: reduceMotion ? "" : "tm-motion-fade-slide-right-out"
|
|
13112
|
-
};
|
|
13113
|
-
}
|
|
13114
|
-
};
|
|
13115
|
-
var scalePresets = {
|
|
13116
|
-
/**
|
|
13117
|
-
* Scale in animation
|
|
13118
|
-
*/
|
|
13119
|
-
scaleIn: (config) => {
|
|
13120
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13121
|
-
return {
|
|
13122
|
-
className: reduceMotion ? "" : "tm-motion-scale-in"
|
|
13123
|
-
};
|
|
13124
|
-
},
|
|
13125
|
-
/**
|
|
13126
|
-
* Scale out animation
|
|
13127
|
-
*/
|
|
13128
|
-
scaleOut: (config) => {
|
|
13129
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13130
|
-
return {
|
|
13131
|
-
className: reduceMotion ? "" : "tm-motion-scale-out"
|
|
13132
|
-
};
|
|
13133
|
-
},
|
|
13134
|
-
/**
|
|
13135
|
-
* Scale up on hover
|
|
13136
|
-
*/
|
|
13137
|
-
scaleUp: (config) => {
|
|
13138
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13139
|
-
return {
|
|
13140
|
-
className: reduceMotion ? "" : "tm-motion-hover-scale"
|
|
13141
|
-
};
|
|
13142
|
-
},
|
|
13143
|
-
/**
|
|
13144
|
-
* Scale down on tap
|
|
13145
|
-
*/
|
|
13146
|
-
scaleDown: (config) => {
|
|
13147
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13148
|
-
return {
|
|
13149
|
-
className: reduceMotion ? "" : "tm-motion-tap-scale"
|
|
13150
|
-
};
|
|
13151
|
-
}
|
|
13152
|
-
};
|
|
13153
|
-
var hoverPresets = {
|
|
13154
|
-
/**
|
|
13155
|
-
* Lift up on hover (combines scale and y translation)
|
|
13156
|
-
*/
|
|
13157
|
-
hoverLift: (config) => {
|
|
13158
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13159
|
-
return {
|
|
13160
|
-
className: reduceMotion ? "" : "tm-motion-hover-lift"
|
|
13161
|
-
};
|
|
13162
|
-
},
|
|
13163
|
-
/**
|
|
13164
|
-
* Scale up on hover
|
|
13165
|
-
*/
|
|
13166
|
-
hoverScale: (config) => {
|
|
13167
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13168
|
-
return {
|
|
13169
|
-
className: reduceMotion ? "" : "tm-motion-hover-scale"
|
|
13170
|
-
};
|
|
13171
|
-
},
|
|
13172
|
-
/**
|
|
13173
|
-
* Scale down on tap
|
|
13174
|
-
*/
|
|
13175
|
-
tapScale: (config) => {
|
|
13176
|
-
const reduceMotion = shouldReduceMotion(config?.reducedMotion);
|
|
13177
|
-
return {
|
|
13178
|
-
className: reduceMotion ? "" : "tm-motion-tap-scale"
|
|
13179
|
-
};
|
|
13180
|
-
}
|
|
13181
|
-
};
|
|
13182
|
-
|
|
13183
|
-
// src/COMPOSITION/motion/animation/utils.ts
|
|
13184
|
-
function resolveAnimationPreset(preset) {
|
|
13185
|
-
if (!preset) return void 0;
|
|
13186
|
-
if (typeof preset === "string") ; else {
|
|
13187
|
-
const baseValue = getBaseValue(preset);
|
|
13188
|
-
if (baseValue && typeof baseValue === "string") {
|
|
13189
|
-
return resolveAnimationPreset(baseValue);
|
|
13190
|
-
}
|
|
13191
|
-
return void 0;
|
|
13192
|
-
}
|
|
13193
|
-
switch (preset) {
|
|
13194
|
-
case "fadeIn":
|
|
13195
|
-
return fadePresets.fadeIn();
|
|
13196
|
-
case "fadeInUp":
|
|
13197
|
-
return fadePresets.fadeInUp();
|
|
13198
|
-
case "fadeInDown":
|
|
13199
|
-
return fadePresets.fadeInDown();
|
|
13200
|
-
case "fadeInLeft":
|
|
13201
|
-
return fadePresets.fadeInLeft();
|
|
13202
|
-
case "fadeInRight":
|
|
13203
|
-
return fadePresets.fadeInRight();
|
|
13204
|
-
case "slideInUp":
|
|
13205
|
-
return slidePresets.slideInUp();
|
|
13206
|
-
case "slideInDown":
|
|
13207
|
-
return slidePresets.slideInDown();
|
|
13208
|
-
case "slideInLeft":
|
|
13209
|
-
return slidePresets.slideInLeft();
|
|
13210
|
-
case "slideInRight":
|
|
13211
|
-
return slidePresets.slideInRight();
|
|
13212
|
-
case "scaleIn":
|
|
13213
|
-
return scalePresets.scaleIn();
|
|
13214
|
-
default:
|
|
13215
|
-
return void 0;
|
|
13216
|
-
}
|
|
13217
|
-
}
|
|
13218
|
-
function resolveHoverAnimationPreset(preset) {
|
|
13219
|
-
if (!preset) return void 0;
|
|
13220
|
-
if (typeof preset === "object") {
|
|
13221
|
-
return preset;
|
|
13222
|
-
}
|
|
13223
|
-
switch (preset) {
|
|
13224
|
-
case "hoverLift":
|
|
13225
|
-
return hoverPresets.hoverLift();
|
|
13226
|
-
case "hoverScale":
|
|
13227
|
-
return hoverPresets.hoverScale();
|
|
13228
|
-
case "tapScale":
|
|
13229
|
-
return hoverPresets.tapScale();
|
|
13230
|
-
default:
|
|
13231
|
-
return void 0;
|
|
13232
|
-
}
|
|
13233
|
-
}
|
|
13234
|
-
function resolveComponentAnimations(config) {
|
|
13235
|
-
if (!config) return {};
|
|
13236
|
-
const animation = resolveAnimationPreset(config.animation);
|
|
13237
|
-
const hoverAnimation = resolveHoverAnimationPreset(config.hoverAnimation);
|
|
13238
|
-
const customProps = config.animationProps || {};
|
|
13239
|
-
return {
|
|
13240
|
-
...animation,
|
|
13241
|
-
...hoverAnimation,
|
|
13242
|
-
...customProps
|
|
13243
|
-
};
|
|
13244
|
-
}
|
|
13245
|
-
var cardBaseVariants = classVarianceAuthority.cva(
|
|
13246
|
-
// Base classes - surface, border, radius, shadow, motion
|
|
13247
|
-
`${DOMAIN_TOKENS.surface.bg.default} ${DOMAIN_TOKENS.surface.border.default} ${DOMAIN_TOKENS.surface.radius.default} ${DOMAIN_TOKENS.surface.shadow.default} ${DOMAIN_TOKENS.surface.bg.hover} ${DOMAIN_TOKENS.surface.border.hover} ${DOMAIN_TOKENS.surface.elevation.hover} ${DOMAIN_TOKENS.motion.hover.transition} overflow-hidden`,
|
|
13248
|
-
{
|
|
13249
|
-
variants: {
|
|
13250
|
-
size: {
|
|
13251
|
-
default: `${DOMAIN_TOKENS.layout.padding.default} ${DOMAIN_TOKENS.layout.gap.default}`,
|
|
13252
|
-
compact: `${DOMAIN_TOKENS.layout.padding.compact} ${DOMAIN_TOKENS.layout.gap.compact}`
|
|
13253
|
-
},
|
|
13254
|
-
variant: {
|
|
13255
|
-
default: "",
|
|
13256
|
-
featured: `${DOMAIN_TOKENS.badges.surface.featured}`
|
|
13257
|
-
}
|
|
13258
|
-
},
|
|
13259
|
-
defaultVariants: {
|
|
13260
|
-
size: "default",
|
|
13261
|
-
variant: "default"
|
|
13262
|
-
}
|
|
13263
|
-
}
|
|
13264
|
-
);
|
|
13265
|
-
var cardBaseImageVariants = classVarianceAuthority.cva(
|
|
13266
|
-
// Base classes - aspect ratio, radius, overflow
|
|
13267
|
-
`${DOMAIN_TOKENS.image.aspectRatio} ${DOMAIN_TOKENS.image.radius} overflow-hidden`,
|
|
13268
|
-
{
|
|
13269
|
-
variants: {
|
|
13270
|
-
size: {
|
|
13271
|
-
default: "",
|
|
13272
|
-
compact: ""
|
|
13273
|
-
}
|
|
13274
|
-
},
|
|
13275
|
-
defaultVariants: {
|
|
13276
|
-
size: "default"
|
|
13277
|
-
}
|
|
13278
|
-
}
|
|
13279
|
-
);
|
|
13280
|
-
var cardBaseContentVariants = classVarianceAuthority.cva(
|
|
13281
|
-
// Base classes - flex column layout
|
|
13282
|
-
"flex flex-col",
|
|
13283
|
-
{
|
|
13284
|
-
variants: {
|
|
13285
|
-
size: {
|
|
13286
|
-
default: "",
|
|
13287
|
-
compact: ""
|
|
13288
|
-
}
|
|
13289
|
-
},
|
|
13290
|
-
defaultVariants: {
|
|
13291
|
-
size: "default"
|
|
13292
|
-
}
|
|
13293
|
-
}
|
|
13294
|
-
);
|
|
13295
|
-
var cardBaseFooterVariants = classVarianceAuthority.cva(
|
|
13296
|
-
// Base classes - flex layout
|
|
13297
|
-
"flex",
|
|
13298
|
-
{
|
|
13299
|
-
variants: {
|
|
13300
|
-
size: {
|
|
13301
|
-
default: "",
|
|
13302
|
-
compact: ""
|
|
13303
|
-
}
|
|
13304
|
-
},
|
|
13305
|
-
defaultVariants: {
|
|
13306
|
-
size: "default"
|
|
13307
|
-
}
|
|
13308
|
-
}
|
|
13309
|
-
);
|
|
13310
|
-
var CardBase = React48__namespace.forwardRef(
|
|
13311
|
-
({ size = "default", variant = "default", className, children, ...props }, ref) => {
|
|
13312
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(cardBaseVariants({ size, variant }), className), ...props, children });
|
|
13313
|
-
}
|
|
13314
|
-
);
|
|
13315
|
-
CardBase.displayName = "CardBase";
|
|
13316
|
-
var CardBaseImageWrapper = React48__namespace.forwardRef(
|
|
13317
|
-
({ size = "default", className, children, ...props }, ref) => {
|
|
13318
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(cardBaseImageVariants({ size }), className), ...props, children });
|
|
13319
|
-
}
|
|
13320
|
-
);
|
|
13321
|
-
CardBaseImageWrapper.displayName = "CardBaseImageWrapper";
|
|
13322
|
-
var CardBaseContentWrapper = React48__namespace.forwardRef(
|
|
13323
|
-
({ size = "default", className, children, ...props }, ref) => {
|
|
13324
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
13325
|
-
Stack,
|
|
13326
|
-
{
|
|
13327
|
-
ref,
|
|
13328
|
-
direction: "vertical",
|
|
13329
|
-
className: cn(cardBaseContentVariants({ size }), className),
|
|
13330
|
-
...props,
|
|
13331
|
-
children
|
|
13332
|
-
}
|
|
13333
|
-
);
|
|
13334
|
-
}
|
|
13335
|
-
);
|
|
13336
|
-
CardBaseContentWrapper.displayName = "CardBaseContentWrapper";
|
|
13337
|
-
var CardBaseFooterWrapper = React48__namespace.forwardRef(
|
|
13338
|
-
({ size = "default", className, children, ...props }, ref) => {
|
|
13339
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(cardBaseFooterVariants({ size }), className), ...props, children });
|
|
13340
|
-
}
|
|
13341
|
-
);
|
|
13342
|
-
CardBaseFooterWrapper.displayName = "CardBaseFooterWrapper";
|
|
13343
|
-
var linkVariants = classVarianceAuthority.cva(
|
|
13344
|
-
"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
13345
|
-
{
|
|
13346
|
-
variants: {
|
|
13347
|
-
variant: {
|
|
13348
|
-
primary: "text-primary hover:text-primary/80 underline-offset-4 hover:underline",
|
|
13349
|
-
secondary: "text-secondary-foreground underline-offset-4 hover:underline",
|
|
13350
|
-
accent: "text-accent-foreground hover:text-accent-foreground/80 underline-offset-4 hover:underline",
|
|
13351
|
-
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground rounded-md px-md py-sm",
|
|
13352
|
-
ghost: "text-foreground hover:text-accent-foreground hover:bg-accent rounded-md px-sm py-sm",
|
|
13353
|
-
link: "text-primary underline-offset-4 hover:underline",
|
|
13354
|
-
destructive: "text-destructive hover:text-destructive/80 underline-offset-4 hover:underline"
|
|
13355
|
-
},
|
|
13356
|
-
size: {
|
|
13357
|
-
xs: "h-7 text-xs px-xs py-xs",
|
|
13358
|
-
sm: "h-8 text-xs px-sm py-xs",
|
|
13359
|
-
md: "h-9 text-sm px-md py-sm",
|
|
13360
|
-
lg: "h-10 text-sm px-lg py-sm",
|
|
13361
|
-
xl: "h-11 text-base px-xl py-md"
|
|
13362
|
-
}
|
|
13363
|
-
},
|
|
13364
|
-
defaultVariants: {
|
|
13365
|
-
variant: "link",
|
|
13366
|
-
size: "md"
|
|
13367
|
-
}
|
|
13368
|
-
}
|
|
13369
|
-
);
|
|
13370
|
-
var Link = React48__namespace.forwardRef(
|
|
13371
|
-
({ className, variant, size, asChild = false, leftIcon, rightIcon, children, ...props }, ref) => {
|
|
13372
|
-
const Comp = asChild ? reactSlot.Slot : "a";
|
|
13373
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { className: cn(linkVariants({ variant, size, className })), ref, ...props, children: [
|
|
13374
|
-
leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center", children: leftIcon }),
|
|
13375
|
-
children,
|
|
13376
|
-
rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center", children: rightIcon })
|
|
13377
|
-
] });
|
|
13378
|
-
}
|
|
13379
|
-
);
|
|
13380
|
-
Link.displayName = "Link";
|
|
13381
|
-
var eventCardVariants = classVarianceAuthority.cva(
|
|
13382
|
-
// Base classes - surface, border, radius, shadow, motion from tokens
|
|
13383
|
-
`${DOMAIN_TOKENS.surface.bg.default} ${DOMAIN_TOKENS.surface.border.default} ${DOMAIN_TOKENS.surface.radius.default} ${DOMAIN_TOKENS.surface.shadow.default} ${DOMAIN_TOKENS.surface.bg.hover} ${DOMAIN_TOKENS.surface.border.hover} ${DOMAIN_TOKENS.surface.elevation.hover} ${DOMAIN_TOKENS.motion.hover.transition} overflow-hidden`,
|
|
13384
|
-
{
|
|
13385
|
-
variants: {
|
|
13386
|
-
size: {
|
|
13387
|
-
default: `${CARD_TOKENS.size.md.padding} ${DOMAIN_TOKENS.layout.gap.default}`,
|
|
13388
|
-
compact: `${CARD_TOKENS.size.sm.padding} ${DOMAIN_TOKENS.layout.gap.compact}`
|
|
13389
|
-
},
|
|
13390
|
-
layout: {
|
|
13391
|
-
vertical: "flex flex-col"
|
|
13392
|
-
},
|
|
13393
|
-
variant: {
|
|
13394
|
-
default: "",
|
|
13395
|
-
featured: `${DOMAIN_TOKENS.badges.surface.featured}`
|
|
13396
|
-
}
|
|
13397
|
-
},
|
|
13398
|
-
defaultVariants: {
|
|
13399
|
-
size: "default",
|
|
13400
|
-
layout: "vertical",
|
|
13401
|
-
variant: "default"
|
|
13402
|
-
}
|
|
13403
|
-
}
|
|
13404
|
-
);
|
|
13405
|
-
var eventCardBadgeVariants = classVarianceAuthority.cva(
|
|
13406
|
-
// Base classes - absolute positioning, z-index
|
|
13407
|
-
"absolute z-10",
|
|
13408
|
-
{
|
|
13409
|
-
variants: {
|
|
13410
|
-
size: {
|
|
13411
|
-
default: DOMAIN_TOKENS.badges.position.default,
|
|
13412
|
-
compact: DOMAIN_TOKENS.badges.position.compact
|
|
13413
|
-
}
|
|
13414
|
-
},
|
|
13415
|
-
defaultVariants: {
|
|
13416
|
-
size: "default"
|
|
13417
|
-
}
|
|
13418
|
-
}
|
|
13419
|
-
);
|
|
13420
|
-
var eventCardBadgeSurfaceVariants = classVarianceAuthority.cva(
|
|
13421
|
-
// Base classes - flex layout, items center, badge styling from tokens
|
|
13422
|
-
`inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
|
|
13423
|
-
{
|
|
13424
|
-
variants: {
|
|
13425
|
-
variant: {
|
|
13426
|
-
default: DOMAIN_TOKENS.badges.surface.default,
|
|
13427
|
-
featured: DOMAIN_TOKENS.badges.surface.featured
|
|
13428
|
-
}
|
|
13429
|
-
},
|
|
13430
|
-
defaultVariants: {
|
|
13431
|
-
variant: "featured"
|
|
13432
|
-
}
|
|
13433
|
-
}
|
|
13434
|
-
);
|
|
13435
|
-
var eventCardMetadataVariants = classVarianceAuthority.cva(
|
|
13436
|
-
// Base classes - flex column, metadata spacing from tokens
|
|
13437
|
-
`flex flex-col ${DOMAIN_TOKENS.metadata.spacing.vertical}`,
|
|
13438
|
-
{
|
|
13439
|
-
variants: {
|
|
13440
|
-
size: {
|
|
13441
|
-
default: "",
|
|
13442
|
-
compact: ""
|
|
13443
|
-
}
|
|
13444
|
-
},
|
|
13445
|
-
defaultVariants: {
|
|
13446
|
-
size: "default"
|
|
13447
|
-
}
|
|
13448
|
-
}
|
|
13449
|
-
);
|
|
13450
|
-
var eventCardMetadataItemVariants = classVarianceAuthority.cva(
|
|
13451
|
-
// Base classes - flex items center, metadata spacing and text from tokens
|
|
13452
|
-
`flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.xs}`,
|
|
13453
|
-
{
|
|
13454
|
-
variants: {
|
|
13455
|
-
size: {
|
|
13456
|
-
default: "",
|
|
13457
|
-
compact: ""
|
|
13458
|
-
}
|
|
13459
|
-
},
|
|
13460
|
-
defaultVariants: {
|
|
13461
|
-
size: "default"
|
|
13462
|
-
}
|
|
13463
|
-
}
|
|
13464
|
-
);
|
|
13465
|
-
var eventCardMetadataIconVariants = classVarianceAuthority.cva(
|
|
13466
|
-
// Base classes - icon size and color from tokens
|
|
13467
|
-
`${DOMAIN_TOKENS.metadata.icon.sizeSm} ${DOMAIN_TOKENS.metadata.icon.default}`,
|
|
13468
|
-
{
|
|
13469
|
-
variants: {
|
|
13470
|
-
size: {
|
|
13471
|
-
default: "",
|
|
13472
|
-
compact: ""
|
|
13473
|
-
}
|
|
13474
|
-
},
|
|
13475
|
-
defaultVariants: {
|
|
13476
|
-
size: "default"
|
|
13477
|
-
}
|
|
13478
|
-
}
|
|
13479
|
-
);
|
|
13480
|
-
var eventCardFooterVariants = classVarianceAuthority.cva(
|
|
13481
|
-
// Base classes - border top, spacing from tokens
|
|
13482
|
-
"border-t border-border",
|
|
13483
|
-
{
|
|
13484
|
-
variants: {
|
|
13485
|
-
size: {
|
|
13486
|
-
default: DOMAIN_TOKENS.spacing.footer.paddingTopDefault,
|
|
13487
|
-
compact: DOMAIN_TOKENS.spacing.footer.paddingTopCompact
|
|
13488
|
-
}
|
|
13489
|
-
},
|
|
13490
|
-
defaultVariants: {
|
|
13491
|
-
size: "default"
|
|
13492
|
-
}
|
|
13493
|
-
}
|
|
13494
|
-
);
|
|
13495
|
-
var eventCardTicketButtonVariants = classVarianceAuthority.cva(
|
|
13496
|
-
// Base classes - flex layout, badge gradient, motion from tokens
|
|
13497
|
-
`inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} ${TEXT_TOKENS.fontWeight.semibold} transform`,
|
|
13498
|
-
{
|
|
13499
|
-
variants: {
|
|
13500
|
-
size: {
|
|
13501
|
-
default: DOMAIN_TOKENS.spacing.button.paddingDefault,
|
|
13502
|
-
compact: DOMAIN_TOKENS.spacing.button.paddingCompact
|
|
13503
|
-
}
|
|
13504
|
-
},
|
|
13505
|
-
defaultVariants: {
|
|
13506
|
-
size: "default"
|
|
13507
|
-
}
|
|
13508
|
-
}
|
|
13509
|
-
);
|
|
13510
|
-
var eventCardTicketButtonIconVariants = classVarianceAuthority.cva(
|
|
13511
|
-
// Base classes - icon size and spacing from tokens
|
|
13512
|
-
`${DOMAIN_TOKENS.metadata.icon.sizeSm} ${DOMAIN_TOKENS.spacing.button.iconMarginLeft}`,
|
|
13513
|
-
{
|
|
13514
|
-
variants: {
|
|
13515
|
-
size: {
|
|
13516
|
-
default: "",
|
|
13517
|
-
compact: ""
|
|
13518
|
-
}
|
|
13519
|
-
},
|
|
13520
|
-
defaultVariants: {
|
|
13521
|
-
size: "default"
|
|
13522
|
-
}
|
|
13523
|
-
}
|
|
13524
|
-
);
|
|
13525
|
-
var eventCardPriceVariants = classVarianceAuthority.cva(
|
|
13526
|
-
// Base classes - price gradient text from tokens
|
|
13527
|
-
`bg-gradient-to-r from-accent-500 to-primary-600 bg-clip-text text-transparent`,
|
|
13528
|
-
{
|
|
13529
|
-
variants: {
|
|
13530
|
-
size: {
|
|
13531
|
-
default: TEXT_TOKENS.fontSize.lg,
|
|
13532
|
-
compact: TEXT_TOKENS.fontSize.md
|
|
13533
|
-
}
|
|
13534
|
-
},
|
|
13535
|
-
defaultVariants: {
|
|
13536
|
-
size: "default"
|
|
13537
|
-
}
|
|
13538
|
-
}
|
|
13539
|
-
);
|
|
13540
|
-
var EventCard = React48__namespace.forwardRef(
|
|
13541
|
-
({
|
|
13542
|
-
title,
|
|
13543
|
-
description,
|
|
13544
|
-
date,
|
|
13545
|
-
venueName,
|
|
13546
|
-
price,
|
|
13547
|
-
imageUrl,
|
|
13548
|
-
href,
|
|
13549
|
-
ticketUrl,
|
|
13550
|
-
featured = false,
|
|
13551
|
-
showImage = true,
|
|
13552
|
-
getTicketsLabel,
|
|
13553
|
-
featuredBadgeText,
|
|
13554
|
-
size = "default",
|
|
13555
|
-
layout = "vertical",
|
|
13556
|
-
variant,
|
|
13557
|
-
className,
|
|
13558
|
-
animation,
|
|
13559
|
-
...props
|
|
13560
|
-
}, ref) => {
|
|
13561
|
-
const animationProps = resolveComponentAnimations({
|
|
13562
|
-
animation: animation?.animation || "fadeInUp",
|
|
13563
|
-
hoverAnimation: animation?.hoverAnimation || "hoverLift",
|
|
13564
|
-
animationProps: animation?.animationProps
|
|
13565
|
-
});
|
|
13566
|
-
const cardVariant = variant || (featured ? "featured" : "default");
|
|
13567
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...animationProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
13568
|
-
CardBase,
|
|
13569
|
-
{
|
|
13570
|
-
ref,
|
|
13571
|
-
size,
|
|
13572
|
-
variant: cardVariant,
|
|
13573
|
-
className: cn(
|
|
13574
|
-
eventCardVariants({ size, layout, variant: cardVariant }),
|
|
13575
|
-
"group relative",
|
|
13576
|
-
className
|
|
13577
|
-
),
|
|
13578
|
-
...props,
|
|
13579
|
-
children: [
|
|
13580
|
-
featured && featuredBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: eventCardBadgeVariants({ size }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
|
|
13581
|
-
showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
13582
|
-
"div",
|
|
13583
|
-
{
|
|
13584
|
-
className: cn("relative w-full overflow-hidden", DOMAIN_TOKENS.surface.bg.default),
|
|
13585
|
-
children: [
|
|
13586
|
-
imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
13587
|
-
"img",
|
|
13588
|
-
{
|
|
13589
|
-
src: imageUrl,
|
|
13590
|
-
alt: title,
|
|
13591
|
-
className: cn(
|
|
13592
|
-
"h-full w-full object-cover",
|
|
13593
|
-
DOMAIN_TOKENS.motion.hover.transition,
|
|
13594
|
-
DOMAIN_TOKENS.motion.hover.scale
|
|
13595
|
-
)
|
|
13596
|
-
}
|
|
13597
|
-
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13598
|
-
Icon2,
|
|
13599
|
-
{
|
|
13600
|
-
name: "info",
|
|
13601
|
-
size: "xl",
|
|
13602
|
-
color: "muted",
|
|
13603
|
-
className: ICON_TOKENS.sizes["4xl"],
|
|
13604
|
-
"aria-hidden": "true"
|
|
13605
|
-
}
|
|
13606
|
-
) }),
|
|
13607
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13608
|
-
"div",
|
|
13609
|
-
{
|
|
13610
|
-
className: cn(
|
|
13611
|
-
"absolute inset-0 opacity-0 group-hover:opacity-100",
|
|
13612
|
-
DOMAIN_TOKENS.motion.hover.transition,
|
|
13613
|
-
DOMAIN_TOKENS.image.overlay.gradient
|
|
13614
|
-
)
|
|
13615
|
-
}
|
|
13616
|
-
)
|
|
13617
|
-
]
|
|
13618
|
-
}
|
|
13619
|
-
) }),
|
|
13620
|
-
/* @__PURE__ */ jsxRuntime.jsxs(CardBaseContentWrapper, { size, children: [
|
|
13621
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13622
|
-
Heading,
|
|
13623
|
-
{
|
|
13624
|
-
level: 3,
|
|
13625
|
-
className: cn(
|
|
13626
|
-
"line-clamp-2 group-hover:text-primary",
|
|
13627
|
-
DOMAIN_TOKENS.motion.hover.transition,
|
|
13628
|
-
TEXT_TOKENS.fontSize.lg,
|
|
13629
|
-
TEXT_TOKENS.fontWeight.bold,
|
|
13630
|
-
DOMAIN_TOKENS.spacing.section.titleToSubtitle
|
|
13631
|
-
),
|
|
13632
|
-
children: href ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href, variant: "ghost", children: title }) : title
|
|
13633
|
-
}
|
|
13634
|
-
),
|
|
13635
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(
|
|
13636
|
-
Text,
|
|
13637
|
-
{
|
|
13638
|
-
size: "sm",
|
|
13639
|
-
muted: true,
|
|
13640
|
-
className: cn(
|
|
13641
|
-
"line-clamp-2",
|
|
13642
|
-
size === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
|
|
13643
|
-
),
|
|
13644
|
-
children: description
|
|
13645
|
-
}
|
|
13646
|
-
),
|
|
13647
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataVariants({ size }), children: [
|
|
13648
|
-
date && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataItemVariants({ size }), role: "text", children: [
|
|
13649
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13650
|
-
IconCalendar,
|
|
13651
|
-
{
|
|
13652
|
-
className: eventCardMetadataIconVariants({ size }),
|
|
13653
|
-
"aria-hidden": true
|
|
13654
|
-
}
|
|
13655
|
-
),
|
|
13656
|
-
/* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", muted: true, children: /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: date, children: date }) })
|
|
13657
|
-
] }),
|
|
13658
|
-
venueName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: eventCardMetadataItemVariants({ size }), role: "text", children: [
|
|
13659
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13660
|
-
IconLocation,
|
|
13661
|
-
{
|
|
13662
|
-
className: eventCardMetadataIconVariants({ size }),
|
|
13663
|
-
"aria-hidden": true
|
|
13664
|
-
}
|
|
13665
|
-
),
|
|
13666
|
-
/* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", muted: true, className: "line-clamp-1", children: /* @__PURE__ */ jsxRuntime.jsx("address", { children: venueName }) })
|
|
13667
|
-
] })
|
|
13668
|
-
] })
|
|
13669
|
-
] }),
|
|
13670
|
-
/* @__PURE__ */ jsxRuntime.jsx(CardBaseFooterWrapper, { size, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", eventCardFooterVariants({ size })), children: [
|
|
13671
|
-
ticketUrl && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
13672
|
-
Link,
|
|
13673
|
-
{
|
|
13674
|
-
href: ticketUrl,
|
|
13675
|
-
className: cn("w-full", eventCardTicketButtonVariants({ size })),
|
|
13676
|
-
target: "_blank",
|
|
13677
|
-
rel: "noopener noreferrer",
|
|
13678
|
-
children: [
|
|
13679
|
-
getTicketsLabel,
|
|
13680
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13681
|
-
IconArrowRight,
|
|
13682
|
-
{
|
|
13683
|
-
className: eventCardTicketButtonIconVariants({ size }),
|
|
13684
|
-
"aria-hidden": true
|
|
13685
|
-
}
|
|
13686
|
-
)
|
|
13687
|
-
]
|
|
13688
|
-
}
|
|
13689
|
-
),
|
|
13690
|
-
!ticketUrl && price && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: size === "compact" ? "md" : "lg", weight: "bold", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventCardPriceVariants({ size }), children: price }) }) })
|
|
13691
|
-
] }) })
|
|
13692
|
-
]
|
|
13693
|
-
}
|
|
13694
|
-
) });
|
|
13695
|
-
}
|
|
13696
|
-
);
|
|
13697
|
-
EventCard.displayName = "EventCard";
|
|
13698
|
-
var artistCardVariants = classVarianceAuthority.cva("group relative", {
|
|
13699
|
-
variants: {
|
|
13700
|
-
size: {
|
|
13701
|
-
default: "",
|
|
13702
|
-
compact: ""
|
|
13703
|
-
},
|
|
13704
|
-
variant: {
|
|
13705
|
-
default: "",
|
|
13706
|
-
featured: ""
|
|
13707
|
-
}
|
|
13708
|
-
},
|
|
13709
|
-
defaultVariants: {
|
|
13710
|
-
size: "default",
|
|
13711
|
-
variant: "default"
|
|
13712
|
-
}
|
|
13713
|
-
});
|
|
13714
|
-
var artistCardBadgeVariants = classVarianceAuthority.cva(
|
|
13715
|
-
// Base classes - absolute positioning, z-index
|
|
13716
|
-
"absolute z-10",
|
|
13717
|
-
{
|
|
13718
|
-
variants: {
|
|
13719
|
-
size: {
|
|
13720
|
-
default: DOMAIN_TOKENS.badges.position.default,
|
|
13721
|
-
// Default positioning - maps to semanticSpacing.md (12px)
|
|
13722
|
-
compact: DOMAIN_TOKENS.badges.position.compact
|
|
13723
|
-
// Compact positioning - maps to semanticSpacing.sm (8px)
|
|
13724
|
-
}
|
|
13725
|
-
},
|
|
13726
|
-
defaultVariants: {
|
|
13727
|
-
size: "default"
|
|
13728
|
-
}
|
|
13729
|
-
}
|
|
13730
|
-
);
|
|
13731
|
-
var artistCardBadgeSurfaceVariants = classVarianceAuthority.cva(
|
|
13732
|
-
// Base classes - flex layout, items center, badge styling
|
|
13733
|
-
`inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
|
|
13734
|
-
{
|
|
13735
|
-
variants: {
|
|
13736
|
-
size: {
|
|
13737
|
-
default: DOMAIN_TOKENS.badges.size.md,
|
|
13738
|
-
compact: DOMAIN_TOKENS.badges.size.sm
|
|
13739
|
-
},
|
|
13740
|
-
variant: {
|
|
13741
|
-
default: DOMAIN_TOKENS.badges.surface.default,
|
|
13742
|
-
featured: DOMAIN_TOKENS.badges.surface.featured
|
|
13743
|
-
}
|
|
13744
|
-
},
|
|
13745
|
-
defaultVariants: {
|
|
13746
|
-
size: "default",
|
|
13747
|
-
variant: "featured"
|
|
13748
|
-
}
|
|
13749
|
-
}
|
|
13750
|
-
);
|
|
13751
|
-
var artistCardImageOverlayVariants = classVarianceAuthority.cva(
|
|
13752
|
-
`absolute inset-0 ${DOMAIN_TOKENS.image.overlay.gradient} opacity-0 ${MOTION_TOKENS.transition.opacity} ${MOTION_TOKENS.duration.normal} group-hover:opacity-100`,
|
|
13753
|
-
{
|
|
13754
|
-
variants: {
|
|
13755
|
-
size: {
|
|
13756
|
-
default: "",
|
|
13757
|
-
compact: ""
|
|
13758
|
-
}
|
|
13759
|
-
},
|
|
13760
|
-
defaultVariants: {
|
|
13761
|
-
size: "default"
|
|
13762
|
-
}
|
|
13763
|
-
}
|
|
13764
|
-
);
|
|
13765
|
-
var artistCardImageTransformVariants = classVarianceAuthority.cva(
|
|
13766
|
-
`object-cover ${MOTION_TOKENS.transition.transform} ${MOTION_TOKENS.duration.slow} ${DOMAIN_TOKENS.motion.hover.scale}`,
|
|
13767
|
-
{
|
|
13768
|
-
variants: {
|
|
13769
|
-
size: {
|
|
13770
|
-
default: "",
|
|
13771
|
-
compact: ""
|
|
13772
|
-
}
|
|
13773
|
-
},
|
|
13774
|
-
defaultVariants: {
|
|
13775
|
-
size: "default"
|
|
13776
|
-
}
|
|
13777
|
-
}
|
|
13778
|
-
);
|
|
13779
|
-
var artistCardMetadataVariants = classVarianceAuthority.cva(
|
|
13780
|
-
// Base classes - flex column, metadata spacing
|
|
13781
|
-
`flex flex-col ${DOMAIN_TOKENS.metadata.spacing.vertical}`,
|
|
13782
|
-
{
|
|
13783
|
-
variants: {
|
|
13784
|
-
size: {
|
|
13785
|
-
default: "",
|
|
13786
|
-
compact: ""
|
|
13787
|
-
}
|
|
13788
|
-
},
|
|
13789
|
-
defaultVariants: {
|
|
13790
|
-
size: "default"
|
|
13791
|
-
}
|
|
13792
|
-
}
|
|
13793
|
-
);
|
|
13794
|
-
var artistCardMetadataItemVariants = classVarianceAuthority.cva(
|
|
13795
|
-
// Base classes - flex items center, metadata spacing and text
|
|
13796
|
-
`flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.xs}`,
|
|
13797
|
-
{
|
|
13798
|
-
variants: {
|
|
13799
|
-
size: {
|
|
13800
|
-
default: "",
|
|
13801
|
-
compact: ""
|
|
13802
|
-
}
|
|
13803
|
-
},
|
|
13804
|
-
defaultVariants: {
|
|
13805
|
-
size: "default"
|
|
13806
|
-
}
|
|
13807
|
-
}
|
|
13808
|
-
);
|
|
13809
|
-
var artistCardMetadataIconVariants = classVarianceAuthority.cva(
|
|
13810
|
-
// Base classes - icon size and color
|
|
13811
|
-
`${ICON_TOKENS.sizes.md} ${ICON_TOKENS.colors.muted}`,
|
|
13812
|
-
{
|
|
13813
|
-
variants: {
|
|
13814
|
-
size: {
|
|
13815
|
-
default: "",
|
|
13816
|
-
compact: ""
|
|
13817
|
-
}
|
|
13818
|
-
},
|
|
13819
|
-
defaultVariants: {
|
|
13820
|
-
size: "default"
|
|
13821
|
-
}
|
|
13822
|
-
}
|
|
13823
|
-
);
|
|
13824
|
-
var artistCardGenresVariants = classVarianceAuthority.cva(
|
|
13825
|
-
// Base classes - genres text styling
|
|
13826
|
-
`${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.xs}`,
|
|
13827
|
-
{
|
|
13828
|
-
variants: {
|
|
13829
|
-
size: {
|
|
13830
|
-
default: "",
|
|
13831
|
-
compact: ""
|
|
13832
|
-
}
|
|
13833
|
-
},
|
|
13834
|
-
defaultVariants: {
|
|
13835
|
-
size: "default"
|
|
13836
|
-
}
|
|
13837
|
-
}
|
|
13838
|
-
);
|
|
13839
|
-
var artistCardFooterBorderVariants = classVarianceAuthority.cva(
|
|
13840
|
-
// Base classes - border top from ARTIST_TOKENS, spacing from DOMAIN_TOKENS
|
|
13841
|
-
ARTIST_TOKENS.footer.border.top,
|
|
13842
|
-
{
|
|
13843
|
-
variants: {
|
|
13844
|
-
size: {
|
|
13845
|
-
default: DOMAIN_TOKENS.spacing.footer.paddingTopDefault,
|
|
13846
|
-
// Default padding top - references semanticSpacing.sm (8px) via Tailwind
|
|
13847
|
-
compact: DOMAIN_TOKENS.spacing.footer.paddingTopCompact
|
|
13848
|
-
// Compact padding top - references semanticSpacing.xs (4px) via Tailwind
|
|
13849
|
-
}
|
|
13850
|
-
},
|
|
13851
|
-
defaultVariants: {
|
|
13852
|
-
size: "default"
|
|
13853
|
-
}
|
|
13854
|
-
}
|
|
13855
|
-
);
|
|
13856
|
-
var ArtistCard = React48__namespace.forwardRef(
|
|
13857
|
-
({
|
|
13858
|
-
name,
|
|
13859
|
-
description,
|
|
13860
|
-
genres,
|
|
13861
|
-
followers,
|
|
13862
|
-
plays,
|
|
13863
|
-
imageUrl,
|
|
13864
|
-
href,
|
|
13865
|
-
featured = false,
|
|
13866
|
-
showImage = true,
|
|
13867
|
-
popularBadgeText,
|
|
13868
|
-
followersLabel,
|
|
13869
|
-
playsLabel,
|
|
13870
|
-
size = "default",
|
|
13871
|
-
variant,
|
|
13872
|
-
className,
|
|
13873
|
-
animation,
|
|
13874
|
-
...props
|
|
13875
|
-
}, ref) => {
|
|
13876
|
-
if (!name || name.trim() === "") {
|
|
13877
|
-
throw new Error('ArtistCard: "name" prop is required and cannot be empty');
|
|
13878
|
-
}
|
|
13879
|
-
if (!followersLabel || followersLabel.trim() === "") {
|
|
13880
|
-
throw new Error('ArtistCard: "followersLabel" prop is required and cannot be empty');
|
|
13881
|
-
}
|
|
13882
|
-
if (!playsLabel || playsLabel.trim() === "") {
|
|
13883
|
-
throw new Error('ArtistCard: "playsLabel" prop is required and cannot be empty');
|
|
13884
|
-
}
|
|
13885
|
-
const animationProps = resolveComponentAnimations({
|
|
13886
|
-
animation: animation?.animation || "fadeInUp",
|
|
13887
|
-
hoverAnimation: animation?.hoverAnimation || "hoverLift",
|
|
13888
|
-
animationProps: animation?.animationProps
|
|
13889
|
-
});
|
|
13890
|
-
const cardVariant = variant || (featured ? "featured" : "default");
|
|
13891
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...animationProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
13892
|
-
CardBase,
|
|
13893
|
-
{
|
|
13894
|
-
ref,
|
|
13895
|
-
size,
|
|
13896
|
-
variant: cardVariant,
|
|
13897
|
-
className: cn(artistCardVariants({ size, variant }), className),
|
|
13898
|
-
...props,
|
|
13899
|
-
children: [
|
|
13900
|
-
featured && popularBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: artistCardBadgeVariants({ size }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: artistCardBadgeSurfaceVariants({ size, variant: "featured" }), children: popularBadgeText }) }),
|
|
13901
|
-
showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
13902
|
-
"div",
|
|
13903
|
-
{
|
|
13904
|
-
className: cn(
|
|
13905
|
-
ARTIST_TOKENS.image.container.layout,
|
|
13906
|
-
DOMAIN_TOKENS.image.placeholder.gradient
|
|
13907
|
-
),
|
|
13908
|
-
children: [
|
|
13909
|
-
imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
13910
|
-
"img",
|
|
13911
|
-
{
|
|
13912
|
-
src: imageUrl,
|
|
13913
|
-
alt: name,
|
|
13914
|
-
className: cn(
|
|
13915
|
-
ARTIST_TOKENS.image.sizing.full,
|
|
13916
|
-
artistCardImageTransformVariants({ size })
|
|
13917
|
-
)
|
|
13918
|
-
}
|
|
13919
|
-
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ARTIST_TOKENS.image.placeholder.container, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13920
|
-
Icon2,
|
|
13921
|
-
{
|
|
13922
|
-
name: "info",
|
|
13923
|
-
size: "xl",
|
|
13924
|
-
color: "muted",
|
|
13925
|
-
className: ICON_TOKENS.sizes["4xl"],
|
|
13926
|
-
"aria-hidden": "true"
|
|
13927
|
-
}
|
|
13928
|
-
) }),
|
|
13929
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: artistCardImageOverlayVariants({ size }) })
|
|
13930
|
-
]
|
|
13931
|
-
}
|
|
13932
|
-
) }),
|
|
13933
|
-
/* @__PURE__ */ jsxRuntime.jsxs(CardBaseContentWrapper, { size, children: [
|
|
13934
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13935
|
-
Heading,
|
|
13936
|
-
{
|
|
13937
|
-
level: 3,
|
|
13938
|
-
className: cn(
|
|
13939
|
-
DOMAIN_TOKENS.text.lineClamp.two,
|
|
13940
|
-
TEXT_TOKENS.fontSize.lg,
|
|
13941
|
-
TEXT_TOKENS.fontWeight.bold,
|
|
13942
|
-
MOTION_TOKENS.transition.colors,
|
|
13943
|
-
DOMAIN_TOKENS.text.hover.primary,
|
|
13944
|
-
size === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
|
|
13945
|
-
),
|
|
13946
|
-
children: href ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href, variant: "ghost", children: name }) : name
|
|
13947
|
-
}
|
|
13948
|
-
),
|
|
13949
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(
|
|
13950
|
-
Text,
|
|
13951
|
-
{
|
|
13952
|
-
size: "sm",
|
|
13953
|
-
variant: "muted",
|
|
13954
|
-
className: cn(
|
|
13955
|
-
DOMAIN_TOKENS.text.lineClamp.two,
|
|
13956
|
-
size === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
|
|
13957
|
-
),
|
|
13958
|
-
children: description
|
|
13959
|
-
}
|
|
13960
|
-
),
|
|
13961
|
-
genres && /* @__PURE__ */ jsxRuntime.jsx(
|
|
13962
|
-
Text,
|
|
13963
|
-
{
|
|
13964
|
-
size: "xs",
|
|
13965
|
-
variant: "muted",
|
|
13966
|
-
className: cn(
|
|
13967
|
-
artistCardGenresVariants({ size }),
|
|
13968
|
-
size === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
|
|
13969
|
-
),
|
|
13970
|
-
children: genres
|
|
13971
|
-
}
|
|
13972
|
-
),
|
|
13973
|
-
(followers !== void 0 || plays !== void 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: artistCardMetadataVariants({ size }), children: [
|
|
13974
|
-
followers !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: artistCardMetadataItemVariants({ size }), children: [
|
|
13975
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13976
|
-
Icon2,
|
|
13977
|
-
{
|
|
13978
|
-
name: "info",
|
|
13979
|
-
size: "sm",
|
|
13980
|
-
color: "muted",
|
|
13981
|
-
className: artistCardMetadataIconVariants({ size }),
|
|
13982
|
-
"aria-hidden": "true"
|
|
13983
|
-
}
|
|
13984
|
-
),
|
|
13985
|
-
/* @__PURE__ */ jsxRuntime.jsxs(Text, { size: "xs", variant: "muted", children: [
|
|
13986
|
-
followers.toLocaleString(),
|
|
13987
|
-
" ",
|
|
13988
|
-
followersLabel
|
|
13989
|
-
] })
|
|
13990
|
-
] }),
|
|
13991
|
-
plays !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: artistCardMetadataItemVariants({ size }), children: [
|
|
13992
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13993
|
-
Icon2,
|
|
13994
|
-
{
|
|
13995
|
-
name: "info",
|
|
13996
|
-
size: "sm",
|
|
13997
|
-
color: "muted",
|
|
13998
|
-
className: artistCardMetadataIconVariants({ size }),
|
|
13999
|
-
"aria-hidden": "true"
|
|
14000
|
-
}
|
|
14001
|
-
),
|
|
14002
|
-
/* @__PURE__ */ jsxRuntime.jsxs(Text, { size: "xs", variant: "muted", children: [
|
|
14003
|
-
plays.toLocaleString(),
|
|
14004
|
-
" ",
|
|
14005
|
-
playsLabel
|
|
14006
|
-
] })
|
|
14007
|
-
] })
|
|
14008
|
-
] })
|
|
14009
|
-
] }),
|
|
14010
|
-
(followers !== void 0 || plays !== void 0) && /* @__PURE__ */ jsxRuntime.jsx(CardBaseFooterWrapper, { size, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: artistCardFooterBorderVariants({ size }) }) })
|
|
14011
|
-
]
|
|
14012
|
-
}
|
|
14013
|
-
) });
|
|
14014
|
-
}
|
|
14015
|
-
);
|
|
14016
|
-
ArtistCard.displayName = "ArtistCard";
|
|
14017
|
-
var categoryCardBadgeVariants = classVarianceAuthority.cva(
|
|
14018
|
-
// Base classes - absolute positioning, z-index
|
|
14019
|
-
"absolute z-10",
|
|
14020
|
-
{
|
|
14021
|
-
variants: {
|
|
14022
|
-
size: {
|
|
14023
|
-
default: DOMAIN_TOKENS.badges.position.default,
|
|
14024
|
-
// Default positioning - references semanticSpacing.md (16px)
|
|
14025
|
-
compact: DOMAIN_TOKENS.badges.position.compact
|
|
14026
|
-
// Compact positioning - references semanticSpacing.sm (8px)
|
|
14027
|
-
}
|
|
14028
|
-
},
|
|
14029
|
-
defaultVariants: {
|
|
14030
|
-
size: "default"
|
|
14031
|
-
}
|
|
14032
|
-
}
|
|
14033
|
-
);
|
|
14034
|
-
var categoryCardBadgeSurfaceVariants = classVarianceAuthority.cva(
|
|
14035
|
-
// Base classes - flex layout, items center, badge styling
|
|
14036
|
-
// Uses DOMAIN_TOKENS for badge-specific styles, TEXT_TOKENS for typography
|
|
14037
|
-
`inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
|
|
14038
|
-
{
|
|
14039
|
-
variants: {
|
|
14040
|
-
variant: {
|
|
14041
|
-
default: DOMAIN_TOKENS.badges.surface.default,
|
|
14042
|
-
featured: DOMAIN_TOKENS.badges.surface.featured
|
|
14043
|
-
}
|
|
14044
|
-
},
|
|
14045
|
-
defaultVariants: {
|
|
14046
|
-
variant: "featured"
|
|
14047
|
-
}
|
|
14048
|
-
}
|
|
14049
|
-
);
|
|
14050
|
-
var CategoryCard = React48__namespace.forwardRef(
|
|
14051
|
-
({
|
|
14052
|
-
title,
|
|
14053
|
-
description,
|
|
14054
|
-
imageUrl,
|
|
14055
|
-
href,
|
|
14056
|
-
featured = false,
|
|
14057
|
-
showImage = true,
|
|
14058
|
-
featuredBadgeText,
|
|
14059
|
-
size = "default",
|
|
14060
|
-
variant,
|
|
14061
|
-
className,
|
|
14062
|
-
animation,
|
|
14063
|
-
...props
|
|
14064
|
-
}, ref) => {
|
|
14065
|
-
const animationProps = resolveComponentAnimations({
|
|
14066
|
-
animation: animation?.animation || "fadeInUp",
|
|
14067
|
-
hoverAnimation: animation?.hoverAnimation || "hoverLift",
|
|
14068
|
-
animationProps: animation?.animationProps
|
|
14069
|
-
});
|
|
14070
|
-
const cardVariant = variant || (featured ? "featured" : "default");
|
|
14071
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...animationProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
14072
|
-
CardBase,
|
|
14073
|
-
{
|
|
14074
|
-
ref,
|
|
14075
|
-
size,
|
|
14076
|
-
variant: cardVariant,
|
|
14077
|
-
className: cn("group relative", className),
|
|
14078
|
-
...props,
|
|
14079
|
-
children: [
|
|
14080
|
-
featured && featuredBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: categoryCardBadgeVariants({ size }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: categoryCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
|
|
14081
|
-
showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
14082
|
-
"div",
|
|
14083
|
-
{
|
|
14084
|
-
className: cn(
|
|
14085
|
-
"relative w-full overflow-hidden",
|
|
14086
|
-
DOMAIN_TOKENS.image.placeholder.gradient
|
|
14087
|
-
),
|
|
14088
|
-
children: [
|
|
14089
|
-
imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
14090
|
-
"img",
|
|
14091
|
-
{
|
|
14092
|
-
src: imageUrl,
|
|
14093
|
-
alt: title,
|
|
14094
|
-
className: cn(
|
|
14095
|
-
"h-full w-full object-cover",
|
|
14096
|
-
DOMAIN_TOKENS.motion.hover.transition,
|
|
14097
|
-
DOMAIN_TOKENS.motion.hover.scale
|
|
14098
|
-
)
|
|
14099
|
-
}
|
|
14100
|
-
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
14101
|
-
Icon2,
|
|
14102
|
-
{
|
|
14103
|
-
name: "info",
|
|
14104
|
-
className: cn(ICON_TOKENS.sizes["4xl"], ICON_TOKENS.colors.muted),
|
|
14105
|
-
"aria-hidden": "true"
|
|
14106
|
-
}
|
|
14107
|
-
) }),
|
|
14108
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
14109
|
-
"div",
|
|
14110
|
-
{
|
|
14111
|
-
className: cn(
|
|
14112
|
-
"absolute inset-0 opacity-0 group-hover:opacity-100",
|
|
14113
|
-
MOTION_TOKENS.transition.opacity,
|
|
14114
|
-
MOTION_TOKENS.duration.normal,
|
|
14115
|
-
DOMAIN_TOKENS.image.overlay.gradient
|
|
14116
|
-
)
|
|
14117
|
-
}
|
|
14118
|
-
)
|
|
14119
|
-
]
|
|
14120
|
-
}
|
|
14121
|
-
) }),
|
|
14122
|
-
/* @__PURE__ */ jsxRuntime.jsxs(CardBaseContentWrapper, { size, children: [
|
|
14123
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
14124
|
-
Heading,
|
|
14125
|
-
{
|
|
14126
|
-
level: 3,
|
|
14127
|
-
className: cn(
|
|
14128
|
-
DOMAIN_TOKENS.text.lineClamp.two,
|
|
14129
|
-
MOTION_TOKENS.transition.colors,
|
|
14130
|
-
DOMAIN_TOKENS.text.hover.primary,
|
|
14131
|
-
TEXT_TOKENS.fontSize.lg,
|
|
14132
|
-
TEXT_TOKENS.fontWeight.bold,
|
|
14133
|
-
DOMAIN_TOKENS.spacing.section.titleToSubtitle
|
|
14134
|
-
),
|
|
14135
|
-
children: href ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href, variant: "ghost", children: title }) : title
|
|
14136
|
-
}
|
|
14137
|
-
),
|
|
14138
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(
|
|
14139
|
-
Text,
|
|
14140
|
-
{
|
|
14141
|
-
size: "sm",
|
|
14142
|
-
variant: "muted",
|
|
14143
|
-
className: cn(
|
|
14144
|
-
DOMAIN_TOKENS.text.lineClamp.two,
|
|
14145
|
-
size === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
|
|
14146
|
-
),
|
|
14147
|
-
children: description
|
|
14148
|
-
}
|
|
14149
|
-
)
|
|
14150
|
-
] })
|
|
14151
|
-
]
|
|
14152
|
-
}
|
|
14153
|
-
) });
|
|
14154
|
-
}
|
|
14155
|
-
);
|
|
14156
|
-
CategoryCard.displayName = "CategoryCard";
|
|
14157
|
-
var promoCardBadgeVariants = classVarianceAuthority.cva(
|
|
14158
|
-
// Base classes - absolute positioning, z-index
|
|
14159
|
-
"absolute z-10",
|
|
14160
|
-
{
|
|
14161
|
-
variants: {
|
|
14162
|
-
size: {
|
|
14163
|
-
default: DOMAIN_TOKENS.badges.position.default,
|
|
14164
|
-
// Default positioning - maps to semanticSpacing.md (12px)
|
|
14165
|
-
compact: DOMAIN_TOKENS.badges.position.compact
|
|
14166
|
-
// Compact positioning - maps to semanticSpacing.sm (8px)
|
|
14167
|
-
}
|
|
14168
|
-
},
|
|
14169
|
-
defaultVariants: {
|
|
14170
|
-
size: "default"
|
|
14171
|
-
}
|
|
14172
|
-
}
|
|
14173
|
-
);
|
|
14174
|
-
var promoCardBadgeSurfaceVariants = classVarianceAuthority.cva(
|
|
14175
|
-
// Base classes - flex layout, items center, badge styling
|
|
14176
|
-
`inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} font-semibold`,
|
|
14177
|
-
{
|
|
14178
|
-
variants: {
|
|
14179
|
-
variant: {
|
|
14180
|
-
default: DOMAIN_TOKENS.badges.surface.default,
|
|
14181
|
-
featured: DOMAIN_TOKENS.badges.surface.featured
|
|
14182
|
-
}
|
|
14183
|
-
},
|
|
14184
|
-
defaultVariants: {
|
|
14185
|
-
variant: "featured"
|
|
14186
|
-
}
|
|
14187
|
-
}
|
|
14188
|
-
);
|
|
14189
|
-
var promoCardCtaButtonVariants = classVarianceAuthority.cva(
|
|
14190
|
-
// Base classes - flex layout, CTA button tokens, motion
|
|
14191
|
-
`inline-flex items-center justify-center ${DOMAIN_TOKENS.cta.button.radius} ${DOMAIN_TOKENS.cta.button.variant.primary.background} ${DOMAIN_TOKENS.cta.button.variant.primary.text} ${DOMAIN_TOKENS.cta.button.shadow.primary} ${DOMAIN_TOKENS.cta.button.variant.primary.hover} ${DOMAIN_TOKENS.cta.button.transition.colors} font-semibold`,
|
|
14192
|
-
{
|
|
14193
|
-
variants: {
|
|
14194
|
-
size: {
|
|
14195
|
-
default: `${DOMAIN_TOKENS.cta.button.height.md} ${DOMAIN_TOKENS.cta.button.padding.horizontal.md} ${DOMAIN_TOKENS.cta.button.padding.vertical.sm} ${DOMAIN_TOKENS.cta.button.fontSize.md}`,
|
|
14196
|
-
// Default size - uses md height and padding
|
|
14197
|
-
compact: `${DOMAIN_TOKENS.cta.button.height.sm} ${DOMAIN_TOKENS.cta.button.padding.horizontal.sm} ${DOMAIN_TOKENS.cta.button.padding.vertical.sm} ${DOMAIN_TOKENS.cta.button.fontSize.sm}`
|
|
14198
|
-
// Compact size - uses sm height and padding
|
|
14199
|
-
}
|
|
14200
|
-
},
|
|
14201
|
-
defaultVariants: {
|
|
14202
|
-
size: "default"
|
|
14203
|
-
}
|
|
14204
|
-
}
|
|
14205
|
-
);
|
|
14206
|
-
var promoCardCtaButtonIconVariants = classVarianceAuthority.cva(
|
|
14207
|
-
// Base classes - icon size and spacing
|
|
14208
|
-
`${ICON_TOKENS.sizes.md} ${DOMAIN_TOKENS.spacing.button.iconMarginLeft}`,
|
|
14209
|
-
{
|
|
14210
|
-
variants: {
|
|
14211
|
-
size: {
|
|
14212
|
-
default: "",
|
|
14213
|
-
compact: ""
|
|
14214
|
-
}
|
|
14215
|
-
},
|
|
14216
|
-
defaultVariants: {
|
|
14217
|
-
size: "default"
|
|
14218
|
-
}
|
|
14219
|
-
}
|
|
14220
|
-
);
|
|
14221
|
-
var PromoCard = React48__namespace.forwardRef(
|
|
14222
|
-
({
|
|
14223
|
-
title,
|
|
14224
|
-
description,
|
|
14225
|
-
imageUrl,
|
|
14226
|
-
href,
|
|
14227
|
-
ctaUrl,
|
|
14228
|
-
ctaLabel,
|
|
14229
|
-
featured = false,
|
|
14230
|
-
showImage = true,
|
|
14231
|
-
featuredBadgeText,
|
|
14232
|
-
size = "default",
|
|
14233
|
-
variant,
|
|
14234
|
-
className,
|
|
14235
|
-
animation,
|
|
14236
|
-
...props
|
|
14237
|
-
}, ref) => {
|
|
14238
|
-
const animationProps = resolveComponentAnimations({
|
|
14239
|
-
animation: animation?.animation || "fadeInUp",
|
|
14240
|
-
hoverAnimation: animation?.hoverAnimation || "hoverLift",
|
|
14241
|
-
animationProps: animation?.animationProps
|
|
14242
|
-
});
|
|
14243
|
-
const cardVariant = variant || (featured ? "featured" : "default");
|
|
14244
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...animationProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
14245
|
-
CardBase,
|
|
14246
|
-
{
|
|
14247
|
-
ref,
|
|
14248
|
-
size,
|
|
14249
|
-
variant: cardVariant,
|
|
14250
|
-
className: cn("group relative", className),
|
|
14251
|
-
...props,
|
|
14252
|
-
children: [
|
|
14253
|
-
featured && featuredBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: promoCardBadgeVariants({ size }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: promoCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
|
|
14254
|
-
showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-hidden bg-gradient-to-br from-surface-elevated1 to-surface-elevated2", children: [
|
|
14255
|
-
imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
14256
|
-
"img",
|
|
14257
|
-
{
|
|
14258
|
-
src: imageUrl,
|
|
14259
|
-
alt: title,
|
|
14260
|
-
className: cn(
|
|
14261
|
-
"h-full w-full object-cover",
|
|
14262
|
-
DOMAIN_TOKENS.motion.hover.transition,
|
|
14263
|
-
DOMAIN_TOKENS.motion.hover.scale
|
|
14264
|
-
)
|
|
14265
|
-
}
|
|
14266
|
-
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
14267
|
-
Icon2,
|
|
14268
|
-
{
|
|
14269
|
-
name: "info",
|
|
14270
|
-
size: "xl",
|
|
14271
|
-
color: "muted",
|
|
14272
|
-
className: ICON_TOKENS.sizes["4xl"],
|
|
14273
|
-
"aria-hidden": "true"
|
|
14274
|
-
}
|
|
14275
|
-
) }),
|
|
14276
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
14277
|
-
"div",
|
|
14278
|
-
{
|
|
14279
|
-
className: cn(
|
|
14280
|
-
"absolute inset-0 opacity-0 transition-opacity duration-normal group-hover:opacity-100",
|
|
14281
|
-
DOMAIN_TOKENS.image.overlay.gradient
|
|
14282
|
-
)
|
|
14283
|
-
}
|
|
14284
|
-
)
|
|
14285
|
-
] }) }),
|
|
14286
|
-
/* @__PURE__ */ jsxRuntime.jsxs(CardBaseContentWrapper, { size, children: [
|
|
14287
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
14288
|
-
Heading,
|
|
14289
|
-
{
|
|
14290
|
-
level: 3,
|
|
14291
|
-
className: cn(
|
|
14292
|
-
"line-clamp-2 transition-colors group-hover:text-primary",
|
|
14293
|
-
TEXT_TOKENS.fontSize.lg,
|
|
14294
|
-
TEXT_TOKENS.fontWeight.bold,
|
|
14295
|
-
DOMAIN_TOKENS.spacing.section.titleToSubtitle
|
|
14296
|
-
),
|
|
14297
|
-
children: href ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href, variant: "ghost", children: title }) : title
|
|
14298
|
-
}
|
|
14299
|
-
),
|
|
14300
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(
|
|
14301
|
-
Text,
|
|
14302
|
-
{
|
|
14303
|
-
size: "sm",
|
|
14304
|
-
variant: "muted",
|
|
14305
|
-
className: cn(
|
|
14306
|
-
"line-clamp-2",
|
|
14307
|
-
size === "compact" ? DOMAIN_TOKENS.spacing.section.titleToSubtitle : DOMAIN_TOKENS.spacing.section.subtitleToMetadata
|
|
14308
|
-
),
|
|
14309
|
-
children: description
|
|
14310
|
-
}
|
|
14311
|
-
)
|
|
14312
|
-
] }),
|
|
14313
|
-
/* @__PURE__ */ jsxRuntime.jsx(CardBaseFooterWrapper, { size, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
|
|
14314
|
-
ctaUrl && /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: ctaUrl, className: cn("w-full", promoCardCtaButtonVariants({ size })), children: [
|
|
14315
|
-
ctaLabel,
|
|
14316
|
-
/* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: promoCardCtaButtonIconVariants({ size }) })
|
|
14317
|
-
] }),
|
|
14318
|
-
!ctaUrl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", promoCardCtaButtonVariants({ size })), children: [
|
|
14319
|
-
ctaLabel,
|
|
14320
|
-
/* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: promoCardCtaButtonIconVariants({ size }) })
|
|
14321
|
-
] })
|
|
14322
|
-
] }) })
|
|
14323
|
-
]
|
|
14324
|
-
}
|
|
14325
|
-
) });
|
|
14326
|
-
}
|
|
14327
|
-
);
|
|
14328
|
-
PromoCard.displayName = "PromoCard";
|
|
14329
|
-
var ticketCardVariants = classVarianceAuthority.cva("group relative", {
|
|
14330
|
-
variants: {
|
|
14331
|
-
size: {
|
|
14332
|
-
default: "",
|
|
14333
|
-
compact: ""
|
|
14334
|
-
},
|
|
14335
|
-
variant: {
|
|
14336
|
-
default: "",
|
|
14337
|
-
featured: ""
|
|
14338
|
-
}
|
|
14339
|
-
},
|
|
14340
|
-
defaultVariants: {
|
|
14341
|
-
size: "default",
|
|
14342
|
-
variant: "default"
|
|
14343
|
-
}
|
|
14344
|
-
});
|
|
14345
|
-
var ticketCardBadgeVariants = classVarianceAuthority.cva(
|
|
14346
|
-
// Base classes - absolute positioning, z-index
|
|
14347
|
-
"absolute z-10",
|
|
14348
|
-
{
|
|
14349
|
-
variants: {
|
|
14350
|
-
size: {
|
|
14351
|
-
default: DOMAIN_TOKENS.badges.position.default,
|
|
14352
|
-
// Default positioning - maps to semanticSpacing.md (16px)
|
|
14353
|
-
compact: DOMAIN_TOKENS.badges.position.compact
|
|
14354
|
-
// Compact positioning - maps to semanticSpacing.sm (8px)
|
|
14355
|
-
}
|
|
14356
|
-
},
|
|
14357
|
-
defaultVariants: {
|
|
14358
|
-
size: "default"
|
|
14359
|
-
}
|
|
14360
|
-
}
|
|
14361
|
-
);
|
|
14362
|
-
var ticketCardBadgeSurfaceVariants = classVarianceAuthority.cva(
|
|
14363
|
-
// Base classes - flex layout, items center, badge styling
|
|
14364
|
-
`inline-flex items-center ${DOMAIN_TOKENS.badges.radius} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.badges.size.sm} ${DOMAIN_TOKENS.badges.text.color} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.semibold}`,
|
|
14365
|
-
{
|
|
14366
|
-
variants: {
|
|
14367
|
-
variant: {
|
|
14368
|
-
default: DOMAIN_TOKENS.badges.surface.default,
|
|
14369
|
-
featured: DOMAIN_TOKENS.badges.surface.featured,
|
|
14370
|
-
vip: DOMAIN_TOKENS.badges.surface.featured,
|
|
14371
|
-
// VIP uses featured gradient
|
|
14372
|
-
discount: DOMAIN_TOKENS.badges.surface.default
|
|
14373
|
-
// Discount badge - using default badge surface
|
|
14374
|
-
}
|
|
14375
|
-
},
|
|
14376
|
-
defaultVariants: {
|
|
14377
|
-
variant: "default"
|
|
14378
|
-
}
|
|
14379
|
-
}
|
|
14380
|
-
);
|
|
14381
|
-
var ticketCardTitleVariants = classVarianceAuthority.cva(
|
|
14382
|
-
`${TEXT_TOKENS.fontSize.lg} ${TEXT_TOKENS.fontWeight.bold} ${MOTION_TOKENS.transition.colors} ${DOMAIN_TOKENS.text.hover.primary} ${DOMAIN_TOKENS.text.lineClamp.two}`,
|
|
14383
|
-
{
|
|
14384
|
-
variants: {
|
|
14385
|
-
size: {
|
|
14386
|
-
default: DOMAIN_TOKENS.spacing.section.subtitleToMetadata,
|
|
14387
|
-
compact: DOMAIN_TOKENS.spacing.section.titleToSubtitle
|
|
14388
|
-
}
|
|
14389
|
-
},
|
|
14390
|
-
defaultVariants: {
|
|
14391
|
-
size: "default"
|
|
14392
|
-
}
|
|
14393
|
-
}
|
|
14394
|
-
);
|
|
14395
|
-
var ticketCardDateVariants = classVarianceAuthority.cva(
|
|
14396
|
-
`${DOMAIN_TOKENS.metadata.text.secondary} ${TEXT_TOKENS.fontSize.sm} ${MOTION_TOKENS.transition.colors}`,
|
|
14397
|
-
{
|
|
14398
|
-
variants: {
|
|
14399
|
-
size: {
|
|
14400
|
-
default: DOMAIN_TOKENS.spacing.section.titleToSubtitle,
|
|
14401
|
-
compact: `${DOMAIN_TOKENS.spacing.section.titleToSubtitle} ${TEXT_TOKENS.fontSize.xs}`
|
|
14402
|
-
}
|
|
14403
|
-
},
|
|
14404
|
-
defaultVariants: {
|
|
14405
|
-
size: "default"
|
|
14406
|
-
}
|
|
14407
|
-
}
|
|
14408
|
-
);
|
|
14409
|
-
var ticketCardDescriptionVariants = classVarianceAuthority.cva(`${DOMAIN_TOKENS.text.lineClamp.two}`, {
|
|
14410
|
-
variants: {
|
|
14411
|
-
size: {
|
|
14412
|
-
default: DOMAIN_TOKENS.spacing.section.subtitleToMetadata,
|
|
14413
|
-
compact: DOMAIN_TOKENS.spacing.section.titleToSubtitle
|
|
14414
|
-
}
|
|
14415
|
-
},
|
|
14416
|
-
defaultVariants: {
|
|
14417
|
-
size: "default"
|
|
14418
|
-
}
|
|
14419
|
-
});
|
|
14420
|
-
var ticketCardPriceCapacityContainerVariants = classVarianceAuthority.cva(
|
|
14421
|
-
// Base classes - flex layout, price/capacity spacing
|
|
14422
|
-
`flex items-center ${DOMAIN_TOKENS.priceCapacity.spacing}`,
|
|
14423
|
-
{
|
|
14424
|
-
variants: {
|
|
14425
|
-
size: {
|
|
14426
|
-
default: "",
|
|
14427
|
-
compact: ""
|
|
14428
|
-
}
|
|
14429
|
-
},
|
|
14430
|
-
defaultVariants: {
|
|
14431
|
-
size: "default"
|
|
14432
|
-
}
|
|
14433
|
-
}
|
|
14434
|
-
);
|
|
14435
|
-
var ticketCardPriceVariants = classVarianceAuthority.cva(
|
|
14436
|
-
// Base classes - price text color
|
|
14437
|
-
`${DOMAIN_TOKENS.priceCapacity.text.primary} ${TEXT_TOKENS.fontWeight.bold}`,
|
|
14438
|
-
{
|
|
14439
|
-
variants: {
|
|
14440
|
-
size: {
|
|
14441
|
-
default: TEXT_TOKENS.fontSize.lg,
|
|
14442
|
-
// Default size
|
|
14443
|
-
compact: TEXT_TOKENS.fontSize.md
|
|
14444
|
-
// Compact size
|
|
14445
|
-
}
|
|
14446
|
-
},
|
|
14447
|
-
defaultVariants: {
|
|
14448
|
-
size: "default"
|
|
14449
|
-
}
|
|
14450
|
-
}
|
|
14451
|
-
);
|
|
14452
|
-
var ticketCardCapacityVariants = classVarianceAuthority.cva(
|
|
14453
|
-
// Base classes - capacity text color
|
|
14454
|
-
`${DOMAIN_TOKENS.priceCapacity.text.secondary}`,
|
|
14455
|
-
{
|
|
14456
|
-
variants: {
|
|
14457
|
-
size: {
|
|
14458
|
-
default: TEXT_TOKENS.fontSize.sm,
|
|
14459
|
-
// Default size
|
|
14460
|
-
compact: TEXT_TOKENS.fontSize.xs
|
|
14461
|
-
// Compact size
|
|
14462
|
-
}
|
|
14463
|
-
},
|
|
14464
|
-
defaultVariants: {
|
|
14465
|
-
size: "default"
|
|
14466
|
-
}
|
|
14467
|
-
}
|
|
14468
|
-
);
|
|
14469
|
-
var ticketCardAvailabilityVariants = classVarianceAuthority.cva(
|
|
14470
|
-
// Base classes - availability indicator styling
|
|
14471
|
-
`inline-flex items-center ${DOMAIN_TOKENS.metadata.spacing.horizontal} ${TEXT_TOKENS.fontSize.xs} ${TEXT_TOKENS.fontWeight.medium}`,
|
|
14472
|
-
{
|
|
14473
|
-
variants: {
|
|
14474
|
-
availability: {
|
|
14475
|
-
available: `${DOMAIN_TOKENS.metadata.text.primary}`,
|
|
14476
|
-
sold_out: `${DOMAIN_TOKENS.metadata.text.secondary} opacity-60`,
|
|
14477
|
-
available_soon: `${DOMAIN_TOKENS.metadata.text.secondary}`
|
|
14478
|
-
}
|
|
14479
|
-
},
|
|
14480
|
-
defaultVariants: {
|
|
14481
|
-
availability: "available"
|
|
14482
|
-
}
|
|
14483
|
-
}
|
|
14484
|
-
);
|
|
14485
|
-
var ticketCardFooterVariants = classVarianceAuthority.cva(
|
|
14486
|
-
// Base classes - border top, spacing
|
|
14487
|
-
"border-t border-border",
|
|
14488
|
-
{
|
|
14489
|
-
variants: {
|
|
14490
|
-
size: {
|
|
14491
|
-
default: DOMAIN_TOKENS.spacing.footer.paddingTopDefault,
|
|
14492
|
-
// Default padding top - references semanticSpacing.sm (8px) via Tailwind
|
|
14493
|
-
compact: DOMAIN_TOKENS.spacing.footer.paddingTopCompact
|
|
14494
|
-
// Compact padding top - references semanticSpacing.xs (4px) via Tailwind
|
|
14495
|
-
}
|
|
14496
|
-
},
|
|
14497
|
-
defaultVariants: {
|
|
14498
|
-
size: "default"
|
|
14499
|
-
}
|
|
14500
|
-
}
|
|
14501
|
-
);
|
|
14502
|
-
var ticketCardPurchaseButtonVariants = classVarianceAuthority.cva(
|
|
14503
|
-
// Base classes - flex layout, badge gradient, motion
|
|
14504
|
-
`inline-flex items-center justify-center ${DOMAIN_TOKENS.badges.surface.featured} ${DOMAIN_TOKENS.badges.text.color} ${DOMAIN_TOKENS.badges.shadow} ${DOMAIN_TOKENS.motion.hover.transition} ${TEXT_TOKENS.fontWeight.semibold} transform`,
|
|
14505
|
-
{
|
|
14506
|
-
variants: {
|
|
14507
|
-
size: {
|
|
14508
|
-
default: DOMAIN_TOKENS.spacing.button.paddingDefault,
|
|
14509
|
-
// Default padding - references semanticSpacing.md (16px) horizontal, xs (4px) vertical via Tailwind
|
|
14510
|
-
compact: DOMAIN_TOKENS.spacing.button.paddingCompact
|
|
14511
|
-
// Compact padding - references semanticSpacing.sm (8px) horizontal, xs (4px) vertical via Tailwind
|
|
14512
|
-
},
|
|
14513
|
-
disabled: {
|
|
14514
|
-
true: "opacity-50 cursor-not-allowed",
|
|
14515
|
-
false: "hover:scale-105 hover:from-accent-600 hover:to-primary-700"
|
|
14516
|
-
}
|
|
14517
|
-
},
|
|
14518
|
-
defaultVariants: {
|
|
14519
|
-
size: "default",
|
|
14520
|
-
disabled: false
|
|
14521
|
-
}
|
|
14522
|
-
}
|
|
14523
|
-
);
|
|
14524
|
-
var ticketCardPurchaseButtonIconVariants = classVarianceAuthority.cva(
|
|
14525
|
-
// Base classes - icon size and spacing
|
|
14526
|
-
`${ICON_TOKENS.sizes.md} ${DOMAIN_TOKENS.spacing.button.iconMarginLeft}`,
|
|
14527
|
-
{
|
|
14528
|
-
variants: {
|
|
14529
|
-
size: {
|
|
14530
|
-
default: "",
|
|
14531
|
-
compact: ""
|
|
14532
|
-
}
|
|
14533
|
-
},
|
|
14534
|
-
defaultVariants: {
|
|
14535
|
-
size: "default"
|
|
14536
|
-
}
|
|
14537
|
-
}
|
|
14538
|
-
);
|
|
14539
|
-
var ticketCardImageOverlayVariants = classVarianceAuthority.cva(
|
|
14540
|
-
`absolute inset-0 ${DOMAIN_TOKENS.image.overlay.gradient} opacity-0 ${MOTION_TOKENS.transition.opacity} ${MOTION_TOKENS.duration.normal} group-hover:opacity-100`,
|
|
14541
|
-
{
|
|
14542
|
-
variants: {
|
|
14543
|
-
size: {
|
|
14544
|
-
default: "",
|
|
14545
|
-
compact: ""
|
|
14546
|
-
}
|
|
14547
|
-
},
|
|
14548
|
-
defaultVariants: {
|
|
14549
|
-
size: "default"
|
|
14550
|
-
}
|
|
14551
|
-
}
|
|
14552
|
-
);
|
|
14553
|
-
var ticketCardImageTransformVariants = classVarianceAuthority.cva(
|
|
14554
|
-
`object-cover ${MOTION_TOKENS.transition.transform} ${MOTION_TOKENS.duration.slow} ${DOMAIN_TOKENS.motion.hover.scale}`,
|
|
14555
|
-
{
|
|
14556
|
-
variants: {
|
|
14557
|
-
size: {
|
|
14558
|
-
default: "",
|
|
14559
|
-
compact: ""
|
|
14560
|
-
}
|
|
14561
|
-
},
|
|
14562
|
-
defaultVariants: {
|
|
14563
|
-
size: "default"
|
|
14564
|
-
}
|
|
14565
|
-
}
|
|
14566
|
-
);
|
|
14567
|
-
var TicketCard = React48__namespace.forwardRef(
|
|
14568
|
-
({
|
|
14569
|
-
title,
|
|
14570
|
-
date,
|
|
14571
|
-
description,
|
|
14572
|
-
price,
|
|
14573
|
-
capacity,
|
|
14574
|
-
availability = "available",
|
|
14575
|
-
imageUrl,
|
|
14576
|
-
href,
|
|
14577
|
-
purchaseUrl,
|
|
14578
|
-
purchaseLabel,
|
|
14579
|
-
vipBadgeText,
|
|
14580
|
-
discountBadgeText,
|
|
14581
|
-
featured = false,
|
|
14582
|
-
featuredBadgeText,
|
|
14583
|
-
showImage = true,
|
|
14584
|
-
size = "default",
|
|
14585
|
-
variant,
|
|
14586
|
-
className,
|
|
14587
|
-
animation,
|
|
14588
|
-
...props
|
|
14589
|
-
}, ref) => {
|
|
14590
|
-
const animationProps = resolveComponentAnimations({
|
|
14591
|
-
animation: animation?.animation || "fadeInUp",
|
|
14592
|
-
hoverAnimation: animation?.hoverAnimation || "hoverLift",
|
|
14593
|
-
animationProps: animation?.animationProps
|
|
14594
|
-
});
|
|
14595
|
-
const cardVariant = variant || (featured ? "featured" : "default");
|
|
14596
|
-
const isPurchaseDisabled = availability === "sold_out" || availability === "available_soon";
|
|
14597
|
-
const getVipBadgePosition = () => {
|
|
14598
|
-
if (!featured || !featuredBadgeText) return "";
|
|
14599
|
-
return size === "compact" ? `${DOMAIN_TOKENS.badges.position.compact} ${DOMAIN_TOKENS.badges.positionY.xl}` : `${DOMAIN_TOKENS.badges.position.default} ${DOMAIN_TOKENS.badges.positionY["2xl"]}`;
|
|
14600
|
-
};
|
|
14601
|
-
const getDiscountBadgePosition = () => {
|
|
14602
|
-
if (!(featured && featuredBadgeText) && !vipBadgeText) return "";
|
|
14603
|
-
return size === "compact" ? `${DOMAIN_TOKENS.badges.position.compact} ${DOMAIN_TOKENS.badges.positionY["2xl"]}` : `${DOMAIN_TOKENS.badges.position.default} ${DOMAIN_TOKENS.badges.positionY["3xl"]}`;
|
|
14604
|
-
};
|
|
14605
|
-
const getAvailabilityLabel = () => {
|
|
14606
|
-
switch (availability) {
|
|
14607
|
-
case "sold_out":
|
|
14608
|
-
return "Sold Out";
|
|
14609
|
-
case "available_soon":
|
|
14610
|
-
return "Available Soon";
|
|
14611
|
-
case "available":
|
|
14612
|
-
default:
|
|
14613
|
-
return null;
|
|
14614
|
-
}
|
|
14615
|
-
};
|
|
14616
|
-
const availabilityLabel = getAvailabilityLabel();
|
|
14617
|
-
const formattedDate = date ? formatDate(date) : null;
|
|
14618
|
-
const dateTimeValue = (() => {
|
|
14619
|
-
if (!date) return null;
|
|
14620
|
-
if (typeof date === "string") {
|
|
14621
|
-
return new Date(date).toISOString();
|
|
14622
|
-
}
|
|
14623
|
-
if (date instanceof Date) {
|
|
14624
|
-
return date.toISOString();
|
|
14625
|
-
}
|
|
14626
|
-
return new Date(date).toISOString();
|
|
14627
|
-
})();
|
|
14628
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...animationProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
14629
|
-
CardBase,
|
|
14630
|
-
{
|
|
14631
|
-
ref,
|
|
14632
|
-
size,
|
|
14633
|
-
variant: cardVariant,
|
|
14634
|
-
className: cn(ticketCardVariants({ size, variant: cardVariant }), className),
|
|
14635
|
-
...props,
|
|
14636
|
-
children: [
|
|
14637
|
-
featured && featuredBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ticketCardBadgeVariants({ size }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "featured" }), children: featuredBadgeText }) }),
|
|
14638
|
-
vipBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(ticketCardBadgeVariants({ size }), getVipBadgePosition()), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "vip" }), children: vipBadgeText }) }),
|
|
14639
|
-
discountBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(ticketCardBadgeVariants({ size }), getDiscountBadgePosition()), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ticketCardBadgeSurfaceVariants({ variant: "discount" }), children: discountBadgeText }) }),
|
|
14640
|
-
showImage && /* @__PURE__ */ jsxRuntime.jsx(CardBaseImageWrapper, { size, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
14641
|
-
"div",
|
|
14642
|
-
{
|
|
14643
|
-
className: cn(
|
|
14644
|
-
"relative w-full overflow-hidden",
|
|
14645
|
-
DOMAIN_TOKENS.image.placeholder.gradient
|
|
14646
|
-
),
|
|
14647
|
-
children: [
|
|
14648
|
-
imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
14649
|
-
"img",
|
|
14650
|
-
{
|
|
14651
|
-
src: imageUrl,
|
|
14652
|
-
alt: title,
|
|
14653
|
-
className: cn("h-full w-full", ticketCardImageTransformVariants({ size }))
|
|
14654
|
-
}
|
|
14655
|
-
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
14656
|
-
Icon2,
|
|
14657
|
-
{
|
|
14658
|
-
name: "info",
|
|
14659
|
-
size: "xl",
|
|
14660
|
-
color: "muted",
|
|
14661
|
-
className: ICON_TOKENS.sizes["4xl"],
|
|
14662
|
-
"aria-hidden": "true"
|
|
14663
|
-
}
|
|
14664
|
-
) }),
|
|
14665
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: ticketCardImageOverlayVariants({ size }) })
|
|
14666
|
-
]
|
|
14667
|
-
}
|
|
14668
|
-
) }),
|
|
14669
|
-
/* @__PURE__ */ jsxRuntime.jsxs(CardBaseContentWrapper, { size, children: [
|
|
14670
|
-
/* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, className: ticketCardTitleVariants({ size }), children: href ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href, variant: "ghost", children: title }) : title }),
|
|
14671
|
-
formattedDate && dateTimeValue && /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: dateTimeValue, className: ticketCardDateVariants({ size }), children: formattedDate }),
|
|
14672
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", variant: "muted", className: ticketCardDescriptionVariants({ size }), children: description }),
|
|
14673
|
-
(price || capacity) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ticketCardPriceCapacityContainerVariants({ size }), children: [
|
|
14674
|
-
price && /* @__PURE__ */ jsxRuntime.jsx(
|
|
14675
|
-
Text,
|
|
14676
|
-
{
|
|
14677
|
-
size: size === "compact" ? "md" : "lg",
|
|
14678
|
-
weight: "bold",
|
|
14679
|
-
className: ticketCardPriceVariants({ size }),
|
|
14680
|
-
children: price
|
|
14681
|
-
}
|
|
14682
|
-
),
|
|
14683
|
-
capacity && /* @__PURE__ */ jsxRuntime.jsx(
|
|
14684
|
-
Text,
|
|
14685
|
-
{
|
|
14686
|
-
size: size === "compact" ? "xs" : "sm",
|
|
14687
|
-
variant: "muted",
|
|
14688
|
-
className: ticketCardCapacityVariants({ size }),
|
|
14689
|
-
children: capacity
|
|
14690
|
-
}
|
|
14691
|
-
)
|
|
14692
|
-
] }),
|
|
14693
|
-
availabilityLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ticketCardAvailabilityVariants({ availability }), children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", variant: availability === "sold_out" ? "muted" : "primary", children: availabilityLabel }) })
|
|
14694
|
-
] }),
|
|
14695
|
-
/* @__PURE__ */ jsxRuntime.jsx(CardBaseFooterWrapper, { size, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", ticketCardFooterVariants({ size })), children: [
|
|
14696
|
-
purchaseUrl && !isPurchaseDisabled && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
14697
|
-
Link,
|
|
14698
|
-
{
|
|
14699
|
-
href: purchaseUrl,
|
|
14700
|
-
className: cn(
|
|
14701
|
-
"w-full",
|
|
14702
|
-
ticketCardPurchaseButtonVariants({ size, disabled: false })
|
|
14703
|
-
),
|
|
14704
|
-
target: "_blank",
|
|
14705
|
-
rel: "noopener noreferrer",
|
|
14706
|
-
children: [
|
|
14707
|
-
purchaseLabel,
|
|
14708
|
-
/* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size }) })
|
|
14709
|
-
]
|
|
14710
|
-
}
|
|
14711
|
-
),
|
|
14712
|
-
(!purchaseUrl || isPurchaseDisabled) && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
14713
|
-
"div",
|
|
14714
|
-
{
|
|
14715
|
-
className: cn(
|
|
14716
|
-
"w-full",
|
|
14717
|
-
ticketCardPurchaseButtonVariants({ size, disabled: isPurchaseDisabled })
|
|
14718
|
-
),
|
|
14719
|
-
children: [
|
|
14720
|
-
purchaseLabel,
|
|
14721
|
-
/* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, { className: ticketCardPurchaseButtonIconVariants({ size }) })
|
|
14722
|
-
]
|
|
14723
|
-
}
|
|
14724
|
-
)
|
|
14725
|
-
] }) })
|
|
14726
|
-
]
|
|
14727
|
-
}
|
|
14728
|
-
) });
|
|
14729
|
-
}
|
|
14730
|
-
);
|
|
14731
|
-
TicketCard.displayName = "TicketCard";
|
|
14732
|
-
|
|
14733
12806
|
exports.ALERT_TOKENS = ALERT_TOKENS;
|
|
14734
12807
|
exports.Alert = Alert;
|
|
14735
|
-
exports.
|
|
12808
|
+
exports.BADGE_VARIANTS = BADGE_VARIANTS;
|
|
14736
12809
|
exports.BUTTON_TOKENS = BUTTON_TOKENS;
|
|
14737
12810
|
exports.Backdrop = Backdrop;
|
|
12811
|
+
exports.Badge = Badge;
|
|
14738
12812
|
exports.Box = Box;
|
|
14739
12813
|
exports.Breadcrumbs = Breadcrumbs;
|
|
14740
12814
|
exports.Button = Button;
|
|
@@ -14744,7 +12818,6 @@ exports.Card = Card;
|
|
|
14744
12818
|
exports.CardBody = CardBody;
|
|
14745
12819
|
exports.CardFooter = CardFooter;
|
|
14746
12820
|
exports.CardHeader = CardHeader;
|
|
14747
|
-
exports.CategoryCard = CategoryCard;
|
|
14748
12821
|
exports.Checkbox = Checkbox;
|
|
14749
12822
|
exports.Column = Column;
|
|
14750
12823
|
exports.Container = Container;
|
|
@@ -14763,7 +12836,6 @@ exports.ContextMenuSubContent = ContextMenuSubContent;
|
|
|
14763
12836
|
exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
|
|
14764
12837
|
exports.ContextMenuTrigger = ContextMenuTrigger;
|
|
14765
12838
|
exports.DATA_TOKENS = DATA_TOKENS;
|
|
14766
|
-
exports.DOMAIN_TOKENS = DOMAIN_TOKENS;
|
|
14767
12839
|
exports.DataList = DataListRoot;
|
|
14768
12840
|
exports.DataListItem = DataListItem;
|
|
14769
12841
|
exports.DataListLabel = DataListLabel;
|
|
@@ -14781,7 +12853,6 @@ exports.EmptyStateAction = EmptyStateAction;
|
|
|
14781
12853
|
exports.EmptyStateDescription = EmptyStateDescription;
|
|
14782
12854
|
exports.EmptyStateIcon = EmptyStateIcon;
|
|
14783
12855
|
exports.EmptyStateTitle = EmptyStateTitle;
|
|
14784
|
-
exports.EventCard = EventCard;
|
|
14785
12856
|
exports.Field = FieldRoot;
|
|
14786
12857
|
exports.Flex = Flex;
|
|
14787
12858
|
exports.Grid = Grid;
|
|
@@ -14807,7 +12878,10 @@ exports.IconSearch = IconSearch;
|
|
|
14807
12878
|
exports.IconSuccess = IconSuccess;
|
|
14808
12879
|
exports.IconWarning = IconWarning;
|
|
14809
12880
|
exports.Input = Input;
|
|
12881
|
+
exports.LINK_SIZES = LINK_SIZES;
|
|
12882
|
+
exports.LINK_VARIANTS = LINK_VARIANTS;
|
|
14810
12883
|
exports.Label = Label2;
|
|
12884
|
+
exports.Link = Link;
|
|
14811
12885
|
exports.MENU_TOKENS = MENU_TOKENS;
|
|
14812
12886
|
exports.MOTION_TOKENS = MOTION_TOKENS;
|
|
14813
12887
|
exports.Modal = Modal;
|
|
@@ -14834,8 +12908,6 @@ exports.OVERLAY_TOKENS = OVERLAY_TOKENS;
|
|
|
14834
12908
|
exports.POPOVER_TOKENS = POPOVER_TOKENS;
|
|
14835
12909
|
exports.Pagination = Pagination;
|
|
14836
12910
|
exports.Portal = Portal3;
|
|
14837
|
-
exports.Progress = Progress;
|
|
14838
|
-
exports.PromoCard = PromoCard;
|
|
14839
12911
|
exports.RADIO_TOKENS = RADIO_TOKENS;
|
|
14840
12912
|
exports.Radio = Radio;
|
|
14841
12913
|
exports.RadioGroup = RadioGroup;
|
|
@@ -14879,7 +12951,6 @@ exports.TableSortIcon = TableSortIcon;
|
|
|
14879
12951
|
exports.Tabs = Tabs;
|
|
14880
12952
|
exports.Text = Text;
|
|
14881
12953
|
exports.Textarea = Textarea;
|
|
14882
|
-
exports.TicketCard = TicketCard;
|
|
14883
12954
|
exports.Toast = Toast;
|
|
14884
12955
|
exports.ToastProvider = ToastProvider;
|
|
14885
12956
|
exports.ToastViewport = ToastViewport;
|
|
@@ -14891,6 +12962,7 @@ exports.alertVariants = alertVariants;
|
|
|
14891
12962
|
exports.allCSSVariables = allCSSVariables;
|
|
14892
12963
|
exports.allCSSVariablesCSS = allCSSVariablesCSS;
|
|
14893
12964
|
exports.animations = animations;
|
|
12965
|
+
exports.badgeVariants = badgeVariants;
|
|
14894
12966
|
exports.baseColors = baseColors;
|
|
14895
12967
|
exports.borderRadius = borderRadius;
|
|
14896
12968
|
exports.buttonVariants = buttonVariants;
|
|
@@ -14919,6 +12991,7 @@ exports.labelVariants = labelVariants;
|
|
|
14919
12991
|
exports.layoutSpacing = layoutSpacing;
|
|
14920
12992
|
exports.letterSpacing = letterSpacing;
|
|
14921
12993
|
exports.lineHeight = lineHeight;
|
|
12994
|
+
exports.linkVariants = linkVariants;
|
|
14922
12995
|
exports.motionCSSVariables = motionCSSVariables;
|
|
14923
12996
|
exports.motionV2CSSVariables = motionV2CSSVariables;
|
|
14924
12997
|
exports.motionV2Combined = motionV2Combined;
|