@maxsteinwender/sort-ui 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -23
- package/dist/index.d.mts +9 -1
- package/dist/index.d.ts +9 -1
- package/dist/index.js +97 -59
- package/dist/index.mjs +97 -59
- package/dist/styles.css +459 -24
- package/dist/tailwind-preset.js +24 -1
- package/dist/tailwind-preset.mjs +24 -1
- package/package.json +8 -2
package/dist/index.mjs
CHANGED
|
@@ -238,17 +238,17 @@ var buttonVariants = cva(
|
|
|
238
238
|
variants: {
|
|
239
239
|
variant: {
|
|
240
240
|
// Primary — Sort UI: bg/state/primary, text/white-default, icon/white-default
|
|
241
|
-
default: "bg-sui-bg-state-primary text-sui-text-white-default [text-shadow:var(--shadow-text)] [&_i]:text-icon-white-default [&_i]:[text-shadow:none] [&_svg]:text-icon-white-default [&_svg]:[text-shadow:none] shadow-button-default active:shadow-button-press hover:bg-sui-bg-state-primary-hover active:bg-sui-bg-state-primary-press disabled:bg-sui-bg-state-disabled disabled:[text-shadow:none]",
|
|
241
|
+
default: "bg-sui-bg-state-primary text-sui-text-white-default [text-shadow:var(--shadow-text)] [&_i]:text-icon-white-default [&_i]:[text-shadow:none] [&_svg]:text-icon-white-default [&_svg]:[text-shadow:none] shadow-button-default active:shadow-button-press [@media(hover:hover)]:hover:bg-sui-bg-state-primary-hover active:bg-sui-bg-state-primary-press disabled:bg-sui-bg-state-disabled disabled:[text-shadow:none]",
|
|
242
242
|
// Soft — Sort UI: bg/state/soft, text/subtle, icon/default-muted
|
|
243
|
-
secondary: "bg-sui-bg-state-soft text-sui-text-subtle [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted hover:bg-sui-bg-state-soft-hover active:bg-sui-bg-state-soft-press disabled:bg-sui-bg-state-disabled",
|
|
243
|
+
secondary: "bg-sui-bg-state-soft text-sui-text-subtle [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted [@media(hover:hover)]:hover:bg-sui-bg-state-soft-hover active:bg-sui-bg-state-soft-press disabled:bg-sui-bg-state-disabled",
|
|
244
244
|
// Secondary — Sort UI: bg/state/secondary, border/darker, text/default, icon/default-muted
|
|
245
|
-
outline: "bg-sui-bg-state-secondary border border-sui-border-darker text-sui-text-default [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted shadow-button-secondary active:shadow-button-secondary-press hover:bg-sui-bg-state-secondary-hover active:bg-sui-bg-state-secondary-press disabled:bg-sui-bg-state-disabled disabled:border-sui-border-default",
|
|
245
|
+
outline: "bg-sui-bg-state-secondary border border-sui-border-darker text-sui-text-default [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted shadow-button-secondary active:shadow-button-secondary-press [@media(hover:hover)]:hover:bg-sui-bg-state-secondary-hover active:bg-sui-bg-state-secondary-press disabled:bg-sui-bg-state-disabled disabled:border-sui-border-default",
|
|
246
246
|
// Ghost — Sort UI: bg/state/ghost, text/default, icon/default-muted
|
|
247
|
-
ghost: "bg-sui-bg-state-ghost text-sui-text-default [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
|
|
247
|
+
ghost: "bg-sui-bg-state-ghost text-sui-text-default [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted [@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
|
|
248
248
|
// Destructive — Sort UI: bg/state/destructive, text/white-default, icon/white-default
|
|
249
|
-
destructive: "bg-sui-bg-state-destructive text-sui-text-white-default [text-shadow:var(--shadow-text)] [&_i]:text-icon-white-default [&_i]:[text-shadow:none] [&_svg]:text-icon-white-default [&_svg]:[text-shadow:none] shadow-button-default active:shadow-button-press hover:bg-sui-bg-state-destructive-hover active:bg-sui-bg-state-destructive-press disabled:bg-sui-bg-state-disabled disabled:[text-shadow:none]",
|
|
249
|
+
destructive: "bg-sui-bg-state-destructive text-sui-text-white-default [text-shadow:var(--shadow-text)] [&_i]:text-icon-white-default [&_i]:[text-shadow:none] [&_svg]:text-icon-white-default [&_svg]:[text-shadow:none] shadow-button-default active:shadow-button-press [@media(hover:hover)]:hover:bg-sui-bg-state-destructive-hover active:bg-sui-bg-state-destructive-press disabled:bg-sui-bg-state-disabled disabled:[text-shadow:none]",
|
|
250
250
|
// Ghost Muted — Sort UI: bg/state/ghost, text/muted, icon/default-muted
|
|
251
|
-
"ghost-muted": "bg-sui-bg-state-ghost text-sui-text-muted [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press"
|
|
251
|
+
"ghost-muted": "bg-sui-bg-state-ghost text-sui-text-muted [&_i]:text-icon-default-muted [&_svg]:text-icon-default-muted [@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press"
|
|
252
252
|
},
|
|
253
253
|
shape: {
|
|
254
254
|
rounded: "rounded-md",
|
|
@@ -791,8 +791,10 @@ var Avatar = React77.forwardRef((_a, ref) => {
|
|
|
791
791
|
ring = false,
|
|
792
792
|
topBadge = false,
|
|
793
793
|
topBadgeVariant = "verified",
|
|
794
|
+
topBadgeLabel,
|
|
794
795
|
bottomBadge = false,
|
|
795
796
|
bottomBadgeVariant = "online",
|
|
797
|
+
bottomBadgeLabel,
|
|
796
798
|
color = "gray",
|
|
797
799
|
children
|
|
798
800
|
} = _b, props = __objRest(_b, [
|
|
@@ -805,8 +807,10 @@ var Avatar = React77.forwardRef((_a, ref) => {
|
|
|
805
807
|
"ring",
|
|
806
808
|
"topBadge",
|
|
807
809
|
"topBadgeVariant",
|
|
810
|
+
"topBadgeLabel",
|
|
808
811
|
"bottomBadge",
|
|
809
812
|
"bottomBadgeVariant",
|
|
813
|
+
"bottomBadgeLabel",
|
|
810
814
|
"color",
|
|
811
815
|
"children"
|
|
812
816
|
]);
|
|
@@ -842,6 +846,11 @@ var Avatar = React77.forwardRef((_a, ref) => {
|
|
|
842
846
|
})
|
|
843
847
|
) });
|
|
844
848
|
}
|
|
849
|
+
const badgeLabelParts = [
|
|
850
|
+
topBadge && topBadgeLabel ? topBadgeLabel : null,
|
|
851
|
+
bottomBadge && bottomBadgeLabel ? bottomBadgeLabel : null
|
|
852
|
+
].filter(Boolean);
|
|
853
|
+
const wrapperAriaLabel = badgeLabelParts.length > 0 ? [alt, badgeLabelParts.join(", ")].filter(Boolean).join(" \u2014 ") : alt || void 0;
|
|
845
854
|
const offset = (_a2 = badgeOffset[resolvedSize]) != null ? _a2 : badgeOffset["md"];
|
|
846
855
|
const topPositionClasses = `${offset.top} ${offset.right}`;
|
|
847
856
|
const bottomPositionClasses = `${offset.bottom} ${offset.right}`;
|
|
@@ -854,7 +863,9 @@ var Avatar = React77.forwardRef((_a, ref) => {
|
|
|
854
863
|
// Wrapper = avatar size (NOT ring size) — badges positioned relative to this
|
|
855
864
|
avatarWrapperSize[resolvedSize],
|
|
856
865
|
className
|
|
857
|
-
)
|
|
866
|
+
),
|
|
867
|
+
"aria-label": wrapperAriaLabel,
|
|
868
|
+
role: wrapperAriaLabel ? "img" : void 0
|
|
858
869
|
}, props), {
|
|
859
870
|
children: [
|
|
860
871
|
ring && /* @__PURE__ */ jsx(
|
|
@@ -922,7 +933,7 @@ var Avatar = React77.forwardRef((_a, ref) => {
|
|
|
922
933
|
})
|
|
923
934
|
) });
|
|
924
935
|
});
|
|
925
|
-
Avatar.displayName =
|
|
936
|
+
Avatar.displayName = "Avatar";
|
|
926
937
|
var AvatarImage = React77.forwardRef((_a, ref) => {
|
|
927
938
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
928
939
|
return /* @__PURE__ */ jsx(
|
|
@@ -933,7 +944,7 @@ var AvatarImage = React77.forwardRef((_a, ref) => {
|
|
|
933
944
|
}, props)
|
|
934
945
|
);
|
|
935
946
|
});
|
|
936
|
-
AvatarImage.displayName =
|
|
947
|
+
AvatarImage.displayName = "AvatarImage";
|
|
937
948
|
var AvatarFallback = React77.forwardRef((_a, ref) => {
|
|
938
949
|
var _b = _a, { className, fallback, children } = _b, props = __objRest(_b, ["className", "fallback", "children"]);
|
|
939
950
|
var _a2, _b2, _c;
|
|
@@ -965,7 +976,7 @@ var AvatarFallback = React77.forwardRef((_a, ref) => {
|
|
|
965
976
|
})
|
|
966
977
|
);
|
|
967
978
|
});
|
|
968
|
-
AvatarFallback.displayName =
|
|
979
|
+
AvatarFallback.displayName = "AvatarFallback";
|
|
969
980
|
var avatarButtonVariants = cva(
|
|
970
981
|
"relative inline-flex items-center rounded-full whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-sui-border-highlight focus-visible:ring-offset-[1px] focus-visible:ring-offset-sui-bg-default disabled:pointer-events-none after:absolute after:content-[''] after:inset-x-0",
|
|
971
982
|
{
|
|
@@ -1479,41 +1490,55 @@ var BreadcrumbEllipsis = (_a) => {
|
|
|
1479
1490
|
);
|
|
1480
1491
|
};
|
|
1481
1492
|
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
|
|
1493
|
+
var dividerVariants = cva(
|
|
1494
|
+
"flex size-5 shrink-0 items-center justify-center",
|
|
1495
|
+
{
|
|
1496
|
+
variants: {
|
|
1497
|
+
variant: {
|
|
1498
|
+
slash: "",
|
|
1499
|
+
arrow: "",
|
|
1500
|
+
dot: ""
|
|
1501
|
+
}
|
|
1502
|
+
},
|
|
1503
|
+
defaultVariants: {
|
|
1504
|
+
variant: "slash"
|
|
1505
|
+
}
|
|
1506
|
+
}
|
|
1507
|
+
);
|
|
1482
1508
|
function BreadcrumbDivider({ variant }) {
|
|
1483
|
-
return /* @__PURE__ */ jsxs("span", { className:
|
|
1509
|
+
return /* @__PURE__ */ jsxs("span", { className: dividerVariants({ variant }), "aria-hidden": "true", children: [
|
|
1484
1510
|
variant === "slash" && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium leading-5 text-sui-text-hint", children: "/" }),
|
|
1485
1511
|
variant === "arrow" && /* @__PURE__ */ jsx("i", { className: "ri-arrow-right-s-line text-xl leading-none text-sui-text-muted" }),
|
|
1486
1512
|
variant === "dot" && /* @__PURE__ */ jsx("span", { className: "size-1 rounded-full bg-sui-text-muted" })
|
|
1487
1513
|
] });
|
|
1488
1514
|
}
|
|
1489
|
-
|
|
1490
|
-
items,
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
}
|
|
1515
|
+
var SortBreadcrumb = React77.forwardRef(
|
|
1516
|
+
({ items, variant = "slash", className }, ref) => {
|
|
1517
|
+
return /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx(
|
|
1518
|
+
"ol",
|
|
1519
|
+
{
|
|
1520
|
+
className: cn(
|
|
1521
|
+
"flex items-center gap-sui-2",
|
|
1522
|
+
className
|
|
1523
|
+
),
|
|
1524
|
+
children: items.map((item, index) => {
|
|
1525
|
+
const isLast = index === items.length - 1;
|
|
1526
|
+
return /* @__PURE__ */ jsxs(React77.Fragment, { children: [
|
|
1527
|
+
/* @__PURE__ */ jsx("li", { className: "inline-flex", children: /* @__PURE__ */ jsx(
|
|
1528
|
+
SortBreadcrumbItem,
|
|
1529
|
+
__spreadProps(__spreadValues({}, item), {
|
|
1530
|
+
state: isLast ? "current" : "default",
|
|
1531
|
+
leadIcon: item.leadIcon
|
|
1532
|
+
})
|
|
1533
|
+
) }),
|
|
1534
|
+
!isLast && /* @__PURE__ */ jsx("li", { className: "inline-flex", role: "presentation", children: /* @__PURE__ */ jsx(BreadcrumbDivider, { variant }) })
|
|
1535
|
+
] }, index);
|
|
1536
|
+
})
|
|
1537
|
+
}
|
|
1538
|
+
) });
|
|
1539
|
+
}
|
|
1540
|
+
);
|
|
1541
|
+
SortBreadcrumb.displayName = "SortBreadcrumb";
|
|
1517
1542
|
function SortBreadcrumbItem({
|
|
1518
1543
|
label,
|
|
1519
1544
|
href,
|
|
@@ -1690,6 +1715,7 @@ var ButtonGroupItem = React77.forwardRef(
|
|
|
1690
1715
|
showSeparator = false,
|
|
1691
1716
|
size = "lg",
|
|
1692
1717
|
disabled = false,
|
|
1718
|
+
asChild = false,
|
|
1693
1719
|
className
|
|
1694
1720
|
} = _b, props = __objRest(_b, [
|
|
1695
1721
|
"label",
|
|
@@ -1700,14 +1726,16 @@ var ButtonGroupItem = React77.forwardRef(
|
|
|
1700
1726
|
"showSeparator",
|
|
1701
1727
|
"size",
|
|
1702
1728
|
"disabled",
|
|
1729
|
+
"asChild",
|
|
1703
1730
|
"className"
|
|
1704
1731
|
]);
|
|
1705
1732
|
const s = size != null ? size : "lg";
|
|
1733
|
+
const Comp = asChild ? Slot : "button";
|
|
1706
1734
|
return /* @__PURE__ */ jsxs(
|
|
1707
|
-
|
|
1735
|
+
Comp,
|
|
1708
1736
|
__spreadProps(__spreadValues({
|
|
1709
1737
|
ref,
|
|
1710
|
-
type: "button",
|
|
1738
|
+
type: asChild ? void 0 : "button",
|
|
1711
1739
|
disabled,
|
|
1712
1740
|
className: cn(
|
|
1713
1741
|
buttonGroupItemVariants({ size }),
|
|
@@ -2004,8 +2032,8 @@ var socialButtonVariants = cva(
|
|
|
2004
2032
|
variants: {
|
|
2005
2033
|
variant: {
|
|
2006
2034
|
// --sb-bg is a runtime brand slot set via inline style — intentional, not a token violation
|
|
2007
|
-
brand: "bg-[var(--sb-bg,var(--social-brand-default))] text-sui-text-white-default shadow-button-default active:shadow-button-press hover:bg-[color-mix(in_srgb,#fff_15%,var(--sb-bg,var(--social-brand-default)))] active:bg-[color-mix(in_srgb,#fff_25%,var(--sb-bg,var(--social-brand-default)))]",
|
|
2008
|
-
secondary: "bg-sui-bg-
|
|
2035
|
+
brand: "bg-[var(--sb-bg,var(--social-brand-default))] text-sui-text-white-default shadow-button-default active:shadow-button-press [@media(hover:hover)]:hover:bg-[color-mix(in_srgb,#fff_15%,var(--sb-bg,var(--social-brand-default)))] active:bg-[color-mix(in_srgb,#fff_25%,var(--sb-bg,var(--social-brand-default)))]",
|
|
2036
|
+
secondary: "bg-sui-bg-state-secondary border border-sui-border-darker text-sui-text-default shadow-button-secondary active:shadow-button-secondary-press [@media(hover:hover)]:hover:bg-sui-bg-state-secondary-hover active:bg-sui-bg-state-secondary-press"
|
|
2009
2037
|
},
|
|
2010
2038
|
shape: {
|
|
2011
2039
|
rounded: "rounded-md",
|
|
@@ -3032,25 +3060,25 @@ var unselectedStyles = {
|
|
|
3032
3060
|
default: [
|
|
3033
3061
|
"bg-sui-bg-state-secondary border-sui-border-darker text-sui-text-muted",
|
|
3034
3062
|
"[&_i]:text-icon-default-muted",
|
|
3035
|
-
"hover:bg-sui-bg-state-secondary-hover hover:text-sui-text-subtle hover:[&_i]:text-icon-default-subtle",
|
|
3063
|
+
"[@media(hover:hover)]:hover:bg-sui-bg-state-secondary-hover [@media(hover:hover)]:hover:text-sui-text-subtle [@media(hover:hover)]:hover:[&_i]:text-icon-default-subtle",
|
|
3036
3064
|
"active:bg-sui-bg-state-secondary-press active:text-sui-text-subtle active:[&_i]:text-icon-default-subtle"
|
|
3037
3065
|
].join(" "),
|
|
3038
3066
|
soft: [
|
|
3039
3067
|
"bg-sui-bg-state-soft text-sui-text-muted",
|
|
3040
3068
|
"[&_i]:text-icon-default-muted",
|
|
3041
|
-
"hover:bg-sui-bg-state-soft-hover hover:text-sui-text-subtle hover:[&_i]:text-icon-default-subtle",
|
|
3069
|
+
"[@media(hover:hover)]:hover:bg-sui-bg-state-soft-hover [@media(hover:hover)]:hover:text-sui-text-subtle [@media(hover:hover)]:hover:[&_i]:text-icon-default-subtle",
|
|
3042
3070
|
"active:bg-sui-bg-state-soft-press active:text-sui-text-subtle active:[&_i]:text-icon-default-subtle"
|
|
3043
3071
|
].join(" "),
|
|
3044
3072
|
ghost: [
|
|
3045
3073
|
"bg-sui-bg-state-ghost text-sui-text-muted",
|
|
3046
3074
|
"[&_i]:text-icon-default-muted",
|
|
3047
|
-
"hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-subtle hover:[&_i]:text-icon-default-subtle",
|
|
3075
|
+
"[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-subtle [@media(hover:hover)]:hover:[&_i]:text-icon-default-subtle",
|
|
3048
3076
|
"active:bg-sui-bg-state-ghost-press active:text-sui-text-subtle active:[&_i]:text-icon-default-subtle"
|
|
3049
3077
|
].join(" "),
|
|
3050
3078
|
"ghost-muted": [
|
|
3051
3079
|
"bg-sui-bg-state-ghost text-sui-text-muted",
|
|
3052
3080
|
"[&_i]:text-icon-default-muted",
|
|
3053
|
-
"hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-subtle hover:[&_i]:text-icon-default-subtle",
|
|
3081
|
+
"[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-subtle [@media(hover:hover)]:hover:[&_i]:text-icon-default-subtle",
|
|
3054
3082
|
"active:bg-sui-bg-state-ghost-press active:text-sui-text-subtle active:[&_i]:text-icon-default-subtle"
|
|
3055
3083
|
].join(" ")
|
|
3056
3084
|
};
|
|
@@ -3183,7 +3211,16 @@ var Chip = React77.forwardRef(
|
|
|
3183
3211
|
)
|
|
3184
3212
|
}), props), {
|
|
3185
3213
|
children: [
|
|
3186
|
-
(leadIcon || iconOnly) && /* @__PURE__ */ jsx(
|
|
3214
|
+
(leadIcon || iconOnly) && /* @__PURE__ */ jsx(
|
|
3215
|
+
"i",
|
|
3216
|
+
{
|
|
3217
|
+
className: cn(
|
|
3218
|
+
iconName,
|
|
3219
|
+
selected && iconOnly && v === "ghost-muted" && "text-icon-default"
|
|
3220
|
+
),
|
|
3221
|
+
"aria-hidden": "true"
|
|
3222
|
+
}
|
|
3223
|
+
),
|
|
3187
3224
|
!iconOnly && /* @__PURE__ */ jsx("span", { className: cn("px-sui-2", labelClasses2[s]), children: label })
|
|
3188
3225
|
]
|
|
3189
3226
|
})
|
|
@@ -5458,7 +5495,7 @@ function DatePickerInput({
|
|
|
5458
5495
|
] });
|
|
5459
5496
|
}
|
|
5460
5497
|
DatePickerInput.displayName = "DatePickerInput";
|
|
5461
|
-
var
|
|
5498
|
+
var dividerVariants2 = cva("flex w-full items-center", {
|
|
5462
5499
|
variants: {
|
|
5463
5500
|
type: {
|
|
5464
5501
|
default: "gap-0",
|
|
@@ -5519,7 +5556,7 @@ var Divider = React77.forwardRef(
|
|
|
5519
5556
|
ref,
|
|
5520
5557
|
role: "separator",
|
|
5521
5558
|
"aria-orientation": "horizontal",
|
|
5522
|
-
className: cn(
|
|
5559
|
+
className: cn(dividerVariants2({ type }), className)
|
|
5523
5560
|
}, props), {
|
|
5524
5561
|
children: [
|
|
5525
5562
|
showLeftLine && /* @__PURE__ */ jsx("div", { className: lineClasses }),
|
|
@@ -7895,7 +7932,7 @@ var pageItemVariants = cva(
|
|
|
7895
7932
|
// Default state
|
|
7896
7933
|
"bg-sui-bg-state-ghost text-sui-text-hint",
|
|
7897
7934
|
// Hover state
|
|
7898
|
-
"hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-muted",
|
|
7935
|
+
"[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-muted",
|
|
7899
7936
|
// Disabled state
|
|
7900
7937
|
"disabled:bg-sui-bg-state-ghost disabled:text-sui-text-hint"
|
|
7901
7938
|
].join(" "),
|
|
@@ -7906,7 +7943,7 @@ var pageItemVariants = cva(
|
|
|
7906
7943
|
// Default state
|
|
7907
7944
|
"bg-sui-bg-state-soft",
|
|
7908
7945
|
// Hover state (soft-hover too subtle for small dots, use stronger token)
|
|
7909
|
-
"hover:bg-sui-bg-state-soft-hover",
|
|
7946
|
+
"[@media(hover:hover)]:hover:bg-sui-bg-state-soft-hover",
|
|
7910
7947
|
// Disabled state
|
|
7911
7948
|
"disabled:bg-sui-bg-state-disabled"
|
|
7912
7949
|
].join(" ")
|
|
@@ -7922,17 +7959,18 @@ var activeDefaultClasses = [
|
|
|
7922
7959
|
// Blue text/border: uses bg-basic-blue tokens because text-informative shifts to orange in Theme 2
|
|
7923
7960
|
"text-sui-bg-basic-blue-strong",
|
|
7924
7961
|
"border border-sui-bg-basic-blue-accent",
|
|
7925
|
-
"hover:bg-sui-bg-state-ghost hover:text-sui-bg-basic-blue-strong"
|
|
7962
|
+
"[@media(hover:hover)]:hover:bg-sui-bg-state-ghost [@media(hover:hover)]:hover:text-sui-bg-basic-blue-strong"
|
|
7926
7963
|
].join(" ");
|
|
7927
7964
|
var activeDotClasses = [
|
|
7928
7965
|
"bg-sui-bg-basic-blue-accent",
|
|
7929
|
-
"hover:bg-sui-bg-basic-blue-accent"
|
|
7966
|
+
"[@media(hover:hover)]:hover:bg-sui-bg-basic-blue-accent"
|
|
7930
7967
|
].join(" ");
|
|
7931
7968
|
var PageItem = React77.forwardRef(
|
|
7932
7969
|
(_a, ref) => {
|
|
7933
|
-
var _b = _a, { className, variant = "default", active = false, label = "0", disabled } = _b, props = __objRest(_b, ["className", "variant", "active", "label", "disabled"]);
|
|
7970
|
+
var _b = _a, { className, variant = "default", active = false, label = "0", disabled, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "active", "label", "disabled", "asChild"]);
|
|
7971
|
+
const Comp = asChild ? Slot : "button";
|
|
7934
7972
|
return /* @__PURE__ */ jsx(
|
|
7935
|
-
|
|
7973
|
+
Comp,
|
|
7936
7974
|
__spreadProps(__spreadValues({
|
|
7937
7975
|
ref,
|
|
7938
7976
|
disabled,
|
|
@@ -10555,7 +10593,7 @@ var interactiveBase = [
|
|
|
10555
10593
|
"flex items-center rounded-sm",
|
|
10556
10594
|
"transition-colors cursor-pointer",
|
|
10557
10595
|
"bg-sui-bg-state-ghost",
|
|
10558
|
-
"hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
|
|
10596
|
+
"[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
|
|
10559
10597
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sui-border-highlight focus-visible:ring-offset-2 focus-visible:ring-offset-sui-bg-default"
|
|
10560
10598
|
];
|
|
10561
10599
|
var sidebarMenuItemVariants = cva("", {
|
|
@@ -10641,7 +10679,7 @@ var SidebarMenuItem2 = React77.forwardRef(
|
|
|
10641
10679
|
}
|
|
10642
10680
|
);
|
|
10643
10681
|
}
|
|
10644
|
-
const activeClasses = active ? "bg-sui-bg-state-soft hover:bg-sui-bg-state-soft-hover active:bg-sui-bg-state-soft-press" : "";
|
|
10682
|
+
const activeClasses = active ? "bg-sui-bg-state-soft [@media(hover:hover)]:hover:bg-sui-bg-state-soft-hover active:bg-sui-bg-state-soft-press" : "";
|
|
10645
10683
|
const labelColorClass = active ? "text-sui-text-default" : "text-sui-text-subtle";
|
|
10646
10684
|
if (variant === "collapsed") {
|
|
10647
10685
|
const button = /* @__PURE__ */ jsx(
|
|
@@ -13483,4 +13521,4 @@ var VerticalStepper = React77.forwardRef(
|
|
|
13483
13521
|
);
|
|
13484
13522
|
VerticalStepper.displayName = "VerticalStepper";
|
|
13485
13523
|
|
|
13486
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarButton, AvatarFallback, AvatarGroup, AvatarImage, AvatarUpload, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupItem, Calendar, CalendarDayButton, Card, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, CheckboxList, CheckboxWithText, Chip, CodeBlock, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ControlButton, DataRangeSlider, DataRangeSliderInput, DatePicker, DatePickerInput, DatePickerWithPresets, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCaption, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuLargeItem, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownMenuUserbar, EmptyState, FileUpload, FileUploadArea, FileUploadCard, FilterButton, GridTableCell, GridTableHeaderItem, GridTableRow, GridTableSlotItem, HorizontalStepper, HorizontalStepperItem, InlineTips, Input, InputButton, InputCaption, InputField, InputStepper, Label, LinkButton, MenuSearchInput, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageItem, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Paginator, Popover, PopoverContent, PopoverTrigger, Progress, ProgressBar, RadialProgressBar, RadioButton, RadioButtonCard, RadioButtonList, RadioButtonWithText, RadioCardGroup, RadioGroup2 as RadioGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectMenu, SelectMenuDescription, SelectMenuFooterButton, SelectMenuItem, SelectMenuLabel, SelectMenuLargeItem, SelectMenuSeparator, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Toaster2 as ShadcnToaster, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarCard, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem2 as SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SliderHandle, SliderInput, SliderRange, SliderRangeInput, SocialButton, SortBreadcrumb, SortBreadcrumbItem, StatusBadge, StepperIcon, StepperNumber, Switch, SwitchList, SwitchWithText, TabItem, TabList, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableHeaderItem, TableItem, TablePagination, TableRow, TableRowSort, TableSkeletonRow, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UnderlineTabItem, UnderlineTabsList, Userbar, VerticalStepper, VerticalStepperItem, accordionItemVariants, avatarButtonVariants, avatarVariants, buttonGroupItemVariants, buttonVariants, cardVariants, checkboxCardVariants, checkboxVariants, checkboxWithTextVariants, chipVariants, controlButtonVariants, datePickerInputContainerVariants, dividerVariants, emptyStateVariants, extractInitials, fileUploadCardVariants, filterButtonVariants, formatBytes, gridTableHeaderItemVariants, gridTableRowVariants, gridTableSlotItemVariants, horizontalStepperItemVariants, inlineTipsVariants, inputButtonVariants, inputContainerVariants, lineVariants, linkButtonVariants, navigationMenuTriggerStyle, pageItemVariants, progressBarVariants, radialProgressBarVariants, radioButtonCardVariants, radioButtonVariants, radioButtonWithTextVariants, sidebarCardVariants, sidebarMenuItemVariants, sliderHandleVariants, socialButtonVariants, stepperIconVariants, stepperNumberVariants, tabItemVariants, tabListVariants, tableHeaderItemVariants, tableItemVariants, tableRowSortVariants, textAreaContainerVariants, toggleVariants, tooltipContentVariants, underlineTabItemVariants, underlineTabsListVariants, useSidebar, userbarVariants, validateFile };
|
|
13524
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarButton, AvatarFallback, AvatarGroup, AvatarImage, AvatarUpload, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupItem, Calendar, CalendarDayButton, Card, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, CheckboxList, CheckboxWithText, Chip, CodeBlock, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ControlButton, DataRangeSlider, DataRangeSliderInput, DatePicker, DatePickerInput, DatePickerWithPresets, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCaption, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuLargeItem, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownMenuUserbar, EmptyState, FileUpload, FileUploadArea, FileUploadCard, FilterButton, GridTableCell, GridTableHeaderItem, GridTableRow, GridTableSlotItem, HorizontalStepper, HorizontalStepperItem, InlineTips, Input, InputButton, InputCaption, InputField, InputStepper, Label, LinkButton, MenuSearchInput, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageItem, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Paginator, Popover, PopoverContent, PopoverTrigger, Progress, ProgressBar, RadialProgressBar, RadioButton, RadioButtonCard, RadioButtonList, RadioButtonWithText, RadioCardGroup, RadioGroup2 as RadioGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectMenu, SelectMenuDescription, SelectMenuFooterButton, SelectMenuItem, SelectMenuLabel, SelectMenuLargeItem, SelectMenuSeparator, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Toaster2 as ShadcnToaster, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarCard, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem2 as SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SliderHandle, SliderInput, SliderRange, SliderRangeInput, SocialButton, SortBreadcrumb, SortBreadcrumbItem, StatusBadge, StepperIcon, StepperNumber, Switch, SwitchList, SwitchWithText, TabItem, TabList, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableHeaderItem, TableItem, TablePagination, TableRow, TableRowSort, TableSkeletonRow, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UnderlineTabItem, UnderlineTabsList, Userbar, VerticalStepper, VerticalStepperItem, accordionItemVariants, avatarButtonVariants, avatarVariants, buttonGroupItemVariants, buttonVariants, cardVariants, checkboxCardVariants, checkboxVariants, checkboxWithTextVariants, chipVariants, controlButtonVariants, datePickerInputContainerVariants, dividerVariants2 as dividerVariants, emptyStateVariants, extractInitials, fileUploadCardVariants, filterButtonVariants, formatBytes, gridTableHeaderItemVariants, gridTableRowVariants, gridTableSlotItemVariants, horizontalStepperItemVariants, inlineTipsVariants, inputButtonVariants, inputContainerVariants, lineVariants, linkButtonVariants, navigationMenuTriggerStyle, pageItemVariants, progressBarVariants, radialProgressBarVariants, radioButtonCardVariants, radioButtonVariants, radioButtonWithTextVariants, sidebarCardVariants, sidebarMenuItemVariants, sliderHandleVariants, socialButtonVariants, stepperIconVariants, stepperNumberVariants, tabItemVariants, tabListVariants, tableHeaderItemVariants, tableItemVariants, tableRowSortVariants, textAreaContainerVariants, toggleVariants, tooltipContentVariants, underlineTabItemVariants, underlineTabsListVariants, useSidebar, userbarVariants, validateFile };
|