@uisatin/ui 0.2.0 → 0.4.0

package/{chunk-MYEZXZZC.js → chunk-TOY6YPTG.js}

@@ -1,34 +1,34 @@
-import { Tooltip, TooltipBubble } from './chunk-B6V4VSGH.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Tooltip, TooltipBubble } from './chunk-KDU7AT2T.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var avatarVariants = cva(
-  "inline-flex shrink-0 items-center justify-center overflow-clip bg-tone-bg text-center whitespace-nowrap text-tone-fg select-none",
+  "sa:inline-flex sa:shrink-0 sa:items-center sa:justify-center sa:overflow-clip sa:bg-tone-bg sa:text-center sa:whitespace-nowrap sa:text-tone-fg sa:select-none",
   {
     variants: {
       size: {
-        16: "size-4 text-[7px] leading-[8px] font-semibold tracking-normal",
-        20: "size-5 text-[9px] leading-[10px] font-semibold tracking-normal",
-        24: "size-6 text-2xs font-semibold",
-        32: "size-8 text-sm leading-4 font-medium tracking-normal",
-        40: "size-10 text-base leading-[14px] font-medium tracking-normal",
-        48: "size-12 text-lg font-medium"
+        16: "sa:size-4 sa:text-[7px] sa:leading-[8px] sa:font-semibold sa:tracking-normal",
+        20: "sa:size-5 sa:text-[9px] sa:leading-[10px] sa:font-semibold sa:tracking-normal",
+        24: "sa:size-6 sa:text-2xs sa:font-semibold",
+        32: "sa:size-8 sa:text-sm sa:leading-4 sa:font-medium sa:tracking-normal",
+        40: "sa:size-10 sa:text-base sa:leading-[14px] sa:font-medium sa:tracking-normal",
+        48: "sa:size-12 sa:text-lg sa:font-medium"
       },
       shape: {
-        circle: "rounded-full",
+        circle: "sa:rounded-full",
         rounded: ""
       }
     },
     compoundVariants: [
-      { shape: "rounded", size: 16, className: "rounded-xs" },
-      { shape: "rounded", size: 20, className: "rounded-xs" },
-      { shape: "rounded", size: 24, className: "rounded-sm" },
-      { shape: "rounded", size: 32, className: "rounded-md" },
-      { shape: "rounded", size: 40, className: "rounded-lg" },
-      { shape: "rounded", size: 48, className: "rounded-xl" }
+      { shape: "sa:rounded", size: 16, className: "sa:rounded-xs" },
+      { shape: "sa:rounded", size: 20, className: "sa:rounded-xs" },
+      { shape: "sa:rounded", size: 24, className: "sa:rounded-sm" },
+      { shape: "sa:rounded", size: 32, className: "sa:rounded-md" },
+      { shape: "sa:rounded", size: 40, className: "sa:rounded-lg" },
+      { shape: "sa:rounded", size: 48, className: "sa:rounded-xl" }
     ],
     defaultVariants: { size: 32, shape: "circle" }
   }
@@ -47,7 +47,7 @@ function Avatar({ className, initials, tone = "neutral", size = 32, shape, name,
       ...name ? { role: "img", "aria-label": name, tabIndex: 0 } : {},
       className: cn(
         avatarVariants({ size, shape }),
-        name && "outline-none focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        name && "sa:outline-none sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
         className
       ),
       ...props,
@@ -101,7 +101,7 @@ function AvatarGroup({ className, side = "top", children, ...props }) {
     []
   );
   return /* @__PURE__ */ jsxs(AvatarGroupContext.Provider, { value: api, children: [
-    /* @__PURE__ */ jsx("div", { "data-slot": "avatar-group", role: "group", className: cn("flex items-center gap-2", className), ...props, children }),
+    /* @__PURE__ */ jsx("div", { "data-slot": "avatar-group", role: "group", className: cn("sa:flex sa:items-center sa:gap-2", className), ...props, children }),
     open && target && /* @__PURE__ */ jsx(GroupTooltip, { anchor: target.el, name: target.name, side })
   ] });
 }
@@ -136,21 +136,21 @@ function GroupTooltip({ anchor, name, side }) {
       {
         "aria-hidden": true,
         "data-side": side,
-        className: "pointer-events-none fixed top-0 left-0 z-50 transition-transform duration-(--duration-base) ease-(--ease-out) motion-reduce:transition-none",
+        className: "sa:pointer-events-none sa:fixed sa:top-0 sa:left-0 sa:z-50 sa:transition-transform sa:duration-(--sa-duration-base) sa:ease-(--sa-ease-out) sa:motion-reduce:transition-none",
         style: { transform: `translate(${point.x}px, ${point.y}px)` },
         children: /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "-translate-x-1/2 transition-[opacity,translate] duration-(--duration-fast) ease-(--ease-out) starting:opacity-0",
-              side === "top" ? "-translate-y-full starting:-translate-y-[calc(100%-4px)]" : "starting:translate-y-[-4px]"
+              "sa:-translate-x-1/2 sa:transition-[opacity,translate] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:starting:opacity-0",
+              side === "top" ? "sa:-translate-y-full sa:starting:-translate-y-[calc(100%-4px)]" : "sa:starting:translate-y-[-4px]"
             ),
             children: /* @__PURE__ */ jsx(
               TooltipBubble,
               {
-                className: "overflow-hidden transition-[width] duration-(--duration-base) ease-(--ease-out) motion-reduce:transition-none",
+                className: "sa:overflow-hidden sa:transition-[width] sa:duration-(--sa-duration-base) sa:ease-(--sa-ease-out) sa:motion-reduce:transition-none",
                 style: { width },
-                label: /* @__PURE__ */ jsx("span", { ref: label, className: "inline-block shrink-0 transition-opacity duration-(--duration-fast) ease-(--ease-out) starting:opacity-0", children: name }, name)
+                label: /* @__PURE__ */ jsx("span", { ref: label, className: "sa:inline-block sa:shrink-0 sa:transition-opacity sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:starting:opacity-0", children: name }, name)
               }
             )
           }
@@ -162,5 +162,3 @@ function GroupTooltip({ anchor, name, side }) {
 }
 
 export { AVATAR_TOOLTIP_DELAY, Avatar, AvatarGroup, avatarVariants };
-//# sourceMappingURL=chunk-MYEZXZZC.js.map
-//# sourceMappingURL=chunk-MYEZXZZC.js.map

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

@@ -1,17 +1,17 @@
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { cn } from './chunk-EHEXE2UV.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-XZNHT6MO.js → chunk-UAJ6M34K.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-EQAFDIPE.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.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-W2EH6RY5.js

@@ -0,0 +1,42 @@
+import { cn } from './chunk-EHEXE2UV.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-FDKIX4DC.js → chunk-W2QQQWNE.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Checkbox as Checkbox$1 } from 'radix-ui';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -15,9 +15,9 @@ function Checkbox({ className, label, description, placement = "left", id, ...pr
       "data-slot": "checkbox",
       "aria-labelledby": labelId,
       "aria-describedby": descriptionId,
-      className: cn("peer satin-checkbox", className),
+      className: cn("sa:peer satin-checkbox", className),
       ...props,
-      children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { className: "-m-px grid size-4 place-items-center", children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx("path", { d: "M3.6 8H12.4", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" }) : /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { className: "sa:-m-px sa:grid sa:size-4 sa:place-items-center", children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx("path", { d: "M3.6 8H12.4", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" }) : /* @__PURE__ */ jsx(
         "path",
         {
           d: "M3.33333 8.66667L6 11.3333L12.6667 4.66667",
@@ -37,12 +37,12 @@ function Checkbox({ className, label, description, placement = "left", id, ...pr
       {
         htmlFor: boxId,
         "data-slot": "checkbox-field",
-        className: cn("flex cursor-pointer items-start gap-2 has-disabled:cursor-not-allowed has-data-disabled:cursor-not-allowed [&>:first-child]:mt-0.5", placement === "right" && "flex-row-reverse justify-between"),
+        className: cn("sa:flex sa:cursor-pointer sa:items-start sa:gap-2 sa:has-disabled:cursor-not-allowed sa:has-data-disabled:cursor-not-allowed sa:[&>:first-child]:mt-0.5", placement === "right" && "sa:flex-row-reverse sa:justify-between"),
         children: [
           box,
-          /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5 text-base", children: [
-            label && /* @__PURE__ */ jsx("span", { id: labelId, className: "block leading-5 font-medium text-text-default", children: label }),
-            description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "block leading-5 text-text-muted", children: description })
+          /* @__PURE__ */ jsxs("div", { className: "sa:grid sa:gap-0.5 sa:text-base sa:peer-disabled:*:text-text-subtle", children: [
+            label && /* @__PURE__ */ jsx("span", { id: labelId, className: "sa:block sa:leading-5 sa:font-medium sa:text-text-default", children: label }),
+            description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "sa:block sa:leading-5 sa:text-text-muted", children: description })
           ] })
         ]
       }
@@ -51,5 +51,3 @@ function Checkbox({ className, label, description, placement = "left", id, ...pr
 }
 
 export { Checkbox };
-//# sourceMappingURL=chunk-FDKIX4DC.js.map
-//# sourceMappingURL=chunk-FDKIX4DC.js.map

package/{chunk-LZMKSFCF.js → chunk-WALANB3V.js}

@@ -1,5 +1,5 @@
-import { ChartCard, ChartTooltip, defaultFormat, ChartLegendRow } from './chunk-YPJYW624.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { ChartCard, ChartTooltip, defaultFormat, ChartLegendRow } from './chunk-LI5VYDLN.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -16,12 +16,12 @@ function ChannelCard({
   const active = hovered ?? highlight ?? null;
   const sum = data.reduce((n, d) => n + d.value, 0);
   const last = data.length - 1;
-  return /* @__PURE__ */ jsx(ChartCard, { total: total ?? formatValue(sum), ...props, children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-4", onPointerLeave: () => setHovered(null), children: [
+  return /* @__PURE__ */ jsx(ChartCard, { total: total ?? formatValue(sum), ...props, children: /* @__PURE__ */ jsxs("div", { className: "sa:relative sa:flex sa:flex-col sa:gap-4", onPointerLeave: () => setHovered(null), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         "aria-hidden": true,
-        className: "relative grid h-3.5 gap-x-0.5",
+        className: "sa:relative sa:grid sa:h-3.5 sa:gap-x-0.5",
         style: { gridTemplateColumns: data.map((d) => `minmax(0, ${Math.max(d.value, 0)}fr)`).join(" ") },
         children: data.map((d, i) => /* @__PURE__ */ jsx(
           "span",
@@ -29,10 +29,10 @@ function ChannelCard({
             ref: active === i ? setAnchor : void 0,
             onPointerEnter: () => setHovered(i),
             className: cn(
-              "relative rounded-[1.5px] transition-opacity duration-(--duration-fast) ease-(--ease-out)",
-              i === 0 && "rounded-l-[4px]",
-              i === last && "rounded-r-[4px]",
-              active !== null && active !== i && "opacity-15"
+              "sa:relative sa:rounded-[1.5px] sa:transition-opacity sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+              i === 0 && "sa:rounded-l-[4px]",
+              i === last && "sa:rounded-r-[4px]",
+              active !== null && active !== i && "sa:opacity-15"
             ),
             style: { background: seriesColor(i) },
             children: active === i && /* @__PURE__ */ jsx(ChartTooltip, { anchor, sideOffset: 8, label: d.tooltipLabel ?? d.label, value: formatValue(d.value) })
@@ -44,7 +44,7 @@ function ChannelCard({
     /* @__PURE__ */ jsx(
       "ul",
       {
-        className: "flex flex-col gap-0.5 @min-[560px]:grid @min-[560px]:grid-flow-col @min-[560px]:auto-cols-fr @min-[560px]:gap-x-6",
+        className: "sa:flex sa:flex-col sa:gap-0.5 sa:@min-[560px]:grid sa:@min-[560px]:grid-flow-col sa:@min-[560px]:auto-cols-fr sa:@min-[560px]:gap-x-6",
         style: { gridTemplateRows: `repeat(${Math.ceil(data.length / 2)}, auto)` },
         "aria-label": props.title,
         children: data.map((d, i) => /* @__PURE__ */ jsx(
@@ -55,7 +55,7 @@ function ChannelCard({
             onFocus: () => setHovered(i),
             onBlur: () => setHovered(null),
             "aria-label": `${d.label}: ${formatValue(d.value)}, ${Math.round(d.value / (sum || 1) * 100)}%`,
-            className: "rounded-md focus-visible:outline-none focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+            className: "sa:rounded-md sa:focus-visible:outline-none sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
             children: /* @__PURE__ */ jsx(
               ChartLegendRow,
               {
@@ -75,5 +75,3 @@ function ChannelCard({
 }
 
 export { ChannelCard };
-//# sourceMappingURL=chunk-LZMKSFCF.js.map
-//# sourceMappingURL=chunk-LZMKSFCF.js.map