@uisatin/ui 0.1.1 → 0.3.0

package/{chunk-VAGIAREV.js → chunk-W472DBMT.js}

@@ -1,5 +1,6 @@
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.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 { DropdownMenu } from 'radix-ui';
 import { NavArrowDown, Check, Plus } from 'iconoir-react';
@@ -22,6 +23,7 @@ function AgentPicker({
   disablePortal = false,
   className
 }) {
+  const labels = useSatinLabels();
   const [inner, setInner] = React.useState(defaultValue ?? agents[0]?.id);
   const value = valueProp ?? inner;
   const current = agents.find((a) => a.id === value);
@@ -47,11 +49,14 @@ function AgentPicker({
         variant,
         size,
         shape: "rounded",
-        className: cn("data-[state=open]:bg-action-secondary-bg-hover", className),
+        className: cn("sa:data-[state=open]:bg-action-secondary-bg-hover", className),
         children: [
           current && /* @__PURE__ */ jsx(AgentAvatar, { agent: current, size: 16 }),
-          /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
-            current && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Agent: " }),
+          /* @__PURE__ */ jsxs("span", { className: "sa:truncate", children: [
+            current && /* @__PURE__ */ jsxs("span", { className: "sa:sr-only", children: [
+              labels.agent,
+              ": "
+            ] }),
             current ? current.name : placeholder
           ] }),
           /* @__PURE__ */ jsx(NavArrowDown, { "aria-hidden": true, "data-chevron": true })
@@ -75,21 +80,21 @@ function AgentMenu({
       align: "start",
       sideOffset: 8,
       className: cn(
-        "z-50 flex w-[255px] max-w-[520px] flex-col gap-1 rounded-xl border border-border-subtle bg-bg-popover p-1 outline-none",
-        "[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]",
-        "data-[state=open]:[animation:satin-enter_var(--duration-fast)_var(--ease-out)]"
+        "sa:z-50 sa:flex sa:w-[255px] sa:max-w-[520px] sa:flex-col sa:gap-1 sa:rounded-xl sa:border sa:border-border-subtle sa:bg-bg-popover sa:p-1 sa:outline-none",
+        "sa:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]",
+        "sa:data-[state=open]:[animation:satin-enter_var(--sa-duration-fast)_var(--sa-ease-out)]"
       ),
       children: [
-        /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value, onValueChange, className: "flex flex-col", children: agents.map((agent) => /* @__PURE__ */ jsx(AgentMenuItem, { agent, showDescription }, agent.id)) }),
+        /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value, onValueChange, className: "sa:flex sa:flex-col", children: agents.map((agent) => /* @__PURE__ */ jsx(AgentMenuItem, { agent, showDescription }, agent.id)) }),
         onCreate && /* @__PURE__ */ jsxs(
           DropdownMenu.Item,
           {
             onSelect: onCreate,
             className: cn(
-              "flex h-control-height-xs items-center gap-1 self-start rounded-md px-2 text-sm font-medium text-text-default outline-none select-none",
-              "transition-[background-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-              "[&_svg]:size-icon-size-sm [&_svg]:text-text-muted [&_svg]:[stroke-width:1.875]",
-              "data-highlighted:bg-bg-hover"
+              "sa:flex sa:h-control-height-xs sa:items-center sa:gap-1 sa:self-start sa:rounded-md sa:px-2 sa:text-sm sa:font-medium sa:text-text-default sa:outline-none sa:select-none",
+              "sa:transition-[background-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+              "sa:[&_svg]:size-icon-size-sm sa:[&_svg]:text-text-muted sa:[&_svg]:[stroke-width:1.875]",
+              "sa:data-highlighted:bg-bg-hover"
             ),
             children: [
               /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
@@ -112,20 +117,20 @@ function AgentMenuItem({ agent, showDescription = true, className, ...props }) {
       children: [
         /* @__PURE__ */ jsx(AgentAvatar, { agent, size: stacked ? 20 : 16 }),
         /* @__PURE__ */ jsx(AgentRowText, { agent, stacked }),
-        /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { className: "flex shrink-0", children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-icon-size text-status-green-fg [stroke-width:1.875]" }) })
+        /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { className: "sa:flex sa:shrink-0", children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "sa:size-icon-size sa:text-status-green-fg sa:[stroke-width:1.875]" }) })
       ]
     }
   );
 }
 var agentRowClass = cn(
-  "flex min-h-8 w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left outline-none select-none",
-  "transition-[background-color] duration-(--duration-fast) ease-(--ease-out)",
-  "data-highlighted:bg-bg-selected data-[force=hover]:bg-bg-selected data-[state=checked]:bg-bg-selected"
+  "sa:flex sa:min-h-8 sa:w-full sa:items-center sa:gap-2 sa:rounded-lg sa:px-2 sa:py-1.5 sa:text-left sa:outline-none sa:select-none",
+  "sa:transition-[background-color] 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-[state=checked]:bg-bg-selected"
 );
 function AgentRowText({ agent, stacked }) {
-  return /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col justify-center gap-1", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-sm leading-[13px] font-medium text-text-default", children: agent.name }),
-    stacked && /* @__PURE__ */ jsx("span", { className: "text-sm font-normal text-text-muted", children: agent.description })
+  return /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col sa:justify-center sa:gap-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:leading-[13px] sa:font-medium sa:text-text-default", children: agent.name }),
+    stacked && /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:font-normal sa:text-text-muted", children: agent.description })
   ] });
 }
 function AgentPickerRow({
@@ -144,7 +149,7 @@ function AgentPickerRow({
       children: [
         /* @__PURE__ */ jsx(AgentAvatar, { agent, size: stacked ? 20 : 16 }),
         /* @__PURE__ */ jsx(AgentRowText, { agent, stacked }),
-        state === "selected" && /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-icon-size shrink-0 text-status-green-fg [stroke-width:1.875]" })
+        state === "selected" && /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "sa:size-icon-size sa:shrink-0 sa:text-status-green-fg sa:[stroke-width:1.875]" })
       ]
     }
   );
@@ -158,8 +163,8 @@ function AgentAvatar({ agent, size = 16 }) {
       "aria-hidden": true,
       "data-tone": agent.tone ?? "brand",
       className: cn(
-        "inline-flex shrink-0 items-center justify-center rounded-full bg-tone-bg font-semibold tracking-normal text-tone-fg",
-        size === 16 ? "size-4 text-[7px] leading-2" : "size-5 text-[9px] leading-[10px]"
+        "sa:inline-flex sa:shrink-0 sa:items-center sa:justify-center sa:rounded-full sa:bg-tone-bg sa:font-semibold sa:tracking-normal sa:text-tone-fg",
+        size === 16 ? "sa:size-4 sa:text-[7px] sa:leading-2" : "sa:size-5 sa:text-[9px] sa:leading-[10px]"
       ),
       children: initials
     }
@@ -196,7 +201,7 @@ function FlappyAvatar({ tone, size }) {
       height: size,
       viewBox: "0 -2.5 17 17",
       shapeRendering: "crispEdges",
-      className: "shrink-0",
+      className: "sa:shrink-0",
       children: FLAPPY_GRID.flatMap(
         (row, y) => [...row].map((c, x) => c === "." ? null : /* @__PURE__ */ jsx("rect", { x, y, width: 1, height: 1, fill: FLAPPY_FILL[+c] }, `${x}-${y}`))
       )
@@ -210,5 +215,3 @@ function toInitials(name) {
 }
 
 export { AgentAvatar, AgentMenuItem, AgentPicker, AgentPickerRow };
-//# sourceMappingURL=chunk-VAGIAREV.js.map
-//# sourceMappingURL=chunk-VAGIAREV.js.map

package/{chunk-X3PQANZO.js → chunk-W4RDTP6W.js}

@@ -1,5 +1,6 @@
-import { Checkbox } from './chunk-FDKIX4DC.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Checkbox } from './chunk-X2GNMNZQ.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -12,7 +13,7 @@ function SortIcon({ direction }) {
       viewBox: "0 0 14 14",
       fill: "none",
       "aria-hidden": true,
-      className: cn("shrink-0 text-text-muted", direction === "desc" && "rotate-180"),
+      className: cn("sa:shrink-0 sa:text-text-muted", direction === "desc" && "sa:rotate-180"),
       children: /* @__PURE__ */ jsx(
         "path",
         {
@@ -28,23 +29,23 @@ function SortIcon({ direction }) {
 }
 var cellHover = {
   first: [
-    "group-hover/row:rounded-l-xl group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
-    "group-data-[force=hover]/row:rounded-l-xl group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
+    "sa:group-hover/row:rounded-l-xl sa:group-hover/row:bg-bg-hover sa:group-hover/row:[box-shadow:inset_1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
+    "sa:group-data-[force=hover]/row:rounded-l-xl sa:group-data-[force=hover]/row:bg-bg-hover sa:group-data-[force=hover]/row:[box-shadow:inset_1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
   ].join(" "),
   middle: [
-    "group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
-    "group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
+    "sa:group-hover/row:bg-bg-hover sa:group-hover/row:[box-shadow:inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
+    "sa:group-data-[force=hover]/row:bg-bg-hover sa:group-data-[force=hover]/row:[box-shadow:inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
   ].join(" "),
   last: [
-    "group-hover/row:rounded-r-xl group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_-1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
-    "group-data-[force=hover]/row:rounded-r-xl group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_-1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
+    "sa:group-hover/row:rounded-r-xl sa:group-hover/row:bg-bg-hover sa:group-hover/row:[box-shadow:inset_-1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
+    "sa:group-data-[force=hover]/row:rounded-r-xl sa:group-data-[force=hover]/row:bg-bg-hover sa:group-data-[force=hover]/row:[box-shadow:inset_-1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
   ].join(" "),
   only: [
-    "group-hover/row:rounded-xl group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_0_0_0_1px_var(--border-strong)]",
-    "group-data-[force=hover]/row:rounded-xl group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_0_0_0_1px_var(--border-strong)]"
+    "sa:group-hover/row:rounded-xl sa:group-hover/row:bg-bg-hover sa:group-hover/row:[box-shadow:inset_0_0_0_1px_var(--border-strong)]",
+    "sa:group-data-[force=hover]/row:rounded-xl sa:group-data-[force=hover]/row:bg-bg-hover sa:group-data-[force=hover]/row:[box-shadow:inset_0_0_0_1px_var(--border-strong)]"
   ].join(" ")
 };
-var rowHover = "hover:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-sm))_drop-shadow(0_1px_1.5px_var(--effect-shadow-sm))] data-[force=hover]:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-sm))_drop-shadow(0_1px_1.5px_var(--effect-shadow-sm))]";
+var rowHover = "sa:hover:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-sm))_drop-shadow(0_1px_1.5px_var(--effect-shadow-sm))] sa:data-[force=hover]:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-sm))_drop-shadow(0_1px_1.5px_var(--effect-shadow-sm))]";
 function compare(a, b) {
   if (typeof a === "number" && typeof b === "number") return a - b;
   return String(a ?? "").localeCompare(String(b ?? ""), void 0, { numeric: true });
@@ -64,6 +65,7 @@ function Table({
   className,
   ...props
 }) {
+  const labels = useSatinLabels();
   const [sort, setSort] = React.useState(defaultSort);
   const [selectedState, setSelectedState] = React.useState([]);
   const selected = selectedProp ?? selectedState;
@@ -78,7 +80,8 @@ function Table({
   };
   const sortedRows = React.useMemo(() => {
     if (!sort || manualSort) return rows;
-    const s = [...rows].sort((a, b) => compare(a[sort.key], b[sort.key]));
+    const field = (r) => r[sort.key];
+    const s = [...rows].sort((a, b) => compare(field(a), field(b)));
     return sort.direction === "desc" ? s.reverse() : s;
   }, [rows, sort, manualSort]);
   const scroll = overflow === "scroll";
@@ -106,50 +109,50 @@ function Table({
       ro.disconnect();
     };
   }, [scroll, columns, rows]);
-  const stickyFirst = (bg) => scroll ? cn("sticky z-[1]", bg) : "";
-  const firstDataLeft = selectable ? "left-6" : "left-0";
+  const stickyFirst = (bg) => scroll ? cn("sa:sticky sa:z-[1]", bg) : "";
+  const firstDataLeft = selectable ? "sa:left-6" : "sa:left-0";
   const cellPosition = (index, count) => count === 1 ? cellHover.only : index === 0 ? cellHover.first : index === count - 1 ? cellHover.last : cellHover.middle;
   const cellCount = columns.length + (selectable ? 1 : 0);
   const table = /* @__PURE__ */ jsxs(
     "table",
     {
       "aria-label": label,
-      className: "w-full table-fixed border-separate border-spacing-0 text-left",
+      className: "sa:w-full sa:table-fixed sa:border-separate sa:border-spacing-0 sa:text-left",
       style: tableWidth ? { width: tableWidth, minWidth: "100%" } : { minWidth: columns.length * 120 + (selectable ? 24 : 0) },
       children: [
         /* @__PURE__ */ jsxs("colgroup", { children: [
           selectable && /* @__PURE__ */ jsx("col", { style: { width: 24 } }),
           columns.map((c) => /* @__PURE__ */ jsx("col", { style: { width: colWidth(c) } }, c.key))
         ] }),
-        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-component-table-header", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "sa:bg-component-table-header", children: [
           selectable && /* @__PURE__ */ jsx(
             "th",
             {
               scope: "col",
-              className: cn("border-b border-border-subtle py-2 pl-2 align-middle", stickyFirst("left-0 bg-component-table-header")),
+              className: cn("sa:border-b sa:border-border-subtle sa:py-2 sa:pl-2 sa:align-middle", stickyFirst("sa:left-0 sa:bg-component-table-header")),
               children: /* @__PURE__ */ jsx(
                 Checkbox,
                 {
-                  "aria-label": "Select all rows",
+                  "aria-label": labels.selectAllRows,
                   checked: allSelected ? true : someSelected ? "indeterminate" : false,
                   onCheckedChange: (v) => setSelected(v === true ? rows.map((r) => r.id) : []),
-                  className: "align-middle"
+                  className: "sa:align-middle"
                 }
               )
             }
           ),
           columns.map((c, i) => {
             const active = sort?.key === c.key ? sort.direction : void 0;
-            const labelClass = "inline-flex max-w-full items-center gap-2.5 overflow-hidden rounded-md px-2 py-[3px] text-sm leading-[18px] font-medium whitespace-nowrap text-text-muted";
+            const labelClass = "sa:inline-flex sa:max-w-full sa:items-center sa:gap-2.5 sa:overflow-hidden sa:rounded-md sa:px-2 sa:py-[3px] sa:text-sm sa:leading-[18px] sa:font-medium sa:whitespace-nowrap sa:text-text-muted";
             return /* @__PURE__ */ jsx(
               "th",
               {
                 scope: "col",
                 "aria-sort": c.sortable ? active === "asc" ? "ascending" : active === "desc" ? "descending" : "none" : void 0,
                 className: cn(
-                  "h-8 overflow-hidden border-b border-border-subtle py-1 pr-2 pl-1 align-middle font-medium",
-                  c.align === "right" && "text-right",
-                  i === 0 && stickyFirst(cn(firstDataLeft, "bg-component-table-header"))
+                  "sa:h-8 sa:overflow-hidden sa:border-b sa:border-border-subtle sa:py-1 sa:pr-2 sa:pl-1 sa:align-middle sa:font-medium",
+                  c.align === "right" && "sa:text-right",
+                  i === 0 && stickyFirst(cn(firstDataLeft, "sa:bg-component-table-header"))
                 ),
                 children: c.sortable ? /* @__PURE__ */ jsxs(
                   "button",
@@ -158,11 +161,11 @@ function Table({
                     onClick: () => cycleSort(c.key),
                     className: cn(
                       labelClass,
-                      "transition-colors duration-(--duration-fast) ease-(--ease-out) focus-visible:outline-none",
-                      "satin-hover:bg-bg-hover satin-focus:bg-bg-hover satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
+                      "sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:focus-visible:outline-none",
+                      "sa:satin-hover:bg-bg-hover sa:satin-focus:bg-bg-hover sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx("span", { className: "truncate", children: c.header }),
+                      /* @__PURE__ */ jsx("span", { className: "sa:truncate", children: c.header }),
                       active && /* @__PURE__ */ jsx(SortIcon, { direction: active })
                     ]
                   }
@@ -174,15 +177,15 @@ function Table({
         ] }) }),
         /* @__PURE__ */ jsx("tbody", { children: sortedRows.map((row, r) => {
           const isSelected = selected.includes(row.id);
-          const rowBg = zebra && r % 2 === 1 ? "bg-component-table-zebra" : "bg-bg-card";
-          return /* @__PURE__ */ jsxs("tr", { "data-state": isSelected ? "selected" : void 0, className: cn("group/row", rowBg, rowHover), children: [
-            selectable && /* @__PURE__ */ jsx("td", { className: cn("py-2 pl-2 align-middle", cellPosition(0, cellCount), stickyFirst(cn("left-0", rowBg))), children: /* @__PURE__ */ jsx(
+          const rowBg = zebra && r % 2 === 1 ? "sa:bg-component-table-zebra" : "sa:bg-bg-card";
+          return /* @__PURE__ */ jsxs("tr", { "data-state": isSelected ? "selected" : void 0, className: cn("sa:group/row", rowBg, rowHover), children: [
+            selectable && /* @__PURE__ */ jsx("td", { className: cn("sa:py-2 sa:pl-2 sa:align-middle", cellPosition(0, cellCount), stickyFirst(cn("sa:left-0", rowBg))), children: /* @__PURE__ */ jsx(
               Checkbox,
               {
-                "aria-label": `Select row ${r + 1}`,
+                "aria-label": `${labels.selectRow} ${r + 1}`,
                 checked: isSelected,
                 onCheckedChange: (v) => setSelected(v === true ? [...selected, row.id] : selected.filter((id) => id !== row.id)),
-                className: "align-middle"
+                className: "sa:align-middle"
               }
             ) }),
             columns.map((c, i) => {
@@ -192,12 +195,12 @@ function Table({
                 "td",
                 {
                   className: cn(
-                    "h-10 overflow-hidden py-2 pr-2.5 pl-3 align-middle text-body leading-(--text-body--line-height) text-text-default",
-                    c.align === "right" && "text-right",
+                    "sa:h-10 sa:overflow-hidden sa:py-2 sa:pr-2.5 sa:pl-3 sa:align-middle sa:text-body sa:leading-(--sa-text-body--line-height) sa:text-text-default",
+                    c.align === "right" && "sa:text-right",
                     cellPosition(i + (selectable ? 1 : 0), cellCount),
                     i === 0 && stickyFirst(cn(firstDataLeft, rowBg))
                   ),
-                  children: plain ? /* @__PURE__ */ jsx("span", { className: "block truncate", children: content }) : /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center gap-1 overflow-hidden", c.align === "right" && "justify-end"), children: content })
+                  children: plain ? /* @__PURE__ */ jsx("span", { className: "sa:block sa:truncate", children: content }) : /* @__PURE__ */ jsx("div", { className: cn("sa:flex sa:min-w-0 sa:items-center sa:gap-1 sa:overflow-hidden", c.align === "right" && "sa:justify-end"), children: content })
                 },
                 c.key
               );
@@ -211,10 +214,10 @@ function Table({
     "div",
     {
       "data-slot": "table",
-      className: cn("relative overflow-hidden rounded-xl border border-border-subtle bg-bg-card", className),
+      className: cn("sa:relative sa:overflow-hidden sa:rounded-xl sa:border sa:border-border-subtle sa:bg-bg-card", className),
       ...props,
       children: scroll ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sa:relative", children: [
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -222,7 +225,7 @@ function Table({
               tabIndex: 0,
               role: "region",
               "aria-label": label ? `${label}, scrolls sideways` : "Table, scrolls sideways",
-              className: "overflow-x-auto [scrollbar-width:none] focus-visible:outline-none [&::-webkit-scrollbar]:hidden",
+              className: "sa:overflow-x-auto sa:[scrollbar-width:none] sa:focus-visible:outline-none sa:[&::-webkit-scrollbar]:hidden",
               children: table
             }
           ),
@@ -231,25 +234,23 @@ function Table({
             {
               "aria-hidden": true,
               className: cn(
-                "pointer-events-none absolute inset-y-0 right-0 w-16 bg-linear-to-r from-bg-card-fade to-bg-card",
-                "transition-opacity duration-(--duration-fast) ease-(--ease-out)",
-                bar.atEnd && "opacity-0"
+                "sa:pointer-events-none sa:absolute sa:inset-y-0 sa:right-0 sa:w-16 sa:bg-linear-to-r sa:from-bg-card-fade sa:to-bg-card",
+                "sa:transition-opacity sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+                bar.atEnd && "sa:opacity-0"
               )
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "px-3 pt-1.5 pb-1", children: /* @__PURE__ */ jsx("div", { className: "relative h-1.5 overflow-hidden rounded-full bg-bg-muted", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "sa:px-3 sa:pt-1.5 sa:pb-1", children: /* @__PURE__ */ jsx("div", { className: "sa:relative sa:h-1.5 sa:overflow-hidden sa:rounded-full sa:bg-bg-muted", children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "absolute inset-y-0 left-0 rounded-full bg-border-strong",
+            className: "sa:absolute sa:inset-y-0 sa:left-0 sa:rounded-full sa:bg-border-strong",
             style: { width: `${bar.size * 100}%`, transform: `translateX(${bar.offset / bar.size * 100}%)` }
           }
         ) }) })
-      ] }) : /* @__PURE__ */ jsx("div", { className: "overflow-x-auto overscroll-x-contain", children: table })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "sa:overflow-x-auto sa:overscroll-x-contain", children: table })
     }
   );
 }
 
 export { Table };
-//# sourceMappingURL=chunk-X3PQANZO.js.map
-//# sourceMappingURL=chunk-X3PQANZO.js.map

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

@@ -1,4 +1,4 @@
-import { ChartCard, defaultFormat, ChartLegendPill } from './chunk-YPJYW624.js';
+import { ChartCard, defaultFormat, ChartLegendPill } from './chunk-ZBZ3ZQRB.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-FDKIX4DC.js → chunk-X2GNMNZQ.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-O46O6LFQ.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", 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-PF3YBUKT.js → chunk-X66KTATQ.js}

@@ -1,14 +1,14 @@
-import { menuSurfaceClass, MenuItemContent, menuItemClass } from './chunk-3DINAQLL.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { menuSurfaceClass, MenuItemContent, menuItemClass } from './chunk-BR2B4OIT.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import 'react';
 import { ContextMenu as ContextMenu$1 } from 'radix-ui';
 import { NavArrowRight } from 'iconoir-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var contentClass = cn(
-  "pointer-events-auto z-50 flex w-[255px] max-w-[calc(100vw-16px)] flex-col overflow-x-clip overflow-y-auto p-1",
+  "sa:pointer-events-auto sa:z-50 sa:flex sa:w-[255px] sa:max-w-[calc(100vw-16px)] sa:flex-col sa:overflow-x-clip sa:overflow-y-auto sa:p-1",
   menuSurfaceClass,
-  "outline-none data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]"
+  "sa:outline-none sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]"
 );
 function ContextMenu({
   trigger,
@@ -17,17 +17,19 @@ function ContextMenu({
   container,
   modal = true,
   onFocusOutside,
-  className
+  className,
+  ...props
 }) {
   return /* @__PURE__ */ jsxs(ContextMenu$1.Root, { onOpenChange, modal, children: [
     /* @__PURE__ */ jsx(ContextMenu$1.Trigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsx(ContextMenu$1.Portal, { container, children: /* @__PURE__ */ jsx(
       ContextMenu$1.Content,
       {
-        "data-slot": "context-menu",
         collisionPadding: 8,
+        ...props,
+        "data-slot": "context-menu",
         onFocusOutside,
-        className: cn(contentClass, "origin-(--radix-context-menu-content-transform-origin)", "max-h-(--radix-context-menu-content-available-height)", className),
+        className: cn(contentClass, "sa:origin-(--radix-context-menu-content-transform-origin)", "sa:max-h-(--radix-context-menu-content-available-height)", className),
         children
       }
     ) })
@@ -39,13 +41,13 @@ function ContextMenuItem({ label, icon, shortcut, description, destructive, clas
     {
       "data-slot": "context-menu-item",
       textValue: label,
-      className: cn(menuItemClass, destructive && "[&_*]:text-action-destructive-fg", className),
+      className: cn(menuItemClass, destructive && "sa:[&_*]:text-action-destructive-fg", className),
       ...props,
       children: /* @__PURE__ */ jsx(MenuItemContent, { label, icon, shortcut, description, layout: "inline" })
     }
   );
 }
-function ContextMenuSub({ label, icon, children, disabled }) {
+function ContextMenuSub({ label, icon, children, disabled, className, ...props }) {
   return /* @__PURE__ */ jsxs(ContextMenu$1.Sub, { children: [
     /* @__PURE__ */ jsxs(
       ContextMenu$1.SubTrigger,
@@ -53,10 +55,10 @@ function ContextMenuSub({ label, icon, children, disabled }) {
         "data-slot": "context-menu-sub",
         disabled,
         textValue: label,
-        className: cn(menuItemClass, "data-[state=open]:bg-bg-selected"),
+        className: cn(menuItemClass, "sa:data-[state=open]:bg-bg-selected"),
         children: [
           /* @__PURE__ */ jsx(MenuItemContent, { label, icon, layout: "inline" }),
-          /* @__PURE__ */ jsx(NavArrowRight, { "aria-hidden": true, className: "size-4 text-text-muted [stroke-width:1.875]" })
+          /* @__PURE__ */ jsx(NavArrowRight, { "aria-hidden": true, className: "sa:size-4 sa:text-text-muted sa:[stroke-width:1.875]" })
         ]
       }
     ),
@@ -66,16 +68,15 @@ function ContextMenuSub({ label, icon, children, disabled }) {
         sideOffset: 4,
         alignOffset: -5,
         collisionPadding: 8,
-        className: cn(contentClass, "w-[220px] origin-(--radix-context-menu-content-transform-origin)"),
+        ...props,
+        className: cn(contentClass, "sa:w-[220px] sa:origin-(--radix-context-menu-content-transform-origin)", className),
         children
       }
     ) })
   ] });
 }
 function ContextMenuSeparator({ className }) {
-  return /* @__PURE__ */ jsx(ContextMenu$1.Separator, { className: cn("-mx-1 my-1 h-px bg-bg-muted", className) });
+  return /* @__PURE__ */ jsx(ContextMenu$1.Separator, { className: cn("sa:-mx-1 sa:my-1 sa:h-px sa:bg-bg-muted", className) });
 }
 
 export { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuSub };
-//# sourceMappingURL=chunk-PF3YBUKT.js.map
-//# sourceMappingURL=chunk-PF3YBUKT.js.map

package/{chunk-J3NSDRVH.js → chunk-XETMIETJ.js}

@@ -79,5 +79,3 @@ function useSlidingIndicator(listRef, selector, selected, { animate: motionOn =
 }
 
 export { SLIDE_MS, useSlidingIndicator };
-//# sourceMappingURL=chunk-J3NSDRVH.js.map
-//# sourceMappingURL=chunk-J3NSDRVH.js.map