@uisatin/ui 0.2.0 → 0.4.0

package/{chunk-PF3YBUKT.js → chunk-CQFAMWZI.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-P36KBUYD.js';
+import { cn } from './chunk-EHEXE2UV.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-DAKVTPYZ.js

@@ -0,0 +1,86 @@
+import { CloseIcon } from './chunk-RPL6FRVX.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import 'react';
+import { Dialog } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Sheet({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  side = "right",
+  title,
+  description,
+  footer,
+  children,
+  modal = true,
+  container,
+  onOpenAutoFocus,
+  className,
+  ...props
+}) {
+  const labels = useSatinLabels();
+  const position = container ? "absolute" : "fixed";
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open, defaultOpen, onOpenChange, modal, children: [
+    trigger && /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(Dialog.Portal, { container, children: [
+      /* @__PURE__ */ jsx(
+        Dialog.Overlay,
+        {
+          className: cn(
+            position,
+            "sa:inset-0 sa:z-50 sa:bg-black-a40",
+            "sa:data-[state=open]:animate-[satin-fade-in_var(--sa-duration-slow)_var(--sa-ease-out)]",
+            "sa:data-[state=closed]:animate-[satin-fade-out_var(--sa-duration-base)_var(--sa-ease-out)]"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Dialog.Content,
+        {
+          ...description ? {} : { "aria-describedby": void 0 },
+          ...props,
+          "data-slot": "sheet",
+          "data-side": side,
+          onOpenAutoFocus,
+          className: cn(
+            position,
+            "sa:z-50 sa:flex sa:flex-col sa:gap-4 sa:bg-bg-card 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)]",
+            // Flush with its edge: no radius and no border on the side that touches it.
+            side === "bottom" && "sa:inset-x-0 sa:bottom-0 sa:max-h-[85%] sa:rounded-t-2xl sa:border-t sa:border-border-subtle sa:pt-6",
+            side === "right" && "sa:inset-y-0 sa:right-0 sa:w-[400px] sa:max-w-[calc(100%-32px)] sa:rounded-l-2xl sa:border-l sa:border-border-subtle",
+            side === "left" && "sa:inset-y-0 sa:left-0 sa:w-[400px] sa:max-w-[calc(100%-32px)] sa:rounded-r-2xl sa:border-r sa:border-border-subtle",
+            side === "bottom" && "sa:data-[state=open]:animate-[satin-sheet-up_var(--sa-duration-slow)_var(--sa-ease-out)] sa:data-[state=closed]:animate-[satin-sheet-down_var(--sa-duration-base)_var(--sa-ease-out)]",
+            side === "right" && "sa:data-[state=open]:animate-[satin-sheet-left_var(--sa-duration-slow)_var(--sa-ease-out)] sa:data-[state=closed]:animate-[satin-sheet-right_var(--sa-duration-base)_var(--sa-ease-out)]",
+            side === "left" && "sa:data-[state=open]:animate-[satin-sheet-from-left_var(--sa-duration-slow)_var(--sa-ease-out)] sa:data-[state=closed]:animate-[satin-sheet-to-left_var(--sa-duration-base)_var(--sa-ease-out)]",
+            className
+          ),
+          children: [
+            side === "bottom" && /* @__PURE__ */ jsx(
+              Dialog.Close,
+              {
+                "aria-label": labels.close,
+                className: "sa:absolute sa:inset-x-4 sa:top-0 sa:flex sa:h-6 sa:cursor-pointer sa:items-center sa:justify-center sa:rounded-lg sa:outline-none sa:focus-visible:ring-2 sa:focus-visible:ring-action-focus-ring",
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:h-1 sa:w-9 sa:rounded-full sa:bg-border-strong" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: cn("sa:flex sa:flex-col sa:gap-0.5", side !== "bottom" && "sa:pr-8"), children: [
+              /* @__PURE__ */ jsx(Dialog.Title, { className: "sa:text-base sa:leading-[21px] sa:font-medium sa:text-text-default", children: title }),
+              description ? /* @__PURE__ */ jsx(Dialog.Description, { className: "sa:text-sm sa:text-text-muted", children: description }) : null
+            ] }),
+            children != null && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:min-h-0 sa:flex-1 sa:flex-col sa:overflow-y-auto", children }),
+            footer && /* @__PURE__ */ jsx("div", { className: cn("sa:flex sa:shrink-0 sa:items-center sa:justify-end sa:gap-2", side === "bottom" && "sa:*:flex-1"), children: footer }),
+            side !== "bottom" && /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xl", iconOnly: true, "aria-label": labels.close, className: "sa:absolute sa:top-[7px] sa:right-[7px] sa:rounded-lg", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var SheetClose = Dialog.Close;
+
+export { Sheet, SheetClose };

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

@@ -1,5 +1,6 @@
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.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 { 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-EBZHGRM5.js

@@ -0,0 +1,46 @@
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function SelectableCardBody({
+  id,
+  title,
+  description,
+  icon,
+  size = "md",
+  children
+}) {
+  const sm = size === "sm";
+  const tile = description ? sm ? 36 : 40 : 20;
+  const titleLine = description ? "sa:leading-[18px]" : "sa:leading-5";
+  return /* @__PURE__ */ jsxs("span", { className: cn("sa:flex sa:min-w-0 sa:flex-1 sa:items-start", sm ? "sa:gap-2.5" : "sa:gap-3"), children: [
+    icon && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "selectable-card-icon",
+        "aria-hidden": true,
+        style: { width: tile, height: tile, borderRadius: tile === 20 ? "var(--sa-radius-sm)" : sm ? "var(--sa-radius-md)" : void 0 },
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "sa:min-w-0 sa:flex-1 sa:text-left", children: [
+      /* @__PURE__ */ jsxs("span", { className: cn("sa:grid", !sm && "sa:gap-0.5"), children: [
+        /* @__PURE__ */ jsx("span", { id: `${id}-title`, className: cn("sa:block sa:font-medium sa:text-text-default", sm ? "sa:text-sm" : "sa:text-base", titleLine), children: title }),
+        description && // md: the theme's body size, like Banner, Card and Alert; sm: 13px.
+        /* @__PURE__ */ jsx("span", { id: `${id}-description`, className: cn("sa:block sa:text-text-muted", sm ? "sa:text-sm sa:leading-[18px]" : "sa:text-body sa:leading-5"), children: description })
+      ] }),
+      children && /* @__PURE__ */ jsx("span", { className: cn("sa:block", sm ? "sa:mt-1.5" : "sa:mt-2"), children })
+    ] })
+  ] });
+}
+function useSelectableIds(id, description) {
+  const autoId = React.useId();
+  const controlId = id ?? autoId;
+  return {
+    controlId,
+    "aria-labelledby": `${controlId}-title`,
+    "aria-describedby": description ? `${controlId}-description` : void 0
+  };
+}
+
+export { SelectableCardBody, useSelectableIds };

package/chunk-EHEXE2UV.js

@@ -0,0 +1,44 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+// src/lib/utils.ts
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["body", "body-lg", "title", "heading", "display"],
+      radius: ["pill"],
+      spacing: [
+        "control-height",
+        "control-height-xs",
+        "control-height-lg",
+        "control-height-xl",
+        "icon-size",
+        "icon-size-sm",
+        "menu-row",
+        "toast-height"
+      ],
+      shadow: ["primary", "primary-focus", "destructive", "destructive-focus", "border-focus", "xs-focus"]
+    }
+  }
+});
+var PREFIX = "sa:";
+function cn(...inputs) {
+  const joined = clsx(inputs);
+  if (!joined.includes(PREFIX)) return twMerge(joined);
+  const tokens = joined.split(/\s+/).filter(Boolean);
+  const bare = tokens.map((t) => t.startsWith(PREFIX) ? t.slice(PREFIX.length) : t);
+  const kept = twMerge(bare.join(" ")).split(" ");
+  const left = /* @__PURE__ */ new Map();
+  for (const k of kept) left.set(k, (left.get(k) ?? 0) + 1);
+  const out = [];
+  for (let i = tokens.length - 1; i >= 0; i--) {
+    const n = left.get(bare[i]) ?? 0;
+    if (n > 0) {
+      left.set(bare[i], n - 1);
+      out.push(tokens[i]);
+    }
+  }
+  return out.reverse().join(" ");
+}
+
+export { cn };

package/{chunk-72OCFAPT.js → chunk-EQAFDIPE.js}

@@ -1,6 +1,7 @@
-import { useFormField } from './chunk-UBNHSZSE.js';
-import { MenuItemContent, menuItemClass, menuGroupClass, menuGroupLabelClass, menuSurfaceClass } from './chunk-3DINAQLL.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { useFormField, FieldSizeContext } from './chunk-KITXKIYW.js';
+import { MenuItemContent, menuItemClass, menuGroupClass, menuGroupLabelClass, menuSurfaceClass } from './chunk-P36KBUYD.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Select as Select$1 } from 'radix-ui';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -23,6 +24,7 @@ function useFieldChrome({
     disabled: disabled ?? field?.disabled ?? false,
     invalid: Boolean(error) || (field?.invalid ?? false),
     required: field?.required,
+    name: field?.name,
     describedBy: [field?.describedBy, messageId].filter(Boolean).join(" ") || void 0,
     message,
     messageId,
@@ -36,29 +38,29 @@ function FieldChrome({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("grid w-full gap-2", className), children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "field-chrome", className: cn("sa:grid sa:w-full sa:gap-2", className), children: [
     label && // The row keeps the label's 18px whatever the action, so the field never moves.
-    /* @__PURE__ */ jsxs("div", { className: "flex h-[18px] items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: chrome.controlId, className: "text-sm leading-[18px] font-medium text-text-default", children: label }),
-      action && /* @__PURE__ */ jsx("div", { className: "-my-[3px] flex shrink-0 items-center", children: action })
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:h-[18px] sa:items-center sa:justify-between sa:gap-2", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: chrome.controlId, className: "sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default", children: label }),
+      action && /* @__PURE__ */ jsx("div", { className: "sa:-my-[3px] sa:flex sa:shrink-0 sa:items-center", children: action })
     ] }),
     children,
-    chrome.message && /* @__PURE__ */ jsx("p", { id: chrome.messageId, className: cn("text-sm", chrome.isError ? "text-action-destructive-bg" : "text-text-muted"), children: chrome.message })
+    chrome.message && /* @__PURE__ */ jsx("p", { id: chrome.messageId, className: cn("sa:text-sm", chrome.isError ? "sa:text-action-destructive-bg" : "sa:text-text-muted"), children: chrome.message })
   ] });
 }
 function SelectChevron({ className }) {
-  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: cn("satin-field-icon text-text-muted", className), children: /* @__PURE__ */ jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: cn("satin-field-icon sa:text-text-muted", className), children: /* @__PURE__ */ jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function Select({
   options,
   value,
   defaultValue,
   onValueChange,
-  placeholder = "Select\u2026",
+  placeholder,
   label,
   hint,
   error,
-  size = "md",
+  size: ownSize,
   leadingIcon,
   layout = "inline",
   iconSize = 16,
@@ -73,9 +75,12 @@ function Select({
   wrapperClassName,
   className,
   "data-force": force,
+  "aria-describedby": describedBy,
   ...props
 }) {
   const chrome = useFieldChrome({ id, disabled, error, hint });
+  const size = ownSize ?? React.useContext(FieldSizeContext) ?? "md";
+  const labels = useSatinLabels();
   const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
   const current = value ?? uncontrolled;
   const groups = isOptionGroups(options) ? options : [{ options }];
@@ -94,11 +99,12 @@ function Select({
       onOpenChange,
       disabled: chrome.disabled,
       required: required ?? chrome.required,
-      name,
+      name: name ?? chrome.name,
       children: [
         /* @__PURE__ */ jsxs(
           Select$1.Trigger,
           {
+            ...props,
             id: chrome.controlId,
             "data-slot": "select-trigger",
             "data-size": size,
@@ -107,12 +113,11 @@ function Select({
             "data-disabled": chrome.disabled || void 0,
             "data-force": force,
             "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,
             className: cn("satin-field satin-select", className),
             children: [
               lead && /* @__PURE__ */ jsx("span", { className: "satin-field-icon", "aria-hidden": true, children: lead }),
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-text-default", children: /* @__PURE__ */ jsx(Select$1.Value, { placeholder: /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder }) }) }),
+              /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-text-default", children: /* @__PURE__ */ jsx(Select$1.Value, { placeholder: /* @__PURE__ */ jsx("span", { className: "sa:text-text-muted", children: placeholder ?? labels.select }) }) }),
               /* @__PURE__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx(SelectChevron, {}) })
             ]
           }
@@ -127,13 +132,13 @@ function Select({
             sideOffset: 4,
             collisionPadding: 8,
             className: cn(
-              "pointer-events-auto z-50 max-w-[520px] min-w-(--radix-select-trigger-width) overflow-hidden",
-              "max-h-(--radix-select-content-available-height)",
+              "sa:pointer-events-auto sa:z-50 sa:max-w-[520px] sa:min-w-(--radix-select-trigger-width) sa:overflow-hidden",
+              "sa:max-h-(--radix-select-content-available-height)",
               menuSurfaceClass,
-              "origin-(--radix-select-content-transform-origin) outline-none",
-              "data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]"
+              "sa:origin-(--radix-select-content-transform-origin) sa:outline-none",
+              "sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]"
             ),
-            children: /* @__PURE__ */ jsx(Select$1.Viewport, { className: "flex flex-col gap-1 p-1", children: groups.map((g, gi) => {
+            children: /* @__PURE__ */ jsx(Select$1.Viewport, { className: "sa:flex sa:flex-col sa:gap-1 sa:p-1", children: groups.map((g, gi) => {
               const rows = g.options.map((o) => /* @__PURE__ */ jsx(
                 Select$1.Item,
                 {
@@ -141,7 +146,7 @@ function Select({
                   disabled: o.disabled,
                   textValue: o.label,
                   "data-slot": "select-item",
-                  className: cn(menuItemClass, "data-[state=checked]:bg-bg-selected"),
+                  className: cn(menuItemClass, "sa:data-[state=checked]:bg-bg-selected"),
                   children: /* @__PURE__ */ jsx(
                     MenuItemContent,
                     {
@@ -171,5 +176,3 @@ function Select({
 }
 
 export { FieldChrome, Select, SelectChevron, isOptionGroups, useFieldChrome };
-//# sourceMappingURL=chunk-72OCFAPT.js.map
-//# sourceMappingURL=chunk-72OCFAPT.js.map

package/{chunk-LLHTVIM3.js → chunk-EXKSKYG3.js}

@@ -1,10 +1,10 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { RadioGroup as RadioGroup$1 } from 'radix-ui';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function RadioGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx(RadioGroup$1.Root, { "data-slot": "radio-group", className: cn("grid gap-3", className), ...props });
+  return /* @__PURE__ */ jsx(RadioGroup$1.Root, { "data-slot": "radio-group", className: cn("sa:grid sa:gap-3", className), ...props });
 }
 function Radio({ className, label, description, placement = "left", id, disabled, ...props }) {
   const autoId = React.useId();
@@ -19,7 +19,7 @@ function Radio({ className, label, description, placement = "left", id, disabled
       "aria-labelledby": labelId,
       "aria-describedby": descriptionId,
       disabled,
-      className: cn("peer satin-radio", className),
+      className: cn("sa:peer satin-radio", className),
       ...props,
       children: /* @__PURE__ */ jsx(RadioGroup$1.Indicator, { className: "satin-radio-dot" })
     }
@@ -32,12 +32,12 @@ function Radio({ className, label, description, placement = "left", id, disabled
       {
         htmlFor: radioId,
         "data-slot": "radio-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: [
           circle,
-          /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 gap-0.5 text-base text-text-default peer-data-disabled:text-text-subtle peer-data-disabled:*:text-text-subtle", children: [
-            label && /* @__PURE__ */ jsx("span", { id: labelId, className: "block leading-5 font-medium", children: label }),
-            description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "block leading-5 text-text-muted", children: description })
+          /* @__PURE__ */ jsxs("div", { className: "sa:grid sa:min-w-0 sa:gap-0.5 sa:text-base sa:text-text-default sa:peer-data-disabled:text-text-subtle sa:peer-data-disabled:*:text-text-subtle sa:peer-disabled:*:text-text-subtle", children: [
+            label && /* @__PURE__ */ jsx("span", { id: labelId, className: "sa:block sa:leading-5 sa:font-medium", children: label }),
+            description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "sa:block sa:leading-5 sa:text-text-muted", children: description })
           ] })
         ]
       }
@@ -46,5 +46,3 @@ function Radio({ className, label, description, placement = "left", id, disabled
 }
 
 export { Radio, RadioGroup };
-//# sourceMappingURL=chunk-LLHTVIM3.js.map
-//# sourceMappingURL=chunk-LLHTVIM3.js.map

package/chunk-FB6DG3LR.js

@@ -0,0 +1,35 @@
+import { ButtonGroup } from './chunk-GH2DEOGO.js';
+import { DropdownMenu } from './chunk-P36KBUYD.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function SplitButton({
+  menu,
+  menuLabel,
+  menuProps,
+  groupClassName,
+  variant = "primary",
+  size,
+  shape,
+  disabled,
+  children,
+  ...props
+}) {
+  const labels = useSatinLabels();
+  return /* @__PURE__ */ jsxs(ButtonGroup, { variant, size, shape, className: groupClassName, "data-slot": "split-button", children: [
+    /* @__PURE__ */ jsx(Button, { disabled, ...props, children }),
+    /* @__PURE__ */ jsx(
+      DropdownMenu,
+      {
+        align: "end",
+        ...menuProps,
+        trigger: /* @__PURE__ */ jsx(Button, { iconOnly: true, "aria-label": menuLabel ?? labels.moreOptions, disabled, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+        children: menu
+      }
+    )
+  ] });
+}
+
+export { SplitButton };