@uisatin/ui 0.2.0 → 0.4.0

package/{chunk-3DINAQLL.js → chunk-P36KBUYD.js}

@@ -1,15 +1,16 @@
-import { KbdGroup } from './chunk-BKZBWPUH.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { KbdGroup } from './chunk-XWPH7C2W.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { DropdownMenu as DropdownMenu$1 } from 'radix-ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var menuSurfaceClass = cn(
-  "rounded-xl border border-border-subtle bg-bg-popover",
-  "[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]"
+  "sa:rounded-xl sa:border sa:border-border-subtle sa:bg-bg-popover",
+  "sa:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]"
 );
-var menuGroupClass = "flex flex-col gap-1 not-last:after:block not-last:after:h-px not-last:after:bg-bg-muted";
-var menuGroupLabelClass = "flex h-6 items-center px-3 text-xs leading-3 tracking-normal text-text-subtle";
+var menuGroupClass = "sa:flex sa:flex-col sa:gap-1 sa:not-last:after:block sa:not-last:after:h-px sa:not-last:after:bg-bg-muted";
+var menuGroupLabelClass = "sa:flex sa:h-6 sa:items-center sa:px-3 sa:text-xs sa:leading-3 sa:tracking-normal sa:text-text-subtle";
 function DropdownMenu({
   trigger,
   children,
@@ -30,19 +31,19 @@ function DropdownMenu({
     /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { container, children: /* @__PURE__ */ jsx(
       DropdownMenu$1.Content,
       {
+        collisionPadding: 8,
+        ...props,
         "data-slot": "dropdown-menu",
-        "aria-label": props["aria-label"],
         side,
         align,
         sideOffset,
-        collisionPadding: 8,
         onFocusOutside,
         className: cn(
-          "pointer-events-auto z-50 flex w-[255px] max-w-[520px] flex-col gap-1 overflow-x-clip overflow-y-auto p-1",
-          "max-h-(--radix-dropdown-menu-content-available-height)",
+          "sa:pointer-events-auto sa:z-50 sa:flex sa:w-[255px] sa:max-w-[520px] sa:flex-col sa:gap-1 sa:overflow-x-clip sa:overflow-y-auto sa:p-1",
+          "sa:max-h-(--radix-dropdown-menu-content-available-height)",
           menuSurfaceClass,
-          "origin-(--radix-dropdown-menu-content-transform-origin) outline-none",
-          "data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]",
+          "sa:origin-(--radix-dropdown-menu-content-transform-origin) sa:outline-none",
+          "sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]",
           className
         ),
         children
@@ -65,11 +66,11 @@ function DropdownMenuGroup({ label, children, className, ...props }) {
   );
 }
 var menuItemClass = cn(
-  "flex min-h-menu-row w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-left outline-none select-none focus-visible:ring-0",
-  "transition-colors duration-(--duration-fast) ease-(--ease-out)",
-  "data-[highlighted]:bg-bg-selected data-[force=hover]:bg-bg-selected data-[selected]:bg-bg-selected",
-  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-  "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  "sa:flex sa:min-h-menu-row sa:w-full sa:cursor-pointer sa:items-center sa:gap-2 sa:rounded-lg sa:px-3 sa:py-1.5 sa:text-left sa:outline-none sa:select-none sa:focus-visible:ring-0",
+  "sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+  "sa:data-[highlighted]:bg-bg-selected sa:data-[force=hover]:bg-bg-selected sa:data-[selected]:bg-bg-selected",
+  "sa:data-[disabled]:pointer-events-none sa:data-[disabled]:opacity-50",
+  "sa:[&_svg]:pointer-events-none sa:[&_svg]:shrink-0"
 );
 function MenuItemContent({
   label,
@@ -81,27 +82,32 @@ function MenuItemContent({
   shortcut,
   renderLabel = (l) => l
 }) {
+  const labels = useSatinLabels();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     icon ? /* @__PURE__ */ jsx(
       "span",
       {
         className: cn(
-          "grid shrink-0 place-items-center text-text-muted",
-          iconSize === 20 ? "size-5 [&_svg]:size-5 [&_svg]:[stroke-width:1.5]" : "size-4 [&_svg]:size-4 [&_svg]:[stroke-width:1.875]"
+          "sa:grid sa:shrink-0 sa:place-items-center sa:text-text-muted",
+          iconSize === 20 ? "sa:size-5 sa:[&_svg]:size-5 sa:[&_svg]:[stroke-width:1.5]" : "sa:size-4 sa:[&_svg]:size-4 sa:[&_svg]:[stroke-width:1.875]"
         ),
         children: icon
       }
     ) : null,
-    layout === "stacked" ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col justify-center gap-0.5", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-base leading-5 font-medium text-text-default", children: renderLabel(label) }),
-      description ? /* @__PURE__ */ jsx("span", { className: "text-sm leading-[18px] text-text-muted", children: description }) : null
-    ] }) : /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-3", children: [
-      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-base leading-5 font-medium whitespace-nowrap text-text-default", children: renderLabel(label) }),
-      description ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-text-muted", children: description }) : null
+    layout === "stacked" ? /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col sa:justify-center sa:gap-0.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "sa:text-base sa:leading-5 sa:font-medium sa:text-text-default", children: renderLabel(label) }),
+      description ? /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:leading-[18px] sa:text-text-muted", children: description }) : null
+    ] }) : /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:items-baseline sa:gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:text-base sa:leading-5 sa:font-medium sa:whitespace-nowrap sa:text-text-default", children: renderLabel(label) }),
+      description ? /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-sm sa:text-text-muted", children: description }) : null
     ] }),
     shortcut && /* @__PURE__ */ jsx(KbdGroup, { keys: shortcut, "aria-hidden": true }),
-    selected && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "(selected)" }),
-    selected && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "text-status-green-fg", children: /* @__PURE__ */ jsx(
+    selected && /* @__PURE__ */ jsxs("span", { className: "sa:sr-only", children: [
+      "(",
+      labels.selected,
+      ")"
+    ] }),
+    selected && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "sa:text-status-green-fg", children: /* @__PURE__ */ jsx(
       "path",
       {
         d: "M3.33333 8.66667L6 11.3333L12.6667 4.66667",
@@ -149,5 +155,3 @@ function DropdownMenuItem({
 }
 
 export { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, MenuItemContent, menuGroupClass, menuGroupLabelClass, menuItemClass, menuSurfaceClass };
-//# sourceMappingURL=chunk-3DINAQLL.js.map
-//# sourceMappingURL=chunk-3DINAQLL.js.map

package/chunk-P6RHT2VM.js

@@ -0,0 +1,147 @@
+import { useSlidingIndicator } from './chunk-XETMIETJ.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { Tabs as Tabs$1 } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var list = cva("sa:relative sa:flex", {
+  variants: {
+    variant: {
+      // The rule is an inset shadow, so the 2px indicator can sit on top of it (as in Figma).
+      underline: "sa:items-end sa:gap-8 sa:[box-shadow:inset_0_-1px_0_var(--border-default)]",
+      pill: "sa:items-center sa:gap-1"
+    }
+  }
+});
+var trigger = cva(
+  [
+    "sa:group/tab sa:relative sa:flex sa:shrink-0 sa:items-center sa:font-medium sa:whitespace-nowrap sa:text-text-muted sa:select-none",
+    "sa:transition-[color,background-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+    "sa:focus-visible:outline-none sa:disabled:pointer-events-none sa:disabled:opacity-50",
+    "sa:satin-hover:text-text-default sa:satin-focus:text-text-default sa:data-[state=active]:text-text-default",
+    "sa:[&_svg]:pointer-events-none sa:[&_svg]:size-4 sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]"
+  ],
+  {
+    variants: {
+      variant: {
+        underline: "",
+        pill: [
+          "sa:rounded-pill",
+          "sa:data-[state=inactive]:satin-hover:bg-bg-muted",
+          "sa:satin-focus:[box-shadow:0_0_0_1px_var(--border-focus)]"
+        ]
+      },
+      size: {
+        md: "sa:text-base",
+        sm: "sa:text-sm"
+      }
+    },
+    compoundVariants: [
+      { variant: "sa:underline", size: "md", className: "sa:h-control-height-xl" },
+      { variant: "sa:underline", size: "sm", className: "sa:h-control-height-lg" },
+      { variant: "pill", size: "md", className: "sa:h-control-height-lg sa:px-3" },
+      { variant: "pill", size: "sm", className: "sa:h-control-height sa:px-2.5" }
+    ]
+  }
+);
+function normalize(item) {
+  return typeof item === "string" ? { value: item, label: item } : item;
+}
+function Tabs({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  variant = "underline",
+  size = "md",
+  disabled = false,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const tabs = items.map(normalize);
+  const listRef = React.useRef(null);
+  const [current, setCurrent] = React.useState(value ?? defaultValue ?? tabs[0]?.value);
+  const selected = value ?? current;
+  const indicator = useSlidingIndicator(listRef, '[role="tab"][data-state="active"]', `${selected}|${variant}|${size}|${tabs.length}`);
+  return /* @__PURE__ */ jsxs(
+    Tabs$1.Root,
+    {
+      ...props,
+      "data-slot": "tabs",
+      value,
+      defaultValue: defaultValue ?? (value === void 0 ? tabs[0]?.value : void 0),
+      onValueChange: (v) => {
+        setCurrent(v);
+        onValueChange?.(v);
+      },
+      className: cn("sa:flex sa:flex-col", className),
+      children: [
+        /* @__PURE__ */ jsxs(Tabs$1.List, { ref: listRef, "aria-label": ariaLabel, className: list({ variant }), children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: indicator.ref,
+              "aria-hidden": true,
+              className: cn(
+                "sa:pointer-events-none sa:absolute sa:left-0 sa:opacity-0",
+                variant === "sa:underline" ? "sa:bottom-0 sa:z-10 sa:h-0.5 sa:rounded-full sa:bg-action-primary-bg" : "sa:top-1/2 sa:z-0 sa:-translate-y-1/2 sa:rounded-pill sa:bg-bg-selected",
+                variant === "pill" && (size === "md" ? "sa:h-control-height-lg" : "sa:h-control-height")
+              )
+            }
+          ),
+          tabs.map((tab) => /* @__PURE__ */ jsxs(
+            Tabs$1.Trigger,
+            {
+              value: tab.value,
+              disabled: disabled || tab.disabled,
+              ...children == null && { "aria-controls": void 0 },
+              className: cn(
+                trigger({ variant, size }),
+                variant === "pill" && "sa:z-10",
+                // Before the indicator is placed (server render), the selected tab paints its own.
+                !indicator.ready && variant === "pill" && "sa:data-[state=active]:bg-bg-selected"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "sa:flex sa:items-center sa:gap-1.5 sa:rounded-sm",
+                      variant === "sa:underline" && "sa:group-focus-visible/tab:[box-shadow:inset_0_0_0_1.5px_var(--border-focus)] sa:group-data-[force=focus]/tab:[box-shadow:inset_0_0_0_1.5px_var(--border-focus)]"
+                    ),
+                    children: [
+                      tab.icon,
+                      tab.label
+                    ]
+                  }
+                ),
+                variant === "underline" && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: cn(
+                      "sa:absolute sa:inset-x-0 sa:bottom-0 sa:h-0.5 sa:rounded-full sa:bg-transparent",
+                      "sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+                      "sa:group-data-[state=inactive]/tab:group-hover/tab:bg-border-strong sa:group-data-[state=inactive]/tab:group-data-[force=hover]/tab:bg-border-strong",
+                      !indicator.ready && "sa:group-data-[state=active]/tab:bg-action-primary-bg"
+                    )
+                  }
+                )
+              ]
+            },
+            tab.value
+          ))
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Tabs$1.Content, { "data-slot": "tabs-content", className: cn("sa:rounded-md sa:focus-visible:shadow-border-focus sa:focus-visible:outline-none", className), ...props });
+}
+
+export { Tabs, TabsContent };

package/{chunk-CL2II6BX.js → chunk-PD2KD5OR.js}

@@ -1,4 +1,4 @@
-import { ChartCard, defaultFormat, ChartLegendPill } from './chunk-YPJYW624.js';
+import { ChartCard, defaultFormat, ChartLegendPill } from './chunk-LI5VYDLN.js';
 import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -23,11 +23,11 @@ function DonutCard({ data, formatValue = defaultFormat, highlight, centerLabel =
   return /* @__PURE__ */ jsx(ChartCard, { ...props, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "flex flex-col items-center gap-4 @min-[560px]:flex-row @min-[560px]:gap-8",
+      className: "sa:flex sa:flex-col sa:items-center sa:gap-4 sa:@min-[560px]:flex-row sa:@min-[560px]:gap-8",
       onPointerLeave: () => setHovered(null),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative shrink-0 py-2", style: { width: SIZE }, children: [
-          /* @__PURE__ */ jsx("svg", { width: SIZE, height: SIZE, viewBox: `0 0 ${SIZE} ${SIZE}`, "aria-hidden": true, className: "block -rotate-90", children: arcs.map(({ i, start, len }) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { className: "sa:relative sa:shrink-0 sa:py-2", style: { width: SIZE }, children: [
+          /* @__PURE__ */ jsx("svg", { width: SIZE, height: SIZE, viewBox: `0 0 ${SIZE} ${SIZE}`, "aria-hidden": true, className: "sa:block sa:-rotate-90", children: arcs.map(({ i, start, len }) => /* @__PURE__ */ jsx(
             "circle",
             {
               cx: SIZE / 2,
@@ -39,20 +39,20 @@ function DonutCard({ data, formatValue = defaultFormat, highlight, centerLabel =
               strokeDasharray: `${len} ${C - len}`,
               strokeDashoffset: -start,
               onPointerEnter: () => setHovered(i),
-              className: "transition-opacity duration-(--duration-fast) ease-(--ease-out)",
+              className: "sa:transition-opacity sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
               style: { opacity: active !== null && active !== i ? 0.15 : 1 }
             },
             data[i].label
           )) }),
-          /* @__PURE__ */ jsxs("div", { "aria-live": "polite", className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xl leading-(--text-xl--line-height) font-semibold text-text-default tabular-nums", children: formatValue(active != null ? data[active].value : sum) }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm leading-(--text-sm--line-height) text-text-muted", children: active != null ? `${data[active].label} \xB7 ${share(data[active].value)}%` : centerLabel })
+          /* @__PURE__ */ jsxs("div", { "aria-live": "polite", className: "sa:pointer-events-none sa:absolute sa:inset-0 sa:flex sa:flex-col sa:items-center sa:justify-center sa:text-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "sa:text-xl sa:leading-(--sa-text-xl--line-height) sa:font-semibold sa:text-text-default sa:tabular-nums", children: formatValue(active != null ? data[active].value : sum) }),
+            /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:text-text-muted", children: active != null ? `${data[active].label} \xB7 ${share(data[active].value)}%` : centerLabel })
           ] })
         ] }),
         /* @__PURE__ */ jsx(
           "ul",
           {
-            className: "grid w-full grid-cols-2 gap-x-4 gap-y-2 px-2 @min-[560px]:flex @min-[560px]:flex-1 @min-[560px]:flex-col @min-[560px]:gap-1 @min-[560px]:px-0",
+            className: "sa:grid sa:w-full sa:grid-cols-2 sa:gap-x-4 sa:gap-y-2 sa:px-2 sa:@min-[560px]:flex sa:@min-[560px]:flex-1 sa:@min-[560px]:flex-col sa:@min-[560px]:gap-1 sa:@min-[560px]:px-0",
             "aria-label": props.title,
             children: data.map((d, i) => /* @__PURE__ */ jsx(
               "li",
@@ -62,12 +62,12 @@ function DonutCard({ data, formatValue = defaultFormat, highlight, centerLabel =
                 onFocus: () => setHovered(i),
                 onBlur: () => setHovered(null),
                 "aria-label": `${d.label}: ${formatValue(d.value)}, ${share(d.value)}%`,
-                className: "min-w-0 rounded-pill outline-none focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+                className: "sa:min-w-0 sa:rounded-pill sa:outline-none sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
                 children: /* @__PURE__ */ jsx(
                   ChartLegendPill,
                   {
                     variant: "plain",
-                    className: "flex w-full",
+                    className: "sa:flex sa:w-full",
                     color: seriesColor(i),
                     label: d.label,
                     active: active === i,
@@ -85,5 +85,3 @@ function DonutCard({ data, formatValue = defaultFormat, highlight, centerLabel =
 }
 
 export { DonutCard };
-//# sourceMappingURL=chunk-CL2II6BX.js.map
-//# sourceMappingURL=chunk-CL2II6BX.js.map

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

@@ -1,5 +1,5 @@
-import { useFieldChrome, FieldChrome } from './chunk-72OCFAPT.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { useFieldChrome, FieldChrome } from './chunk-EQAFDIPE.js';
+import { cn } from './chunk-EHEXE2UV.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-L6NCCSIP.js → chunk-PTK4QAOQ.js}

@@ -1,6 +1,7 @@
-import { Input } from './chunk-YPNKBE5X.js';
-import { TooltipBubble } from './chunk-B6V4VSGH.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Input } from './chunk-L5PPN42A.js';
+import { TooltipBubble } from './chunk-KDU7AT2T.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Slider as Slider$1 } from 'radix-ui';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -25,8 +26,12 @@ function Slider({
   name,
   id,
   "aria-label": ariaLabel,
-  className
+  "aria-labelledby": labelledBy,
+  className,
+  onPointerDown,
+  ...props
 }) {
+  const labels = useSatinLabels();
   const autoId = React.useId();
   const sliderId = id ?? autoId;
   const labelId = `${sliderId}-label`;
@@ -56,8 +61,8 @@ function Slider({
   }, [dragging]);
   React.useEffect(() => () => clearTimeout(keyTimer.current), []);
   const readout = range ? `${formatValue(values[0])} \u2013 ${formatValue(values[1])}` : formatValue(values[0]);
-  const thumbLabel = (i) => range ? i === 0 ? "From" : "To" : void 0;
-  const fieldLabel = (i) => range ? i === 0 ? "From" : "To" : "Value";
+  const thumbLabel = (i) => range ? i === 0 ? labels.from : labels.to : void 0;
+  const fieldLabel = (i) => range ? i === 0 ? labels.from : labels.to : labels.value;
   const commitTyped = (i, typed) => {
     const places = decimals(step);
     let v = Math.round((typed - min) / step) * step + min;
@@ -81,6 +86,7 @@ function Slider({
   const slider = /* @__PURE__ */ jsxs(
     Slider$1.Root,
     {
+      ...props,
       id: sliderId,
       "data-slot": "slider",
       value: values,
@@ -93,18 +99,21 @@ function Slider({
       orientation,
       disabled,
       name,
-      "aria-labelledby": label ? labelId : void 0,
-      onPointerDown: () => !disabled && setDragging(true),
+      "aria-labelledby": label ? labelId : labelledBy,
+      onPointerDown: (e) => {
+        onPointerDown?.(e);
+        if (!disabled) setDragging(true);
+      },
       className: cn(
-        "relative flex shrink-0 touch-none items-center select-none data-[disabled]:cursor-not-allowed",
-        vertical ? "h-40 w-5 flex-col" : "h-5 w-full min-w-0 flex-1"
+        "sa:relative sa:flex sa:shrink-0 sa:touch-none sa:items-center sa:select-none sa:data-[disabled]:cursor-not-allowed",
+        vertical ? "sa:h-40 sa:w-5 sa:flex-col" : "sa:h-5 sa:w-full sa:min-w-0 sa:flex-1"
       ),
       children: [
         /* @__PURE__ */ jsx(
           Slider$1.Track,
           {
-            className: cn("relative grow cursor-pointer overflow-hidden rounded-full bg-bg-muted", vertical ? "w-1" : "h-1"),
-            children: /* @__PURE__ */ jsx(Slider$1.Range, { className: cn("absolute rounded-full bg-action-primary-bg", vertical ? "w-full" : "h-full") })
+            className: cn("sa:relative sa:grow sa:cursor-pointer sa:overflow-hidden sa:rounded-full sa:bg-bg-muted", vertical ? "sa:w-1" : "sa:h-1"),
+            children: /* @__PURE__ */ jsx(Slider$1.Range, { className: cn("sa:absolute sa:rounded-full sa:bg-action-primary-bg", vertical ? "sa:w-full" : "sa:h-full") })
           }
         ),
         values.map((v, i) => /* @__PURE__ */ jsx(
@@ -125,11 +134,11 @@ function Slider({
               keyTimer.current = setTimeout(() => setKeying(false), 1e3);
             },
             className: cn(
-              "relative block size-4 cursor-grab rounded-full border border-border-strong bg-bg-popover outline-none active:cursor-grabbing",
-              "[box-shadow:0_1px_3px_0_var(--effect-shadow-sm)]",
-              "transition-[border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-              "hover:border-text-subtle focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
-              "data-[disabled]:cursor-not-allowed data-[disabled]:hover:border-border-strong"
+              "sa:relative sa:block sa:size-4 sa:cursor-grab sa:rounded-full sa:border sa:border-border-strong sa:bg-bg-popover sa:outline-none sa:active:cursor-grabbing",
+              "sa:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm)]",
+              "sa:transition-[border-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+              "sa:hover:border-text-subtle sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+              "sa:data-[disabled]:cursor-not-allowed sa:data-[disabled]:hover:border-border-strong"
             ),
             children: tooltip && /* @__PURE__ */ jsx(
               TooltipBubble,
@@ -138,8 +147,8 @@ function Slider({
                 label: formatValue(v),
                 "data-visible": (dragging || keying) && focused === i ? "" : void 0,
                 className: cn(
-                  "pointer-events-none absolute tabular-nums opacity-0 transition-[opacity,translate] duration-(--duration-fast) ease-(--ease-out) data-[visible]:opacity-100",
-                  vertical ? "top-1/2 left-full ml-2 -translate-x-0.5 -translate-y-1/2 data-[visible]:translate-x-0" : "bottom-full left-1/2 mb-2 -translate-x-1/2 translate-y-0.5 data-[visible]:translate-y-0"
+                  "sa:pointer-events-none sa:absolute sa:tabular-nums sa:opacity-0 sa:transition-[opacity,translate] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:data-[visible]:opacity-100",
+                  vertical ? "sa:top-1/2 sa:left-full sa:ml-2 sa:-translate-x-0.5 sa:-translate-y-1/2 sa:data-[visible]:translate-x-0" : "sa:bottom-full sa:left-1/2 sa:mb-2 sa:-translate-x-1/2 sa:translate-y-0.5 sa:data-[visible]:translate-y-0"
                 )
               }
             )
@@ -149,9 +158,9 @@ function Slider({
       ]
     }
   );
-  const head = (label || showValue && !inputs) && /* @__PURE__ */ jsxs("div", { className: cn("flex h-[18px] items-center justify-between gap-3 whitespace-nowrap", vertical && "min-w-full"), children: [
-    label ? /* @__PURE__ */ jsx("span", { id: labelId, className: "text-sm leading-[18px] font-medium text-text-default", children: label }) : /* @__PURE__ */ jsx("span", {}),
-    showValue && !inputs && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-sm leading-[18px] text-text-muted tabular-nums", children: readout })
+  const head = (label || showValue && !inputs) && /* @__PURE__ */ jsxs("div", { className: cn("sa:flex sa:h-[18px] sa:items-center sa:justify-between sa:gap-3 sa:whitespace-nowrap", vertical && "sa:min-w-full"), children: [
+    label ? /* @__PURE__ */ jsx("span", { id: labelId, className: "sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default", children: label }) : /* @__PURE__ */ jsx("span", {}),
+    showValue && !inputs && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:text-sm sa:leading-[18px] sa:text-text-muted sa:tabular-nums", children: readout })
   ] });
   return /* @__PURE__ */ jsxs(
     "div",
@@ -159,14 +168,14 @@ function Slider({
       "data-slot": "slider-field",
       "data-orientation": orientation,
       "data-disabled": disabled || void 0,
-      className: cn("flex flex-col gap-2", vertical ? "w-max items-center" : "w-full", className),
+      className: cn("sa:flex sa:flex-col sa:gap-2", vertical ? "sa:w-max sa:items-center" : "sa:w-full", className),
       children: [
         head,
-        vertical ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-2", disabled && "opacity-50"), children: [
+        vertical ? /* @__PURE__ */ jsxs("div", { className: cn("sa:flex sa:flex-col sa:items-center sa:gap-2", disabled && "sa:opacity-50"), children: [
           inputs && range && field(1),
           slider,
           inputs && field(0)
-        ] }) : /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", disabled && "opacity-50"), children: [
+        ] }) : /* @__PURE__ */ jsxs("div", { className: cn("sa:flex sa:items-center sa:gap-3", disabled && "sa:opacity-50"), children: [
           inputs && range && field(0),
           slider,
           inputs && field(range ? 1 : 0)
@@ -202,12 +211,10 @@ function SliderInput({
         if (e.key === "Enter") commit();
         if (e.key === "Escape") setDraft(null);
       },
-      wrapperClassName: "w-16 shrink-0",
-      className: "[&_input]:text-center [&_input]:tabular-nums"
+      wrapperClassName: "sa:w-16 sa:shrink-0",
+      className: "sa:[&_input]:text-center sa:[&_input]:tabular-nums"
     }
   );
 }
 
 export { Slider };
-//# sourceMappingURL=chunk-L6NCCSIP.js.map
-//# sourceMappingURL=chunk-L6NCCSIP.js.map