@seekalfred/primitives 0.5.1 → 0.7.1

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

@@ -0,0 +1,61 @@
+import { ReactNode } from "react";
+//#region src/floating-button-group/floating-button-group.d.ts
+export type FloatingButtonGroupVariant = "muted" | "floating";
+export type FloatingButtonGroupSize = "sm" | "md";
+export type FloatingButtonGroupOrientation = "horizontal" | "vertical";
+export interface FloatingButtonGroupAction {
+  type?: "action";
+  /** Stable key, also passed to onAction. */
+  id: string;
+  /** Visible label, and the accessible name when the item shows only its icon. */
+  label: string;
+  /** An icon before the label. Mark it `aria-hidden`. */
+  icon?: ReactNode;
+  /** Shows only the icon. The label moves into a tooltip and the accessible name. Overrides the group's iconOnly. */
+  iconOnly?: boolean;
+  onSelect?: () => void;
+  isDisabled?: boolean;
+  /** Marks an action that switches a mode on, such as Present. Sets aria-pressed and keeps a quiet tint while on. */
+  isPressed?: boolean;
+  /** A shortcut hint shown in the tooltip, such as "⌘Z". The component does not bind the key. */
+  shortcut?: string;
+  /** Other labels this item can switch to, such as ["Copied"] for Share. The button keeps the width of the widest, so a label change never moves anything. */
+  reserveLabels?: readonly string[];
+}
+export interface FloatingButtonGroupSeparator {
+  type: "separator";
+  id?: string;
+}
+export type FloatingButtonGroupItem = FloatingButtonGroupAction | FloatingButtonGroupSeparator;
+export interface FloatingButtonGroupProps {
+  items: readonly FloatingButtonGroupItem[];
+  /** Accessible name of the toolbar, such as "Board actions". */
+  label: string;
+  /** `muted` sits quietly on a page; `floating` raises the tray with the floating shadow for overlays such as a selection toolbar. @default "muted" */
+  variant?: FloatingButtonGroupVariant;
+  /** @default "md" */
+  size?: FloatingButtonGroupSize;
+  /** @default "horizontal" */
+  orientation?: FloatingButtonGroupOrientation;
+  /** Shows every item as an icon only, with its label in a tooltip. Items with their own iconOnly win. */
+  iconOnly?: boolean;
+  /** Side of the item tooltips. Defaults to top for a row and right for a column. */
+  tooltipSide?: "top" | "bottom" | "left" | "right";
+  /** Called with the item id after the item's own onSelect. */
+  onAction?: (id: string) => void;
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * Separate soft buttons in a quiet tray. One shared highlight morphs, in
+ * position and size, to whichever button the pointer or keyboard focus is on,
+ * fades when the pointer leaves the tray, and settles darker in place while a
+ * button is pressed. It is the toolbar's main hover and focus indicator. Arrow
+ * keys move focus, Home and End jump to the ends, Enter and Space act.
+ *
+ * @example
+ * <FloatingButtonGroup label="Board actions" items={[{ id: "undo", label: "Undo", icon: <UndoIcon aria-hidden />, iconOnly: true, shortcut: "⌘Z" }]} />
+ */
+export declare function FloatingButtonGroup({ items, label, variant, size, orientation, iconOnly: groupIconOnly, tooltipSide, onAction, className }: FloatingButtonGroupProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=floating-button-group.d.ts.map

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

@@ -0,0 +1,340 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from "../lib/motion.js";
+import { Tooltip as Tooltip$1, TooltipTrigger as TooltipTrigger$1 } from "../tooltip/tooltip.js";
+import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { Focusable } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/floating-button-group/floating-button-group.tsx
+const isAction = (item) => item.type !== "separator";
+const PHASE = "col-start-1 row-start-1 inline-flex items-center gap-1.5 whitespace-nowrap";
+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. Every label the item can show is laid out invisibly in the
+* same grid cell, so the button always has the width of the widest one: a label
+* change crossfades in place and never resizes the button, its neighbours or the
+* tray.
+*/
+function ItemBody({ label, icon, iconOnly, reserve }) {
+	const phaseRef = useRef(null);
+	const node = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon ? /* @__PURE__ */ jsx("span", {
+		className: "inline-flex flex-none [&_svg]:size-(--icon-sm)",
+		children: icon
+	}) : null, iconOnly ? null : /* @__PURE__ */ jsx("span", {
+		className: "block",
+		children: label
+	})] });
+	const { leaving, changed, remove } = useLeavingItems(label, node, () => phaseRef.current);
+	const ghosts = iconOnly ? [] : Array.from(/* @__PURE__ */ new Set([label, ...reserve]));
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative z-2 inline-grid items-center justify-items-center group-aria-[orientation=vertical]/fg:justify-items-start",
+		children: [
+			ghosts.map((text) => /* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				className: cn(PHASE + " pointer-events-none invisible"),
+				children: [icon ? /* @__PURE__ */ jsx("span", { className: "block size-4 flex-none" }) : null, /* @__PURE__ */ jsx("span", {
+					className: "block",
+					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
+			}, label)
+		]
+	});
+}
+function TipContent({ label, shortcut }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-baseline gap-3 whitespace-nowrap",
+		children: [label, shortcut ? /* @__PURE__ */ jsx("kbd", {
+			className: "font-[inherit] tabular-nums opacity-70",
+			children: shortcut
+		}) : null]
+	});
+}
+const MORPH = "translate var(--duration-morph) var(--ease-morph), width var(--duration-morph) var(--ease-morph), height var(--duration-morph) var(--ease-morph)";
+const SCALE = "scale var(--duration-snappy) var(--ease-snappy)";
+const BACKGROUND = "background-color var(--duration-quick) var(--ease-settle)";
+const FADE_IN = "opacity var(--duration-quick) var(--ease-settle)";
+const FADE_OUT = "opacity var(--duration-standard) var(--ease-settle)";
+const FADE_INSTANT = "opacity var(--duration-instant) var(--ease-settle)";
+/**
+* Separate soft buttons in a quiet tray. One shared highlight morphs, in
+* position and size, to whichever button the pointer or keyboard focus is on,
+* fades when the pointer leaves the tray, and settles darker in place while a
+* button is pressed. It is the toolbar's main hover and focus indicator. Arrow
+* keys move focus, Home and End jump to the ends, Enter and Space act.
+*
+* @example
+* <FloatingButtonGroup label="Board actions" items={[{ id: "undo", label: "Undo", icon: <UndoIcon aria-hidden />, iconOnly: true, shortcut: "⌘Z" }]} />
+*/
+function FloatingButtonGroup({ items, label, variant = "muted", size = "md", orientation = "horizontal", iconOnly: groupIconOnly = false, tooltipSide, onAction, className }) {
+	const tray = useRef(null);
+	const highlight = useRef(null);
+	const nodes = useRef(/* @__PURE__ */ new Map());
+	const [hoverId, setHoverId] = useState(null);
+	const [focusId, setFocusId] = useState(null);
+	const [pressing, setPressing] = useState(false);
+	const [tabStop, setTabStop] = useState(null);
+	const actions = items.filter(isAction);
+	const byId = new Map(actions.map((action) => [action.id, action]));
+	const enabled = (id) => !!id && !!byId.get(id) && !byId.get(id)?.isDisabled;
+	const activeId = enabled(hoverId) ? hoverId : focusId && byId.has(focusId) ? focusId : null;
+	const stop = enabled(tabStop) ? tabStop : actions.find((action) => !action.isDisabled)?.id ?? null;
+	const vertical = orientation === "vertical";
+	const side = tooltipSide ?? (vertical ? "right" : "top");
+	const idsKey = actions.map((action) => action.id).join("\0");
+	const visible = useRef(false);
+	const traveling = useRef(false);
+	const travelTimer = useRef(void 0);
+	const activeRef = useRef(activeId);
+	const pressingRef = useRef(pressing);
+	/** The button's box in tray coordinates, exact to the device pixel (offsetLeft rounds to whole pixels) and free of ancestor transforms. */
+	const measure = useCallback((node) => {
+		const root = tray.current;
+		if (!root) return null;
+		const outer = root.getBoundingClientRect();
+		const box = node.getBoundingClientRect();
+		const unscale = outer.width ? root.offsetWidth / outer.width : 1;
+		const dpr = window.devicePixelRatio || 1;
+		const snap = (value) => Math.round(value * unscale * dpr) / dpr;
+		return {
+			x: snap(box.left - outer.left) - root.clientLeft,
+			y: snap(box.top - outer.top) - root.clientTop,
+			width: snap(box.width),
+			height: snap(box.height)
+		};
+	}, []);
+	/** Moves the highlight to a button. "move" travels on the morph spring; "follow" keeps up with a layout change without travelling. */
+	const place = useCallback((id, mode) => {
+		const el = highlight.current;
+		if (!el) return;
+		const reduced = prefersReducedMotion();
+		const node = id ? nodes.current.get(id) : void 0;
+		if (!node) {
+			el.style.transition = [
+				BACKGROUND,
+				SCALE,
+				reduced ? FADE_INSTANT : FADE_OUT
+			].join(", ");
+			el.style.opacity = "0";
+			visible.current = false;
+			return;
+		}
+		const rect = measure(node);
+		if (!rect) return;
+		const fade = reduced ? FADE_INSTANT : FADE_IN;
+		if (!reduced && visible.current && (mode === "move" || traveling.current)) {
+			traveling.current = true;
+			clearTimeout(travelTimer.current);
+			travelTimer.current = setTimeout(() => {
+				traveling.current = false;
+			}, 740);
+			el.style.transition = [
+				MORPH,
+				SCALE,
+				fade,
+				BACKGROUND
+			].join(", ");
+		} else {
+			traveling.current = false;
+			el.style.transition = [
+				SCALE,
+				fade,
+				BACKGROUND
+			].join(", ");
+			if (!visible.current && !reduced) {
+				el.style.transition = "none";
+				el.style.scale = "0.94";
+				el.offsetWidth;
+				el.style.transition = [
+					SCALE,
+					fade,
+					BACKGROUND
+				].join(", ");
+				el.style.scale = pressingRef.current ? "0.965" : "1";
+			}
+		}
+		el.style.translate = rect.x + "px " + rect.y + "px";
+		el.style.width = rect.width + "px";
+		el.style.height = rect.height + "px";
+		el.style.opacity = "1";
+		visible.current = true;
+	}, [measure]);
+	useIsomorphicLayoutEffect(() => {
+		activeRef.current = activeId;
+		place(activeId, "move");
+	}, [activeId, place]);
+	useEffect(() => {
+		pressingRef.current = pressing;
+		const el = highlight.current;
+		if (!el) return;
+		el.style.scale = pressing && activeId ? "0.965" : "1";
+	}, [activeId, pressing]);
+	useEffect(() => {
+		const root = tray.current;
+		if (!root || typeof ResizeObserver === "undefined") return;
+		let frame = 0;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				if (activeRef.current) place(activeRef.current, "follow");
+			});
+		});
+		observer.observe(root);
+		nodes.current.forEach((node) => observer.observe(node));
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [idsKey, place]);
+	useEffect(() => {
+		const root = tray.current;
+		if (!root) return;
+		const leave = () => {
+			setHoverId(null);
+			setPressing(false);
+		};
+		root.addEventListener("pointerleave", leave);
+		return () => root.removeEventListener("pointerleave", leave);
+	}, []);
+	useEffect(() => () => clearTimeout(travelTimer.current), []);
+	const buttons = () => Array.from(tray.current?.querySelectorAll("[data-fg-item]") ?? []);
+	const onKeyDown = (event) => {
+		const all = buttons();
+		const index = all.findIndex((node) => node === document.activeElement);
+		if (index < 0) return;
+		const next = vertical ? "ArrowDown" : "ArrowRight";
+		const previous = vertical ? "ArrowUp" : "ArrowLeft";
+		const usable = (node) => node.getAttribute("aria-disabled") !== "true";
+		let target;
+		if (event.key === "Home") target = all.find(usable);
+		else if (event.key === "End") target = [...all].reverse().find(usable);
+		else if (event.key === next || event.key === previous) {
+			const step = event.key === next ? 1 : -1;
+			for (let offset = 1; offset <= all.length; offset += 1) {
+				const candidate = all[(index + step * offset + all.length * offset) % all.length];
+				if (usable(candidate)) {
+					target = candidate;
+					break;
+				}
+			}
+		} else return;
+		event.preventDefault();
+		if (!target) return;
+		setHoverId(null);
+		target.focus();
+	};
+	const onBlur = (event) => {
+		if (tray.current?.contains(event.relatedTarget)) return;
+		setFocusId(null);
+		setPressing(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: tray,
+		role: "toolbar",
+		"aria-label": label,
+		"aria-orientation": orientation,
+		"data-variant": variant,
+		"data-size": size,
+		onKeyDown,
+		onBlur,
+		className: cn("floating-group group/fg", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			ref: highlight,
+			"aria-hidden": "true",
+			"data-pressing": pressing && activeId ? "" : void 0,
+			className: "floating-group-highlight"
+		}), items.map((item, position) => {
+			if (!isAction(item)) return /* @__PURE__ */ jsx("span", {
+				role: "separator",
+				"aria-orientation": vertical ? "horizontal" : "vertical",
+				className: "floating-group-separator"
+			}, item.id ?? "separator-" + position);
+			const { id, label: itemLabel, icon, onSelect, isDisabled = false, isPressed, shortcut, reserveLabels = [] } = item;
+			const iconOnly = !!icon && (item.iconOnly ?? groupIconOnly);
+			const button = /* @__PURE__ */ jsx("button", {
+				ref: (node) => {
+					if (node) nodes.current.set(id, node);
+					else nodes.current.delete(id);
+				},
+				type: "button",
+				"data-fg-item": "",
+				"data-active": activeId === id ? "" : void 0,
+				"data-icon": icon ? "" : void 0,
+				"data-icon-only": iconOnly ? "" : void 0,
+				"aria-label": itemLabel,
+				"aria-pressed": isPressed === void 0 ? void 0 : isPressed,
+				"aria-disabled": isDisabled || void 0,
+				tabIndex: stop === id ? 0 : -1,
+				onPointerMove: (event) => {
+					if (event.pointerType === "mouse" || event.pointerType === "pen") setHoverId(id);
+				},
+				onPointerDown: (event) => {
+					if (isDisabled || event.button !== 0) return;
+					setHoverId(id);
+					setPressing(true);
+				},
+				onPointerUp: () => setPressing(false),
+				onPointerCancel: () => setPressing(false),
+				onPointerLeave: () => setPressing(false),
+				onKeyDown: (event) => {
+					if ((event.key === "Enter" || event.key === " ") && !event.repeat && !isDisabled) setPressing(true);
+				},
+				onKeyUp: (event) => {
+					if (event.key === "Enter" || event.key === " ") setPressing(false);
+				},
+				onFocus: (event) => {
+					setTabStop(id);
+					let keyboard = true;
+					try {
+						keyboard = event.currentTarget.matches(":focus-visible");
+					} catch {}
+					setFocusId(keyboard ? id : null);
+				},
+				onClick: () => {
+					if (isDisabled) return;
+					onSelect?.();
+					onAction?.(id);
+				},
+				className: cn("floating-group-item focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset) focus-visible:outline-(--color-ring)"),
+				children: /* @__PURE__ */ jsx(ItemBody, {
+					label: itemLabel,
+					icon,
+					iconOnly,
+					reserve: reserveLabels
+				})
+			});
+			if (!iconOnly && !shortcut) return /* @__PURE__ */ jsx(Fragment, { children: button }, id);
+			return /* @__PURE__ */ jsxs(TooltipTrigger$1, { children: [/* @__PURE__ */ jsx(Focusable, { children: button }), /* @__PURE__ */ jsx(Tooltip$1, {
+				placement: side,
+				children: /* @__PURE__ */ jsx(TipContent, {
+					label: itemLabel,
+					shortcut
+				})
+			})] }, id);
+		})]
+	});
+}
+//#endregion
+export { FloatingButtonGroup };
+
+//# sourceMappingURL=floating-button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"floating-button-group.js","names":["TooltipTrigger","Tooltip"],"sources":["../../src/floating-button-group/floating-button-group.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Fragment,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FocusEvent,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { Focusable } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport {\n  prefersReducedMotion,\n  useExitBackstop,\n  useIsomorphicLayoutEffect,\n  useLeavingItems,\n} from \"../lib/motion.js\";\nimport { Tooltip, TooltipTrigger } from \"../tooltip/tooltip.js\";\n\nexport type FloatingButtonGroupVariant = \"muted\" | \"floating\";\nexport type FloatingButtonGroupSize = \"sm\" | \"md\";\nexport type FloatingButtonGroupOrientation = \"horizontal\" | \"vertical\";\n\nexport interface FloatingButtonGroupAction {\n  type?: \"action\";\n  /** Stable key, also passed to onAction. */\n  id: string;\n  /** Visible label, and the accessible name when the item shows only its icon. */\n  label: string;\n  /** An icon before the label. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n  /** Shows only the icon. The label moves into a tooltip and the accessible name. Overrides the group's iconOnly. */\n  iconOnly?: boolean;\n  onSelect?: () => void;\n  isDisabled?: boolean;\n  /** Marks an action that switches a mode on, such as Present. Sets aria-pressed and keeps a quiet tint while on. */\n  isPressed?: boolean;\n  /** A shortcut hint shown in the tooltip, such as \"⌘Z\". The component does not bind the key. */\n  shortcut?: string;\n  /** Other labels this item can switch to, such as [\"Copied\"] for Share. The button keeps the width of the widest, so a label change never moves anything. */\n  reserveLabels?: readonly string[];\n}\n\nexport interface FloatingButtonGroupSeparator {\n  type: \"separator\";\n  id?: string;\n}\n\nexport type FloatingButtonGroupItem = FloatingButtonGroupAction | FloatingButtonGroupSeparator;\n\nexport interface FloatingButtonGroupProps {\n  items: readonly FloatingButtonGroupItem[];\n  /** Accessible name of the toolbar, such as \"Board actions\". */\n  label: string;\n  /** `muted` sits quietly on a page; `floating` raises the tray with the floating shadow for overlays such as a selection toolbar. @default \"muted\" */\n  variant?: FloatingButtonGroupVariant;\n  /** @default \"md\" */\n  size?: FloatingButtonGroupSize;\n  /** @default \"horizontal\" */\n  orientation?: FloatingButtonGroupOrientation;\n  /** Shows every item as an icon only, with its label in a tooltip. Items with their own iconOnly win. */\n  iconOnly?: boolean;\n  /** Side of the item tooltips. Defaults to top for a row and right for a column. */\n  tooltipSide?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /** Called with the item id after the item's own onSelect. */\n  onAction?: (id: string) => void;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nconst isAction = (item: FloatingButtonGroupItem): item is FloatingButtonGroupAction =>\n  item.type !== \"separator\";\n\nconst PHASE = \"col-start-1 row-start-1 inline-flex items-center gap-1.5 whitespace-nowrap\";\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. Every label the item can show is laid out invisibly in the\n * same grid cell, so the button always has the width of the widest one: a label\n * change crossfades in place and never resizes the button, its neighbours or the\n * tray.\n */\nfunction ItemBody({\n  label,\n  icon,\n  iconOnly,\n  reserve,\n}: {\n  label: string;\n  icon?: ReactNode;\n  iconOnly: boolean;\n  reserve: readonly string[];\n}) {\n  const phaseRef = useRef<HTMLSpanElement>(null);\n  const node = (\n    <>\n      {icon ? <span className=\"inline-flex flex-none [&_svg]:size-(--icon-sm)\">{icon}</span> : null}\n      {iconOnly ? null : <span className=\"block\">{label}</span>}\n    </>\n  );\n  const { leaving, changed, remove } = useLeavingItems(label, node, () => phaseRef.current);\n  const ghosts = iconOnly ? [] : Array.from(new Set([label, ...reserve]));\n  return (\n    <span className=\"relative z-2 inline-grid items-center justify-items-center group-aria-[orientation=vertical]/fg:justify-items-start\">\n      {ghosts.map((text) => (\n        <span\n          key={text}\n          aria-hidden=\"true\"\n          className={cn(PHASE + \" pointer-events-none invisible\")}\n        >\n          {icon ? <span className=\"block size-4 flex-none\" /> : null}\n          <span className=\"block\">{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={label}\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  );\n}\n\nfunction TipContent({ label, shortcut }: { label: string; shortcut?: string }) {\n  return (\n    <span className=\"inline-flex items-baseline gap-3 whitespace-nowrap\">\n      {label}\n      {shortcut ? <kbd className=\"font-[inherit] tabular-nums opacity-70\">{shortcut}</kbd> : null}\n    </span>\n  );\n}\n\nconst MORPH =\n  \"translate var(--duration-morph) var(--ease-morph), width var(--duration-morph) var(--ease-morph), height var(--duration-morph) var(--ease-morph)\";\nconst SCALE = \"scale var(--duration-snappy) var(--ease-snappy)\";\nconst BACKGROUND = \"background-color var(--duration-quick) var(--ease-settle)\";\nconst FADE_IN = \"opacity var(--duration-quick) var(--ease-settle)\";\nconst FADE_OUT = \"opacity var(--duration-standard) var(--ease-settle)\";\nconst FADE_INSTANT = \"opacity var(--duration-instant) var(--ease-settle)\";\n\nconst focusRing =\n  \"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 * Separate soft buttons in a quiet tray. One shared highlight morphs, in\n * position and size, to whichever button the pointer or keyboard focus is on,\n * fades when the pointer leaves the tray, and settles darker in place while a\n * button is pressed. It is the toolbar's main hover and focus indicator. Arrow\n * keys move focus, Home and End jump to the ends, Enter and Space act.\n *\n * @example\n * <FloatingButtonGroup label=\"Board actions\" items={[{ id: \"undo\", label: \"Undo\", icon: <UndoIcon aria-hidden />, iconOnly: true, shortcut: \"⌘Z\" }]} />\n */\nexport function FloatingButtonGroup({\n  items,\n  label,\n  variant = \"muted\",\n  size = \"md\",\n  orientation = \"horizontal\",\n  iconOnly: groupIconOnly = false,\n  tooltipSide,\n  onAction,\n  className,\n}: FloatingButtonGroupProps) {\n  const tray = useRef<HTMLDivElement>(null);\n  const highlight = useRef<HTMLSpanElement>(null);\n  const nodes = useRef(new Map<string, HTMLButtonElement>());\n  const [hoverId, setHoverId] = useState<string | null>(null);\n  const [focusId, setFocusId] = useState<string | null>(null);\n  const [pressing, setPressing] = useState(false);\n  const [tabStop, setTabStop] = useState<string | null>(null);\n\n  const actions = items.filter(isAction);\n  const byId = new Map(actions.map((action) => [action.id, action]));\n  const enabled = (id: string | null) => !!id && !!byId.get(id) && !byId.get(id)?.isDisabled;\n  // Pointer wins over keyboard focus while it is in the tray; a disabled item under the pointer hands back to focus.\n  const activeId = enabled(hoverId) ? hoverId : focusId && byId.has(focusId) ? focusId : null;\n  const stop = enabled(tabStop)\n    ? tabStop\n    : (actions.find((action) => !action.isDisabled)?.id ?? null);\n  const vertical = orientation === \"vertical\";\n  const side = tooltipSide ?? (vertical ? \"right\" : \"top\");\n  const idsKey = actions.map((action) => action.id).join(\"\\u0000\");\n\n  const visible = useRef(false);\n  const traveling = useRef(false);\n  const travelTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const activeRef = useRef(activeId);\n  const pressingRef = useRef(pressing);\n\n  /** The button's box in tray coordinates, exact to the device pixel (offsetLeft rounds to whole pixels) and free of ancestor transforms. */\n  const measure = useCallback((node: HTMLElement) => {\n    const root = tray.current;\n    if (!root) return null;\n    const outer = root.getBoundingClientRect();\n    const box = node.getBoundingClientRect();\n    const unscale = outer.width ? root.offsetWidth / outer.width : 1;\n    const dpr = window.devicePixelRatio || 1;\n    const snap = (value: number) => Math.round(value * unscale * dpr) / dpr;\n    return {\n      x: snap(box.left - outer.left) - root.clientLeft,\n      y: snap(box.top - outer.top) - root.clientTop,\n      width: snap(box.width),\n      height: snap(box.height),\n    };\n  }, []);\n\n  /** Moves the highlight to a button. \"move\" travels on the morph spring; \"follow\" keeps up with a layout change without travelling. */\n  const place = useCallback(\n    (id: string | null, mode: \"move\" | \"follow\") => {\n      const el = highlight.current;\n      if (!el) return;\n      const reduced = prefersReducedMotion();\n      const node = id ? nodes.current.get(id) : undefined;\n      if (!node) {\n        el.style.transition = [BACKGROUND, SCALE, reduced ? FADE_INSTANT : FADE_OUT].join(\", \");\n        el.style.opacity = \"0\";\n        visible.current = false;\n        return;\n      }\n      const rect = measure(node);\n      if (!rect) return;\n      const fade = reduced ? FADE_INSTANT : FADE_IN;\n      // Travel between buttons on the morph spring. Appearing from nothing, and every move with reduced motion, lands in place.\n      const travel = !reduced && visible.current && (mode === \"move\" || traveling.current);\n      if (travel) {\n        traveling.current = true;\n        clearTimeout(travelTimer.current);\n        travelTimer.current = setTimeout(() => {\n          traveling.current = false;\n        }, 740);\n        el.style.transition = [MORPH, SCALE, fade, BACKGROUND].join(\", \");\n      } else {\n        traveling.current = false;\n        el.style.transition = [SCALE, fade, BACKGROUND].join(\", \");\n        if (!visible.current && !reduced) {\n          // It grows into place as it appears.\n          el.style.transition = \"none\";\n          el.style.scale = \"0.94\";\n          void el.offsetWidth;\n          el.style.transition = [SCALE, fade, BACKGROUND].join(\", \");\n          el.style.scale = pressingRef.current ? \"0.965\" : \"1\";\n        }\n      }\n      el.style.translate = rect.x + \"px \" + rect.y + \"px\";\n      el.style.width = rect.width + \"px\";\n      el.style.height = rect.height + \"px\";\n      el.style.opacity = \"1\";\n      visible.current = true;\n    },\n    [measure],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    activeRef.current = activeId;\n    place(activeId, \"move\");\n  }, [activeId, place]);\n\n  useEffect(() => {\n    pressingRef.current = pressing;\n    const el = highlight.current;\n    if (!el) return;\n    el.style.scale = pressing && activeId ? \"0.965\" : \"1\";\n  }, [activeId, pressing]);\n\n  // A font that loads or a container that reflows moves the buttons; the highlight follows without travel.\n  // The follow is deferred a frame, so moving it inside the notification cannot report a ResizeObserver loop.\n  useEffect(() => {\n    const root = tray.current;\n    if (!root || typeof ResizeObserver === \"undefined\") return;\n    let frame = 0;\n    const observer = new ResizeObserver(() => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => {\n        if (activeRef.current) place(activeRef.current, \"follow\");\n      });\n    });\n    observer.observe(root);\n    nodes.current.forEach((node) => observer.observe(node));\n    return () => {\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n    };\n  }, [idsKey, place]);\n\n  // A native listener, because React bubbles pointer events through portals: moving from a button onto its tooltip\n  // would not count as leaving the tray, and the highlight would stay behind.\n  useEffect(() => {\n    const root = tray.current;\n    if (!root) return;\n    const leave = () => {\n      setHoverId(null);\n      setPressing(false);\n    };\n    root.addEventListener(\"pointerleave\", leave);\n    return () => root.removeEventListener(\"pointerleave\", leave);\n  }, []);\n\n  useEffect(() => () => clearTimeout(travelTimer.current), []);\n\n  const buttons = () =>\n    Array.from(tray.current?.querySelectorAll<HTMLButtonElement>(\"[data-fg-item]\") ?? []);\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const all = buttons();\n    const index = all.findIndex((node) => node === document.activeElement);\n    if (index < 0) return;\n    const next = vertical ? \"ArrowDown\" : \"ArrowRight\";\n    const previous = vertical ? \"ArrowUp\" : \"ArrowLeft\";\n    const usable = (node: HTMLButtonElement) => node.getAttribute(\"aria-disabled\") !== \"true\";\n    let target: HTMLButtonElement | undefined;\n    if (event.key === \"Home\") target = all.find(usable);\n    else if (event.key === \"End\") target = [...all].reverse().find(usable);\n    else if (event.key === next || event.key === previous) {\n      const step = event.key === next ? 1 : -1;\n      for (let offset = 1; offset <= all.length; offset += 1) {\n        const candidate = all[(index + step * offset + all.length * offset) % all.length]!;\n        if (usable(candidate)) {\n          target = candidate;\n          break;\n        }\n      }\n    } else return;\n    event.preventDefault();\n    if (!target) return;\n    // The keyboard takes the highlight back until the pointer moves again.\n    setHoverId(null);\n    target.focus();\n  };\n\n  const onBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (tray.current?.contains(event.relatedTarget)) return;\n    setFocusId(null);\n    setPressing(false);\n  };\n\n  return (\n    <div\n      ref={tray}\n      role=\"toolbar\"\n      aria-label={label}\n      aria-orientation={orientation}\n      data-variant={variant}\n      data-size={size}\n      onKeyDown={onKeyDown}\n      onBlur={onBlur}\n      className={cn(\"floating-group group/fg\", className)}\n    >\n      <span\n        ref={highlight}\n        aria-hidden=\"true\"\n        data-pressing={pressing && activeId ? \"\" : undefined}\n        className=\"floating-group-highlight\"\n      />\n      {items.map((item, position) => {\n        if (!isAction(item))\n          return (\n            <span\n              key={item.id ?? \"separator-\" + position}\n              role=\"separator\"\n              aria-orientation={vertical ? \"horizontal\" : \"vertical\"}\n              className=\"floating-group-separator\"\n            />\n          );\n        const {\n          id,\n          label: itemLabel,\n          icon,\n          onSelect,\n          isDisabled = false,\n          isPressed,\n          shortcut,\n          reserveLabels = [],\n        } = item;\n        const iconOnly = !!icon && (item.iconOnly ?? groupIconOnly);\n        const button = (\n          <button\n            ref={(node) => {\n              if (node) nodes.current.set(id, node);\n              else nodes.current.delete(id);\n            }}\n            type=\"button\"\n            data-fg-item=\"\"\n            data-active={activeId === id ? \"\" : undefined}\n            data-icon={icon ? \"\" : undefined}\n            data-icon-only={iconOnly ? \"\" : undefined}\n            aria-label={itemLabel}\n            aria-pressed={isPressed === undefined ? undefined : isPressed}\n            aria-disabled={isDisabled || undefined}\n            tabIndex={stop === id ? 0 : -1}\n            onPointerMove={(event) => {\n              if (event.pointerType === \"mouse\" || event.pointerType === \"pen\") setHoverId(id);\n            }}\n            onPointerDown={(event) => {\n              if (isDisabled || event.button !== 0) return;\n              setHoverId(id);\n              setPressing(true);\n            }}\n            onPointerUp={() => setPressing(false)}\n            onPointerCancel={() => setPressing(false)}\n            onPointerLeave={() => setPressing(false)}\n            onKeyDown={(event) => {\n              if ((event.key === \"Enter\" || event.key === \" \") && !event.repeat && !isDisabled)\n                setPressing(true);\n            }}\n            onKeyUp={(event) => {\n              if (event.key === \"Enter\" || event.key === \" \") setPressing(false);\n            }}\n            onFocus={(event) => {\n              setTabStop(id);\n              let keyboard = true;\n              try {\n                keyboard = event.currentTarget.matches(\":focus-visible\");\n              } catch {\n                /* older engines */\n              }\n              setFocusId(keyboard ? id : null);\n            }}\n            onClick={() => {\n              if (isDisabled) return;\n              onSelect?.();\n              onAction?.(id);\n            }}\n            className={cn(\"floating-group-item \" + focusRing)}\n          >\n            <ItemBody label={itemLabel} icon={icon} iconOnly={iconOnly} reserve={reserveLabels} />\n          </button>\n        );\n        // Tooltips render no wrapper element, so every button stays a direct child of the tray and measures against it.\n        if (!iconOnly && !shortcut) return <Fragment key={id}>{button}</Fragment>;\n        return (\n          <TooltipTrigger key={id}>\n            <Focusable>{button}</Focusable>\n            <Tooltip placement={side}>\n              <TipContent label={itemLabel} shortcut={shortcut} />\n            </Tooltip>\n          </TooltipTrigger>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { FloatingButtonGroup, FloatingButtonGroupAction, FloatingButtonGroupItem, FloatingButtonGroupOrientation, FloatingButtonGroupProps, FloatingButtonGroupSeparator, FloatingButtonGroupSize, FloatingButtonGroupVariant } from "./floating-button-group.js";
+export { FloatingButtonGroup, type FloatingButtonGroupAction, type FloatingButtonGroupItem, type FloatingButtonGroupOrientation, type FloatingButtonGroupProps, type FloatingButtonGroupSeparator, type FloatingButtonGroupSize, type FloatingButtonGroupVariant };

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

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

package/dist/gauge/gauge.d.ts

@@ -0,0 +1,45 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/gauge/gauge.d.ts
+/**
+ * Gauge: one value against a range, as a ring open at the bottom with the
+ * number at its centre. Use it for a score or a fill level; use Progress for a
+ * task that finishes.
+ *
+ * The ring fills the first time it is seen, slowly and without overshoot, like
+ * a ring closing. After that it springs to each new value with a little life
+ * while the count follows without overshooting. A band that starts at
+ * `from` sets the colour and names the state ("Healthy", "At risk"): the
+ * highest band the value reaches wins, and it changes exactly as the count
+ * crosses the threshold, so state never rests on colour alone. The label,
+ * status and detail rise in when they change, from the side the value moved
+ * toward.
+ *
+ * Plain SVG and CSS. One small spring tween writes the ring and the count
+ * straight to the DOM. The ring is a `meter` for assistive technology.
+ */
+export type GaugeTone = "primary" | "success" | "warning" | "danger";
+export interface GaugeThreshold {
+  /** The band starts at this value (in the same unit as `value`). */
+  from: number;
+  tone: GaugeTone;
+  /** Names the state. Shown under the number and announced with the value. */
+  label: string;
+}
+export interface GaugeProps extends Omit<ComponentPropsWithoutRef<"figure">, "children"> {
+  value: number;
+  /** @default 0 */
+  min?: number;
+  /** @default 100 */
+  max?: number;
+  /** What is measured. Names the meter. */
+  label: string;
+  /** A line under the label, such as "Up 4 from last week". */
+  detail?: string;
+  /** The colour when no band applies. @default "primary" */
+  tone?: GaugeTone;
+  /** Bands that set the tone and name the state. */
+  thresholds?: GaugeThreshold[];
+}
+export declare const Gauge: import("react").ForwardRefExoticComponent<GaugeProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=gauge.d.ts.map