@uisatin/ui 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @uisatin/ui
 
+## 0.5.0
+
+### Minor Changes
+
+- f49c44d: The pill corner (`--radius-pill`: Button's `rounded` shape, chips, tabs, segmented controls, the sidebar's rows) now changes at every step of the theme's corner scale: square at 0, 6px at 0.5, 12px at Satin's default 1, and a full pill only at 1.5. It used to be a full pill from 1 up, so Default and Large looked the same on 32px controls. The base stylesheet follows: `--radius-pill` is 12px unless a theme sets Large corners.
+
+## 0.4.0
+
+### Minor Changes
+
+- 51f930e: New components built from the ones Satin already has:
+
+  - Buttons: `ButtonGroup` (attached or spaced, with `ButtonGroupSeparator`), `SplitButton`, `ActionButton` (arrow, spinner, checkmark in one slot), and `loading` on `Button`.
+  - Forms: `Form` (one layout, errors by `name`, focus on the first invalid field, `onSubmitValues`), `FormSection`, `FormActions`, `FieldGroup`, `InputGroup` with `InputGroupAddon`, `PasswordInput`, `leadingText` / `trailingText` on `Input`, and `name` on `FormField`.
+  - Choices: `SelectableRadio` and `SelectableCheckbox`, in `sm` and `md`.
+  - Feedback and content: `Alert`, `Spinner`, `Separator`, `Link`, `List` with `Item`.
+
+  Fixes: `cn` now knows Satin's theme names (`text-body`, `rounded-pill`, `h-control-height`…), so `text-body` is no longer dropped next to a text colour (Banner descriptions, StreamingText and table cells take the theme's body size again) and app classes replace them as they should. Checkbox and Radio texts dim inside a disabled fieldset.
+
 ## 0.3.0
 
 ### Minor Changes

package/{chunk-NQL6SIIB.js → chunk-2643HEXD.js}

@@ -106,7 +106,7 @@ function radiusVars(scale) {
   const v = {};
   for (const [k, px] of Object.entries(RADII)) v[`--radius-${k}`] = `${Math.round(px * scale * 2) / 2}px`;
   v["--sa-radius"] = `${Math.round(10 * scale * 2) / 2}px`;
-  v["--sa-radius-pill"] = scale >= 1 ? "9999px" : `${Math.round(16 * scale)}px`;
+  v["--sa-radius-pill"] = scale >= 1.5 ? "9999px" : `${Math.round(12 * scale)}px`;
   return v;
 }
 var VAR_PREFIX = "sa-";

package/{chunk-UZ4DXU6W.js → chunk-3VVO5MY5.js}

@@ -1,7 +1,7 @@
-import { menuItemClass, MenuItemContent } from './chunk-BR2B4OIT.js';
-import { Kbd, KbdHint, KbdArrowUp, KbdArrowDown, KbdReturn } from './chunk-57QEOCDZ.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { menuItemClass, MenuItemContent } from './chunk-P36KBUYD.js';
+import { Kbd, KbdHint, KbdArrowUp, KbdArrowDown, KbdReturn } from './chunk-XWPH7C2W.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Dialog } from 'radix-ui';
 import { Search } from 'iconoir-react';

package/{chunk-EF5GT4OG.js → chunk-47DDBME3.js}

@@ -1,6 +1,6 @@
-import { HoverCard } from './chunk-PD6YPFYN.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { HoverCard } from './chunk-W2EH6RY5.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/{chunk-JBKBRAC4.js → chunk-5663JVE5.js}

@@ -1,6 +1,6 @@
-import { niceMax } from './chunk-ISYKZCPJ.js';
-import { ChartCard, defaultFormat, ChartTooltip } from './chunk-ZBZ3ZQRB.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { niceMax } from './chunk-INJWE2LD.js';
+import { ChartCard, defaultFormat, ChartTooltip } from './chunk-LI5VYDLN.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 

package/chunk-67CBFB6Y.js

@@ -0,0 +1,99 @@
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ListContext = React.createContext(null);
+function Item({
+  title,
+  description,
+  icon,
+  media,
+  meta,
+  actions,
+  href,
+  target,
+  onClick,
+  selected = false,
+  disabled = false,
+  size: ownSize,
+  variant = "plain",
+  className,
+  children,
+  ...props
+}) {
+  const list = React.useContext(ListContext);
+  const size = ownSize ?? list?.size ?? "md";
+  const sm = size === "sm";
+  const interactive = (href !== void 0 || onClick !== void 0) && !disabled;
+  const Root = list ? "li" : "div";
+  const flush = list?.variant === "divided" || list?.variant === "card";
+  const target_ = "sa:outline-none sa:after:absolute sa:after:inset-0";
+  const titleText = /* @__PURE__ */ jsx("span", { className: "sa:block sa:truncate", children: title });
+  const titleNode = href !== void 0 && !disabled ? /* @__PURE__ */ jsx("a", { href, target, rel: target === "_blank" ? "noopener noreferrer" : void 0, "data-slot": "item-target", "aria-current": selected ? "page" : void 0, className: cn(target_, "sa:no-underline sa:text-inherit"), children: titleText }) : onClick && !disabled ? /* @__PURE__ */ jsx("button", { type: "button", "data-slot": "item-target", "aria-pressed": selected || void 0, onClick, className: cn(target_, "sa:block sa:w-full sa:cursor-pointer sa:text-left"), children: titleText }) : titleText;
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      "data-slot": "item",
+      "data-size": size,
+      "data-selected": selected || void 0,
+      "data-disabled": disabled || void 0,
+      className: cn(
+        "sa:relative sa:flex sa:min-w-0 sa:items-center",
+        sm ? "sa:min-h-10 sa:gap-2.5 sa:px-2 sa:py-1.5" : "sa:min-h-14 sa:gap-3 sa:px-3 sa:py-2.5",
+        flush ? list?.variant === "card" ? sm ? "sa:px-3" : "sa:px-4" : "sa:px-0" : "sa:rounded-lg",
+        variant === "sa:outline" && !list && "sa:border sa:border-border-default sa:bg-bg-card sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+        "sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        interactive && "sa:hover:bg-bg-hover",
+        interactive && flush && list?.variant === "divided" && "sa:hover:bg-transparent sa:[&:hover_[data-slot=item-title]]:underline",
+        selected && "sa:bg-bg-selected sa:hover:bg-bg-selected",
+        // The focus ring of the stretched link, drawn on the row.
+        "sa:has-[[data-slot=item-target]:focus-visible]:[box-shadow:inset_0_0_0_2px_var(--action-focus-ring)]",
+        disabled && "sa:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        media ? /* @__PURE__ */ jsx("span", { className: "sa:flex sa:shrink-0 sa:items-center", children: media }) : icon ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "sa:grid sa:shrink-0 sa:place-items-center sa:rounded-lg sa:bg-bg-muted sa:text-text-muted sa:[&_svg]:size-icon-size sa:[&_svg]:[stroke-width:1.875]",
+              sm ? "sa:size-7" : "sa:size-8"
+            ),
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "sa:min-w-0 sa:flex-1", children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "item-title", className: "sa:text-sm sa:leading-5 sa:font-medium sa:text-text-default sa:underline-offset-[3px]", children: titleNode }),
+          description && /* @__PURE__ */ jsx("p", { className: "sa:truncate sa:text-sm sa:leading-5 sa:text-text-muted", children: description }),
+          children && /* @__PURE__ */ jsx("div", { className: "sa:mt-1.5", children })
+        ] }),
+        meta && /* @__PURE__ */ jsx("div", { className: "sa:shrink-0 sa:text-sm sa:text-text-muted sa:tabular-nums", children: meta }),
+        actions && // Above the stretched target, so they stay their own controls.
+        /* @__PURE__ */ jsx("div", { className: "sa:relative sa:z-10 sa:flex sa:shrink-0 sa:items-center sa:gap-1", children: actions })
+      ]
+    }
+  );
+}
+function List({ variant = "plain", size = "md", className, ...props }) {
+  const context = React.useMemo(() => ({ variant, size }), [variant, size]);
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      role: "list",
+      "data-slot": "list",
+      "data-variant": variant,
+      className: cn(
+        "sa:m-0 sa:flex sa:w-full sa:list-none sa:flex-col sa:p-0",
+        variant === "plain" && "sa:gap-0.5",
+        variant !== "plain" && "sa:divide-y sa:divide-border-default",
+        variant === "card" && "sa:overflow-hidden sa:rounded-xl sa:border sa:border-border-default sa:bg-bg-card sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+export { Item, List };

package/{chunk-T6L32XXH.js → chunk-6DWLTGRQ.js}

@@ -1,8 +1,9 @@
-import { cn } from './chunk-O46O6LFQ.js';
-import 'react';
+import { Spinner } from './chunk-AKEZCWNW.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
 import { Slot } from 'radix-ui';
 import { cva } from 'class-variance-authority';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var buttonVariants = cva(
   [
@@ -91,17 +92,39 @@ var buttonVariants = cva(
     defaultVariants: { variant: "primary", size: "md", shape: "default", iconOnly: false }
   }
 );
-function Button({ className, variant, size, shape, iconOnly, asChild = false, type, ...props }) {
+var ButtonDefaultsContext = React.createContext(null);
+function Button({ className, variant, size, shape, iconOnly, asChild = false, loading = false, type, onClick, children, "aria-disabled": ariaDisabled, ...props }) {
   const Comp = asChild ? Slot.Root : "button";
+  const group = React.useContext(ButtonDefaultsContext);
+  const resolved = variant ?? group?.variant ?? "primary";
   return /* @__PURE__ */ jsx(
     Comp,
     {
       "data-slot": "button",
+      "data-variant": resolved,
       type: asChild ? void 0 : type ?? "button",
-      className: cn(buttonVariants({ variant, size, shape, iconOnly }), className),
-      ...props
+      "aria-busy": loading || void 0,
+      "aria-disabled": loading || ariaDisabled || void 0,
+      "data-loading": loading || void 0,
+      className: cn(
+        buttonVariants({ variant: resolved, size: size ?? group?.size, shape: shape ?? group?.shape, iconOnly }),
+        loading && "sa:relative sa:cursor-progress",
+        className
+      ),
+      onClick: (event) => {
+        if (loading) {
+          event.preventDefault();
+          return;
+        }
+        onClick?.(event);
+      },
+      ...props,
+      children: loading && !asChild ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "sa:invisible sa:contents", children }),
+        /* @__PURE__ */ jsx("span", { className: "sa:absolute sa:inset-0 sa:grid sa:place-items-center", children: /* @__PURE__ */ jsx(Spinner, { size: (size ?? group?.size) === "xs" ? "sm" : "md", label: null }) })
+      ] }) : children
     }
   );
 }
 
-export { Button, buttonVariants };
+export { Button, ButtonDefaultsContext, buttonVariants };

package/{chunk-S7QHBVPX.js → chunk-6GNMUJQ4.js}

@@ -1,6 +1,6 @@
-import { Thinking } from './chunk-NL574STL.js';
-import { MessageActions } from './chunk-SZJIVBOD.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { Thinking } from './chunk-WCUR44O6.js';
+import { MessageActions } from './chunk-STYOBAC7.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/{chunk-Z7S2KQZS.js → chunk-6JTSZAGO.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-O46O6LFQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { cva } from 'class-variance-authority';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';

package/chunk-6RLSRMB5.js

@@ -0,0 +1,14 @@
+import { useSelectableIds, SelectableCardBody } from './chunk-EBZHGRM5.js';
+import { Checkbox } from './chunk-W2QQQWNE.js';
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function SelectableCheckbox({ title, description, icon, size = "md", className, children, id, ...props }) {
+  const { controlId, ...aria } = useSelectableIds(id, description);
+  return /* @__PURE__ */ jsxs("label", { htmlFor: controlId, "data-slot": "selectable-card", "data-size": size, "data-kind": "checkbox", className, children: [
+    /* @__PURE__ */ jsx(SelectableCardBody, { id: controlId, title, description, icon, size, children }),
+    /* @__PURE__ */ jsx(Checkbox, { id: controlId, ...aria, ...props })
+  ] });
+}
+
+export { SelectableCheckbox };

package/{chunk-GI2SMFZL.js → chunk-6Y6CY2DP.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-O46O6LFQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { Accordion as Accordion$1 } from 'radix-ui';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/{chunk-XUOSJMEJ.js → chunk-7NV53EL5.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-O46O6LFQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';

package/{chunk-LFGUJHFF.js → chunk-7SVMERPH.js}

@@ -1,5 +1,5 @@
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Popover as Popover$1 } from 'radix-ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/chunk-A52HUWVM.js

@@ -0,0 +1,24 @@
+import { useSelectableIds, SelectableCardBody } from './chunk-EBZHGRM5.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import 'react';
+import { RadioGroup } from 'radix-ui';
+import { jsx } from 'react/jsx-runtime';
+
+function SelectableRadio({ title, description, icon, size = "md", className, children, id, ...props }) {
+  const { controlId, ...aria } = useSelectableIds(id, description);
+  return /* @__PURE__ */ jsx(
+    RadioGroup.Item,
+    {
+      id: controlId,
+      "data-slot": "selectable-card",
+      "data-size": size,
+      "data-kind": "radio",
+      ...aria,
+      ...props,
+      className: cn("sa:w-full sa:text-left", className),
+      children: /* @__PURE__ */ jsx(SelectableCardBody, { id: controlId, title, description, icon, size, children })
+    }
+  );
+}
+
+export { SelectableRadio };

package/chunk-AKEZCWNW.js

@@ -0,0 +1,29 @@
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var px = { xs: 12, sm: 14, md: 16, lg: 20 };
+function Spinner({ size = "md", label, className, ...props }) {
+  const labels = useSatinLabels();
+  const s = px[size];
+  const hidden = label === null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "spinner",
+      "data-size": size,
+      role: hidden ? void 0 : "status",
+      "aria-label": hidden ? void 0 : label ?? labels.loading,
+      "aria-hidden": hidden || void 0,
+      className: cn("sa:inline-grid sa:shrink-0 sa:place-items-center", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", strokeOpacity: "0.2", style: { strokeWidth: 1.5 } }),
+        /* @__PURE__ */ jsx("path", { d: "M8 1.75A6.25 6.25 0 0 1 14.25 8", stroke: "currentColor", strokeLinecap: "round", style: { strokeWidth: 1.5 } })
+      ] })
+    }
+  );
+}
+
+export { Spinner };

package/{chunk-NH3EHMIL.js → chunk-APRVUOD6.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-O46O6LFQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Switch as Switch$1 } from 'radix-ui';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/{chunk-DPYIBFQD.js → chunk-C435UD7V.js}

@@ -1,5 +1,5 @@
-import { useFormField } from './chunk-VUOAPWTF.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { useFormField } from './chunk-KITXKIYW.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -65,7 +65,8 @@ function Textarea({
                 if (value == null) setUncontrolled(e.target.value);
                 onChange?.(e.target.value);
               },
-              ...props
+              ...props,
+              name: props.name ?? field?.name
             }
           ),
           /* @__PURE__ */ jsx("svg", { className: "satin-textarea-grip", viewBox: "0 0 7 7", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M6.5 0.5L0.5 6.5M6.5 4L4 6.5", stroke: "currentColor", strokeLinecap: "round" }) })

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

@@ -1,4 +1,4 @@
-import { cn } from './chunk-O46O6LFQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';

package/{chunk-X66KTATQ.js → chunk-CQFAMWZI.js}

@@ -1,5 +1,5 @@
-import { menuSurfaceClass, MenuItemContent, menuItemClass } from './chunk-BR2B4OIT.js';
-import { cn } from './chunk-O46O6LFQ.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';

package/{chunk-YJK4MGSI.js → chunk-DAKVTPYZ.js}

@@ -1,7 +1,7 @@
-import { CloseIcon } from './chunk-AIMQNLPY.js';
-import { Button } from './chunk-T6L32XXH.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.js';
+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';

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

@@ -1,6 +1,6 @@
-import { Button } from './chunk-T6L32XXH.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.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';

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-O46O6LFQ.js → chunk-EHEXE2UV.js}

@@ -1,7 +1,26 @@
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+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);

package/{chunk-UCCNXGLG.js → chunk-EQAFDIPE.js}

@@ -1,7 +1,7 @@
-import { useFormField } from './chunk-VUOAPWTF.js';
-import { MenuItemContent, menuItemClass, menuGroupClass, menuGroupLabelClass, menuSurfaceClass } from './chunk-BR2B4OIT.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.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';
@@ -24,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,
@@ -37,7 +38,7 @@ function FieldChrome({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("sa:grid sa:w-full sa: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: "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 }),
@@ -59,7 +60,7 @@ function Select({
   label,
   hint,
   error,
-  size = "md",
+  size: ownSize,
   leadingIcon,
   layout = "inline",
   iconSize = 16,
@@ -78,6 +79,7 @@ function Select({
   ...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;
@@ -97,7 +99,7 @@ function Select({
       onOpenChange,
       disabled: chrome.disabled,
       required: required ?? chrome.required,
-      name,
+      name: name ?? chrome.name,
       children: [
         /* @__PURE__ */ jsxs(
           Select$1.Trigger,

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

@@ -1,4 +1,4 @@
-import { cn } from './chunk-O46O6LFQ.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';
@@ -35,7 +35,7 @@ function Radio({ className, label, description, placement = "left", id, disabled
         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: "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", children: [
+          /* @__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 })
           ] })

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 };