@seekalfred/primitives 0.5.1 → 0.7.1

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

@@ -0,0 +1,350 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from "../lib/motion.js";
+import { IconSwap } from "../lib/icon-swap.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/expanding-button-group/expanding-button-group.tsx
+/** Geometry per size. The icon keeps the same left inset collapsed and expanded, so it never moves while the label is revealed. */
+const metrics = {
+	sm: {
+		height: 28,
+		icon: 14,
+		start: 7,
+		gap: 5,
+		end: 11
+	},
+	md: {
+		height: 36,
+		icon: 16,
+		start: 10,
+		gap: 7,
+		end: 14
+	}
+};
+/** Pixels the pointer must travel into a neighbouring action before the expansion moves to it. */
+const hysteresis = 4;
+/** The confirmation tick draws itself from its short stroke. */
+function DrawnCheck() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M4 12.5l5 5L20 6.5",
+			pathLength: 1,
+			className: "[stroke-dasharray:1] motion-safe:animate-check-draw-quick"
+		})
+	});
+}
+function LeavingWord({ 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: "col-start-1 row-start-1 whitespace-nowrap motion-safe:animate-word-out motion-reduce:animate-fade-out",
+		children
+	});
+}
+function Item({ item, size, expanded, done, busy, tabStop, onPointerDown, onClick, onFocus }) {
+	const m = metrics[size];
+	const labelRef = useRef(null);
+	const doneRef = useRef(null);
+	const wordRef = useRef(null);
+	const [text, setText] = useState(0);
+	useIsomorphicLayoutEffect(() => {
+		const measure = () => {
+			const next = Math.max(labelRef.current?.getBoundingClientRect().width ?? 0, doneRef.current?.getBoundingClientRect().width ?? 0);
+			setText((current) => Math.abs(current - next) < .5 ? current : next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		let frame = 0;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		});
+		if (labelRef.current) observer.observe(labelRef.current);
+		if (doneRef.current) observer.observe(doneRef.current);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [
+		item.label,
+		item.doneLabel,
+		size
+	]);
+	const showDone = done && !!item.doneLabel;
+	const measured = text > 0;
+	const target = expanded && measured ? m.start + m.icon + m.gap + text + m.end : m.height;
+	const word = showDone ? item.doneLabel : item.label;
+	const { leaving, changed, remove } = useLeavingItems(word, word, () => wordRef.current);
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		style: { width: target },
+		"data-ebg-item": "",
+		"data-id": item.id,
+		"data-tone": item.tone ?? "neutral",
+		"data-state": showDone ? "done" : "idle",
+		"data-expanded": expanded || void 0,
+		"data-unmeasured": measured ? void 0 : "",
+		"aria-label": item.label,
+		"aria-disabled": item.isDisabled || void 0,
+		"aria-busy": busy || void 0,
+		tabIndex: tabStop ? 0 : -1,
+		onPointerDown: (event) => onPointerDown(item, event),
+		onClick: () => onClick(item),
+		onFocus: (event) => onFocus(item, event),
+		className: "expanding-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("span", {
+			className: "expanding-group-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(IconSwap, {
+				iconKey: showDone ? "done" : "icon",
+				tight: true,
+				fill: true,
+				className: "size-full",
+				children: showDone ? /* @__PURE__ */ jsx(DrawnCheck, {}) : item.icon
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "expanding-group-label",
+			"aria-hidden": "true",
+			children: [
+				leaving.map((entry) => /* @__PURE__ */ jsx(LeavingWord, {
+					id: entry.id,
+					onDone: remove,
+					children: entry.value
+				}, entry.id)),
+				/* @__PURE__ */ jsx("span", {
+					ref: wordRef,
+					className: cn("col-start-1 row-start-1 whitespace-nowrap" + (changed ? " motion-safe:animate-word-in motion-reduce:animate-fade-in" : "")),
+					children: word
+				}, word),
+				/* @__PURE__ */ jsx("span", {
+					ref: labelRef,
+					className: "pointer-events-none invisible col-start-1 row-start-1 whitespace-nowrap",
+					children: item.label
+				}),
+				item.doneLabel ? /* @__PURE__ */ jsx("span", {
+					ref: doneRef,
+					className: "pointer-events-none invisible col-start-1 row-start-1 whitespace-nowrap",
+					children: item.doneLabel
+				}) : null
+			]
+		})]
+	});
+}
+/**
+* A compact pill of icon buttons for actions. One action always shows its label;
+* the one you point at or focus takes over the label while its neighbours slide
+* aside, and an action can confirm in place: the icon draws a check and the label
+* becomes a past tense word. On touch, the first tap reveals the label and a
+* second tap runs the action.
+*
+* Arrow keys move focus, Home and End jump to the ends. A disabled action stays
+* focusable and still reveals its label, so people can learn what it would do.
+*
+* @example
+* <ExpandingButtonGroup label="Message actions" items={[{ id: "archive", label: "Archive", doneLabel: "Archived", icon: <ArchiveIcon aria-hidden /> }]} />
+*/
+function ExpandingButtonGroup({ items, label, size = "md", defaultExpanded = null, onAction, confirmDuration = 1400, className }) {
+	const root = useRef(null);
+	const [intent, setIntent] = useState(null);
+	const [done, setDone] = useState(null);
+	const [busy, setBusy] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
+	const [focused, setFocused] = useState(null);
+	const [settled, setSettled] = useState(false);
+	const pointerOver = useRef(null);
+	const pointerAt = useRef(null);
+	const keyFocus = useRef(null);
+	const touchOpen = useRef(null);
+	const press = useRef(null);
+	const doneRef = useRef(null);
+	const timer = useRef(null);
+	const mounted = useRef(true);
+	const seq = useRef(0);
+	useEffect(() => {
+		mounted.current = true;
+		const frames = requestAnimationFrame(() => requestAnimationFrame(() => setSettled(true)));
+		return () => {
+			mounted.current = false;
+			cancelAnimationFrame(frames);
+			if (timer.current) clearTimeout(timer.current);
+		};
+	}, []);
+	const has = (id) => !!id && items.some((item) => item.id === id);
+	const firstEnabled = items.find((item) => !item.isDisabled)?.id ?? items[0]?.id ?? null;
+	const restId = has(defaultExpanded) ? defaultExpanded : firstEnabled;
+	const expandedId = has(intent) ? intent : restId;
+	const tabStop = has(focused) ? focused : restId;
+	useEffect(() => {
+		if (!intent || touchOpen.current !== intent) return;
+		const onDown = (event) => {
+			if (root.current?.contains(event.target)) return;
+			touchOpen.current = null;
+			setIntent(doneRef.current ?? keyFocus.current);
+		};
+		document.addEventListener("pointerdown", onDown, true);
+		return () => document.removeEventListener("pointerdown", onDown, true);
+	}, [intent]);
+	const confirm = useCallback((item) => {
+		if (timer.current) clearTimeout(timer.current);
+		seq.current += 1;
+		doneRef.current = item.id;
+		setDone({
+			id: item.id,
+			seq: seq.current
+		});
+		setAnnouncement((item.doneLabel ?? "") + (seq.current % 2 ? "" : "​"));
+		timer.current = setTimeout(() => {
+			doneRef.current = null;
+			setDone(null);
+			if (pointerOver.current !== item.id && keyFocus.current !== item.id) {
+				if (touchOpen.current === item.id) touchOpen.current = null;
+				setIntent((current) => current === item.id ? pointerOver.current ?? keyFocus.current : current);
+			}
+		}, confirmDuration);
+	}, [confirmDuration]);
+	const activate = useCallback(async (item) => {
+		if (item.isDisabled || busy === item.id || doneRef.current === item.id) return;
+		setIntent(item.id);
+		onAction?.(item.id);
+		let result;
+		try {
+			const pending = item.onSelect?.();
+			if (pending instanceof Promise) {
+				setBusy(item.id);
+				result = await pending;
+			} else result = pending;
+		} catch {
+			result = false;
+		} finally {
+			if (mounted.current) setBusy((current) => current === item.id ? null : current);
+		}
+		if (!mounted.current || result === false || !item.doneLabel) return;
+		confirm(item);
+	}, [
+		busy,
+		confirm,
+		onAction
+	]);
+	const onItemPointerDown = (item, event) => {
+		press.current = {
+			id: item.id,
+			kind: event.pointerType,
+			wasExpanded: expandedId === item.id
+		};
+	};
+	const onItemClick = (item) => {
+		const last = press.current;
+		press.current = null;
+		if (last && last.id === item.id && last.kind === "touch" && !last.wasExpanded) {
+			touchOpen.current = item.id;
+			setIntent(item.id);
+			return;
+		}
+		if (last?.kind === "touch") touchOpen.current = item.id;
+		activate(item);
+	};
+	const onItemFocus = (item, event) => {
+		setFocused(item.id);
+		let visible = true;
+		try {
+			visible = event.currentTarget.matches(":focus-visible");
+		} catch {}
+		if (!visible) return;
+		keyFocus.current = item.id;
+		setIntent(item.id);
+	};
+	const onBlur = (event) => {
+		if (root.current?.contains(event.relatedTarget)) return;
+		keyFocus.current = null;
+		touchOpen.current = null;
+		setIntent(pointerOver.current ?? doneRef.current);
+	};
+	const onPointerMove = (event) => {
+		if (event.pointerType !== "mouse") return;
+		const at = pointerAt.current;
+		if (at && Math.abs(at.x - event.clientX) < 1 && Math.abs(at.y - event.clientY) < 1) return;
+		pointerAt.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const button = event.target.closest("[data-ebg-item]");
+		const id = button?.dataset.id;
+		if (!button || !id || id === pointerOver.current) return;
+		if (pointerOver.current) {
+			const box = button.getBoundingClientRect();
+			if (event.clientX < box.left + hysteresis || event.clientX > box.right - hysteresis) return;
+		}
+		pointerOver.current = id;
+		setIntent(id);
+	};
+	const onPointerLeave = (event) => {
+		if (event.pointerType !== "mouse") return;
+		pointerAt.current = null;
+		pointerOver.current = null;
+		setIntent(doneRef.current ?? keyFocus.current);
+	};
+	const onKeyDown = (event) => {
+		const list = Array.from(root.current?.querySelectorAll("[data-ebg-item]") ?? []);
+		const index = list.findIndex((button) => button === document.activeElement);
+		if (index < 0) return;
+		const last = list.length - 1;
+		const target = event.key === "ArrowRight" ? index === last ? 0 : index + 1 : event.key === "ArrowLeft" ? index === 0 ? last : index - 1 : event.key === "Home" ? 0 : event.key === "End" ? last : -1;
+		if (target < 0) return;
+		event.preventDefault();
+		list[target].focus();
+	};
+	const m = metrics[size];
+	const vars = {
+		"--ebg-h": m.height + "px",
+		"--ebg-icon": m.icon + "px",
+		"--ebg-start": m.start + "px",
+		"--ebg-gap": m.gap + "px",
+		"--ebg-end": m.end + "px"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		role: "toolbar",
+		"aria-label": label,
+		"aria-orientation": "horizontal",
+		"data-size": size,
+		"data-settled": settled ? "" : void 0,
+		style: vars,
+		onKeyDown,
+		onBlur,
+		onPointerMove,
+		onPointerLeave,
+		className: cn("expanding-group", className),
+		children: [items.map((item) => /* @__PURE__ */ jsx(Item, {
+			item,
+			size,
+			expanded: expandedId === item.id,
+			done: done?.id === item.id,
+			busy: busy === item.id,
+			tabStop: tabStop === item.id,
+			onPointerDown: onItemPointerDown,
+			onClick: onItemClick,
+			onFocus: onItemFocus
+		}, item.id)), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			role: "status",
+			"aria-live": "polite",
+			children: announcement
+		})]
+	});
+}
+//#endregion
+export { ExpandingButtonGroup };
+
+//# sourceMappingURL=expanding-button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expanding-button-group.js","names":[],"sources":["../../src/expanding-button-group/expanding-button-group.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { IconSwap } from \"../lib/icon-swap.js\";\nimport { useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from \"../lib/motion.js\";\n\nexport type ExpandingButtonGroupSize = \"sm\" | \"md\";\nexport type ExpandingButtonGroupTone = \"neutral\" | \"danger\";\n\nexport interface ExpandingButtonGroupItem {\n  /** Stable key for the action. Also the value passed to onAction. */\n  id: string;\n  /** Visible label once the button expands, and its accessible name at all times. Use a short verb, such as \"Archive\". */\n  label: string;\n  /** Icon shown while collapsed. A 16px icon fits; it is sized by the group. Mark it `aria-hidden`. */\n  icon: ReactNode;\n  /** Runs the action. Return false, or reject, to skip the confirmation. A promise keeps the button busy until it settles. */\n  onSelect?: () => void | boolean | Promise<void | boolean>;\n  /** Past tense word shown in place after the action, such as \"Archived\". The icon becomes a check for confirmDuration. Omit for actions that open something. */\n  doneLabel?: string;\n  /** `danger` colours the expanded state with the destructive token, for destructive actions such as Delete. */\n  tone?: ExpandingButtonGroupTone;\n  /** Dimmed and inert. Stays focusable and still reveals its label, so people can learn what it would do. */\n  isDisabled?: boolean;\n}\n\nexport interface ExpandingButtonGroupProps {\n  items: readonly ExpandingButtonGroupItem[];\n  /** Accessible name of the toolbar, such as \"Message actions\". */\n  label: string;\n  /** @default \"md\" */\n  size?: ExpandingButtonGroupSize;\n  /**\n   * Id of the action whose label shows at rest, usually the primary one. Defaults to the first enabled action: one action is always\n   * expanded. Pointing at or focusing another moves the expansion there, and it returns here when the pointer and focus leave.\n   */\n  defaultExpanded?: string | null;\n  /** Called with the item id whenever an action runs, before its own onSelect. */\n  onAction?: (id: string) => void;\n  /** How long the confirmation stays, in milliseconds. @default 1400 */\n  confirmDuration?: number;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/** Geometry per size. The icon keeps the same left inset collapsed and expanded, so it never moves while the label is revealed. */\nconst metrics = {\n  sm: { height: 28, icon: 14, start: 7, gap: 5, end: 11 },\n  md: { height: 36, icon: 16, start: 10, gap: 7, end: 14 },\n} as const;\n\n/** Pixels the pointer must travel into a neighbouring action before the expansion moves to it. */\nconst hysteresis = 4;\n\n/** The confirmation tick draws itself from its short stroke. */\nfunction DrawnCheck() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M4 12.5l5 5L20 6.5\"\n        pathLength={1}\n        className=\"[stroke-dasharray:1] motion-safe:animate-check-draw-quick\"\n      />\n    </svg>\n  );\n}\n\nfunction LeavingWord({\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=\"col-start-1 row-start-1 whitespace-nowrap motion-safe:animate-word-out motion-reduce:animate-fade-out\"\n    >\n      {children}\n    </span>\n  );\n}\n\ninterface ItemProps {\n  item: ExpandingButtonGroupItem;\n  size: ExpandingButtonGroupSize;\n  expanded: boolean;\n  done: boolean;\n  busy: boolean;\n  tabStop: boolean;\n  onPointerDown: (item: ExpandingButtonGroupItem, event: PointerEvent<HTMLButtonElement>) => void;\n  onClick: (item: ExpandingButtonGroupItem) => void;\n  onFocus: (item: ExpandingButtonGroupItem, event: FocusEvent<HTMLButtonElement>) => void;\n}\n\nfunction Item({\n  item,\n  size,\n  expanded,\n  done,\n  busy,\n  tabStop,\n  onPointerDown,\n  onClick,\n  onFocus,\n}: ItemProps) {\n  const m = metrics[size];\n  const labelRef = useRef<HTMLSpanElement>(null);\n  const doneRef = useRef<HTMLSpanElement>(null);\n  const wordRef = useRef<HTMLSpanElement>(null);\n  const [text, setText] = useState(0);\n\n  // Hidden copies of both words share the label's grid cell, so the slot is always as wide as the longer one. The confirmation\n  // swap then never changes the width, and the server render already has the right width before anything is measured.\n  // Changes under half a pixel are ignored, so a re-measure never makes the row wobble.\n  useIsomorphicLayoutEffect(() => {\n    const measure = () => {\n      const next = Math.max(\n        labelRef.current?.getBoundingClientRect().width ?? 0,\n        doneRef.current?.getBoundingClientRect().width ?? 0,\n      );\n      setText((current) => (Math.abs(current - next) < 0.5 ? current : next));\n    };\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    // A frame later, so the state it sets cannot report a ResizeObserver loop.\n    let frame = 0;\n    const observer = new ResizeObserver(() => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(measure);\n    });\n    if (labelRef.current) observer.observe(labelRef.current);\n    if (doneRef.current) observer.observe(doneRef.current);\n    return () => {\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n    };\n  }, [item.label, item.doneLabel, size]);\n\n  const showDone = done && !!item.doneLabel;\n  const measured = text > 0;\n  // Width rides the morph spring, so neighbours slide and the group's own width follows without a jump.\n  const target = expanded && measured ? m.start + m.icon + m.gap + text + m.end : m.height;\n  const word = showDone ? item.doneLabel! : item.label;\n  const { leaving, changed, remove } = useLeavingItems(word, word, () => wordRef.current);\n\n  return (\n    <button\n      type=\"button\"\n      style={{ width: target }}\n      data-ebg-item=\"\"\n      data-id={item.id}\n      data-tone={item.tone ?? \"neutral\"}\n      data-state={showDone ? \"done\" : \"idle\"}\n      data-expanded={expanded || undefined}\n      data-unmeasured={measured ? undefined : \"\"}\n      aria-label={item.label}\n      aria-disabled={item.isDisabled || undefined}\n      aria-busy={busy || undefined}\n      tabIndex={tabStop ? 0 : -1}\n      onPointerDown={(event) => onPointerDown(item, event)}\n      onClick={() => onClick(item)}\n      onFocus={(event) => onFocus(item, event)}\n      className=\"expanding-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)\"\n    >\n      <span className=\"expanding-group-icon\" aria-hidden=\"true\">\n        <IconSwap iconKey={showDone ? \"done\" : \"icon\"} tight fill className=\"size-full\">\n          {showDone ? <DrawnCheck /> : item.icon}\n        </IconSwap>\n      </span>\n      {/* Outgoing and incoming words share one cell, so a confirmation crossfades in place while the width springs between them. */}\n      <span className=\"expanding-group-label\" aria-hidden=\"true\">\n        {leaving.map((entry) => (\n          <LeavingWord key={entry.id} id={entry.id} onDone={remove}>\n            {entry.value}\n          </LeavingWord>\n        ))}\n        <span\n          key={word}\n          ref={wordRef}\n          className={cn(\n            \"col-start-1 row-start-1 whitespace-nowrap\" +\n              (changed ? \" motion-safe:animate-word-in motion-reduce:animate-fade-in\" : \"\"),\n          )}\n        >\n          {word}\n        </span>\n        {/* Invisible copies of both words hold the slot at the longer one; they are also what gets measured for the width target. */}\n        <span\n          ref={labelRef}\n          className=\"pointer-events-none invisible col-start-1 row-start-1 whitespace-nowrap\"\n        >\n          {item.label}\n        </span>\n        {item.doneLabel ? (\n          <span\n            ref={doneRef}\n            className=\"pointer-events-none invisible col-start-1 row-start-1 whitespace-nowrap\"\n          >\n            {item.doneLabel}\n          </span>\n        ) : null}\n      </span>\n    </button>\n  );\n}\n\n/**\n * A compact pill of icon buttons for actions. One action always shows its label;\n * the one you point at or focus takes over the label while its neighbours slide\n * aside, and an action can confirm in place: the icon draws a check and the label\n * becomes a past tense word. On touch, the first tap reveals the label and a\n * second tap runs the action.\n *\n * Arrow keys move focus, Home and End jump to the ends. A disabled action stays\n * focusable and still reveals its label, so people can learn what it would do.\n *\n * @example\n * <ExpandingButtonGroup label=\"Message actions\" items={[{ id: \"archive\", label: \"Archive\", doneLabel: \"Archived\", icon: <ArchiveIcon aria-hidden /> }]} />\n */\nexport function ExpandingButtonGroup({\n  items,\n  label,\n  size = \"md\",\n  defaultExpanded = null,\n  onAction,\n  confirmDuration = 1400,\n  className,\n}: ExpandingButtonGroupProps) {\n  const root = useRef<HTMLDivElement>(null);\n  const [intent, setIntent] = useState<string | null>(null);\n  const [done, setDone] = useState<{ id: string; seq: number } | null>(null);\n  const [busy, setBusy] = useState<string | null>(null);\n  const [announcement, setAnnouncement] = useState(\"\");\n  const [focused, setFocused] = useState<string | null>(null);\n  // The width only transitions once the group has been painted and measured, so the first widths land at once.\n  const [settled, setSettled] = useState(false);\n\n  // Refs mirror what the pointer and keyboard are doing right now, so leave and blur handlers can fall back correctly.\n  const pointerOver = useRef<string | null>(null);\n  const pointerAt = useRef<{ x: number; y: number } | null>(null);\n  const keyFocus = useRef<string | null>(null);\n  const touchOpen = useRef<string | null>(null);\n  const press = useRef<{ id: string; kind: string; wasExpanded: boolean } | null>(null);\n  const doneRef = useRef<string | null>(null);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const mounted = useRef(true);\n  const seq = useRef(0);\n\n  useEffect(() => {\n    mounted.current = true;\n    const frames = requestAnimationFrame(() => requestAnimationFrame(() => setSettled(true)));\n    return () => {\n      mounted.current = false;\n      cancelAnimationFrame(frames);\n      if (timer.current) clearTimeout(timer.current);\n    };\n  }, []);\n\n  const has = (id: string | null) => !!id && items.some((item) => item.id === id);\n  // One action is always expanded: the resting one is defaultExpanded, else the first enabled action.\n  const firstEnabled = items.find((item) => !item.isDisabled)?.id ?? items[0]?.id ?? null;\n  const restId = has(defaultExpanded) ? defaultExpanded : firstEnabled;\n  const expandedId = has(intent) ? intent : restId;\n  const tabStop = has(focused) ? focused : restId;\n\n  // A tap outside closes a label opened by a first tap.\n  useEffect(() => {\n    if (!intent || touchOpen.current !== intent) return;\n    const onDown = (event: globalThis.PointerEvent) => {\n      if (root.current?.contains(event.target as Node)) return;\n      touchOpen.current = null;\n      setIntent(doneRef.current ?? keyFocus.current);\n    };\n    document.addEventListener(\"pointerdown\", onDown, true);\n    return () => document.removeEventListener(\"pointerdown\", onDown, true);\n  }, [intent]);\n\n  const confirm = useCallback(\n    (item: ExpandingButtonGroupItem) => {\n      if (timer.current) clearTimeout(timer.current);\n      seq.current += 1;\n      doneRef.current = item.id;\n      setDone({ id: item.id, seq: seq.current });\n      // A zero width space alternates so the same word is announced again on a repeat action.\n      setAnnouncement((item.doneLabel ?? \"\") + (seq.current % 2 ? \"\" : \"​\"));\n      timer.current = setTimeout(() => {\n        doneRef.current = null;\n        setDone(null);\n        // Collapse unless the pointer or the keyboard is still on it.\n        if (pointerOver.current !== item.id && keyFocus.current !== item.id) {\n          if (touchOpen.current === item.id) touchOpen.current = null;\n          setIntent((current) =>\n            current === item.id ? (pointerOver.current ?? keyFocus.current) : current,\n          );\n        }\n      }, confirmDuration);\n    },\n    [confirmDuration],\n  );\n\n  const activate = useCallback(\n    async (item: ExpandingButtonGroupItem) => {\n      if (item.isDisabled || busy === item.id || doneRef.current === item.id) return;\n      setIntent(item.id);\n      onAction?.(item.id);\n      let result: void | boolean;\n      try {\n        const pending = item.onSelect?.();\n        if (pending instanceof Promise) {\n          setBusy(item.id);\n          result = await pending;\n        } else result = pending;\n      } catch {\n        result = false;\n      } finally {\n        if (mounted.current) setBusy((current) => (current === item.id ? null : current));\n      }\n      if (!mounted.current || result === false || !item.doneLabel) return;\n      confirm(item);\n    },\n    [busy, confirm, onAction],\n  );\n\n  const onItemPointerDown = (\n    item: ExpandingButtonGroupItem,\n    event: PointerEvent<HTMLButtonElement>,\n  ) => {\n    press.current = { id: item.id, kind: event.pointerType, wasExpanded: expandedId === item.id };\n  };\n\n  const onItemClick = (item: ExpandingButtonGroupItem) => {\n    const last = press.current;\n    press.current = null;\n    // Touch has no hover: the first tap opens the label, the second runs it. An item already showing its label runs at once.\n    if (last && last.id === item.id && last.kind === \"touch\" && !last.wasExpanded) {\n      touchOpen.current = item.id;\n      setIntent(item.id);\n      return;\n    }\n    if (last?.kind === \"touch\") touchOpen.current = item.id;\n    void activate(item);\n  };\n\n  const onItemFocus = (item: ExpandingButtonGroupItem, event: FocusEvent<HTMLButtonElement>) => {\n    setFocused(item.id);\n    // Only keyboard focus expands; a mouse click or a tap already has its own path, and would otherwise leave the label open.\n    let visible = true;\n    try {\n      visible = event.currentTarget.matches(\":focus-visible\");\n    } catch {\n      /* older engines expand on any focus */\n    }\n    if (!visible) return;\n    keyFocus.current = item.id;\n    setIntent(item.id);\n  };\n\n  const onBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (root.current?.contains(event.relatedTarget)) return;\n    keyFocus.current = null;\n    touchOpen.current = null;\n    setIntent(pointerOver.current ?? doneRef.current);\n  };\n\n  // Hover follows real pointer movement only. Expanding moves the buttons, and a button that slides under a resting pointer\n  // must not take over, or two neighbours could trade places back and forth.\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.pointerType !== \"mouse\") return;\n    const at = pointerAt.current;\n    if (at && Math.abs(at.x - event.clientX) < 1 && Math.abs(at.y - event.clientY) < 1) return;\n    pointerAt.current = { x: event.clientX, y: event.clientY };\n    const button = (event.target as HTMLElement).closest<HTMLElement>(\"[data-ebg-item]\");\n    const id = button?.dataset.id;\n    if (!button || !id || id === pointerOver.current) return;\n    // Hysteresis: moving from one action to the next needs the pointer a few pixels inside the new one, so resting on a\n    // boundary never flips between them.\n    if (pointerOver.current) {\n      const box = button.getBoundingClientRect();\n      if (event.clientX < box.left + hysteresis || event.clientX > box.right - hysteresis) return;\n    }\n    pointerOver.current = id;\n    setIntent(id);\n  };\n\n  const onPointerLeave = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.pointerType !== \"mouse\") return;\n    pointerAt.current = null;\n    pointerOver.current = null;\n    setIntent(doneRef.current ?? keyFocus.current);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const list = Array.from(\n      root.current?.querySelectorAll<HTMLButtonElement>(\"[data-ebg-item]\") ?? [],\n    );\n    const index = list.findIndex((button) => button === document.activeElement);\n    if (index < 0) return;\n    const last = list.length - 1;\n    const target =\n      event.key === \"ArrowRight\"\n        ? index === last\n          ? 0\n          : index + 1\n        : event.key === \"ArrowLeft\"\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  const m = metrics[size];\n  const vars = {\n    \"--ebg-h\": m.height + \"px\",\n    \"--ebg-icon\": m.icon + \"px\",\n    \"--ebg-start\": m.start + \"px\",\n    \"--ebg-gap\": m.gap + \"px\",\n    \"--ebg-end\": m.end + \"px\",\n  } as CSSProperties;\n\n  return (\n    <div\n      ref={root}\n      role=\"toolbar\"\n      aria-label={label}\n      aria-orientation=\"horizontal\"\n      data-size={size}\n      data-settled={settled ? \"\" : undefined}\n      style={vars}\n      onKeyDown={onKeyDown}\n      onBlur={onBlur}\n      onPointerMove={onPointerMove}\n      onPointerLeave={onPointerLeave}\n      className={cn(\"expanding-group\", className)}\n    >\n      {items.map((item) => (\n        <Item\n          key={item.id}\n          item={item}\n          size={size}\n          expanded={expandedId === item.id}\n          done={done?.id === item.id}\n          busy={busy === item.id}\n          tabStop={tabStop === item.id}\n          onPointerDown={onItemPointerDown}\n          onClick={onItemClick}\n          onFocus={onItemFocus}\n        />\n      ))}\n      <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {announcement}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { ExpandingButtonGroup, ExpandingButtonGroupItem, ExpandingButtonGroupProps, ExpandingButtonGroupSize, ExpandingButtonGroupTone } from "./expanding-button-group.js";
+export { ExpandingButtonGroup, type ExpandingButtonGroupItem, type ExpandingButtonGroupProps, type ExpandingButtonGroupSize, type ExpandingButtonGroupTone };

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

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

package/dist/file-drop-zone/file-drop-zone.d.ts

@@ -0,0 +1,71 @@
+import { ReactNode } from "react";
+//#region src/file-drop-zone/file-drop-zone.d.ts
+/**
+ * FileDropZone: a dashed area a file can be dropped on, with a "Choose file"
+ * button that opens the system's file dialog.
+ *
+ * Built on React Aria's `DropZone` and `FileTrigger`. The browser's own
+ * `<input type="file">` ("Choose Files / No file chosen") is never shown: its
+ * look differs on every browser and it cannot be styled. FileTrigger keeps a
+ * real file input, visually hidden and out of the Tab order, and opens it when
+ * the button is pressed, so the keyboard path is Tab to the button, then Enter
+ * or Space.
+ *
+ * The zone states what it takes before a file is chosen: `hint` is where the
+ * accepted types and the size limit go.
+ *
+ * Every string in the cva blocks below is a STATIC literal. Tailwind scans
+ * source text, so a class assembled at runtime is invisible to it and would
+ * simply never be emitted.
+ */
+export declare const fileDropZoneVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const fileDropZonePromptVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const fileDropZoneHintVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * A place to drop or choose files.
+ *
+ * @example
+ * <FileDropZone
+ *   label="Contract"
+ *   prompt="Drop a contract here"
+ *   hint="PDF only, up to 20 MB."
+ *   acceptedFileTypes={["application/pdf"]}
+ *   onFiles={(files) => upload(files[0])}
+ * />
+ */
+export interface FileDropZoneProps {
+  /** What the file is. The drop zone's accessible name. */
+  label: string;
+  /** The zone's main line: what to drop here, or the chosen file's name. */
+  prompt: ReactNode;
+  /**
+   * What the prompt says while a file is over the zone. When it is given the
+   * prompt swaps to it (the new text rises in, the old lifts away) and back again.
+   */
+  dropPrompt?: ReactNode;
+  /** The types and size accepted, and anything else to know before choosing. */
+  hint?: ReactNode;
+  /**
+   * MIME types or extensions the file dialog offers, as for a native
+   * `accept`. A drop is not filtered: what was dropped is handed over and the
+   * consumer decides what it can read.
+   */
+  acceptedFileTypes?: string[];
+  /** Take several files at once. Otherwise only the first is handed over. */
+  allowsMultiple?: boolean;
+  /** Called with the chosen or dropped files. */
+  onFiles: (files: File[]) => void;
+  /**
+   * The button's text.
+   *
+   * @default "Choose file", or "Choose files" with `allowsMultiple`
+   */
+  buttonLabel?: string;
+  /** Take no file: the button is disabled and a drop is refused. */
+  isDisabled?: boolean;
+  /** Extra classes for the zone. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+export declare const FileDropZone: import("react").ForwardRefExoticComponent<FileDropZoneProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=file-drop-zone.d.ts.map

package/dist/file-drop-zone/file-drop-zone.js

@@ -0,0 +1,116 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { Button as Button$1 } from "../button/button.js";
+import { SwapText } from "../lib/swap-text.js";
+import { cva } from "class-variance-authority";
+import { forwardRef, useMemo, useRef } from "react";
+import { DropZone, FileTrigger } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/file-drop-zone/file-drop-zone.tsx
+/**
+* FileDropZone: a dashed area a file can be dropped on, with a "Choose file"
+* button that opens the system's file dialog.
+*
+* Built on React Aria's `DropZone` and `FileTrigger`. The browser's own
+* `<input type="file">` ("Choose Files / No file chosen") is never shown: its
+* look differs on every browser and it cannot be styled. FileTrigger keeps a
+* real file input, visually hidden and out of the Tab order, and opens it when
+* the button is pressed, so the keyboard path is Tab to the button, then Enter
+* or Space.
+*
+* The zone states what it takes before a file is chosen: `hint` is where the
+* accepted types and the size limit go.
+*
+* Every string in the cva blocks below is a STATIC literal. Tailwind scans
+* source text, so a class assembled at runtime is invisible to it and would
+* simply never be emitted.
+*/
+const fileDropZoneVariants = cva([
+	"flex flex-col items-center gap-2 px-4 py-8 text-center",
+	"rounded-panel border-(length:--border-width) border-dashed border-border",
+	"box-border font-sans text-foreground",
+	"outline-none",
+	"drop-zone-motion",
+	"data-[hovered]:bg-muted",
+	"data-[drop-target]:border-primary data-[drop-target]:bg-muted",
+	"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)",
+	"data-[disabled]:cursor-not-allowed"
+]);
+const fileDropZonePromptVariants = cva("m-0 text-sm leading-(--leading-normal)");
+const fileDropZoneHintVariants = cva("m-0 text-xs leading-(--leading-normal) text-muted-foreground");
+async function filesOf(event) {
+	const items = event.items.filter((item) => item.kind === "file");
+	return Promise.all(items.map((item) => item.getFile()));
+}
+const FileDropZone = forwardRef(function FileDropZone({ label, prompt, dropPrompt, hint, acceptedFileTypes, allowsMultiple = false, onFiles, buttonLabel, isDisabled = false, className }, ref) {
+	const hand = (files) => {
+		if (isDisabled || files.length === 0) return;
+		onFiles(allowsMultiple ? files : files.slice(0, 1));
+	};
+	const zone = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, zone), [ref]);
+	const lean = (x, y) => {
+		const el = zone.current;
+		if (!el) return;
+		el.style.setProperty("--drop-x", `${x / Math.max(1, el.offsetWidth) * 100}%`);
+		el.style.setProperty("--drop-y", `${y / Math.max(1, el.offsetHeight) * 100}%`);
+	};
+	return /* @__PURE__ */ jsx(DropZone, {
+		ref: refs,
+		"aria-label": label,
+		"data-slot": "file-drop-zone",
+		isDisabled,
+		className: cn(fileDropZoneVariants(), className),
+		onDropEnter: (event) => lean(event.x, event.y),
+		onDropMove: (event) => lean(event.x, event.y),
+		onDrop: (event) => {
+			filesOf(event).then(hand);
+		},
+		children: ({ isDropTarget }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "file-drop-zone-wash",
+				className: "drop-wash"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "file-drop-zone-glow",
+				className: "drop-glow"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				"data-slot": "file-drop-zone-prompt",
+				className: cn(fileDropZonePromptVariants(), "relative"),
+				children: dropPrompt == null ? prompt : /* @__PURE__ */ jsx(SwapText, {
+					swapKey: isDropTarget ? "drop" : "prompt",
+					className: "block",
+					children: isDropTarget ? dropPrompt : prompt
+				})
+			}),
+			/* @__PURE__ */ jsx(FileTrigger, {
+				acceptedFileTypes,
+				allowsMultiple,
+				onSelect: (list) => hand(Array.from(list ?? [])),
+				children: /* @__PURE__ */ jsx(Button$1, {
+					variant: "outlineNeutral",
+					size: "sm",
+					isDisabled,
+					className: "relative",
+					children: buttonLabel ?? (allowsMultiple ? "Choose files" : "Choose file")
+				})
+			}),
+			hint == null ? null : /* @__PURE__ */ jsx("p", {
+				"data-slot": "file-drop-zone-hint",
+				className: cn(fileDropZoneHintVariants(), "relative"),
+				children: hint
+			})
+		] })
+	});
+});
+//#endregion
+export { FileDropZone, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants };
+
+//# sourceMappingURL=file-drop-zone.js.map

package/dist/file-drop-zone/file-drop-zone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-drop-zone.js","names":["AriaDropZone","AriaFileTrigger","Button"],"sources":["../../src/file-drop-zone/file-drop-zone.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport {\n  DropZone as AriaDropZone,\n  FileTrigger as AriaFileTrigger,\n  type DropZoneProps as AriaDropZoneProps,\n  type FileDropItem,\n} from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * FileDropZone: a dashed area a file can be dropped on, with a \"Choose file\"\n * button that opens the system's file dialog.\n *\n * Built on React Aria's `DropZone` and `FileTrigger`. The browser's own\n * `<input type=\"file\">` (\"Choose Files / No file chosen\") is never shown: its\n * look differs on every browser and it cannot be styled. FileTrigger keeps a\n * real file input, visually hidden and out of the Tab order, and opens it when\n * the button is pressed, so the keyboard path is Tab to the button, then Enter\n * or Space.\n *\n * The zone states what it takes before a file is chosen: `hint` is where the\n * accepted types and the size limit go.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\nexport const fileDropZoneVariants = cva([\n  \"flex flex-col items-center gap-2 px-4 py-8 text-center\",\n  \"rounded-panel border-(length:--border-width) border-dashed border-border\",\n  // The reset in @seekalfred/styles is opt-in, so a consumer may load none.\n  \"box-border font-sans text-foreground\",\n  \"outline-none\",\n  // Fill and edge ease, a file over it breathes and light follows the pointer (see drop-zone-motion).\n  \"drop-zone-motion\",\n  \"data-[hovered]:bg-muted\",\n  \"data-[drop-target]:border-primary data-[drop-target]:bg-muted\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n  // Disabled dims only the button (its own disabled look). Dimming the whole\n  // zone took the prompt and hint below the 4.5:1 contrast floor.\n  \"data-[disabled]:cursor-not-allowed\",\n]);\n\nexport const fileDropZonePromptVariants = cva(\"m-0 text-sm leading-(--leading-normal)\");\n\nexport const fileDropZoneHintVariants = cva(\n  \"m-0 text-xs leading-(--leading-normal) text-muted-foreground\",\n);\n\n/**\n * A place to drop or choose files.\n *\n * @example\n * <FileDropZone\n *   label=\"Contract\"\n *   prompt=\"Drop a contract here\"\n *   hint=\"PDF only, up to 20 MB.\"\n *   acceptedFileTypes={[\"application/pdf\"]}\n *   onFiles={(files) => upload(files[0])}\n * />\n */\nexport interface FileDropZoneProps {\n  /** What the file is. The drop zone's accessible name. */\n  label: string;\n  /** The zone's main line: what to drop here, or the chosen file's name. */\n  prompt: ReactNode;\n  /**\n   * What the prompt says while a file is over the zone. When it is given the\n   * prompt swaps to it (the new text rises in, the old lifts away) and back again.\n   */\n  dropPrompt?: ReactNode;\n  /** The types and size accepted, and anything else to know before choosing. */\n  hint?: ReactNode;\n  /**\n   * MIME types or extensions the file dialog offers, as for a native\n   * `accept`. A drop is not filtered: what was dropped is handed over and the\n   * consumer decides what it can read.\n   */\n  acceptedFileTypes?: string[];\n  /** Take several files at once. Otherwise only the first is handed over. */\n  allowsMultiple?: boolean;\n  /** Called with the chosen or dropped files. */\n  onFiles: (files: File[]) => void;\n  /**\n   * The button's text.\n   *\n   * @default \"Choose file\", or \"Choose files\" with `allowsMultiple`\n   */\n  buttonLabel?: string;\n  /** Take no file: the button is disabled and a drop is refused. */\n  isDisabled?: boolean;\n  /** Extra classes for the zone. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\ntype DropEvent = Parameters<NonNullable<AriaDropZoneProps[\"onDrop\"]>>[0];\n\nasync function filesOf(event: DropEvent): Promise<File[]> {\n  const items = event.items.filter((item): item is FileDropItem => item.kind === \"file\");\n  return Promise.all(items.map((item) => item.getFile()));\n}\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(function FileDropZone(\n  {\n    label,\n    prompt,\n    dropPrompt,\n    hint,\n    acceptedFileTypes,\n    allowsMultiple = false,\n    onFiles,\n    buttonLabel,\n    isDisabled = false,\n    className,\n  },\n  ref,\n) {\n  const hand = (files: File[]) => {\n    if (isDisabled || files.length === 0) return;\n    onFiles(allowsMultiple ? files : files.slice(0, 1));\n  };\n  const zone = useRef<HTMLDivElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, zone), [ref]);\n  // Where the file is over the zone, as percentages, for the light that follows it.\n  const lean = (x: number, y: number) => {\n    const el = zone.current;\n    if (!el) return;\n    el.style.setProperty(\"--drop-x\", `${(x / Math.max(1, el.offsetWidth)) * 100}%`);\n    el.style.setProperty(\"--drop-y\", `${(y / Math.max(1, el.offsetHeight)) * 100}%`);\n  };\n  return (\n    <AriaDropZone\n      ref={refs}\n      aria-label={label}\n      data-slot=\"file-drop-zone\"\n      isDisabled={isDisabled}\n      className={cn(fileDropZoneVariants(), className)}\n      onDropEnter={(event) => lean(event.x, event.y)}\n      onDropMove={(event) => lean(event.x, event.y)}\n      onDrop={(event) => {\n        void filesOf(event).then(hand);\n      }}\n    >\n      {({ isDropTarget }) => (\n        <>\n          {/* The wash and the edge light sit under the content and follow the file. */}\n          <span aria-hidden=\"true\" data-slot=\"file-drop-zone-wash\" className=\"drop-wash\" />\n          <span aria-hidden=\"true\" data-slot=\"file-drop-zone-glow\" className=\"drop-glow\" />\n          <p data-slot=\"file-drop-zone-prompt\" className={cn(fileDropZonePromptVariants(), \"relative\")}>\n            {dropPrompt == null ? (\n              prompt\n            ) : (\n              <SwapText swapKey={isDropTarget ? \"drop\" : \"prompt\"} className=\"block\">\n                {isDropTarget ? dropPrompt : prompt}\n              </SwapText>\n            )}\n          </p>\n          <AriaFileTrigger\n            acceptedFileTypes={acceptedFileTypes}\n            allowsMultiple={allowsMultiple}\n            onSelect={(list) => hand(Array.from(list ?? []))}\n          >\n            <Button variant=\"outlineNeutral\" size=\"sm\" isDisabled={isDisabled} className=\"relative\">\n              {buttonLabel ?? (allowsMultiple ? \"Choose files\" : \"Choose file\")}\n            </Button>\n          </AriaFileTrigger>\n          {hint == null ? null : (\n            <p\n              data-slot=\"file-drop-zone-hint\"\n              className={cn(fileDropZoneHintVariants(), \"relative\")}\n            >\n              {hint}\n            </p>\n          )}\n        </>\n      )}\n    </AriaDropZone>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,uBAAuB,IAAI;CACtC;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;AACF,CAAC;AAED,MAAa,6BAA6B,IAAI,wCAAwC;AAEtF,MAAa,2BAA2B,IACtC,8DACF;AAkDA,eAAe,QAAQ,OAAmC;CACxD,MAAM,QAAQ,MAAM,MAAM,QAAQ,SAA+B,KAAK,SAAS,MAAM;CACrF,OAAO,QAAQ,IAAI,MAAM,KAAK,SAAS,KAAK,QAAQ,CAAC,CAAC;AACxD;AAEA,MAAa,eAAe,WAA8C,SAAS,aACjF,EACE,OACA,QACA,YACA,MACA,mBACA,iBAAiB,OACjB,SACA,aACA,aAAa,OACb,aAEF,KACA;CACA,MAAM,QAAQ,UAAkB;EAC9B,IAAI,cAAc,MAAM,WAAW,GAAG;EACtC,QAAQ,iBAAiB,QAAQ,MAAM,MAAM,GAAG,CAAC,CAAC;CACpD;CACA,MAAM,OAAO,OAA8B,IAAI;CAC/C,MAAM,OAAO,cAAc,UAAU,KAAK,IAAI,GAAG,CAAC,GAAG,CAAC;CAEtD,MAAM,QAAQ,GAAW,MAAc;EACrC,MAAM,KAAK,KAAK;EAChB,IAAI,CAAC,IAAI;EACT,GAAG,MAAM,YAAY,YAAY,GAAI,IAAI,KAAK,IAAI,GAAG,GAAG,WAAW,IAAK,IAAI,EAAE;EAC9E,GAAG,MAAM,YAAY,YAAY,GAAI,IAAI,KAAK,IAAI,GAAG,GAAG,YAAY,IAAK,IAAI,EAAE;CACjF;CACA,OACE,oBAACA,UAAD;EACE,KAAK;EACL,cAAY;EACZ,aAAU;EACE;EACZ,WAAW,GAAG,qBAAqB,GAAG,SAAS;EAC/C,cAAc,UAAU,KAAK,MAAM,GAAG,MAAM,CAAC;EAC7C,aAAa,UAAU,KAAK,MAAM,GAAG,MAAM,CAAC;EAC5C,SAAS,UAAU;GACjB,QAAa,KAAK,CAAC,CAAC,KAAK,IAAI;EAC/B;EAEE,WAAA,EAAE,mBACF,qBAAA,YAAA,EAAA,UAAA;GAEE,oBAAC,QAAD;IAAM,eAAY;IAAO,aAAU;IAAsB,WAAU;GAAa,CAAA;GAChF,oBAAC,QAAD;IAAM,eAAY;IAAO,aAAU;IAAsB,WAAU;GAAa,CAAA;GAChF,oBAAC,KAAD;IAAG,aAAU;IAAwB,WAAW,GAAG,2BAA2B,GAAG,UAAU;IACxF,UAAA,cAAc,OACb,SAEA,oBAAC,UAAD;KAAU,SAAS,eAAe,SAAS;KAAU,WAAU;KAC5D,UAAA,eAAe,aAAa;IACrB,CAAA;GAEX,CAAA;GACH,oBAACC,aAAD;IACqB;IACH;IAChB,WAAW,SAAS,KAAK,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC;IAE/C,UAAA,oBAACC,UAAD;KAAQ,SAAQ;KAAiB,MAAK;KAAiB;KAAY,WAAU;KAC1E,UAAA,gBAAgB,iBAAiB,iBAAiB;IAC7C,CAAA;GACO,CAAA;GAChB,QAAQ,OAAO,OACd,oBAAC,KAAD;IACE,aAAU;IACV,WAAW,GAAG,yBAAyB,GAAG,UAAU;IAEnD,UAAA;GACA,CAAA;EAEL,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC"}

package/dist/file-drop-zone/index.d.ts

@@ -0,0 +1,2 @@
+import { FileDropZone, FileDropZoneProps, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants } from "./file-drop-zone.js";
+export { FileDropZone, type FileDropZoneProps, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants };

package/dist/file-drop-zone/index.js

@@ -0,0 +1,2 @@
+import { FileDropZone, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants } from "./file-drop-zone.js";
+export { FileDropZone, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants };