@maxsteinwender/sort-ui 1.0.3 → 1.0.5

package/dist/index.d.mts

@@ -104,10 +104,14 @@ interface AvatarProps extends Omit<React$1.ComponentPropsWithoutRef<typeof Avata
     topBadge?: boolean;
     /** Top badge variant (semantic names from StatusBadge) */
     topBadgeVariant?: StatusBadgeVariant;
+    /** Accessible label for top badge status, announced by screen readers (e.g. "Verified") */
+    topBadgeLabel?: string;
     /** Show bottom-right badge */
     bottomBadge?: boolean;
     /** Bottom badge variant (semantic names from StatusBadge) */
     bottomBadgeVariant?: StatusBadgeVariant;
+    /** Accessible label for bottom badge status, announced by screen readers (e.g. "Online") */
+    bottomBadgeLabel?: string;
     /** Fallback background color (applies when no image is shown) */
     color?: "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     children?: React$1.ReactNode;
@@ -197,6 +201,8 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     /** Image src — required for variant="image" */
     src?: string;
+    /** Leading icon node — used when variant="icon". Pass any Remix icon, e.g. <i className="ri-bank-fill" /> */
+    icon?: React$1.ReactNode;
     /** Show 1px border using border-default token. Default: false */
     border?: boolean;
     /** When provided, renders a close button on the right. */
@@ -207,7 +213,7 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
      */
     closeAsSpan?: boolean;
 }
-declare function Badge({ color, size, shape, variant, src, border, onClose, closeAsSpan, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ color, size, shape, variant, src, icon, border, onClose, closeAsSpan, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 declare const Breadcrumb: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     separator?: React$1.ReactNode;
@@ -246,7 +252,7 @@ interface SortBreadcrumbProps {
     /** Additional CSS classes */
     className?: string;
 }
-declare function SortBreadcrumb({ items, variant, className, }: SortBreadcrumbProps): react_jsx_runtime.JSX.Element;
+declare const SortBreadcrumb: React$1.ForwardRefExoticComponent<SortBreadcrumbProps & React$1.RefAttributes<HTMLElement>>;
 type BreadcrumbItemType = "default" | "avatar";
 type BreadcrumbItemState = "default" | "hover" | "current";
 interface SortBreadcrumbItemProps {
@@ -314,6 +320,8 @@ declare const buttonGroupItemVariants: (props?: ({
     size?: "lg" | "md" | "sm" | "xs" | "2xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonGroupItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof buttonGroupItemVariants> {
+    /** Render as a child element (e.g. Next.js Link) via Radix Slot */
+    asChild?: boolean;
     /** Text label displayed in the item */
     label?: string;
     /** Remixicon class for leading icon (e.g. "ri-check-line") */
@@ -1287,6 +1295,8 @@ declare const pageItemVariants: (props?: ({
     variant?: "default" | "dot" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface PageItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof pageItemVariants> {
+    /** Render as a child element (e.g. Next.js Link) via Radix Slot */
+    asChild?: boolean;
     /** Active/selected state */
     active?: boolean;
     /** Page number label (only for variant="default") */
@@ -1404,6 +1414,8 @@ interface RadioButtonCardProps extends VariantProps<typeof radioButtonCardVarian
     supporterDescription?: string;
     radioPosition?: "off" | "right" | "left";
     layout?: "horizontal" | "vertical";
+    /** Leading icon node rendered above the title. Pass any Remix icon, e.g. <i className="ri-bank-fill" /> */
+    icon?: React$1.ReactNode;
     value: string;
     disabled?: boolean;
     className?: string;

package/dist/index.d.ts

@@ -104,10 +104,14 @@ interface AvatarProps extends Omit<React$1.ComponentPropsWithoutRef<typeof Avata
     topBadge?: boolean;
     /** Top badge variant (semantic names from StatusBadge) */
     topBadgeVariant?: StatusBadgeVariant;
+    /** Accessible label for top badge status, announced by screen readers (e.g. "Verified") */
+    topBadgeLabel?: string;
     /** Show bottom-right badge */
     bottomBadge?: boolean;
     /** Bottom badge variant (semantic names from StatusBadge) */
     bottomBadgeVariant?: StatusBadgeVariant;
+    /** Accessible label for bottom badge status, announced by screen readers (e.g. "Online") */
+    bottomBadgeLabel?: string;
     /** Fallback background color (applies when no image is shown) */
     color?: "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     children?: React$1.ReactNode;
@@ -197,6 +201,8 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     /** Image src — required for variant="image" */
     src?: string;
+    /** Leading icon node — used when variant="icon". Pass any Remix icon, e.g. <i className="ri-bank-fill" /> */
+    icon?: React$1.ReactNode;
     /** Show 1px border using border-default token. Default: false */
     border?: boolean;
     /** When provided, renders a close button on the right. */
@@ -207,7 +213,7 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
      */
     closeAsSpan?: boolean;
 }
-declare function Badge({ color, size, shape, variant, src, border, onClose, closeAsSpan, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ color, size, shape, variant, src, icon, border, onClose, closeAsSpan, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 declare const Breadcrumb: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     separator?: React$1.ReactNode;
@@ -246,7 +252,7 @@ interface SortBreadcrumbProps {
     /** Additional CSS classes */
     className?: string;
 }
-declare function SortBreadcrumb({ items, variant, className, }: SortBreadcrumbProps): react_jsx_runtime.JSX.Element;
+declare const SortBreadcrumb: React$1.ForwardRefExoticComponent<SortBreadcrumbProps & React$1.RefAttributes<HTMLElement>>;
 type BreadcrumbItemType = "default" | "avatar";
 type BreadcrumbItemState = "default" | "hover" | "current";
 interface SortBreadcrumbItemProps {
@@ -314,6 +320,8 @@ declare const buttonGroupItemVariants: (props?: ({
     size?: "lg" | "md" | "sm" | "xs" | "2xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonGroupItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof buttonGroupItemVariants> {
+    /** Render as a child element (e.g. Next.js Link) via Radix Slot */
+    asChild?: boolean;
     /** Text label displayed in the item */
     label?: string;
     /** Remixicon class for leading icon (e.g. "ri-check-line") */
@@ -1287,6 +1295,8 @@ declare const pageItemVariants: (props?: ({
     variant?: "default" | "dot" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface PageItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof pageItemVariants> {
+    /** Render as a child element (e.g. Next.js Link) via Radix Slot */
+    asChild?: boolean;
     /** Active/selected state */
     active?: boolean;
     /** Page number label (only for variant="default") */
@@ -1404,6 +1414,8 @@ interface RadioButtonCardProps extends VariantProps<typeof radioButtonCardVarian
     supporterDescription?: string;
     radioPosition?: "off" | "right" | "left";
     layout?: "horizontal" | "vertical";
+    /** Leading icon node rendered above the title. Pass any Remix icon, e.g. <i className="ri-bank-fill" /> */
+    icon?: React$1.ReactNode;
     value: string;
     disabled?: boolean;
     className?: string;

package/dist/index.js

@@ -281,17 +281,17 @@ var buttonVariants = classVarianceAuthority.cva(
     variants: {
       variant: {
         // Primary — Sort UI: bg/state/primary, text/white-default, icon/white-default
-        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]",
+        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]",
         // Soft — Sort UI: bg/state/soft, text/subtle, icon/default-muted
-        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",
+        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",
         // Secondary — Sort UI: bg/state/secondary, border/darker, text/default, icon/default-muted
-        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",
+        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",
         // Ghost — Sort UI: bg/state/ghost, text/default, icon/default-muted
-        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",
+        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",
         // Destructive — Sort UI: bg/state/destructive, text/white-default, icon/white-default
-        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]",
+        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]",
         // Ghost Muted — Sort UI: bg/state/ghost, text/muted, icon/default-muted
-        "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"
+        "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"
       },
       shape: {
         rounded: "rounded-md",
@@ -834,8 +834,10 @@ var Avatar = React77__namespace.forwardRef((_a, ref) => {
     ring = false,
     topBadge = false,
     topBadgeVariant = "verified",
+    topBadgeLabel,
     bottomBadge = false,
     bottomBadgeVariant = "online",
+    bottomBadgeLabel,
     color = "gray",
     children
   } = _b, props = __objRest(_b, [
@@ -848,8 +850,10 @@ var Avatar = React77__namespace.forwardRef((_a, ref) => {
     "ring",
     "topBadge",
     "topBadgeVariant",
+    "topBadgeLabel",
     "bottomBadge",
     "bottomBadgeVariant",
+    "bottomBadgeLabel",
     "color",
     "children"
   ]);
@@ -885,6 +889,11 @@ var Avatar = React77__namespace.forwardRef((_a, ref) => {
       })
     ) });
   }
+  const badgeLabelParts = [
+    topBadge && topBadgeLabel ? topBadgeLabel : null,
+    bottomBadge && bottomBadgeLabel ? bottomBadgeLabel : null
+  ].filter(Boolean);
+  const wrapperAriaLabel = badgeLabelParts.length > 0 ? [alt, badgeLabelParts.join(", ")].filter(Boolean).join(" \u2014 ") : alt || void 0;
   const offset = (_a2 = badgeOffset[resolvedSize]) != null ? _a2 : badgeOffset["md"];
   const topPositionClasses = `${offset.top} ${offset.right}`;
   const bottomPositionClasses = `${offset.bottom} ${offset.right}`;
@@ -897,7 +906,9 @@ var Avatar = React77__namespace.forwardRef((_a, ref) => {
         // Wrapper = avatar size (NOT ring size) — badges positioned relative to this
         avatarWrapperSize[resolvedSize],
         className
-      )
+      ),
+      "aria-label": wrapperAriaLabel,
+      role: wrapperAriaLabel ? "img" : void 0
     }, props), {
       children: [
         ring && /* @__PURE__ */ jsxRuntime.jsx(
@@ -965,7 +976,7 @@ var Avatar = React77__namespace.forwardRef((_a, ref) => {
     })
   ) });
 });
-Avatar.displayName = AvatarPrimitive__namespace.Root.displayName;
+Avatar.displayName = "Avatar";
 var AvatarImage = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -976,7 +987,7 @@ var AvatarImage = React77__namespace.forwardRef((_a, ref) => {
     }, props)
   );
 });
-AvatarImage.displayName = AvatarPrimitive__namespace.Image.displayName;
+AvatarImage.displayName = "AvatarImage";
 var AvatarFallback = React77__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, fallback, children } = _b, props = __objRest(_b, ["className", "fallback", "children"]);
   var _a2, _b2, _c;
@@ -1008,7 +1019,7 @@ var AvatarFallback = React77__namespace.forwardRef((_a, ref) => {
     })
   );
 });
-AvatarFallback.displayName = AvatarPrimitive__namespace.Fallback.displayName;
+AvatarFallback.displayName = "AvatarFallback";
 var avatarButtonVariants = classVarianceAuthority.cva(
   "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",
   {
@@ -1334,6 +1345,7 @@ function Badge(_a) {
     shape = "rounded",
     variant = "label",
     src,
+    icon,
     border = false,
     onClose,
     closeAsSpan = false,
@@ -1345,6 +1357,7 @@ function Badge(_a) {
     "shape",
     "variant",
     "src",
+    "icon",
     "border",
     "onClose",
     "closeAsSpan",
@@ -1374,13 +1387,17 @@ function Badge(_a) {
         variant === "label" && // Inner frame: px-1 (4px) each side — same for lg and sm
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1", children }),
         variant === "icon" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "i",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
             {
-              className: cn("ri-user-3-fill leading-none", iconFontSize[size]),
-              "aria-hidden": "true"
+              className: cn(
+                "flex size-4 shrink-0 items-center justify-center leading-none",
+                iconFontSize[size]
+              ),
+              "aria-hidden": "true",
+              children: icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-user-3-fill" })
             }
-          ) }),
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-0.5 pr-1", children })
         ] }),
         variant === "image" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1516,41 +1533,55 @@ var BreadcrumbEllipsis = (_a) => {
   );
 };
 BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+var dividerVariants = classVarianceAuthority.cva(
+  "flex size-5 shrink-0 items-center justify-center",
+  {
+    variants: {
+      variant: {
+        slash: "",
+        arrow: "",
+        dot: ""
+      }
+    },
+    defaultVariants: {
+      variant: "slash"
+    }
+  }
+);
 function BreadcrumbDivider({ variant }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex size-5 shrink-0 items-center justify-center", "aria-hidden": "true", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: dividerVariants({ variant }), "aria-hidden": "true", children: [
     variant === "slash" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium leading-5 text-sui-text-hint", children: "/" }),
     variant === "arrow" && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line text-xl leading-none text-sui-text-muted" }),
     variant === "dot" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1 rounded-full bg-sui-text-muted" })
   ] });
 }
-function SortBreadcrumb({
-  items,
-  variant = "slash",
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "ol",
-    {
-      className: cn(
-        "flex items-center gap-sui-2",
-        className
-      ),
-      children: items.map((item, index) => {
-        const isLast = index === items.length - 1;
-        return /* @__PURE__ */ jsxRuntime.jsxs(React77__namespace.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
-            SortBreadcrumbItem,
-            __spreadProps(__spreadValues({}, item), {
-              state: isLast ? "current" : "default",
-              leadIcon: item.leadIcon
-            })
-          ) }),
-          !isLast && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex", role: "presentation", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbDivider, { variant }) })
-        ] }, index);
-      })
-    }
-  ) });
-}
+var SortBreadcrumb = React77__namespace.forwardRef(
+  ({ items, variant = "slash", className }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "ol",
+      {
+        className: cn(
+          "flex items-center gap-sui-2",
+          className
+        ),
+        children: items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          return /* @__PURE__ */ jsxRuntime.jsxs(React77__namespace.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
+              SortBreadcrumbItem,
+              __spreadProps(__spreadValues({}, item), {
+                state: isLast ? "current" : "default",
+                leadIcon: item.leadIcon
+              })
+            ) }),
+            !isLast && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "inline-flex", role: "presentation", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbDivider, { variant }) })
+          ] }, index);
+        })
+      }
+    ) });
+  }
+);
+SortBreadcrumb.displayName = "SortBreadcrumb";
 function SortBreadcrumbItem({
   label,
   href,
@@ -1727,6 +1758,7 @@ var ButtonGroupItem = React77__namespace.forwardRef(
       showSeparator = false,
       size = "lg",
       disabled = false,
+      asChild = false,
       className
     } = _b, props = __objRest(_b, [
       "label",
@@ -1737,14 +1769,16 @@ var ButtonGroupItem = React77__namespace.forwardRef(
       "showSeparator",
       "size",
       "disabled",
+      "asChild",
       "className"
     ]);
     const s = size != null ? size : "lg";
+    const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+      Comp,
       __spreadProps(__spreadValues({
         ref,
-        type: "button",
+        type: asChild ? void 0 : "button",
         disabled,
         className: cn(
           buttonGroupItemVariants({ size }),
@@ -2041,8 +2075,8 @@ var socialButtonVariants = classVarianceAuthority.cva(
     variants: {
       variant: {
         // --sb-bg is a runtime brand slot set via inline style — intentional, not a token violation
-        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)))]",
-        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"
+        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)))]",
+        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"
       },
       shape: {
         rounded: "rounded-md",
@@ -3069,25 +3103,25 @@ var unselectedStyles = {
   default: [
     "bg-sui-bg-state-secondary border-sui-border-darker text-sui-text-muted",
     "[&_i]:text-icon-default-muted",
-    "hover:bg-sui-bg-state-secondary-hover hover:text-sui-text-subtle hover:[&_i]:text-icon-default-subtle",
+    "[@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",
     "active:bg-sui-bg-state-secondary-press active:text-sui-text-subtle active:[&_i]:text-icon-default-subtle"
   ].join(" "),
   soft: [
     "bg-sui-bg-state-soft text-sui-text-muted",
     "[&_i]:text-icon-default-muted",
-    "hover:bg-sui-bg-state-soft-hover hover:text-sui-text-subtle hover:[&_i]:text-icon-default-subtle",
+    "[@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",
     "active:bg-sui-bg-state-soft-press active:text-sui-text-subtle active:[&_i]:text-icon-default-subtle"
   ].join(" "),
   ghost: [
     "bg-sui-bg-state-ghost text-sui-text-muted",
     "[&_i]:text-icon-default-muted",
-    "hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-subtle hover:[&_i]:text-icon-default-subtle",
+    "[@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",
     "active:bg-sui-bg-state-ghost-press active:text-sui-text-subtle active:[&_i]:text-icon-default-subtle"
   ].join(" "),
   "ghost-muted": [
     "bg-sui-bg-state-ghost text-sui-text-muted",
     "[&_i]:text-icon-default-muted",
-    "hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-subtle hover:[&_i]:text-icon-default-subtle",
+    "[@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",
     "active:bg-sui-bg-state-ghost-press active:text-sui-text-subtle active:[&_i]:text-icon-default-subtle"
   ].join(" ")
 };
@@ -3220,7 +3254,16 @@ var Chip = React77__namespace.forwardRef(
         )
       }), props), {
         children: [
-          (leadIcon || iconOnly) && /* @__PURE__ */ jsxRuntime.jsx("i", { className: iconName, "aria-hidden": "true" }),
+          (leadIcon || iconOnly) && /* @__PURE__ */ jsxRuntime.jsx(
+            "i",
+            {
+              className: cn(
+                iconName,
+                selected && iconOnly && v === "ghost-muted" && "text-icon-default"
+              ),
+              "aria-hidden": "true"
+            }
+          ),
           !iconOnly && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("px-sui-2", labelClasses2[s]), children: label })
         ]
       })
@@ -5495,7 +5538,7 @@ function DatePickerInput({
   ] });
 }
 DatePickerInput.displayName = "DatePickerInput";
-var dividerVariants = classVarianceAuthority.cva("flex w-full items-center", {
+var dividerVariants2 = classVarianceAuthority.cva("flex w-full items-center", {
   variants: {
     type: {
       default: "gap-0",
@@ -5556,7 +5599,7 @@ var Divider = React77__namespace.forwardRef(
         ref,
         role: "separator",
         "aria-orientation": "horizontal",
-        className: cn(dividerVariants({ type }), className)
+        className: cn(dividerVariants2({ type }), className)
       }, props), {
         children: [
           showLeftLine && /* @__PURE__ */ jsxRuntime.jsx("div", { className: lineClasses }),
@@ -7932,7 +7975,7 @@ var pageItemVariants = classVarianceAuthority.cva(
           // Default state
           "bg-sui-bg-state-ghost text-sui-text-hint",
           // Hover state
-          "hover:bg-sui-bg-state-ghost-hover hover:text-sui-text-muted",
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover [@media(hover:hover)]:hover:text-sui-text-muted",
           // Disabled state
           "disabled:bg-sui-bg-state-ghost disabled:text-sui-text-hint"
         ].join(" "),
@@ -7943,7 +7986,7 @@ var pageItemVariants = classVarianceAuthority.cva(
           // Default state
           "bg-sui-bg-state-soft",
           // Hover state (soft-hover too subtle for small dots, use stronger token)
-          "hover:bg-sui-bg-state-soft-hover",
+          "[@media(hover:hover)]:hover:bg-sui-bg-state-soft-hover",
           // Disabled state
           "disabled:bg-sui-bg-state-disabled"
         ].join(" ")
@@ -7959,17 +8002,18 @@ var activeDefaultClasses = [
   // Blue text/border: uses bg-basic-blue tokens because text-informative shifts to orange in Theme 2
   "text-sui-bg-basic-blue-strong",
   "border border-sui-bg-basic-blue-accent",
-  "hover:bg-sui-bg-state-ghost hover:text-sui-bg-basic-blue-strong"
+  "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost [@media(hover:hover)]:hover:text-sui-bg-basic-blue-strong"
 ].join(" ");
 var activeDotClasses = [
   "bg-sui-bg-basic-blue-accent",
-  "hover:bg-sui-bg-basic-blue-accent"
+  "[@media(hover:hover)]:hover:bg-sui-bg-basic-blue-accent"
 ].join(" ");
 var PageItem = React77__namespace.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, variant = "default", active = false, label = "0", disabled } = _b, props = __objRest(_b, ["className", "variant", "active", "label", "disabled"]);
+    var _b = _a, { className, variant = "default", active = false, label = "0", disabled, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "active", "label", "disabled", "asChild"]);
+    const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+      Comp,
       __spreadProps(__spreadValues({
         ref,
         disabled,
@@ -8638,6 +8682,7 @@ var RadioButtonCard = React77__namespace.forwardRef(
     variant = "default",
     radioPosition = "off",
     layout = "horizontal",
+    icon,
     value,
     disabled = false,
     className
@@ -8690,6 +8735,17 @@ var RadioButtonCard = React77__namespace.forwardRef(
         "flex flex-col gap-1 text-left",
         isHorizontal ? "flex-1 min-w-0" : "w-full"
       ), children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "flex size-4 shrink-0 items-center leading-none text-base",
+              disabled ? "text-sui-text-hint" : "text-icon-default-subtle"
+            ),
+            "aria-hidden": "true",
+            children: icon
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("span", { id: titleId, className: titleClass, children: title }),
         description && /* @__PURE__ */ jsxRuntime.jsx("span", { id: descriptionId, className: descriptionClass, children: description })
       ] }),
@@ -10580,7 +10636,7 @@ var interactiveBase = [
   "flex items-center rounded-sm",
   "transition-colors cursor-pointer",
   "bg-sui-bg-state-ghost",
-  "hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
+  "[@media(hover:hover)]:hover:bg-sui-bg-state-ghost-hover active:bg-sui-bg-state-ghost-press",
   "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"
 ];
 var sidebarMenuItemVariants = classVarianceAuthority.cva("", {
@@ -10666,7 +10722,7 @@ var SidebarMenuItem2 = React77__namespace.forwardRef(
         }
       );
     }
-    const activeClasses = active ? "bg-sui-bg-state-soft hover:bg-sui-bg-state-soft-hover active:bg-sui-bg-state-soft-press" : "";
+    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" : "";
     const labelColorClass = active ? "text-sui-text-default" : "text-sui-text-subtle";
     if (variant === "collapsed") {
       const button = /* @__PURE__ */ jsxRuntime.jsx(
@@ -13785,7 +13841,7 @@ exports.checkboxWithTextVariants = checkboxWithTextVariants;
 exports.chipVariants = chipVariants;
 exports.controlButtonVariants = controlButtonVariants;
 exports.datePickerInputContainerVariants = datePickerInputContainerVariants;
-exports.dividerVariants = dividerVariants;
+exports.dividerVariants = dividerVariants2;
 exports.emptyStateVariants = emptyStateVariants;
 exports.extractInitials = extractInitials;
 exports.fileUploadCardVariants = fileUploadCardVariants;