@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/chip-group/chip-group.js

@@ -0,0 +1,148 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { SwapText } from "../lib/swap-text.js";
+import { useHeightFollow } from "../lib/height-follow.js";
+import { useFlip } from "../lib/flip.js";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chip-group/chip-group.tsx
+/** Roving-focus key of the overflow chip; the NUL keeps it from colliding with any option value. */
+const MORE = "\0more";
+/** Stagger between chips revealed by the overflow (ms), at most 300 in all. */
+const STAGGER_MS = 35;
+const ChipGroup = forwardRef(function ChipGroup({ options, value, onValueChange, label, multiple = true, maxVisible = Infinity, moreLabel = (hidden) => `+${hidden} more`, lessLabel = "Show less", className }, ref) {
+	const [expanded, setExpanded] = useState(false);
+	const [pinned, setPinned] = useState(value);
+	const [active, setActive] = useState(null);
+	const foldable = options.length > maxVisible;
+	const visible = !foldable || expanded ? options : options.filter((option, index) => index < maxVisible || pinned.includes(option.value) || value.includes(option.value));
+	const hidden = options.length - visible.length;
+	const showMore = foldable && (expanded || hidden > 0);
+	const keys = [...visible.map((option) => option.value), ...showMore ? [MORE] : []];
+	const tabStop = active !== null && keys.includes(active) ? active : visible.find((option) => value.includes(option.value))?.value ?? keys[0];
+	const group = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, group), [ref]);
+	const frame = useRef(null);
+	const morphKey = `${expanded}|${value.join(",")}`;
+	useFlip(group, morphKey, "var(--duration-morph)", "var(--ease-morph)");
+	useHeightFollow(frame, group, morphKey);
+	const seen = useRef(new Set(options.map((option) => option.value)));
+	const revealedAt = /* @__PURE__ */ new Map();
+	let rank = 0;
+	for (const option of visible) if (!seen.current.has(option.value)) revealedAt.set(option.value, Math.min(rank++ * STAGGER_MS, 300));
+	function toggle(next) {
+		const on = value.includes(next);
+		if (!multiple) {
+			onValueChange(on ? [] : [next]);
+			return;
+		}
+		onValueChange(options.filter((option) => option.value === next ? !on : value.includes(option.value)).map((option) => option.value));
+	}
+	function toggleMore() {
+		if (expanded) setPinned(value);
+		else seen.current = new Set(visible.map((option) => option.value));
+		setExpanded(!expanded);
+	}
+	function onKeyDown(event) {
+		const buttons = Array.from(event.currentTarget.querySelectorAll("button[data-chip]"));
+		const index = buttons.indexOf(document.activeElement);
+		if (index < 0) return;
+		const last = buttons.length - 1;
+		const moves = {
+			ArrowRight: index === last ? 0 : index + 1,
+			ArrowDown: index === last ? 0 : index + 1,
+			ArrowLeft: index === 0 ? last : index - 1,
+			ArrowUp: index === 0 ? last : index - 1,
+			Home: 0,
+			End: last
+		};
+		if (!(event.key in moves)) return;
+		event.preventDefault();
+		buttons[moves[event.key]].focus();
+	}
+	const moreText = expanded ? lessLabel : moreLabel(hidden);
+	return /* @__PURE__ */ jsx("div", {
+		ref: frame,
+		"data-slot": "chip-group-frame",
+		className: "height-follow min-w-0",
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: refs,
+			role: "group",
+			"aria-label": label,
+			"data-slot": "chip-group",
+			onKeyDown,
+			className: cn("relative isolate flex flex-wrap gap-2 box-border font-sans", className),
+			children: [visible.map((option) => {
+				const selected = value.includes(option.value);
+				const delay = revealedAt.get(option.value);
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-flip": "",
+					"data-chip": option.value,
+					"data-slot": "chip",
+					"aria-pressed": selected,
+					tabIndex: tabStop === option.value ? 0 : -1,
+					onClick: () => toggle(option.value),
+					onFocus: () => setActive(option.value),
+					style: delay === void 0 ? void 0 : { animationDelay: `${delay}ms` },
+					className: cn("chip", delay === void 0 ? "" : "motion-safe:animate-chip-reveal"),
+					children: /* @__PURE__ */ jsxs("span", {
+						"data-selected": selected,
+						className: "chip-body",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "chip-check",
+								children: /* @__PURE__ */ jsx("svg", {
+									width: 14,
+									height: 14,
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: 2.5,
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									children: /* @__PURE__ */ jsx("path", {
+										d: "M4 12.5 9.5 18 20 6.5",
+										pathLength: 1
+									})
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "chip-slot"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: option.label
+							})
+						]
+					})
+				}, option.value);
+			}), showMore ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-flip": "",
+				"data-chip": MORE,
+				"data-more": "",
+				"aria-expanded": expanded,
+				tabIndex: tabStop === MORE ? 0 : -1,
+				onClick: toggleMore,
+				onFocus: () => setActive(MORE),
+				className: "chip chip-more",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "chip-body tabular-nums",
+					children: /* @__PURE__ */ jsx(SwapText, {
+						swapKey: moreText,
+						motion: "rise",
+						children: moreText
+					})
+				})
+			}, MORE) : null]
+		})
+	});
+});
+//#endregion
+export { ChipGroup };
+
+//# sourceMappingURL=chip-group.js.map

package/dist/chip-group/chip-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-group.js","names":[],"sources":["../../src/chip-group/chip-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useMemo, useRef, useState, type KeyboardEvent } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useFlip } from \"../lib/flip.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * ChipGroup: selectable filter chips for narrowing a list by facets people\n * toggle often, such as topics, statuses or tags.\n *\n * Selecting a chip grows a check in at its start (it draws itself as it\n * scales up from a soft blur), the label slides over, the chip widens on the\n * morph spring, and its neighbours glide to their new places, even across\n * lines. The row follows its own height. Long sets fold behind a \"+N more\"\n * chip; opening it grows the hidden chips in one after another. Arrow keys move\n * between chips, Space or Enter toggles, and each chip is a pressed or\n * unpressed button. Selected reads as a tint plus the check, never colour alone.\n */\nexport interface ChipOption {\n  value: string;\n  label: string;\n}\n\nexport interface ChipGroupProps {\n  options: ChipOption[];\n  value: string[];\n  onValueChange: (value: string[]) => void;\n  /** Accessible name of the group, such as \"Topics\". */\n  label: string;\n  /** Allow several chips at once. In single mode the selected chip can still be cleared. @default true */\n  multiple?: boolean;\n  /** Chips shown before the rest fold behind a \"+N more\" chip. Chips selected when it folds stay in view. */\n  maxVisible?: number;\n  /** Text of the overflow chip. @default (hidden) => `+${hidden} more` */\n  moreLabel?: (hidden: number) => string;\n  /** @default \"Show less\" */\n  lessLabel?: string;\n  /** Extra classes for the group. Merged last. */\n  className?: string;\n}\n\n/** Roving-focus key of the overflow chip; the NUL keeps it from colliding with any option value. */\nconst MORE = \"\\u0000more\";\n/** Stagger between chips revealed by the overflow (ms), at most 300 in all. */\nconst STAGGER_MS = 35;\n\nexport const ChipGroup = forwardRef<HTMLDivElement, ChipGroupProps>(function ChipGroup(\n  {\n    options,\n    value,\n    onValueChange,\n    label,\n    multiple = true,\n    maxVisible = Infinity,\n    moreLabel = (hidden) => `+${hidden} more`,\n    lessLabel = \"Show less\",\n    className,\n  },\n  ref,\n) {\n  const [expanded, setExpanded] = useState(false);\n  // Chips selected when the overflow folds stay in view, so a selection is never hidden.\n  const [pinned, setPinned] = useState<string[]>(value);\n  const [active, setActive] = useState<string | null>(null);\n  const foldable = options.length > maxVisible;\n  const visible =\n    !foldable || expanded\n      ? options\n      : options.filter(\n          (option, index) => index < maxVisible || pinned.includes(option.value) || value.includes(option.value),\n        );\n  const hidden = options.length - visible.length;\n  const showMore = foldable && (expanded || hidden > 0);\n  const keys = [...visible.map((option) => option.value), ...(showMore ? [MORE] : [])];\n  // One chip holds the tab stop: the last one focused, else the first selected, else the first.\n  const tabStop =\n    active !== null && keys.includes(active)\n      ? active\n      : (visible.find((option) => value.includes(option.value))?.value ?? keys[0]);\n\n  const group = useRef<HTMLDivElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, group), [ref]);\n  const frame = useRef<HTMLDivElement>(null);\n  const morphKey = `${expanded}|${value.join(\",\")}`;\n  // Neighbours glide to their new places when a chip widens, even across lines; the row follows its height.\n  useFlip(group, morphKey, \"var(--duration-morph)\", \"var(--ease-morph)\");\n  useHeightFollow(frame, group, morphKey);\n  // Chips that appear after the first render grow in; the ones there from the start never animate.\n  const seen = useRef(new Set(options.map((option) => option.value)));\n  const revealedAt = new Map<string, number>();\n  let rank = 0;\n  for (const option of visible) {\n    if (!seen.current.has(option.value)) revealedAt.set(option.value, Math.min(rank++ * STAGGER_MS, 300));\n  }\n\n  function toggle(next: string) {\n    const on = value.includes(next);\n    if (!multiple) {\n      onValueChange(on ? [] : [next]);\n      return;\n    }\n    onValueChange(\n      options.filter((option) => (option.value === next ? !on : value.includes(option.value))).map((option) => option.value),\n    );\n  }\n\n  function toggleMore() {\n    if (expanded) setPinned(value);\n    // Only the chips this opening reveals grow in; the ones already on screen stay put.\n    else seen.current = new Set(visible.map((option) => option.value));\n    setExpanded(!expanded);\n  }\n\n  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const buttons = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>(\"button[data-chip]\"));\n    const index = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    if (index < 0) return;\n    const last = buttons.length - 1;\n    const moves: Record<string, number> = {\n      ArrowRight: index === last ? 0 : index + 1,\n      ArrowDown: index === last ? 0 : index + 1,\n      ArrowLeft: index === 0 ? last : index - 1,\n      ArrowUp: index === 0 ? last : index - 1,\n      Home: 0,\n      End: last,\n    };\n    if (!(event.key in moves)) return;\n    event.preventDefault();\n    buttons[moves[event.key]!]!.focus();\n  }\n\n  const moreText = expanded ? lessLabel : moreLabel(hidden);\n\n  return (\n    <div ref={frame} data-slot=\"chip-group-frame\" className=\"height-follow min-w-0\">\n      <div\n        ref={refs}\n        role=\"group\"\n        aria-label={label}\n        data-slot=\"chip-group\"\n        onKeyDown={onKeyDown}\n        className={cn(\"relative isolate flex flex-wrap gap-2 box-border font-sans\", className)}\n      >\n        {visible.map((option) => {\n          const selected = value.includes(option.value);\n          const delay = revealedAt.get(option.value);\n          return (\n            <button\n              key={option.value}\n              type=\"button\"\n              data-flip=\"\"\n              data-chip={option.value}\n              data-slot=\"chip\"\n              aria-pressed={selected}\n              tabIndex={tabStop === option.value ? 0 : -1}\n              onClick={() => toggle(option.value)}\n              onFocus={() => setActive(option.value)}\n              style={delay === undefined ? undefined : ({ animationDelay: `${delay}ms` })}\n              className={cn(\"chip\", delay === undefined ? \"\" : \"motion-safe:animate-chip-reveal\")}\n            >\n              <span data-selected={selected} className=\"chip-body\">\n                <span aria-hidden=\"true\" className=\"chip-check\">\n                  <svg width={14} height={14} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 12.5 9.5 18 20 6.5\" pathLength={1} />\n                  </svg>\n                </span>\n                <span aria-hidden=\"true\" className=\"chip-slot\" />\n                <span className=\"truncate\">{option.label}</span>\n              </span>\n            </button>\n          );\n        })}\n        {showMore ? (\n          <button\n            key={MORE}\n            type=\"button\"\n            data-flip=\"\"\n            data-chip={MORE}\n            data-more=\"\"\n            aria-expanded={expanded}\n            tabIndex={tabStop === MORE ? 0 : -1}\n            onClick={toggleMore}\n            onFocus={() => setActive(MORE)}\n            className=\"chip chip-more\"\n          >\n            <span className=\"chip-body tabular-nums\">\n              <SwapText swapKey={moreText} motion=\"rise\">\n                {moreText}\n              </SwapText>\n            </span>\n          </button>\n        ) : null}\n      </div>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/chip-group/index.d.ts

@@ -0,0 +1,2 @@
+import { ChipGroup, ChipGroupProps, ChipOption } from "./chip-group.js";
+export { ChipGroup, type ChipGroupProps, type ChipOption };

package/dist/chip-group/index.js

@@ -0,0 +1,2 @@
+import { ChipGroup } from "./chip-group.js";
+export { ChipGroup };

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

@@ -6,11 +6,24 @@ export interface CopyButtonProps {
   children?: string;
   /** Only the icon, a square button. The label is still its accessible name. */
   iconOnly?: boolean;
-  /** `plain` has no border until hovered. @default "outline" */
-  variant?: "outline" | "plain";
+  /**
+   * `plain` has no border until hovered. `primary` is the filled brand button, for a copy that is the
+   * main action of its row or dialog. @default "outline"
+   */
+  variant?: "outline" | "plain" | "primary";
+  /**
+   * Control height, from the density scale: `sm` sits in a row, `md` matches a default Button.
+   * @default "sm"
+   */
+  size?: "sm" | "md";
   isDisabled?: boolean;
   /** Called once the text has reached the clipboard. */
   onCopied?: () => void;
+  /**
+   * Called when the clipboard refused the text, with what it rejected with. The button already shows
+   * "Failed" and announces it; use this to keep a toast or log of your own.
+   */
+  onError?: (error: unknown) => void;
   /** Extra classes. Merged last, so they win conflicts with ours. */
   className?: string;
 }
@@ -26,6 +39,9 @@ export interface CopyButtonProps {
  * @example
  * <CopyButton value={token} />
  * <CopyButton value={url} iconOnly variant="plain" />
+ * <CopyButton value={ticket} variant="primary" size="md" onError={() => toast("Copy failed")}>
+ *   Copy as ticket
+ * </CopyButton>
  */
 export declare const CopyButton: import("react").ForwardRefExoticComponent<CopyButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion

package/dist/copy-button/copy-button.js

@@ -3,12 +3,29 @@ import { cn } from "../lib/cn.js";
 import { buttonVariants } from "../button/button.js";
 import { MorphText } from "../lib/morph-text.js";
 import { IconSwap } from "../lib/icon-swap.js";
-import { useCopyFeedback } from "../lib/use-copy-feedback.js";
+import { callSafely, useCopyFeedback } from "../lib/use-copy-feedback.js";
 import { forwardRef } from "react";
 import { Button } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/copy-button/copy-button.tsx
 const ICON = "size-4";
+/** CopyButton's variant names, mapped onto Button's. */
+const BUTTON_VARIANT = {
+	outline: "outlineNeutral",
+	plain: "ghost",
+	primary: "primary"
+};
+/** An icon-only button is square: as wide as its rung is tall. */
+const ICON_ONLY_WIDTH = {
+	sm: " w-(--density-control-h-sm) px-0",
+	md: " w-(--density-control-h-md) px-0"
+};
+/** The result icon's tone on a page-surface button; at rest it takes the label's ink. */
+const RESULT_TONE = {
+	idle: void 0,
+	copied: "text-success-strong",
+	error: "text-destructive-strong"
+};
 /** The tick draws itself from its short stroke, the way a hand would write it: quick to start, then easing into place. */
 function DrawnCheck() {
 	return /* @__PURE__ */ jsx("svg", {
@@ -70,17 +87,21 @@ function StateIcon({ state }) {
 * @example
 * <CopyButton value={token} />
 * <CopyButton value={url} iconOnly variant="plain" />
+* <CopyButton value={ticket} variant="primary" size="md" onError={() => toast("Copy failed")}>
+*   Copy as ticket
+* </CopyButton>
 */
-const CopyButton = forwardRef(function CopyButton({ value, children: label = "Copy", iconOnly = false, variant = "outline", isDisabled, onCopied, className }, ref) {
+const CopyButton = forwardRef(function CopyButton({ value, children: label = "Copy", iconOnly = false, variant = "outline", size = "sm", isDisabled, onCopied, onError, className }, ref) {
 	const { state, copy } = useCopyFeedback();
 	const text = state === "copied" ? "Copied" : state === "error" ? "Failed" : label;
 	const pressStart = (event) => {
 		event.target.style.setProperty("--press-scale", iconOnly ? "0.96" : "0.97");
 	};
 	const classes = cn(buttonVariants({
-		variant: variant === "plain" ? "ghost" : "outlineNeutral",
-		size: "sm"
-	}) + " [--release-duration:var(--duration-gentle)] [--release-ease:var(--ease-gentle)]" + (iconOnly ? " w-(--density-control-h-sm) px-0" : ""), className);
+		variant: BUTTON_VARIANT[variant],
+		size
+	}) + " [--release-duration:var(--duration-gentle)] [--release-ease:var(--ease-gentle)]" + (iconOnly ? ICON_ONLY_WIDTH[size] : ""), className);
+	const onBrandFill = variant === "primary";
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
 		ref,
 		"data-slot": "button",
@@ -89,8 +110,8 @@ const CopyButton = forwardRef(function CopyButton({ value, children: label = "Co
 		isDisabled,
 		onPressStart: pressStart,
 		onPress: () => {
-			copy(value).then((ok) => {
-				if (ok) onCopied?.();
+			copy(value, onError).then((ok) => {
+				if (ok) callSafely(() => onCopied?.());
 			});
 		},
 		className: classes,
@@ -99,7 +120,7 @@ const CopyButton = forwardRef(function CopyButton({ value, children: label = "Co
 			calm: true,
 			className: cn(ICON, "relative"),
 			children: /* @__PURE__ */ jsx("span", {
-				className: state === "copied" ? "text-success-strong" : state === "error" ? "text-destructive-strong" : void 0,
+				className: onBrandFill ? void 0 : RESULT_TONE[state],
 				children: /* @__PURE__ */ jsx(StateIcon, { state })
 			})
 		}), iconOnly ? null : /* @__PURE__ */ jsxs("span", {

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

@@ -1 +1 @@
-{"version":3,"file":"copy-button.js","names":["AriaButton"],"sources":["../../src/copy-button/copy-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\nimport { Button as AriaButton, type PressEvent } from \"react-aria-components\";\n\nimport { buttonVariants } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { IconSwap } from \"../lib/icon-swap.js\";\nimport { MorphText } from \"../lib/morph-text.js\";\nimport { useCopyFeedback, type CopyFeedbackState } from \"../lib/use-copy-feedback.js\";\n\nexport interface CopyButtonProps {\n  /** What goes on the clipboard. */\n  value: string;\n  /** The label at rest, and the button's accessible name. @default \"Copy\" */\n  children?: string;\n  /** Only the icon, a square button. The label is still its accessible name. */\n  iconOnly?: boolean;\n  /** `plain` has no border until hovered. @default \"outline\" */\n  variant?: \"outline\" | \"plain\";\n  isDisabled?: boolean;\n  /** Called once the text has reached the clipboard. */\n  onCopied?: () => void;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nconst ICON = \"size-4\";\n\n/** The tick draws itself from its short stroke, the way a hand would write it: quick to start, then easing into place. */\nfunction DrawnCheck() {\n  return (\n    <svg\n      className={ICON}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.75}\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-calm\"\n      />\n    </svg>\n  );\n}\n\nfunction StateIcon({ state }: { state: CopyFeedbackState }) {\n  if (state === \"copied\") return <DrawnCheck />;\n  const common = {\n    className: ICON,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 1.75,\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\",\n    \"aria-hidden\": true,\n  } as const;\n  if (state === \"error\") {\n    return (\n      <svg {...common}>\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"M12 8v4M12 16h.01\" />\n      </svg>\n    );\n  }\n  return (\n    <svg {...common}>\n      <rect x=\"8\" y=\"8\" width=\"14\" height=\"14\" rx=\"2\" />\n      <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n    </svg>\n  );\n}\n\n/**\n * Copies a value and says so, calmly. The icon trades places in one soft breath\n * (copy, then a tick that draws itself, or an alert if the clipboard refused)\n * while the label's changed letters rise in, and the button never changes width:\n * its label cell reserves the widest of the three texts.\n *\n * It goes back to rest by itself after a moment, and a live region announces the\n * result. The accessible name is always the resting label.\n *\n * @example\n * <CopyButton value={token} />\n * <CopyButton value={url} iconOnly variant=\"plain\" />\n */\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(function CopyButton(\n  {\n    value,\n    children: label = \"Copy\",\n    iconOnly = false,\n    variant = \"outline\",\n    isDisabled,\n    onCopied,\n    className,\n  },\n  ref,\n) {\n  const { state, copy } = useCopyFeedback();\n  const text = state === \"copied\" ? \"Copied\" : state === \"error\" ? \"Failed\" : label;\n\n  // Not width-based like Button's press: an icon button presses a little deeper, every other one the same.\n  const pressStart = (event: PressEvent) => {\n    (event.target as HTMLElement).style.setProperty(\"--press-scale\", iconOnly ? \"0.96\" : \"0.97\");\n  };\n\n  const classes = cn(\n    buttonVariants({ variant: variant === \"plain\" ? \"ghost\" : \"outlineNeutral\", size: \"sm\" }) +\n      \" [--release-duration:var(--duration-gentle)] [--release-ease:var(--ease-gentle)]\" +\n      (iconOnly ? \" w-(--density-control-h-sm) px-0\" : \"\"),\n    className,\n  );\n\n  return (\n    <>\n      <AriaButton\n        ref={ref}\n        data-slot=\"button\"\n        data-copy-state={state}\n        aria-label={label}\n        isDisabled={isDisabled}\n        onPressStart={pressStart}\n        onPress={() => {\n          void copy(value).then((ok) => {\n            if (ok) onCopied?.();\n          });\n        }}\n        className={classes}\n      >\n        <IconSwap iconKey={state} calm className={cn(ICON, \"relative\")}>\n          <span\n            className={\n              state === \"copied\"\n                ? \"text-success-strong\"\n                : state === \"error\"\n                  ? \"text-destructive-strong\"\n                  : undefined\n            }\n          >\n            <StateIcon state={state} />\n          </span>\n        </IconSwap>\n        {iconOnly ? null : (\n          // The cell reserves the widest state, so nothing moves but the letters. The inline padding gives blurred\n          // edge letters room before the horizontal clip; the negative margin keeps the box the same size.\n          <span\n            className=\"-mx-1 grid min-w-0 overflow-x-clip px-1 text-start whitespace-nowrap\"\n            aria-hidden=\"true\"\n          >\n            {[label, \"Copied\", \"Failed\"].map((measure) => (\n              <span key={measure} className=\"invisible col-start-1 row-start-1\">\n                {measure}\n              </span>\n            ))}\n            <span className=\"col-start-1 row-start-1 justify-self-start\">\n              <MorphText text={text} morphWidth={false} calm />\n            </span>\n          </span>\n        )}\n      </AriaButton>\n      <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {state === \"idle\"\n          ? \"\"\n          : state === \"error\"\n            ? label + \": Could not copy\"\n            : label + \": Copied\"}\n      </span>\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;AA2BA,MAAM,OAAO;;AAGb,SAAS,aAAa;CACpB,OACE,oBAAC,OAAD;EACE,WAAW;EACX,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAa;EACb,eAAc;EACd,gBAAe;EACf,eAAY;EAEZ,UAAA,oBAAC,QAAD;GACE,GAAE;GACF,YAAY;GACZ,WAAU;EACX,CAAA;CACE,CAAA;AAET;AAEA,SAAS,UAAU,EAAE,SAAuC;CAC1D,IAAI,UAAU,UAAU,OAAO,oBAAC,YAAD,CAAa,CAAA;CAC5C,MAAM,SAAS;EACb,WAAW;EACX,SAAS;EACT,MAAM;EACN,QAAQ;EACR,aAAa;EACb,eAAe;EACf,gBAAgB;EAChB,eAAe;CACjB;CACA,IAAI,UAAU,SACZ,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;EAAM,CAAA,GAChC,oBAAC,QAAD,EAAM,GAAE,oBAAqB,CAAA,CAC1B;;CAGT,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,QAAD;GAAM,GAAE;GAAI,GAAE;GAAI,OAAM;GAAK,QAAO;GAAK,IAAG;EAAK,CAAA,GACjD,oBAAC,QAAD,EAAM,GAAE,0DAA2D,CAAA,CAChE;;AAET;;;;;;;;;;;;;;AAeA,MAAa,aAAa,WAA+C,SAAS,WAChF,EACE,OACA,UAAU,QAAQ,QAClB,WAAW,OACX,UAAU,WACV,YACA,UACA,aAEF,KACA;CACA,MAAM,EAAE,OAAO,SAAS,gBAAgB;CACxC,MAAM,OAAO,UAAU,WAAW,WAAW,UAAU,UAAU,WAAW;CAG5E,MAAM,cAAc,UAAsB;EACxC,MAAO,OAAuB,MAAM,YAAY,iBAAiB,WAAW,SAAS,MAAM;CAC7F;CAEA,MAAM,UAAU,GACd,eAAe;EAAE,SAAS,YAAY,UAAU,UAAU;EAAkB,MAAM;CAAK,CAAC,IACtF,sFACC,WAAW,qCAAqC,KACnD,SACF;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,qBAACA,QAAD;EACO;EACL,aAAU;EACV,mBAAiB;EACjB,cAAY;EACA;EACZ,cAAc;EACd,eAAe;GACb,KAAU,KAAK,CAAC,CAAC,MAAM,OAAO;IAC5B,IAAI,IAAI,WAAW;GACrB,CAAC;EACH;EACA,WAAW;EAZb,UAAA,CAcE,oBAAC,UAAD;GAAU,SAAS;GAAO,MAAA;GAAK,WAAW,GAAG,MAAM,UAAU;GAC3D,UAAA,oBAAC,QAAD;IACE,WACE,UAAU,WACN,wBACA,UAAU,UACR,4BACA,KAAA;IAGR,UAAA,oBAAC,WAAD,EAAkB,MAAQ,CAAA;GACtB,CAAA;EACE,CAAA,GACT,WAAW,OAGV,qBAAC,QAAD;GACE,WAAU;GACV,eAAY;GAFd,UAAA,CAIG;IAAC;IAAO;IAAU;GAAQ,CAAC,CAAC,KAAK,YAChC,oBAAC,QAAD;IAAoB,WAAU;IAC3B,UAAA;GACG,GAFK,OAEL,CACP,GACD,oBAAC,QAAD;IAAM,WAAU;IACd,UAAA,oBAAC,WAAD;KAAiB;KAAM,YAAY;KAAO,MAAA;IAAM,CAAA;GAC5C,CAAA,CACF;EAEE,CAAA,CAAA;CACZ,CAAA,GAAA,oBAAC,QAAD;EAAM,WAAU;EAAU,MAAK;EAAS,aAAU;EAC/C,UAAA,UAAU,SACP,KACA,UAAU,UACR,QAAQ,qBACR,QAAQ;CACV,CAAA,CACN,EAAA,CAAA;AAEN,CAAC"}
+{"version":3,"file":"copy-button.js","names":["AriaButton"],"sources":["../../src/copy-button/copy-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\nimport { Button as AriaButton, type PressEvent } from \"react-aria-components\";\n\nimport { buttonVariants } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { IconSwap } from \"../lib/icon-swap.js\";\nimport { MorphText } from \"../lib/morph-text.js\";\nimport { callSafely, useCopyFeedback, type CopyFeedbackState } from \"../lib/use-copy-feedback.js\";\n\nexport interface CopyButtonProps {\n  /** What goes on the clipboard. */\n  value: string;\n  /** The label at rest, and the button's accessible name. @default \"Copy\" */\n  children?: string;\n  /** Only the icon, a square button. The label is still its accessible name. */\n  iconOnly?: boolean;\n  /**\n   * `plain` has no border until hovered. `primary` is the filled brand button, for a copy that is the\n   * main action of its row or dialog. @default \"outline\"\n   */\n  variant?: \"outline\" | \"plain\" | \"primary\";\n  /**\n   * Control height, from the density scale: `sm` sits in a row, `md` matches a default Button.\n   * @default \"sm\"\n   */\n  size?: \"sm\" | \"md\";\n  isDisabled?: boolean;\n  /** Called once the text has reached the clipboard. */\n  onCopied?: () => void;\n  /**\n   * Called when the clipboard refused the text, with what it rejected with. The button already shows\n   * \"Failed\" and announces it; use this to keep a toast or log of your own.\n   */\n  onError?: (error: unknown) => void;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nconst ICON = \"size-4\";\n\n/** CopyButton's variant names, mapped onto Button's. */\nconst BUTTON_VARIANT = {\n  outline: \"outlineNeutral\",\n  plain: \"ghost\",\n  primary: \"primary\",\n} as const;\n\n/** An icon-only button is square: as wide as its rung is tall. */\nconst ICON_ONLY_WIDTH = {\n  sm: \" w-(--density-control-h-sm) px-0\",\n  md: \" w-(--density-control-h-md) px-0\",\n} as const;\n\n/** The result icon's tone on a page-surface button; at rest it takes the label's ink. */\nconst RESULT_TONE: Record<CopyFeedbackState, string | undefined> = {\n  idle: undefined,\n  copied: \"text-success-strong\",\n  error: \"text-destructive-strong\",\n};\n\n/** The tick draws itself from its short stroke, the way a hand would write it: quick to start, then easing into place. */\nfunction DrawnCheck() {\n  return (\n    <svg\n      className={ICON}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.75}\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-calm\"\n      />\n    </svg>\n  );\n}\n\nfunction StateIcon({ state }: { state: CopyFeedbackState }) {\n  if (state === \"copied\") return <DrawnCheck />;\n  const common = {\n    className: ICON,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 1.75,\n    strokeLinecap: \"round\",\n    strokeLinejoin: \"round\",\n    \"aria-hidden\": true,\n  } as const;\n  if (state === \"error\") {\n    return (\n      <svg {...common}>\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path d=\"M12 8v4M12 16h.01\" />\n      </svg>\n    );\n  }\n  return (\n    <svg {...common}>\n      <rect x=\"8\" y=\"8\" width=\"14\" height=\"14\" rx=\"2\" />\n      <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n    </svg>\n  );\n}\n\n/**\n * Copies a value and says so, calmly. The icon trades places in one soft breath\n * (copy, then a tick that draws itself, or an alert if the clipboard refused)\n * while the label's changed letters rise in, and the button never changes width:\n * its label cell reserves the widest of the three texts.\n *\n * It goes back to rest by itself after a moment, and a live region announces the\n * result. The accessible name is always the resting label.\n *\n * @example\n * <CopyButton value={token} />\n * <CopyButton value={url} iconOnly variant=\"plain\" />\n * <CopyButton value={ticket} variant=\"primary\" size=\"md\" onError={() => toast(\"Copy failed\")}>\n *   Copy as ticket\n * </CopyButton>\n */\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(function CopyButton(\n  {\n    value,\n    children: label = \"Copy\",\n    iconOnly = false,\n    variant = \"outline\",\n    size = \"sm\",\n    isDisabled,\n    onCopied,\n    onError,\n    className,\n  },\n  ref,\n) {\n  const { state, copy } = useCopyFeedback();\n  const text = state === \"copied\" ? \"Copied\" : state === \"error\" ? \"Failed\" : label;\n\n  // Not width-based like Button's press: an icon button presses a little deeper, every other one the same.\n  const pressStart = (event: PressEvent) => {\n    (event.target as HTMLElement).style.setProperty(\"--press-scale\", iconOnly ? \"0.96\" : \"0.97\");\n  };\n\n  const classes = cn(\n    buttonVariants({ variant: BUTTON_VARIANT[variant], size }) +\n      \" [--release-duration:var(--duration-gentle)] [--release-ease:var(--ease-gentle)]\" +\n      (iconOnly ? ICON_ONLY_WIDTH[size] : \"\"),\n    className,\n  );\n  // On the brand fill the result icon keeps the label's ink: the success and destructive tones are set\n  // against the page surface, not the orange.\n  const onBrandFill = variant === \"primary\";\n\n  return (\n    <>\n      <AriaButton\n        ref={ref}\n        data-slot=\"button\"\n        data-copy-state={state}\n        aria-label={label}\n        isDisabled={isDisabled}\n        onPressStart={pressStart}\n        onPress={() => {\n          void copy(value, onError).then((ok) => {\n            if (ok) callSafely(() => onCopied?.());\n          });\n        }}\n        className={classes}\n      >\n        <IconSwap iconKey={state} calm className={cn(ICON, \"relative\")}>\n          <span className={onBrandFill ? undefined : RESULT_TONE[state]}>\n            <StateIcon state={state} />\n          </span>\n        </IconSwap>\n        {iconOnly ? null : (\n          // The cell reserves the widest state, so nothing moves but the letters. The inline padding gives blurred\n          // edge letters room before the horizontal clip; the negative margin keeps the box the same size.\n          <span\n            className=\"-mx-1 grid min-w-0 overflow-x-clip px-1 text-start whitespace-nowrap\"\n            aria-hidden=\"true\"\n          >\n            {[label, \"Copied\", \"Failed\"].map((measure) => (\n              <span key={measure} className=\"invisible col-start-1 row-start-1\">\n                {measure}\n              </span>\n            ))}\n            <span className=\"col-start-1 row-start-1 justify-self-start\">\n              <MorphText text={text} morphWidth={false} calm />\n            </span>\n          </span>\n        )}\n      </AriaButton>\n      <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {state === \"idle\"\n          ? \"\"\n          : state === \"error\"\n            ? label + \": Could not copy\"\n            : label + \": Copied\"}\n      </span>\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;AAwCA,MAAM,OAAO;;AAGb,MAAM,iBAAiB;CACrB,SAAS;CACT,OAAO;CACP,SAAS;AACX;;AAGA,MAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;AACN;;AAGA,MAAM,cAA6D;CACjE,MAAM,KAAA;CACN,QAAQ;CACR,OAAO;AACT;;AAGA,SAAS,aAAa;CACpB,OACE,oBAAC,OAAD;EACE,WAAW;EACX,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAa;EACb,eAAc;EACd,gBAAe;EACf,eAAY;EAEZ,UAAA,oBAAC,QAAD;GACE,GAAE;GACF,YAAY;GACZ,WAAU;EACX,CAAA;CACE,CAAA;AAET;AAEA,SAAS,UAAU,EAAE,SAAuC;CAC1D,IAAI,UAAU,UAAU,OAAO,oBAAC,YAAD,CAAa,CAAA;CAC5C,MAAM,SAAS;EACb,WAAW;EACX,SAAS;EACT,MAAM;EACN,QAAQ;EACR,aAAa;EACb,eAAe;EACf,gBAAgB;EAChB,eAAe;CACjB;CACA,IAAI,UAAU,SACZ,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;EAAM,CAAA,GAChC,oBAAC,QAAD,EAAM,GAAE,oBAAqB,CAAA,CAC1B;;CAGT,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,QAAD;GAAM,GAAE;GAAI,GAAE;GAAI,OAAM;GAAK,QAAO;GAAK,IAAG;EAAK,CAAA,GACjD,oBAAC,QAAD,EAAM,GAAE,0DAA2D,CAAA,CAChE;;AAET;;;;;;;;;;;;;;;;;AAkBA,MAAa,aAAa,WAA+C,SAAS,WAChF,EACE,OACA,UAAU,QAAQ,QAClB,WAAW,OACX,UAAU,WACV,OAAO,MACP,YACA,UACA,SACA,aAEF,KACA;CACA,MAAM,EAAE,OAAO,SAAS,gBAAgB;CACxC,MAAM,OAAO,UAAU,WAAW,WAAW,UAAU,UAAU,WAAW;CAG5E,MAAM,cAAc,UAAsB;EACxC,MAAO,OAAuB,MAAM,YAAY,iBAAiB,WAAW,SAAS,MAAM;CAC7F;CAEA,MAAM,UAAU,GACd,eAAe;EAAE,SAAS,eAAe;EAAU;CAAK,CAAC,IACvD,sFACC,WAAW,gBAAgB,QAAQ,KACtC,SACF;CAGA,MAAM,cAAc,YAAY;CAEhC,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,qBAACA,QAAD;EACO;EACL,aAAU;EACV,mBAAiB;EACjB,cAAY;EACA;EACZ,cAAc;EACd,eAAe;GACb,KAAU,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO;IACrC,IAAI,IAAI,iBAAiB,WAAW,CAAC;GACvC,CAAC;EACH;EACA,WAAW;EAZb,UAAA,CAcE,oBAAC,UAAD;GAAU,SAAS;GAAO,MAAA;GAAK,WAAW,GAAG,MAAM,UAAU;GAC3D,UAAA,oBAAC,QAAD;IAAM,WAAW,cAAc,KAAA,IAAY,YAAY;IACrD,UAAA,oBAAC,WAAD,EAAkB,MAAQ,CAAA;GACtB,CAAA;EACE,CAAA,GACT,WAAW,OAGV,qBAAC,QAAD;GACE,WAAU;GACV,eAAY;GAFd,UAAA,CAIG;IAAC;IAAO;IAAU;GAAQ,CAAC,CAAC,KAAK,YAChC,oBAAC,QAAD;IAAoB,WAAU;IAC3B,UAAA;GACG,GAFK,OAEL,CACP,GACD,oBAAC,QAAD;IAAM,WAAU;IACd,UAAA,oBAAC,WAAD;KAAiB;KAAM,YAAY;KAAO,MAAA;IAAM,CAAA;GAC5C,CAAA,CACF;EAEE,CAAA,CAAA;CACZ,CAAA,GAAA,oBAAC,QAAD;EAAM,WAAU;EAAU,MAAK;EAAS,aAAU;EAC/C,UAAA,UAAU,SACP,KACA,UAAU,UACR,QAAQ,qBACR,QAAQ;CACV,CAAA,CACN,EAAA,CAAA;AAEN,CAAC"}

package/dist/countdown/countdown.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+//#region src/countdown/countdown.d.ts
+export type CountdownUnit = "days" | "hours" | "minutes" | "seconds";
+/**
+ * Countdown: the time left until a fixed moment people wait for, such as a
+ * launch, a live event or a deadline. Each digit is a wheel that takes the short
+ * way round, so a tick turns downward and 00 to 59 is a single step; the first
+ * reading rolls up from zero, one digit after another. When the moment passes
+ * the digits give way to `completeLabel` and the box follows the new size.
+ *
+ * The clock runs only while the countdown is on screen and the tab is visible,
+ * and reads the clock again on return, so it never drifts. Completion is armed
+ * separately, so `onComplete` fires on time even while the ticking is paused.
+ *
+ * The digits are a picture. The timer is read as plain text ("1 day, 2 hours,
+ * 5 minutes") that is not announced every second, and finishing is announced
+ * once, politely. Reduced motion jumps.
+ */
+export interface CountdownProps {
+  /**
+   * The moment to count down to. A number is epoch milliseconds, a Date is used as is, and an ISO string with `Z` or an
+   * offset such as `2026-10-06T10:00:00-07:00` is exact. A string without an offset is wall time in `timeZone`, or UTC when
+   * no zone is given, so the result never depends on the visitor's own time zone.
+   */
+  target: Date | number | string;
+  /** IANA zone for a target string without an offset, such as "America/Los_Angeles". Daylight saving is resolved for the target date. */
+  timeZone?: string;
+  /** Units to show, largest first. The largest unit absorbs the rest, so hours can pass 24 when days are left out. @default ["days", "hours", "minutes", "seconds"] */
+  units?: CountdownUnit[];
+  /** Large digits with unit names, or one compact line for banners and table cells. @default "large" */
+  variant?: "large" | "compact";
+  /** Shown once the target passes. The digits swap into it. @default "Live now" */
+  completeLabel?: ReactNode;
+  /** Fires once, the moment the countdown reaches zero while mounted. It fires on time even when the tab is hidden. */
+  onComplete?: () => void;
+  /** Accessible name, such as "Keynote starts in". @default "Time remaining" */
+  label?: string;
+  /** Clock source in epoch milliseconds. Pass a server-synced clock when the visitor's device time cannot be trusted. @default Date.now */
+  clock?: () => number;
+  /** Extra classes for the countdown. Merged last. */
+  className?: string;
+}
+export declare const Countdown: import("react").ForwardRefExoticComponent<CountdownProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=countdown.d.ts.map