@sableui/react 0.13.2 → 0.14.0

package/dist/components/checkbox-card/checkbox-card.js

@@ -2,6 +2,7 @@
 import { Checkbox as Base } from "@base-ui/react/checkbox";
 import { CheckboxGroup as BaseGroup } from "@base-ui/react/checkbox-group";
 import { cn } from "../../lib/cn.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
 import {
   CHECK_BOX,
   SELECTION_CARD_GLYPH,
@@ -52,6 +53,7 @@ function CheckboxCard({
   description,
   icon,
   tone = "neutral",
+  motion,
   ...props
 }) {
   const t = checkboxCardToneClasses[tone];
@@ -59,6 +61,7 @@ function CheckboxCard({
   return /* @__PURE__ */ jsxs(
     Base.Root,
     {
+      "data-motion": motionAttribute(motion),
       className: cn(
         SELECTION_CARD_SHELL,
         icon != null ? SELECTION_CARD_LAYOUT.tile : SELECTION_CARD_LAYOUT.row,

package/dist/components/checkbox-card/checkbox-card.meta.js

@@ -92,6 +92,12 @@ var checkboxCardMeta = {
       name: "checked / onCheckedChange / defaultChecked / disabled",
       type: "Base UI Checkbox.Root props",
       description: "Standard checkbox state. Without a group-owned value, each card is independent \u2014 drive checked/onCheckedChange per item for multi-select."
+    },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "How much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps feedback and drops the flourish, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting. Under `subtle` the tick fades in instead of drawing itself."
     }
   ],
   subcomponents: [
@@ -124,6 +130,32 @@ var checkboxCardMeta = {
     "tone-warning",
     "tone-warning-foreground"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It arrives with the form it belongs to. Animating each box in turns a settings list into a title sequence."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Box",
+      why: "The box fills with the primary colour as it is checked; easing the fill keeps the mark and the box changing as one event rather than two frames apart."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-tick",
+      part: "Mark",
+      why: "The check draws itself in from its leading stroke, so checking reads as the box being ticked rather than a glyph appearing. The dash wipes the same way. Unchecking only fades, so clearing a list is quick; under `subtle` checking fades too."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A checkbox commits instantly. A slow write belongs to the surrounding form's pending state, not the control."
+    }
+  ],
   a11y: [
     "Base UI provides the checkbox role, aria-checked, hidden native input, keyboard toggle, and data-[checked]/data-disabled state.",
     "The whole card is the hit target; focus draws a 2px outline outside the card (not a ring, so the checked tone ring survives focus); Space toggles the focused card.",

package/dist/components/code-block/code-block.js

@@ -7,6 +7,15 @@ import { Button } from "../button/button.js";
 import { cn } from "../../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var CodeHighlightContext = createContext(null);
+function CopyGlyph({ copied }) {
+  return /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "motion-icon-swap", children: [
+    /* @__PURE__ */ jsx("span", { "data-active": !copied, className: "inline-flex", children: /* @__PURE__ */ jsx(Icon, { name: "copy" }) }),
+    /* @__PURE__ */ jsx("span", { "data-active": copied, className: "inline-flex", children: /* @__PURE__ */ jsx(Icon, { name: "check" }) })
+  ] });
+}
+function CopiedStatus({ copied }) {
+  return /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: copied ? "Copied" : "" });
+}
 function CodeHighlightProvider({ highlight, children }) {
   return /* @__PURE__ */ jsx(CodeHighlightContext.Provider, { value: highlight, children });
 }
@@ -39,7 +48,8 @@ function CodeBlock({
             ] }),
             code
           ] }),
-          showCopy ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy command", onClick: copy, className: "shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: copied ? "check" : "copy" }) }) : null
+          showCopy ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy command", onClick: copy, className: "shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(CopyGlyph, { copied }) }) : null,
+          showCopy ? /* @__PURE__ */ jsx(CopiedStatus, { copied }) : null
         ]
       }
     );
@@ -57,7 +67,7 @@ function CodeBlock({
       children: [
         hasHeader ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border px-4 py-2", children: [
           /* @__PURE__ */ jsx("span", { className: "text-mono-caption text-muted-foreground", children: filename }),
-          showCopy ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy code", onClick: copy, className: "text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: copied ? "check" : "copy" }) }) : null
+          showCopy ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy code", onClick: copy, className: "text-muted-foreground", children: /* @__PURE__ */ jsx(CopyGlyph, { copied }) }) : null
         ] }) : null,
         /* @__PURE__ */ jsx(
           "pre",
@@ -72,7 +82,8 @@ function CodeBlock({
             children: /* @__PURE__ */ jsx("code", { children: highlighter ? highlighter(code) : code })
           }
         ),
-        copyColumn ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy code", onClick: copy, className: "m-2 ms-0 shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: copied ? "check" : "copy" }) }) : null
+        copyColumn ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy code", onClick: copy, className: "m-2 ms-0 shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(CopyGlyph, { copied }) }) : null,
+        showCopy ? /* @__PURE__ */ jsx(CopiedStatus, { copied }) : null
       ]
     }
   );

package/dist/components/code-block/code-block.meta.js

@@ -79,9 +79,36 @@ var codeBlockMeta = {
     }
   ],
   tokensUsed: ["border", "muted", "muted-foreground", "foreground"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Code is reading content and arrives with the page or message it belongs to. An entrance of its own would delay the text someone came to copy."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Copy button",
+      why: "The copy button is a quiet ghost icon in the corner of a block. Its hover fill is what tells the pointer it is a control and not decoration."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-icon-swap",
+      part: "Copy glyph",
+      why: "The copy mark turning into a check is the only proof the clipboard took the text. Snapped between frames it was easy to miss at the edge of a block; the swap reads as one mark being replaced."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Copying is instant. There is no in-between worth showing, and a spinner for a clipboard write would read as a slow one."
+    }
+  ],
   a11y: [
     "Code renders inside a <pre><code> for correct semantics and screen-reader handling.",
-    "Copy is the ghost icon Button with `useCopy`, which guards clipboard access for SSR safety."
+    "Copy is the ghost icon Button with `useCopy`, which guards clipboard access for SSR safety.",
+    'A successful copy is announced as "Copied" through a polite role=status region that is always mounted; the button keeps its label, which names what it does. Both glyphs are aria-hidden.'
   ],
   examples: [
     {

package/dist/components/collapsible/collapsible.meta.js

@@ -92,6 +92,38 @@ var collapsibleMeta = {
     }
   ],
   tokensUsed: ["foreground", "muted-foreground"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "A collapsible is part of the page it sits in, present from first paint. Its trigger is what the reader notices, not an entrance."
+    },
+    {
+      slot: "response",
+      recipe: "none",
+      part: "CollapsibleTrigger",
+      why: "The trigger is whatever the consumer renders (usually a Button), and that control brings its own response. Adding one here would double it."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-disclosure",
+      part: "CollapsiblePanel",
+      why: "The height change ties the content that appears to the trigger that was pressed; snapped open, everything below jumps with nothing linking cause to effect."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "CollapsibleIndicator",
+      why: "The chevron turns with the panel rather than flipping in one frame: motion-interactive lists `rotate`, the property rotate-180 writes."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Nothing here is indeterminate; content that loads on open should put its own loader inside the panel."
+    }
+  ],
   a11y: [
     "Base UI wires aria-expanded on the trigger and aria-controls/id between trigger and panel.",
     "Trigger is a real <button>; toggles on click and Enter/Space.",

package/dist/components/color-field/color-field.meta.js

@@ -95,6 +95,32 @@ var colorFieldMeta = {
       description: "Accessible name for the trigger; the current value is appended to it."
     }
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-pop",
+      part: "Popover",
+      why: "The picker grows out of the swatch it edits (PopoverContent's recipe, its origin on the anchor). In a property panel with a column of swatches, that origin is what tells you which colour you are now editing."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Swatch",
+      why: "Preset swatches lift slightly under the pointer. They are 20px chips of colour with no label, and the eased lift is what tells you which one a click will take."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Handles",
+      why: "The saturation, hue and alpha handles follow the pointer exactly. A handle that trailed the drag would misreport the colour under the cursor, and a swatch or a typed hex moving them is the value changing, which the field should show at once."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Picking is synchronous. The EyeDropper is the browser's own modal, with its own feedback."
+    }
+  ],
   a11y: [
     `The trigger's accessible name includes the current value, so a screen reader announces the colour rather than just "button" \u2014 the swatch itself conveys nothing without sight.`,
     "The Transparent entry is a toggle with aria-pressed, because it is a state of the value and not a navigation action.",

package/dist/components/combobox/combobox.meta.js

@@ -203,6 +203,50 @@ var comboboxMeta = {
     "secondary",
     "secondary-foreground"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-pop",
+      part: "ComboboxContent",
+      why: "The list grows from the field it filters, its origin on Base UI's anchor. With several comboboxes in a form, that is what attaches the open list to the one being typed in."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "ComboboxItem",
+      why: "A row's ink eases as the pointer or the arrow keys reach it, so moving through a long filtered list reads as continuous movement rather than rows blinking."
+    },
+    {
+      slot: "response",
+      recipe: "custom",
+      part: "Highlight",
+      why: "One highlight travels to the active row (lib/highlight-glide: a measured translate on the motion tokens) instead of each row painting its own fill. When the list re-filters under the caret, the highlight sliding to the new match is what shows the keyboard target moved."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Toggle",
+      why: "The chevron toggle at the field's edge eases its ink on hover; the change is what tells you it is a separate target from the text box."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Toggle",
+      why: "The chevron turns 180\xB0 as the list opens and closes (motion-interactive lists `rotate`), in step with the popup, so it reads as one control changing direction."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-pop",
+      part: "ComboboxContent",
+      why: "Closing shrinks back toward the field, returning the eye to the input that now holds the value."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Combobox ships no loading part. A list fetched as you type shows a Spinner (motion-spin) in ComboboxEmpty or the content \u2014 where the results will land \u2014 and only the caller knows a fetch is in flight."
+    }
+  ],
   a11y: [
     "Base UI provides role=combobox/listbox/option, roving tabindex, arrow-key navigation, and type-to-filter.",
     "Esc and outside-press dismiss; focus returns to the input on close.",

package/dist/components/command-menu/command-menu.js

@@ -187,8 +187,13 @@ function CommandMenuBody({
       ),
       query ? (
         // Empties the query and hands focus back to the field, which owns
-        // the keyboard (the list is driven from it).
-        /* @__PURE__ */ jsx(
+        // the keyboard (the list is driven from it). It mounts on the first
+        // keystroke, beside the caret the eye is on, so the wrapper fades it
+        // in (motion-appear) rather than letting it blink into the header.
+        // On the wrapper, not the Button: motion-appear declares its own
+        // transition list and would fight motion-interactive for the one
+        // transition-property slot. Removal stays instant.
+        /* @__PURE__ */ jsx("span", { className: "flex motion-appear", children: /* @__PURE__ */ jsx(
           Button,
           {
             variant: "ghost",
@@ -203,7 +208,7 @@ function CommandMenuBody({
             },
             children: /* @__PURE__ */ jsx(Icon, { name: "xmark" })
           }
-        )
+        ) })
       ) : null
     ] }),
     /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: resultCount === 0 ? "No results" : `${resultCount} result${resultCount === 1 ? "" : "s"}` }),

package/dist/components/command-menu/command-menu.meta.js

@@ -229,6 +229,44 @@ var commandMenuMeta = {
     "accent",
     "accent-foreground"
   ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-pop",
+      part: "Dialog",
+      why: "The palette opens on DialogContent's recipe over a fading backdrop. It is summoned by a keystroke from nowhere on screen, and the short scale-in is what says a layer arrived rather than the page changing. The inline CommandMenuPanel has no entrance: it is part of the page."
+    },
+    {
+      slot: "arrival",
+      recipe: "motion-appear",
+      part: "Clear button",
+      why: "The clear button mounts on the first keystroke, beside the caret the eye is already on. Fading in, it reads as the field offering a way back instead of a control blinking into the header. Removal is instant, so an emptied query does not wait on its X."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "CommandItem",
+      why: "The active row follows both the arrow keys and the pointer, and its fill eases between rows, so scanning results while typing reads as one highlight moving rather than rows flashing in turn."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "CommandMenuTrigger",
+      why: "The search-shaped trigger eases its ink on hover like the field shell it imitates, so it reads as the field it opens."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-pop",
+      part: "Dialog",
+      why: "Closing on Enter or Esc shrinks the palette away fast and returns focus where it came from; the exit is the confirmation that the command ran or was dismissed."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "List",
+      why: "Results are filtered synchronously from the items passed in. Async results are the caller's to mark with a Spinner (motion-spin) in the list, where the person is already looking."
+    }
+  ],
   a11y: [
     "CommandMenuTrigger is a real <button> named by its visible placeholder, with aria-haspopup=dialog and aria-keyshortcuts (Meta+K on macOS, Control+K elsewhere). Its Kbd hint is aria-hidden, so the shortcut is announced once rather than read as part of the name.",
     "The shortcut never fires from inside a text field, textarea, select or contenteditable (Ctrl+K is delete-to-end-of-line in macOS text views), except the palette's own input.",

package/dist/components/confirm-button/confirm-button.js

@@ -0,0 +1,179 @@
+"use client";
+
+// src/components/confirm-button/confirm-button.tsx
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/cn.js";
+import { isPromise } from "../../lib/is-promise.js";
+import { StackedActionsContext } from "../../lib/presentation.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
+import { useAutoSize } from "../../motion/useAutoSize.js";
+import { Button } from "../button/button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var OPTICAL_START = "[--button-ps:calc(var(--button-px)-(--spacing(0.5)))] ps-(--button-ps)";
+var DOUBLE_PRESS_GUARD_MS = 300;
+function defaultConfirmLabel(label) {
+  if (typeof label !== "string" || label.trim() === "") return "Confirm?";
+  return `Confirm ${label.charAt(0).toLowerCase()}${label.slice(1)}?`;
+}
+function ConfirmButton({
+  children,
+  confirmLabel,
+  onConfirm,
+  timeout = 3e3,
+  variant = "secondary",
+  confirmVariant = "destructive",
+  size,
+  icon,
+  confirmHint = "Press again to confirm.",
+  motion,
+  disabled,
+  className,
+  onBlur,
+  onKeyDown,
+  ref,
+  ...props
+}) {
+  const stacked = useContext(StackedActionsContext);
+  const callerSized = /(^|\s)([\w-]+:)*(w-|flex-1|grow(\s|$)|basis-)/.test(className ?? "");
+  const autoSize = useAutoSize({ enabled: !stacked && !callerSized });
+  const [phase, setPhase] = useState("idle");
+  const armedAt = useRef(0);
+  const rootRef = useRef(null);
+  const armed = phase !== "idle";
+  const prompt = confirmLabel ?? defaultConfirmLabel(children);
+  const disarm = useCallback(() => setPhase((p) => p === "armed" ? "idle" : p), []);
+  useEffect(() => {
+    if (phase !== "armed") return;
+    const timer = setTimeout(disarm, timeout);
+    return () => clearTimeout(timer);
+  }, [phase, timeout, disarm]);
+  useEffect(() => {
+    if (phase !== "armed") return;
+    const onPointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) disarm();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [phase, disarm]);
+  useEffect(() => {
+    if (disabled) setPhase((p) => p === "armed" ? "idle" : p);
+  }, [disabled]);
+  const handleClick = (_event) => {
+    if (phase === "idle") {
+      armedAt.current = Date.now();
+      setPhase("armed");
+      return;
+    }
+    if (phase !== "armed" || Date.now() - armedAt.current < DOUBLE_PRESS_GUARD_MS) return;
+    const result = onConfirm();
+    if (isPromise(result)) {
+      setPhase("confirming");
+      const idle = () => setPhase("idle");
+      result.then(idle, idle);
+      return result;
+    }
+    setPhase("idle");
+    return result;
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape" && phase === "armed") {
+      event.preventDefault();
+      event.stopPropagation();
+      disarm();
+    }
+    onKeyDown?.(event);
+  };
+  const handleBlur = (event) => {
+    disarm();
+    onBlur?.(event);
+  };
+  const setRefs = (node) => {
+    rootRef.current = node;
+    autoSize.outerRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ...props,
+        ref: setRefs,
+        size,
+        variant: armed ? confirmVariant : variant,
+        disabled,
+        "data-state": armed ? "armed" : "idle",
+        "data-motion": motionAttribute(motion),
+        className: cn(
+          // overflow-clip: while the width eases, the content is already at
+          // its new size, so it is clipped to the button rather than painting
+          // past its fill. A ring is a box-shadow and is not clipped.
+          "relative overflow-clip motion-size",
+          // The icon lives inside the measured span (below), not in Button's
+          // iconStart slot, so Button's optical start padding is restated.
+          icon != null && OPTICAL_START,
+          className
+        ),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              ref: autoSize.innerRef,
+              className: "inline-flex w-max items-center gap-(--control-gap) transition-opacity duration-(--motion-duration-fast) ease-standard",
+              children: [
+                icon,
+                /* @__PURE__ */ jsxs("span", { className: "inline-grid overflow-x-clip", children: [
+                  /* @__PURE__ */ jsx(ConfirmLabel, { active: !armed, children }),
+                  /* @__PURE__ */ jsx(ConfirmLabel, { active: armed, children: prompt })
+                ] })
+              ]
+            }
+          ),
+          phase === "armed" ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "confirm-countdown",
+              className: "pointer-events-none absolute inset-x-(--button-px) bottom-1 h-0.5 origin-left rounded-full bg-current opacity-40 transition-[scale] ease-linear scale-x-0 starting:scale-x-100 rtl:origin-right",
+              style: {
+                transitionDuration: `calc(${timeout}ms * var(--motion-scale, 1) * var(--motion-expressive, 1))`
+              }
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: phase === "armed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      prompt,
+      " ",
+      confirmHint
+    ] }) : null })
+  ] });
+}
+ConfirmButton.displayName = "ConfirmButton";
+function ConfirmLabel({ active, children }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": active ? void 0 : "true",
+      "data-active": active,
+      className: cn(
+        "col-start-1 row-start-1 flex justify-center transition-opacity duration-(--motion-duration-fast) ease-standard",
+        active ? "w-max" : "w-0 opacity-0"
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: "sable-label-trim", children })
+    }
+  );
+}
+export {
+  ConfirmButton
+};