@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.
Files changed (9) hide show
  1. package/README.md +10 -23
  2. package/dist/index.d.mts +9 -1
  3. package/dist/index.d.ts +9 -1
  4. package/dist/index.js +97 -59
  5. package/dist/index.mjs +97 -59
  6. package/dist/styles.css +459 -24
  7. package/dist/tailwind-preset.js +24 -1
  8. package/dist/tailwind-preset.mjs +24 -1
  9. package/package.json +8 -2
package/README.md CHANGED
@@ -41,11 +41,11 @@ export default {
41
41
 
42
42
  | | |
43
43
  |---|---|
44
- | **Components** | 106 UI components across 26 categories |
45
- | **Stories** | 93 interactive Storybook stories + 10 documentation pages |
44
+ | **Components** | 109 UI components across 26 categories |
45
+ | **Stories** | 111 interactive Storybook stories + 19 documentation pages |
46
46
  | **Themes** | 4 themes (2 color schemes x light/dark) |
47
47
  | **Source** | [Sort UI Kit 1.3](https://sortui.company) (Figma) |
48
- | **Storybook** | [Live Documentation](http://localhost:6006) |
48
+ | **Storybook** | [Live Documentation](https://sortui-design-system.vercel.app/) |
49
49
 
50
50
  ## Tech Stack
51
51
 
@@ -57,20 +57,6 @@ export default {
57
57
  - **Charts:** Recharts
58
58
  - **Rich Text:** Lexical Editor
59
59
 
60
- ## Quick Start
61
-
62
- ```bash
63
- # Clone & install
64
- git clone <repo-url> sort-ui-design-system
65
- cd sort-ui-design-system
66
- npm install
67
-
68
- # Start Storybook (main entry point)
69
- npm run storybook
70
- ```
71
-
72
- Open [http://localhost:6006](http://localhost:6006) to browse all components.
73
-
74
60
  ## Theme System
75
61
 
76
62
  Sort UI supports 4 themes built on two color schemes:
@@ -93,12 +79,12 @@ Themes are applied via CSS classes on the root element. Switch between them in S
93
79
  | **Badge** | Badge, StatusBadge, Chip, Label |
94
80
  | **Charts** | LineChart, BarChart, DonutChart, PieChart |
95
81
  | **Checkbox** | Checkbox, CheckboxWithText, CheckboxList, CheckboxCard |
96
- | **Date Picker** | DatePicker (Calendar, Range, Popover compositions) |
82
+ | **Date Picker** | DatePicker, DatePickerInput (Calendar, Range, Popover compositions) |
97
83
  | **Feedback** | Tooltip, InlineTips, EmptyState, Divider |
98
84
  | **File Upload** | FileUploadArea, FileUploadCard, FileUpload (composition) |
99
- | **Forms** | InputField, InputButton, InputCaption, TextAreaField, SelectInput |
85
+ | **Forms** | InputField, InputButton, InputCaption, TextAreaField, SelectInput, Combobox, Form Validation |
100
86
  | **Grid Table** | GridTableHeaderItem, GridTableSlotItem, GridTableRow |
101
- | **Navigation** | Breadcrumb, Paginator, DropdownMenu, Sidebar, SidebarCard |
87
+ | **Navigation** | Breadcrumb, Paginator, DropdownMenu, NavigationMenu, Sidebar, SidebarCard, CommandPalette |
102
88
  | **Progress** | ProgressBar, RadialProgressBar |
103
89
  | **Radio** | RadioButton, RadioButtonWithText, RadioButtonList, RadioButtonCard |
104
90
  | **Selection** | ToggleGroup, SelectMenu, SelectMenuItem |
@@ -109,6 +95,7 @@ Themes are applied via CSS classes on the root element. Switch between them in S
109
95
  | **Tabs** | TabItem, TabList, UnderlineTabItem, UnderlineTabs |
110
96
  | **Code** | CodeBlock, MarkdownEditor |
111
97
  | **Layout** | Userbar, SidebarMenuItem, AccordionItem |
98
+ | **Examples** | SignInCard, ProductCard |
112
99
 
113
100
  ## Project Structure
114
101
 
@@ -116,12 +103,12 @@ Themes are applied via CSS classes on the root element. Switch between them in S
116
103
  sort-ui-design-system/
117
104
  ├── src/
118
105
  │ ├── components/
119
- │ │ └── ui/ # 106 restyled shadcn/ui components
120
- │ ├── stories/ # 93 Storybook stories + 10 MDX docs
106
+ │ │ └── ui/ # 109 restyled shadcn/ui components
107
+ │ ├── stories/ # 111 Storybook stories + 19 MDX docs
121
108
  │ ├── tokens/ # Figma token exports (JSON)
122
109
  │ └── app/ # Next.js app (redirects to Storybook)
123
110
  ├── .storybook/ # Storybook configuration
124
- ├── features/ # Component specs (PROJ-1 to PROJ-85)
111
+ ├── features/ # Component specs (PROJ-1 to PROJ-92)
125
112
  ├── docs/
126
113
  │ ├── PRD.md # Product vision
127
114
  │ └── COMPONENT-PATTERNS.md # Token & code patterns reference
package/dist/index.d.mts CHANGED
@@ -104,10 +104,14 @@ interface AvatarProps extends Omit<React$1.ComponentPropsWithoutRef<typeof Avata
104
104
  topBadge?: boolean;
105
105
  /** Top badge variant (semantic names from StatusBadge) */
106
106
  topBadgeVariant?: StatusBadgeVariant;
107
+ /** Accessible label for top badge status, announced by screen readers (e.g. "Verified") */
108
+ topBadgeLabel?: string;
107
109
  /** Show bottom-right badge */
108
110
  bottomBadge?: boolean;
109
111
  /** Bottom badge variant (semantic names from StatusBadge) */
110
112
  bottomBadgeVariant?: StatusBadgeVariant;
113
+ /** Accessible label for bottom badge status, announced by screen readers (e.g. "Online") */
114
+ bottomBadgeLabel?: string;
111
115
  /** Fallback background color (applies when no image is shown) */
112
116
  color?: "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
113
117
  children?: React$1.ReactNode;
@@ -248,7 +252,7 @@ interface SortBreadcrumbProps {
248
252
  /** Additional CSS classes */
249
253
  className?: string;
250
254
  }
251
- declare function SortBreadcrumb({ items, variant, className, }: SortBreadcrumbProps): react_jsx_runtime.JSX.Element;
255
+ declare const SortBreadcrumb: React$1.ForwardRefExoticComponent<SortBreadcrumbProps & React$1.RefAttributes<HTMLElement>>;
252
256
  type BreadcrumbItemType = "default" | "avatar";
253
257
  type BreadcrumbItemState = "default" | "hover" | "current";
254
258
  interface SortBreadcrumbItemProps {
@@ -316,6 +320,8 @@ declare const buttonGroupItemVariants: (props?: ({
316
320
  size?: "lg" | "md" | "sm" | "xs" | "2xs" | null | undefined;
317
321
  } & class_variance_authority_types.ClassProp) | undefined) => string;
318
322
  interface ButtonGroupItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof buttonGroupItemVariants> {
323
+ /** Render as a child element (e.g. Next.js Link) via Radix Slot */
324
+ asChild?: boolean;
319
325
  /** Text label displayed in the item */
320
326
  label?: string;
321
327
  /** Remixicon class for leading icon (e.g. "ri-check-line") */
@@ -1289,6 +1295,8 @@ declare const pageItemVariants: (props?: ({
1289
1295
  variant?: "default" | "dot" | null | undefined;
1290
1296
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1291
1297
  interface PageItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof pageItemVariants> {
1298
+ /** Render as a child element (e.g. Next.js Link) via Radix Slot */
1299
+ asChild?: boolean;
1292
1300
  /** Active/selected state */
1293
1301
  active?: boolean;
1294
1302
  /** Page number label (only for variant="default") */
package/dist/index.d.ts CHANGED
@@ -104,10 +104,14 @@ interface AvatarProps extends Omit<React$1.ComponentPropsWithoutRef<typeof Avata
104
104
  topBadge?: boolean;
105
105
  /** Top badge variant (semantic names from StatusBadge) */
106
106
  topBadgeVariant?: StatusBadgeVariant;
107
+ /** Accessible label for top badge status, announced by screen readers (e.g. "Verified") */
108
+ topBadgeLabel?: string;
107
109
  /** Show bottom-right badge */
108
110
  bottomBadge?: boolean;
109
111
  /** Bottom badge variant (semantic names from StatusBadge) */
110
112
  bottomBadgeVariant?: StatusBadgeVariant;
113
+ /** Accessible label for bottom badge status, announced by screen readers (e.g. "Online") */
114
+ bottomBadgeLabel?: string;
111
115
  /** Fallback background color (applies when no image is shown) */
112
116
  color?: "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
113
117
  children?: React$1.ReactNode;
@@ -248,7 +252,7 @@ interface SortBreadcrumbProps {
248
252
  /** Additional CSS classes */
249
253
  className?: string;
250
254
  }
251
- declare function SortBreadcrumb({ items, variant, className, }: SortBreadcrumbProps): react_jsx_runtime.JSX.Element;
255
+ declare const SortBreadcrumb: React$1.ForwardRefExoticComponent<SortBreadcrumbProps & React$1.RefAttributes<HTMLElement>>;
252
256
  type BreadcrumbItemType = "default" | "avatar";
253
257
  type BreadcrumbItemState = "default" | "hover" | "current";
254
258
  interface SortBreadcrumbItemProps {
@@ -316,6 +320,8 @@ declare const buttonGroupItemVariants: (props?: ({
316
320
  size?: "lg" | "md" | "sm" | "xs" | "2xs" | null | undefined;
317
321
  } & class_variance_authority_types.ClassProp) | undefined) => string;
318
322
  interface ButtonGroupItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof buttonGroupItemVariants> {
323
+ /** Render as a child element (e.g. Next.js Link) via Radix Slot */
324
+ asChild?: boolean;
319
325
  /** Text label displayed in the item */
320
326
  label?: string;
321
327
  /** Remixicon class for leading icon (e.g. "ri-check-line") */
@@ -1289,6 +1295,8 @@ declare const pageItemVariants: (props?: ({
1289
1295
  variant?: "default" | "dot" | null | undefined;
1290
1296
  } & class_variance_authority_types.ClassProp) | undefined) => string;
1291
1297
  interface PageItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof pageItemVariants> {
1298
+ /** Render as a child element (e.g. Next.js Link) via Radix Slot */
1299
+ asChild?: boolean;
1292
1300
  /** Active/selected state */
1293
1301
  active?: boolean;
1294
1302
  /** Page number label (only for variant="default") */
package/dist/index.js CHANGED
@@ -281,17 +281,17 @@ var buttonVariants = classVarianceAuthority.cva(
281
281
  variants: {
282
282
  variant: {
283
283
  // Primary — Sort UI: bg/state/primary, text/white-default, icon/white-default
284
- 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]",
284
+ 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]",
285
285
  // Soft — Sort UI: bg/state/soft, text/subtle, icon/default-muted
286
- 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",
286
+ 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",
287
287
  // Secondary — Sort UI: bg/state/secondary, border/darker, text/default, icon/default-muted
288
- 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",
288
+ 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",
289
289
  // Ghost — Sort UI: bg/state/ghost, text/default, icon/default-muted
290
- 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",
290
+ 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",
291
291
  // Destructive — Sort UI: bg/state/destructive, text/white-default, icon/white-default
292
- 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]",
292
+ 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]",
293
293
  // Ghost Muted — Sort UI: bg/state/ghost, text/muted, icon/default-muted
294
- "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"
294
+ "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"
295
295
  },
296
296
  shape: {
297
297
  rounded: "rounded-md",
@@ -834,8 +834,10 @@ var Avatar = React77__namespace.forwardRef((_a, ref) => {
834
834
  ring = false,
835
835
  topBadge = false,
836
836
  topBadgeVariant = "verified",
837
+ topBadgeLabel,
837
838
  bottomBadge = false,
838
839
  bottomBadgeVariant = "online",
840
+ bottomBadgeLabel,
839
841
  color = "gray",
840
842
  children
841
843
  } = _b, props = __objRest(_b, [
@@ -848,8 +850,10 @@ var Avatar = React77__namespace.forwardRef((_a, ref) => {
848
850
  "ring",
849
851
  "topBadge",
850
852
  "topBadgeVariant",
853
+ "topBadgeLabel",
851
854
  "bottomBadge",
852
855
  "bottomBadgeVariant",
856
+ "bottomBadgeLabel",
853
857
  "color",
854
858
  "children"
855
859
  ]);
@@ -885,6 +889,11 @@ var Avatar = React77__namespace.forwardRef((_a, ref) => {
885
889
  })
886
890
  ) });
887
891
  }
892
+ const badgeLabelParts = [
893
+ topBadge && topBadgeLabel ? topBadgeLabel : null,
894
+ bottomBadge && bottomBadgeLabel ? bottomBadgeLabel : null
895
+ ].filter(Boolean);
896
+ const wrapperAriaLabel = badgeLabelParts.length > 0 ? [alt, badgeLabelParts.join(", ")].filter(Boolean).join(" \u2014 ") : alt || void 0;
888
897
  const offset = (_a2 = badgeOffset[resolvedSize]) != null ? _a2 : badgeOffset["md"];
889
898
  const topPositionClasses = `${offset.top} ${offset.right}`;
890
899
  const bottomPositionClasses = `${offset.bottom} ${offset.right}`;
@@ -897,7 +906,9 @@ var Avatar = React77__namespace.forwardRef((_a, ref) => {
897
906
  // Wrapper = avatar size (NOT ring size) — badges positioned relative to this
898
907
  avatarWrapperSize[resolvedSize],
899
908
  className
900
- )
909
+ ),
910
+ "aria-label": wrapperAriaLabel,
911
+ role: wrapperAriaLabel ? "img" : void 0
901
912
  }, props), {
902
913
  children: [
903
914
  ring && /* @__PURE__ */ jsxRuntime.jsx(
@@ -965,7 +976,7 @@ var Avatar = React77__namespace.forwardRef((_a, ref) => {
965
976
  })
966
977
  ) });
967
978
  });
968
- Avatar.displayName = AvatarPrimitive__namespace.Root.displayName;
979
+ Avatar.displayName = "Avatar";
969
980
  var AvatarImage = React77__namespace.forwardRef((_a, ref) => {
970
981
  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
971
982
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -976,7 +987,7 @@ var AvatarImage = React77__namespace.forwardRef((_a, ref) => {
976
987
  }, props)
977
988
  );
978
989
  });
979
- AvatarImage.displayName = AvatarPrimitive__namespace.Image.displayName;
990
+ AvatarImage.displayName = "AvatarImage";
980
991
  var AvatarFallback = React77__namespace.forwardRef((_a, ref) => {
981
992
  var _b = _a, { className, fallback, children } = _b, props = __objRest(_b, ["className", "fallback", "children"]);
982
993
  var _a2, _b2, _c;
@@ -1008,7 +1019,7 @@ var AvatarFallback = React77__namespace.forwardRef((_a, ref) => {
1008
1019
  })
1009
1020
  );
1010
1021
  });
1011
- AvatarFallback.displayName = AvatarPrimitive__namespace.Fallback.displayName;
1022
+ AvatarFallback.displayName = "AvatarFallback";
1012
1023
  var avatarButtonVariants = classVarianceAuthority.cva(
1013
1024
  "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",
1014
1025
  {
@@ -1522,41 +1533,55 @@ var BreadcrumbEllipsis = (_a) => {
1522
1533
  );
1523
1534
  };
1524
1535
  BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
1536
+ var dividerVariants = classVarianceAuthority.cva(
1537
+ "flex size-5 shrink-0 items-center justify-center",
1538
+ {
1539
+ variants: {
1540
+ variant: {
1541
+ slash: "",
1542
+ arrow: "",
1543
+ dot: ""
1544
+ }
1545
+ },
1546
+ defaultVariants: {
1547
+ variant: "slash"
1548
+ }
1549
+ }
1550
+ );
1525
1551
  function BreadcrumbDivider({ variant }) {
1526
- return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex size-5 shrink-0 items-center justify-center", "aria-hidden": "true", children: [
1552
+ return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: dividerVariants({ variant }), "aria-hidden": "true", children: [
1527
1553
  variant === "slash" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium leading-5 text-sui-text-hint", children: "/" }),
1528
1554
  variant === "arrow" && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line text-xl leading-none text-sui-text-muted" }),
1529
1555
  variant === "dot" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1 rounded-full bg-sui-text-muted" })
1530
1556
  ] });
1531
1557
  }
1532
- function SortBreadcrumb({
1533
- items,
1534
- variant = "slash",
1535
- className
1536
- }) {
1537
- return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsx(
1538
- "ol",
1539
- {
1540
- className: cn(
1541
- "flex items-center gap-sui-2",
1542
- className
1543
- ),
1544
- children: items.map((item, index) => {
1545
- const isLast = index === items.length - 1;
1546
- return /* @__PURE__ */ jsxRuntime.jsxs(React77__namespace.Fragment, { children: [
1547
- /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
1548
- SortBreadcrumbItem,
1549
- __spreadProps(__spreadValues({}, item), {
1550
- state: isLast ? "current" : "default",
1551
- leadIcon: item.leadIcon
1552
- })
1553
- ) }),
1554
- !isLast && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex", role: "presentation", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbDivider, { variant }) })
1555
- ] }, index);
1556
- })
1557
- }
1558
- ) });
1559
- }
1558
+ var SortBreadcrumb = React77__namespace.forwardRef(
1559
+ ({ items, variant = "slash", className }, ref) => {
1560
+ return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsx(
1561
+ "ol",
1562
+ {
1563
+ className: cn(
1564
+ "flex items-center gap-sui-2",
1565
+ className
1566
+ ),
1567
+ children: items.map((item, index) => {
1568
+ const isLast = index === items.length - 1;
1569
+ return /* @__PURE__ */ jsxRuntime.jsxs(React77__namespace.Fragment, { children: [
1570
+ /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
1571
+ SortBreadcrumbItem,
1572
+ __spreadProps(__spreadValues({}, item), {
1573
+ state: isLast ? "current" : "default",
1574
+ leadIcon: item.leadIcon
1575
+ })
1576
+ ) }),
1577
+ !isLast && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex", role: "presentation", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbDivider, { variant }) })
1578
+ ] }, index);
1579
+ })
1580
+ }
1581
+ ) });
1582
+ }
1583
+ );
1584
+ SortBreadcrumb.displayName = "SortBreadcrumb";
1560
1585
  function SortBreadcrumbItem({
1561
1586
  label,
1562
1587
  href,
@@ -1733,6 +1758,7 @@ var ButtonGroupItem = React77__namespace.forwardRef(
1733
1758
  showSeparator = false,
1734
1759
  size = "lg",
1735
1760
  disabled = false,
1761
+ asChild = false,
1736
1762
  className
1737
1763
  } = _b, props = __objRest(_b, [
1738
1764
  "label",
@@ -1743,14 +1769,16 @@ var ButtonGroupItem = React77__namespace.forwardRef(
1743
1769
  "showSeparator",
1744
1770
  "size",
1745
1771
  "disabled",
1772
+ "asChild",
1746
1773
  "className"
1747
1774
  ]);
1748
1775
  const s = size != null ? size : "lg";
1776
+ const Comp = asChild ? reactSlot.Slot : "button";
1749
1777
  return /* @__PURE__ */ jsxRuntime.jsxs(
1750
- "button",
1778
+ Comp,
1751
1779
  __spreadProps(__spreadValues({
1752
1780
  ref,
1753
- type: "button",
1781
+ type: asChild ? void 0 : "button",
1754
1782
  disabled,
1755
1783
  className: cn(
1756
1784
  buttonGroupItemVariants({ size }),
@@ -2047,8 +2075,8 @@ var socialButtonVariants = classVarianceAuthority.cva(
2047
2075
  variants: {
2048
2076
  variant: {
2049
2077
  // --sb-bg is a runtime brand slot set via inline style — intentional, not a token violation
2050
- 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)))]",
2051
- 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"
2078
+ 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)))]",
2079
+ 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"
2052
2080
  },
2053
2081
  shape: {
2054
2082
  rounded: "rounded-md",
@@ -3075,25 +3103,25 @@ var unselectedStyles = {
3075
3103
  default: [
3076
3104
  "bg-sui-bg-state-secondary border-sui-border-darker text-sui-text-muted",
3077
3105
  "[&_i]:text-icon-default-muted",
3078
- "hover:bg-sui-bg-state-secondary-hover hover:text-sui-text-subtle hover:[&_i]:text-icon-default-subtle",
3106
+ "[@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",
3079
3107
  "active:bg-sui-bg-state-secondary-press active:text-sui-text-subtle active:[&_i]:text-icon-default-subtle"
3080
3108
  ].join(" "),
3081
3109
  soft: [
3082
3110
  "bg-sui-bg-state-soft text-sui-text-muted",
3083
3111
  "[&_i]:text-icon-default-muted",
3084
- "hover:bg-sui-bg-state-soft-hover hover:text-sui-text-subtle hover:[&_i]:text-icon-default-subtle",
3112
+ "[@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",
3085
3113
  "active:bg-sui-bg-state-soft-press active:text-sui-text-subtle active:[&_i]:text-icon-default-subtle"
3086
3114
  ].join(" "),
3087
3115
  ghost: [
3088
3116
  "bg-sui-bg-state-ghost text-sui-text-muted",
3089
3117
  "[&_i]:text-icon-default-muted",
3090
- "hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-subtle hover:[&_i]:text-icon-default-subtle",
3118
+ "[@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",
3091
3119
  "active:bg-sui-bg-state-ghost-press active:text-sui-text-subtle active:[&_i]:text-icon-default-subtle"
3092
3120
  ].join(" "),
3093
3121
  "ghost-muted": [
3094
3122
  "bg-sui-bg-state-ghost text-sui-text-muted",
3095
3123
  "[&_i]:text-icon-default-muted",
3096
- "hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-subtle hover:[&_i]:text-icon-default-subtle",
3124
+ "[@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",
3097
3125
  "active:bg-sui-bg-state-ghost-press active:text-sui-text-subtle active:[&_i]:text-icon-default-subtle"
3098
3126
  ].join(" ")
3099
3127
  };
@@ -3226,7 +3254,16 @@ var Chip = React77__namespace.forwardRef(
3226
3254
  )
3227
3255
  }), props), {
3228
3256
  children: [
3229
- (leadIcon || iconOnly) && /* @__PURE__ */ jsxRuntime.jsx("i", { className: iconName, "aria-hidden": "true" }),
3257
+ (leadIcon || iconOnly) && /* @__PURE__ */ jsxRuntime.jsx(
3258
+ "i",
3259
+ {
3260
+ className: cn(
3261
+ iconName,
3262
+ selected && iconOnly && v === "ghost-muted" && "text-icon-default"
3263
+ ),
3264
+ "aria-hidden": "true"
3265
+ }
3266
+ ),
3230
3267
  !iconOnly && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("px-sui-2", labelClasses2[s]), children: label })
3231
3268
  ]
3232
3269
  })
@@ -5501,7 +5538,7 @@ function DatePickerInput({
5501
5538
  ] });
5502
5539
  }
5503
5540
  DatePickerInput.displayName = "DatePickerInput";
5504
- var dividerVariants = classVarianceAuthority.cva("flex w-full items-center", {
5541
+ var dividerVariants2 = classVarianceAuthority.cva("flex w-full items-center", {
5505
5542
  variants: {
5506
5543
  type: {
5507
5544
  default: "gap-0",
@@ -5562,7 +5599,7 @@ var Divider = React77__namespace.forwardRef(
5562
5599
  ref,
5563
5600
  role: "separator",
5564
5601
  "aria-orientation": "horizontal",
5565
- className: cn(dividerVariants({ type }), className)
5602
+ className: cn(dividerVariants2({ type }), className)
5566
5603
  }, props), {
5567
5604
  children: [
5568
5605
  showLeftLine && /* @__PURE__ */ jsxRuntime.jsx("div", { className: lineClasses }),
@@ -7938,7 +7975,7 @@ var pageItemVariants = classVarianceAuthority.cva(
7938
7975
  // Default state
7939
7976
  "bg-sui-bg-state-ghost text-sui-text-hint",
7940
7977
  // Hover state
7941
- "hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-muted",
7978
+ "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-muted",
7942
7979
  // Disabled state
7943
7980
  "disabled:bg-sui-bg-state-ghost disabled:text-sui-text-hint"
7944
7981
  ].join(" "),
@@ -7949,7 +7986,7 @@ var pageItemVariants = classVarianceAuthority.cva(
7949
7986
  // Default state
7950
7987
  "bg-sui-bg-state-soft",
7951
7988
  // Hover state (soft-hover too subtle for small dots, use stronger token)
7952
- "hover:bg-sui-bg-state-soft-hover",
7989
+ "[@media(hover:hover)]:hover:bg-sui-bg-state-soft-hover",
7953
7990
  // Disabled state
7954
7991
  "disabled:bg-sui-bg-state-disabled"
7955
7992
  ].join(" ")
@@ -7965,17 +8002,18 @@ var activeDefaultClasses = [
7965
8002
  // Blue text/border: uses bg-basic-blue tokens because text-informative shifts to orange in Theme 2
7966
8003
  "text-sui-bg-basic-blue-strong",
7967
8004
  "border border-sui-bg-basic-blue-accent",
7968
- "hover:bg-sui-bg-state-ghost hover:text-sui-bg-basic-blue-strong"
8005
+ "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost [@media(hover:hover)]:hover:text-sui-bg-basic-blue-strong"
7969
8006
  ].join(" ");
7970
8007
  var activeDotClasses = [
7971
8008
  "bg-sui-bg-basic-blue-accent",
7972
- "hover:bg-sui-bg-basic-blue-accent"
8009
+ "[@media(hover:hover)]:hover:bg-sui-bg-basic-blue-accent"
7973
8010
  ].join(" ");
7974
8011
  var PageItem = React77__namespace.forwardRef(
7975
8012
  (_a, ref) => {
7976
- var _b = _a, { className, variant = "default", active = false, label = "0", disabled } = _b, props = __objRest(_b, ["className", "variant", "active", "label", "disabled"]);
8013
+ var _b = _a, { className, variant = "default", active = false, label = "0", disabled, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "active", "label", "disabled", "asChild"]);
8014
+ const Comp = asChild ? reactSlot.Slot : "button";
7977
8015
  return /* @__PURE__ */ jsxRuntime.jsx(
7978
- "button",
8016
+ Comp,
7979
8017
  __spreadProps(__spreadValues({
7980
8018
  ref,
7981
8019
  disabled,
@@ -10598,7 +10636,7 @@ var interactiveBase = [
10598
10636
  "flex items-center rounded-sm",
10599
10637
  "transition-colors cursor-pointer",
10600
10638
  "bg-sui-bg-state-ghost",
10601
- "hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
10639
+ "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
10602
10640
  "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"
10603
10641
  ];
10604
10642
  var sidebarMenuItemVariants = classVarianceAuthority.cva("", {
@@ -10684,7 +10722,7 @@ var SidebarMenuItem2 = React77__namespace.forwardRef(
10684
10722
  }
10685
10723
  );
10686
10724
  }
10687
- const activeClasses = active ? "bg-sui-bg-state-soft hover:bg-sui-bg-state-soft-hover active:bg-sui-bg-state-soft-press" : "";
10725
+ 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" : "";
10688
10726
  const labelColorClass = active ? "text-sui-text-default" : "text-sui-text-subtle";
10689
10727
  if (variant === "collapsed") {
10690
10728
  const button = /* @__PURE__ */ jsxRuntime.jsx(
@@ -13803,7 +13841,7 @@ exports.checkboxWithTextVariants = checkboxWithTextVariants;
13803
13841
  exports.chipVariants = chipVariants;
13804
13842
  exports.controlButtonVariants = controlButtonVariants;
13805
13843
  exports.datePickerInputContainerVariants = datePickerInputContainerVariants;
13806
- exports.dividerVariants = dividerVariants;
13844
+ exports.dividerVariants = dividerVariants2;
13807
13845
  exports.emptyStateVariants = emptyStateVariants;
13808
13846
  exports.extractInitials = extractInitials;
13809
13847
  exports.fileUploadCardVariants = fileUploadCardVariants;