@seekalfred/primitives 0.5.0 → 0.6.0

package/dist/card/card.js

@@ -1,6 +1,7 @@
 "use client";
-import { cn } from "../lib/cn.js";
+import { cn, cnAll } from "../lib/cn.js";
 import { cva } from "class-variance-authority";
+import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/card/card.tsx
 /**
@@ -49,21 +50,34 @@ const cardTitleVariants = cva(["text-base leading-(--leading-none) font-semibold
 const cardDescriptionVariants = cva(["text-sm leading-(--leading-normal) text-muted-foreground"]);
 const cardContentVariants = cva("px-6");
 const cardFooterVariants = cva("flex items-center px-6");
-function Card({ className, ...props }) {
+const Card = forwardRef(function Card({ className, interactive = false, onPointerEnter, onPointerLeave, ...props }, ref) {
+	const [pointed, setPointed] = useState(false);
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		...props,
 		"data-slot": "card",
-		className: cn(cardVariants(), className)
+		"data-interactive": interactive || void 0,
+		"data-pointed": interactive && pointed || void 0,
+		onPointerEnter: (event) => {
+			onPointerEnter?.(event);
+			if (interactive && event.pointerType !== "touch") setPointed(true);
+		},
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			setPointed(false);
+		},
+		className: cnAll(cardVariants(), interactive && "card-lift", className)
 	});
-}
-function CardHeader({ className, ...props }) {
+});
+const CardHeader = forwardRef(function CardHeader({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		...props,
 		"data-slot": "card-header",
 		className: cn(cardHeaderVariants(), className)
 	});
-}
-function CardTitle({ className, level = 3, ...props }) {
+});
+const CardTitle = forwardRef(function CardTitle({ className, level = 3, ...props }, ref) {
 	const Heading = {
 		1: "h1",
 		2: "h2",
@@ -73,32 +87,36 @@ function CardTitle({ className, level = 3, ...props }) {
 		6: "h6"
 	}[level];
 	return /* @__PURE__ */ jsx(Heading, {
+		ref,
 		...props,
 		"data-slot": "card-title",
 		className: cn(cardTitleVariants(), className)
 	});
-}
-function CardDescription({ className, ...props }) {
+});
+const CardDescription = forwardRef(function CardDescription({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		...props,
 		"data-slot": "card-description",
 		className: cn(cardDescriptionVariants(), className)
 	});
-}
-function CardContent({ className, ...props }) {
+});
+const CardContent = forwardRef(function CardContent({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		...props,
 		"data-slot": "card-content",
 		className: cn(cardContentVariants(), className)
 	});
-}
-function CardFooter({ className, ...props }) {
+});
+const CardFooter = forwardRef(function CardFooter({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		...props,
 		"data-slot": "card-footer",
 		className: cn(cardFooterVariants(), className)
 	});
-}
+});
 //#endregion
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants };
 

package/dist/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../src/card/card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Card, ported from the legacy shadcn component.\n *\n * Presentational, so there is no React Aria base -- React Aria ships no card,\n * and a container that is not focusable, selectable or interactive needs no\n * behaviour to inherit.\n *\n * Five parts, from six. The census (24 consumer files, the most-used\n * container in the app) reads: Card 55, CardContent 40, CardHeader 21,\n * CardTitle 19, CardDescription 8, CardFooter 2, **CardAction 0**.\n *\n * Dropping `CardAction` takes three things with it, which is most of the\n * legacy header's complexity: the `grid`, the `grid-rows-[auto_auto]`, and\n * the `has-data-[slot=card-action]:grid-cols-[1fr_auto]` rule that existed\n * only to reserve a column for it. With no action to place, a header is a\n * stack.\n *\n * Two more legacy rules are gone. `[.border-b]:pb-6` and `[.border-t]:pt-6`\n * added padding when the CONSUMER happened to add a border class -- clever,\n * but action at a distance through a class name we do not own, and the census\n * found zero application call sites relying on it (one call site passes\n * `border-b-0`, which removes a border it never had). `@container/card-header`\n * named a container nothing queried.\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 */\nexport const cardVariants = cva([\n  \"flex flex-col gap-6\",\n  \"rounded-xl border-(length:--border-width) border-border py-6\",\n  \"bg-card text-card-foreground shadow-surface\",\n\n  // box-border and font-sans are not boilerplate. The reset in\n  // @seekalfred/styles is OPT-IN, so a consumer may load none: content-box\n  // would add the padding to any width they set (the Alert shipped\n  // overflowing its container by 46px), and an unstyled document renders\n  // text in a serif (the Accordion shipped its panel that way). Declaring\n  // the family HERE rather than on each part means one declaration covers\n  // the whole subtree by inheritance.\n  \"box-border font-sans\",\n]);\n\n/**\n * Padding is inline-only on the sections and block-only on the shell.\n *\n * That split is load-bearing rather than stylistic: it is what lets a\n * consumer run a divider or a full-bleed image edge to edge, which a single\n * `p-6` on the shell would make impossible.\n */\nexport const cardHeaderVariants = cva(\"flex flex-col gap-1.5 px-6\");\n\nexport const cardTitleVariants = cva([\n  // leading-* AFTER text-*: tailwind-merge treats a later text-* as owning\n  // line-height and silently strips a leading-* that precedes it.\n  \"text-base leading-(--leading-none) font-semibold\",\n  // The user-agent <h3> ships a 1em block margin and font-size 1.17em. The\n  // legacy component was a <div> and never met either.\n  \"m-0\",\n]);\n\nexport const cardDescriptionVariants = cva([\n  \"text-sm leading-(--leading-normal) text-muted-foreground\",\n]);\n\nexport const cardContentVariants = cva(\"px-6\");\n\nexport const cardFooterVariants = cva(\"flex items-center px-6\");\n\n/**\n * A content container.\n *\n * @example\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Learning Progress</CardTitle>\n *     <CardDescription>Across all active courses.</CardDescription>\n *   </CardHeader>\n *   <CardContent>Twelve of eighteen modules complete.</CardContent>\n * </Card>\n */\nexport type CardProps = ComponentPropsWithoutRef<\"div\">;\n\nexport function Card({ className, ...props }: CardProps) {\n  return <div {...props} data-slot=\"card\" className={cn(cardVariants(), className)} />;\n}\n\n/** Title and description, stacked. */\nexport type CardHeaderProps = ComponentPropsWithoutRef<\"div\">;\n\nexport function CardHeader({ className, ...props }: CardHeaderProps) {\n  return (\n    <div {...props} data-slot=\"card-header\" className={cn(cardHeaderVariants(), className)} />\n  );\n}\n\n/**\n * The card's heading.\n *\n * A REAL heading, unlike the legacy `<div class=\"font-semibold\">`. None of\n * the 19 legacy call sites wrapped one, so 19 card titles were invisible to\n * screen-reader heading navigation -- the same shape of finding as the Avatar\n * port's missing `alt`, and the migration is when it gets answered.\n */\nexport interface CardTitleProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * Heading level.\n   *\n   * `3` by default, because a card almost always sits under a section\n   * heading. It is a prop rather than a constant because the correct level\n   * is a fact about the PAGE, and a fixed one would be wrong somewhere; the\n   * level changes semantics only, never the rendered size.\n   *\n   * @default 3\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport function CardTitle({ className, level = 3, ...props }: CardTitleProps) {\n  // Static union, not a template literal: `h${level}` is a string React\n  // accepts but TypeScript cannot narrow to an intrinsic element, and the\n  // cast that silences it would also accept `h7`.\n  const Heading = ({ 1: \"h1\", 2: \"h2\", 3: \"h3\", 4: \"h4\", 5: \"h5\", 6: \"h6\" } as const)[level];\n\n  return (\n    <Heading {...props} data-slot=\"card-title\" className={cn(cardTitleVariants(), className)} />\n  );\n}\n\n/** Secondary text under the title. */\nexport type CardDescriptionProps = ComponentPropsWithoutRef<\"div\">;\n\nexport function CardDescription({ className, ...props }: CardDescriptionProps) {\n  return (\n    <div\n      {...props}\n      data-slot=\"card-description\"\n      className={cn(cardDescriptionVariants(), className)}\n    />\n  );\n}\n\n/** The card's body. */\nexport type CardContentProps = ComponentPropsWithoutRef<\"div\">;\n\nexport function CardContent({ className, ...props }: CardContentProps) {\n  return (\n    <div {...props} data-slot=\"card-content\" className={cn(cardContentVariants(), className)} />\n  );\n}\n\n/** Actions or metadata at the foot of the card. */\nexport type CardFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport function CardFooter({ className, ...props }: CardFooterProps) {\n  return (\n    <div {...props} data-slot=\"card-footer\" className={cn(cardFooterVariants(), className)} />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,eAAe,IAAI;CAC9B;CACA;CACA;CASA;AACF,CAAC;;;;;;;;AASD,MAAa,qBAAqB,IAAI,4BAA4B;AAElE,MAAa,oBAAoB,IAAI,CAGnC,oDAGA,KACF,CAAC;AAED,MAAa,0BAA0B,IAAI,CACzC,0DACF,CAAC;AAED,MAAa,sBAAsB,IAAI,MAAM;AAE7C,MAAa,qBAAqB,IAAI,wBAAwB;AAgB9D,SAAgB,KAAK,EAAE,WAAW,GAAG,SAAoB;CACvD,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,aAAU;EAAO,WAAW,GAAG,aAAa,GAAG,SAAS;CAAI,CAAA;AACrF;AAKA,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;CACnE,OACE,oBAAC,OAAD;EAAK,GAAI;EAAO,aAAU;EAAc,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAAI,CAAA;AAE7F;AAwBA,SAAgB,UAAU,EAAE,WAAW,QAAQ,GAAG,GAAG,SAAyB;CAI5E,MAAM,UAAW;EAAE,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;CAAK,EAAY;CAEpF,OACE,oBAAC,SAAD;EAAS,GAAI;EAAO,aAAU;EAAa,WAAW,GAAG,kBAAkB,GAAG,SAAS;CAAI,CAAA;AAE/F;AAKA,SAAgB,gBAAgB,EAAE,WAAW,GAAG,SAA+B;CAC7E,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,wBAAwB,GAAG,SAAS;CACnD,CAAA;AAEL;AAKA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OACE,oBAAC,OAAD;EAAK,GAAI;EAAO,aAAU;EAAe,WAAW,GAAG,oBAAoB,GAAG,SAAS;CAAI,CAAA;AAE/F;AAKA,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;CACnE,OACE,oBAAC,OAAD;EAAK,GAAI;EAAO,aAAU;EAAc,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAAI,CAAA;AAE7F"}
+{"version":3,"file":"card.js","names":[],"sources":["../../src/card/card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useState, type ComponentPropsWithoutRef } from \"react\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\n\n/**\n * Card, ported from the legacy shadcn component.\n *\n * Presentational, so there is no React Aria base -- React Aria ships no card,\n * and a container that is not focusable, selectable or interactive needs no\n * behaviour to inherit.\n *\n * Five parts, from six. The census (24 consumer files, the most-used\n * container in the app) reads: Card 55, CardContent 40, CardHeader 21,\n * CardTitle 19, CardDescription 8, CardFooter 2, **CardAction 0**.\n *\n * Dropping `CardAction` takes three things with it, which is most of the\n * legacy header's complexity: the `grid`, the `grid-rows-[auto_auto]`, and\n * the `has-data-[slot=card-action]:grid-cols-[1fr_auto]` rule that existed\n * only to reserve a column for it. With no action to place, a header is a\n * stack.\n *\n * Two more legacy rules are gone. `[.border-b]:pb-6` and `[.border-t]:pt-6`\n * added padding when the CONSUMER happened to add a border class -- clever,\n * but action at a distance through a class name we do not own, and the census\n * found zero application call sites relying on it (one call site passes\n * `border-b-0`, which removes a border it never had). `@container/card-header`\n * named a container nothing queried.\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 */\nexport const cardVariants = cva([\n  \"flex flex-col gap-6\",\n  \"rounded-xl border-(length:--border-width) border-border py-6\",\n  \"bg-card text-card-foreground shadow-surface\",\n\n  // box-border and font-sans are not boilerplate. The reset in\n  // @seekalfred/styles is OPT-IN, so a consumer may load none: content-box\n  // would add the padding to any width they set (the Alert shipped\n  // overflowing its container by 46px), and an unstyled document renders\n  // text in a serif (the Accordion shipped its panel that way). Declaring\n  // the family HERE rather than on each part means one declaration covers\n  // the whole subtree by inheritance.\n  \"box-border font-sans\",\n]);\n\n/**\n * Padding is inline-only on the sections and block-only on the shell.\n *\n * That split is load-bearing rather than stylistic: it is what lets a\n * consumer run a divider or a full-bleed image edge to edge, which a single\n * `p-6` on the shell would make impossible.\n */\nexport const cardHeaderVariants = cva(\"flex flex-col gap-1.5 px-6\");\n\nexport const cardTitleVariants = cva([\n  // leading-* AFTER text-*: tailwind-merge treats a later text-* as owning\n  // line-height and silently strips a leading-* that precedes it.\n  \"text-base leading-(--leading-none) font-semibold\",\n  // The user-agent <h3> ships a 1em block margin and font-size 1.17em. The\n  // legacy component was a <div> and never met either.\n  \"m-0\",\n]);\n\nexport const cardDescriptionVariants = cva([\n  \"text-sm leading-(--leading-normal) text-muted-foreground\",\n]);\n\nexport const cardContentVariants = cva(\"px-6\");\n\nexport const cardFooterVariants = cva(\"flex items-center px-6\");\n\n/**\n * A content container.\n *\n * @example\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Learning Progress</CardTitle>\n *     <CardDescription>Across all active courses.</CardDescription>\n *   </CardHeader>\n *   <CardContent>Twelve of eighteen modules complete.</CardContent>\n * </Card>\n */\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Make the card respond to a pointer: it floats 2px on a spring while it is pointed\n   * at, its border darkens and its shadow deepens. Mouse and pen only; touch never lifts.\n   * Leave it off for a card that is not a target: a static card should not move.\n   */\n  interactive?: boolean;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { className, interactive = false, onPointerEnter, onPointerLeave, ...props },\n  ref,\n) {\n  // Pointed at by a mouse or pen. Touch never lifts, so it is read from the pointer, not :hover (which a tap leaves stuck).\n  const [pointed, setPointed] = useState(false);\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card\"\n      data-interactive={interactive || undefined}\n      data-pointed={(interactive && pointed) || undefined}\n      onPointerEnter={(event) => {\n        onPointerEnter?.(event);\n        if (interactive && event.pointerType !== \"touch\") setPointed(true);\n      }}\n      onPointerLeave={(event) => {\n        onPointerLeave?.(event);\n        setPointed(false);\n      }}\n      className={cnAll(cardVariants(), interactive && \"card-lift\", className)}\n    />\n  );\n});\n\n/** Title and description, stacked. */\nexport type CardHeaderProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-header\"\n      className={cn(cardHeaderVariants(), className)}\n    />\n  );\n});\n\n/**\n * The card's heading.\n *\n * A REAL heading, unlike the legacy `<div class=\"font-semibold\">`. None of\n * the 19 legacy call sites wrapped one, so 19 card titles were invisible to\n * screen-reader heading navigation -- the same shape of finding as the Avatar\n * port's missing `alt`, and the migration is when it gets answered.\n */\nexport interface CardTitleProps extends ComponentPropsWithoutRef<\"h3\"> {\n  /**\n   * Heading level.\n   *\n   * `3` by default, because a card almost always sits under a section\n   * heading. It is a prop rather than a constant because the correct level\n   * is a fact about the PAGE, and a fixed one would be wrong somewhere; the\n   * level changes semantics only, never the rendered size.\n   *\n   * @default 3\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(function CardTitle(\n  { className, level = 3, ...props },\n  ref,\n) {\n  // Static union, not a template literal: `h${level}` is a string React\n  // accepts but TypeScript cannot narrow to an intrinsic element, and the\n  // cast that silences it would also accept `h7`.\n  const Heading = ({ 1: \"h1\", 2: \"h2\", 3: \"h3\", 4: \"h4\", 5: \"h5\", 6: \"h6\" } as const)[level];\n\n  return (\n    <Heading\n      ref={ref}\n      {...props}\n      data-slot=\"card-title\"\n      className={cn(cardTitleVariants(), className)}\n    />\n  );\n});\n\n/** Secondary text under the title. */\nexport type CardDescriptionProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardDescription = forwardRef<HTMLDivElement, CardDescriptionProps>(\n  function CardDescription({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-slot=\"card-description\"\n        className={cn(cardDescriptionVariants(), className)}\n      />\n    );\n  },\n);\n\n/** The card's body. */\nexport type CardContentProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(function CardContent(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-content\"\n      className={cn(cardContentVariants(), className)}\n    />\n  );\n});\n\n/** Actions or metadata at the foot of the card. */\nexport type CardFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"card-footer\"\n      className={cn(cardFooterVariants(), className)}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,eAAe,IAAI;CAC9B;CACA;CACA;CASA;AACF,CAAC;;;;;;;;AASD,MAAa,qBAAqB,IAAI,4BAA4B;AAElE,MAAa,oBAAoB,IAAI,CAGnC,oDAGA,KACF,CAAC;AAED,MAAa,0BAA0B,IAAI,CACzC,0DACF,CAAC;AAED,MAAa,sBAAsB,IAAI,MAAM;AAE7C,MAAa,qBAAqB,IAAI,wBAAwB;AAuB9D,MAAa,OAAO,WAAsC,SAAS,KACjE,EAAE,WAAW,cAAc,OAAO,gBAAgB,gBAAgB,GAAG,SACrE,KACA;CAEA,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,oBAAkB,eAAe,KAAA;EACjC,gBAAe,eAAe,WAAY,KAAA;EAC1C,iBAAiB,UAAU;GACzB,iBAAiB,KAAK;GACtB,IAAI,eAAe,MAAM,gBAAgB,SAAS,WAAW,IAAI;EACnE;EACA,iBAAiB,UAAU;GACzB,iBAAiB,KAAK;GACtB,WAAW,KAAK;EAClB;EACA,WAAW,MAAM,aAAa,GAAG,eAAe,aAAa,SAAS;CACvE,CAAA;AAEL,CAAC;AAKD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL,CAAC;AAwBD,MAAa,YAAY,WAA+C,SAAS,UAC/E,EAAE,WAAW,QAAQ,GAAG,GAAG,SAC3B,KACA;CAIA,MAAM,UAAW;EAAE,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;EAAM,GAAG;CAAK,EAAY;CAEpF,OACE,oBAAC,SAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,kBAAkB,GAAG,SAAS;CAC7C,CAAA;AAEL,CAAC;AAKD,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,wBAAwB,GAAG,SAAS;CACnD,CAAA;AAEL,CACF;AAKA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;CAC/C,CAAA;AAEL,CAAC;AAKD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL,CAAC"}

package/dist/checkbox/checkbox.d.ts

@@ -1,5 +1,5 @@
-import { CheckboxProps } from "react-aria-components";
 import { ReactNode } from "react";
+import { CheckboxProps } from "react-aria-components";
 //#region src/checkbox/checkbox.d.ts
 /**
  * Checkbox, rebuilt on React Aria.
@@ -38,13 +38,6 @@ import { ReactNode } from "react";
  */
 export declare const checkboxVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const checkboxBoxVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-/**
- * A checkbox.
- *
- * @example
- * <Checkbox defaultSelected>Email me about new courses</Checkbox>
- * <Checkbox aria-label="Select row" />
- */
 interface CheckboxProps$1 extends Omit<CheckboxProps, "className" | "style" | "children"> {
   /**
    * The label, and the control's accessible name.
@@ -57,7 +50,7 @@ interface CheckboxProps$1 extends Omit<CheckboxProps, "className" | "style" | "c
   /** Extra classes for the label. Merged last, so they win conflicts. */
   className?: string;
 }
-declare function Checkbox$1({ className, children, ...props }: CheckboxProps$1): import("react").JSX.Element;
+declare const Checkbox$1: import("react").ForwardRefExoticComponent<CheckboxProps$1 & import("react").RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Checkbox$1 as Checkbox, CheckboxProps$1 as CheckboxProps };
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/checkbox/checkbox.js

@@ -2,8 +2,9 @@
 import { cn } from "../lib/cn.js";
 import { selectionLabelVariants, selectionRingVariants } from "../lib/selection-control.js";
 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.
@@ -45,49 +46,47 @@ 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()
 ]);
-function Checkbox$1({ className, children, ...props }) {
+const Checkbox$1 = forwardRef(function Checkbox$2({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Checkbox, {
 		...props,
+		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
 		})] })
 	});
-}
+});
 //#endregion
 export { Checkbox$1 as Checkbox, checkboxBoxVariants, checkboxVariants };
 

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 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 function Checkbox({ className, children, ...props }: CheckboxProps) {\n  return (\n    <AriaCheckbox\n      {...props}\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,SAAgBA,WAAS,EAAE,WAAW,UAAU,GAAG,SAAwB;CACzE,OACE,oBAACC,UAAD;EACE,GAAI;EACJ,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"}
+{"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