@uisatin/ui 0.2.0 → 0.4.0

package/chunk-WCUR44O6.js

@@ -0,0 +1,88 @@
+import { FlappySprite, TetrisStill } from './chunk-R4KPFBMK.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { NavArrowDown, Check, EditPencil } from 'iconoir-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Thinking({
+  state = "collapsed",
+  label = "Thought",
+  steps = [],
+  indicator = "tetris",
+  onToggle,
+  className,
+  ...props
+}) {
+  const [open, setOpen] = React.useState(state === "expanded");
+  React.useEffect(() => setOpen(state === "expanded"), [state]);
+  const bodyId = `${React.useId()}-steps`;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "thinking", "data-state": open ? "expanded" : "collapsed", className: cn("sa:w-full", className), ...props, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": bodyId,
+        onClick: () => {
+          setOpen(!open);
+          onToggle?.(!open);
+        },
+        className: "sa:group sa:flex sa:w-fit sa:cursor-pointer sa:items-center sa:gap-3 sa:rounded-md sa:p-1 sa:outline-none sa:select-none sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        children: [
+          /* @__PURE__ */ jsx(ThinkingMark, { indicator }),
+          /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:whitespace-nowrap sa:text-text-muted", children: label }),
+          /* @__PURE__ */ jsx(
+            NavArrowDown,
+            {
+              "aria-hidden": true,
+              className: cn(
+                "sa:size-icon-size-sm sa:shrink-0 sa:text-text-muted sa:transition-transform sa:duration-(--sa-duration-base) sa:ease-(--sa-ease-out) sa:[stroke-width:1.875]",
+                open && "sa:rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { id: bodyId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:gap-3 sa:pt-2 sa:pl-1", children: [
+      /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "sa:relative sa:w-4 sa:shrink-0 sa:self-stretch", children: /* @__PURE__ */ jsx("div", { className: "sa:absolute sa:inset-y-0 sa:left-1/2 sa:w-px sa:-translate-x-1/2 sa:bg-linear-to-b sa:from-component-rail-edge sa:via-component-rail-center sa:to-component-rail-edge" }) }),
+      /* @__PURE__ */ jsx("ol", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col sa:gap-2", children: steps.map((step, i) => /* @__PURE__ */ jsx("li", { className: "sa:min-w-0", children: /* @__PURE__ */ jsx(Step, { step }) }, i)) })
+    ] }) }) })
+  ] });
+}
+function Step({ step }) {
+  switch (step.type) {
+    case "text":
+      return /* @__PURE__ */ jsx("p", { className: "sa:text-body sa:text-text-muted", children: step.text });
+    case "more":
+      return /* @__PURE__ */ jsx("p", { className: "sa:text-sm sa:whitespace-nowrap sa:text-text-muted", children: step.label });
+    case "source":
+      return /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:items-center sa:gap-3 sa:p-1 sa:text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "sa:flex sa:size-4 sa:shrink-0 sa:items-center sa:justify-center sa:overflow-clip sa:rounded-xs sa:[&>*]:size-4", children: step.icon }),
+        /* @__PURE__ */ jsx("span", { className: "sa:max-w-full sa:shrink-0 sa:truncate sa:text-text-default", children: step.label }),
+        step.meta != null && /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-text-muted", children: step.meta })
+      ] });
+    case "tool":
+      return /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:items-center sa:gap-2 sa:p-1 sa:text-sm sa:[&>svg]:size-icon-size sa:[&>svg]:shrink-0 sa:[&>svg]:text-text-muted sa:[&>svg]:[stroke-width:1.875]", children: [
+        step.icon ?? /* @__PURE__ */ jsx(EditPencil, {}),
+        /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:whitespace-nowrap sa:text-text-default", children: step.label }),
+        /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:font-mono sa:tracking-normal sa:text-text-muted", children: step.target }),
+        (step.added != null || step.removed != null) && /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:shrink-0 sa:gap-1.5 sa:font-mono sa:tracking-normal sa:whitespace-nowrap", children: [
+          step.added != null && /* @__PURE__ */ jsx("span", { className: "sa:text-status-green-fg", children: step.added }),
+          step.removed != null && /* @__PURE__ */ jsx("span", { className: "sa:text-status-red-fg", children: step.removed })
+        ] }),
+        step.meta != null && /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:whitespace-nowrap sa:text-text-muted", children: step.meta })
+      ] });
+    default:
+      return /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:items-center sa:gap-3 sa:p-1 sa:text-sm", children: [
+        /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "sa:size-icon-size-sm sa:shrink-0 sa:text-status-green-fg sa:[stroke-width:1.875]" }),
+        /* @__PURE__ */ jsx("span", { className: "sa:max-w-full sa:shrink-0 sa:truncate sa:text-text-default", children: step.label }),
+        step.meta != null && /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-text-muted", children: step.meta })
+      ] });
+  }
+}
+function ThinkingMark({ indicator }) {
+  return indicator === "flappy" ? /* @__PURE__ */ jsx(FlappySprite, { size: 16, run: false }) : /* @__PURE__ */ jsx(TetrisStill, {});
+}
+
+export { Thinking };

package/{chunk-BNTPPZCK.js → chunk-WJYJMX5S.js}

@@ -1,12 +1,12 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Slot, Tooltip, Collapsible } from 'radix-ui';
 import { NavArrowRight } from 'iconoir-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-var rowFocus = "outline-none satin-focus:[box-shadow:inset_0_0_0_1px_var(--border-focus)]";
+var rowFocus = "sa:outline-none sa:satin-focus:[box-shadow:inset_0_0_0_1px_var(--border-focus)]";
 function Sidebar({ className, ...props }) {
-  return /* @__PURE__ */ jsx("nav", { "data-slot": "sidebar", className: cn("flex flex-col gap-0.5", className), ...props });
+  return /* @__PURE__ */ jsx("nav", { "data-slot": "sidebar", className: cn("sa:flex sa:flex-col sa:gap-0.5", className), ...props });
 }
 function SidebarItem({
   className,
@@ -34,22 +34,22 @@ function SidebarItem({
       href: disabled ? void 0 : href,
       tabIndex: disabled ? -1 : void 0,
       className: cn(
-        "flex h-8 shrink-0 items-center gap-2 rounded-lg px-2 text-sm leading-4 font-medium tracking-normal text-text-muted no-underline select-none",
-        "transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-        "[&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]",
-        "not-data-active:satin-hover:bg-bg-muted",
+        "sa:flex sa:h-8 sa:shrink-0 sa:items-center sa:gap-2 sa:rounded-lg sa:px-2 sa:text-sm sa:leading-4 sa:font-medium sa:tracking-normal sa:text-text-muted sa:no-underline sa:select-none",
+        "sa:transition-[background-color,color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        "sa:[&_svg]:size-icon-size-sm sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]",
+        "sa:not-data-active:satin-hover:bg-bg-muted",
         rowFocus,
-        "data-active:bg-border-input data-active:text-text-default",
-        "aria-disabled:pointer-events-none aria-disabled:opacity-50",
-        iconOnly && "relative size-8 justify-center px-0",
+        "sa:data-active:bg-border-input sa:data-active:text-text-default",
+        "sa:aria-disabled:pointer-events-none sa:aria-disabled:opacity-50",
+        iconOnly && "sa:relative sa:size-8 sa:justify-center sa:px-0",
         className
       ),
       ...props,
       children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
         icon,
-        !iconOnly && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+        !iconOnly && /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate", children: label }),
         showCount && !iconOnly && /* @__PURE__ */ jsx(SidebarCount, { count }),
-        showCount && iconOnly && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute top-1 right-1 size-1.5 rounded-full bg-action-destructive-bg" })
+        showCount && iconOnly && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:absolute sa:top-1 sa:right-1 sa:size-1.5 sa:rounded-full sa:bg-action-destructive-bg" })
       ] })
     }
   );
@@ -62,7 +62,7 @@ function SidebarItem({
         side: "right",
         sideOffset: 6,
         collisionPadding: 8,
-        className: "z-50 rounded-md bg-action-inverse-bg px-2 py-1 text-xs font-medium text-text-on-inverse [box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+        className: "sa:z-50 sa:rounded-md sa:bg-action-inverse-bg sa:px-2 sa:py-1 sa:text-xs sa:font-medium sa:text-text-on-inverse sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
         children: label
       }
     ) })
@@ -71,7 +71,7 @@ function SidebarItem({
 function SidebarCount({ count }) {
   return (
     // 11/12 has no type token in the kit; Figma uses it raw for this counter.
-    /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 min-w-[18px] shrink-0 items-center justify-center rounded-xs bg-action-destructive-bg px-1 text-[11px] leading-3 font-medium tracking-normal text-text-on-solid tabular-nums", children: count > 99 ? "99+" : count })
+    /* @__PURE__ */ jsx("span", { className: "sa:inline-flex sa:h-4 sa:min-w-[18px] sa:shrink-0 sa:items-center sa:justify-center sa:rounded-xs sa:bg-action-destructive-bg sa:px-1 sa:text-[11px] sa:leading-3 sa:font-medium sa:tracking-normal sa:text-text-on-solid sa:tabular-nums", children: count > 99 ? "99+" : count })
   );
 }
 function SidebarGroup({
@@ -98,7 +98,7 @@ function SidebarGroup({
         if (openProp == null) setUncontrolled(next);
         onOpenChange?.(next);
       },
-      className: cn("group/sidebar-group flex flex-col gap-0.5", className),
+      className: cn("sa:group/sidebar-group sa:flex sa:flex-col sa:gap-0.5", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxs(
@@ -107,28 +107,28 @@ function SidebarGroup({
             "aria-controls": regionId,
             ...triggerProps,
             className: cn(
-              "flex h-8 w-full shrink-0 items-center gap-2 rounded-lg px-3 text-left text-text-muted",
-              "transition-[background-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-              "[&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]",
-              "not-data-active:satin-hover:bg-bg-muted",
+              "sa:flex sa:h-8 sa:w-full sa:shrink-0 sa:items-center sa:gap-2 sa:rounded-lg sa:px-3 sa:text-left sa:text-text-muted",
+              "sa:transition-[background-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+              "sa:[&_svg]:size-icon-size-sm sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]",
+              "sa:not-data-active:satin-hover:bg-bg-muted",
               rowFocus,
               triggerProps?.className
             ),
             children: [
               icon,
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm leading-4 font-medium tracking-normal text-text-default", children: label }),
-              typeof count === "number" && /* @__PURE__ */ jsx("span", { className: "shrink-0 px-1.5 py-0.5 text-sm leading-4 font-medium tracking-normal text-tone-fg tabular-nums", children: count }),
+              /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-sm sa:leading-4 sa:font-medium sa:tracking-normal sa:text-text-default", children: label }),
+              typeof count === "number" && /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:px-1.5 sa:py-0.5 sa:text-sm sa:leading-4 sa:font-medium sa:tracking-normal sa:text-tone-fg sa:tabular-nums", children: count }),
               /* @__PURE__ */ jsx(
                 NavArrowRight,
                 {
                   "aria-hidden": true,
-                  className: "transition-transform duration-(--duration-base) ease-(--ease-out) group-data-[state=open]/sidebar-group:rotate-90 motion-reduce:transition-none"
+                  className: "sa:transition-transform sa:duration-(--sa-duration-base) sa:ease-(--sa-ease-out) sa:group-data-[state=open]/sidebar-group:rotate-90 sa:motion-reduce:transition-none"
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { id: regionId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children }) })
+        /* @__PURE__ */ jsx("div", { id: regionId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { className: "sa:flex sa:flex-col sa:gap-0.5", children }) })
       ]
     }
   );
@@ -154,16 +154,16 @@ function SidebarSubItem({
       href: disabled ? void 0 : href,
       tabIndex: disabled ? -1 : void 0,
       className: cn(
-        "flex h-8 shrink-0 items-center rounded-lg pr-3 pl-[34px] text-sm font-normal text-text-muted no-underline select-none",
-        "transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-        "not-data-active:satin-hover:bg-bg-muted not-data-active:satin-hover:text-text-default",
+        "sa:flex sa:h-8 sa:shrink-0 sa:items-center sa:rounded-lg sa:pr-3 sa:pl-[34px] sa:text-sm sa:font-normal sa:text-text-muted sa:no-underline sa:select-none",
+        "sa:transition-[background-color,color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        "sa:not-data-active:satin-hover:bg-bg-muted sa:not-data-active:satin-hover:text-text-default",
         rowFocus,
-        "data-active:bg-bg-selected data-active:text-text-default",
-        "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        "sa:data-active:bg-bg-selected sa:data-active:text-text-default",
+        "sa:aria-disabled:pointer-events-none sa:aria-disabled:opacity-50",
         className
       ),
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label })
+      children: asChild ? children : /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate", children: label })
     }
   );
 }
@@ -180,7 +180,7 @@ function SidebarSubGroup({
   const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? active);
   const open = openProp ?? uncontrolled;
   const regionId = React.useId();
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-sub-group", "data-state": open ? "open" : "closed", className: cn("group/sub-group flex flex-col gap-0.5", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-sub-group", "data-state": open ? "open" : "closed", className: cn("sa:group/sub-group sa:flex sa:flex-col sa:gap-0.5", className), ...props, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -193,28 +193,26 @@ function SidebarSubGroup({
           onOpenChange?.(!open);
         },
         className: cn(
-          "flex h-8 w-full shrink-0 items-center gap-2 rounded-lg pr-3 pl-[34px] text-left text-sm font-normal text-text-muted select-none",
-          "transition-[background-color,color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-          "satin-hover:bg-bg-muted satin-hover:text-text-default data-active:text-text-default",
-          "[&_svg]:size-icon-size-sm [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]",
+          "sa:flex sa:h-8 sa:w-full sa:shrink-0 sa:items-center sa:gap-2 sa:rounded-lg sa:pr-3 sa:pl-[34px] sa:text-left sa:text-sm sa:font-normal sa:text-text-muted sa:select-none",
+          "sa:transition-[background-color,color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:satin-hover:bg-bg-muted sa:satin-hover:text-text-default sa:data-active:text-text-default",
+          "sa:[&_svg]:size-icon-size-sm sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]",
           rowFocus
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate", children: label }),
           /* @__PURE__ */ jsx(
             NavArrowRight,
             {
               "aria-hidden": true,
-              className: "text-text-muted transition-transform duration-(--duration-base) ease-(--ease-out) group-data-[state=open]/sub-group:rotate-90 motion-reduce:transition-none"
+              className: "sa:text-text-muted sa:transition-transform sa:duration-(--sa-duration-base) sa:ease-(--sa-ease-out) sa:group-data-[state=open]/sub-group:rotate-90 sa:motion-reduce:transition-none"
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { id: regionId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 [&>[data-slot=sidebar-sub-item]]:pl-[46px]", children }) })
+    /* @__PURE__ */ jsx("div", { id: regionId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { className: "sa:flex sa:flex-col sa:gap-0.5 sa:[&>[data-slot=sidebar-sub-item]]:pl-[46px]", children }) })
   ] });
 }
 
 export { Sidebar, SidebarGroup, SidebarItem, SidebarSubGroup, SidebarSubItem };
-//# sourceMappingURL=chunk-BNTPPZCK.js.map
-//# sourceMappingURL=chunk-BNTPPZCK.js.map

package/chunk-WZSLDYUU.js

@@ -0,0 +1,131 @@
+import { CloseIcon, StatusIcon } 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 as Dialog$1 } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Dialog({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  variant = "default",
+  alert,
+  footer,
+  footerStart,
+  children,
+  closeButton = true,
+  modal = true,
+  container,
+  onOpenAutoFocus,
+  className,
+  ...props
+}) {
+  const labels = useSatinLabels();
+  const position = container ? "absolute" : "fixed";
+  const hasBody = children != null || alert != null;
+  return /* @__PURE__ */ jsxs(Dialog$1.Root, { open, defaultOpen, onOpenChange, modal, children: [
+    trigger && /* @__PURE__ */ jsx(Dialog$1.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(Dialog$1.Portal, { container, children: [
+      /* @__PURE__ */ jsx(
+        Dialog$1.Overlay,
+        {
+          className: cn(
+            position,
+            "sa:inset-0 sa:z-50 sa:bg-black-a40"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: cn(position, "sa:pointer-events-none sa:inset-0 sa:z-50 sa:grid sa:grid-cols-[minmax(0,1fr)] sa:grid-rows-[minmax(0,1fr)] sa:place-items-center sa:p-4"), children: /* @__PURE__ */ jsxs(
+        Dialog$1.Content,
+        {
+          ...description ? {} : { "aria-describedby": void 0 },
+          ...props,
+          role: variant === "destructive" ? "alertdialog" : "dialog",
+          "data-slot": "dialog",
+          "data-variant": variant,
+          onOpenAutoFocus,
+          className: cn(
+            "sa:pointer-events-auto sa:relative sa:flex sa:max-h-full sa:w-[425px] sa:max-w-[min(560px,100%)] sa:min-w-[min(360px,100%)] sa:flex-col sa:overflow-clip",
+            "sa:rounded-2xl 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)]",
+            "sa:focus-visible:outline-none",
+            "sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-h-0 sa:flex-col sa:gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:shrink-0 sa:flex-col sa:gap-0.5 sa:px-4 sa:pt-4 sa:pb-2", children: [
+                /* @__PURE__ */ jsx(Dialog$1.Title, { className: "sa:pr-8 sa:text-base sa:leading-[14px] sa:font-medium sa:tracking-normal sa:text-text-default", children: title }),
+                description ? /* @__PURE__ */ jsx(Dialog$1.Description, { className: "sa:text-body sa:text-text-muted", children: description }) : null
+              ] }),
+              hasBody && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-h-0 sa:flex-col sa:gap-3 sa:overflow-y-auto sa:px-4 sa:pb-3", children: [
+                typeof children === "string" ? /* @__PURE__ */ jsx("p", { className: "sa:text-body sa:text-text-default", children }) : children,
+                alert
+              ] })
+            ] }),
+            (footer || footerStart) && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:shrink-0 sa:flex-wrap sa:items-center sa:justify-end sa:gap-3 sa:p-4", children: [
+              footerStart && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:items-center", children: footerStart }),
+              /* @__PURE__ */ jsx("div", { className: "sa:flex sa:shrink-0 sa:items-center sa:gap-2", children: footer })
+            ] }),
+            closeButton && /* @__PURE__ */ jsx(Dialog$1.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 DialogClose = Dialog$1.Close;
+var alertTint = {
+  info: "sa:bg-status-sky-bg sa:text-status-sky-fg",
+  success: "sa:bg-status-green-bg sa:text-status-green-fg",
+  warning: "sa:bg-status-amber-bg sa:text-status-amber-fg",
+  error: "sa:bg-status-red-bg sa:text-status-red-fg"
+};
+function DialogAlert({
+  intent = "info",
+  title,
+  description,
+  icon = true,
+  onDismiss,
+  className,
+  ...props
+}) {
+  const labels = useSatinLabels();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: intent === "error" || intent === "warning" ? "alert" : "status",
+      "data-slot": "dialog-alert",
+      "data-intent": intent,
+      className: cn("sa:flex sa:w-full sa:items-center sa:gap-3 sa:rounded-xl sa:px-4 sa:py-3", alertTint[intent], className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:items-center sa:gap-2.5", children: [
+          icon && /* @__PURE__ */ jsx(StatusIcon, { intent }),
+          /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col", children: [
+            /* @__PURE__ */ jsx("p", { className: "sa:text-base sa:font-medium sa:text-text-default", children: title }),
+            description ? /* @__PURE__ */ jsx("p", { className: "sa:text-body sa:text-text-muted", children: description }) : null
+          ] })
+        ] }),
+        onDismiss && /* @__PURE__ */ jsx(Button, { variant: "tertiary", iconOnly: true, "aria-label": labels.dismiss, onClick: onDismiss, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+      ]
+    }
+  );
+}
+
+export { Dialog, DialogAlert, DialogClose };

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

package/chunk-XU6JJDMZ.js

@@ -0,0 +1,117 @@
+import { Button } from './chunk-6DWLTGRQ.js';
+import { Spinner } from './chunk-AKEZCWNW.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+function ActionButton({
+  onAction,
+  state: controlled,
+  onStateChange,
+  onError,
+  minLoading = 900,
+  resetAfter = 1800,
+  trailingIcon,
+  onClick,
+  children,
+  className,
+  ...props
+}) {
+  const labels = useSatinLabels();
+  const [own, setOwn] = React.useState("idle");
+  const state = controlled ?? own;
+  const alive = React.useRef(true);
+  const reset = React.useRef(void 0);
+  const busy = React.useRef(false);
+  const [round, setRound] = React.useState(0);
+  React.useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+      clearTimeout(reset.current);
+    };
+  }, []);
+  const set = (next) => {
+    if (!alive.current) return;
+    if (controlled === void 0) setOwn(next);
+    if (next === "success") setRound((r) => r + 1);
+    onStateChange?.(next);
+  };
+  React.useEffect(() => {
+    if (state === "idle") busy.current = false;
+  }, [state]);
+  React.useEffect(() => {
+    if (controlled === "success") setRound((r) => r + 1);
+  }, [controlled]);
+  const run = async (event) => {
+    onClick?.(event);
+    if (state !== "idle" || busy.current || event.defaultPrevented) return;
+    busy.current = true;
+    set("loading");
+    const started = Date.now();
+    try {
+      await onAction?.(event);
+      await wait(Math.max(0, minLoading - (Date.now() - started)));
+      set("success");
+      if (resetAfter !== null)
+        reset.current = setTimeout(() => {
+          busy.current = false;
+          set("idle");
+        }, resetAfter);
+    } catch (error) {
+      busy.current = false;
+      set("idle");
+      if (onError) onError(error);
+      else throw error;
+    }
+  };
+  const layer = "sa:transition-opacity sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)";
+  const icon = trailingIcon === void 0 ? (
+    // Iconoir's ArrowRight, drawn here so the button needs no icon package.
+    /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M3 12H21M21 12L14 5M21 12L14 19", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) })
+  ) : trailingIcon;
+  const spinner = /* @__PURE__ */ jsx(Spinner, { size: props.size === "xs" ? "sm" : "md", label: null });
+  const check = round > 0 && /* @__PURE__ */ jsx("svg", { "data-slot": "action-button-check", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M3.33333 8.66667L6 11.3333L12.6667 4.66667",
+      pathLength: 1,
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: { strokeWidth: 1.5 }
+    }
+  ) }, round);
+  const show = (on) => cn("sa:grid sa:place-items-center", layer, !on && "sa:opacity-0");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...props,
+        "data-slot": "action-button",
+        "data-state": state,
+        "aria-busy": state === "loading" || void 0,
+        "aria-disabled": state !== "idle" || props["aria-disabled"] || void 0,
+        className: cn("sa:relative", state !== "idle" && "sa:cursor-default", className),
+        onClick: run,
+        children: icon !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          children ?? labels.submit,
+          /* @__PURE__ */ jsxs("span", { "data-slot": "action-button-icon", className: "sa:grid sa:shrink-0 sa:place-items-center sa:*:col-start-1 sa:*:row-start-1", children: [
+            /* @__PURE__ */ jsx("span", { className: show(state === "idle"), children: icon }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: show(state === "loading"), children: spinner }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: show(state === "success"), children: check })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: cn("sa:inline-flex sa:items-center", layer, state !== "idle" && "sa:opacity-0"), children: children ?? labels.submit }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("sa:absolute sa:inset-0", show(state === "loading")), children: spinner }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("sa:absolute sa:inset-0", show(state === "success")), children: check })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "sa:sr-only", "aria-live": "polite", children: state === "success" ? labels.done : "" })
+  ] });
+}
+
+export { ActionButton };

package/{chunk-BKZBWPUH.js → chunk-XWPH7C2W.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -11,13 +11,13 @@ function Kbd({ size = "sm", tone = "default", className, children, ...props }) {
       "data-slot": "kbd",
       "data-square": square || void 0,
       className: cn(
-        "inline-flex shrink-0 items-center justify-center rounded-sm border-[0.75px] font-sans text-2xs leading-none font-medium tracking-normal whitespace-nowrap",
-        size === "sm" ? "h-[18px] min-w-[18px]" : "h-5 min-w-5",
+        "sa:inline-flex sa:shrink-0 sa:items-center sa:justify-center sa:rounded-sm sa:border-[0.75px] sa:font-sans sa:text-2xs sa:leading-none sa:font-medium sa:tracking-normal sa:whitespace-nowrap",
+        size === "sm" ? "sa:h-[18px] sa:min-w-[18px]" : "sa:h-5 sa:min-w-5",
         // A single key is exactly square with nothing on the sides, so the glyph sits in the middle.
-        square ? size === "sm" ? "w-[18px] px-0" : "w-5 px-0" : size === "sm" ? "px-1" : "px-1.5",
-        tone === "default" ? "border-border-default bg-component-kbd-bg text-text-muted" : "border-action-inverse-border bg-action-inverse-bg-hover text-bg-canvas/72 dark:border-action-inverse-bg-pressed dark:bg-text-default",
+        square ? size === "sm" ? "sa:w-[18px] sa:px-0" : "sa:w-5 sa:px-0" : size === "sm" ? "sa:px-1" : "sa:px-1.5",
+        tone === "default" ? "sa:border-border-default sa:bg-component-kbd-bg sa:text-text-muted" : "sa:border-action-inverse-border sa:bg-action-inverse-bg-hover sa:text-bg-canvas/72 sa:dark:border-action-inverse-bg-pressed sa:dark:bg-text-default",
         // Glyph icons (arrows, return) take the key's colour at 10px.
-        "[&>svg]:size-2.5 [&>svg]:shrink-0",
+        "sa:[&>svg]:size-2.5 sa:[&>svg]:shrink-0",
         className
       ),
       ...props,
@@ -38,7 +38,7 @@ function keysOf(shortcut) {
 }
 function KbdGroup({ keys, size, tone, className, ...props }) {
   const list = typeof keys === "string" ? keysOf(keys) : keys;
-  return /* @__PURE__ */ jsx("span", { "data-slot": "kbd-group", className: cn("inline-flex shrink-0 items-center gap-0.5", className), ...props, children: list.map((k, i) => /* @__PURE__ */ jsx(Kbd, { size, tone, children: k }, i)) });
+  return /* @__PURE__ */ jsx("span", { "data-slot": "kbd-group", className: cn("sa:inline-flex sa:shrink-0 sa:items-center sa:gap-0.5", className), ...props, children: list.map((k, i) => /* @__PURE__ */ jsx(Kbd, { size, tone, children: k }, i)) });
 }
 var glyph = { viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 0.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
 var KbdArrowUp = () => /* @__PURE__ */ jsx("svg", { ...glyph, children: /* @__PURE__ */ jsx("path", { d: "M5.00018 8.17963L5.00018 1.82037M8.00316 4.82335L5.00018 1.82037L1.9972 4.82335" }) });
@@ -48,12 +48,10 @@ var KbdReturn = () => /* @__PURE__ */ jsxs("svg", { ...glyph, children: [
   /* @__PURE__ */ jsx("path", { d: "M2.8125 6.5625H5.3125C6.23296 6.5625 6.97917 5.81629 6.97917 4.89583V1.97917" })
 ] });
 function KbdHint({ keys, label, className, ...props }) {
-  return /* @__PURE__ */ jsxs("span", { "data-slot": "kbd-hint", className: cn("flex items-center gap-1.5", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "kbd-hint", className: cn("sa:flex sa:items-center sa:gap-1.5", className), ...props, children: [
     /* @__PURE__ */ jsx(KbdGroup, { keys }),
-    /* @__PURE__ */ jsx("span", { className: "text-xs leading-4 tracking-normal whitespace-nowrap text-text-muted", children: label })
+    /* @__PURE__ */ jsx("span", { className: "sa:text-xs sa:leading-4 sa:tracking-normal sa:whitespace-nowrap sa:text-text-muted", children: label })
   ] });
 }
 
 export { Kbd, KbdArrowDown, KbdArrowUp, KbdGroup, KbdHint, KbdReturn, keysOf };
-//# sourceMappingURL=chunk-BKZBWPUH.js.map
-//# sourceMappingURL=chunk-BKZBWPUH.js.map