@seekalfred/primitives 0.5.1 → 0.6.0

package/dist/checkbox/checkbox.js

@@ -4,7 +4,7 @@ import { selectionLabelVariants, selectionRingVariants } from "../lib/selection-
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { Checkbox } from "react-aria-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/checkbox/checkbox.tsx
 /**
 * Checkbox, rebuilt on React Aria.
@@ -46,12 +46,11 @@ const checkboxBoxVariants = cva([
 	"inline-flex size-4 shrink-0 items-center justify-center",
 	"rounded-2xs border-(length:--border-width)",
 	"box-border",
-	"bg-background border-border",
-	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
-	"group-data-[selected]:bg-primary group-data-[selected]:border-primary-strong",
-	"group-data-[selected]:text-primary-foreground",
-	"group-data-[indeterminate]:bg-primary group-data-[indeterminate]:border-primary-strong",
-	"group-data-[indeterminate]:text-primary-foreground",
+	"bg-background border-border text-primary-foreground",
+	"checkbox-box",
+	"group-data-[selected]:border-primary-strong",
+	"group-data-[indeterminate]:border-primary-strong",
+	"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground",
 	selectionRingVariants()
 ]);
 const Checkbox$1 = forwardRef(function Checkbox$2({ className, children, ...props }, ref) {
@@ -60,30 +59,28 @@ const Checkbox$1 = forwardRef(function Checkbox$2({ className, children, ...prop
 		inputRef: ref,
 		"data-slot": "checkbox",
 		className: cn(checkboxVariants(), className),
-		children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
 			"aria-hidden": "true",
 			"data-slot": "checkbox-box",
 			className: checkboxBoxVariants(),
-			children: isIndeterminate ? /* @__PURE__ */ jsx("svg", {
-				"data-slot": "checkbox-indeterminate",
-				viewBox: "0 0 16 16",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "checkbox-fill",
+				className: "checkbox-fill"
+			}), /* @__PURE__ */ jsx("svg", {
+				"data-slot": "checkbox-mark",
+				"data-mark": isIndeterminate ? "indeterminate" : isSelected ? "check" : void 0,
+				viewBox: "0 0 18 18",
 				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "2.5",
-				strokeLinecap: "round",
-				className: "size-3",
-				children: /* @__PURE__ */ jsx("path", { d: "M4 8h8" })
-			}) : isSelected ? /* @__PURE__ */ jsx("svg", {
-				"data-slot": "checkbox-check",
-				viewBox: "0 0 16 16",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "2.5",
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				className: "size-3",
-				children: /* @__PURE__ */ jsx("path", { d: "m3.5 8.5 3 3 6-6" })
-			}) : null
+				className: "absolute -inset-px size-4 overflow-visible",
+				children: /* @__PURE__ */ jsx("path", {
+					className: "checkbox-mark",
+					pathLength: "1",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})]
 		}), children == null ? null : /* @__PURE__ */ jsx("span", {
 			"data-slot": "checkbox-label",
 			children

package/dist/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["Checkbox","AriaCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Checkbox as AriaCheckbox,\n  type CheckboxProps as AriaCheckboxProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * Checkbox, rebuilt on React Aria.\n *\n * THE CENSUS FOUND ZERO CALL SITES. It is ported anyway because forms and\n * table row selection are unbuildable without it, but that fact changes what\n * this is: with no usage to be faithful to and no call site to break, it is a\n * rewrite rather than a restyling. Four things the legacy component got\n * wrong are therefore simply fixed rather than carried:\n *\n * - **No accessible name.** It rendered a bare `<input type=\"checkbox\">` with\n *   no label, no `aria-label` and no `id`, so every use was an axe `label`\n *   violation. Here the label is `children`, and React Aria wraps the input\n *   in it.\n * - **The fill never showed.** `checked:bg-primary` on a native input with no\n *   `appearance-none` is painted over by the user-agent checkbox.\n * - **`border-primary` cannot be a boundary.** Brand orange is 2.44:1 on\n *   white, under even the 3:1 non-text floor (WCAG 1.4.11).\n * - **`focus-visible:ring-2` is a box-shadow**, which forced-colors discards,\n *   taking the only focus indication with it.\n *\n * React Aria renders a `<label>` around a visually-hidden real `<input>` and\n * NOTHING else -- there is no visual box in the box. Drawing one, and keeping\n * it in step with `data-selected` / `data-indeterminate`, is what this\n * component owns.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\n/**\n * The label geometry now lives in lib/selection-control.ts, shared with\n * Radio and Switch. Three controls with the same 24px target and the same\n * typography is the Rule of Three, and this migration has twice found a\n * legacy pair that styled one surface twice and silently drifted.\n */\nexport const checkboxVariants = cva([selectionLabelVariants()]);\n\nexport const checkboxBoxVariants = cva([\n  \"inline-flex size-4 shrink-0 items-center justify-center\",\n  // rounded-2xs, not rounded-sm. --radius-sm is 8px, which on a 16px box\n  // is exactly half its width -- a circle, indistinguishable from a radio\n  // button. A screenshot caught that; no assertion in this suite did, which\n  // is why NotACircle now exists. --radius-xs (6px) is still 75% of the way\n  // there, so the scale gained a 4px step rather than this reaching for a\n  // bracket value that check:hardcoding would rightly reject.\n  \"rounded-2xs border-(length:--border-width)\",\n\n  // box-border: content-box would add the border to the 16px box and make it\n  // 18, which is the same opt-in-reset exposure as everywhere else.\n  \"box-border\",\n\n  // Unselected: a neutral boundary, NOT the legacy border-primary. Brand\n  // orange is 2.44:1 on white and cannot legally be the only thing describing\n  // a control's edge.\n  \"bg-background border-border\",\n\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n\n  // Selected and indeterminate paint the same: both mean \"this control has a\n  // value\", and the glyph inside says which.\n  //\n  // primary-strong on the border, not primary: a filled orange box is 2.44:1\n  // against the page, so the FILL cannot satisfy 1.4.11 and the boundary has\n  // to. Same reasoning, and the same token, as the Button's outline variant.\n  \"group-data-[selected]:bg-primary group-data-[selected]:border-primary-strong\",\n  \"group-data-[selected]:text-primary-foreground\",\n  \"group-data-[indeterminate]:bg-primary group-data-[indeterminate]:border-primary-strong\",\n  \"group-data-[indeterminate]:text-primary-foreground\",\n\n  // Shared with Radio and Switch. The ring goes on the BOX rather than the\n  // input, because React Aria's input is visually hidden.\n  selectionRingVariants(),\n]);\n\n/**\n * A checkbox.\n *\n * @example\n * <Checkbox defaultSelected>Email me about new courses</Checkbox>\n * <Checkbox aria-label=\"Select row\" />\n */\nexport interface CheckboxProps\n  extends Omit<AriaCheckboxProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The label, and the control's accessible name.\n   *\n   * Omit it only for a genuinely label-less checkbox -- a table row selector\n   * -- and pass `aria-label` instead. A checkbox with neither has no\n   * accessible name, which is what every legacy call site would have been.\n   */\n  children?: ReactNode;\n  /** Extra classes for the label. Merged last, so they win conflicts. */\n  className?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <AriaCheckbox\n      {...props}\n      // inputRef, not ref: AriaCheckbox's own ref targets the label it\n      // renders around a visually-hidden native input, and a label cannot\n      // be focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"checkbox\"\n      // `group` is load-bearing: React Aria puts data-selected,\n      // data-indeterminate and data-focus-visible on the LABEL, and CSS\n      // cannot look upward from the box to them.\n      className={cn(checkboxVariants(), className)}\n    >\n      {({ isSelected, isIndeterminate }) => (\n        <>\n          {/*\n            aria-hidden: the real <input> already carries the state. A\n            decorative box announced as well would say everything twice.\n          */}\n          <span aria-hidden=\"true\" data-slot=\"checkbox-box\" className={checkboxBoxVariants()}>\n            {/*\n              Chosen in JS rather than toggled with CSS. Two rules that both\n              apply -- show-when-selected and hide-when-indeterminate -- have\n              equal specificity, so which wins comes down to the order\n              Tailwind happened to emit them in. Rendering one glyph makes\n              the precedence explicit and puts it in the DOM, where a test\n              can read it.\n\n              Indeterminate wins: both states can be true at once (a \"select\n              all\" box that has been partially cleared), and a tick there\n              would say the opposite of the aria-checked=\"mixed\" beside it.\n            */}\n            {isIndeterminate ? (\n              <svg\n                data-slot=\"checkbox-indeterminate\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2.5\"\n                strokeLinecap=\"round\"\n                className=\"size-3\"\n              >\n                <path d=\"M4 8h8\" />\n              </svg>\n            ) : isSelected ? (\n              <svg\n                data-slot=\"checkbox-check\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2.5\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className=\"size-3\"\n              >\n                <path d=\"m3.5 8.5 3 3 6-6\" />\n              </svg>\n            ) : null}\n          </span>\n          {children == null ? null : <span data-slot=\"checkbox-label\">{children}</span>}\n        </>\n      )}\n    </AriaCheckbox>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,mBAAmB,IAAI,CAAC,uBAAuB,CAAC,CAAC;AAE9D,MAAa,sBAAsB,IAAI;CACrC;CAOA;CAIA;CAKA;CAEA;CAQA;CACA;CACA;CACA;CAIA,sBAAsB;AACxB,CAAC;AAuBD,MAAaA,aAAW,WAA4C,SAASA,WAC3E,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;CACA,OACE,oBAACC,UAAD;EACE,GAAI;EAKJ,UAAU;EACV,aAAU;EAIV,WAAW,GAAG,iBAAiB,GAAG,SAAS;EAEzC,WAAA,EAAE,YAAY,sBACd,qBAAA,UAAA,EAAA,UAAA,CAKE,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAe,WAAW,oBAAoB;GAa9E,UAAA,kBACC,oBAAC,OAAD;IACE,aAAU;IACV,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,WAAU;IAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,SAAU,CAAA;GACf,CAAA,IACH,aACF,oBAAC,OAAD;IACE,aAAU;IACV,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;IACf,WAAU;IAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;GACzB,CAAA,IACH;EACA,CAAA,GACL,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAkB;EAAe,CAAA,CAC5E,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC"}
+{"version":3,"file":"checkbox.js","names":["Checkbox","AriaCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Checkbox as AriaCheckbox,\n  type CheckboxProps as AriaCheckboxProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * Checkbox, rebuilt on React Aria.\n *\n * THE CENSUS FOUND ZERO CALL SITES. It is ported anyway because forms and\n * table row selection are unbuildable without it, but that fact changes what\n * this is: with no usage to be faithful to and no call site to break, it is a\n * rewrite rather than a restyling. Four things the legacy component got\n * wrong are therefore simply fixed rather than carried:\n *\n * - **No accessible name.** It rendered a bare `<input type=\"checkbox\">` with\n *   no label, no `aria-label` and no `id`, so every use was an axe `label`\n *   violation. Here the label is `children`, and React Aria wraps the input\n *   in it.\n * - **The fill never showed.** `checked:bg-primary` on a native input with no\n *   `appearance-none` is painted over by the user-agent checkbox.\n * - **`border-primary` cannot be a boundary.** Brand orange is 2.44:1 on\n *   white, under even the 3:1 non-text floor (WCAG 1.4.11).\n * - **`focus-visible:ring-2` is a box-shadow**, which forced-colors discards,\n *   taking the only focus indication with it.\n *\n * React Aria renders a `<label>` around a visually-hidden real `<input>` and\n * NOTHING else -- there is no visual box in the box. Drawing one, and keeping\n * it in step with `data-selected` / `data-indeterminate`, is what this\n * component owns.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\n/**\n * The label geometry now lives in lib/selection-control.ts, shared with\n * Radio and Switch. Three controls with the same 24px target and the same\n * typography is the Rule of Three, and this migration has twice found a\n * legacy pair that styled one surface twice and silently drifted.\n */\nexport const checkboxVariants = cva([selectionLabelVariants()]);\n\nexport const checkboxBoxVariants = cva([\n  \"inline-flex size-4 shrink-0 items-center justify-center\",\n  \"rounded-2xs border-(length:--border-width)\",\n\n  // box-border: the size is the whole square, border included.\n  \"box-border\",\n\n  \"bg-background border-border text-primary-foreground\",\n\n  // Border colour eases, the square presses to .95 and springs back (see checkbox-box).\n  \"checkbox-box\",\n\n  // The border takes the strong tone once chosen; the colour itself is the fill below.\n  \"group-data-[selected]:border-primary-strong\",\n  \"group-data-[indeterminate]:border-primary-strong\",\n  // Hover darkens an unchosen box's border.\n  \"group-data-[hovered]:not-group-data-[selected]:not-group-data-[indeterminate]:border-muted-foreground\",\n\n  selectionRingVariants(),\n]);\n\nexport interface CheckboxProps\n  extends Omit<AriaCheckboxProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The label, and the control's accessible name.\n   *\n   * Omit it only for a genuinely label-less checkbox -- a table row selector\n   * -- and pass `aria-label` instead. A checkbox with neither has no\n   * accessible name, which is what every legacy call site would have been.\n   */\n  children?: ReactNode;\n  /** Extra classes for the label. Merged last, so they win conflicts. */\n  className?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <AriaCheckbox\n      {...props}\n      // inputRef, not ref: AriaCheckbox's own ref targets the label it\n      // renders around a visually-hidden native input, and a label cannot\n      // be focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"checkbox\"\n      // `group` is load-bearing: React Aria puts data-selected,\n      // data-indeterminate and data-focus-visible on the LABEL, and CSS\n      // cannot look upward from the box to them.\n      className={cn(checkboxVariants(), className)}\n    >\n      {({ isSelected, isIndeterminate }) => (\n        <>\n          {/*\n            aria-hidden: the real <input> already carries the state. A\n            decorative box announced as well would say everything twice.\n          */}\n          <span aria-hidden=\"true\" data-slot=\"checkbox-box\" className={checkboxBoxVariants()}>\n            <span data-slot=\"checkbox-fill\" className=\"checkbox-fill\" />\n            {/*\n              One mark, always rendered: the state decides what it shows. Both\n              states can be true at once (a \"select all\" box that has been\n              partially cleared) and indeterminate wins, which the path's\n              `d` carries in CSS -- the same precedence the old two-glyph\n              branch pinned in JS.\n            */}\n            <svg\n              data-slot=\"checkbox-mark\"\n              data-mark={isIndeterminate ? \"indeterminate\" : isSelected ? \"check\" : undefined}\n              viewBox=\"0 0 18 18\"\n              fill=\"none\"\n              className=\"absolute -inset-px size-4 overflow-visible\"\n            >\n              <path\n                className=\"checkbox-mark\"\n                pathLength=\"1\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </span>\n          {children == null ? null : <span data-slot=\"checkbox-label\">{children}</span>}\n        </>\n      )}\n    </AriaCheckbox>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,mBAAmB,IAAI,CAAC,uBAAuB,CAAC,CAAC;AAE9D,MAAa,sBAAsB,IAAI;CACrC;CACA;CAGA;CAEA;CAGA;CAGA;CACA;CAEA;CAEA,sBAAsB;AACxB,CAAC;AAgBD,MAAaA,aAAW,WAA4C,SAASA,WAC3E,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;CACA,OACE,oBAACC,UAAD;EACE,GAAI;EAKJ,UAAU;EACV,aAAU;EAIV,WAAW,GAAG,iBAAiB,GAAG,SAAS;EAEzC,WAAA,EAAE,YAAY,sBACd,qBAAA,YAAA,EAAA,UAAA,CAKE,qBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAe,WAAW,oBAAoB;GAAjF,UAAA,CACE,oBAAC,QAAD;IAAM,aAAU;IAAgB,WAAU;GAAiB,CAAA,GAQ3D,oBAAC,OAAD;IACE,aAAU;IACV,aAAW,kBAAkB,kBAAkB,aAAa,UAAU,KAAA;IACtE,SAAQ;IACR,MAAK;IACL,WAAU;IAEV,UAAA,oBAAC,QAAD;KACE,WAAU;KACV,YAAW;KACX,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA,CACD;EACL,CAAA,GAAA,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAkB;EAAe,CAAA,CAC5E,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC"}

package/dist/confirm-morph/confirm-morph.d.ts

@@ -0,0 +1,85 @@
+import { ReactNode } from "react";
+//#region src/confirm-morph/confirm-morph.d.ts
+/** Where the control is in its life: resting, asking, working, finished, or failed. */
+export type ConfirmMorphState = "idle" | "confirming" | "pending" | "done" | "error";
+/** How the question is answered: a press, a press held until the fill completes, or a press followed by a short countdown. */
+export type ConfirmMorphMode = "press" | "hold" | "countdown";
+/**
+ * A button for destructive or important actions that asks in place. Pressing it
+ * morphs the same pill into an inline question with Cancel and Confirm, then into
+ * a spinner, then into a result with Undo. The width springs to each face while
+ * the faces crossfade at their natural width, so text never squashes and nothing
+ * around the control jumps. Escape, an outside press, or the timeout all return
+ * it to rest.
+ *
+ * Use it where a modal dialog would be heavy: deleting a project, revoking
+ * access, discarding a draft.
+ */
+export interface ConfirmMorphProps {
+  /** The resting label, such as "Delete project". */
+  label: ReactNode;
+  /** A plain icon before the resting label. Mark it `aria-hidden`. */
+  icon?: ReactNode;
+  /** The question shown while confirming, such as "Delete 3 files?". Defaults to the label with a question mark. */
+  prompt?: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** Shown beside the spinner while `onConfirm` resolves. */
+  pendingLabel?: string;
+  doneLabel?: string;
+  errorLabel?: string;
+  retryLabel?: string;
+  undoLabel?: string;
+  /** Shown beside the spinner while `onUndo` resolves. */
+  undoingLabel?: string;
+  /**
+   * `danger` (default) gives the confirm button the destructive colour, for
+   * actions that destroy something. `neutral` gives it the primary colour, for
+   * important actions that can be reversed. The resting button is neutral either way.
+   */
+  tone?: "danger" | "neutral";
+  /** `press` confirms on a press. `hold` asks for a press held for `holdDuration`. `countdown` confirms, then counts down `countdown` seconds that Cancel or Escape can still stop. */
+  confirmMode?: ConfirmMorphMode;
+  /** Milliseconds the confirm button must be held in `hold` mode. */
+  holdDuration?: number;
+  /** Seconds counted down before the action runs in `countdown` mode. */
+  countdown?: number;
+  /** Text before the seconds in `countdown` mode, such as "Deleting in". Defaults to the pending label followed by "in". */
+  countdownLabel?: string;
+  /** Runs on confirm. Return a promise to show the pending face; a rejection shows the error face with Retry. */
+  onConfirm?: () => void | Promise<unknown>;
+  /** Offering it adds Undo to the result. Return a promise to show a pending face while it runs. */
+  onUndo?: () => void | Promise<unknown>;
+  onCancel?: () => void;
+  /** Controlled state. Pair it with `onStateChange`. */
+  state?: ConfirmMorphState;
+  /** Starting state when uncontrolled. */
+  defaultState?: ConfirmMorphState;
+  onStateChange?: (state: ConfirmMorphState) => void;
+  /** Milliseconds before an unanswered question returns to rest. Resting the pointer on the control pauses it. 0 turns it off. */
+  confirmTimeout?: number;
+  /** Milliseconds a result stays before returning to rest. Resting the pointer on the control pauses it. 0 turns it off. */
+  resultTimeout?: number;
+  /** A press outside the control cancels an open question. Defaults to true. */
+  cancelOnOutsidePress?: boolean;
+  isDisabled?: boolean;
+  /** Extra classes for the root. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * A button for an action that deserves a second thought, without a dialog. It
+ * asks in place: the pill morphs into a question with Cancel and Confirm, then
+ * a spinner, then a result with Undo, its width springing to each face while the
+ * faces crossfade at their natural width.
+ *
+ * Escape, a press outside, or the timeout answer the question with no. Focus
+ * follows the control between faces, but only when it was already inside, so a
+ * timeout never steals it. A live region announces each step.
+ *
+ * @example
+ * <ConfirmMorph label="Delete project" onConfirm={() => deleteProject()} onUndo={() => restore()} />
+ * <ConfirmMorph label="Delete project" confirmMode="hold" onConfirm={deleteProject} />
+ */
+export declare const ConfirmMorph: import("react").ForwardRefExoticComponent<ConfirmMorphProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=confirm-morph.d.ts.map