@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/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 = AvatarPrimitive.Root.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 = AvatarPrimitive.Image.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 = AvatarPrimitive.Fallback.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: "flex size-5 shrink-0 items-center justify-center", "aria-hidden": "true", children: [
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
- function SortBreadcrumb({
1490
- items,
1491
- variant = "slash",
1492
- className
1493
- }) {
1494
- return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx(
1495
- "ol",
1496
- {
1497
- className: cn(
1498
- "flex items-center gap-sui-2",
1499
- className
1500
- ),
1501
- children: items.map((item, index) => {
1502
- const isLast = index === items.length - 1;
1503
- return /* @__PURE__ */ jsxs(React77.Fragment, { children: [
1504
- /* @__PURE__ */ jsx("li", { className: "inline-flex", children: /* @__PURE__ */ jsx(
1505
- SortBreadcrumbItem,
1506
- __spreadProps(__spreadValues({}, item), {
1507
- state: isLast ? "current" : "default",
1508
- leadIcon: item.leadIcon
1509
- })
1510
- ) }),
1511
- !isLast && /* @__PURE__ */ jsx("li", { className: "inline-flex", role: "presentation", children: /* @__PURE__ */ jsx(BreadcrumbDivider, { variant }) })
1512
- ] }, index);
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
- "button",
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-default border border-sui-border-darker text-sui-text-default shadow-button-secondary active:shadow-button-secondary-press hover:bg-sui-bg-state-secondary-hover active:bg-sui-bg-state-secondary-press"
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("i", { className: iconName, "aria-hidden": "true" }),
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 dividerVariants = cva("flex w-full items-center", {
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(dividerVariants({ type }), className)
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
- "button",
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 };