@uisatin/ui 0.1.1 → 0.3.0

package/{chunk-B2K45IUR.js → chunk-5XTUFBZI.js}

@@ -1,15 +1,15 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import 'react';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
 
 var dotVariants = cva(
-  "block size-2 rounded-full",
+  "sa:block sa:size-2 sa:rounded-full",
   {
     variants: {
       variant: {
-        solid: "bg-tone-fg",
-        outline: "border border-tone-fg"
+        solid: "sa:bg-tone-fg",
+        outline: "sa:border sa:border-tone-fg"
       }
     },
     defaultVariants: { variant: "solid" }
@@ -24,7 +24,7 @@ function Dot({ className, tone = "fuchsia", variant, label, ...props }) {
       role: label ? "img" : void 0,
       "aria-label": label,
       "aria-hidden": label ? void 0 : true,
-      className: cn("inline-flex size-4 shrink-0 items-center justify-center", className),
+      className: cn("sa:inline-flex sa:size-4 sa:shrink-0 sa:items-center sa:justify-center", className),
       ...props,
       children: /* @__PURE__ */ jsx("span", { className: dotVariants({ variant }) })
     }
@@ -32,5 +32,3 @@ function Dot({ className, tone = "fuchsia", variant, label, ...props }) {
 }
 
 export { Dot, dotVariants };
-//# sourceMappingURL=chunk-B2K45IUR.js.map
-//# sourceMappingURL=chunk-B2K45IUR.js.map

package/{chunk-LW3TRU5W.js → chunk-674SRBZK.js}

@@ -1,5 +1,6 @@
-import { useFieldChrome, FieldChrome } from './chunk-72OCFAPT.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { useFieldChrome, FieldChrome } from './chunk-UCCNXGLG.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Minus, Plus } from 'iconoir-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -22,9 +23,14 @@ function NumberInput({
   name,
   wrapperClassName,
   className,
+  "aria-describedby": describedBy,
+  onChange,
+  onBlur,
+  onKeyDown,
   ...props
 }) {
   const chrome = useFieldChrome({ id, disabled, error, hint });
+  const labels = useSatinLabels();
   const [inner, setInner] = React.useState(defaultValue);
   const value = valueProp ?? inner;
   const [draft, setDraft] = React.useState(null);
@@ -43,10 +49,10 @@ function NumberInput({
   const atMin = value <= min;
   const atMax = value >= max;
   const btn = cn(
-    "grid size-6 shrink-0 place-items-center rounded-md text-text-muted outline-none",
-    "transition-[background-color,color,opacity] duration-(--duration-fast) ease-(--ease-out)",
-    "hover:bg-bg-hover hover:text-text-default focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
-    "disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4 [&_svg]:[stroke-width:1.875]"
+    "sa:grid sa:size-6 sa:shrink-0 sa:place-items-center sa:rounded-md sa:text-text-muted sa:outline-none",
+    "sa:transition-[background-color,color,opacity] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+    "sa:hover:bg-bg-hover sa:hover:text-text-default sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+    "sa:disabled:pointer-events-none sa:disabled:opacity-40 sa:[&_svg]:size-4 sa:[&_svg]:[stroke-width:1.875]"
   );
   return /* @__PURE__ */ jsx(FieldChrome, { label, chrome, className: wrapperClassName, children: /* @__PURE__ */ jsxs(
     "div",
@@ -56,14 +62,14 @@ function NumberInput({
       "data-filled": true,
       "data-invalid": chrome.invalid || void 0,
       "data-disabled": chrome.disabled || void 0,
-      className: cn("satin-field gap-1 px-1", className),
+      className: cn("satin-field sa:gap-1 sa:px-1", className),
       children: [
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             tabIndex: -1,
-            "aria-label": "Decrease",
+            "aria-label": labels.decrease,
             "aria-controls": chrome.controlId,
             disabled: chrome.disabled || atMin,
             onClick: () => by(-1),
@@ -74,6 +80,7 @@ function NumberInput({
         /* @__PURE__ */ jsx(
           "input",
           {
+            ...props,
             id: chrome.controlId,
             name,
             role: "spinbutton",
@@ -83,13 +90,20 @@ function NumberInput({
             "aria-valuemax": Number.isFinite(max) ? max : void 0,
             "aria-valuetext": formatValue(value),
             "aria-invalid": chrome.invalid || void 0,
-            "aria-describedby": chrome.describedBy,
-            "aria-label": props["aria-label"],
+            "aria-describedby": [describedBy, chrome.describedBy].filter(Boolean).join(" ") || void 0,
             disabled: chrome.disabled,
             value: draft ?? formatValue(value),
-            onChange: (e) => setDraft(e.target.value),
-            onBlur: () => draft != null && commit(Number(draft.replace(",", ".").replace(/[^\d.-]/g, "")) || 0),
+            onChange: (e) => {
+              onChange?.(e);
+              setDraft(e.target.value);
+            },
+            onBlur: (e) => {
+              onBlur?.(e);
+              if (draft != null) commit(Number(draft.replace(",", ".").replace(/[^\d.-]/g, "")) || 0);
+            },
             onKeyDown: (e) => {
+              onKeyDown?.(e);
+              if (e.defaultPrevented) return;
               const keys = {
                 ArrowUp: () => by(1),
                 ArrowDown: () => by(-1),
@@ -105,7 +119,7 @@ function NumberInput({
                 keys[e.key]();
               }
             },
-            className: "satin-field-input text-center tabular-nums"
+            className: "satin-field-input sa:text-center sa:tabular-nums"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -113,7 +127,7 @@ function NumberInput({
           {
             type: "button",
             tabIndex: -1,
-            "aria-label": "Increase",
+            "aria-label": labels.increase,
             "aria-controls": chrome.controlId,
             disabled: chrome.disabled || atMax,
             onClick: () => by(1),
@@ -127,5 +141,3 @@ function NumberInput({
 }
 
 export { NumberInput };
-//# sourceMappingURL=chunk-LW3TRU5W.js.map
-//# sourceMappingURL=chunk-LW3TRU5W.js.map

package/{chunk-XZNHT6MO.js → chunk-6VKV36OK.js}

@@ -1,6 +1,7 @@
-import { useFieldChrome, FieldChrome, Select } from './chunk-72OCFAPT.js';
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { useFieldChrome, FieldChrome, Select } from './chunk-UCCNXGLG.js';
+import { Button } from './chunk-T6L32XXH.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Popover } from 'radix-ui';
 import { Calendar as Calendar$1, NavArrowDown, NavArrowLeft, NavArrowRight } from 'iconoir-react';
@@ -40,8 +41,12 @@ function Calendar({
   min,
   max,
   today: todayProp,
-  className
+  className,
+  ref,
+  onPointerLeave,
+  ...props
 }) {
+  const labels = useSatinLabels();
   const today = startOfDay(todayProp ?? /* @__PURE__ */ new Date());
   const anchor = mode === "range" ? range?.from : value;
   const [innerMonth, setInnerMonth] = React.useState(() => addMonths(anchor ?? today, 0));
@@ -53,6 +58,14 @@ function Calendar({
   const [focus, setFocus] = React.useState(() => startOfDay(anchor ?? today));
   const [hover, setHover] = React.useState(null);
   const gridRef = React.useRef(null);
+  const setRoot = React.useCallback(
+    (node) => {
+      gridRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
   const disabled = (d) => min && d < startOfDay(min) || max && d > startOfDay(max) || false;
   const picking = mode === "range" && !!range?.from && !range?.to;
   const pick = (d) => {
@@ -95,46 +108,46 @@ function Calendar({
     const lo = range?.from && end ? end < range.from ? end : range.from : null;
     const hi = range?.from && end ? end < range.from ? range.from : end : null;
     const titleId = `cal-${m.getFullYear()}-${m.getMonth()}`;
-    return /* @__PURE__ */ jsxs("div", { className: "flex w-[280px] shrink-0 flex-col gap-2", children: [
-      header === "picker" && months === 1 ? /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-center gap-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          navBtn(-1, "Previous month", () => setMonth(addMonths(month, -1))),
-          /* @__PURE__ */ jsx("span", { id: titleId, className: "min-w-[72px] text-center text-sm leading-5 font-medium text-text-default", children: MONTHS[m.getMonth()] }),
-          navBtn(1, "Next month", () => setMonth(addMonths(month, 1)))
+    return /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:w-[280px] sa:shrink-0 sa:flex-col sa:gap-2", children: [
+      header === "picker" && months === 1 ? /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:h-8 sa:items-center sa:gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-1", children: [
+          navBtn(-1, labels.previousMonth, () => setMonth(addMonths(month, -1))),
+          /* @__PURE__ */ jsx("span", { id: titleId, className: "sa:min-w-[72px] sa:text-center sa:text-sm sa:leading-5 sa:font-medium sa:text-text-default", children: MONTHS[m.getMonth()] }),
+          navBtn(1, labels.nextMonth, () => setMonth(addMonths(month, 1)))
         ] }),
-        /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+        /* @__PURE__ */ jsx("span", { className: "sa:flex-1" }),
         /* @__PURE__ */ jsx(
           Select,
           {
             size: "sm",
-            "aria-label": "Year",
+            "aria-label": labels.year,
             value: String(m.getFullYear()),
             onValueChange: (y) => setMonth(new Date(Number(y), m.getMonth(), 1)),
             options: yearOptions(m.getFullYear(), today.getFullYear(), min, max),
-            wrapperClassName: "w-auto shrink-0",
-            className: "w-[92px]"
+            wrapperClassName: "sa:w-auto sa:shrink-0",
+            className: "sa:w-[92px]"
           }
         )
-      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-center gap-1", children: [
-        months === 2 && (i === 0 ? navBtn(-1, "Previous month", () => setMonth(addMonths(month, -1))) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-6 shrink-0" })),
-        /* @__PURE__ */ jsxs("span", { id: titleId, className: cn("flex-1 text-sm leading-5 font-medium text-text-default", months === 2 && "text-center"), children: [
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:h-8 sa:items-center sa:gap-1", children: [
+        months === 2 && (i === 0 ? navBtn(-1, labels.previousMonth, () => setMonth(addMonths(month, -1))) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:size-6 sa:shrink-0" })),
+        /* @__PURE__ */ jsxs("span", { id: titleId, className: cn("sa:flex-1 sa:text-sm sa:leading-5 sa:font-medium sa:text-text-default", months === 2 && "sa:text-center"), children: [
           MONTHS[m.getMonth()],
           " ",
           m.getFullYear()
         ] }),
-        months === 1 && navBtn(-1, "Previous month", () => setMonth(addMonths(month, -1))),
-        months === 2 && i === 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-6 shrink-0" }),
-        (months === 1 || i === 1) && navBtn(1, "Next month", () => setMonth(addMonths(month, 1)))
+        months === 1 && navBtn(-1, labels.previousMonth, () => setMonth(addMonths(month, -1))),
+        months === 2 && i === 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:size-6 sa:shrink-0" }),
+        (months === 1 || i === 1) && navBtn(1, labels.nextMonth, () => setMonth(addMonths(month, 1)))
       ] }),
-      /* @__PURE__ */ jsxs("div", { role: "grid", "aria-labelledby": titleId, className: "flex flex-col gap-1", onKeyDown, children: [
-        /* @__PURE__ */ jsx("div", { role: "row", className: "flex", children: DOW.map((d, k) => /* @__PURE__ */ jsx("span", { role: "columnheader", "aria-label": DOW_FULL[k], className: "grid h-6 w-10 place-items-center text-xs text-text-muted", children: d }, k)) }),
-        weeksOf(m).map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "flex", children: week.map((d) => {
+      /* @__PURE__ */ jsxs("div", { role: "grid", "aria-labelledby": titleId, className: "sa:flex sa:flex-col sa:gap-1", onKeyDown, children: [
+        /* @__PURE__ */ jsx("div", { role: "row", className: "sa:flex", children: DOW.map((d, k) => /* @__PURE__ */ jsx("span", { role: "columnheader", "aria-label": DOW_FULL[k], className: "sa:grid sa:h-6 sa:w-10 sa:place-items-center sa:text-xs sa:text-text-muted", children: d }, k)) }),
+        weeksOf(m).map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "sa:flex", children: week.map((d) => {
           const out = d.getMonth() !== m.getMonth();
           const isSingle = mode === "single" && sameDay(d, value);
           const isEnd = mode === "range" && !out && (sameDay(d, range?.from) || sameDay(d, range?.to));
           const inBand = mode === "range" && !out && lo && hi && !sameDay(lo, hi) && d >= lo && d <= hi;
-          const bandFrom = inBand && sameDay(d, lo) ? "left-1/2" : "left-0";
-          const bandTo = inBand && sameDay(d, hi) ? "right-1/2" : "right-0";
+          const bandFrom = inBand && sameDay(d, lo) ? "sa:left-1/2" : "sa:left-0";
+          const bandTo = inBand && sameDay(d, hi) ? "sa:right-1/2" : "sa:right-0";
           const isHoverEnd = picking && !out && sameDay(d, hover) && !isEnd;
           const isToday = sameDay(d, today);
           const off = disabled(d);
@@ -145,9 +158,9 @@ function Calendar({
               role: "gridcell",
               "aria-selected": isSingle || isEnd || void 0,
               onPointerEnter: () => picking && !out && !off && setHover(d),
-              className: "relative grid size-10 place-items-center",
+              className: "sa:relative sa:grid sa:size-10 sa:place-items-center",
               children: [
-                inBand && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("absolute inset-y-0.5 bg-status-brand-bg", bandFrom, bandTo) }),
+                inBand && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("sa:absolute sa:inset-y-0.5 sa:bg-status-brand-bg", bandFrom, bandTo) }),
                 /* @__PURE__ */ jsxs(
                   "button",
                   {
@@ -163,17 +176,17 @@ function Calendar({
                     },
                     onFocus: () => setFocus(d),
                     className: cn(
-                      "relative grid size-9 place-items-center text-sm leading-5 font-medium outline-none",
+                      "sa:relative sa:grid sa:size-9 sa:place-items-center sa:text-sm sa:leading-5 sa:font-medium sa:outline-none",
                       // While the end is being picked the band and the end circle move together,
                       // so neither fades: a fade here would trail the pointer.
-                      !picking && "transition-[background-color,color] duration-(--duration-fast) ease-(--ease-out)",
-                      "focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)] disabled:pointer-events-none disabled:opacity-40",
-                      isEnd ? "rounded-md" : "rounded-full",
-                      isSingle || isEnd ? "bg-action-primary-bg text-text-on-solid" : cn(out ? "text-text-subtle" : "text-text-default", isHoverEnd ? "bg-bg-hover" : !inBand && "hover:bg-bg-hover")
+                      !picking && "sa:transition-[background-color,color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+                      "sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)] sa:disabled:pointer-events-none sa:disabled:opacity-40",
+                      isEnd ? "sa:rounded-md" : "sa:rounded-full",
+                      isSingle || isEnd ? "sa:bg-action-primary-bg sa:text-text-on-solid" : cn(out ? "sa:text-text-subtle" : "sa:text-text-default", isHoverEnd ? "sa:bg-bg-hover" : !inBand && "sa:hover:bg-bg-hover")
                     ),
                     children: [
                       d.getDate(),
-                      isToday && !isSingle && !isEnd && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute bottom-1 left-1/2 h-0.5 w-3 -translate-x-1/2 rounded-full bg-action-primary-bg" })
+                      isToday && !isSingle && !isEnd && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:absolute sa:bottom-1 sa:left-1/2 sa:h-0.5 sa:w-3 sa:-translate-x-1/2 sa:rounded-full sa:bg-action-primary-bg" })
                     ]
                   }
                 )
@@ -185,7 +198,20 @@ function Calendar({
       ] })
     ] }, i);
   };
-  return /* @__PURE__ */ jsx("div", { ref: gridRef, "data-slot": "calendar", className: cn("flex gap-6", className), onPointerLeave: () => setHover(null), children: Array.from({ length: months }, (_, i) => renderMonth(addMonths(month, i), i)) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref: setRoot,
+      "data-slot": "calendar",
+      className: cn("sa:flex sa:gap-6", className),
+      onPointerLeave: (e) => {
+        onPointerLeave?.(e);
+        setHover(null);
+      },
+      children: Array.from({ length: months }, (_, i) => renderMonth(addMonths(month, i), i))
+    }
+  );
 }
 function yearOptions(shown, thisYear, min, max) {
   const from = min ? min.getFullYear() : Math.min(shown, thisYear - 100);
@@ -196,12 +222,12 @@ function yearOptions(shown, thisYear, min, max) {
   });
 }
 var surfaceClass = cn(
-  "rounded-xl border border-border-default bg-bg-popover",
-  "[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]"
+  "sa:rounded-xl sa:border sa:border-border-default sa:bg-bg-popover",
+  "sa:[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]"
 );
 var popClass = cn(
-  "z-50 outline-none",
-  "origin-(--radix-popover-content-transform-origin) data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]"
+  "sa:z-50 sa:outline-none",
+  "sa:origin-(--radix-popover-content-transform-origin) sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]"
 );
 function Trigger({ text, placeholder, chrome, size, open, className, ...props }) {
   return /* @__PURE__ */ jsxs(
@@ -218,18 +244,18 @@ function Trigger({ text, placeholder, chrome, size, open, className, ...props })
       disabled: chrome.disabled,
       "aria-invalid": chrome.invalid || void 0,
       "aria-describedby": chrome.describedBy,
-      className: cn("satin-field cursor-pointer text-left", className),
+      className: cn("satin-field sa:cursor-pointer sa:text-left", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx("span", { className: "satin-field-icon", "aria-hidden": true, children: /* @__PURE__ */ jsx(Calendar$1, {}) }),
-        /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate", text ? "text-text-default" : "text-text-placeholder"), children: text || placeholder }),
-        /* @__PURE__ */ jsx("span", { className: "satin-field-icon", "aria-hidden": true, children: /* @__PURE__ */ jsx(NavArrowDown, { className: cn("transition-transform duration-(--duration-fast) ease-(--ease-out)", open && "rotate-180") }) })
+        /* @__PURE__ */ jsx("span", { className: cn("sa:min-w-0 sa:flex-1 sa:truncate", text ? "sa:text-text-default" : "sa:text-text-placeholder"), children: text || placeholder }),
+        /* @__PURE__ */ jsx("span", { className: "satin-field-icon", "aria-hidden": true, children: /* @__PURE__ */ jsx(NavArrowDown, { className: cn("sa:transition-transform sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)", open && "sa:rotate-180") }) })
       ]
     }
   );
 }
-function DatePickerPanel({ value, onValueChange, min, max, today, className }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "date-picker-panel", className: cn(surfaceClass, "w-fit p-3", className), children: /* @__PURE__ */ jsx(Calendar, { header: "picker", value, onValueChange, min, max, today }) });
+function DatePickerPanel({ value, onValueChange, min, max, today, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, "data-slot": "date-picker-panel", className: cn(surfaceClass, "sa:w-fit sa:p-3", className), children: /* @__PURE__ */ jsx(Calendar, { header: "picker", value, onValueChange, min, max, today }) });
 }
 function DatePicker({
   value: valueProp,
@@ -241,20 +267,34 @@ function DatePicker({
   label,
   hint,
   error,
-  placeholder = "Pick a date",
+  placeholder,
   disabled,
   id,
   size = "md",
   container,
   wrapperClassName,
-  className
+  className,
+  "aria-describedby": describedBy,
+  ...props
 }) {
   const chrome = useFieldChrome({ id, disabled, error, hint });
+  const labels = useSatinLabels();
   const [inner, setInner] = React.useState(defaultValue);
   const value = valueProp !== void 0 ? valueProp : inner;
   const [open, setOpen] = React.useState(false);
   return /* @__PURE__ */ jsx(FieldChrome, { label, chrome, className: wrapperClassName, children: /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Trigger, { text: value ? formatDate(value) : "", placeholder, chrome, size, open, className }) }),
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, ...props, children: /* @__PURE__ */ jsx(
+      Trigger,
+      {
+        text: value ? formatDate(value) : "",
+        placeholder: placeholder ?? labels.pickDate,
+        chrome,
+        size,
+        open,
+        "aria-describedby": [describedBy, chrome.describedBy].filter(Boolean).join(" ") || void 0,
+        className
+      }
+    ) }),
     /* @__PURE__ */ jsx(Popover.Portal, { container, children: /* @__PURE__ */ jsx(Popover.Content, { "data-slot": "date-picker", align: "start", sideOffset: 4, collisionPadding: 8, className: popClass, children: /* @__PURE__ */ jsx(
       DatePickerPanel,
       {
@@ -282,17 +322,20 @@ function DateRangePicker({
   label,
   hint,
   error,
-  placeholder = "Pick dates",
+  placeholder,
   disabled,
   id,
   size = "md",
-  applyLabel = "Apply",
-  cancelLabel = "Cancel",
+  applyLabel,
+  cancelLabel,
   container,
   wrapperClassName,
-  className
+  className,
+  "aria-describedby": describedBy,
+  ...props
 }) {
   const chrome = useFieldChrome({ id, disabled, error, hint });
+  const labels = useSatinLabels();
   const [inner, setInner] = React.useState(defaultValue);
   const value = valueProp ?? inner;
   const [open, setOpen] = React.useState(false);
@@ -302,7 +345,18 @@ function DateRangePicker({
     setOpen(false);
   };
   return /* @__PURE__ */ jsx(FieldChrome, { label, chrome, className: wrapperClassName, children: /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Trigger, { text: formatRange(value), placeholder, chrome, size, open, className }) }),
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, ...props, children: /* @__PURE__ */ jsx(
+      Trigger,
+      {
+        text: formatRange(value),
+        placeholder: placeholder ?? labels.pickDates,
+        chrome,
+        size,
+        open,
+        "aria-describedby": [describedBy, chrome.describedBy].filter(Boolean).join(" ") || void 0,
+        className
+      }
+    ) }),
     /* @__PURE__ */ jsx(Popover.Portal, { container, children: /* @__PURE__ */ jsx(Popover.Content, { "data-slot": "date-range-picker", align: "start", sideOffset: 4, collisionPadding: 8, className: popClass, children: /* @__PURE__ */ jsx(
       DateRangePickerPanel,
       {
@@ -325,24 +379,24 @@ function DateRangePickerPanel({
   min,
   max,
   today,
-  applyLabel = "Apply",
-  cancelLabel = "Cancel",
-  className
+  applyLabel,
+  cancelLabel,
+  className,
+  ...props
 }) {
+  const labels = useSatinLabels();
   const [draft, setDraft] = React.useState(value);
   const [month, setMonth] = React.useState(() => addMonths(value.from ?? today ?? todayDate(), 0));
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "date-range-picker-panel", className: cn(surfaceClass, "flex w-fit shrink-0 flex-col overflow-hidden", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsx(Calendar, { mode: "range", months: 2, range: draft, onRangeChange: setDraft, month, onMonthChange: setMonth, min, max, today }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border-subtle px-3 py-2", children: [
+  return /* @__PURE__ */ jsxs("div", { ...props, "data-slot": "date-range-picker-panel", className: cn(surfaceClass, "sa:flex sa:w-fit sa:shrink-0 sa:flex-col sa:overflow-hidden", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "sa:p-3", children: /* @__PURE__ */ jsx(Calendar, { mode: "range", months: 2, range: draft, onRangeChange: setDraft, month, onMonthChange: setMonth, min, max, today }) }),
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:justify-end sa:gap-2 sa:border-t sa:border-border-subtle sa:px-3 sa:py-2", children: [
       /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => {
         setDraft(value);
         onCancel?.();
-      }, children: cancelLabel }),
-      /* @__PURE__ */ jsx(Button, { disabled: !draft.from || !draft.to, onClick: () => onApply?.(draft), children: applyLabel })
+      }, children: cancelLabel ?? labels.cancel }),
+      /* @__PURE__ */ jsx(Button, { disabled: !draft.from || !draft.to, onClick: () => onApply?.(draft), children: applyLabel ?? labels.apply })
     ] })
   ] });
 }
 
 export { Calendar, DatePicker, DatePickerPanel, DateRangePicker, DateRangePickerPanel, formatDate, formatRange };
-//# sourceMappingURL=chunk-XZNHT6MO.js.map
-//# sourceMappingURL=chunk-XZNHT6MO.js.map

package/{chunk-GICKPMJU.js → chunk-73Z7NMQQ.js}

@@ -1,7 +1,8 @@
-import { Progress } from './chunk-7TXHCRAG.js';
-import { FileIcon, Attachment } from './chunk-H4NU7NPO.js';
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { FileIcon, Attachment } from './chunk-UUCVRIVP.js';
+import { Progress } from './chunk-M2HEVFQ3.js';
+import { Button } from './chunk-T6L32XXH.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Page, WarningCircle, Xmark } from 'iconoir-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -30,7 +31,7 @@ function fileIconFor(name) {
   const e = ext(name);
   if (e === "pdf") return /* @__PURE__ */ jsx(FileIcon, { type: "pdf" });
   if (["xls", "xlsx", "csv", "numbers"].includes(e)) return /* @__PURE__ */ jsx(FileIcon, { type: "xlsx" });
-  return /* @__PURE__ */ jsx(Page, { "aria-hidden": true, className: "size-icon-size text-text-muted [stroke-width:1.875]" });
+  return /* @__PURE__ */ jsx(Page, { "aria-hidden": true, className: "sa:size-icon-size sa:text-text-muted sa:[stroke-width:1.875]" });
 }
 function FileUpload({
   files = [],
@@ -51,6 +52,7 @@ function FileUpload({
   className,
   ...props
 }) {
+  const labels = useSatinLabels();
   const inputRef = React.useRef(null);
   const descriptionId = React.useId();
   const [dragging, setDragging] = React.useState(false);
@@ -71,7 +73,7 @@ function FileUpload({
   };
   const rows = files.filter((f) => f.status !== "done");
   const done = files.filter((f) => f.status === "done");
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "file-upload", className: cn("flex w-full flex-col gap-2", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "file-upload", className: cn("sa:flex sa:w-full sa:flex-col sa:gap-2", className), ...props, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -101,16 +103,16 @@ function FileUpload({
           take(e.dataTransfer.files);
         },
         className: cn(
-          "flex flex-col items-center gap-4 rounded-2xl border border-dashed border-border-default px-6 py-8 text-center",
-          "transition-[background-color,border-color] duration-(--duration-fast) ease-(--ease-out)",
-          "data-[dragging]:border-status-brand-border data-[dragging]:bg-bg-hover",
-          "data-[disabled]:opacity-50"
+          "sa:flex sa:flex-col sa:items-center sa:gap-4 sa:rounded-2xl sa:border sa:border-dashed sa:border-border-default sa:px-6 sa:py-8 sa:text-center",
+          "sa:transition-[background-color,border-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:data-[dragging]:border-status-brand-border sa:data-[dragging]:bg-bg-hover",
+          "sa:data-[disabled]:opacity-50"
         ),
         children: [
           /* @__PURE__ */ jsx(UploadMark, { over }),
-          /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center gap-1", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-base font-medium text-text-default", children: over ? dropTitle : title }),
-            description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-sm text-text-muted", children: description })
+          /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:w-full sa:flex-col sa:items-center sa:gap-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "sa:text-base sa:font-medium sa:text-text-default", children: over ? dropTitle : title }),
+            description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "sa:text-sm sa:text-text-muted", children: description })
           ] }),
           /* @__PURE__ */ jsx(
             Button,
@@ -141,8 +143,8 @@ function FileUpload({
         ]
       }
     ),
-    rows.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", "aria-label": "Files", children: rows.map((f) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(FileUploadItem, { file: f, onCancel, onRemove }) }, f.id)) }),
-    done.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", "aria-label": "Attached files", children: done.map((f) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    rows.length > 0 && /* @__PURE__ */ jsx("ul", { className: "sa:flex sa:flex-col sa:gap-2", "aria-label": labels.files, children: rows.map((f) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(FileUploadItem, { file: f, onCancel, onRemove }) }, f.id)) }),
+    done.length > 0 && /* @__PURE__ */ jsx("ul", { className: "sa:flex sa:flex-col sa:gap-2", "aria-label": labels.attachedFiles, children: done.map((f) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
       Attachment,
       {
         name: f.name,
@@ -150,7 +152,7 @@ function FileUpload({
         icon: f.icon ?? fileIconFor(f.name),
         onRemove: onRemove ? () => onRemove(f) : void 0,
         onOpen: onOpen ? () => onOpen(f) : void 0,
-        className: "flex w-full [&_[data-attachment-main]]:flex-1 [&_[data-attachment-name]]:max-w-none"
+        className: "sa:flex sa:w-full sa:[&_[data-attachment-main]]:flex-1 sa:[&_[data-attachment-name]]:max-w-none"
       }
     ) }, f.id)) })
   ] });
@@ -168,11 +170,11 @@ function FileUploadItem({
         "data-slot": "file-upload-item",
         "data-status": "error",
         role: "alert",
-        className: cn("flex items-center gap-2 rounded-xl border border-status-red-border bg-status-red-bg py-2 pr-2 pl-3 text-sm", className),
+        className: cn("sa:flex sa:items-center sa:gap-2 sa:rounded-xl sa:border sa:border-status-red-border sa:bg-status-red-bg sa:py-2 sa:pr-2 sa:pl-3 sa:text-sm", className),
         children: [
-          /* @__PURE__ */ jsx(WarningCircle, { "aria-hidden": true, className: "size-icon-size shrink-0 text-status-red-fg [stroke-width:1.875]" }),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-text-default", children: file.name }),
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-status-red-fg", children: file.error ?? "Upload failed" }),
+          /* @__PURE__ */ jsx(WarningCircle, { "aria-hidden": true, className: "sa:size-icon-size sa:shrink-0 sa:text-status-red-fg sa:[stroke-width:1.875]" }),
+          /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:font-medium sa:text-text-default", children: file.name }),
+          /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:text-status-red-fg", children: file.error ?? "Upload failed" }),
           onRemove && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", shape: "rounded", iconOnly: true, "aria-label": `Remove ${file.name}`, onClick: () => onRemove(file), children: /* @__PURE__ */ jsx(Xmark, { "aria-hidden": true }) })
         ]
       }
@@ -186,13 +188,13 @@ function FileUploadItem({
     {
       "data-slot": "file-upload-item",
       "data-status": "uploading",
-      className: cn("flex items-center gap-2 rounded-xl border border-border-default bg-bg-card p-2 text-sm", className),
+      className: cn("sa:flex sa:items-center sa:gap-2 sa:rounded-xl sa:border sa:border-border-default sa:bg-bg-card sa:p-2 sa:text-sm", className),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-bg-muted [&_svg]:size-icon-size", children: file.icon ?? fileIconFor(file.name) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-text-default", children: file.name }),
-            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-text-muted tabular-nums", children: meta })
+        /* @__PURE__ */ jsx("span", { className: "sa:flex sa:size-9 sa:shrink-0 sa:items-center sa:justify-center sa:rounded-lg sa:bg-bg-muted sa:[&_svg]:size-icon-size", children: file.icon ?? fileIconFor(file.name) }),
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col sa:gap-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:font-medium sa:text-text-default", children: file.name }),
+            /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:text-text-muted sa:tabular-nums", children: meta })
           ] }),
           /* @__PURE__ */ jsx(Progress, { value: known ? p : void 0, showValue: false, "aria-label": `Uploading ${file.name}` })
         ] }),
@@ -207,10 +209,10 @@ function UploadMark({ over }) {
     {
       "aria-hidden": true,
       className: cn(
-        "flex size-10 shrink-0 items-center justify-center rounded-xl transition-[background-color] duration-(--duration-fast) ease-(--ease-out)",
-        over ? "bg-bg-card" : "bg-bg-muted"
+        "sa:flex sa:size-10 sa:shrink-0 sa:items-center sa:justify-center sa:rounded-xl sa:transition-[background-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        over ? "sa:bg-bg-card" : "sa:bg-bg-muted"
       ),
-      children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", className: "text-text-subtle", children: [
+      children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", className: "sa:text-text-subtle", children: [
         /* @__PURE__ */ jsx(
           "path",
           {
@@ -235,5 +237,3 @@ function UploadMark({ over }) {
 }
 
 export { FileUpload, FileUploadItem, fileIconFor, formatBytes };
-//# sourceMappingURL=chunk-GICKPMJU.js.map
-//# sourceMappingURL=chunk-GICKPMJU.js.map