@uisatin/ui 0.2.0 → 0.3.0

package/chunk-O46O6LFQ.js

@@ -0,0 +1,25 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/lib/utils.ts
+var PREFIX = "sa:";
+function cn(...inputs) {
+  const joined = clsx(inputs);
+  if (!joined.includes(PREFIX)) return twMerge(joined);
+  const tokens = joined.split(/\s+/).filter(Boolean);
+  const bare = tokens.map((t) => t.startsWith(PREFIX) ? t.slice(PREFIX.length) : t);
+  const kept = twMerge(bare.join(" ")).split(" ");
+  const left = /* @__PURE__ */ new Map();
+  for (const k of kept) left.set(k, (left.get(k) ?? 0) + 1);
+  const out = [];
+  for (let i = tokens.length - 1; i >= 0; i--) {
+    const n = left.get(bare[i]) ?? 0;
+    if (n > 0) {
+      left.set(bare[i], n - 1);
+      out.push(tokens[i]);
+    }
+  }
+  return out.reverse().join(" ");
+}
+
+export { cn };

package/{chunk-YPNKBE5X.js → chunk-OURZQM27.js}

@@ -1,5 +1,5 @@
-import { useFormField } from './chunk-UBNHSZSE.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { useFormField } from './chunk-VUOAPWTF.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -35,12 +35,12 @@ function Input({
   );
   const filled = value != null ? String(value).length > 0 : uncontrolledFilled;
   const inputRef = React.useRef(null);
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "input-wrapper", className: cn("grid w-full gap-2", wrapperClassName), children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "input-wrapper", className: cn("sa:grid sa:w-full sa:gap-2", wrapperClassName), children: [
     label && /* @__PURE__ */ jsx(
       "label",
       {
         htmlFor: inputId,
-        className: "text-sm leading-[18px] font-medium text-text-default",
+        className: "sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default",
         children: label
       }
     ),
@@ -92,7 +92,7 @@ function Input({
       "p",
       {
         id: messageId,
-        className: cn("text-sm", typeof error === "string" || React.isValidElement(error) ? "text-action-destructive-bg" : "text-text-muted"),
+        className: cn("sa:text-sm", typeof error === "string" || React.isValidElement(error) ? "sa:text-action-destructive-bg" : "sa:text-text-muted"),
         children: message
       }
     )
@@ -100,5 +100,3 @@ function Input({
 }
 
 export { Input };
-//# sourceMappingURL=chunk-YPNKBE5X.js.map
-//# sourceMappingURL=chunk-YPNKBE5X.js.map

package/{chunk-XL75JRUA.js → chunk-OVKPPXK5.js}

@@ -1,5 +1,5 @@
-import { useFieldChrome, FieldChrome } from './chunk-72OCFAPT.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { useFieldChrome, FieldChrome } from './chunk-UCCNXGLG.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { CheckCircle } from 'iconoir-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -21,6 +21,12 @@ function InputOTP({
   id,
   name,
   className,
+  "aria-describedby": describedByProp,
+  ref,
+  onChange,
+  onFocus,
+  onBlur,
+  onSelect,
   ...props
 }) {
   const chrome = useFieldChrome({ id, disabled, error: error ? true : void 0 });
@@ -29,11 +35,19 @@ function InputOTP({
   const successMessage = isSuccess && success !== true ? success : null;
   const message = isError ? error : successMessage ?? (chrome.invalid ? null : hint);
   const messageId = message ? `${chrome.controlId}-message` : void 0;
-  const describedBy = [chrome.describedBy, messageId].filter(Boolean).join(" ") || void 0;
+  const describedBy = [describedByProp, chrome.describedBy, messageId].filter(Boolean).join(" ") || void 0;
   const [inner, setInner] = React.useState(defaultValue);
   const value = (valueProp ?? inner).slice(0, length);
   const [focused, setFocused] = React.useState(false);
   const inputRef = React.useRef(null);
+  const setInput = React.useCallback(
+    (node) => {
+      inputRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
   const set = (raw) => {
     const next = [...raw].filter((c) => pattern.test(c)).join("").slice(0, length);
     if (valueProp == null) setInner(next);
@@ -42,33 +56,33 @@ function InputOTP({
   };
   const active = Math.min(value.length, length - 1);
   const cells = Array.from({ length }, (_, i) => i);
-  return /* @__PURE__ */ jsxs(FieldChrome, { label, chrome, className: cn("w-fit", className), children: [
+  return /* @__PURE__ */ jsxs(FieldChrome, { label, chrome, className: cn("sa:w-fit", className), children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
         "data-slot": "input-otp",
         "data-disabled": chrome.disabled || void 0,
-        className: cn("relative flex w-fit items-center gap-2", chrome.disabled && "opacity-50"),
+        className: cn("sa:relative sa:flex sa:w-fit sa:items-center sa:gap-2", chrome.disabled && "sa:opacity-50"),
         children: [
           cells.map((i) => {
             const isActive = focused && i === active;
             return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              groupSize > 0 && i > 0 && i % groupSize === 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-px w-2 shrink-0 bg-border-strong" }),
+              groupSize > 0 && i > 0 && i % groupSize === 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:h-px sa:w-2 sa:shrink-0 sa:bg-border-strong" }),
               /* @__PURE__ */ jsxs(
                 "span",
                 {
                   "aria-hidden": true,
                   "data-active": isActive || void 0,
                   className: cn(
-                    "relative grid size-9 shrink-0 place-items-center rounded-lg border bg-bg-field text-base leading-[21px] font-medium text-text-default",
-                    "[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
-                    "transition-[border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-                    chrome.invalid ? "border-action-destructive-bg" : isSuccess ? "border-status-green-fg" : "border-border-default",
-                    isActive && (chrome.invalid ? "[box-shadow:0_0_0_2px_var(--action-destructive-glow)]" : isSuccess ? "[box-shadow:0_0_0_2px_var(--status-green-border)]" : "border-border-focus [box-shadow:0_0_0_2px_var(--action-focus-ring)]")
+                    "sa:relative sa:grid sa:size-9 sa:shrink-0 sa:place-items-center sa:rounded-lg sa:border sa:bg-bg-field sa:text-base sa:leading-[21px] sa:font-medium sa:text-text-default",
+                    "sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+                    "sa:transition-[border-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+                    chrome.invalid ? "sa:border-action-destructive-bg" : isSuccess ? "sa:border-status-green-fg" : "sa:border-border-default",
+                    isActive && (chrome.invalid ? "sa:[box-shadow:0_0_0_2px_var(--action-destructive-glow)]" : isSuccess ? "sa:[box-shadow:0_0_0_2px_var(--status-green-border)]" : "sa:border-border-focus sa:[box-shadow:0_0_0_2px_var(--action-focus-ring)]")
                   ),
                   children: [
                     value[i] ?? "",
-                    isActive && value.length < length && /* @__PURE__ */ jsx("span", { className: "absolute h-[18px] w-px animate-[satin-caret_1s_steps(1)_infinite] bg-text-default" })
+                    isActive && value.length < length && /* @__PURE__ */ jsx("span", { className: "sa:absolute sa:h-[18px] sa:w-px sa:animate-[satin-caret_1s_steps(1)_infinite] sa:bg-text-default" })
                   ]
                 }
               )
@@ -77,18 +91,27 @@ function InputOTP({
           /* @__PURE__ */ jsx(
             "input",
             {
-              ref: inputRef,
+              ...props,
+              ref: setInput,
               id: chrome.controlId,
               name,
               value,
-              onChange: (e) => set(e.target.value),
+              onChange: (e) => {
+                onChange?.(e);
+                set(e.target.value);
+              },
               onFocus: (e) => {
+                onFocus?.(e);
                 setFocused(true);
                 const end = e.currentTarget.value.length;
                 requestAnimationFrame(() => inputRef.current?.setSelectionRange(end, end));
               },
-              onBlur: () => setFocused(false),
+              onBlur: (e) => {
+                onBlur?.(e);
+                setFocused(false);
+              },
               onSelect: (e) => {
+                onSelect?.(e);
                 const end = e.currentTarget.value.length;
                 if (e.currentTarget.selectionStart !== end) e.currentTarget.setSelectionRange(end, end);
               },
@@ -99,9 +122,8 @@ function InputOTP({
               disabled: chrome.disabled,
               "aria-invalid": chrome.invalid || void 0,
               "aria-describedby": describedBy,
-              "aria-label": props["aria-label"],
               spellCheck: false,
-              className: "absolute inset-0 w-full cursor-text bg-transparent text-transparent caret-transparent outline-none selection:bg-transparent focus-visible:outline-none focus-visible:ring-0 focus-visible:[box-shadow:none] disabled:cursor-not-allowed"
+              className: "sa:absolute sa:inset-0 sa:w-full sa:cursor-text sa:bg-transparent sa:text-transparent sa:caret-transparent sa:outline-none sa:selection:bg-transparent sa:focus-visible:outline-none sa:focus-visible:ring-0 sa:focus-visible:[box-shadow:none] sa:disabled:cursor-not-allowed"
             }
           )
         ]
@@ -113,11 +135,11 @@ function InputOTP({
         id: messageId,
         "aria-live": "polite",
         className: cn(
-          "flex min-h-5 w-0 min-w-full items-start gap-1.5 text-sm leading-5",
-          isError ? "text-action-destructive-bg" : successMessage ? "text-status-green-fg" : "text-text-muted"
+          "sa:flex sa:min-h-5 sa:w-0 sa:min-w-full sa:items-start sa:gap-1.5 sa:text-sm sa:leading-5",
+          isError ? "sa:text-action-destructive-bg" : successMessage ? "sa:text-status-green-fg" : "sa:text-text-muted"
         ),
         children: [
-          successMessage && /* @__PURE__ */ jsx(CheckCircle, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 [stroke-width:1.875]" }),
+          successMessage && /* @__PURE__ */ jsx(CheckCircle, { "aria-hidden": true, className: "sa:mt-0.5 sa:size-4 sa:shrink-0 sa:[stroke-width:1.875]" }),
           message
         ]
       }
@@ -126,5 +148,3 @@ function InputOTP({
 }
 
 export { InputOTP };
-//# sourceMappingURL=chunk-XL75JRUA.js.map
-//# sourceMappingURL=chunk-XL75JRUA.js.map

package/chunk-PD6YPFYN.js

@@ -0,0 +1,42 @@
+import { cn } from './chunk-O46O6LFQ.js';
+import 'react';
+import { HoverCard as HoverCard$1 } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function HoverCard({
+  trigger,
+  children,
+  side = "bottom",
+  align = "start",
+  openDelay = 400,
+  closeDelay = 150,
+  open,
+  defaultOpen,
+  onOpenChange,
+  container,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(HoverCard$1.Root, { openDelay, closeDelay, open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx(HoverCard$1.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(HoverCard$1.Portal, { container, children: /* @__PURE__ */ jsx(
+      HoverCard$1.Content,
+      {
+        sideOffset: 8,
+        collisionPadding: 8,
+        ...props,
+        side,
+        align,
+        className: cn(hoverCardClass, className),
+        children
+      }
+    ) })
+  ] });
+}
+var hoverCardClass = cn(
+  "sa:z-50 sa:flex sa:w-80 sa:max-w-[calc(100vw-16px)] sa:flex-col sa:gap-3 sa:rounded-xl sa:border sa:border-border-default sa:bg-bg-popover sa:p-4 sa:outline-none",
+  "sa:[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]",
+  "sa:origin-(--radix-hover-card-content-transform-origin) sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]"
+);
+
+export { HoverCard, hoverCardClass };

package/{chunk-XILQ7GXE.js → chunk-PHNR6ZQ7.js}

@@ -1,17 +1,17 @@
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Button } from './chunk-T6L32XXH.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { Xmark } from 'iconoir-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var cardVariants = cva(
-  "relative flex w-[405px] max-w-full flex-col overflow-clip rounded-2xl border border-border-default bg-bg-card",
+  "sa:relative sa:flex sa:w-[405px] sa:max-w-full sa:flex-col sa:overflow-clip sa:rounded-2xl sa:border sa:border-border-default sa:bg-bg-card",
   {
     variants: {
       size: {
-        md: "[--card-pad:calc(var(--spacing)*4)]",
-        sm: "[--card-pad:calc(var(--spacing)*3)]"
+        md: "sa:[--card-pad:calc(var(--sa-spacing)*4)]",
+        sm: "sa:[--card-pad:calc(var(--sa-spacing)*3)]"
       }
     },
     defaultVariants: { size: "md" }
@@ -39,12 +39,12 @@ function Card({
       className: cn(cardVariants({ size }), className),
       ...props,
       children: [
-        hasHeader && /* @__PURE__ */ jsxs("div", { "data-slot": "card-header", className: cn("flex flex-col gap-0.5 px-(--card-pad) pt-(--card-pad)", onClose && "pr-10"), children: [
-          title != null && /* @__PURE__ */ jsx("div", { id: titleId, className: "text-base leading-[14px] font-medium tracking-normal text-text-default", children: title }),
-          description != null && /* @__PURE__ */ jsx("p", { className: "text-body text-text-muted", children: description })
+        hasHeader && /* @__PURE__ */ jsxs("div", { "data-slot": "card-header", className: cn("sa:flex sa:flex-col sa:gap-0.5 sa:px-(--card-pad) sa:pt-(--card-pad)", onClose && "sa:pr-10"), children: [
+          title != null && /* @__PURE__ */ jsx("div", { id: titleId, className: "sa:text-base sa:leading-[14px] sa:font-medium sa:tracking-normal sa:text-text-default", children: title }),
+          description != null && /* @__PURE__ */ jsx("p", { className: "sa:text-body sa:text-text-muted", children: description })
         ] }),
-        children != null && /* @__PURE__ */ jsx("div", { "data-slot": "card-body", className: "flex flex-col gap-2 p-(--card-pad)", children }),
-        footer != null && /* @__PURE__ */ jsx("div", { "data-slot": "card-footer", className: "flex items-center gap-2 p-(--card-pad)", children: footer }),
+        children != null && /* @__PURE__ */ jsx("div", { "data-slot": "card-body", className: "sa:flex sa:flex-col sa:gap-2 sa:p-(--card-pad)", children }),
+        footer != null && /* @__PURE__ */ jsx("div", { "data-slot": "card-footer", className: "sa:flex sa:items-center sa:gap-2 sa:p-(--card-pad)", children: footer }),
         onClose && /* @__PURE__ */ jsx(
           Button,
           {
@@ -52,7 +52,7 @@ function Card({
             iconOnly: true,
             "aria-label": closeLabel,
             onClick: onClose,
-            className: "absolute top-[7px] right-[7px]",
+            className: "sa:absolute sa:top-[7px] sa:right-[7px]",
             children: /* @__PURE__ */ jsx(Xmark, { "aria-hidden": true })
           }
         )
@@ -62,5 +62,3 @@ function Card({
 }
 
 export { Card, cardVariants };
-//# sourceMappingURL=chunk-XILQ7GXE.js.map
-//# sourceMappingURL=chunk-XILQ7GXE.js.map

package/{chunk-BNTPPZCK.js → chunk-PUWSL5XW.js}

@@ -1,12 +1,12 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Slot, Tooltip, Collapsible } from 'radix-ui';
 import { NavArrowRight } from 'iconoir-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-var rowFocus = "outline-none satin-focus:[box-shadow:inset_0_0_0_1px_var(--border-focus)]";
+var rowFocus = "sa:outline-none sa:satin-focus:[box-shadow:inset_0_0_0_1px_var(--border-focus)]";
 function Sidebar({ className, ...props }) {
-  return /* @__PURE__ */ jsx("nav", { "data-slot": "sidebar", className: cn("flex flex-col gap-0.5", className), ...props });
+  return /* @__PURE__ */ jsx("nav", { "data-slot": "sidebar", className: cn("sa:flex sa:flex-col sa:gap-0.5", className), ...props });
 }
 function SidebarItem({
   className,
@@ -34,22 +34,22 @@ function SidebarItem({
       href: disabled ? void 0 : href,
       tabIndex: disabled ? -1 : void 0,
       className: cn(
-        "flex h-8 shrink-0 items-center gap-2 rounded-lg px-2 text-sm leading-4 font-medium tracking-normal text-text-muted no-underline select-none",
-        "transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-        "[&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]",
-        "not-data-active:satin-hover:bg-bg-muted",
+        "sa:flex sa:h-8 sa:shrink-0 sa:items-center sa:gap-2 sa:rounded-lg sa:px-2 sa:text-sm sa:leading-4 sa:font-medium sa:tracking-normal sa:text-text-muted sa:no-underline sa:select-none",
+        "sa:transition-[background-color,color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        "sa:[&_svg]:size-icon-size-sm sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]",
+        "sa:not-data-active:satin-hover:bg-bg-muted",
         rowFocus,
-        "data-active:bg-border-input data-active:text-text-default",
-        "aria-disabled:pointer-events-none aria-disabled:opacity-50",
-        iconOnly && "relative size-8 justify-center px-0",
+        "sa:data-active:bg-border-input sa:data-active:text-text-default",
+        "sa:aria-disabled:pointer-events-none sa:aria-disabled:opacity-50",
+        iconOnly && "sa:relative sa:size-8 sa:justify-center sa:px-0",
         className
       ),
       ...props,
       children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
         icon,
-        !iconOnly && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+        !iconOnly && /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate", children: label }),
         showCount && !iconOnly && /* @__PURE__ */ jsx(SidebarCount, { count }),
-        showCount && iconOnly && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute top-1 right-1 size-1.5 rounded-full bg-action-destructive-bg" })
+        showCount && iconOnly && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:absolute sa:top-1 sa:right-1 sa:size-1.5 sa:rounded-full sa:bg-action-destructive-bg" })
       ] })
     }
   );
@@ -62,7 +62,7 @@ function SidebarItem({
         side: "right",
         sideOffset: 6,
         collisionPadding: 8,
-        className: "z-50 rounded-md bg-action-inverse-bg px-2 py-1 text-xs font-medium text-text-on-inverse [box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+        className: "sa:z-50 sa:rounded-md sa:bg-action-inverse-bg sa:px-2 sa:py-1 sa:text-xs sa:font-medium sa:text-text-on-inverse sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
         children: label
       }
     ) })
@@ -71,7 +71,7 @@ function SidebarItem({
 function SidebarCount({ count }) {
   return (
     // 11/12 has no type token in the kit; Figma uses it raw for this counter.
-    /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 min-w-[18px] shrink-0 items-center justify-center rounded-xs bg-action-destructive-bg px-1 text-[11px] leading-3 font-medium tracking-normal text-text-on-solid tabular-nums", children: count > 99 ? "99+" : count })
+    /* @__PURE__ */ jsx("span", { className: "sa:inline-flex sa:h-4 sa:min-w-[18px] sa:shrink-0 sa:items-center sa:justify-center sa:rounded-xs sa:bg-action-destructive-bg sa:px-1 sa:text-[11px] sa:leading-3 sa:font-medium sa:tracking-normal sa:text-text-on-solid sa:tabular-nums", children: count > 99 ? "99+" : count })
   );
 }
 function SidebarGroup({
@@ -98,7 +98,7 @@ function SidebarGroup({
         if (openProp == null) setUncontrolled(next);
         onOpenChange?.(next);
       },
-      className: cn("group/sidebar-group flex flex-col gap-0.5", className),
+      className: cn("sa:group/sidebar-group sa:flex sa:flex-col sa:gap-0.5", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxs(
@@ -107,28 +107,28 @@ function SidebarGroup({
             "aria-controls": regionId,
             ...triggerProps,
             className: cn(
-              "flex h-8 w-full shrink-0 items-center gap-2 rounded-lg px-3 text-left text-text-muted",
-              "transition-[background-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-              "[&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]",
-              "not-data-active:satin-hover:bg-bg-muted",
+              "sa:flex sa:h-8 sa:w-full sa:shrink-0 sa:items-center sa:gap-2 sa:rounded-lg sa:px-3 sa:text-left sa:text-text-muted",
+              "sa:transition-[background-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+              "sa:[&_svg]:size-icon-size-sm sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]",
+              "sa:not-data-active:satin-hover:bg-bg-muted",
               rowFocus,
               triggerProps?.className
             ),
             children: [
               icon,
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm leading-4 font-medium tracking-normal text-text-default", children: label }),
-              typeof count === "number" && /* @__PURE__ */ jsx("span", { className: "shrink-0 px-1.5 py-0.5 text-sm leading-4 font-medium tracking-normal text-tone-fg tabular-nums", children: count }),
+              /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-sm sa:leading-4 sa:font-medium sa:tracking-normal sa:text-text-default", children: label }),
+              typeof count === "number" && /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:px-1.5 sa:py-0.5 sa:text-sm sa:leading-4 sa:font-medium sa:tracking-normal sa:text-tone-fg sa:tabular-nums", children: count }),
               /* @__PURE__ */ jsx(
                 NavArrowRight,
                 {
                   "aria-hidden": true,
-                  className: "transition-transform duration-(--duration-base) ease-(--ease-out) group-data-[state=open]/sidebar-group:rotate-90 motion-reduce:transition-none"
+                  className: "sa:transition-transform sa:duration-(--sa-duration-base) sa:ease-(--sa-ease-out) sa:group-data-[state=open]/sidebar-group:rotate-90 sa:motion-reduce:transition-none"
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { id: regionId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children }) })
+        /* @__PURE__ */ jsx("div", { id: regionId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { className: "sa:flex sa:flex-col sa:gap-0.5", children }) })
       ]
     }
   );
@@ -154,16 +154,16 @@ function SidebarSubItem({
       href: disabled ? void 0 : href,
       tabIndex: disabled ? -1 : void 0,
       className: cn(
-        "flex h-8 shrink-0 items-center rounded-lg pr-3 pl-[34px] text-sm font-normal text-text-muted no-underline select-none",
-        "transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-        "not-data-active:satin-hover:bg-bg-muted not-data-active:satin-hover:text-text-default",
+        "sa:flex sa:h-8 sa:shrink-0 sa:items-center sa:rounded-lg sa:pr-3 sa:pl-[34px] sa:text-sm sa:font-normal sa:text-text-muted sa:no-underline sa:select-none",
+        "sa:transition-[background-color,color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        "sa:not-data-active:satin-hover:bg-bg-muted sa:not-data-active:satin-hover:text-text-default",
         rowFocus,
-        "data-active:bg-bg-selected data-active:text-text-default",
-        "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        "sa:data-active:bg-bg-selected sa:data-active:text-text-default",
+        "sa:aria-disabled:pointer-events-none sa:aria-disabled:opacity-50",
         className
       ),
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label })
+      children: asChild ? children : /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate", children: label })
     }
   );
 }
@@ -180,7 +180,7 @@ function SidebarSubGroup({
   const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? active);
   const open = openProp ?? uncontrolled;
   const regionId = React.useId();
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-sub-group", "data-state": open ? "open" : "closed", className: cn("group/sub-group flex flex-col gap-0.5", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-sub-group", "data-state": open ? "open" : "closed", className: cn("sa:group/sub-group sa:flex sa:flex-col sa:gap-0.5", className), ...props, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -193,28 +193,26 @@ function SidebarSubGroup({
           onOpenChange?.(!open);
         },
         className: cn(
-          "flex h-8 w-full shrink-0 items-center gap-2 rounded-lg pr-3 pl-[34px] text-left text-sm font-normal text-text-muted select-none",
-          "transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-          "satin-hover:bg-bg-muted satin-hover:text-text-default data-active:text-text-default",
-          "[&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]",
+          "sa:flex sa:h-8 sa:w-full sa:shrink-0 sa:items-center sa:gap-2 sa:rounded-lg sa:pr-3 sa:pl-[34px] sa:text-left sa:text-sm sa:font-normal sa:text-text-muted sa:select-none",
+          "sa:transition-[background-color,color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:satin-hover:bg-bg-muted sa:satin-hover:text-text-default sa:data-active:text-text-default",
+          "sa:[&_svg]:size-icon-size-sm sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]",
           rowFocus
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate", children: label }),
           /* @__PURE__ */ jsx(
             NavArrowRight,
             {
               "aria-hidden": true,
-              className: "text-text-muted transition-transform duration-(--duration-base) ease-(--ease-out) group-data-[state=open]/sub-group:rotate-90 motion-reduce:transition-none"
+              className: "sa:text-text-muted sa:transition-transform sa:duration-(--sa-duration-base) sa:ease-(--sa-ease-out) sa:group-data-[state=open]/sub-group:rotate-90 sa:motion-reduce:transition-none"
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { id: regionId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 [&>[data-slot=sidebar-sub-item]]:pl-[46px]", children }) })
+    /* @__PURE__ */ jsx("div", { id: regionId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { className: "sa:flex sa:flex-col sa:gap-0.5 sa:[&>[data-slot=sidebar-sub-item]]:pl-[46px]", children }) })
   ] });
 }
 
 export { Sidebar, SidebarGroup, SidebarItem, SidebarSubGroup, SidebarSubItem };
-//# sourceMappingURL=chunk-BNTPPZCK.js.map
-//# sourceMappingURL=chunk-BNTPPZCK.js.map