@seekalfred/primitives 0.5.1 → 0.6.0

package/dist/button/button.js

@@ -1,16 +1,20 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { anchorsLayer, pressScaleFor, useAriaBusy, useExitBackstop, useLeavingItems, useMorphWidth } from "../lib/motion.js";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
-import { Button } from "react-aria-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, isValidElement, useCallback, useRef, useState } from "react";
+import { Button, Link } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/button/button.tsx
 /**
 * Variant classes, exported so a consumer can reuse the exact classes we ship
-* rather than guessing at them. This is also the supported answer for the
-* link-shaped cases React Aria's Button cannot cover: it never renders an
-* anchor, so `<a className={buttonVariants({ variant: "outline" })}>` is how a
-* real navigation target gets button styling until the Link primitive lands.
+* rather than guessing at them.
+*
+* NOT the answer for a link-shaped button any more: pass `href` to Button. On a
+* consumer's own <a> these classes get none of their states -- hover, press and
+* the focus ring all key on React Aria data attributes that a plain anchor never
+* receives, and the base sets outline-none, so keyboard focus was invisible.
 *
 * Ported from the legacy shadcn Button. The variant and size vocabulary is
 * deliberately identical so existing call sites migrate by rename, with six
@@ -23,6 +27,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * data-[focus-visible] is keyboard focus only, and data-[pressed] covers mouse,
 * touch and keyboard uniformly. The original had no pressed state at all.
 */
+const pressScale = "motion-safe:data-[pressed]:scale-(--press-scale) [&:is([aria-haspopup]:not([aria-haspopup=false]),[data-state],[role=combobox])]:scale-none!";
 const buttonVariants = cva([
 	"inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap",
 	"rounded-md font-sans font-medium",
@@ -35,49 +40,64 @@ const buttonVariants = cva([
 	"data-[focus-visible]:outline-(length:--focus-ring-width)",
 	"data-[focus-visible]:outline-offset-(--focus-ring-offset)",
 	"data-[focus-visible]:outline-(--color-ring)",
-	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)",
+	"data-[disabled]:cursor-not-allowed",
+	"[-webkit-tap-highlight-color:transparent]",
 	"data-[pending]:cursor-progress"
 ], {
 	variants: {
 		variant: {
 			primary: [
 				"bg-primary text-primary-foreground shadow-surface",
-				"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
-				"data-[hovered]:bg-primary-hover",
-				"data-[pressed]:bg-primary-pressed"
+				"motion-safe:button-motion",
+				pressScale,
+				"data-[hovered]:opacity-91 data-[hovered]:shadow-resting",
+				"data-[pressed]:opacity-84",
+				"data-[disabled]:opacity-(--opacity-button-disabled)"
 			],
 			secondary: [
 				"bg-secondary text-secondary-foreground shadow-surface",
-				"motion-safe:transition-colors",
-				"data-[hovered]:bg-secondary-hover",
-				"data-[pressed]:bg-secondary-pressed"
+				"motion-safe:button-motion",
+				pressScale,
+				"data-[hovered]:bg-secondary-hover data-[hovered]:shadow-resting",
+				"data-[pressed]:bg-secondary-pressed",
+				"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:border-border"
 			],
 			outline: [
 				"bg-background text-primary-strong border-(length:--border-width) border-primary-strong shadow-surface",
-				"motion-safe:transition-colors",
-				"data-[hovered]:bg-muted",
-				"data-[pressed]:bg-muted data-[pressed]:border-foreground"
+				"motion-safe:button-motion",
+				pressScale,
+				"data-[hovered]:bg-muted data-[hovered]:shadow-resting",
+				"data-[pressed]:bg-muted data-[pressed]:border-foreground",
+				"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:border-border"
 			],
 			outlineNeutral: [
 				"bg-background text-foreground border-(length:--border-width) border-border shadow-surface",
-				"motion-safe:transition-colors",
-				"data-[hovered]:bg-muted",
-				"data-[pressed]:bg-muted data-[pressed]:border-foreground"
+				"motion-safe:button-motion",
+				pressScale,
+				"data-[hovered]:bg-muted data-[hovered]:shadow-resting",
+				"data-[pressed]:bg-muted data-[pressed]:border-foreground",
+				"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:text-muted-foreground"
 			],
 			ghost: [
 				"bg-transparent text-primary-strong",
-				"motion-safe:transition-colors",
+				"motion-safe:button-motion",
+				pressScale,
 				"data-[hovered]:bg-muted",
+				"data-[disabled]:opacity-100 data-[disabled]:text-muted-foreground",
 				"data-[pressed]:bg-muted data-[pressed]:border-primary-strong"
 			],
 			destructive: [
 				"bg-destructive text-destructive-foreground shadow-surface",
-				"motion-safe:transition-colors",
+				"motion-safe:button-motion",
+				pressScale,
 				"data-[hovered]:bg-destructive-hover",
-				"data-[pressed]:bg-destructive-pressed"
+				"data-[pressed]:bg-destructive-pressed",
+				"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:border-border data-[disabled]:text-[color-mix(in_oklab,var(--color-destructive)_55%,var(--color-muted))]"
 			],
 			link: [
 				"bg-transparent text-primary-strong underline-offset-(--underline-offset)",
+				"motion-safe:button-motion",
+				"data-[disabled]:opacity-(--opacity-button-disabled)",
 				"data-[hovered]:underline",
 				"data-[pressed]:underline"
 			]
@@ -94,9 +114,101 @@ const buttonVariants = cva([
 		size: "md"
 	}
 });
+/** A key for the label content: text plus element names, so a new label or icon crossfades while prop-only updates stay in place. */
+function labelKey(node) {
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") return String(node);
+	if (Array.isArray(node)) return node.map(labelKey).join("");
+	if (!isValidElement(node)) return "";
+	const type = node.type;
+	return "<" + (typeof type === "string" ? type : type?.displayName ?? type?.name ?? "") + ">" + labelKey(node.props.children);
+}
+/** A label with no text once element names are stripped is an icon, which scales instead of rising. */
+const isIconKey = (key) => !/\S/.test(key.replace(/<[^>]*>/g, ""));
+function LeavingPhase({ phase, onDone }) {
+	const { id } = phase;
+	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();
+		},
+		style: phase.rect,
+		className: cn("absolute inline-flex items-center justify-center gap-(--density-control-gap) whitespace-nowrap [&_svg]:shrink-0", phase.icon ? "motion-safe:animate-glyph-out motion-reduce:animate-fade-out" : "motion-safe:animate-label-out motion-reduce:animate-fade-out"),
+		children: phase.node
+	});
+}
+/** The loading spinner: it scales in on the snappy spring, and out smaller with a little blur. Nothing animates if it is there on first mount. */
+function Loader({ show }) {
+	const [initial] = useState(show);
+	const [rendered, setRendered] = useState(show);
+	const [animated, setAnimated] = useState(false);
+	const leaving = rendered && !show;
+	if (show && !rendered) setRendered(true);
+	if (!animated && show !== initial) setAnimated(true);
+	const unmount = useCallback(() => setRendered(false), []);
+	useExitBackstop(leaving, unmount);
+	if (!rendered) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		onAnimationEnd: (event) => {
+			if (leaving && event.target === event.currentTarget) unmount();
+		},
+		className: cn("absolute top-1/2 left-1/2 -m-2 grid size-4", leaving ? "motion-safe:animate-loader-out motion-reduce:animate-fade-out" : animated && "motion-safe:animate-loader-in motion-reduce:animate-fade-in"),
+		children: /* @__PURE__ */ jsx("span", { className: "rounded-circle border-(length:--border-width-spinner) border-current border-r-transparent motion-safe:animate-spin-fast" })
+	});
+}
+/**
+* The button's inside: a loader, and a slot that holds the current label.
+*
+* A new label (a different text, or a different icon) mounts under a new key and
+* rises in while the old one is popped out of flow where it was and lifts away.
+* Nothing animates on first mount, and a prop-only update (same key) stays in
+* place.
+*/
+function ButtonContent({ children, pending }) {
+	const key = labelKey(children);
+	const icon = isIconKey(key);
+	const contentRef = useRef(null);
+	const phaseRef = useRef(null);
+	useMorphWidth(contentRef, key);
+	const { leaving, changed, remove } = useLeavingItems(key, {
+		node: children,
+		icon
+	}, () => phaseRef.current);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Loader, { show: pending }), /* @__PURE__ */ jsx("span", {
+		className: cn("button-slot", pending && "opacity-0"),
+		children: /* @__PURE__ */ jsxs("span", {
+			ref: contentRef,
+			className: "inline-flex flex-none items-center",
+			children: [leaving.map((item) => /* @__PURE__ */ jsx(LeavingPhase, {
+				phase: {
+					id: item.id,
+					node: item.value.node,
+					icon: item.value.icon,
+					rect: item.rect
+				},
+				onDone: remove
+			}, item.id)), /* @__PURE__ */ jsx("span", {
+				ref: phaseRef,
+				"data-slot": "button-label",
+				className: cn("inline-flex items-center justify-center gap-(--density-control-gap) whitespace-nowrap [&_svg]:shrink-0", changed && (icon ? "motion-safe:animate-glyph-in motion-reduce:animate-fade-in" : "motion-safe:animate-label-in motion-reduce:animate-fade-in")),
+				children
+			}, key)]
+		})
+	})] });
+}
 /**
 * A button.
 *
+* A label that changes (a different text, or a different icon) crossfades, and
+* the button's width springs to fit it. While that runs, the OUTGOING label is
+* still in the DOM for about 200ms, `aria-hidden` and out of flow, so read a
+* button's text after the change settles, and do not put `id`s, inputs or
+* anything stateful inside a label that changes. Text that changes constantly,
+* such as a live counter, crossfades every time it does.
+*
 * `size="icon"` renders a square button with no visible text, so it **must**
 * carry an `aria-label` -- otherwise it has no accessible name and fails axe's
 * `button-name` rule. The IconOnly story is the guard on that.
@@ -106,21 +218,52 @@ const buttonVariants = cva([
 * <Button startIcon={<SaveIcon aria-hidden />}>Save changes</Button>
 * <Button endIcon={<ChevronIcon aria-hidden />}>Continue</Button>
 * <Button variant="outline" size="icon" aria-label="Close"><XIcon /></Button>
+* <Button href="/reports" variant="outlineNeutral">View reports</Button>
 */
-const Button$1 = forwardRef(function Button$2({ className, variant, size, startIcon, endIcon, children, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Button, {
-		ref,
-		...props,
-		"data-slot": "button",
-		className: cn(buttonVariants({
-			variant,
-			size
-		}), className),
-		children: startIcon === void 0 && endIcon === void 0 ? children : (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+const Button$1 = forwardRef(function Button$2({ className, variant, size, startIcon, endIcon, children, href, target, rel, download, ...props }, ref) {
+	const classes = cn(buttonVariants({
+		variant,
+		size
+	}), className);
+	const button = useAriaBusy(props.isPending === true);
+	const content = (renderProps) => /* @__PURE__ */ jsxs(ButtonContent, {
+		pending: renderProps.isPending,
+		children: [
 			startIcon,
 			typeof children === "function" ? children(renderProps) : children,
 			endIcon
-		] })
+		]
+	});
+	const { onPressStart } = props;
+	const pressStart = (event) => {
+		if (!anchorsLayer(props)) {
+			const target = event.target;
+			target.style.setProperty("--press-scale", pressScaleFor(target.offsetWidth));
+		}
+		onPressStart?.(event);
+	};
+	if (href !== void 0) return /* @__PURE__ */ jsx(Link, {
+		ref,
+		...props,
+		onPressStart: pressStart,
+		href,
+		target,
+		rel,
+		download,
+		"data-slot": "button",
+		className: classes,
+		children: (renderProps) => content({
+			...renderProps,
+			isPending: false
+		})
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		ref: mergeRefs(ref, button),
+		...props,
+		onPressStart: pressStart,
+		"data-slot": "button",
+		className: classes,
+		children: content
 	});
 });
 //#endregion

package/dist/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["Button","AriaButton"],"sources":["../../src/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Button as AriaButton, type ButtonProps as AriaButtonProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Variant classes, exported so a consumer can reuse the exact classes we ship\n * rather than guessing at them. This is also the supported answer for the\n * link-shaped cases React Aria's Button cannot cover: it never renders an\n * anchor, so `<a className={buttonVariants({ variant: \"outline\" })}>` is how a\n * real navigation target gets button styling until the Link primitive lands.\n *\n * Ported from the legacy shadcn Button. The variant and size vocabulary is\n * deliberately identical so existing call sites migrate by rename, with six\n * corrections that the Alfred contracts require -- each marked below.\n *\n * Every string here is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would simply never be emitted.\n *\n * State comes from React Aria data attributes rather than pseudo-classes:\n * data-[focus-visible] is keyboard focus only, and data-[pressed] covers mouse,\n * touch and keyboard uniformly. The original had no pressed state at all.\n */\nexport const buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap\",\n    // No leading-* here on purpose. tailwind-merge treats a later text-* class\n    // as owning line-height (a Tailwind v3 assumption, where text-base carried\n    // one), so a leading-* in the base string is silently STRIPPED by cn() once\n    // a size variant adds text-base. It is not needed either: the control has a\n    // fixed height and centres with flex, so line-height cannot overflow it.\n    // A component with auto height must put leading-* AFTER its text-* class.\n    \"rounded-md font-sans font-medium\",\n    \"cursor-pointer select-none\",\n\n    // font-sans above is part of the same problem: a <button> does not inherit\n    // the page font, so without a reset it renders in the user-agent face\n    // (Arial in Chromium) rather than the design system's. The same applies to\n    // bg-transparent: an unstyled <button> paints the user-agent ButtonFace\n    // grey -- which is what surfaces the moment a fill class fails to resolve,\n    // and is why the paint stories compare against tokens rather than checking\n    // for transparency.\n    //\n    // The reset in @seekalfred/styles is OPT-IN, so a consumer may never load\n    // one. A bare <button> then keeps its user-agent border (2px, black, in\n    // Chromium) and inline padding, which is a black box around every variant\n    // that does not set a border of its own. The original inherited a zeroed\n    // border from Tailwind Preflight in the app; a library component cannot\n    // assume the consumer supplied one.\n    \"border-(length:--border-width) border-transparent bg-transparent\",\n\n    // Icon handling, ported verbatim: an svg child is sized unless the caller\n    // already said otherwise, and never swallows the press.\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n\n    // CORRECTION 1 -- the original focused with `ring-[3px]`, which is a\n    // box-shadow. Box-shadows are discarded under forced-colors, taking the\n    // only focus indication with them, and axe has no rule that would catch it\n    // (ARCHITECTURE section 5, rule 6). A real outline survives.\n    //\n    // outline-solid on the focus variant is load-bearing, not decoration.\n    // `outline-none` sets BOTH outline-style:none and --tw-outline-style:none,\n    // and Tailwind's outline-width utility resolves its style from that same\n    // variable -- so the focus variant applied a width and a colour while\n    // faithfully re-applying style:none, and painted nothing. The button was\n    // keyboard-focusable with no visible ring. axe has no focus-indicator\n    // rule, so every automated gate stayed green; the KeyboardFocus story now\n    // asserts outlineStyle directly.\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    // CORRECTION 2 -- `disabled:pointer-events-none` also kills the cursor, so\n    // the control reads as inert rather than as unavailable. React Aria already\n    // blocks activation; this only has to say so.\n    \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n\n    // React Aria's own pending state. The original had no equivalent.\n    \"data-[pending]:cursor-progress\",\n  ],\n  {\n    variants: {\n      variant: {\n        // CORRECTION 3 -- the legacy button filled this variant with the brand\n        // gradient. It is flat here, because the brand system caps\n        // --gradient-brand at one intentional element per view and keeps that\n        // budget for the logo and progress bars: \"a gradient on every button\n        // spends that budget everywhere. Ours is the flat primary.\"\n        //\n        // CORRECTION 4 -- the label is ink, not white. Brand orange #FF8431\n        // carries white at 2.44:1; ink clears it at 8.35:1, which is the brand\n        // system's own --text-on-orange rule. Its Button ships white only as a\n        // dated, individually signed-off exception, and this library's contrast\n        // contract is build-failing with no exemption mechanism to inherit it.\n        //\n        // CORRECTION 7 -- hover and pressed are their own TOKENS, not opacity\n        // modifiers on the fill. `bg-primary/90` lightened the button toward the\n        // page, which reads as receding rather than interactive and was nearly\n        // invisible; it also made the label pair unmeasurable, because an alpha\n        // composite depends on whatever happens to sit behind it. The brand system\n        // steps DOWN its ramp instead -- 500 rest, 600 hover, 700 pressed -- and\n        // every one of those fills is now in the contrast contract.\n        primary: [\n          \"bg-primary text-primary-foreground shadow-surface\",\n          \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n          \"data-[hovered]:bg-primary-hover\",\n          \"data-[pressed]:bg-primary-pressed\",\n        ],\n        secondary: [\n          \"bg-secondary text-secondary-foreground shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-secondary-hover\",\n          \"data-[pressed]:bg-secondary-pressed\",\n        ],\n        // primary-strong, never primary: the brand orange is 2.44:1 on the page\n        // and cannot legally be a label OR a border. That is the whole reason\n        // the token exists.\n        outline: [\n          \"bg-background text-primary-strong border-(length:--border-width) border-primary-strong shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-muted\",\n          \"data-[pressed]:bg-muted data-[pressed]:border-foreground\",\n        ],\n        /*\n         * The NEUTRAL outline, and the product's single most-used button:\n         * 99 call sites against 32 for the brand-coloured one.\n         *\n         * It exists because `outline` above is brand-toned -- orange border,\n         * orange label -- which is what the product calls `secondaryOutline`.\n         * Its plain `outline` is this: a grey border and ordinary body text,\n         * for a button that must not compete with the primary action next to\n         * it. One name could not cover both, and renaming `outline` would have\n         * silently repainted every existing call site of ours instead.\n         *\n         * `border` rather than `primary-strong`: --color-border is the token\n         * already held to the 3:1 non-text floor of WCAG 1.4.11, which is what\n         * a border separating a control from the page has to clear.\n         */\n        outlineNeutral: [\n          \"bg-background text-foreground border-(length:--border-width) border-border shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-muted\",\n          \"data-[pressed]:bg-muted data-[pressed]:border-foreground\",\n        ],\n        ghost: [\n          \"bg-transparent text-primary-strong\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-muted\",\n          // CORRECTION 5 -- pressed must not be background-only. A ghost button\n          // has no border at rest, so the pressed border is the non-colour cue\n          // that survives forced-colors (rule 6 again).\n          \"data-[pressed]:bg-muted data-[pressed]:border-primary-strong\",\n        ],\n        destructive: [\n          \"bg-destructive text-destructive-foreground shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-destructive-hover\",\n          \"data-[pressed]:bg-destructive-pressed\",\n        ],\n        link: [\n          \"bg-transparent text-primary-strong underline-offset-(--underline-offset)\",\n          \"data-[hovered]:underline\",\n          \"data-[pressed]:underline\",\n        ],\n      },\n      size: {\n        // Height, padding and label size all come from the control scale, so\n        // data-density moves them together. The icon-only variant is square at\n        // the md height. The legacy shadcn rule that tightened padding when a\n        // child was an icon is gone: it needed three more magic numbers, the\n        // brand system has no equivalent, and the gap token now owns icon\n        // spacing.\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md) text-base\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg) text-lg\",\n        // text-base even though there is no visible label: without it the\n        // user-agent default (13.33px in Chromium) leaks in and sizes any\n        // em-based child against the wrong root.\n        icon: \"size-(--density-control-h-md) px-0 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\n/**\n * Props.\n *\n * CORRECTION 6 -- the legacy Button was a plain `<button>`, so it took\n * `onClick`, `disabled` and Radix's `asChild`. React Aria's Button has none of\n * those: `ButtonProps` explicitly omits `onClick` and `href`. The replacements\n * are `onPress`, `isDisabled`, and `buttonVariants()` on the consumer's own\n * element. See the migration table in the package README.\n *\n * Deliberately NOT intersected with ComponentPropsWithoutRef<\"button\">: that\n * would advertise disabled, tabIndex and role, which React Aria does not\n * implement and silently ignores. React Aria already forwards the native event\n * surface, so nothing is lost.\n */\nexport interface ButtonProps\n  extends Omit<AriaButtonProps, \"className\" | \"style\">, VariantProps<typeof buttonVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Icon rendered before the label.\n   *\n   * Mark the glyph `aria-hidden` -- the label is the accessible name, and a\n   * second name source only makes the button announce twice. It is sized by the\n   * base `[&_svg]` rule at `--icon-sm` unless it carries a `size-*` class of\n   * its own, and spaced by `--density-control-gap`.\n   *\n   * Two named slots rather than one `icon` plus a position prop: a button can\n   * legitimately carry a leading glyph AND a trailing affordance, which one\n   * icon and a position cannot express.\n   *\n   * NOT the route for `size=\"icon\"`. An icon-only button passes its glyph as\n   * `children`, which is what gives it its single centred child.\n   */\n  startIcon?: ReactNode;\n  /** Icon rendered after the label. Same rules as {@link ButtonProps.startIcon}. */\n  endIcon?: ReactNode;\n}\n\n/**\n * A button.\n *\n * `size=\"icon\"` renders a square button with no visible text, so it **must**\n * carry an `aria-label` -- otherwise it has no accessible name and fails axe's\n * `button-name` rule. The IconOnly story is the guard on that.\n *\n * @example\n * <Button onPress={save}>Save changes</Button>\n * <Button startIcon={<SaveIcon aria-hidden />}>Save changes</Button>\n * <Button endIcon={<ChevronIcon aria-hidden />}>Continue</Button>\n * <Button variant=\"outline\" size=\"icon\" aria-label=\"Close\"><XIcon /></Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { className, variant, size, startIcon, endIcon, children, ...props },\n  ref,\n) {\n  return (\n    <AriaButton\n      ref={ref}\n      {...props}\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size }), className)}\n    >\n      {/*\n       * children passes through UNTOUCHED when neither slot is used, so a\n       * button with no icon renders byte-identical DOM to before this prop\n       * existed. That is what keeps this an additive change rather than a\n       * structural one -- and the childOrder assertions in the stories are what\n       * hold it true, since they read the button's direct children.\n       *\n       * The slot branch has to be a render function because React Aria's\n       * children are ChildrenOrFunction<ButtonRenderProps>: a consumer may pass\n       * a function to read isPressed or isPending, and wrapping the node\n       * directly would silently render that function as nothing. The fragment\n       * adds no element of its own.\n       */}\n      {startIcon === undefined && endIcon === undefined\n        ? children\n        : (renderProps) => (\n            <>\n              {startIcon}\n              {typeof children === \"function\" ? children(renderProps) : children}\n              {endIcon}\n            </>\n          )}\n    </AriaButton>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,iBAAiB,IAC5B;CACE;CAOA;CACA;CAgBA;CAIA;CACA;CAeA;CACA;CACA;CACA;CACA;CAKA;CAGA;AACF,GACA;CACE,UAAU;EACR,SAAS;GAoBP,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;GACF;GAIA,SAAS;IACP;IACA;IACA;IACA;GACF;GAgBA,gBAAgB;IACd;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IAIA;GACF;GACA,aAAa;IACX;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;GACF;EACF;EACA,MAAM;GAOJ,IAAI;GACJ,IAAI;GACJ,IAAI;GAIJ,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;;;;;;;;;;;;;AAqDA,MAAaA,WAAS,WAA2C,SAASA,SACxE,EAAE,WAAW,SAAS,MAAM,WAAW,SAAS,UAAU,GAAG,SAC7D,KACA;CACA,OACE,oBAACC,QAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAezD,UAAA,cAAc,KAAA,KAAa,YAAY,KAAA,IACpC,YACC,gBACC,qBAAA,UAAA,EAAA,UAAA;GACG;GACA,OAAO,aAAa,aAAa,SAAS,WAAW,IAAI;GACzD;EACD,EAAA,CAAA;CAEE,CAAA;AAEhB,CAAC"}
+{"version":3,"file":"button.js","names":["Button","AriaLink","AriaButton"],"sources":["../../src/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useRef,\n  useState,\n  type ForwardedRef,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport {\n  Button as AriaButton,\n  Link as AriaLink,\n  type ButtonProps as AriaButtonProps,\n  type ButtonRenderProps,\n  type LinkProps as AriaLinkProps,\n  type PressEvent,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport {\n  anchorsLayer,\n  pressScaleFor,\n  useAriaBusy,\n  useExitBackstop,\n  useLeavingItems,\n  useMorphWidth,\n  type Rect,\n} from \"../lib/motion.js\";\n\n/**\n * Variant classes, exported so a consumer can reuse the exact classes we ship\n * rather than guessing at them.\n *\n * NOT the answer for a link-shaped button any more: pass `href` to Button. On a\n * consumer's own <a> these classes get none of their states -- hover, press and\n * the focus ring all key on React Aria data attributes that a plain anchor never\n * receives, and the base sets outline-none, so keyboard focus was invisible.\n *\n * Ported from the legacy shadcn Button. The variant and size vocabulary is\n * deliberately identical so existing call sites migrate by rename, with six\n * corrections that the Alfred contracts require -- each marked below.\n *\n * Every string here is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would simply never be emitted.\n *\n * State comes from React Aria data attributes rather than pseudo-classes:\n * data-[focus-visible] is keyboard focus only, and data-[pressed] covers mouse,\n * touch and keyboard uniformly. The original had no pressed state at all.\n */\n/*\n * The press: the button scales down while pressed (see onPressStart for the\n * scale, which depends on width) and springs back on release. Anchors of\n * floating layers never scale: a menu that opens on pointerdown would measure a\n * shrunken trigger.\n */\nconst pressScale =\n  \"motion-safe:data-[pressed]:scale-(--press-scale) [&:is([aria-haspopup]:not([aria-haspopup=false]),[data-state],[role=combobox])]:scale-none!\";\n\nexport const buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap\",\n    // No leading-* here on purpose. tailwind-merge treats a later text-* class\n    // as owning line-height (a Tailwind v3 assumption, where text-base carried\n    // one), so a leading-* in the base string is silently STRIPPED by cn() once\n    // a size variant adds text-base. It is not needed either: the control has a\n    // fixed height and centres with flex, so line-height cannot overflow it.\n    // A component with auto height must put leading-* AFTER its text-* class.\n    \"rounded-md font-sans font-medium\",\n    \"cursor-pointer select-none\",\n\n    // font-sans above is part of the same problem: a <button> does not inherit\n    // the page font, so without a reset it renders in the user-agent face\n    // (Arial in Chromium) rather than the design system's. The same applies to\n    // bg-transparent: an unstyled <button> paints the user-agent ButtonFace\n    // grey -- which is what surfaces the moment a fill class fails to resolve,\n    // and is why the paint stories compare against tokens rather than checking\n    // for transparency.\n    //\n    // The reset in @seekalfred/styles is OPT-IN, so a consumer may never load\n    // one. A bare <button> then keeps its user-agent border (2px, black, in\n    // Chromium) and inline padding, which is a black box around every variant\n    // that does not set a border of its own. The original inherited a zeroed\n    // border from Tailwind Preflight in the app; a library component cannot\n    // assume the consumer supplied one.\n    \"border-(length:--border-width) border-transparent bg-transparent\",\n\n    // Icon handling, ported verbatim: an svg child is sized unless the caller\n    // already said otherwise, and never swallows the press.\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n\n    // CORRECTION 1 -- the original focused with `ring-[3px]`, which is a\n    // box-shadow. Box-shadows are discarded under forced-colors, taking the\n    // only focus indication with them, and axe has no rule that would catch it\n    // (ARCHITECTURE section 5, rule 6). A real outline survives.\n    //\n    // outline-solid on the focus variant is load-bearing, not decoration.\n    // `outline-none` sets BOTH outline-style:none and --tw-outline-style:none,\n    // and Tailwind's outline-width utility resolves its style from that same\n    // variable -- so the focus variant applied a width and a colour while\n    // faithfully re-applying style:none, and painted nothing. The button was\n    // keyboard-focusable with no visible ring. axe has no focus-indicator\n    // rule, so every automated gate stayed green; the KeyboardFocus story now\n    // asserts outlineStyle directly.\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    // CORRECTION 2 -- `disabled:pointer-events-none` also kills the cursor, so\n    // the control reads as inert rather than as unavailable. React Aria already\n    // blocks activation; this only has to say so.\n    // The opacity half of the disabled look moved into each variant: the\n    // outlined and ghost buttons stay fully opaque and mute their colours\n    // instead, which a single base opacity cannot express.\n    \"data-[disabled]:cursor-not-allowed\",\n    \"[-webkit-tap-highlight-color:transparent]\",\n\n    // React Aria's own pending state. The original had no equivalent.\n    \"data-[pending]:cursor-progress\",\n  ],\n  {\n    variants: {\n      variant: {\n        // CORRECTION 3 -- the legacy button filled this variant with the brand\n        // gradient. It is flat here, because the brand system caps\n        // --gradient-brand at one intentional element per view and keeps that\n        // budget for the logo and progress bars: \"a gradient on every button\n        // spends that budget everywhere. Ours is the flat primary.\"\n        //\n        // CORRECTION 4 -- the label is ink, not white. Brand orange #FF8431\n        // carries white at 2.44:1; ink clears it at 8.35:1, which is the brand\n        // system's own --text-on-orange rule. Its Button ships white only as a\n        // dated, individually signed-off exception, and this library's contrast\n        // contract is build-failing with no exemption mechanism to inherit it.\n        //\n        // CORRECTION 7 (reversed by decision) -- hover and pressed used to be\n        // their own TOKENS (500 rest, 600 hover, 700 pressed), because an\n        // opacity modifier lightens the button toward the page, which reads as\n        // receding, and makes the label pair unmeasurable: an alpha composite\n        // depends on whatever sits behind it. They are now opacity steps (.91,\n        // .84) plus the resting shadow, by explicit decision, so the hover and\n        // pressed fills are no longer used here. The contrast contract still\n        // lists them (contrast-pairs.json) but cannot express an alpha, so the\n        // faded states were measured by hand: ink on orange, both faded over\n        // the page, is 6.54:1 at .84 on the light page and 6.08:1 on the dark\n        // one (8.35:1 at rest), all above the 4.5:1 floor.\n        primary: [\n          \"bg-primary text-primary-foreground shadow-surface\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:opacity-91 data-[hovered]:shadow-resting\",\n          \"data-[pressed]:opacity-84\",\n          \"data-[disabled]:opacity-(--opacity-button-disabled)\",\n        ],\n        secondary: [\n          \"bg-secondary text-secondary-foreground shadow-surface\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-secondary-hover data-[hovered]:shadow-resting\",\n          \"data-[pressed]:bg-secondary-pressed\",\n          // A disabled outlined button keeps its shape and mutes its\n          // label, so it reads as a button that is off, not as plain text.\n          \"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:border-border\",\n        ],\n        // primary-strong, never primary: the brand orange is 2.44:1 on the page\n        // and cannot legally be a label OR a border. That is the whole reason\n        // the token exists.\n        outline: [\n          \"bg-background text-primary-strong border-(length:--border-width) border-primary-strong shadow-surface\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-muted data-[hovered]:shadow-resting\",\n          \"data-[pressed]:bg-muted data-[pressed]:border-foreground\",\n          \"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:border-border\",\n        ],\n        /*\n         * The NEUTRAL outline, and the product's single most-used button:\n         * 99 call sites against 32 for the brand-coloured one.\n         *\n         * It exists because `outline` above is brand-toned -- orange border,\n         * orange label -- which is what the product calls `secondaryOutline`.\n         * Its plain `outline` is this: a grey border and ordinary body text,\n         * for a button that must not compete with the primary action next to\n         * it. One name could not cover both, and renaming `outline` would have\n         * silently repainted every existing call site of ours instead.\n         *\n         * `border` rather than `primary-strong`: --color-border is the token\n         * already held to the 3:1 non-text floor of WCAG 1.4.11, which is what\n         * a border separating a control from the page has to clear.\n         */\n        outlineNeutral: [\n          \"bg-background text-foreground border-(length:--border-width) border-border shadow-surface\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-muted data-[hovered]:shadow-resting\",\n          \"data-[pressed]:bg-muted data-[pressed]:border-foreground\",\n          \"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:text-muted-foreground\",\n        ],\n        ghost: [\n          \"bg-transparent text-primary-strong\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-muted\",\n          \"data-[disabled]:opacity-100 data-[disabled]:text-muted-foreground\",\n          // CORRECTION 5 -- pressed must not be background-only. A ghost button\n          // has no border at rest, so the pressed border is the non-colour cue\n          // that survives forced-colors (rule 6 again).\n          \"data-[pressed]:bg-muted data-[pressed]:border-primary-strong\",\n        ],\n        destructive: [\n          \"bg-destructive text-destructive-foreground shadow-surface\",\n          \"motion-safe:button-motion\",\n          pressScale,\n          \"data-[hovered]:bg-destructive-hover\",\n          \"data-[pressed]:bg-destructive-pressed\",\n          // Muted fill, label tinted toward destructive.\n          \"data-[disabled]:opacity-100 data-[disabled]:bg-muted data-[disabled]:border-border data-[disabled]:text-[color-mix(in_oklab,var(--color-destructive)_55%,var(--color-muted))]\",\n        ],\n        link: [\n          \"bg-transparent text-primary-strong underline-offset-(--underline-offset)\",\n          \"motion-safe:button-motion\",\n          \"data-[disabled]:opacity-(--opacity-button-disabled)\",\n          \"data-[hovered]:underline\",\n          \"data-[pressed]:underline\",\n        ],\n      },\n      size: {\n        // Height, padding and label size all come from the control scale, so\n        // data-density moves them together. The icon-only variant is square at\n        // the md height. The legacy shadcn rule that tightened padding when a\n        // child was an icon is gone: it needed three more magic numbers, the\n        // brand system has no equivalent, and the gap token now owns icon\n        // spacing.\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md) text-base\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg) text-lg\",\n        // text-base even though there is no visible label: without it the\n        // user-agent default (13.33px in Chromium) leaks in and sizes any\n        // em-based child against the wrong root.\n        icon: \"size-(--density-control-h-md) px-0 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\n/*\n * The label motion, without an animation library.\n *\n * A presence library would keep the outgoing label mounted for the crossfade\n * and drive a motion value for the width morph. CSS cannot keep an outgoing\n * label mounted or observe its own content width, so those two jobs are the\n * plain React below; every animation itself is a CSS keyframe or transition\n * (@seekalfred/styles motion.css, the button-* utilities in styles.css, the\n * --animate-* tokens).\n */\n\n/** A key for the label content: text plus element names, so a new label or icon crossfades while prop-only updates stay in place. */\nfunction labelKey(node: ReactNode): string {\n  if (node == null || typeof node === \"boolean\") return \"\";\n  if (typeof node === \"string\" || typeof node === \"number\" || typeof node === \"bigint\") return String(node);\n  if (Array.isArray(node)) return node.map(labelKey).join(\"\");\n  if (!isValidElement(node)) return \"\";\n  const type = node.type as string | { displayName?: string; name?: string };\n  return \"<\" + (typeof type === \"string\" ? type : (type?.displayName ?? type?.name ?? \"\")) + \">\" + labelKey((node.props as { children?: ReactNode }).children);\n}\n\n/** A label with no text once element names are stripped is an icon, which scales instead of rising. */\nconst isIconKey = (key: string) => !/\\S/.test(key.replace(/<[^>]*>/g, \"\"));\n\ninterface LeavingLabel {\n  id: number;\n  node: ReactNode;\n  icon: boolean;\n  rect: Rect;\n}\n\nfunction LeavingPhase({ phase, onDone }: { phase: LeavingLabel; onDone: (id: number) => void }) {\n  const { id } = phase;\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      style={phase.rect}\n      className={cn(\n        \"absolute inline-flex items-center justify-center gap-(--density-control-gap) whitespace-nowrap [&_svg]:shrink-0\",\n        phase.icon\n          ? \"motion-safe:animate-glyph-out motion-reduce:animate-fade-out\"\n          : \"motion-safe:animate-label-out motion-reduce:animate-fade-out\",\n      )}\n    >\n      {phase.node}\n    </span>\n  );\n}\n\n/** The loading spinner: it scales in on the snappy spring, and out smaller with a little blur. Nothing animates if it is there on first mount. */\nfunction Loader({ show }: { show: boolean }) {\n  const [initial] = useState(show);\n  const [rendered, setRendered] = useState(show);\n  const [animated, setAnimated] = useState(false);\n  const leaving = rendered && !show;\n  if (show && !rendered) setRendered(true);\n  if (!animated && show !== initial) setAnimated(true);\n  const unmount = useCallback(() => setRendered(false), []);\n  useExitBackstop(leaving, unmount);\n  if (!rendered) return null;\n  return (\n    <span\n      aria-hidden=\"true\"\n      onAnimationEnd={(event) => {\n        if (leaving && event.target === event.currentTarget) unmount();\n      }}\n      className={cn(\n        \"absolute top-1/2 left-1/2 -m-2 grid size-4\",\n        leaving\n          ? \"motion-safe:animate-loader-out motion-reduce:animate-fade-out\"\n          : animated && \"motion-safe:animate-loader-in motion-reduce:animate-fade-in\",\n      )}\n    >\n      <span className=\"rounded-circle border-(length:--border-width-spinner) border-current border-r-transparent motion-safe:animate-spin-fast\" />\n    </span>\n  );\n}\n\n/**\n * The button's inside: a loader, and a slot that holds the current label.\n *\n * A new label (a different text, or a different icon) mounts under a new key and\n * rises in while the old one is popped out of flow where it was and lifts away.\n * Nothing animates on first mount, and a prop-only update (same key) stays in\n * place.\n */\nfunction ButtonContent({ children, pending }: { children: ReactNode; pending: boolean }) {\n  const key = labelKey(children);\n  const icon = isIconKey(key);\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const phaseRef = useRef<HTMLSpanElement>(null);\n\n  useMorphWidth(contentRef, key);\n  const { leaving, changed, remove } = useLeavingItems(key, { node: children, icon }, () => phaseRef.current);\n\n  return (\n    <>\n      <Loader show={pending} />\n      <span className={cn(\"button-slot\", pending && \"opacity-0\")}>\n        <span ref={contentRef} className=\"inline-flex flex-none items-center\">\n          {leaving.map((item) => (\n            <LeavingPhase key={item.id} phase={{ id: item.id, node: item.value.node, icon: item.value.icon, rect: item.rect }} onDone={remove} />\n          ))}\n          <span\n            key={key}\n            ref={phaseRef}\n            data-slot=\"button-label\"\n            className={cn(\n              \"inline-flex items-center justify-center gap-(--density-control-gap) whitespace-nowrap [&_svg]:shrink-0\",\n              changed &&\n                (icon\n                  ? \"motion-safe:animate-glyph-in motion-reduce:animate-fade-in\"\n                  : \"motion-safe:animate-label-in motion-reduce:animate-fade-in\"),\n            )}\n          >\n            {children}\n          </span>\n        </span>\n      </span>\n    </>\n  );\n}\n\n/**\n * Props.\n *\n * CORRECTION 6 -- the legacy Button was a plain `<button>`, so it took\n * `onClick`, `disabled` and Radix's `asChild`. React Aria's Button has none of\n * those: `ButtonProps` explicitly omits `onClick` and `href`. The replacements\n * are `onPress`, `isDisabled`, and `href` -- which renders React Aria's Link in\n * place of its Button. See the migration table in the package README.\n *\n * Deliberately NOT intersected with ComponentPropsWithoutRef<\"button\">: that\n * would advertise disabled, tabIndex and role, which React Aria does not\n * implement and silently ignores. React Aria already forwards the native event\n * surface, so nothing is lost.\n */\nexport interface ButtonProps\n  extends Omit<AriaButtonProps, \"className\" | \"style\">, VariantProps<typeof buttonVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Icon rendered before the label.\n   *\n   * Mark the glyph `aria-hidden` -- the label is the accessible name, and a\n   * second name source only makes the button announce twice. It is sized by the\n   * base `[&_svg]` rule at `--icon-sm` unless it carries a `size-*` class of\n   * its own, and spaced by `--density-control-gap`.\n   *\n   * Two named slots rather than one `icon` plus a position prop: a button can\n   * legitimately carry a leading glyph AND a trailing affordance, which one\n   * icon and a position cannot express.\n   *\n   * NOT the route for `size=\"icon\"`. An icon-only button passes its glyph as\n   * `children`, which is what gives it its single centred child.\n   */\n  startIcon?: ReactNode;\n  /** Icon rendered after the label. Same rules as {@link ButtonProps.startIcon}. */\n  endIcon?: ReactNode;\n  /**\n   * Makes the button a link. It renders React Aria's `Link` -- a real `<a>`,\n   * announced as a link -- with exactly the classes a button of the same\n   * `variant` and `size` gets, and the same hover, press and focus-ring states.\n   *\n   * Use it whenever activating the control navigates. A button that navigates\n   * cannot be opened in a new tab, is announced as the wrong role, and is\n   * skipped by a screen reader's list of links.\n   *\n   * Client-side routing needs React Aria's `RouterProvider` mounted once above\n   * it; without one, an `href` is an ordinary page load, which is also what an\n   * external or download link wants.\n   *\n   * Button-only props have nothing to act on here: `type`, `form*` and\n   * `isPending` are ignored, and the `ref` receives the `<a>`.\n   */\n  href?: AriaLinkProps[\"href\"];\n  /** With `href` only: where to open it, e.g. `\"_blank\"`. */\n  target?: AriaLinkProps[\"target\"];\n  /** With `href` only. Give `\"noreferrer\"` alongside `target=\"_blank\"` to an external site. */\n  rel?: AriaLinkProps[\"rel\"];\n  /** With `href` only: download the target instead of opening it, optionally under this file name. */\n  download?: AriaLinkProps[\"download\"];\n}\n\n/**\n * A button.\n *\n * A label that changes (a different text, or a different icon) crossfades, and\n * the button's width springs to fit it. While that runs, the OUTGOING label is\n * still in the DOM for about 200ms, `aria-hidden` and out of flow, so read a\n * button's text after the change settles, and do not put `id`s, inputs or\n * anything stateful inside a label that changes. Text that changes constantly,\n * such as a live counter, crossfades every time it does.\n *\n * `size=\"icon\"` renders a square button with no visible text, so it **must**\n * carry an `aria-label` -- otherwise it has no accessible name and fails axe's\n * `button-name` rule. The IconOnly story is the guard on that.\n *\n * @example\n * <Button onPress={save}>Save changes</Button>\n * <Button startIcon={<SaveIcon aria-hidden />}>Save changes</Button>\n * <Button endIcon={<ChevronIcon aria-hidden />}>Continue</Button>\n * <Button variant=\"outline\" size=\"icon\" aria-label=\"Close\"><XIcon /></Button>\n * <Button href=\"/reports\" variant=\"outlineNeutral\">View reports</Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { className, variant, size, startIcon, endIcon, children, href, target, rel, download, ...props },\n  ref,\n) {\n  const classes = cn(buttonVariants({ variant, size }), className);\n\n  const button = useAriaBusy(props.isPending === true);\n\n  /*\n   * children passes through UNTOUCHED when neither slot is used, so a button\n   * with no icon renders byte-identical DOM to before this prop existed. That is\n   * what keeps this an additive change rather than a structural one -- and the\n   * childOrder assertions in the stories are what hold it true, since they read\n   * the button's direct children.\n   *\n   * The slot branch has to be a render function because React Aria's children\n   * are ChildrenOrFunction<ButtonRenderProps>: a consumer may pass a function to\n   * read isPressed or isPending, and wrapping the node directly would silently\n   * render that function as nothing. The fragment adds no element of its own.\n   */\n  const content = (renderProps: ButtonRenderProps & { defaultChildren: ReactNode | undefined }) => (\n    <ButtonContent pending={renderProps.isPending}>\n      {startIcon}\n      {typeof children === \"function\" ? children(renderProps) : children}\n      {endIcon}\n    </ButtonContent>\n  );\n\n  const { onPressStart } = props;\n  const pressStart = (event: PressEvent) => {\n    if (!anchorsLayer(props)) {\n      const target = event.target as HTMLElement;\n      target.style.setProperty(\"--press-scale\", pressScaleFor(target.offsetWidth));\n    }\n    onPressStart?.(event);\n  };\n\n  if (href !== undefined) {\n    /*\n     * The same classes on React Aria's Link. It sets data-hovered,\n     * data-pressed and data-focus-visible on the <a>, which is what every\n     * state class above keys on -- nothing here is re-implemented.\n     *\n     * Button-only props need no stripping: Link runs its props through\n     * filterDOMProps, so `type` never reaches the <a>, and `isPending` is not a\n     * DOM prop. A link has no pending state, so a render-function child is told\n     * it is not pending rather than handed an object missing the field. The ref\n     * is typed for the button this usually is; with href it receives the <a>,\n     * which the TSDoc on `href` says.\n     */\n    return (\n      <AriaLink\n        ref={ref as unknown as ForwardedRef<HTMLAnchorElement>}\n        {...(props as Omit<AriaLinkProps, \"className\" | \"children\">)}\n        onPressStart={pressStart}\n        href={href}\n        target={target}\n        rel={rel}\n        download={download}\n        data-slot=\"button\"\n        className={classes}\n      >\n        {(renderProps) => content({ ...renderProps, isPending: false })}\n      </AriaLink>\n    );\n  }\n\n  return (\n    <AriaButton ref={mergeRefs(ref, button as RefObject<HTMLButtonElement | null>)} {...props} onPressStart={pressStart} data-slot=\"button\" className={classes}>\n      {content}\n    </AriaButton>\n  );\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,76 @@
+import { ReactNode } from "react";
+//#region src/button-group/button-group.d.ts
+export type ButtonGroupVariant = "outline" | "solid";
+export type ButtonGroupSize = "sm" | "md";
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+export interface ButtonGroupItem {
+  /** Stable key for the segment. */
+  id: string;
+  /** Visible text and the accessible name. Changing it crossfades in place, so "Share" can answer "Copied". */
+  label: string;
+  /** Every other label this segment can show, such as ["Copied"]. The segment sizes to the widest, so a label change never resizes it. */
+  reserve?: string[];
+  /** An icon before the label. Swapping it for another morphs; re-rendering the same icon does not. Mark it `aria-hidden`. */
+  icon?: ReactNode;
+  /** Shows only the icon; the label becomes the accessible name and the tooltip. */
+  iconOnly?: boolean;
+  /** Visible content in place of the label, such as a live value. The label stays the accessible name. */
+  content?: ReactNode;
+  onSelect?: () => void;
+  /** Renders the segment as a link. */
+  href?: string;
+  isDisabled?: boolean;
+}
+export interface ButtonGroupMenuItem {
+  id: string;
+  label: string;
+  /** An icon before the label. Mark it `aria-hidden`. */
+  icon?: ReactNode;
+  onSelect?: () => void;
+  href?: string;
+  isDisabled?: boolean;
+  /** Colours the item as a destructive action. */
+  destructive?: boolean;
+}
+export interface ButtonGroupMenu {
+  /** Accessible name and tooltip of the chevron segment, such as "More actions". */
+  label: string;
+  items: ButtonGroupMenuItem[];
+}
+export interface ButtonGroupProps {
+  items: ButtonGroupItem[];
+  /** Adds a trailing chevron segment that opens these actions in a menu aligned to the group's edge. */
+  menu?: ButtonGroupMenu;
+  /** Accessible name of the group, such as "Document actions". */
+  label: string;
+  /** @default "outline" */
+  variant?: ButtonGroupVariant;
+  /** @default "md" */
+  size?: ButtonGroupSize;
+  /** @default "horizontal" */
+  orientation?: ButtonGroupOrientation;
+  /** When the row does not fit its container, segments with an icon drop their label and keep the icon. Horizontal only. @default true */
+  collapseLabels?: boolean;
+  /** Disables every segment and the menu. */
+  isDisabled?: boolean;
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * Related actions joined into one surface: a shared border and radius, hairline
+ * dividers, no gaps. One soft highlight glides between segments under the
+ * pointer or keyboard focus, the pressed segment answers in place, and an
+ * optional chevron segment opens more actions in a menu aligned to the group's
+ * edge.
+ *
+ * Tab visits every segment in order; the arrow keys along the orientation, Home
+ * and End also move between them. A segment's label can change in place ("Share"
+ * answers "Copied") without resizing it, and a label that changes right after its
+ * segment is pressed is announced once.
+ *
+ * @example
+ * <ButtonGroup label="Document actions" items={[{ id: "edit", label: "Edit" }, { id: "share", label: "Share", reserve: ["Copied"] }]} />
+ */
+export declare function ButtonGroup({ items, menu, label, variant, size, orientation, collapseLabels, isDisabled, className }: ButtonGroupProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=button-group.d.ts.map