@uisatin/ui 0.2.0 → 0.4.0

package/chunk-6GNMUJQ4.js

@@ -0,0 +1,45 @@
+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';
+
+function Message({
+  role = "assistant",
+  thinking,
+  thinkingLabel = "Thought for a moment",
+  source,
+  actions = true,
+  timestamp,
+  onFeedback,
+  onCopy,
+  onShare,
+  className,
+  children,
+  ...props
+}) {
+  if (role === "user") {
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "message", "data-role": "user", className: cn("sa:flex sa:flex-col sa:items-end sa:gap-2", className), ...props, children: [
+      source && /* @__PURE__ */ jsx(SourceCard, { source }),
+      /* @__PURE__ */ jsx("div", { className: "sa:max-w-full sa:rounded-xl sa:rounded-br-xs sa:bg-action-inverse-bg sa:px-3 sa:py-2", children: /* @__PURE__ */ jsx("div", { className: "sa:max-w-64 sa:text-body sa:break-words sa:text-text-on-inverse", children }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "message", "data-role": "assistant", className: cn("sa:flex sa:flex-col sa:items-start sa:gap-3", className), ...props, children: [
+    thinking && thinking.length > 0 && /* @__PURE__ */ jsx(Thinking, { state: "collapsed", label: thinkingLabel, steps: thinking }),
+    /* @__PURE__ */ jsx("div", { className: "sa:w-full sa:text-body sa:break-words sa:text-text-default", children }),
+    actions && /* @__PURE__ */ jsx(MessageActions, { timestamp, onFeedback, onCopy, onShare })
+  ] });
+}
+function SourceCard({ source }) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    source.icon && /* @__PURE__ */ jsx("span", { className: "sa:flex sa:size-4 sa:shrink-0 sa:items-center sa:justify-center sa:[&>*]:size-4", children: source.icon }),
+    /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:min-w-0 sa:flex-col sa:overflow-clip sa:whitespace-nowrap", children: [
+      /* @__PURE__ */ jsx("span", { className: "sa:truncate sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default", children: source.title }),
+      source.url != null && /* @__PURE__ */ jsx("span", { className: "sa:truncate sa:text-xs sa:leading-3 sa:tracking-normal sa:text-text-muted", children: source.url })
+    ] })
+  ] });
+  const cls = "sa:flex sa:max-w-full sa:items-center sa:gap-2.5 sa:overflow-clip sa:rounded-lg sa:border sa:border-border-subtle sa:bg-bg-canvas sa:py-2 sa:pr-3 sa:pl-2.5";
+  return source.href ? /* @__PURE__ */ jsx("a", { href: source.href, className: cls, children: body }) : /* @__PURE__ */ jsx("div", { className: cls, children: body });
+}
+
+export { Message };

package/chunk-6JTSZAGO.js

@@ -0,0 +1,177 @@
+import { cn } from './chunk-EHEXE2UV.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var chipVariants = cva(
+  [
+    "sa:group/chip sa:relative sa:inline-flex sa:shrink-0 sa:items-center sa:rounded-pill sa:whitespace-nowrap sa:select-none",
+    "sa:text-sm sa:leading-(--sa-text-sm--line-height) sa:font-medium",
+    "sa:transition-[background-color,border-color,color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+    "sa:focus-visible:outline-none",
+    "sa:data-[disabled]:pointer-events-none sa:data-[disabled]:opacity-50 sa:data-[disabled]:[box-shadow:none]"
+  ],
+  {
+    variants: {
+      variant: {
+        outline: "sa:border",
+        subtle: ""
+      },
+      size: {
+        md: "sa:h-control-height",
+        sm: "sa:h-control-height-xs"
+      },
+      neutral: { true: "sa:text-text-default", false: "sa:text-tone-fg" }
+    },
+    compoundVariants: [
+      {
+        variant: "sa:outline",
+        neutral: true,
+        className: [
+          "sa:border-border-default sa:bg-bg-popover sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+          "sa:satin-hover:border-border-strong sa:satin-hover:bg-bg-hover",
+          "sa:satin-focus:border-border-strong sa:satin-focus:bg-bg-popover sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:has-[button:focus-visible]:border-border-strong sa:has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:satin-pressed:border-border-strong sa:satin-pressed:bg-border-input sa:satin-pressed:[box-shadow:none]",
+          "sa:data-[disabled]:border-border-strong"
+        ]
+      },
+      {
+        variant: "sa:outline",
+        neutral: false,
+        className: [
+          "sa:border-tone-border sa:bg-tone-bg sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+          "sa:satin-hover:bg-tone-border",
+          "sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:satin-pressed:bg-tone-border sa:satin-pressed:[box-shadow:none]"
+        ]
+      },
+      {
+        variant: "subtle",
+        neutral: true,
+        className: [
+          "sa:bg-action-secondary-bg",
+          "sa:satin-hover:bg-border-input",
+          "sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:satin-pressed:bg-border-input sa:satin-pressed:[box-shadow:inset_0_0_0_1px_var(--border-strong)]"
+        ]
+      },
+      {
+        variant: "subtle",
+        neutral: false,
+        className: [
+          "sa:bg-tone-bg",
+          "sa:satin-hover:bg-tone-border",
+          "sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:has-[button:focus-visible]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:satin-pressed:bg-tone-border"
+        ]
+      }
+    ],
+    defaultVariants: { variant: "subtle", size: "md", neutral: true }
+  }
+);
+function CloseGlyph({ size }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M4.50551 11.4951L8.0006 8M8.0006 8L11.4957 4.50491M8.0006 8L4.50551 4.50491M8.0006 8L11.4957 11.4951",
+      stroke: "currentColor",
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function Chip({
+  className,
+  variant = "subtle",
+  size = "md",
+  tone = "neutral",
+  dot = false,
+  avatar,
+  onRemove,
+  removeLabel,
+  disabled = false,
+  children,
+  type,
+  ...props
+}) {
+  const neutral = tone === "neutral";
+  const iconSize = size === "sm" ? 14 : 16;
+  const classes = cn(chipVariants({ variant, size, neutral }), className);
+  const label = typeof children === "string" ? children : void 0;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    dot && // Dot slot: 4px in, a 16px box with an 8px status dot (status/green fg in Figma).
+    /* @__PURE__ */ jsx("span", { "data-slot": "chip-dot", className: "sa:-mr-1 sa:flex sa:shrink-0 sa:items-center sa:pl-1", "aria-hidden": true, children: /* @__PURE__ */ jsx("span", { className: "sa:grid sa:size-4 sa:place-items-center", children: /* @__PURE__ */ jsx("span", { className: "sa:size-2 sa:rounded-full sa:bg-status-green-fg" }) }) }),
+    avatar && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "chip-avatar",
+        className: "sa:-mr-1 sa:flex sa:shrink-0 sa:items-center sa:pl-1 sa:[&>*]:size-4 sa:[&>*]:rounded-full",
+        children: avatar
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "data-slot": "chip-label", className: cn("sa:flex sa:shrink-0 sa:items-center sa:px-2", onRemove && "sa:-mr-1"), children }),
+    onRemove && /* @__PURE__ */ jsx("span", { className: "sa:flex sa:shrink-0 sa:items-center sa:pr-1", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "chip-remove",
+        disabled,
+        "aria-label": removeLabel ?? (label ? `Remove ${label}` : "Remove"),
+        onClick: onRemove,
+        className: cn(
+          "sa:grid sa:shrink-0 sa:place-items-center sa:rounded-pill sa:focus-visible:outline-none",
+          neutral ? "sa:text-text-muted" : "sa:text-tone-fg"
+        ),
+        children: /* @__PURE__ */ jsx(CloseGlyph, { size: iconSize })
+      }
+    ) })
+  ] });
+  if (onRemove) {
+    const { "data-force": force } = props;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "chip",
+        "data-tone": tone,
+        "data-force": force,
+        "data-disabled": disabled || void 0,
+        className: classes,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-slot": "chip",
+      "data-tone": tone,
+      "data-disabled": disabled || void 0,
+      type: type ?? "button",
+      disabled,
+      className: classes,
+      ...props,
+      children: content
+    }
+  );
+}
+function ChipAvatar({ initials, tone, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-tone": tone,
+      "aria-hidden": true,
+      className: cn(
+        "sa:grid sa:size-4 sa:shrink-0 sa:place-items-center sa:overflow-hidden sa:rounded-full sa:bg-tone-bg sa:text-[7px] sa:leading-2 sa:font-semibold sa:text-tone-fg",
+        className
+      ),
+      children: initials
+    }
+  );
+}
+
+export { Chip, ChipAvatar, chipVariants };

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-6Y6CY2DP.js

@@ -0,0 +1,55 @@
+import { cn } from './chunk-EHEXE2UV.js';
+import 'react';
+import { Accordion as Accordion$1 } from 'radix-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Accordion({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Accordion$1.Root, { "data-slot": "accordion", className: cn("sa:flex sa:w-full sa:flex-col", className), ...props });
+}
+function AccordionItem({ title, icon, children, className, "data-force": force, ...props }) {
+  return /* @__PURE__ */ jsxs(Accordion$1.Item, { "data-slot": "accordion-item", className: cn("sa:border-b sa:border-border-subtle sa:py-1", className), ...props, children: [
+    /* @__PURE__ */ jsx(Accordion$1.Header, { className: "sa:flex", children: /* @__PURE__ */ jsxs(
+      Accordion$1.Trigger,
+      {
+        "data-force": force,
+        className: cn(
+          "sa:group sa:flex sa:h-10 sa:w-full sa:cursor-pointer sa:items-center sa:gap-3 sa:rounded-lg sa:px-2 sa:text-left sa:outline-none",
+          "sa:transition-[background-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:hover:bg-bg-hover sa:data-[force=hover]:bg-bg-hover",
+          "sa:focus-visible:bg-bg-hover sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:data-[force=focus]:bg-bg-hover sa:data-[force=focus]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:disabled:cursor-not-allowed sa:disabled:opacity-50"
+        ),
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:grid sa:size-4 sa:shrink-0 sa:place-items-center sa:text-text-muted sa:[&_svg]:size-4 sa:[&_svg]:[stroke-width:1.875]", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:text-base sa:leading-[21px] sa:font-medium sa:text-text-default", children: title }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              "aria-hidden": true,
+              className: "sa:shrink-0 sa:text-text-muted sa:transition-transform sa:duration-(--sa-duration-base) sa:ease-(--sa-ease-out) sa:group-data-[state=open]:rotate-180",
+              children: /* @__PURE__ */ jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Accordion$1.Content, { "data-slot": "accordion-content", className: "satin-accordion-content", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "sa:pt-1 sa:pr-2 sa:pb-3 sa:text-base sa:leading-[21px] sa:text-text-muted",
+          // Lined up with the title: past the icon and its gap when there is one.
+          icon ? "sa:pl-9" : "sa:pl-2"
+        ),
+        children
+      }
+    ) })
+  ] });
+}
+
+export { Accordion, AccordionItem };

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

@@ -1,28 +1,28 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
 
 var badgeVariants = cva(
   [
-    "inline-flex shrink-0 items-center gap-1 text-sm leading-4 font-medium tracking-normal whitespace-nowrap text-tone-fg",
-    "[&_svg]:pointer-events-none [&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]"
+    "sa:inline-flex sa:shrink-0 sa:items-center sa:gap-1 sa:text-sm sa:leading-4 sa:font-medium sa:tracking-normal sa:whitespace-nowrap sa:text-tone-fg",
+    "sa:[&_svg]:pointer-events-none sa:[&_svg]:size-icon-size-sm sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]"
   ],
   {
     variants: {
       size: {
-        lg: "px-2 py-1",
-        sm: "px-1.5 py-0.5"
+        lg: "sa:px-2 sa:py-1",
+        sm: "sa:px-1.5 sa:py-0.5"
       },
       variant: {
-        soft: "bg-tone-bg",
-        plain: "bg-transparent",
+        soft: "sa:bg-tone-bg",
+        plain: "sa:bg-transparent",
         // White (bg/card) inside a 1px border/default edge, drawn inset so the size stays put.
-        outline: "bg-bg-card [box-shadow:inset_0_0_0_1px_var(--border-default)]"
+        outline: "sa:bg-bg-card sa:[box-shadow:inset_0_0_0_1px_var(--border-default)]"
       },
       shape: {
-        default: "rounded-sm",
-        rounded: "rounded-pill"
+        default: "sa:rounded-sm",
+        rounded: "sa:rounded-pill"
       }
     },
     defaultVariants: { size: "lg", variant: "soft", shape: "default" }
@@ -41,5 +41,3 @@ function Badge({ className, tone = "neutral", size, variant, shape, ...props })
 }
 
 export { Badge, badgeVariants };
-//# sourceMappingURL=chunk-O7F3CIDV.js.map
-//# sourceMappingURL=chunk-O7F3CIDV.js.map

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

@@ -1,17 +1,18 @@
-import { cn } from './chunk-H63FYCMY.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';
 
 var panelClass = cn(
-  "relative flex w-[320px] max-w-[calc(100vw-16px)] flex-col overflow-clip pb-2.5",
-  "rounded-xl border border-border-default bg-bg-popover",
-  "[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]"
+  "sa:relative sa:flex sa:w-[320px] sa:max-w-[calc(100vw-16px)] sa:flex-col sa:overflow-clip sa:pb-2.5",
+  "sa:rounded-xl sa:border sa:border-border-default sa:bg-bg-popover",
+  "sa:[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]"
 );
 var closeClass = cn(
-  "absolute top-2.5 right-2.5 grid size-4 place-items-center rounded-sm text-text-subtle",
-  "transition-colors duration-(--duration-fast) ease-(--ease-out)",
-  "satin-hover:text-text-default focus-visible:outline-none satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
+  "sa:absolute sa:top-2.5 sa:right-2.5 sa:grid sa:size-4 sa:place-items-center sa:rounded-sm sa:text-text-subtle",
+  "sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+  "sa:satin-hover:text-text-default sa:focus-visible:outline-none sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
 );
 var closeIcon = /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
   "path",
@@ -25,11 +26,11 @@ var closeIcon = /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox:
 ) });
 function PanelBody({ titleId, title, description, body, closeButton }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 px-2.5 pt-2.5 text-sm", children: [
-      /* @__PURE__ */ jsx("p", { id: titleId, className: cn("leading-[18px] font-medium text-text-default", closeButton && "pr-6"), children: title }),
-      description ? /* @__PURE__ */ jsx("p", { className: "text-text-muted", children: description }) : null
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:flex-col sa:gap-0.5 sa:px-2.5 sa:pt-2.5 sa:text-sm", children: [
+      /* @__PURE__ */ jsx("p", { id: titleId, className: cn("sa:leading-[18px] sa:font-medium sa:text-text-default", closeButton && "sa:pr-6"), children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "sa:text-text-muted", children: description }) : null
     ] }),
-    body ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-2.5 pt-4", children: body }) : null
+    body ? /* @__PURE__ */ jsx("div", { className: "sa:flex sa:flex-col sa:gap-4 sa:px-2.5 sa:pt-4", children: body }) : null
   ] });
 }
 function Popover({
@@ -47,31 +48,34 @@ function Popover({
   container,
   onOpenAutoFocus,
   onInteractOutside,
-  className
+  className,
+  ...props
 }) {
+  const labels = useSatinLabels();
   const titleId = React.useId();
   return /* @__PURE__ */ jsxs(Popover$1.Root, { open, defaultOpen, onOpenChange, children: [
     children && /* @__PURE__ */ jsx(Popover$1.Trigger, { asChild: true, children }),
     /* @__PURE__ */ jsx(Popover$1.Portal, { container, children: /* @__PURE__ */ jsxs(
       Popover$1.Content,
       {
+        collisionPadding: 8,
+        ...props,
         "data-slot": "popover",
         "aria-labelledby": titleId,
         side,
         align,
         sideOffset,
-        collisionPadding: 8,
         onOpenAutoFocus,
         onInteractOutside,
         className: cn(
           panelClass,
-          "pointer-events-auto z-50 origin-(--radix-popover-content-transform-origin) focus-visible:outline-none",
-          "data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]",
+          "sa:pointer-events-auto sa:z-50 sa:origin-(--radix-popover-content-transform-origin) sa:focus-visible:outline-none",
+          "sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]",
           className
         ),
         children: [
           /* @__PURE__ */ jsx(PanelBody, { titleId, title, description, body, closeButton }),
-          closeButton && /* @__PURE__ */ jsx(Popover$1.Close, { "aria-label": "Close", className: closeClass, children: closeIcon })
+          closeButton && /* @__PURE__ */ jsx(Popover$1.Close, { "aria-label": labels.close, className: closeClass, children: closeIcon })
         ]
       }
     ) })
@@ -83,16 +87,16 @@ function PopoverPanel({
   body,
   closeButton = true,
   onClose,
-  className
+  className,
+  ...props
 }) {
+  const labels = useSatinLabels();
   const titleId = React.useId();
-  return /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-labelledby": titleId, "data-slot": "popover", className: cn(panelClass, className), children: [
+  return /* @__PURE__ */ jsxs("div", { ...props, role: "dialog", "aria-labelledby": titleId, "data-slot": "popover", className: cn(panelClass, className), children: [
     /* @__PURE__ */ jsx(PanelBody, { titleId, title, description, body, closeButton }),
-    closeButton && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, className: closeClass, children: closeIcon })
+    closeButton && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels.close, onClick: onClose, className: closeClass, children: closeIcon })
   ] });
 }
 var PopoverClose = Popover$1.Close;
 
 export { Popover, PopoverClose, PopoverPanel };
-//# sourceMappingURL=chunk-BNZVTLHV.js.map
-//# sourceMappingURL=chunk-BNZVTLHV.js.map

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-SH6NG6VN.js → chunk-APRVUOD6.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.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';
@@ -13,7 +13,7 @@ function Switch({ className, label, description, placement = "left", id, ...prop
       id: switchId,
       "data-slot": "switch",
       "aria-describedby": descriptionId,
-      className: cn("peer satin-switch", className),
+      className: cn("sa:peer satin-switch", className),
       ...props,
       children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: "satin-switch-thumb" })
     }
@@ -23,12 +23,12 @@ function Switch({ className, label, description, placement = "left", id, ...prop
     "div",
     {
       "data-slot": "switch-field",
-      className: cn("flex items-start gap-2.5", placement === "right" && "flex-row-reverse justify-between"),
+      className: cn("sa:flex sa:items-start sa:gap-2.5", placement === "right" && "sa:flex-row-reverse sa:justify-between"),
       children: [
         control,
-        /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5 text-sm leading-[19.5px] peer-disabled:opacity-50", children: [
-          label && /* @__PURE__ */ jsx("label", { htmlFor: switchId, className: "font-medium text-text-default", children: label }),
-          description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-text-muted", children: description })
+        /* @__PURE__ */ jsxs("div", { className: "sa:grid sa:gap-0.5 sa:text-sm sa:leading-[19.5px] sa:peer-disabled:opacity-50", children: [
+          label && /* @__PURE__ */ jsx("label", { htmlFor: switchId, className: "sa:font-medium sa:text-text-default", children: label }),
+          description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "sa:text-text-muted", children: description })
         ] })
       ]
     }
@@ -36,5 +36,3 @@ function Switch({ className, label, description, placement = "left", id, ...prop
 }
 
 export { Switch };
-//# sourceMappingURL=chunk-SH6NG6VN.js.map
-//# sourceMappingURL=chunk-SH6NG6VN.js.map

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

@@ -1,5 +1,5 @@
-import { useFormField } from './chunk-UBNHSZSE.js';
-import { cn } from './chunk-H63FYCMY.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';
 
@@ -38,13 +38,13 @@ function Textarea({
     {
       "data-slot": "textarea-wrapper",
       "data-disabled": isDisabled || void 0,
-      className: cn("satin-textarea-root grid w-full gap-2", wrapperClassName),
+      className: cn("satin-textarea-root sa:grid sa:w-full sa:gap-2", wrapperClassName),
       children: [
-        label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: "text-sm leading-[18px] font-medium text-text-default", children: label }),
-          optional && /* @__PURE__ */ jsx("span", { className: "text-sm text-text-muted", children: "(Optional)" })
+        label && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-1", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: "sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default", children: label }),
+          optional && /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:text-text-muted", children: "(Optional)" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative flex", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sa:relative sa:flex", children: [
           /* @__PURE__ */ jsx(
             "textarea",
             {
@@ -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" }) })
@@ -74,13 +75,13 @@ function Textarea({
           "div",
           {
             className: cn(
-              "flex items-start gap-2 text-sm",
-              hasMessage ? "text-action-destructive-bg" : "text-text-muted"
+              "sa:flex sa:items-start sa:gap-2 sa:text-sm",
+              hasMessage ? "sa:text-action-destructive-bg" : "sa:text-text-muted"
             ),
             children: [
-              /* @__PURE__ */ jsx("p", { id: messageId, className: "min-w-0 flex-1", children: message }),
-              maxLength != null && /* @__PURE__ */ jsxs("p", { id: counterId, className: cn("shrink-0 whitespace-nowrap", !hasMessage && "text-text-muted"), children: [
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Characters used: " }),
+              /* @__PURE__ */ jsx("p", { id: messageId, className: "sa:min-w-0 sa:flex-1", children: message }),
+              maxLength != null && /* @__PURE__ */ jsxs("p", { id: counterId, className: cn("sa:shrink-0 sa:whitespace-nowrap", !hasMessage && "sa:text-text-muted"), children: [
+                /* @__PURE__ */ jsx("span", { className: "sa:sr-only", children: "Characters used: " }),
                 text.length,
                 "/",
                 maxLength
@@ -94,5 +95,3 @@ function Textarea({
 }
 
 export { Textarea };
-//# sourceMappingURL=chunk-QUF2IPOZ.js.map
-//# sourceMappingURL=chunk-QUF2IPOZ.js.map

package/{chunk-B2K45IUR.js → chunk-C6WRJ7DG.js}

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