@uisatin/ui 0.3.0 → 0.4.0

package/{chunk-OVKPPXK5.js → chunk-PP46SY7M.js}

@@ -1,5 +1,5 @@
-import { useFieldChrome, FieldChrome } from './chunk-UCCNXGLG.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { useFieldChrome, FieldChrome } from './chunk-EQAFDIPE.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { CheckCircle } from 'iconoir-react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/{chunk-FB5HTCO2.js → chunk-PTK4QAOQ.js}

@@ -1,7 +1,7 @@
-import { Input } from './chunk-OURZQM27.js';
-import { TooltipBubble } from './chunk-GMETYACH.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { Input } from './chunk-L5PPN42A.js';
+import { TooltipBubble } from './chunk-KDU7AT2T.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Slider as Slider$1 } from 'radix-ui';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/{chunk-IKO3GQFE.js → chunk-Q7KVC5B4.js}

@@ -1,6 +1,6 @@
-import { DropdownMenu, DropdownMenuItem } from './chunk-BR2B4OIT.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { DropdownMenu, DropdownMenuItem } from './chunk-P36KBUYD.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { MoreHoriz, NavArrowRight } from 'iconoir-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/{chunk-UUCVRIVP.js → chunk-R3DTMBDT.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 'react';
 import { HoverCard } from 'radix-ui';
 import { Xmark, ArrowUpRight, NavArrowUp, NavArrowDown } from 'iconoir-react';

package/{chunk-UGIVCXGN.js → chunk-R4KPFBMK.js}

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

package/{chunk-XH56JGYC.js → chunk-R5TQ3HNB.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-O46O6LFQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import 'react';
 import { Toggle as Toggle$1 } from 'radix-ui';
 import { cva } from 'class-variance-authority';

package/chunk-RFSPJECL.js

@@ -0,0 +1,84 @@
+import { useFormContext, RequiredMark, FieldDescription, FormContext, FieldError } from './chunk-KITXKIYW.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var columnClass = { 1: "", 2: "sa:sm:grid-cols-2", 3: "sa:sm:grid-cols-3" };
+function FieldGroup({
+  legend,
+  description,
+  error: ownError,
+  name,
+  required,
+  variant = "fields",
+  columns = 1,
+  layout: ownLayout,
+  disabled: ownDisabled,
+  className,
+  children,
+  ...props
+}) {
+  const form = useFormContext();
+  const id = React.useId();
+  const error = ownError ?? (name ? form?.errors?.[name] : void 0);
+  const layout = ownLayout ?? form?.layout ?? "vertical";
+  const disabled = ownDisabled ?? form?.disabled;
+  const invalid = Boolean(error);
+  const horizontal = layout === "horizontal";
+  const choices = variant === "choices";
+  const descriptionId = description ? `${id}-description` : void 0;
+  const errorId = invalid ? `${id}-error` : void 0;
+  const inner = React.useMemo(
+    () => ({ ...form, layout: "vertical", disabled }),
+    [form, disabled]
+  );
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      "data-slot": "field-group",
+      "data-variant": variant,
+      "data-layout": layout,
+      "data-invalid": invalid || void 0,
+      disabled,
+      "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || void 0,
+      className: cn("sa:m-0 sa:min-w-0 sa:border-0 sa:p-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "legend",
+          {
+            className: cn(
+              "sa:float-left sa:p-0 sa:text-text-default",
+              horizontal ? "sa:w-40" : "sa:w-full",
+              choices ? "sa:text-sm sa:leading-[18px] sa:font-medium" : "sa:text-base sa:font-medium",
+              disabled && "sa:opacity-50"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:items-start sa:gap-0.5", children: [
+                legend,
+                required && /* @__PURE__ */ jsx(RequiredMark, {})
+              ] }),
+              description && /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, className: "sa:mt-1 sa:font-normal", children: description })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "sa:grid sa:min-w-0",
+              horizontal ? "sa:ml-46" : cn("sa:clear-both", choices ? "sa:pt-2" : "sa:pt-4"),
+              choices ? "sa:gap-3" : cn("sa:gap-5", columnClass[columns])
+            ),
+            children: [
+              /* @__PURE__ */ jsx(FormContext.Provider, { value: inner, children }),
+              invalid && /* @__PURE__ */ jsx(FieldError, { id: errorId, className: cn(columns > 1 && "sa:sm:col-span-full"), children: error })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { FieldGroup };

package/chunk-RPL6FRVX.js

@@ -0,0 +1,88 @@
+import { Button } from './chunk-6DWLTGRQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var soft = {
+  neutral: "sa:bg-status-neutral-bg",
+  info: "sa:bg-status-sky-bg",
+  success: "sa:bg-status-green-bg",
+  warning: "sa:bg-status-amber-bg",
+  error: "sa:bg-status-red-bg"
+};
+var iconColor = {
+  neutral: "sa:text-status-neutral-fg",
+  info: "sa:text-status-sky-fg",
+  success: "sa:text-status-green-fg",
+  warning: "sa:text-status-amber-fg",
+  error: "sa:text-status-red-fg"
+};
+function Alert({
+  intent = "neutral",
+  variant = "soft",
+  title,
+  description,
+  icon = true,
+  action,
+  onDismiss,
+  className,
+  children,
+  ...props
+}) {
+  const labels = useSatinLabels();
+  const body = description ?? children;
+  const actionBelow = action && body;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: intent === "error" || intent === "warning" ? "alert" : "status",
+      "data-slot": "alert",
+      "data-intent": intent,
+      "data-variant": variant,
+      className: cn(
+        "sa:flex sa:w-full sa:items-start sa:gap-2.5 sa:rounded-xl sa:px-4 sa:py-3",
+        variant === "soft" ? soft[intent] : "sa:border sa:border-border-default sa:bg-bg-card sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+        className
+      ),
+      ...props,
+      children: [
+        icon !== false && // 16px on the middle of the title's 20px line.
+        /* @__PURE__ */ jsx("span", { className: cn("sa:mt-0.5 sa:grid sa:shrink-0 sa:place-items-center sa:[&_svg]:size-4", iconColor[intent]), children: icon === true ? /* @__PURE__ */ jsx(StatusIcon, { intent }) : icon }),
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "sa:text-base sa:leading-5 sa:font-medium sa:text-text-default", children: title }),
+          body && /* @__PURE__ */ jsx("div", { className: "sa:text-body sa:text-text-muted", children: body }),
+          actionBelow && /* @__PURE__ */ jsx("div", { className: "sa:mt-2.5 sa:flex sa:flex-wrap sa:items-center sa:gap-2", children: action })
+        ] }),
+        action && !actionBelow && /* @__PURE__ */ jsx("div", { className: "sa:-my-1 sa:flex sa:shrink-0 sa:items-center sa:gap-2", children: action }),
+        onDismiss && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": labels.dismiss, onClick: onDismiss, className: "sa:-my-0.5 sa:-mr-1.5", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+      ]
+    }
+  );
+}
+function StatusIcon({ intent }) {
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "sa:shrink-0", children: /* @__PURE__ */ jsx("g", { stroke: "currentColor", style: { strokeWidth: 1.25 }, strokeLinecap: "round", strokeLinejoin: "round", children: intent === "success" ? /* @__PURE__ */ jsx("path", { d: "M3.33333 8.66667L6 11.3333L12.6667 4.66667" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    intent === "info" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M8 7.70494V10.6557" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 5.35022L8.0059 5.34366" })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M8 5.34428V8.29506" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 10.6563L8.0059 10.6498" })
+    ] }),
+    /* @__PURE__ */ jsx("path", { d: "M8 13.9015C11.2593 13.9015 13.9015 11.2593 13.9015 8C13.9015 4.74066 11.2593 2.09845 8 2.09845C4.74066 2.09845 2.09845 4.74066 2.09845 8C2.09845 11.2593 4.74066 13.9015 8 13.9015Z" })
+  ] }) }) });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", 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"
+    }
+  ) });
+}
+
+export { Alert, CloseIcon, StatusIcon };

package/{chunk-SZJIVBOD.js → chunk-STYOBAC7.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 { Clock, DoubleCheck, ThumbsUp, ThumbsDown, Copy, Link } from 'iconoir-react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';

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

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

package/{chunk-7Q76HLRQ.js → chunk-T7P3OEBP.js}

@@ -1,7 +1,7 @@
-import { Progress } from './chunk-M2HEVFQ3.js';
-import { Badge } from './chunk-XUOSJMEJ.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { Progress } from './chunk-LKSFTNPF.js';
+import { Badge } from './chunk-7NV53EL5.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { ArrowRight } from 'iconoir-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/{chunk-TT2N5752.js → chunk-TB3ZRV3Y.js}

@@ -1,6 +1,6 @@
 import { useSlidingIndicator, SLIDE_MS } from './chunk-XETMIETJ.js';
-import { Button } from './chunk-T6L32XXH.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { NavArrowLeft, NavArrowRight } from 'iconoir-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/{chunk-BN7FDKCJ.js → chunk-TOY6YPTG.js}

@@ -1,5 +1,5 @@
-import { Tooltip, TooltipBubble } from './chunk-GMETYACH.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { Tooltip, TooltipBubble } from './chunk-KDU7AT2T.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { cva } from 'class-variance-authority';

package/{chunk-PHNR6ZQ7.js → chunk-U6X6ODDJ.js}

@@ -1,5 +1,5 @@
-import { Button } from './chunk-T6L32XXH.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { Xmark } from 'iconoir-react';

package/{chunk-6VKV36OK.js → chunk-UAJ6M34K.js}

@@ -1,7 +1,7 @@
-import { useFieldChrome, FieldChrome, Select } from './chunk-UCCNXGLG.js';
-import { Button } from './chunk-T6L32XXH.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { useFieldChrome, FieldChrome, Select } from './chunk-EQAFDIPE.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 { Popover } from 'radix-ui';
 import { Calendar as Calendar$1, NavArrowDown, NavArrowLeft, NavArrowRight } from 'iconoir-react';

package/{chunk-PD6YPFYN.js → chunk-W2EH6RY5.js}

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

package/{chunk-X2GNMNZQ.js → chunk-W2QQQWNE.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-O46O6LFQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Checkbox as Checkbox$1 } from 'radix-ui';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -40,7 +40,7 @@ function Checkbox({ className, label, description, placement = "left", id, ...pr
         className: cn("sa:flex sa:cursor-pointer sa:items-start sa:gap-2 sa:has-disabled:cursor-not-allowed sa:has-data-disabled:cursor-not-allowed sa:[&>:first-child]:mt-0.5", placement === "right" && "sa:flex-row-reverse sa:justify-between"),
         children: [
           box,
-          /* @__PURE__ */ jsxs("div", { className: "sa:grid sa:gap-0.5 sa:text-base", children: [
+          /* @__PURE__ */ jsxs("div", { className: "sa:grid sa:gap-0.5 sa:text-base sa:peer-disabled:*:text-text-subtle", children: [
             label && /* @__PURE__ */ jsx("span", { id: labelId, className: "sa:block sa:leading-5 sa:font-medium sa:text-text-default", children: label }),
             description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "sa:block sa:leading-5 sa:text-text-muted", children: description })
           ] })

package/{chunk-JCXI7VQL.js → chunk-WALANB3V.js}

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

package/{chunk-NL574STL.js → chunk-WCUR44O6.js}

@@ -1,5 +1,5 @@
-import { FlappySprite, TetrisStill } from './chunk-UGIVCXGN.js';
-import { cn } from './chunk-O46O6LFQ.js';
+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';

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

@@ -1,4 +1,4 @@
-import { cn } from './chunk-O46O6LFQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Slot, Tooltip, Collapsible } from 'radix-ui';
 import { NavArrowRight } from 'iconoir-react';

package/{chunk-AIMQNLPY.js → chunk-WZSLDYUU.js}

@@ -1,22 +1,11 @@
-import { Button } from './chunk-T6L32XXH.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.js';
+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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-function CloseIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", 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 Dialog({
   open,
   defaultOpen,
@@ -107,18 +96,6 @@ var alertTint = {
   warning: "sa:bg-status-amber-bg sa:text-status-amber-fg",
   error: "sa:bg-status-red-bg sa:text-status-red-fg"
 };
-function StatusIcon({ intent }) {
-  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "sa:shrink-0", children: /* @__PURE__ */ jsx("g", { stroke: "currentColor", style: { strokeWidth: 1.25 }, strokeLinecap: "round", strokeLinejoin: "round", children: intent === "success" ? /* @__PURE__ */ jsx("path", { d: "M3.33333 8.66667L6 11.3333L12.6667 4.66667" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    intent === "info" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("path", { d: "M8 7.70494V10.6557" }),
-      /* @__PURE__ */ jsx("path", { d: "M8 5.35022L8.0059 5.34366" })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("path", { d: "M8 5.34428V8.29506" }),
-      /* @__PURE__ */ jsx("path", { d: "M8 10.6563L8.0059 10.6498" })
-    ] }),
-    /* @__PURE__ */ jsx("path", { d: "M8 13.9015C11.2593 13.9015 13.9015 11.2593 13.9015 8C13.9015 4.74066 11.2593 2.09845 8 2.09845C4.74066 2.09845 2.09845 4.74066 2.09845 8C2.09845 11.2593 4.74066 13.9015 8 13.9015Z" })
-  ] }) }) });
-}
 function DialogAlert({
   intent = "info",
   title,
@@ -151,4 +128,4 @@ function DialogAlert({
   );
 }
 
-export { CloseIcon, Dialog, DialogAlert, DialogClose, StatusIcon };
+export { Dialog, DialogAlert, DialogClose };

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-57QEOCDZ.js → chunk-XWPH7C2W.js}

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

package/{chunk-73Z7NMQQ.js → chunk-YXWXSRXG.js}

@@ -1,8 +1,8 @@
-import { FileIcon, Attachment } from './chunk-UUCVRIVP.js';
-import { Progress } from './chunk-M2HEVFQ3.js';
-import { Button } from './chunk-T6L32XXH.js';
-import { useSatinLabels } from './chunk-SSOFFQ5T.js';
-import { cn } from './chunk-O46O6LFQ.js';
+import { FileIcon, Attachment } from './chunk-R3DTMBDT.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { Progress } from './chunk-LKSFTNPF.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Page, WarningCircle, Xmark } from 'iconoir-react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/{chunk-CGOH5IYX.js → chunk-YY236ZSJ.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 { Toast as Toast$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/components/accordion.js

@@ -1,2 +1,2 @@
-'use client';export { Accordion, AccordionItem } from '../chunk-GI2SMFZL.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { Accordion, AccordionItem } from '../chunk-6Y6CY2DP.js';
+import '../chunk-EHEXE2UV.js';

package/components/action-button.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type ButtonProps } from './button.js';
+/**
+ * ActionButton: a Button that runs something and shows how it went, in place. Three states:
+ *
+ * 1. idle: the label ("Submit" by default) with an arrow on the right;
+ * 2. loading: from the click until `onAction`'s promise settles (at least `minLoading`, so a
+ *    fast answer still reads as work), a Spinner in the arrow's place;
+ * 3. success: in the same place, a checkmark that draws itself in, held for `resetAfter` ms,
+ *    then the arrow comes back.
+ *
+ * The label stays as it is; only the icon slot changes, its three layers stacked on one 16px
+ * cell and cross-fading (150ms), so the button never changes width. With `trailingIcon={null}`
+ * there is no slot: the spinner and checkmark take the middle and the label keeps its room. If the promise rejects, the button goes straight back to idle and the
+ * error is the app's to show (an Alert, a toast). While busy or done, clicks do nothing; focus
+ * stays on the button and screen readers hear `aria-busy`, then "Done" (`done` in SatinLabels).
+ *
+ * Pass `state` to drive it yourself (a form library's submitting flag, a server push) instead.
+ */
+export type ActionButtonState = 'idle' | 'loading' | 'success';
+export interface ActionButtonProps extends Omit<ButtonProps, 'loading' | 'onClick' | 'iconOnly' | 'asChild'> {
+    /** Runs on click. The spinner stays until its promise settles. */
+    onAction?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<unknown> | unknown;
+    /** Drive the state from outside instead. */
+    state?: ActionButtonState;
+    onStateChange?: (state: ActionButtonState) => void;
+    /** Shortest time the spinner shows, in ms. */
+    minLoading?: number;
+    /** How long the checkmark stays before the button is ready again, in ms; `null` keeps it. */
+    resetAfter?: number | null;
+    /** Called when `onAction` rejects; without it the error is rethrown. */
+    onError?: (error: unknown) => void;
+    /** The icon after the label; `null` for none. Defaults to an arrow. */
+    trailingIcon?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export declare function ActionButton({ onAction, state: controlled, onStateChange, onError, minLoading, resetAfter, trailingIcon, onClick, children, className, ...props }: ActionButtonProps): React.JSX.Element;

package/components/action-button.js

@@ -0,0 +1,5 @@
+'use client';export { ActionButton } from '../chunk-XU6JJDMZ.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/agent-loading.js

@@ -1,2 +1,2 @@
-'use client';export { AgentLoading, FlappySprite, ShimmerLabel, TetrisLabel, TetrisMark, TetrisStill } from '../chunk-UGIVCXGN.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { AgentLoading, FlappySprite, ShimmerLabel, TetrisLabel, TetrisMark, TetrisStill } from '../chunk-R4KPFBMK.js';
+import '../chunk-EHEXE2UV.js';

package/components/agent-picker.js

@@ -1,4 +1,5 @@
-'use client';export { AgentAvatar, AgentMenuItem, AgentPicker, AgentPickerRow } from '../chunk-W472DBMT.js';
-import '../chunk-T6L32XXH.js';
-import '../chunk-SSOFFQ5T.js';
-import '../chunk-O46O6LFQ.js';
+'use client';export { AgentAvatar, AgentMenuItem, AgentPicker, AgentPickerRow } from '../chunk-DMZW4LGU.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';