@seekalfred/primitives 0.5.0 → 0.6.0

package/dist/accordion/accordion.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from "class-variance-authority";
-import { DisclosureGroupProps, DisclosurePanelProps, DisclosureProps } from "react-aria-components";
 import { ReactNode } from "react";
+import { DisclosureGroupProps, DisclosurePanelProps, DisclosureProps } from "react-aria-components";
 //#region src/accordion/accordion.d.ts
 /**
  * Accordion, ported from the legacy shadcn/Radix component onto React Aria's
@@ -50,7 +50,7 @@ export interface AccordionProps extends Omit<DisclosureGroupProps, "className" |
   /** Extra classes. Merged last, so they win conflicts with ours. */
   className?: string;
 }
-export declare function Accordion({ className, ...props }: AccordionProps): import("react").JSX.Element;
+export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * One collapsible section.
  *
@@ -60,7 +60,7 @@ export interface AccordionItemProps extends Omit<DisclosureProps, "className" |
   /** Extra classes. Merged last, so they win conflicts with ours. */
   className?: string;
 }
-export declare function AccordionItem({ className, ...props }: AccordionItemProps): import("react").JSX.Element;
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * The header button that expands its item.
  *
@@ -91,7 +91,7 @@ export interface AccordionTriggerProps extends VariantProps<typeof accordionTrig
    */
   headingLevel?: number;
 }
-export declare function AccordionTrigger({ children, icon, className, headingLevel }: AccordionTriggerProps): import("react").JSX.Element;
+export declare const AccordionTrigger: import("react").ForwardRefExoticComponent<AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 /**
  * The content revealed when its item expands.
  *
@@ -102,6 +102,6 @@ export interface AccordionPanelProps extends Omit<DisclosurePanelProps, "classNa
   /** Extra classes. Merged last, so they win conflicts with ours. */
   className?: string;
 }
-export declare function AccordionPanel({ className, ...props }: AccordionPanelProps): import("react").JSX.Element;
+export declare const AccordionPanel: import("react").ForwardRefExoticComponent<AccordionPanelProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 //# sourceMappingURL=accordion.d.ts.map

package/dist/accordion/accordion.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
 import { Button, Disclosure, DisclosureGroup, DisclosurePanel, Heading } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/accordion/accordion.tsx
@@ -43,41 +44,51 @@ const accordionTriggerVariants = cva([
 	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
 	"[&_svg:not([class*='size-'])]:size-(--icon-sm)",
 	"[&_svg]:text-muted-foreground",
-	"[&_svg]:motion-safe:transition-transform [&_svg]:motion-safe:duration-(--duration-fast)"
+	"[&_svg]:motion-safe:transition-transform [&_svg]:motion-safe:duration-(--duration-snappy) [&_svg]:motion-safe:ease-snappy",
+	"[&_svg]:motion-safe:transition-[transform,color]"
 ]);
-const accordionPanelVariants = cva(["pb-(--density-control-pad-md) font-sans text-sm leading-(--leading-normal) text-foreground"]);
-function Accordion({ className, ...props }) {
+const accordionPanelVariants = cva(["pb-(--density-control-pad-md) font-sans text-sm leading-(--leading-normal) text-foreground", "accordion-panel"]);
+const Accordion = forwardRef(function Accordion({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DisclosureGroup, {
+		ref,
 		...props,
 		"data-slot": "accordion",
 		className: cn(accordionVariants(), className)
 	});
-}
-function AccordionItem({ className, ...props }) {
+});
+const AccordionItem = forwardRef(function AccordionItem({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Disclosure, {
+		ref,
 		...props,
 		"data-slot": "accordion-item",
 		className: cn(accordionItemVariants(), className)
 	});
-}
-function AccordionTrigger({ children, icon, className, headingLevel = 3 }) {
+});
+const AccordionTrigger = forwardRef(function AccordionTrigger({ children, icon, className, headingLevel = 3 }, ref) {
 	return /* @__PURE__ */ jsx(Heading, {
 		level: headingLevel,
 		children: /* @__PURE__ */ jsxs(Button, {
+			ref,
 			slot: "trigger",
 			"data-slot": "accordion-trigger",
 			className: cn(accordionTriggerVariants(), className),
 			children: [children, icon]
 		})
 	});
-}
-function AccordionPanel({ className, ...props }) {
+});
+const AccordionPanel = forwardRef(function AccordionPanel({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DisclosurePanel, {
+		ref,
 		...props,
 		"data-slot": "accordion-panel",
-		className: cn(accordionPanelVariants(), className)
+		className: cn(accordionPanelVariants(), className),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "accordion-panel-content",
+			className: "accordion-panel-content",
+			children
+		})
 	});
-}
+});
 //#endregion
 export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, accordionItemVariants, accordionPanelVariants, accordionTriggerVariants, accordionVariants };
 

package/dist/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["AriaDisclosureGroup","AriaDisclosure","AriaButton","AriaDisclosurePanel"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  Disclosure as AriaDisclosure,\n  DisclosureGroup as AriaDisclosureGroup,\n  DisclosurePanel as AriaDisclosurePanel,\n  Heading,\n  type DisclosureGroupProps as AriaDisclosureGroupProps,\n  type DisclosurePanelProps as AriaDisclosurePanelProps,\n  type DisclosureProps as AriaDisclosureProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Accordion, ported from the legacy shadcn/Radix component onto React Aria's\n * Disclosure primitives.\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 -- the component would render unstyled with no\n * error anywhere.\n *\n * State comes from React Aria data attributes (`data-expanded`,\n * `data-focus-visible`, `data-disabled`), never from pseudo-classes.\n *\n * ONE BEHAVIOUR IS DELIBERATELY DROPPED. Radix moved focus between headers\n * with Home/End and the arrow keys; React Aria's useDisclosure has no key\n * handling, so each trigger is a button in the tab order and arrows do\n * nothing. The ARIA APG lists arrow navigation for accordions as optional,\n * and hand-rolling roving focus would mean owning focus management that the\n * headless base deliberately does not. The TabReachesEveryTrigger story pins\n * this so it stays a decision rather than becoming a surprise.\n */\nexport const accordionVariants = cva(\"w-full\");\n\nexport const accordionItemVariants = cva([\n  // The divider between items. border-b-0 on the last child rather than\n  // border-t on siblings: it survives a single-item accordion, which the\n  // sibling form does not.\n  \"border-b-(length:--border-width) border-b-border last:border-b-0\",\n  // The chevron rotation is authored HERE, not on the trigger: React Aria\n  // puts data-expanded on the Disclosure, and CSS cannot look upward from\n  // the button to its expanded ancestor.\n  \"data-[expanded]:[&_[data-slot=accordion-trigger]_svg]:rotate-180\",\n]);\n\nexport const accordionTriggerVariants = cva([\n  \"flex w-full items-center justify-between gap-(--density-control-gap)\",\n  // text-start, never text-left. Logical properties are what make RTL work\n  // without a second stylesheet (ARCHITECTURE section 5 rule 4).\n  \"text-start text-sm leading-(--leading-normal) font-sans font-medium text-foreground\",\n  \"rounded-md py-(--density-control-pad-md)\",\n  \"cursor-pointer select-none\",\n\n  // The reset in @seekalfred/styles is opt-in, so a consumer may load none.\n  // A bare <button> then keeps the user-agent border, ButtonFace grey and\n  // Arial -- the same defence the Button base carries, for the same reason.\n  \"border-(length:--border-width) border-transparent bg-transparent\",\n\n  // A real outline, not a ring. The legacy component focused with\n  // ring-[3px], a box-shadow, which forced-colors discards entirely -- and\n  // axe has no focus-indicator rule, so nothing would have caught it.\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style:none\n  // and the width utility resolves its style from that same variable, so\n  // without it the ring gets a width and a colour and paints nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n  \"data-[hovered]:underline\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n\n  // The chevron. Sized from the icon scale unless the caller sized it, and\n  // never a press target of its own.\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  \"[&_svg]:text-muted-foreground\",\n  // Rotation is the whole motion story for this component -- see the panel\n  // note below for why the panel itself does not animate.\n  \"[&_svg]:motion-safe:transition-transform [&_svg]:motion-safe:duration-(--duration-fast)\",\n]);\n\nexport const accordionPanelVariants = cva([\n  // font-sans is not decoration. The panel is a plain <div> inheriting from\n  // the consumer's body, and the library deliberately does not style the\n  // page -- so without this the copy renders in the browser's default serif\n  // while the trigger above it renders in the brand face. Caught by eye in\n  // the browser, not by any assertion, which is why NoUaLeak now covers the\n  // panel too.\n  \"pb-(--density-control-pad-md) font-sans text-sm leading-(--leading-normal) text-foreground\",\n  // No expand/collapse animation, deliberately. React Aria hides a collapsed\n  // panel with the `hidden` attribute, which is display:none, and CSS cannot\n  // transition out of display:none. Overriding [hidden] would restore the\n  // animation by breaking the accessibility semantics that make hidden\n  // correct -- the panel would stay in the accessibility tree while\n  // collapsed. @starting-style with transition-behavior:allow-discrete could\n  // do this properly once the browser floor allows it.\n]);\n\n/**\n * A grouping of collapsible sections.\n *\n * Expansion is KEYED, which is the sharpest break from the legacy component:\n * `type=\"single\" | \"multiple\"` becomes {@link AccordionProps.allowsMultipleExpanded},\n * and `value` / `defaultValue` strings become `expandedKeys` /\n * `defaultExpandedKeys` holding item ids. The change handler receives a\n * `Set`, not a string.\n *\n * The legacy `collapsible` prop has no equivalent and needs none: React\n * Aria's single-expand mode always allows collapsing the open item.\n *\n * @example\n * <Accordion defaultExpandedKeys={[\"billing\"]}>\n *   <AccordionItem id=\"billing\">\n *     <AccordionTrigger icon={<ChevronDown aria-hidden />}>Billing</AccordionTrigger>\n *     <AccordionPanel>Invoices and payment methods.</AccordionPanel>\n *   </AccordionItem>\n * </Accordion>\n */\nexport interface AccordionProps\n  extends\n    Omit<AriaDisclosureGroupProps, \"className\" | \"style\">,\n    VariantProps<typeof accordionVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport function Accordion({ className, ...props }: AccordionProps) {\n  return (\n    <AriaDisclosureGroup\n      {...props}\n      data-slot=\"accordion\"\n      className={cn(accordionVariants(), className)}\n    />\n  );\n}\n\n/**\n * One collapsible section.\n *\n * `id` replaces the legacy `value`, and is what `expandedKeys` refers to.\n */\nexport interface AccordionItemProps\n  extends\n    Omit<AriaDisclosureProps, \"className\" | \"style\">,\n    VariantProps<typeof accordionItemVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport function AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AriaDisclosure\n      {...props}\n      data-slot=\"accordion-item\"\n      className={cn(accordionItemVariants(), className)}\n    />\n  );\n}\n\n/**\n * The header button that expands its item.\n *\n * Rendered inside a {@link Heading} because screen-reader users navigate an\n * accordion by heading; that wrapper is what makes it usable rather than\n * merely operable.\n */\nexport interface AccordionTriggerProps extends VariantProps<typeof accordionTriggerVariants> {\n  /** The header label. */\n  children?: ReactNode;\n  /**\n   * The expand/collapse glyph, rendered after the label.\n   *\n   * Required, and supplied by the caller: this library ships no icon set, so\n   * it stays icon-library agnostic. Mark the glyph `aria-hidden` -- the label\n   * is the accessible name, and a second name source makes the trigger\n   * announce twice. It is sized at `--icon-sm` unless it carries a `size-*`\n   * class of its own, and rotates on expand.\n   */\n  icon: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Heading level for the wrapper. Accordions appear at different depths, and\n   * a fixed level would break the document outline wherever it is wrong.\n   *\n   * @default 3\n   */\n  headingLevel?: number;\n}\n\nexport function AccordionTrigger({\n  children,\n  icon,\n  className,\n  headingLevel = 3,\n}: AccordionTriggerProps) {\n  return (\n    <Heading level={headingLevel}>\n      <AriaButton\n        slot=\"trigger\"\n        data-slot=\"accordion-trigger\"\n        className={cn(accordionTriggerVariants(), className)}\n      >\n        {children}\n        {icon}\n      </AriaButton>\n    </Heading>\n  );\n}\n\n/**\n * The content revealed when its item expands.\n *\n * Named Panel rather than the legacy Content, matching React Aria and the\n * ARIA pattern.\n */\nexport interface AccordionPanelProps\n  extends\n    Omit<AriaDisclosurePanelProps, \"className\" | \"style\">,\n    VariantProps<typeof accordionPanelVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport function AccordionPanel({ className, ...props }: AccordionPanelProps) {\n  return (\n    <AriaDisclosurePanel\n      {...props}\n      data-slot=\"accordion-panel\"\n      className={cn(accordionPanelVariants(), className)}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAa,oBAAoB,IAAI,QAAQ;AAE7C,MAAa,wBAAwB,IAAI,CAIvC,oEAIA,kEACF,CAAC;AAED,MAAa,2BAA2B,IAAI;CAC1C;CAGA;CACA;CACA;CAKA;CAQA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAIA;CACA;CACA;CAGA;AACF,CAAC;AAED,MAAa,yBAAyB,IAAI,CAOxC,4FAQF,CAAC;AA8BD,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;CACjE,OACE,oBAACA,iBAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,kBAAkB,GAAG,SAAS;CAC7C,CAAA;AAEL;AAeA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA6B;CACzE,OACE,oBAACC,YAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,sBAAsB,GAAG,SAAS;CACjD,CAAA;AAEL;AAiCA,SAAgB,iBAAiB,EAC/B,UACA,MACA,WACA,eAAe,KACS;CACxB,OACE,oBAAC,SAAD;EAAS,OAAO;EACd,UAAA,qBAACC,QAAD;GACE,MAAK;GACL,aAAU;GACV,WAAW,GAAG,yBAAyB,GAAG,SAAS;GAHrD,UAAA,CAKG,UACA,IACS;;CACL,CAAA;AAEb;AAgBA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;CAC3E,OACE,oBAACC,iBAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,uBAAuB,GAAG,SAAS;CAClD,CAAA;AAEL"}
+{"version":3,"file":"accordion.js","names":["AriaDisclosureGroup","AriaDisclosure","AriaButton","AriaDisclosurePanel"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  Disclosure as AriaDisclosure,\n  DisclosureGroup as AriaDisclosureGroup,\n  DisclosurePanel as AriaDisclosurePanel,\n  Heading,\n  type DisclosureGroupProps as AriaDisclosureGroupProps,\n  type DisclosurePanelProps as AriaDisclosurePanelProps,\n  type DisclosureProps as AriaDisclosureProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Accordion, ported from the legacy shadcn/Radix component onto React Aria's\n * Disclosure primitives.\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 -- the component would render unstyled with no\n * error anywhere.\n *\n * State comes from React Aria data attributes (`data-expanded`,\n * `data-focus-visible`, `data-disabled`), never from pseudo-classes.\n *\n * ONE BEHAVIOUR IS DELIBERATELY DROPPED. Radix moved focus between headers\n * with Home/End and the arrow keys; React Aria's useDisclosure has no key\n * handling, so each trigger is a button in the tab order and arrows do\n * nothing. The ARIA APG lists arrow navigation for accordions as optional,\n * and hand-rolling roving focus would mean owning focus management that the\n * headless base deliberately does not. The TabReachesEveryTrigger story pins\n * this so it stays a decision rather than becoming a surprise.\n */\nexport const accordionVariants = cva(\"w-full\");\n\nexport const accordionItemVariants = cva([\n  // The divider between items. border-b-0 on the last child rather than\n  // border-t on siblings: it survives a single-item accordion, which the\n  // sibling form does not.\n  \"border-b-(length:--border-width) border-b-border last:border-b-0\",\n  // The chevron rotation is authored HERE, not on the trigger: React Aria\n  // puts data-expanded on the Disclosure, and CSS cannot look upward from\n  // the button to its expanded ancestor.\n  \"data-[expanded]:[&_[data-slot=accordion-trigger]_svg]:rotate-180\",\n]);\n\nexport const accordionTriggerVariants = cva([\n  \"flex w-full items-center justify-between gap-(--density-control-gap)\",\n  // text-start, never text-left. Logical properties are what make RTL work\n  // without a second stylesheet (ARCHITECTURE section 5 rule 4).\n  \"text-start text-sm leading-(--leading-normal) font-sans font-medium text-foreground\",\n  \"rounded-md py-(--density-control-pad-md)\",\n  \"cursor-pointer select-none\",\n\n  // The reset in @seekalfred/styles is opt-in, so a consumer may load none.\n  // A bare <button> then keeps the user-agent border, ButtonFace grey and\n  // Arial -- the same defence the Button base carries, for the same reason.\n  \"border-(length:--border-width) border-transparent bg-transparent\",\n\n  // A real outline, not a ring. The legacy component focused with\n  // ring-[3px], a box-shadow, which forced-colors discards entirely -- and\n  // axe has no focus-indicator rule, so nothing would have caught it.\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style:none\n  // and the width utility resolves its style from that same variable, so\n  // without it the ring gets a width and a colour and paints nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n  \"data-[hovered]:underline\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n\n  // The chevron. Sized from the icon scale unless the caller sized it, and\n  // never a press target of its own.\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  \"[&_svg]:text-muted-foreground\",\n  // Rotation is the whole motion story for this component -- see the panel\n  // note below for why the panel itself does not animate.\n  \"[&_svg]:motion-safe:transition-transform [&_svg]:motion-safe:duration-(--duration-snappy) [&_svg]:motion-safe:ease-snappy\",\n  // The icon takes its full colour once its panel is open.\n  \"[&_svg]:motion-safe:transition-[transform,color]\",\n]);\n\nexport const accordionPanelVariants = cva([\n  // font-sans is not decoration. The panel is a plain <div> inheriting from\n  // the consumer's body, and the library deliberately does not style the\n  // page -- so without this the copy renders in the browser's default serif\n  // while the trigger above it renders in the brand face. Caught by eye in\n  // the browser, not by any assertion, which is why NoUaLeak now covers the\n  // panel too.\n  \"pb-(--density-control-pad-md) font-sans text-sm leading-(--leading-normal) text-foreground\",\n  // Opens and closes in place (see the accordion-panel utility): the collapsed\n  // panel is kept as a box of no height, out of the accessibility tree.\n  \"accordion-panel\",\n]);\n\n/**\n * A grouping of collapsible sections.\n *\n * Expansion is KEYED, which is the sharpest break from the legacy component:\n * `type=\"single\" | \"multiple\"` becomes {@link AccordionProps.allowsMultipleExpanded},\n * and `value` / `defaultValue` strings become `expandedKeys` /\n * `defaultExpandedKeys` holding item ids. The change handler receives a\n * `Set`, not a string.\n *\n * The legacy `collapsible` prop has no equivalent and needs none: React\n * Aria's single-expand mode always allows collapsing the open item.\n *\n * @example\n * <Accordion defaultExpandedKeys={[\"billing\"]}>\n *   <AccordionItem id=\"billing\">\n *     <AccordionTrigger icon={<ChevronDown aria-hidden />}>Billing</AccordionTrigger>\n *     <AccordionPanel>Invoices and payment methods.</AccordionPanel>\n *   </AccordionItem>\n * </Accordion>\n */\nexport interface AccordionProps\n  extends\n    Omit<AriaDisclosureGroupProps, \"className\" | \"style\">,\n    VariantProps<typeof accordionVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaDisclosureGroup\n      ref={ref}\n      {...props}\n      data-slot=\"accordion\"\n      className={cn(accordionVariants(), className)}\n    />\n  );\n});\n\n/**\n * One collapsible section.\n *\n * `id` replaces the legacy `value`, and is what `expandedKeys` refers to.\n */\nexport interface AccordionItemProps\n  extends\n    Omit<AriaDisclosureProps, \"className\" | \"style\">,\n    VariantProps<typeof accordionItemVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(function AccordionItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaDisclosure\n      ref={ref}\n      {...props}\n      data-slot=\"accordion-item\"\n      className={cn(accordionItemVariants(), className)}\n    />\n  );\n});\n\n/**\n * The header button that expands its item.\n *\n * Rendered inside a {@link Heading} because screen-reader users navigate an\n * accordion by heading; that wrapper is what makes it usable rather than\n * merely operable.\n */\nexport interface AccordionTriggerProps extends VariantProps<typeof accordionTriggerVariants> {\n  /** The header label. */\n  children?: ReactNode;\n  /**\n   * The expand/collapse glyph, rendered after the label.\n   *\n   * Required, and supplied by the caller: this library ships no icon set, so\n   * it stays icon-library agnostic. Mark the glyph `aria-hidden` -- the label\n   * is the accessible name, and a second name source makes the trigger\n   * announce twice. It is sized at `--icon-sm` unless it carries a `size-*`\n   * class of its own, and rotates on expand.\n   */\n  icon: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Heading level for the wrapper. Accordions appear at different depths, and\n   * a fixed level would break the document outline wherever it is wrong.\n   *\n   * @default 3\n   */\n  headingLevel?: number;\n}\n\nexport const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(\n  function AccordionTrigger({ children, icon, className, headingLevel = 3 }, ref) {\n    return (\n      <Heading level={headingLevel}>\n        <AriaButton\n          // The ref goes on the button, not the Heading wrapping it: Heading has\n          // no interactive behaviour, while the button is what expands/collapses\n          // and carries the press/focus data attributes.\n          ref={ref}\n          slot=\"trigger\"\n          data-slot=\"accordion-trigger\"\n          className={cn(accordionTriggerVariants(), className)}\n        >\n          {children}\n          {icon}\n        </AriaButton>\n      </Heading>\n    );\n  },\n);\n\n/**\n * The content revealed when its item expands.\n *\n * Named Panel rather than the legacy Content, matching React Aria and the\n * ARIA pattern.\n */\nexport interface AccordionPanelProps\n  extends\n    Omit<AriaDisclosurePanelProps, \"className\" | \"style\">,\n    VariantProps<typeof accordionPanelVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n  function AccordionPanel({ className, children, ...props }, ref) {\n    return (\n      <AriaDisclosurePanel\n        ref={ref}\n        {...props}\n        data-slot=\"accordion-panel\"\n        className={cn(accordionPanelVariants(), className)}\n      >\n        {/* A wrapper, so the answer can settle down into place while the panel opens. */}\n        <div data-slot=\"accordion-panel-content\" className=\"accordion-panel-content\">\n          {children}\n        </div>\n      </AriaDisclosurePanel>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAa,oBAAoB,IAAI,QAAQ;AAE7C,MAAa,wBAAwB,IAAI,CAIvC,oEAIA,kEACF,CAAC;AAED,MAAa,2BAA2B,IAAI;CAC1C;CAGA;CACA;CACA;CAKA;CAQA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAIA;CACA;CACA;CAGA;CAEA;AACF,CAAC;AAED,MAAa,yBAAyB,IAAI,CAOxC,8FAGA,iBACF,CAAC;AA8BD,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACA,iBAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,kBAAkB,GAAG,SAAS;CAC7C,CAAA;AAEL,CAAC;AAeD,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,YAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,sBAAsB,GAAG,SAAS;CACjD,CAAA;AAEL,CAAC;AAiCD,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,EAAE,UAAU,MAAM,WAAW,eAAe,KAAK,KAAK;CAC9E,OACE,oBAAC,SAAD;EAAS,OAAO;EACd,UAAA,qBAACC,QAAD;GAIO;GACL,MAAK;GACL,aAAU;GACV,WAAW,GAAG,yBAAyB,GAAG,SAAS;GAPrD,UAAA,CASG,UACA,IACS;;CACL,CAAA;AAEb,CACF;AAgBA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,UAAU,GAAG,SAAS,KAAK;CAC9D,OACE,oBAACC,iBAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,uBAAuB,GAAG,SAAS;EAGjD,UAAA,oBAAC,OAAD;GAAK,aAAU;GAA0B,WAAU;GAChD;EACE,CAAA;CACc,CAAA;AAEzB,CACF"}

package/dist/action-button/action-button.d.ts

@@ -0,0 +1,50 @@
+import { buttonVariants } from "../button/button.js";
+import { VariantProps } from "class-variance-authority";
+import { ButtonProps } from "react-aria-components";
+//#region src/action-button/action-button.d.ts
+/**
+ * Props.
+ *
+ * Deliberately NOT Button's props: an action button owns its own content (the
+ * morphing label and the arrow, spinner or tick beside it), so `children` is the
+ * resting label as a plain string rather than arbitrary content, and `onAction`
+ * replaces `onPress` because it is awaited. It does take Button's `variant` and
+ * `size`, so it looks like the Button next to it.
+ */
+export interface ActionButtonProps extends Omit<ButtonProps, "className" | "style" | "onPress" | "children" | "isPending">, VariantProps<typeof buttonVariants> {
+  /** The label at rest. A plain string: it is split into letters to morph. */
+  children: string;
+  /** The label once the action succeeds. */
+  successLabel?: string;
+  /** The label while the action runs. */
+  pendingLabel?: string;
+  /**
+   * What the button does. If it returns a promise the button stays pending
+   * until it settles; a rejection returns the button to rest and goes to
+   * `onActionError`. A press while pending is ignored.
+   */
+  onAction: () => void | Promise<void>;
+  /** How long the success state shows before the button returns to rest, in ms. `0` keeps it. */
+  resetAfterMs?: number;
+  /** Called when `onAction` throws or rejects. Without it the error is dropped, because the button has already returned to rest. */
+  onActionError?: (error: unknown) => void;
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * A button that runs an action and shows it through: its label morphs from the
+ * resting text to a pending one and then a success one, the arrow becomes a
+ * spinner and then a tick that draws itself, and the button's width follows the
+ * text on a spring.
+ *
+ * Use it for one async commit ("Save", "Send"). It stays focusable while
+ * pending (`aria-disabled`, not disabled), so a keyboard user keeps focus
+ * through the whole action, and a live region announces the pending and success
+ * labels. The accessible name is always the resting label.
+ *
+ * @example
+ * <ActionButton onAction={save} pendingLabel="Saving" successLabel="Saved">Save changes</ActionButton>
+ */
+export declare const ActionButton: import("react").ForwardRefExoticComponent<ActionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+//# sourceMappingURL=action-button.d.ts.map

package/dist/action-button/action-button.js

@@ -0,0 +1,159 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { anchorsLayer, pressScaleFor, useAriaBusy, useExitBackstop, useLeavingItems } from "../lib/motion.js";
+import { buttonVariants } from "../button/button.js";
+import { MorphText } from "../lib/morph-text.js";
+import "class-variance-authority";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/action-button/action-button.tsx
+const ICON = "size-(--icon-sm)";
+/** The tick draws itself from its short stroke, the way a hand would write it. */
+function DrawnCheck() {
+	return /* @__PURE__ */ jsx("svg", {
+		className: ICON,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M4 12l5 5L20 6",
+			pathLength: 1,
+			className: "[stroke-dasharray:1] motion-safe:animate-check-draw"
+		})
+	});
+}
+function Arrow() {
+	return /* @__PURE__ */ jsx("svg", {
+		className: ICON,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M12 5l7 7-7 7" })
+	});
+}
+function Spinner() {
+	return /* @__PURE__ */ jsx("span", { className: "size-4 rounded-circle border-(length:--border-width-spinner) border-current border-r-transparent motion-safe:animate-spin-fast" });
+}
+function PhaseIcon({ state }) {
+	if (state === "pending") return /* @__PURE__ */ jsx(Spinner, {});
+	if (state === "success") return /* @__PURE__ */ jsx(DrawnCheck, {});
+	return /* @__PURE__ */ jsx(Arrow, {});
+}
+/** Classes for one phase of the icon slot. The arrow moves; the spinner and tick scale. */
+function phaseClasses(state, leaving, animated) {
+	const arrow = state === "idle";
+	if (leaving) return arrow ? "motion-safe:animate-arrow-out motion-reduce:animate-fade-out" : "motion-safe:animate-glyph-out motion-reduce:animate-fade-out";
+	if (!animated) return "";
+	return arrow ? "motion-safe:animate-arrow-in motion-reduce:animate-fade-in" : "motion-safe:animate-glyph-in motion-reduce:animate-fade-in";
+}
+function IconSlot({ state }) {
+	const phaseRef = useRef(null);
+	const { leaving, changed, remove } = useLeavingItems(state, state, () => phaseRef.current);
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("grid shrink-0 place-items-center", ICON),
+		children: [leaving.map((item) => /* @__PURE__ */ jsx(LeavingIcon, {
+			id: item.id,
+			state: item.value,
+			onDone: remove
+		}, item.id)), /* @__PURE__ */ jsx("span", {
+			ref: phaseRef,
+			className: cn(`col-start-1 row-start-1 grid place-items-center ${ICON} ${phaseClasses(state, false, changed)}`),
+			children: /* @__PURE__ */ jsx(PhaseIcon, { state })
+		}, state)]
+	});
+}
+function LeavingIcon({ id, state, onDone }) {
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		className: cn(`col-start-1 row-start-1 grid place-items-center ${ICON} ${phaseClasses(state, true, true)}`),
+		children: /* @__PURE__ */ jsx(PhaseIcon, { state })
+	});
+}
+/**
+* A button that runs an action and shows it through: its label morphs from the
+* resting text to a pending one and then a success one, the arrow becomes a
+* spinner and then a tick that draws itself, and the button's width follows the
+* text on a spring.
+*
+* Use it for one async commit ("Save", "Send"). It stays focusable while
+* pending (`aria-disabled`, not disabled), so a keyboard user keeps focus
+* through the whole action, and a live region announces the pending and success
+* labels. The accessible name is always the resting label.
+*
+* @example
+* <ActionButton onAction={save} pendingLabel="Saving" successLabel="Saved">Save changes</ActionButton>
+*/
+const ActionButton = forwardRef(function ActionButton({ children: label, successLabel = "Saved", pendingLabel = "Saving", onAction, resetAfterMs = 2400, onActionError, className, variant, size, onPressStart, ...props }, ref) {
+	const [state, setState] = useState("idle");
+	const resetTimer = useRef(null);
+	const busy = useAriaBusy(state === "pending");
+	useEffect(() => () => {
+		if (resetTimer.current) clearTimeout(resetTimer.current);
+	}, []);
+	async function run() {
+		if (state === "pending") return;
+		if (resetTimer.current) clearTimeout(resetTimer.current);
+		setState("pending");
+		try {
+			await onAction();
+			setState("success");
+			if (resetAfterMs > 0) resetTimer.current = setTimeout(() => setState("idle"), resetAfterMs);
+		} catch (error) {
+			setState("idle");
+			onActionError?.(error);
+		}
+	}
+	const pressStart = (event) => {
+		const target = event.target;
+		if (state === "pending" || anchorsLayer(props)) target.style.removeProperty("--press-scale");
+		else target.style.setProperty("--press-scale", pressScaleFor(target.offsetWidth));
+		onPressStart?.(event);
+	};
+	const text = state === "pending" ? pendingLabel : state === "success" ? successLabel : label;
+	const status = state === "pending" ? pendingLabel : state === "success" ? successLabel : "";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
+		...props,
+		ref: mergeRefs(ref, busy),
+		"aria-disabled": state === "pending" ? true : props["aria-disabled"],
+		"data-pending": state === "pending" || void 0,
+		onPress: () => void run(),
+		onPressStart: pressStart,
+		"data-slot": "button",
+		"data-status": state,
+		className: cn(`${buttonVariants({
+			variant,
+			size
+		})} relative overflow-hidden`, className),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "inline-flex min-h-5 items-center justify-center gap-2 whitespace-nowrap",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx(MorphText, { text }), /* @__PURE__ */ jsx(IconSlot, { state })]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		role: "status",
+		children: status
+	})] });
+});
+//#endregion
+export { ActionButton };
+
+//# sourceMappingURL=action-button.js.map

package/dist/action-button/action-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button.js","names":["AriaButton"],"sources":["../../src/action-button/action-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, useCallback, useEffect, useRef, useState, type RefObject } from \"react\";\nimport {\n  Button as AriaButton,\n  type ButtonProps as AriaButtonProps,\n  type PressEvent,\n} from \"react-aria-components\";\n\nimport { buttonVariants } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { MorphText } from \"../lib/morph-text.js\";\nimport {\n  anchorsLayer,\n  pressScaleFor,\n  useAriaBusy,\n  useExitBackstop,\n  useLeavingItems,\n} from \"../lib/motion.js\";\n\ntype ActionState = \"idle\" | \"pending\" | \"success\";\n\n/**\n * Props.\n *\n * Deliberately NOT Button's props: an action button owns its own content (the\n * morphing label and the arrow, spinner or tick beside it), so `children` is the\n * resting label as a plain string rather than arbitrary content, and `onAction`\n * replaces `onPress` because it is awaited. It does take Button's `variant` and\n * `size`, so it looks like the Button next to it.\n */\nexport interface ActionButtonProps\n  extends\n    Omit<AriaButtonProps, \"className\" | \"style\" | \"onPress\" | \"children\" | \"isPending\">,\n    VariantProps<typeof buttonVariants> {\n  /** The label at rest. A plain string: it is split into letters to morph. */\n  children: string;\n  /** The label once the action succeeds. */\n  successLabel?: string;\n  /** The label while the action runs. */\n  pendingLabel?: string;\n  /**\n   * What the button does. If it returns a promise the button stays pending\n   * until it settles; a rejection returns the button to rest and goes to\n   * `onActionError`. A press while pending is ignored.\n   */\n  onAction: () => void | Promise<void>;\n  /** How long the success state shows before the button returns to rest, in ms. `0` keeps it. */\n  resetAfterMs?: number;\n  /** Called when `onAction` throws or rejects. Without it the error is dropped, because the button has already returned to rest. */\n  onActionError?: (error: unknown) => void;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nconst ICON = \"size-(--icon-sm)\";\n\n/** The tick draws itself from its short stroke, the way a hand would write it. */\nfunction DrawnCheck() {\n  return (\n    <svg\n      className={ICON}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M4 12l5 5L20 6\"\n        pathLength={1}\n        className=\"[stroke-dasharray:1] motion-safe:animate-check-draw\"\n      />\n    </svg>\n  );\n}\n\nfunction Arrow() {\n  return (\n    <svg\n      className={ICON}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M5 12h14M12 5l7 7-7 7\" />\n    </svg>\n  );\n}\n\nfunction Spinner() {\n  return (\n    <span className=\"size-4 rounded-circle border-(length:--border-width-spinner) border-current border-r-transparent motion-safe:animate-spin-fast\" />\n  );\n}\n\nfunction PhaseIcon({ state }: { state: ActionState }) {\n  if (state === \"pending\") return <Spinner />;\n  if (state === \"success\") return <DrawnCheck />;\n  return <Arrow />;\n}\n\n/** Classes for one phase of the icon slot. The arrow moves; the spinner and tick scale. */\nfunction phaseClasses(state: ActionState, leaving: boolean, animated: boolean) {\n  const arrow = state === \"idle\";\n  if (leaving) {\n    return arrow\n      ? \"motion-safe:animate-arrow-out motion-reduce:animate-fade-out\"\n      : \"motion-safe:animate-glyph-out motion-reduce:animate-fade-out\";\n  }\n  if (!animated) return \"\";\n  return arrow\n    ? \"motion-safe:animate-arrow-in motion-reduce:animate-fade-in\"\n    : \"motion-safe:animate-glyph-in motion-reduce:animate-fade-in\";\n}\n\nfunction IconSlot({ state }: { state: ActionState }) {\n  const phaseRef = useRef<HTMLSpanElement>(null);\n  // The phases share one grid cell, so a leaving one needs no rect: it simply stays under the new one.\n  const { leaving, changed, remove } = useLeavingItems<ActionState>(\n    state,\n    state,\n    () => phaseRef.current,\n  );\n  return (\n    <span className={cn(\"grid shrink-0 place-items-center\", ICON)}>\n      {leaving.map((item) => (\n        <LeavingIcon key={item.id} id={item.id} state={item.value} onDone={remove} />\n      ))}\n      <span\n        key={state}\n        ref={phaseRef}\n        className={cn(\n          `col-start-1 row-start-1 grid place-items-center ${ICON} ${phaseClasses(state, false, changed)}`,\n        )}\n      >\n        <PhaseIcon state={state} />\n      </span>\n    </span>\n  );\n}\n\nfunction LeavingIcon({\n  id,\n  state,\n  onDone,\n}: {\n  id: number;\n  state: ActionState;\n  onDone: (id: number) => void;\n}) {\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  return (\n    <span\n      aria-hidden=\"true\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      className={cn(\n        `col-start-1 row-start-1 grid place-items-center ${ICON} ${phaseClasses(state, true, true)}`,\n      )}\n    >\n      <PhaseIcon state={state} />\n    </span>\n  );\n}\n\n/**\n * A button that runs an action and shows it through: its label morphs from the\n * resting text to a pending one and then a success one, the arrow becomes a\n * spinner and then a tick that draws itself, and the button's width follows the\n * text on a spring.\n *\n * Use it for one async commit (\"Save\", \"Send\"). It stays focusable while\n * pending (`aria-disabled`, not disabled), so a keyboard user keeps focus\n * through the whole action, and a live region announces the pending and success\n * labels. The accessible name is always the resting label.\n *\n * @example\n * <ActionButton onAction={save} pendingLabel=\"Saving\" successLabel=\"Saved\">Save changes</ActionButton>\n */\nexport const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(function ActionButton(\n  {\n    children: label,\n    successLabel = \"Saved\",\n    pendingLabel = \"Saving\",\n    onAction,\n    resetAfterMs = 2400,\n    onActionError,\n    className,\n    variant,\n    size,\n    onPressStart,\n    ...props\n  },\n  ref,\n) {\n  const [state, setState] = useState<ActionState>(\"idle\");\n  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const busy = useAriaBusy(state === \"pending\");\n\n  useEffect(\n    () => () => {\n      if (resetTimer.current) clearTimeout(resetTimer.current);\n    },\n    [],\n  );\n\n  async function run() {\n    if (state === \"pending\") return;\n    if (resetTimer.current) clearTimeout(resetTimer.current);\n    setState(\"pending\");\n    try {\n      await onAction();\n      setState(\"success\");\n      if (resetAfterMs > 0) resetTimer.current = setTimeout(() => setState(\"idle\"), resetAfterMs);\n    } catch (error) {\n      setState(\"idle\");\n      onActionError?.(error);\n    }\n  }\n\n  const pressStart = (event: PressEvent) => {\n    const target = event.target as HTMLElement;\n    // A pending button does not scale: drop the depth a previous press left behind.\n    if (state === \"pending\" || anchorsLayer(props)) target.style.removeProperty(\"--press-scale\");\n    else target.style.setProperty(\"--press-scale\", pressScaleFor(target.offsetWidth));\n    onPressStart?.(event);\n  };\n\n  const text = state === \"pending\" ? pendingLabel : state === \"success\" ? successLabel : label;\n  const status = state === \"pending\" ? pendingLabel : state === \"success\" ? successLabel : \"\";\n\n  return (\n    <>\n      <AriaButton\n        {...props}\n        ref={mergeRefs(ref, busy as RefObject<HTMLButtonElement | null>)}\n        // Not React Aria's isPending: it announces through a transient role=\"img\" node\n        // whose label id does not resolve, which axe rejects, and this button has its\n        // own live region. aria-disabled and aria-busy keep it focusable and announced.\n        aria-disabled={state === \"pending\" ? true : props[\"aria-disabled\"]}\n        data-pending={state === \"pending\" || undefined}\n        onPress={() => void run()}\n        onPressStart={pressStart}\n        data-slot=\"button\"\n        data-status={state}\n        className={cn(`${buttonVariants({ variant, size })} relative overflow-hidden`, className)}\n      >\n        <span\n          className=\"inline-flex min-h-5 items-center justify-center gap-2 whitespace-nowrap\"\n          aria-hidden=\"true\"\n        >\n          <MorphText text={text} />\n          <IconSlot state={state} />\n        </span>\n        <span className=\"sr-only\">{label}</span>\n      </AriaButton>\n      {/* Beside the button, not inside it: inside, its text would join the button's accessible name. */}\n      <span className=\"sr-only\" role=\"status\">\n        {status}\n      </span>\n    </>\n  );\n});\n"],"mappings":"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"}

package/dist/action-button/index.d.ts

@@ -0,0 +1,2 @@
+import { ActionButton, ActionButtonProps } from "./action-button.js";
+export { ActionButton, type ActionButtonProps };

package/dist/action-button/index.js

@@ -0,0 +1,2 @@
+import { ActionButton } from "./action-button.js";
+export { ActionButton };

package/dist/alert/alert.d.ts

@@ -24,7 +24,7 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
  * problems rather than porting them.
  */
 export declare const alertVariants: (props?: ({
-  variant?: "destructive" | "default" | null | undefined;
+  variant?: "default" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * An inline status message.
@@ -62,7 +62,21 @@ export interface AlertProps extends Omit<ComponentPropsWithoutRef<"div">, "title
    * @default 3
    */
   headingLevel?: 2 | 3 | 4 | 5 | 6;
+  /**
+   * Whether the alert is shown. Controlled: hiding it collapses its height and
+   * fades it out, and showing it again grows it back. An alert that is open on
+   * first render does not animate. Leave it out for an alert that is always there.
+   */
+  open?: boolean;
+  /**
+   * Adds a Dismiss button. Pressed, a controlled alert (`open` given) only calls
+   * this and waits to be told `open={false}`; an uncontrolled alert (no `open`)
+   * collapses first and then calls it.
+   */
+  onDismiss?: () => void;
+  /** The Dismiss button's accessible name. @default "Dismiss" */
+  dismissLabel?: string;
 }
-export declare function Alert({ className, variant, icon, title, headingLevel, children, ...props }: AlertProps): import("react").JSX.Element;
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 //# sourceMappingURL=alert.d.ts.map

package/dist/alert/alert.js

@@ -1,7 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { useHeightFollow } from "../lib/height-follow.js";
 import { cva } from "class-variance-authority";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, isValidElement, useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/alert/alert.tsx
 /**
 * Alert, ported from the legacy shadcn component.
@@ -36,31 +41,124 @@ const alertVariants = cva([
 	} },
 	defaultVariants: { variant: "default" }
 });
-function Alert({ className, variant, icon, title, headingLevel = 3, children, ...props }) {
+/** A string title or description swaps as a whole when its text changes. */
+function Swappable({ value, children }) {
+	if (typeof value !== "string" && typeof value !== "number") return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx(SwapText, {
+		swapKey: String(value),
+		className: "block",
+		children
+	});
+}
+/** The name an icon swaps under: a different icon component crossfades; the same one re-rendering stays still. */
+function iconKey(icon) {
+	if (!isValidElement(icon)) return "icon";
+	const type = icon.type;
+	return typeof type === "string" ? type : type.displayName ?? type.name ?? "icon";
+}
+function DismissGlyph() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.75",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		className: "size-4",
+		children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+	});
+}
+const Alert = forwardRef(function Alert({ className, variant, icon, title, headingLevel = 3, children, open, onDismiss, dismissLabel = "Dismiss", ...props }, ref) {
 	const Title = `h${headingLevel}`;
-	return /* @__PURE__ */ jsxs("div", {
+	const frame = useRef(null);
+	const content = useRef(null);
+	useHeightFollow(frame, content, `${typeof title === "string" ? title : ""}\n${children === void 0 ? "" : "details"}\n${typeof children === "string" || typeof children === "number" ? String(children) : ""}`);
+	const managed = open !== void 0 || onDismiss !== void 0;
+	const [dismissed, setDismissed] = useState(false);
+	const wanted = open ?? !dismissed;
+	const [rendered, setRendered] = useState(wanted);
+	const [shown, setShown] = useState(wanted);
+	if (wanted && !rendered) setRendered(true);
+	if (!wanted && shown) setShown(false);
+	useEffect(() => {
+		if (wanted && rendered && !shown) {
+			const frameId = requestAnimationFrame(() => setShown(true));
+			return () => cancelAnimationFrame(frameId);
+		}
+	}, [
+		wanted,
+		rendered,
+		shown
+	]);
+	const leaving = rendered && !wanted;
+	const finish = useCallback(() => {
+		setRendered(false);
+		if (open === void 0) onDismiss?.();
+	}, [onDismiss, open]);
+	useExitBackstop(leaving, finish, 900);
+	useIsomorphicLayoutEffect(() => {
+		if (leaving && prefersReducedMotion()) finish();
+	}, [leaving, finish]);
+	if (managed && !rendered) return null;
+	const alert = /* @__PURE__ */ jsxs("div", {
+		ref,
 		...props,
 		role: "alert",
 		"data-slot": "alert",
 		className: cn(alertVariants({ variant }), className),
-		children: [icon === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			"data-slot": "alert-icon",
-			className: "shrink-0 [&>svg]:pointer-events-none [&>svg:not([class*='size-'])]:size-(--icon-sm)",
-			children: icon
-		}), /* @__PURE__ */ jsxs("div", {
-			"data-slot": "alert-body",
-			className: "min-w-0 flex-1",
-			children: [title === void 0 ? null : /* @__PURE__ */ jsx(Title, {
-				"data-slot": "alert-title",
-				className: "mb-1 text-sm leading-(--leading-tight) font-medium",
-				children: title
-			}), children === void 0 ? null : /* @__PURE__ */ jsx("div", {
-				"data-slot": "alert-description",
-				children
-			})]
-		})]
+		children: [
+			icon === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "alert-icon",
+				className: "grid shrink-0 [&>svg]:pointer-events-none [&>svg:not([class*='size-'])]:size-(--icon-sm)",
+				children: /* @__PURE__ */ jsx(SwapText, {
+					swapKey: iconKey(icon),
+					motion: "glyph",
+					className: "grid place-items-center",
+					children: icon
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: frame,
+				"data-slot": "alert-body",
+				className: "height-follow min-w-0 flex-1",
+				children: /* @__PURE__ */ jsxs("div", {
+					ref: content,
+					children: [title === void 0 ? null : /* @__PURE__ */ jsx(Title, {
+						"data-slot": "alert-title",
+						className: "mb-1 text-sm leading-(--leading-tight) font-medium",
+						children: /* @__PURE__ */ jsx(Swappable, {
+							value: title,
+							children: title
+						})
+					}), children === void 0 ? null : /* @__PURE__ */ jsx("div", {
+						"data-slot": "alert-description",
+						children: /* @__PURE__ */ jsx(Swappable, {
+							value: children,
+							children
+						})
+					})]
+				})
+			}),
+			onDismiss ? /* @__PURE__ */ jsx(Button, {
+				"data-slot": "alert-dismiss",
+				"aria-label": typeof title === "string" ? `${dismissLabel}: ${title}` : dismissLabel,
+				onPress: () => open === void 0 ? setDismissed(true) : onDismiss(),
+				className: "calendar-nav-motion -my-1 -me-1.5 grid size-7 shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-muted-foreground outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)",
+				children: /* @__PURE__ */ jsx(DismissGlyph, {})
+			}) : null
+		]
 	});
-}
+	if (!managed) return alert;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-presence",
+		"data-shown": shown || void 0,
+		onTransitionEnd: (event) => {
+			if (leaving && event.target === event.currentTarget && event.propertyName === "grid-template-rows") finish();
+		},
+		className: "alert-presence",
+		children: /* @__PURE__ */ jsx("div", { children: alert })
+	});
+});
 //#endregion
 export { Alert, alertVariants };