@seekalfred/primitives 0.5.0 → 0.6.0

package/dist/button-group/button-group.js

@@ -0,0 +1,403 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems, useMorphWidth } from "../lib/motion.js";
+import { Menu as Menu$1, MenuItem as MenuItem$1, MenuTrigger } from "../menu/menu.js";
+import { isValidElement, useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/button-group/button-group.tsx
+/** Key of the chevron segment. Plain text, because the HTML parser rewrites control characters in server-rendered attributes. */
+const MENU = "button-group-menu";
+/** Names the icon element, so swapping Link for Check morphs while a re-render of the same icon stays still. */
+function iconKey(node) {
+	if (!isValidElement(node)) return typeof node === "string" || typeof node === "number" ? String(node) : "";
+	const type = node.type;
+	return typeof type === "string" ? type : type?.displayName ?? type?.name ?? "icon";
+}
+const PHASE = "col-start-1 row-start-1 inline-flex items-center gap-2 whitespace-nowrap group-data-[size=sm]/bg:gap-1.5";
+function LeavingPhase({ id, onDone, children }) {
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		className: cn(PHASE + " motion-safe:animate-label-out motion-reduce:animate-fade-out"),
+		children
+	});
+}
+/**
+* Icon and label of one segment. Every reserved label sits invisibly in the same
+* grid cell, so the segment is as wide as its widest state and a new label
+* crossfades inside a fixed box: it rises in from a soft blur while the old one
+* lifts away. A label nobody reserved still never snaps: the slot springs to its
+* width.
+*/
+function SegmentContent({ item }) {
+	const contentRef = useRef(null);
+	const phaseRef = useRef(null);
+	const key = iconKey(item.icon) + "|" + (item.content !== void 0 ? "\0content" : item.iconOnly ? "" : item.label);
+	useMorphWidth(contentRef, key);
+	const collapsible = item.icon ? "group-data-[compact]/bg:hidden" : "";
+	const node = /* @__PURE__ */ jsxs(Fragment$1, { children: [item.icon ? /* @__PURE__ */ jsx("span", {
+		className: "inline-flex flex-none [&_svg]:size-(--icon-sm)",
+		children: item.icon
+	}) : null, item.content !== void 0 ? /* @__PURE__ */ jsx("span", {
+		className: "inline-flex items-center tabular-nums",
+		children: item.content
+	}) : item.iconOnly ? null : /* @__PURE__ */ jsx("span", {
+		className: cn("inline-block " + collapsible),
+		children: item.label
+	})] });
+	const { leaving, changed, remove } = useLeavingItems(key, node, () => phaseRef.current);
+	const sizers = item.iconOnly || item.content !== void 0 ? [] : [.../* @__PURE__ */ new Set([item.label, ...item.reserve ?? []])];
+	return /* @__PURE__ */ jsx("span", {
+		className: "button-slot [--morph-clip:inset(-50%_calc(var(--spacing)*-3))]",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsxs("span", {
+			ref: contentRef,
+			className: "inline-grid flex-none items-center justify-items-center",
+			children: [
+				sizers.map((text) => /* @__PURE__ */ jsxs("span", {
+					className: cn(PHASE + " pointer-events-none invisible"),
+					children: [item.icon ? /* @__PURE__ */ jsx("span", { className: "inline-block size-4 flex-none" }) : null, /* @__PURE__ */ jsx("span", {
+						className: cn("inline-block " + collapsible),
+						children: text
+					})]
+				}, text)),
+				leaving.map((entry) => /* @__PURE__ */ jsx(LeavingPhase, {
+					id: entry.id,
+					onDone: remove,
+					children: entry.value
+				}, entry.id)),
+				/* @__PURE__ */ jsx("span", {
+					ref: phaseRef,
+					className: cn(PHASE + (changed ? " motion-safe:animate-label-in motion-reduce:animate-fade-in" : "")),
+					children: node
+				}, key)
+			]
+		})
+	});
+}
+const inside = (node, x, y) => {
+	const rect = node.getBoundingClientRect();
+	return x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
+};
+/** Segments are found by their data-key, so the group needs no ref per segment. */
+const segmentsIn = (root) => Array.from(root?.querySelectorAll(":scope > [data-key]") ?? []);
+const segmentIn = (root, key) => key === null ? void 0 : segmentsIn(root).find((node) => node.dataset.key === key);
+/** The segment's box inside the group at sub-pixel precision, undoing any scale an ancestor applies. */
+function boxOf(group, node) {
+	const outer = group.getBoundingClientRect();
+	const inner = node.getBoundingClientRect();
+	const scale = group.offsetWidth && Math.abs(outer.width - group.offsetWidth) > 1 ? outer.width / group.offsetWidth : 1;
+	return [
+		(inner.left - outer.left) / scale - group.clientLeft + group.scrollLeft,
+		(inner.top - outer.top) / scale - group.clientTop + group.scrollTop,
+		inner.width / scale,
+		inner.height / scale
+	];
+}
+const inert = (node) => node.disabled || node.getAttribute("aria-disabled") === "true";
+const TRAVEL = "translate var(--duration-snappy) var(--ease-snappy), width var(--duration-snappy) var(--ease-snappy), height var(--duration-snappy) var(--ease-snappy), opacity var(--duration-quick) var(--ease-settle)";
+const FADE = "opacity var(--duration-quick) var(--ease-settle)";
+const FADE_INSTANT = "opacity var(--duration-instant) var(--ease-settle)";
+const focusRing = "data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring) focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset) focus-visible:outline-(--color-ring)";
+/**
+* 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"] }]} />
+*/
+function ButtonGroup({ items, menu, label, variant = "outline", size = "md", orientation = "horizontal", collapseLabels = true, isDisabled = false, className }) {
+	const root = useRef(null);
+	const highlight = useRef(null);
+	const vertical = orientation === "vertical";
+	const [hover, setHover] = useState(null);
+	const [pressed, setPressed] = useState(null);
+	const [focused, setFocused] = useState(null);
+	const [menuOpen, setMenuOpen] = useState(false);
+	const active = hover ?? pressed ?? (menuOpen ? MENU : null) ?? focused;
+	const keys = [...items.map((item) => item.id), ...menu ? [MENU] : []];
+	const activeIndex = active ? keys.indexOf(active) : -1;
+	const inertKey = String(isDisabled) + items.map((item) => item.isDisabled ? 1 : 0).join("");
+	const shown = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		const el = highlight.current;
+		const group = root.current;
+		if (!el || !group) return;
+		const reduced = prefersReducedMotion();
+		const node = segmentIn(group, active);
+		if (!node || inert(node) && active !== focused) {
+			if (shown.current) {
+				el.style.transition = reduced ? FADE_INSTANT : FADE;
+				el.style.opacity = "0";
+			}
+			shown.current = null;
+			return;
+		}
+		const [x, y, width, height] = boxOf(group, node);
+		const arriving = !shown.current || reduced;
+		el.style.transition = arriving ? reduced ? FADE_INSTANT : FADE : TRAVEL;
+		el.style.translate = x + "px " + y + "px";
+		el.style.width = width + "px";
+		el.style.height = height + "px";
+		el.style.opacity = "1";
+		shown.current = active;
+	}, [
+		active,
+		inertKey,
+		focused
+	]);
+	const keyList = keys.join("\0");
+	useEffect(() => {
+		const group = root.current;
+		const el = highlight.current;
+		if (!group || !el || typeof ResizeObserver === "undefined") return;
+		let frame = 0;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				const node = segmentIn(group, shown.current);
+				if (!node) return;
+				const [x, y, width, height] = boxOf(group, node);
+				el.style.transition = FADE;
+				el.style.translate = x + "px " + y + "px";
+				el.style.width = width + "px";
+				el.style.height = height + "px";
+			});
+		});
+		observer.observe(group);
+		segmentsIn(group).forEach((node) => observer.observe(node));
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [keyList]);
+	const [overflowing, setCompact] = useState(false);
+	const fullWidth = useRef(0);
+	const blockedAt = useRef(0);
+	const collapsible = collapseLabels && !vertical && items.some((item) => item.icon && !item.iconOnly && item.content === void 0);
+	const compact = collapsible && overflowing;
+	useEffect(() => {
+		const group = root.current;
+		const parent = group?.parentElement;
+		if (!group || !parent || !collapsible || typeof ResizeObserver === "undefined") return;
+		const check = () => {
+			const box = getComputedStyle(parent);
+			const available = parent.clientWidth - parseFloat(box.paddingLeft) - parseFloat(box.paddingRight);
+			if (group.dataset.compact === void 0) {
+				if (group.scrollWidth > group.clientWidth + 1) {
+					fullWidth.current = group.scrollWidth + 2;
+					blockedAt.current = available;
+					setCompact(true);
+				}
+			} else if (available > blockedAt.current && available >= fullWidth.current) setCompact(false);
+		};
+		let frame = 0;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(check);
+		});
+		observer.observe(group);
+		observer.observe(parent);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [collapsible, keyList]);
+	useEffect(() => {
+		if (!pressed) return;
+		const release = () => setPressed(null);
+		window.addEventListener("pointerup", release);
+		window.addEventListener("pointercancel", release);
+		return () => {
+			window.removeEventListener("pointerup", release);
+			window.removeEventListener("pointercancel", release);
+		};
+	}, [pressed]);
+	const hit = (event) => {
+		for (const node of segmentsIn(root.current)) if (inside(node, event.clientX, event.clientY)) return inert(node) ? null : node.dataset.key ?? null;
+		return null;
+	};
+	const onPointerMove = (event) => {
+		if (event.pointerType !== "touch") setHover(hit(event));
+	};
+	const onPointerLeave = () => setHover(null);
+	const onPointerDown = (event) => {
+		if (event.button === 0) setPressed(hit(event));
+	};
+	const onFocus = (event) => {
+		const target = event.target;
+		const key = target.dataset.key;
+		if (key === void 0) return;
+		let visible = true;
+		try {
+			visible = target.matches(":focus-visible");
+		} catch {}
+		setFocused(visible ? key : null);
+	};
+	const onBlur = (event) => {
+		if (!root.current?.contains(event.relatedTarget)) setFocused(null);
+	};
+	const onKeyDown = (event) => {
+		if (event.defaultPrevented) return;
+		const list = segmentsIn(root.current).filter((node) => !node.disabled);
+		const index = list.findIndex((node) => node === document.activeElement);
+		if (index < 0) return;
+		const rtl = !vertical && getComputedStyle(root.current).direction === "rtl";
+		const forward = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+		const backward = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		const last = list.length - 1;
+		const target = event.key === forward ? index === last ? 0 : index + 1 : event.key === backward ? index === 0 ? last : index - 1 : event.key === "Home" ? 0 : event.key === "End" ? last : -1;
+		if (target < 0) return;
+		event.preventDefault();
+		list[target].focus();
+	};
+	const [announcement, setAnnouncement] = useState("");
+	const labels = useRef(null);
+	const activated = useRef({
+		key: "",
+		at: 0
+	});
+	const labelList = items.map((item) => item.id + "\0" + item.label).join("
");
+	useEffect(() => {
+		const previous = labels.current;
+		labels.current = new Map(items.map((item) => [item.id, item.label]));
+		if (!previous) return;
+		const recent = performance.now() - activated.current.at < 1e3;
+		const changed = items.filter((item) => recent && item.id === activated.current.key && previous.has(item.id) && previous.get(item.id) !== item.label && item.content === void 0);
+		if (changed.length) setAnnouncement(changed.map((item) => item.label).join(", "));
+	}, [labelList]);
+	const select = (item) => {
+		activated.current = {
+			key: item.id,
+			at: performance.now()
+		};
+		item.onSelect?.();
+	};
+	const quiet = (index) => activeIndex >= 0 && (index === activeIndex || index === activeIndex + 1) ? "" : void 0;
+	const segments = items.map((item, index) => {
+		const off = item.isDisabled && !isDisabled;
+		const named = item.iconOnly || item.content !== void 0 || compact && !!item.icon;
+		const common = {
+			className: cn("button-group-segment " + focusRing),
+			"data-key": item.id,
+			"data-quiet": quiet(index),
+			"data-icon-only": item.iconOnly ? "" : void 0,
+			"data-collapsible": item.icon && !item.iconOnly && item.content === void 0 ? "" : void 0,
+			"aria-label": named ? item.label : void 0,
+			title: item.iconOnly || compact && item.icon ? item.label : void 0
+		};
+		const body = /* @__PURE__ */ jsx("span", {
+			className: "button-group-content",
+			children: /* @__PURE__ */ jsx(SegmentContent, { item })
+		});
+		const name = named ? null : /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: item.label
+		});
+		if (item.href && !off && !isDisabled) return /* @__PURE__ */ jsxs("a", {
+			...common,
+			href: item.href,
+			onClick: () => select(item),
+			children: [body, name]
+		}, item.id);
+		return /* @__PURE__ */ jsxs("button", {
+			...common,
+			type: "button",
+			disabled: isDisabled,
+			"aria-disabled": off || void 0,
+			onClick: off ? void 0 : () => select(item),
+			children: [body, name]
+		}, item.id);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		role: "group",
+		"aria-label": label,
+		"aria-disabled": isDisabled || void 0,
+		"data-orientation": orientation,
+		"data-variant": variant,
+		"data-size": size,
+		"data-compact": compact ? "" : void 0,
+		onPointerMove,
+		onPointerLeave,
+		onPointerDown,
+		onFocus,
+		onBlur,
+		onKeyDown,
+		className: cn("button-group group/bg", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				ref: highlight,
+				"aria-hidden": "true",
+				"data-pressed": pressed && pressed === active ? "" : void 0,
+				className: "button-group-highlight"
+			}),
+			segments,
+			menu ? /* @__PURE__ */ jsxs(MenuTrigger, {
+				onOpenChange: setMenuOpen,
+				children: [/* @__PURE__ */ jsx(Button, {
+					"data-key": MENU,
+					"data-trigger": "",
+					"data-quiet": quiet(items.length),
+					"aria-label": menu.label,
+					isDisabled,
+					className: cn("button-group-segment group/trigger " + focusRing),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "button-group-content",
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: 1.75,
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							"aria-hidden": "true",
+							className: "size-4 motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180",
+							children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+						})
+					})
+				}), /* @__PURE__ */ jsx(Menu$1, {
+					placement: vertical ? "bottom start" : "bottom end",
+					offset: 6,
+					shouldFocusWrap: true,
+					className: cn("menu-motion " + (vertical ? "[--menu-ox:left]" : "[--menu-ox:right]")),
+					children: menu.items.map((action, index) => /* @__PURE__ */ jsxs(MenuItem$1, {
+						id: action.id,
+						textValue: action.label,
+						href: action.href,
+						isDisabled: action.isDisabled,
+						onAction: action.onSelect,
+						"data-i": Math.min(index, 4),
+						className: cn("menu-item-motion gap-2.5" + (action.destructive ? " text-destructive-strong data-[focused]:bg-[color-mix(in_oklab,var(--color-destructive-strong)_8%,var(--color-card))]" : "")),
+						children: [action.icon ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: action.icon
+						}) : null, action.label]
+					}, action.id))
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { ButtonGroup };
+
+//# sourceMappingURL=button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":["AriaButton","Menu","MenuItem"],"sources":["../../src/button-group/button-group.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FocusEvent,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\nimport { Button as AriaButton } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport {\n  useExitBackstop,\n  useIsomorphicLayoutEffect,\n  useLeavingItems,\n  useMorphWidth,\n  prefersReducedMotion,\n} from \"../lib/motion.js\";\nimport { Menu, MenuItem, MenuTrigger } from \"../menu/menu.js\";\n\nexport type ButtonGroupVariant = \"outline\" | \"solid\";\nexport type ButtonGroupSize = \"sm\" | \"md\";\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\";\n\nexport interface ButtonGroupItem {\n  /** Stable key for the segment. */\n  id: string;\n  /** Visible text and the accessible name. Changing it crossfades in place, so \"Share\" can answer \"Copied\". */\n  label: string;\n  /** Every other label this segment can show, such as [\"Copied\"]. The segment sizes to the widest, so a label change never resizes it. */\n  reserve?: string[];\n  /** An icon before the label. Swapping it for another morphs; re-rendering the same icon does not. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n  /** Shows only the icon; the label becomes the accessible name and the tooltip. */\n  iconOnly?: boolean;\n  /** Visible content in place of the label, such as a live value. The label stays the accessible name. */\n  content?: ReactNode;\n  onSelect?: () => void;\n  /** Renders the segment as a link. */\n  href?: string;\n  isDisabled?: boolean;\n}\n\nexport interface ButtonGroupMenuItem {\n  id: string;\n  label: string;\n  /** An icon before the label. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n  onSelect?: () => void;\n  href?: string;\n  isDisabled?: boolean;\n  /** Colours the item as a destructive action. */\n  destructive?: boolean;\n}\n\nexport interface ButtonGroupMenu {\n  /** Accessible name and tooltip of the chevron segment, such as \"More actions\". */\n  label: string;\n  items: ButtonGroupMenuItem[];\n}\n\nexport interface ButtonGroupProps {\n  items: ButtonGroupItem[];\n  /** Adds a trailing chevron segment that opens these actions in a menu aligned to the group's edge. */\n  menu?: ButtonGroupMenu;\n  /** Accessible name of the group, such as \"Document actions\". */\n  label: string;\n  /** @default \"outline\" */\n  variant?: ButtonGroupVariant;\n  /** @default \"md\" */\n  size?: ButtonGroupSize;\n  /** @default \"horizontal\" */\n  orientation?: ButtonGroupOrientation;\n  /** When the row does not fit its container, segments with an icon drop their label and keep the icon. Horizontal only. @default true */\n  collapseLabels?: boolean;\n  /** Disables every segment and the menu. */\n  isDisabled?: boolean;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/** Key of the chevron segment. Plain text, because the HTML parser rewrites control characters in server-rendered attributes. */\nconst MENU = \"button-group-menu\";\n\n/** Names the icon element, so swapping Link for Check morphs while a re-render of the same icon stays still. */\nfunction iconKey(node: ReactNode): string {\n  if (!isValidElement(node))\n    return typeof node === \"string\" || typeof node === \"number\" ? String(node) : \"\";\n  const type = node.type as string | { displayName?: string; name?: string };\n  return typeof type === \"string\" ? type : (type?.displayName ?? type?.name ?? \"icon\");\n}\n\nconst PHASE =\n  \"col-start-1 row-start-1 inline-flex items-center gap-2 whitespace-nowrap group-data-[size=sm]/bg:gap-1.5\";\n\nfunction LeavingPhase({\n  id,\n  onDone,\n  children,\n}: {\n  id: number;\n  onDone: (id: number) => void;\n  children: ReactNode;\n}) {\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  return (\n    <span\n      aria-hidden=\"true\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      className={cn(PHASE + \" motion-safe:animate-label-out motion-reduce:animate-fade-out\")}\n    >\n      {children}\n    </span>\n  );\n}\n\n/**\n * Icon and label of one segment. Every reserved label sits invisibly in the same\n * grid cell, so the segment is as wide as its widest state and a new label\n * crossfades inside a fixed box: it rises in from a soft blur while the old one\n * lifts away. A label nobody reserved still never snaps: the slot springs to its\n * width.\n */\nfunction SegmentContent({ item }: { item: ButtonGroupItem }) {\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const phaseRef = useRef<HTMLSpanElement>(null);\n  const glyph = iconKey(item.icon);\n  const key =\n    glyph + \"|\" + (item.content !== undefined ? \"\\u0000content\" : item.iconOnly ? \"\" : item.label);\n  useMorphWidth(contentRef, key);\n\n  const collapsible = item.icon ? \"group-data-[compact]/bg:hidden\" : \"\";\n  const node = (\n    <>\n      {item.icon ? (\n        <span className=\"inline-flex flex-none [&_svg]:size-(--icon-sm)\">{item.icon}</span>\n      ) : null}\n      {item.content !== undefined ? (\n        <span className=\"inline-flex items-center tabular-nums\">{item.content}</span>\n      ) : item.iconOnly ? null : (\n        <span className={cn(\"inline-block \" + collapsible)}>{item.label}</span>\n      )}\n    </>\n  );\n  const { leaving, changed, remove } = useLeavingItems(key, node, () => phaseRef.current);\n  const sizers =\n    item.iconOnly || item.content !== undefined\n      ? []\n      : [...new Set([item.label, ...(item.reserve ?? [])])];\n\n  return (\n    <span\n      className=\"button-slot [--morph-clip:inset(-50%_calc(var(--spacing)*-3))]\"\n      aria-hidden=\"true\"\n    >\n      <span ref={contentRef} className=\"inline-grid flex-none items-center justify-items-center\">\n        {sizers.map((text) => (\n          <span key={text} className={cn(PHASE + \" pointer-events-none invisible\")}>\n            {item.icon ? <span className=\"inline-block size-4 flex-none\" /> : null}\n            <span className={cn(\"inline-block \" + collapsible)}>{text}</span>\n          </span>\n        ))}\n        {leaving.map((entry) => (\n          <LeavingPhase key={entry.id} id={entry.id} onDone={remove}>\n            {entry.value}\n          </LeavingPhase>\n        ))}\n        <span\n          key={key}\n          ref={phaseRef}\n          className={cn(\n            PHASE + (changed ? \" motion-safe:animate-label-in motion-reduce:animate-fade-in\" : \"\"),\n          )}\n        >\n          {node}\n        </span>\n      </span>\n    </span>\n  );\n}\n\nconst inside = (node: HTMLElement, x: number, y: number) => {\n  const rect = node.getBoundingClientRect();\n  return x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;\n};\n/** Segments are found by their data-key, so the group needs no ref per segment. */\nconst segmentsIn = (root: HTMLElement | null) =>\n  Array.from(root?.querySelectorAll<HTMLElement>(\":scope > [data-key]\") ?? []);\nconst segmentIn = (root: HTMLElement | null, key: string | null) =>\n  key === null ? undefined : segmentsIn(root).find((node) => node.dataset.key === key);\n/** The segment's box inside the group at sub-pixel precision, undoing any scale an ancestor applies. */\nfunction boxOf(group: HTMLElement, node: HTMLElement) {\n  const outer = group.getBoundingClientRect();\n  const inner = node.getBoundingClientRect();\n  // offsetWidth is rounded to whole pixels, so only a real transform (more than a pixel apart) counts as scale.\n  const scale =\n    group.offsetWidth && Math.abs(outer.width - group.offsetWidth) > 1\n      ? outer.width / group.offsetWidth\n      : 1;\n  return [\n    (inner.left - outer.left) / scale - group.clientLeft + group.scrollLeft,\n    (inner.top - outer.top) / scale - group.clientTop + group.scrollTop,\n    inner.width / scale,\n    inner.height / scale,\n  ] as const;\n}\nconst inert = (node: HTMLElement) =>\n  (node as HTMLButtonElement).disabled || node.getAttribute(\"aria-disabled\") === \"true\";\n\nconst TRAVEL =\n  \"translate var(--duration-snappy) var(--ease-snappy), width var(--duration-snappy) var(--ease-snappy), height var(--duration-snappy) var(--ease-snappy), opacity var(--duration-quick) var(--ease-settle)\";\nconst FADE = \"opacity var(--duration-quick) var(--ease-settle)\";\nconst FADE_INSTANT = \"opacity var(--duration-instant) var(--ease-settle)\";\n\nconst focusRing =\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring) focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset) focus-visible:outline-(--color-ring)\";\n\n/**\n * Related actions joined into one surface: a shared border and radius, hairline\n * dividers, no gaps. One soft highlight glides between segments under the\n * pointer or keyboard focus, the pressed segment answers in place, and an\n * optional chevron segment opens more actions in a menu aligned to the group's\n * edge.\n *\n * Tab visits every segment in order; the arrow keys along the orientation, Home\n * and End also move between them. A segment's label can change in place (\"Share\"\n * answers \"Copied\") without resizing it, and a label that changes right after its\n * segment is pressed is announced once.\n *\n * @example\n * <ButtonGroup label=\"Document actions\" items={[{ id: \"edit\", label: \"Edit\" }, { id: \"share\", label: \"Share\", reserve: [\"Copied\"] }]} />\n */\nexport function ButtonGroup({\n  items,\n  menu,\n  label,\n  variant = \"outline\",\n  size = \"md\",\n  orientation = \"horizontal\",\n  collapseLabels = true,\n  isDisabled = false,\n  className,\n}: ButtonGroupProps) {\n  const root = useRef<HTMLDivElement>(null);\n  const highlight = useRef<HTMLSpanElement>(null);\n  const vertical = orientation === \"vertical\";\n\n  // The highlight sits on the pointer's segment, else the pressed one (touch), else the open menu's chevron, else keyboard focus.\n  const [hover, setHover] = useState<string | null>(null);\n  const [pressed, setPressed] = useState<string | null>(null);\n  const [focused, setFocused] = useState<string | null>(null);\n  const [menuOpen, setMenuOpen] = useState(false);\n  const active = hover ?? pressed ?? (menuOpen ? MENU : null) ?? focused;\n  const keys = [...items.map((item) => item.id), ...(menu ? [MENU] : [])];\n  const activeIndex = active ? keys.indexOf(active) : -1;\n  const inertKey = String(isDisabled) + items.map((item) => (item.isDisabled ? 1 : 0)).join(\"\");\n\n  const shown = useRef<string | null>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    const el = highlight.current;\n    const group = root.current;\n    if (!el || !group) return;\n    const reduced = prefersReducedMotion();\n    const node = segmentIn(group, active);\n    // Hovering a disabled segment shows nothing; focus on one still shows where the keyboard is.\n    if (!node || (inert(node) && active !== focused)) {\n      if (shown.current) {\n        el.style.transition = reduced ? FADE_INSTANT : FADE;\n        el.style.opacity = \"0\";\n      }\n      shown.current = null;\n      return;\n    }\n    const [x, y, width, height] = boxOf(group, node);\n    // Arriving from nowhere, it appears in place; only moves between segments travel.\n    const arriving = !shown.current || reduced;\n    el.style.transition = arriving ? (reduced ? FADE_INSTANT : FADE) : TRAVEL;\n    el.style.translate = x + \"px \" + y + \"px\";\n    el.style.width = width + \"px\";\n    el.style.height = height + \"px\";\n    el.style.opacity = \"1\";\n    shown.current = active;\n    // inertKey re-checks a segment that turns disabled under a still pointer.\n  }, [active, inertKey, focused]);\n\n  // Segments resize when a label morphs or labels collapse; the highlight stays locked to its segment.\n  const keyList = keys.join(\"\\u0000\");\n  useEffect(() => {\n    const group = root.current;\n    const el = highlight.current;\n    if (!group || !el || typeof ResizeObserver === \"undefined\") return;\n    // Work is deferred a frame: a callback that changes layout inside the observer's own notification reports a loop error.\n    let frame = 0;\n    const observer = new ResizeObserver(() => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => {\n        const node = segmentIn(group, shown.current);\n        if (!node) return;\n        const [x, y, width, height] = boxOf(group, node);\n        el.style.transition = FADE;\n        el.style.translate = x + \"px \" + y + \"px\";\n        el.style.width = width + \"px\";\n        el.style.height = height + \"px\";\n      });\n    });\n    observer.observe(group);\n    segmentsIn(group).forEach((node) => observer.observe(node));\n    return () => {\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n    };\n  }, [keyList]);\n\n  // Labels collapse to icons when the row overflows, and come back once the container is wide enough for the full row again.\n  const [overflowing, setCompact] = useState(false);\n  const fullWidth = useRef(0);\n  const blockedAt = useRef(0);\n  const collapsible =\n    collapseLabels &&\n    !vertical &&\n    items.some((item) => item.icon && !item.iconOnly && item.content === undefined);\n  const compact = collapsible && overflowing;\n  useEffect(() => {\n    const group = root.current;\n    const parent = group?.parentElement;\n    if (!group || !parent || !collapsible || typeof ResizeObserver === \"undefined\") return;\n    const check = () => {\n      const box = getComputedStyle(parent);\n      const available =\n        parent.clientWidth - parseFloat(box.paddingLeft) - parseFloat(box.paddingRight);\n      if (group.dataset.compact === undefined) {\n        if (group.scrollWidth > group.clientWidth + 1) {\n          fullWidth.current = group.scrollWidth + 2;\n          blockedAt.current = available;\n          setCompact(true);\n        }\n      } else if (available > blockedAt.current && available >= fullWidth.current) setCompact(false);\n    };\n    // Collapsing changes the layout being observed, so the check runs a frame later (see the highlight observer).\n    let frame = 0;\n    const observer = new ResizeObserver(() => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(check);\n    });\n    observer.observe(group);\n    observer.observe(parent);\n    return () => {\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n    };\n  }, [collapsible, keyList]);\n\n  // Pressing tracks the segment under the finger, so touch gets the same highlight a pointer gets on hover.\n  useEffect(() => {\n    if (!pressed) return;\n    const release = () => setPressed(null);\n    window.addEventListener(\"pointerup\", release);\n    window.addEventListener(\"pointercancel\", release);\n    return () => {\n      window.removeEventListener(\"pointerup\", release);\n      window.removeEventListener(\"pointercancel\", release);\n    };\n  }, [pressed]);\n\n  const hit = (event: PointerEvent) => {\n    for (const node of segmentsIn(root.current))\n      if (inside(node, event.clientX, event.clientY))\n        return inert(node) ? null : (node.dataset.key ?? null);\n    return null;\n  };\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.pointerType !== \"touch\") setHover(hit(event));\n  };\n  const onPointerLeave = () => setHover(null);\n  const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.button === 0) setPressed(hit(event));\n  };\n\n  // Keyboard focus shows the highlight; a mouse click focuses without it, so nothing stays lit after the pointer leaves.\n  const onFocus = (event: FocusEvent<HTMLDivElement>) => {\n    const target = event.target as HTMLElement;\n    const key = target.dataset.key;\n    if (key === undefined) return;\n    let visible = true;\n    try {\n      visible = target.matches(\":focus-visible\");\n    } catch {\n      /* older engines */\n    }\n    setFocused(visible ? key : null);\n  };\n  const onBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (!root.current?.contains(event.relatedTarget)) setFocused(null);\n  };\n\n  // Tab visits every segment in order; arrow keys along the orientation, Home and End also move between them.\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.defaultPrevented) return;\n    // Disabled segments stay focusable (aria-disabled), so the keyboard can find them and hear why nothing happens.\n    const list = segmentsIn(root.current).filter((node) => !(node as HTMLButtonElement).disabled);\n    const index = list.findIndex((node) => node === document.activeElement);\n    if (index < 0) return;\n    const rtl = !vertical && getComputedStyle(root.current!).direction === \"rtl\";\n    const forward = vertical ? \"ArrowDown\" : rtl ? \"ArrowLeft\" : \"ArrowRight\";\n    const backward = vertical ? \"ArrowUp\" : rtl ? \"ArrowRight\" : \"ArrowLeft\";\n    const last = list.length - 1;\n    const target =\n      event.key === forward\n        ? index === last\n          ? 0\n          : index + 1\n        : event.key === backward\n          ? index === 0\n            ? last\n            : index - 1\n          : event.key === \"Home\"\n            ? 0\n            : event.key === \"End\"\n              ? last\n              : -1;\n    if (target < 0) return;\n    event.preventDefault();\n    list[target]!.focus();\n  };\n\n  // A label that changes right after its segment is pressed, such as \"Copied\", is announced once; the quiet revert is not.\n  const [announcement, setAnnouncement] = useState(\"\");\n  const labels = useRef<Map<string, string> | null>(null);\n  const activated = useRef({ key: \"\", at: 0 });\n  const labelList = items.map((item) => item.id + \"\\u0000\" + item.label).join(\"\\u0001\");\n  useEffect(() => {\n    const previous = labels.current;\n    labels.current = new Map(items.map((item) => [item.id, item.label]));\n    if (!previous) return;\n    const recent = performance.now() - activated.current.at < 1000;\n    const changed = items.filter(\n      (item) =>\n        recent &&\n        item.id === activated.current.key &&\n        previous.has(item.id) &&\n        previous.get(item.id) !== item.label &&\n        item.content === undefined,\n    );\n\n    if (changed.length) setAnnouncement(changed.map((item) => item.label).join(\", \"));\n    // labelList carries the only part of items this effect reads.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [labelList]);\n\n  const select = (item: ButtonGroupItem) => {\n    activated.current = { key: item.id, at: performance.now() };\n    item.onSelect?.();\n  };\n  const quiet = (index: number) =>\n    activeIndex >= 0 && (index === activeIndex || index === activeIndex + 1) ? \"\" : undefined;\n\n  const segments = items.map((item, index) => {\n    const off = item.isDisabled && !isDisabled;\n    const named = item.iconOnly || item.content !== undefined || (compact && !!item.icon);\n    const common = {\n      className: cn(\"button-group-segment \" + focusRing),\n      \"data-key\": item.id,\n      \"data-quiet\": quiet(index),\n      \"data-icon-only\": item.iconOnly ? \"\" : undefined,\n      \"data-collapsible\":\n        item.icon && !item.iconOnly && item.content === undefined ? \"\" : undefined,\n      \"aria-label\": named ? item.label : undefined,\n      title: item.iconOnly || (compact && item.icon) ? item.label : undefined,\n    };\n    const body = (\n      <span className=\"button-group-content\">\n        <SegmentContent item={item} />\n      </span>\n    );\n    const name = named ? null : <span className=\"sr-only\">{item.label}</span>;\n    if (item.href && !off && !isDisabled)\n      return (\n        <a key={item.id} {...common} href={item.href} onClick={() => select(item)}>\n          {body}\n          {name}\n        </a>\n      );\n    return (\n      <button\n        key={item.id}\n        {...common}\n        type=\"button\"\n        disabled={isDisabled}\n        aria-disabled={off || undefined}\n        onClick={off ? undefined : () => select(item)}\n      >\n        {body}\n        {name}\n      </button>\n    );\n  });\n\n  return (\n    <div\n      ref={root}\n      role=\"group\"\n      aria-label={label}\n      aria-disabled={isDisabled || undefined}\n      data-orientation={orientation}\n      data-variant={variant}\n      data-size={size}\n      data-compact={compact ? \"\" : undefined}\n      onPointerMove={onPointerMove}\n      onPointerLeave={onPointerLeave}\n      onPointerDown={onPointerDown}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      className={cn(\"button-group group/bg\", className)}\n    >\n      <span\n        ref={highlight}\n        aria-hidden=\"true\"\n        data-pressed={pressed && pressed === active ? \"\" : undefined}\n        className=\"button-group-highlight\"\n      />\n      {segments}\n      {menu ? (\n        <MenuTrigger onOpenChange={setMenuOpen}>\n          <AriaButton\n            data-key={MENU}\n            data-trigger=\"\"\n            data-quiet={quiet(items.length)}\n            aria-label={menu.label}\n            isDisabled={isDisabled}\n            className={cn(\"button-group-segment group/trigger \" + focusRing)}\n          >\n            <span className=\"button-group-content\">\n              <svg\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                className=\"size-4 motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n              >\n                <path d=\"m6 9 6 6 6-6\" />\n              </svg>\n            </span>\n          </AriaButton>\n          <Menu\n            placement={vertical ? \"bottom start\" : \"bottom end\"}\n            offset={6}\n            shouldFocusWrap\n            className={cn(\"menu-motion \" + (vertical ? \"[--menu-ox:left]\" : \"[--menu-ox:right]\"))}\n          >\n            {menu.items.map((action, index) => (\n              <MenuItem\n                key={action.id}\n                id={action.id}\n                textValue={action.label}\n                href={action.href}\n                isDisabled={action.isDisabled}\n                onAction={action.onSelect}\n                data-i={Math.min(index, 4)}\n                className={cn(\n                  \"menu-item-motion gap-2.5\" +\n                    (action.destructive\n                      ? \" text-destructive-strong data-[focused]:bg-[color-mix(in_oklab,var(--color-destructive-strong)_8%,var(--color-card))]\"\n                      : \"\"),\n                )}\n              >\n                {action.icon ? <span aria-hidden=\"true\">{action.icon}</span> : null}\n                {action.label}\n              </MenuItem>\n            ))}\n          </Menu>\n        </MenuTrigger>\n      ) : null}\n      <span className=\"sr-only\" aria-live=\"polite\">\n        {announcement}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { ButtonGroup, ButtonGroupItem, ButtonGroupMenu, ButtonGroupMenuItem, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupSize, ButtonGroupVariant } from "./button-group.js";
+export { ButtonGroup, type ButtonGroupItem, type ButtonGroupMenu, type ButtonGroupMenuItem, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonGroupVariant };

package/dist/button-group/index.js

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

package/dist/calendar/calendar.d.ts

@@ -50,7 +50,7 @@ export declare const calendarClearVariants: (props?: import("class-variance-auth
  * is a strikethrough.
  */
 export declare const calendarCellVariants: (props?: ({
-  selection?: "single" | "range" | null | undefined;
+  selection?: "single" | "range" | "band" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalendarSharedProps {
   /**
@@ -138,7 +138,7 @@ export interface CalendarRangeProps extends Omit<RangeCalendarProps<DateValue>,
  * @example
  * <Calendar label="Report date" value={date} onChange={setDate} clearable />
  */
-declare function Calendar$1({ className, label, labelHidden, visibleMonths, clearable, clearLabel, previousLabel, nextLabel, ...props }: CalendarProps$1): import("react").JSX.Element;
+declare const Calendar$1: import("react").ForwardRefExoticComponent<CalendarProps$1 & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * A calendar for picking a contiguous date range.
  *
@@ -148,7 +148,7 @@ declare function Calendar$1({ className, label, labelHidden, visibleMonths, clea
  * <CalendarRange label="Period" visibleMonths={3}
  *                value={range} onChange={setRange} clearable />
  */
-export declare function CalendarRange({ className, label, labelHidden, visibleMonths, clearable, clearLabel, previousLabel, nextLabel, ...props }: CalendarRangeProps): import("react").JSX.Element;
+export declare const CalendarRange: import("react").ForwardRefExoticComponent<CalendarRangeProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Calendar$1 as Calendar, CalendarProps$1 as CalendarProps };
 //# sourceMappingURL=calendar.d.ts.map