@uisatin/ui 0.2.0 → 0.4.0

package/{chunk-GICKPMJU.js → chunk-YXWXSRXG.js}

@@ -1,7 +1,8 @@
-import { Progress } from './chunk-7TXHCRAG.js';
-import { FileIcon, Attachment } from './chunk-H4NU7NPO.js';
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.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';
@@ -30,7 +31,7 @@ function fileIconFor(name) {
   const e = ext(name);
   if (e === "pdf") return /* @__PURE__ */ jsx(FileIcon, { type: "pdf" });
   if (["xls", "xlsx", "csv", "numbers"].includes(e)) return /* @__PURE__ */ jsx(FileIcon, { type: "xlsx" });
-  return /* @__PURE__ */ jsx(Page, { "aria-hidden": true, className: "size-icon-size text-text-muted [stroke-width:1.875]" });
+  return /* @__PURE__ */ jsx(Page, { "aria-hidden": true, className: "sa:size-icon-size sa:text-text-muted sa:[stroke-width:1.875]" });
 }
 function FileUpload({
   files = [],
@@ -51,6 +52,7 @@ function FileUpload({
   className,
   ...props
 }) {
+  const labels = useSatinLabels();
   const inputRef = React.useRef(null);
   const descriptionId = React.useId();
   const [dragging, setDragging] = React.useState(false);
@@ -71,7 +73,7 @@ function FileUpload({
   };
   const rows = files.filter((f) => f.status !== "done");
   const done = files.filter((f) => f.status === "done");
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "file-upload", className: cn("flex w-full flex-col gap-2", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "file-upload", className: cn("sa:flex sa:w-full sa:flex-col sa:gap-2", className), ...props, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -101,16 +103,16 @@ function FileUpload({
           take(e.dataTransfer.files);
         },
         className: cn(
-          "flex flex-col items-center gap-4 rounded-2xl border border-dashed border-border-default px-6 py-8 text-center",
-          "transition-[background-color,border-color] duration-(--duration-fast) ease-(--ease-out)",
-          "data-[dragging]:border-status-brand-border data-[dragging]:bg-bg-hover",
-          "data-[disabled]:opacity-50"
+          "sa:flex sa:flex-col sa:items-center sa:gap-4 sa:rounded-2xl sa:border sa:border-dashed sa:border-border-default sa:px-6 sa:py-8 sa:text-center",
+          "sa:transition-[background-color,border-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:data-[dragging]:border-status-brand-border sa:data-[dragging]:bg-bg-hover",
+          "sa:data-[disabled]:opacity-50"
         ),
         children: [
           /* @__PURE__ */ jsx(UploadMark, { over }),
-          /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center gap-1", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-base font-medium text-text-default", children: over ? dropTitle : title }),
-            description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-sm text-text-muted", children: description })
+          /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:w-full sa:flex-col sa:items-center sa:gap-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "sa:text-base sa:font-medium sa:text-text-default", children: over ? dropTitle : title }),
+            description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "sa:text-sm sa:text-text-muted", children: description })
           ] }),
           /* @__PURE__ */ jsx(
             Button,
@@ -141,8 +143,8 @@ function FileUpload({
         ]
       }
     ),
-    rows.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", "aria-label": "Files", children: rows.map((f) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(FileUploadItem, { file: f, onCancel, onRemove }) }, f.id)) }),
-    done.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", "aria-label": "Attached files", children: done.map((f) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    rows.length > 0 && /* @__PURE__ */ jsx("ul", { className: "sa:flex sa:flex-col sa:gap-2", "aria-label": labels.files, children: rows.map((f) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(FileUploadItem, { file: f, onCancel, onRemove }) }, f.id)) }),
+    done.length > 0 && /* @__PURE__ */ jsx("ul", { className: "sa:flex sa:flex-col sa:gap-2", "aria-label": labels.attachedFiles, children: done.map((f) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
       Attachment,
       {
         name: f.name,
@@ -150,7 +152,7 @@ function FileUpload({
         icon: f.icon ?? fileIconFor(f.name),
         onRemove: onRemove ? () => onRemove(f) : void 0,
         onOpen: onOpen ? () => onOpen(f) : void 0,
-        className: "flex w-full [&_[data-attachment-main]]:flex-1 [&_[data-attachment-name]]:max-w-none"
+        className: "sa:flex sa:w-full sa:[&_[data-attachment-main]]:flex-1 sa:[&_[data-attachment-name]]:max-w-none"
       }
     ) }, f.id)) })
   ] });
@@ -168,11 +170,11 @@ function FileUploadItem({
         "data-slot": "file-upload-item",
         "data-status": "error",
         role: "alert",
-        className: cn("flex items-center gap-2 rounded-xl border border-status-red-border bg-status-red-bg py-2 pr-2 pl-3 text-sm", className),
+        className: cn("sa:flex sa:items-center sa:gap-2 sa:rounded-xl sa:border sa:border-status-red-border sa:bg-status-red-bg sa:py-2 sa:pr-2 sa:pl-3 sa:text-sm", className),
         children: [
-          /* @__PURE__ */ jsx(WarningCircle, { "aria-hidden": true, className: "size-icon-size shrink-0 text-status-red-fg [stroke-width:1.875]" }),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-text-default", children: file.name }),
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-status-red-fg", children: file.error ?? "Upload failed" }),
+          /* @__PURE__ */ jsx(WarningCircle, { "aria-hidden": true, className: "sa:size-icon-size sa:shrink-0 sa:text-status-red-fg sa:[stroke-width:1.875]" }),
+          /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:font-medium sa:text-text-default", children: file.name }),
+          /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:text-status-red-fg", children: file.error ?? "Upload failed" }),
           onRemove && /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", shape: "rounded", iconOnly: true, "aria-label": `Remove ${file.name}`, onClick: () => onRemove(file), children: /* @__PURE__ */ jsx(Xmark, { "aria-hidden": true }) })
         ]
       }
@@ -186,13 +188,13 @@ function FileUploadItem({
     {
       "data-slot": "file-upload-item",
       "data-status": "uploading",
-      className: cn("flex items-center gap-2 rounded-xl border border-border-default bg-bg-card p-2 text-sm", className),
+      className: cn("sa:flex sa:items-center sa:gap-2 sa:rounded-xl sa:border sa:border-border-default sa:bg-bg-card sa:p-2 sa:text-sm", className),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-bg-muted [&_svg]:size-icon-size", children: file.icon ?? fileIconFor(file.name) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-text-default", children: file.name }),
-            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-text-muted tabular-nums", children: meta })
+        /* @__PURE__ */ jsx("span", { className: "sa:flex sa:size-9 sa:shrink-0 sa:items-center sa:justify-center sa:rounded-lg sa:bg-bg-muted sa:[&_svg]:size-icon-size", children: file.icon ?? fileIconFor(file.name) }),
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col sa:gap-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:font-medium sa:text-text-default", children: file.name }),
+            /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:text-text-muted sa:tabular-nums", children: meta })
           ] }),
           /* @__PURE__ */ jsx(Progress, { value: known ? p : void 0, showValue: false, "aria-label": `Uploading ${file.name}` })
         ] }),
@@ -207,10 +209,10 @@ function UploadMark({ over }) {
     {
       "aria-hidden": true,
       className: cn(
-        "flex size-10 shrink-0 items-center justify-center rounded-xl transition-[background-color] duration-(--duration-fast) ease-(--ease-out)",
-        over ? "bg-bg-card" : "bg-bg-muted"
+        "sa:flex sa:size-10 sa:shrink-0 sa:items-center sa:justify-center sa:rounded-xl sa:transition-[background-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        over ? "sa:bg-bg-card" : "sa:bg-bg-muted"
       ),
-      children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", className: "text-text-subtle", children: [
+      children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", className: "sa:text-text-subtle", children: [
         /* @__PURE__ */ jsx(
           "path",
           {
@@ -235,5 +237,3 @@ function UploadMark({ over }) {
 }
 
 export { FileUpload, FileUploadItem, fileIconFor, formatBytes };
-//# sourceMappingURL=chunk-GICKPMJU.js.map
-//# sourceMappingURL=chunk-GICKPMJU.js.map

package/{chunk-2HKBZFIK.js → chunk-YY236ZSJ.js}

@@ -1,5 +1,6 @@
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Toast as Toast$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -47,12 +48,12 @@ var toast = Object.assign((title, options) => show(title, options), {
   }
 });
 var tile = {
-  neutral: "bg-status-neutral-bg text-text-default",
-  info: "bg-status-sky-bg text-status-sky-fg",
-  success: "bg-status-green-bg text-status-green-fg",
-  warning: "bg-status-amber-bg text-status-amber-fg",
+  neutral: "sa:bg-status-neutral-bg sa:text-text-default",
+  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",
   // Figma draws the error glyph in action/destructive (#DC2626), not status-red-fg.
-  error: "bg-status-red-bg text-action-destructive-bg"
+  error: "sa:bg-status-red-bg sa:text-action-destructive-bg"
 };
 function IntentIcon({ intent }) {
   if (intent === "neutral") {
@@ -73,10 +74,10 @@ function IntentIcon({ intent }) {
   ] }) }) });
 }
 var card = (intent) => cn(
-  "relative flex w-full items-center gap-2.5 overflow-clip pr-2 pl-2.5",
-  intent === "neutral" ? "py-2.5" : "pt-2.5 pb-3",
-  "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-full sa:items-center sa:gap-2.5 sa:overflow-clip sa:pr-2 sa:pl-2.5",
+  intent === "neutral" ? "sa:py-2.5" : "sa:pt-2.5 sa:pb-3",
+  "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)]"
 );
 function ToastContent({
   title,
@@ -87,13 +88,14 @@ function ToastContent({
   icon,
   onAction
 }) {
+  const labels = useSatinLabels();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    icon && /* @__PURE__ */ jsx("div", { className: cn("grid size-9 shrink-0 place-items-center rounded-md", tile[intent]), children: /* @__PURE__ */ jsx(IntentIcon, { intent }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col text-sm", children: [
-      /* @__PURE__ */ jsx(Toast$1.Title, { className: "leading-5 font-medium text-text-default", children: title }),
-      description ? /* @__PURE__ */ jsx(Toast$1.Description, { className: "leading-4 text-text-muted", children: description }) : null
+    icon && /* @__PURE__ */ jsx("div", { className: cn("sa:grid sa:size-9 sa:shrink-0 sa:place-items-center sa:rounded-md", tile[intent]), children: /* @__PURE__ */ jsx(IntentIcon, { intent }) }),
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col sa:text-sm", children: [
+      /* @__PURE__ */ jsx(Toast$1.Title, { className: "sa:leading-5 sa:font-medium sa:text-text-default", children: title }),
+      description ? /* @__PURE__ */ jsx(Toast$1.Description, { className: "sa:leading-4 sa:text-text-muted", children: description }) : null
     ] }),
-    (action || closeButton) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+    (action || closeButton) && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:shrink-0 sa:items-center sa:gap-1", children: [
       action && /* @__PURE__ */ jsx(Toast$1.Action, { asChild: true, altText: action.label, children: /* @__PURE__ */ jsx(
         Button,
         {
@@ -105,7 +107,7 @@ function ToastContent({
           children: action.label
         }
       ) }),
-      closeButton && /* @__PURE__ */ jsx(Toast$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": "Close", className: "rounded-md text-text-muted", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+      closeButton && /* @__PURE__ */ jsx(Toast$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": labels.close, className: "sa:rounded-md sa:text-text-muted", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
         "path",
         {
           d: "M3.94232 10.0582L7.00053 7M7.00053 7L10.0587 3.94179M7.00053 7L3.94232 3.94179M7.00053 7L10.0587 10.0582",
@@ -138,10 +140,10 @@ function Toast({
       duration,
       type: radixType(intent),
       className: cn(
-        "pointer-events-auto",
+        "sa:pointer-events-auto",
         card(intent),
-        "focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)] focus-visible:outline-none",
-        "data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]",
+        "sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)] sa:focus-visible:outline-none",
+        "sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]",
         className
       ),
       ...props,
@@ -154,7 +156,7 @@ var SCALE_STEP = 0.05;
 var GAP = 8;
 var FALLBACK_HEIGHT = 58;
 var OFFSCREEN = "150%";
-var ease = "var(--ease-out)";
+var ease = "var(--sa-ease-out)";
 var cardMotion = `transform ${MOTION_MS}ms ${ease}, height 150ms ${ease}`;
 var contentMotion = `opacity 250ms ${ease}`;
 function StackedToast({ record, index, y, scale, height, beyond, contentVisible, onMeasure, onForget }) {
@@ -196,10 +198,10 @@ function StackedToast({ record, index, y, scale, height, beyond, contentVisible,
       duration: duration ?? 5e3,
       type: radixType(intent),
       className: cn(
-        "absolute inset-x-0 bottom-0 origin-bottom outline-none",
-        "focus-visible:[&>div]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
-        "data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x)",
-        "data-[swipe=cancel]:transition-[translate] data-[swipe=cancel]:duration-(--duration-base) data-[swipe=cancel]:ease-(--ease-out)"
+        "sa:absolute sa:inset-x-0 sa:bottom-0 sa:origin-bottom sa:outline-none",
+        "sa:focus-visible:[&>div]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        "sa:data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) sa:data-[swipe=cancel]:translate-x-0 sa:data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x)",
+        "sa:data-[swipe=cancel]:transition-[translate] sa:data-[swipe=cancel]:duration-(--sa-duration-base) sa:data-[swipe=cancel]:ease-(--sa-ease-out)"
       ),
       style: {
         transform: `translate3d(0, ${y}px, 0) scale(${scale})`,
@@ -212,7 +214,7 @@ function StackedToast({ record, index, y, scale, height, beyond, contentVisible,
         "div",
         {
           ref: cardRef,
-          className: cn("pointer-events-auto", card(intent), "items-start"),
+          className: cn("sa:pointer-events-auto", card(intent), "sa:items-start"),
           style: {
             transform: inPlace ? "translate3d(0, 0, 0)" : `translate3d(0, ${OFFSCREEN}, 0)`,
             height,
@@ -223,7 +225,7 @@ function StackedToast({ record, index, y, scale, height, beyond, contentVisible,
             "div",
             {
               ref: measured,
-              className: "flex w-full min-w-0 items-center gap-2.5",
+              className: "sa:flex sa:w-full sa:min-w-0 sa:items-center sa:gap-2.5",
               style: { opacity: contentVisible ? 1 : 0, transition: contentMotion },
               "aria-hidden": !contentVisible || void 0,
               inert: !contentVisible || void 0,
@@ -324,9 +326,9 @@ function Toaster({ className, limit = 3, children }) {
       Toast$1.Viewport,
       {
         ref: viewportRef,
-        style: { height, transition: `height ${MOTION_MS}ms var(--ease-out)` },
+        style: { height, transition: `height ${MOTION_MS}ms var(--sa-ease-out)` },
         className: cn(
-          "fixed right-4 bottom-4 z-[100] m-0 w-[397px] max-w-[calc(100%-32px)] list-none p-0 outline-none",
+          "sa:fixed sa:right-4 sa:bottom-4 sa:z-[100] sa:m-0 sa:w-[397px] sa:max-w-[calc(100%-32px)] sa:list-none sa:p-0 sa:outline-none",
           className
         )
       }
@@ -335,5 +337,3 @@ function Toaster({ className, limit = 3, children }) {
 }
 
 export { Toast, Toaster, toast };
-//# sourceMappingURL=chunk-2HKBZFIK.js.map
-//# sourceMappingURL=chunk-2HKBZFIK.js.map

package/{chunk-YX5VNRJX.js → chunk-YYFAZQ25.js}

@@ -20,5 +20,3 @@ var bannerMesh = {
 };
 
 export { bannerMesh };
-//# sourceMappingURL=chunk-YX5VNRJX.js.map
-//# sourceMappingURL=chunk-YX5VNRJX.js.map

package/{chunk-Y5AYU7PK.js → chunk-ZHFIWDGF.js}

@@ -40,5 +40,3 @@ function Floating({ anchor, side = "top", sideOffset = 8, collisionPadding = 8,
 }
 
 export { Floating };
-//# sourceMappingURL=chunk-Y5AYU7PK.js.map
-//# sourceMappingURL=chunk-Y5AYU7PK.js.map

package/components/accordion.js

@@ -1,4 +1,2 @@
-'use client';export { Accordion, AccordionItem } from '../chunk-GQA24FYG.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=accordion.js.map
-//# sourceMappingURL=accordion.js.map
+'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.d.ts

@@ -22,6 +22,7 @@ import * as React from 'react';
  */
 export type Glimmer = 'color' | 'neutral';
 /** The tetris mark. Memoised: its 125 animated elements never re-render with their parent. */
+/** @internal Shared by Satin's own components; not part of the public API and may change in any release. */
 export declare const TetrisMark: React.MemoExoticComponent<({ glimmer, className }: {
     glimmer?: Glimmer;
     className?: string;
@@ -45,6 +46,7 @@ export declare function ShimmerLabel({ children, className }: {
     className?: string;
 }): React.JSX.Element;
 /** The flappy bird fitted into a `size` square; `run` plays the run in place. */
+/** @internal Shared by Satin's own components; not part of the public API and may change in any release. */
 export declare function FlappySprite({ size, run, className }: {
     size?: number;
     run?: boolean;

package/components/agent-loading.js

@@ -1,4 +1,2 @@
-'use client';export { AgentLoading, FlappySprite, ShimmerLabel, TetrisLabel, TetrisMark, TetrisStill } from '../chunk-KNUWZNFV.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=agent-loading.js.map
-//# sourceMappingURL=agent-loading.js.map
+'use client';export { AgentLoading, FlappySprite, ShimmerLabel, TetrisLabel, TetrisMark, TetrisStill } from '../chunk-R4KPFBMK.js';
+import '../chunk-EHEXE2UV.js';

package/components/agent-picker.js

@@ -1,5 +1,5 @@
-'use client';export { AgentAvatar, AgentMenuItem, AgentPicker, AgentPickerRow } from '../chunk-VAGIAREV.js';
-import '../chunk-HNQUX43Z.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=agent-picker.js.map
-//# sourceMappingURL=agent-picker.js.map
+'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';

package/components/agent-suggestion.js

@@ -1,6 +1,5 @@
-'use client';export { AgentSuggestion, AgentSuggestionChanges, AgentSuggestionDiff, AgentSuggestionMetric, AgentSuggestionQuote } from '../chunk-MR3JDI7E.js';
-import '../chunk-7TXHCRAG.js';
-import '../chunk-O7F3CIDV.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=agent-suggestion.js.map
-//# sourceMappingURL=agent-suggestion.js.map
+'use client';export { AgentSuggestion, AgentSuggestionChanges, AgentSuggestionDiff, AgentSuggestionMetric, AgentSuggestionQuote } from '../chunk-T7P3OEBP.js';
+import '../chunk-LKSFTNPF.js';
+import '../chunk-7NV53EL5.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/alert.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+/**
+ * Alert: a message that stays on the page until it's dealt with (a toast is for what just
+ * happened and goes away; a banner promotes). Built on the uiKit `Alert` (475:27871) that
+ * DialogAlert draws inside dialogs, for anywhere on a page: above a form, at the top of a
+ * settings section, in an empty table.
+ *
+ * - `intent`: neutral, info, success, warning or error, the status colours from the theme.
+ * - `variant`: `soft` (default) fills it with the status background; `outline` is a card
+ *   surface with a border, for an alert among other cards, where only the icon carries colour.
+ * - A 16px status icon on the first line (`icon={false}` hides it, or pass your own), a 14px
+ *   medium title and a 13px muted description; either can be left out.
+ * - `action` holds a Button or a Link: on the right when there's only a title, under the
+ *   description when there is one. `onDismiss` adds the close button.
+ * - Errors and warnings are `role="alert"` (read out when they appear), the rest `role="status"`.
+ */
+export type AlertIntent = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+export interface AlertProps extends Omit<React.ComponentProps<'div'>, 'title'> {
+    intent?: AlertIntent;
+    variant?: 'soft' | 'outline';
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** `false` hides the status icon; a node replaces it. */
+    icon?: boolean | React.ReactNode;
+    /** A Button or Link, or a few in a fragment. */
+    action?: React.ReactNode;
+    /** Shows the close button; called when it is pressed. */
+    onDismiss?: () => void;
+}
+export declare function Alert({ intent, variant, title, description, icon, action, onDismiss, className, children, ...props }: AlertProps): React.JSX.Element;
+/** @internal The status glyphs from Figma (16px, 1.25 stroke), drawn in currentColor. Neutral uses the info glyph. */
+export declare function StatusIcon({ intent }: {
+    intent: AlertIntent;
+}): React.JSX.Element;
+/** The X from Figma's close button (`icon` 16px, 1.25 stroke). */
+/** @internal Shared by Satin's own components; not part of the public API and may change in any release. */
+export declare function CloseIcon(): React.JSX.Element;

package/components/alert.js

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

package/components/announcement-bar.js

@@ -1,7 +1,7 @@
-'use client';export { AnnouncementBar } from '../chunk-D7RZNTFC.js';
-import '../chunk-6QMSWITQ.js';
-import '../chunk-YX5VNRJX.js';
-import '../chunk-HNQUX43Z.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=announcement-bar.js.map
-//# sourceMappingURL=announcement-bar.js.map
+'use client';export { AnnouncementBar } from '../chunk-LAOE6Y57.js';
+import '../chunk-HZV7EXGU.js';
+import '../chunk-YYFAZQ25.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/attachment.js

@@ -1,5 +1,5 @@
-'use client';export { Attachment, AttachmentGroup, AttachmentPreview, AttachmentPreviewPager, AttachmentPreviewSheets, FileIcon } from '../chunk-H4NU7NPO.js';
-import '../chunk-HNQUX43Z.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=attachment.js.map
-//# sourceMappingURL=attachment.js.map
+'use client';export { Attachment, AttachmentGroup, AttachmentPreview, AttachmentPreviewPager, AttachmentPreviewSheets, FileIcon } from '../chunk-R3DTMBDT.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/avatar.js

@@ -1,6 +1,4 @@
-'use client';export { AVATAR_TOOLTIP_DELAY, Avatar, AvatarGroup, avatarVariants } from '../chunk-MYEZXZZC.js';
-import '../chunk-B6V4VSGH.js';
-import '../chunk-BKZBWPUH.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=avatar.js.map
-//# sourceMappingURL=avatar.js.map
+'use client';export { AVATAR_TOOLTIP_DELAY, Avatar, AvatarGroup, avatarVariants } from '../chunk-TOY6YPTG.js';
+import '../chunk-KDU7AT2T.js';
+import '../chunk-XWPH7C2W.js';
+import '../chunk-EHEXE2UV.js';

package/components/badge.js

@@ -1,4 +1,2 @@
-'use client';export { Badge, badgeVariants } from '../chunk-O7F3CIDV.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=badge.js.map
-//# sourceMappingURL=badge.js.map
+'use client';export { Badge, badgeVariants } from '../chunk-7NV53EL5.js';
+import '../chunk-EHEXE2UV.js';

package/components/banner-mesh.js

@@ -1,3 +1 @@
-'use client';export { bannerMesh } from '../chunk-YX5VNRJX.js';
-//# sourceMappingURL=banner-mesh.js.map
-//# sourceMappingURL=banner-mesh.js.map
+'use client';export { bannerMesh } from '../chunk-YYFAZQ25.js';

package/components/banner.js

@@ -1,6 +1,6 @@
-'use client';export { Banner, bannerVariants } from '../chunk-6QMSWITQ.js';
-export { bannerMesh } from '../chunk-YX5VNRJX.js';
-import '../chunk-HNQUX43Z.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=banner.js.map
-//# sourceMappingURL=banner.js.map
+'use client';export { Banner, bannerVariants } from '../chunk-HZV7EXGU.js';
+export { bannerMesh } from '../chunk-YYFAZQ25.js';
+import '../chunk-6DWLTGRQ.js';
+import '../chunk-AKEZCWNW.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/bar-chart.js

@@ -1,11 +1,10 @@
-'use client';export { BarCard, niceMax } from '../chunk-DO3TBNSC.js';
-import '../chunk-YPJYW624.js';
-import '../chunk-Y5AYU7PK.js';
-import '../chunk-72OCFAPT.js';
-import '../chunk-UBNHSZSE.js';
-import '../chunk-3DINAQLL.js';
-import '../chunk-BKZBWPUH.js';
-import '../chunk-O7F3CIDV.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=bar-chart.js.map
-//# sourceMappingURL=bar-chart.js.map
+'use client';export { BarCard, niceMax } from '../chunk-INJWE2LD.js';
+import '../chunk-LI5VYDLN.js';
+import '../chunk-ZHFIWDGF.js';
+import '../chunk-EQAFDIPE.js';
+import '../chunk-KITXKIYW.js';
+import '../chunk-P36KBUYD.js';
+import '../chunk-XWPH7C2W.js';
+import '../chunk-7NV53EL5.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/breadcrumb.js

@@ -1,6 +1,5 @@
-'use client';export { Breadcrumb } from '../chunk-HL42K2NH.js';
-import '../chunk-3DINAQLL.js';
-import '../chunk-BKZBWPUH.js';
-import '../chunk-H63FYCMY.js';
-//# sourceMappingURL=breadcrumb.js.map
-//# sourceMappingURL=breadcrumb.js.map
+'use client';export { Breadcrumb } from '../chunk-Q7KVC5B4.js';
+import '../chunk-P36KBUYD.js';
+import '../chunk-XWPH7C2W.js';
+import '../chunk-NTSU44FY.js';
+import '../chunk-EHEXE2UV.js';

package/components/button-group.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { type ButtonDefaults } from './button.js';
+/**
+ * Buttons that belong together: a toolbar, Prev / Next, a set of views, the two halves of a
+ * SplitButton.
+ *
+ * `attached` (the default) joins them into one block: the inner corners go square, the buttons
+ * touch, and the only line between two of them is the later one's 1px leading border (the
+ * outline colour on secondary). Each button's outer ring and shadow are clipped on the sides it
+ * shares, so they run unbroken along the top and bottom of the block, with no notch at a seam. The button under the
+ * pointer or with focus comes to the front, so its ring and focus ring are never cut by a
+ * neighbour. `attached={false}` keeps every button whole, 8px apart (4px at xs), for a looser
+ * toolbar; put a `ButtonGroupSeparator` between sets there.
+ *
+ * `variant`, `size` and `shape` are defaults for every Button inside (a button's own prop wins),
+ * so a group is set once instead of on each button. The group is `role="group"`: give it an
+ * `aria-label` that says what the buttons are for ("Text alignment").
+ */
+export interface ButtonGroupProps extends React.ComponentProps<'div'>, ButtonDefaults {
+    orientation?: 'horizontal' | 'vertical';
+    /** Join the buttons into one block. */
+    attached?: boolean;
+}
+export declare function ButtonGroup({ orientation, attached, variant, size, shape, className, children, ...props }: ButtonGroupProps): React.JSX.Element;
+/** A thin rule between sets of buttons in a loose (`attached={false}`) group or a toolbar. */
+export declare function ButtonGroupSeparator({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;

package/components/button-group.js

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

package/components/button.d.ts

@@ -27,6 +27,18 @@ declare const buttonVariants: (props?: ({
 export interface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
     /** Render the child element (a link, say) with the button's styles instead of a `<button>`. */
     asChild?: boolean;
+    /**
+     * Busy: a Spinner takes the middle and the label and icons turn invisible but keep their room,
+     * so the button doesn't change width. Clicks (and Enter in a form) do nothing; the button
+     * keeps its focus and looks, with `aria-busy` and `aria-disabled` for screen readers.
+     */
+    loading?: boolean;
 }
-export declare function Button({ className, variant, size, shape, iconOnly, asChild, type, ...props }: ButtonProps): React.JSX.Element;
+/**
+ * What a ButtonGroup hands its buttons: the variant, size and shape they take unless they set
+ * their own. Lives here so Button reads it without importing the group.
+ */
+export type ButtonDefaults = Pick<VariantProps<typeof buttonVariants>, 'variant' | 'size' | 'shape'>;
+export declare const ButtonDefaultsContext: React.Context<ButtonDefaults | null>;
+export declare function Button({ className, variant, size, shape, iconOnly, asChild, loading, type, onClick, children, 'aria-disabled': ariaDisabled, ...props }: ButtonProps): React.JSX.Element;
 export { buttonVariants };