@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/tag-input/tag-input.js

@@ -0,0 +1,269 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { useHeightFollow } from "../lib/height-follow.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { useLeavingList } from "../lib/leaving-list.js";
+import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { Button, Group, Input, Tag, TagGroup, TagList } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/tag-input/tag-input.tsx
+/** A no-break space, appended to a repeated announcement so a screen reader says it again. */
+const NBSP = String.fromCharCode(160);
+/** The longest a leaving tag's collapse takes, plus a margin, for the backstop that removes a tag whose animation never ends. */
+const COLLAPSE_BACKSTOP = 900;
+const shellClass = cnAll(fieldSurfaceVariants(), "flex min-h-(--density-control-h-md) cursor-text flex-wrap items-center gap-1.5 p-1.75", "has-[input:focus]:not-data-[invalid]:border-foreground", "forced-colors:has-[input:focus]:outline-solid forced-colors:has-[input:focus]:outline-(length:--focus-ring-width) forced-colors:has-[input:focus]:outline-offset-(--focus-ring-offset)");
+const tagClass = "relative inline-flex min-h-7 flex-none items-center gap-0.5 rounded-pill border-(length:--border-width) border-border bg-muted py-0 ps-3 pe-0.5 font-sans text-sm leading-(--leading-normal) text-foreground outline-none [interpolate-size:allow-keywords] 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-[pulse]:motion-safe:animate-tag-pulse";
+const removeClass = "grid size-6 flex-none cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 text-text-secondary outline-none motion-safe:transition-[background-color,color,scale] motion-safe:duration-(--duration-quick) motion-safe:ease-settle data-[hovered]:bg-surface data-[hovered]:text-foreground data-[pressed]:scale-95 motion-safe:data-[pressed]:duration-(--duration-instant) data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-3.5";
+const TagInput = forwardRef(function TagInput({ label, value, defaultValue = [], onValueChange, placeholder = "Add a tag", description, error, disabled = false, name, id, className }, forwardedRef) {
+	const [internal, setInternal] = useState(defaultValue);
+	const tags = value ?? internal;
+	const [draft, setDraft] = useState("");
+	const [notice, setNotice] = useState("");
+	const [initial] = useState(() => new Set(tags));
+	const [ready, setReady] = useState(false);
+	useIsomorphicLayoutEffect(() => {
+		const frame = requestAnimationFrame(() => setReady(true));
+		return () => cancelAnimationFrame(frame);
+	}, []);
+	const inputRef = useRef(null);
+	useImperativeHandle(forwardedRef, () => inputRef.current);
+	const shellRef = useRef(null);
+	const frame = useRef(null);
+	const field = useFieldWiring({
+		enabled: true,
+		id,
+		describedBy: void 0,
+		invalid: void 0,
+		description,
+		error
+	});
+	const { list, done } = useLeavingList(tags.map((tag) => ({ id: tag })));
+	useHeightFollow(frame, shellRef, tags.join("\0"));
+	function say(message) {
+		setNotice((previous) => previous === message ? `${message}${NBSP}` : message);
+	}
+	function update(next) {
+		if (value === void 0) setInternal(next);
+		onValueChange?.(next);
+	}
+	/** The tag element for a value, to swell it. */
+	function pulse(tag) {
+		const node = shellRef.current?.querySelector(`[data-tag="${CSS.escape(tag)}"]`);
+		if (!node) return;
+		node.removeAttribute("data-pulse");
+		node.offsetWidth;
+		node.setAttribute("data-pulse", "");
+	}
+	/** Adds each non-empty candidate that is not there yet. A duplicate swells the tag that is already there. */
+	function add(candidates) {
+		const next = [...tags];
+		const added = [];
+		for (const candidate of candidates) {
+			const tag = candidate.trim();
+			if (!tag) continue;
+			const existing = next.find((item) => item.toLowerCase() === tag.toLowerCase());
+			if (existing) {
+				pulse(existing);
+				say(`${existing} is already added`);
+				continue;
+			}
+			next.push(tag);
+			added.push(tag);
+		}
+		if (!added.length) return false;
+		update(next);
+		say(`Added ${added.join(", ")}`);
+		return true;
+	}
+	function remove(keys) {
+		const gone = tags.filter((tag) => keys.has(tag));
+		if (!gone.length) return;
+		for (const tag of gone) initial.delete(tag);
+		update(tags.filter((tag) => !keys.has(tag)));
+		say(`Removed ${gone.join(", ")}`);
+		inputRef.current?.focus();
+	}
+	function onChange(event) {
+		const parts = event.currentTarget.value.split(",");
+		if (parts.length > 1) {
+			add(parts.slice(0, -1));
+			setDraft(parts[parts.length - 1] ?? "");
+			return;
+		}
+		setDraft(parts[0] ?? "");
+	}
+	function onPaste(event) {
+		const text = event.clipboardData.getData("text");
+		if (!/[,\n]/.test(text)) return;
+		event.preventDefault();
+		const parts = (draft + text).split(/[,\n]/);
+		add(parts.slice(0, -1));
+		setDraft(parts[parts.length - 1] ?? "");
+	}
+	function onKeyDown(event) {
+		const input = event.currentTarget;
+		if (event.key === "Enter") {
+			event.preventDefault();
+			if (add([draft])) setDraft("");
+			return;
+		}
+		const atStart = input.selectionStart === 0 && input.selectionEnd === 0;
+		if ((event.key === "Backspace" || event.key === "ArrowLeft") && atStart && tags.length) {
+			const rows = shellRef.current?.querySelectorAll("[data-slot=\"tag-input-tag\"]:not([inert])");
+			const last = rows?.[rows.length - 1];
+			if (last) {
+				event.preventDefault();
+				last.focus();
+				say(`${last.dataset.tag ?? ""} selected. Press Backspace to remove it.`);
+			}
+		}
+	}
+	/** From the last tag, the right arrow returns to the field. */
+	function onShellKeyDown(event) {
+		if (event.key !== "ArrowRight" || event.target === inputRef.current) return;
+		const row = event.target.closest("[data-slot=\"tag-input-tag\"]");
+		if (!row) return;
+		const rows = shellRef.current?.querySelectorAll("[data-slot=\"tag-input-tag\"]:not([inert])");
+		if (rows && rows[rows.length - 1] === row) {
+			event.preventDefault();
+			event.stopPropagation();
+			inputRef.current?.focus();
+		}
+	}
+	const control = /* @__PURE__ */ jsx("div", {
+		ref: frame,
+		"data-slot": "tag-input-frame",
+		className: "height-follow min-w-0",
+		children: /* @__PURE__ */ jsxs(Group, {
+			ref: shellRef,
+			role: "presentation",
+			isDisabled: disabled,
+			isInvalid: Boolean(error),
+			"data-slot": "tag-input-shell",
+			onKeyDownCapture: onShellKeyDown,
+			onClick: (event) => {
+				if (event.target === event.currentTarget) inputRef.current?.focus();
+			},
+			className: shellClass,
+			children: [list.length > 0 ? /* @__PURE__ */ jsx(TagGroup, {
+				"aria-label": label,
+				disabledKeys: disabled ? tags : void 0,
+				onRemove: disabled ? void 0 : remove,
+				className: "contents",
+				children: /* @__PURE__ */ jsx(TagList, {
+					items: list.map(({ item, leaving }) => ({
+						id: item.id,
+						leaving
+					})),
+					className: "contents",
+					children: (item) => /* @__PURE__ */ jsx(TagChip, {
+						tag: item.id,
+						leaving: item.leaving,
+						fresh: ready && !initial.has(item.id),
+						onGone: done
+					}, item.id)
+				})
+			}) : null, /* @__PURE__ */ jsx(Input, {
+				ref: inputRef,
+				...field.controlProps,
+				"data-slot": "tag-input-input",
+				type: "text",
+				value: draft,
+				disabled,
+				autoComplete: "off",
+				spellCheck: false,
+				placeholder: tags.length ? "" : placeholder,
+				onChange,
+				onKeyDown,
+				onPaste,
+				onBlur: () => {
+					if (add([draft])) setDraft("");
+				},
+				className: "h-7 min-w-24 flex-1 basis-24 border-0 bg-transparent px-1.5 font-sans text-base text-foreground outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground data-[disabled]:cursor-not-allowed"
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("w-full min-w-0 font-sans", className),
+		"data-slot": "tag-input",
+		children: /* @__PURE__ */ jsxs(FieldShell, {
+			label,
+			controlId: field.controlId,
+			description,
+			hintId: field.hintId,
+			error,
+			errorId: field.errorId,
+			children: [
+				control,
+				name ? tags.map((tag) => /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name,
+					value: tag
+				}, tag)) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					role: "status",
+					"aria-live": "polite",
+					children: notice
+				})
+			]
+		})
+	});
+});
+/**
+* One tag. A tag that appears after the first render fades up from a blur and scales
+* in while its slot opens; one that is removed stays, shrinking and collapsing, until its
+* exit ends. A leaving tag is inert, hidden from assistive technology, and skipped by the arrows.
+*/
+function TagChip({ tag, leaving, fresh, onGone }) {
+	const [arrives] = useState(fresh);
+	const gone = useCallback(() => onGone(tag), [onGone, tag]);
+	useExitBackstop(leaving, gone, COLLAPSE_BACKSTOP);
+	useIsomorphicLayoutEffect(() => {
+		if (leaving && prefersReducedMotion()) gone();
+	}, [leaving, gone]);
+	return /* @__PURE__ */ jsx(Tag, {
+		id: tag,
+		textValue: tag,
+		isDisabled: leaving,
+		"data-slot": "tag-input-tag",
+		"data-tag": tag,
+		ref: (node) => {
+			if (!node) return;
+			if (leaving) {
+				node.setAttribute("inert", "");
+				node.setAttribute("aria-hidden", "true");
+			} else {
+				node.removeAttribute("inert");
+				node.removeAttribute("aria-hidden");
+			}
+		},
+		onAnimationEnd: (event) => {
+			if (leaving && event.target === event.currentTarget && event.animationName === "chip-slot-out") gone();
+		},
+		className: cnAll(tagClass, leaving ? "pointer-events-none motion-safe:animate-chip-out" : arrives && "motion-safe:animate-chip-in motion-reduce:animate-fade-in"),
+		children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: tag
+		}), allowsRemoving ? /* @__PURE__ */ jsx(Button, {
+			slot: "remove",
+			excludeFromTabOrder: true,
+			className: removeClass,
+			children: /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				viewBox: "0 0 16 16",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.75",
+				strokeLinecap: "round",
+				children: /* @__PURE__ */ jsx("path", { d: "m4 4 8 8M12 4l-8 8" })
+			})
+		}) : null] })
+	});
+}
+//#endregion
+export { TagInput };
+
+//# sourceMappingURL=tag-input.js.map

package/dist/tag-input/tag-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-input.js","names":["AriaGroup","AriaTagGroup","AriaTagList","AriaInput","AriaTag","AriaButton"],"sources":["../../src/tag-input/tag-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type ClipboardEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n} from \"react\";\nimport {\n  Button as AriaButton,\n  Group as AriaGroup,\n  Input as AriaInput,\n  Tag as AriaTag,\n  TagGroup as AriaTagGroup,\n  TagList as AriaTagList,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { FieldShell, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { useLeavingList } from \"../lib/leaving-list.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\n\n/**\n * TagInput: type a word and press Enter or comma to turn it into a tag. A free-text\n * field on React Aria's `TagGroup`, so the tags are a grid: the arrow keys move\n * between them, Backspace or Delete removes the focused one, and each has its own\n * remove button.\n *\n * Tags keep the field still: a new tag grows in where its text was typed (it fades\n * up from a blur and scales in while its slot opens, so the caret glides aside),\n * a removed tag shrinks away and the rest glide over, and the field follows its\n * wrapped rows on a spring. Backspace at the start of an empty field moves to the\n * last tag, and the next Backspace removes it. Adding a tag that is already there\n * swells the existing one. Nothing animates on first render.\n *\n * Pasting \"a, b, c\" adds three tags. A tag you are typing is added when the field\n * loses focus.\n */\nexport interface TagInputProps {\n  /** What the tags are, and the field's accessible name. */\n  label: string;\n  /** The tags. Controlled when given. */\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  /** Shown while there are no tags and nothing is typed. @default \"Add a tag\" */\n  placeholder?: string;\n  /** Helper text under the field. A string, because the copy is animated word by word. */\n  description?: string;\n  /** Error text under the field. Sets `aria-invalid` and is announced as an alert. */\n  error?: string;\n  disabled?: boolean;\n  /** Adds one hidden input per tag, so a native form submits them all under this name. */\n  name?: string;\n  id?: string;\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\n/** A no-break space, appended to a repeated announcement so a screen reader says it again. */\nconst NBSP = String.fromCharCode(160);\n\n/** The longest a leaving tag's collapse takes, plus a margin, for the backstop that removes a tag whose animation never ends. */\nconst COLLAPSE_BACKSTOP = 900;\n\nconst shellClass = cnAll(\n  fieldSurfaceVariants(),\n  \"flex min-h-(--density-control-h-md) cursor-text flex-wrap items-center gap-1.5 p-1.75\",\n  // Focus turns the box's own border dark whenever the input holds focus; no separate ring.\n  \"has-[input:focus]:not-data-[invalid]:border-foreground\",\n  \"forced-colors:has-[input:focus]:outline-solid forced-colors:has-[input:focus]:outline-(length:--focus-ring-width) forced-colors:has-[input:focus]:outline-offset-(--focus-ring-offset)\",\n);\n\nconst tagClass =\n  \"relative inline-flex min-h-7 flex-none items-center gap-0.5 rounded-pill border-(length:--border-width) border-border bg-muted py-0 ps-3 pe-0.5 font-sans text-sm leading-(--leading-normal) text-foreground outline-none [interpolate-size:allow-keywords] 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-[pulse]:motion-safe:animate-tag-pulse\";\n\nconst removeClass =\n  \"grid size-6 flex-none cursor-pointer place-items-center rounded-full border-0 bg-transparent p-0 text-text-secondary outline-none motion-safe:transition-[background-color,color,scale] motion-safe:duration-(--duration-quick) motion-safe:ease-settle data-[hovered]:bg-surface data-[hovered]:text-foreground data-[pressed]:scale-95 motion-safe:data-[pressed]:duration-(--duration-instant) data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-3.5\";\n\nexport const TagInput = forwardRef<HTMLInputElement, TagInputProps>(function TagInput(\n  {\n    label,\n    value,\n    defaultValue = [],\n    onValueChange,\n    placeholder = \"Add a tag\",\n    description,\n    error,\n    disabled = false,\n    name,\n    id,\n    className,\n  },\n  forwardedRef,\n) {\n  const [internal, setInternal] = useState(defaultValue);\n  const tags = value ?? internal;\n  const [draft, setDraft] = useState(\"\");\n  const [notice, setNotice] = useState(\"\");\n  // The tags there at first render never animate; one added later grows in, even a tag that was there once and left.\n  const [initial] = useState(() => new Set(tags));\n  // Chips added from the next frame on arrive animated.\n  const [ready, setReady] = useState(false);\n  useIsomorphicLayoutEffect(() => {\n    const frame = requestAnimationFrame(() => setReady(true));\n    return () => cancelAnimationFrame(frame);\n  }, []);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement);\n  const shellRef = useRef<HTMLDivElement>(null);\n  const frame = useRef<HTMLDivElement>(null);\n\n  const field = useFieldWiring({\n    enabled: true,\n    id,\n    describedBy: undefined,\n    invalid: undefined,\n    description,\n    error,\n  });\n\n  // A removed tag stays on screen, collapsing, until its exit ends.\n  const { list, done } = useLeavingList(tags.map((tag) => ({ id: tag })));\n  // The field follows its height when a tag makes a line wrap or unwrap.\n  useHeightFollow(frame, shellRef, tags.join(\"\\u0000\"));\n\n  function say(message: string) {\n    setNotice((previous) => (previous === message ? `${message}${NBSP}` : message));\n  }\n  function update(next: string[]) {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  }\n\n  /** The tag element for a value, to swell it. */\n  function pulse(tag: string) {\n    const node = shellRef.current?.querySelector<HTMLElement>(`[data-tag=\"${CSS.escape(tag)}\"]`);\n    if (!node) return;\n    // Restart the animation: the attribute has to leave and come back across a style recalculation.\n    node.removeAttribute(\"data-pulse\");\n    void node.offsetWidth;\n    node.setAttribute(\"data-pulse\", \"\");\n  }\n\n  /** Adds each non-empty candidate that is not there yet. A duplicate swells the tag that is already there. */\n  function add(candidates: string[]) {\n    const next = [...tags];\n    const added: string[] = [];\n    for (const candidate of candidates) {\n      const tag = candidate.trim();\n      if (!tag) continue;\n      const existing = next.find((item) => item.toLowerCase() === tag.toLowerCase());\n      if (existing) {\n        pulse(existing);\n        say(`${existing} is already added`);\n        continue;\n      }\n      next.push(tag);\n      added.push(tag);\n    }\n    if (!added.length) return false;\n    update(next);\n    say(`Added ${added.join(\", \")}`);\n    return true;\n  }\n\n  function remove(keys: Set<unknown>) {\n    const gone = tags.filter((tag) => keys.has(tag));\n    if (!gone.length) return;\n    for (const tag of gone) initial.delete(tag);\n    update(tags.filter((tag) => !keys.has(tag)));\n    say(`Removed ${gone.join(\", \")}`);\n    inputRef.current?.focus();\n  }\n\n  function onChange(event: ChangeEvent<HTMLInputElement>) {\n    const parts = event.currentTarget.value.split(\",\");\n    // A comma, typed or pasted, ends a tag.\n    if (parts.length > 1) {\n      add(parts.slice(0, -1));\n      setDraft(parts[parts.length - 1] ?? \"\");\n      return;\n    }\n    setDraft(parts[0] ?? \"\");\n  }\n\n  function onPaste(event: ClipboardEvent<HTMLInputElement>) {\n    const text = event.clipboardData.getData(\"text\");\n    if (!/[,\\n]/.test(text)) return;\n    event.preventDefault();\n    const parts = (draft + text).split(/[,\\n]/);\n    add(parts.slice(0, -1));\n    setDraft(parts[parts.length - 1] ?? \"\");\n  }\n\n  function onKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    const input = event.currentTarget;\n    if (event.key === \"Enter\") {\n      // Enter submits nothing from here: it only adds.\n      event.preventDefault();\n      if (add([draft])) setDraft(\"\");\n      return;\n    }\n    const atStart = input.selectionStart === 0 && input.selectionEnd === 0;\n    if ((event.key === \"Backspace\" || event.key === \"ArrowLeft\") && atStart && tags.length) {\n      // The last tag takes focus; Backspace on it removes it.\n      const rows = shellRef.current?.querySelectorAll<HTMLElement>('[data-slot=\"tag-input-tag\"]:not([inert])');\n      const last = rows?.[rows.length - 1];\n      if (last) {\n        event.preventDefault();\n        last.focus();\n        say(`${last.dataset.tag ?? \"\"} selected. Press Backspace to remove it.`);\n      }\n    }\n  }\n\n  /** From the last tag, the right arrow returns to the field. */\n  function onShellKeyDown(event: KeyboardEvent<HTMLElement>) {\n    if (event.key !== \"ArrowRight\" || event.target === inputRef.current) return;\n    const row = (event.target as HTMLElement).closest<HTMLElement>('[data-slot=\"tag-input-tag\"]');\n    if (!row) return;\n    const rows = shellRef.current?.querySelectorAll('[data-slot=\"tag-input-tag\"]:not([inert])');\n    if (rows && rows[rows.length - 1] === row) {\n      // Capture phase: React Aria would otherwise wrap to the first tag.\n      event.preventDefault();\n      event.stopPropagation();\n      inputRef.current?.focus();\n    }\n  }\n\n  const control = (\n    <div ref={frame} data-slot=\"tag-input-frame\" className=\"height-follow min-w-0\">\n      <AriaGroup\n        ref={shellRef}\n        role=\"presentation\"\n        isDisabled={disabled}\n        isInvalid={Boolean(error)}\n        data-slot=\"tag-input-shell\"\n        onKeyDownCapture={onShellKeyDown}\n        onClick={(event: MouseEvent) => {\n          if (event.target === event.currentTarget) inputRef.current?.focus();\n        }}\n        className={shellClass}\n      >\n        {/* The grid's own boxes dissolve, so the tags and the field share one wrapping row. An empty grid is\n            a focusable element with nothing in it, so there is none until there is a tag. */}\n        {list.length > 0 ? (\n          <AriaTagGroup\n            aria-label={label}\n            disabledKeys={disabled ? tags : undefined}\n            onRemove={disabled ? undefined : remove}\n            className=\"contents\"\n          >\n            <AriaTagList\n              items={list.map(({ item, leaving }) => ({ id: item.id, leaving }))}\n              className=\"contents\"\n            >\n              {(item) => (\n                <TagChip\n                  key={item.id}\n                  tag={item.id}\n                  leaving={item.leaving}\n                  fresh={ready && !initial.has(item.id)}\n                  onGone={done}\n                />\n              )}\n            </AriaTagList>\n          </AriaTagGroup>\n        ) : null}\n        <AriaInput\n          ref={inputRef}\n          {...field.controlProps}\n          data-slot=\"tag-input-input\"\n          type=\"text\"\n          value={draft}\n          disabled={disabled}\n          autoComplete=\"off\"\n          spellCheck={false}\n          placeholder={tags.length ? \"\" : placeholder}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          onPaste={onPaste}\n          onBlur={() => {\n            if (add([draft])) setDraft(\"\");\n          }}\n          className=\"h-7 min-w-24 flex-1 basis-24 border-0 bg-transparent px-1.5 font-sans text-base text-foreground outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground data-[disabled]:cursor-not-allowed\"\n        />\n      </AriaGroup>\n    </div>\n  );\n\n  return (\n    <div className={cn(\"w-full min-w-0 font-sans\", className)} data-slot=\"tag-input\">\n      <FieldShell\n        label={label}\n        controlId={field.controlId}\n        description={description}\n        hintId={field.hintId}\n        error={error}\n        errorId={field.errorId}\n      >\n        {control}\n        {name\n          ? tags.map((tag) => <input key={tag} type=\"hidden\" name={name} value={tag} />)\n          : null}\n        <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {notice}\n        </span>\n      </FieldShell>\n    </div>\n  );\n});\n\n/**\n * One tag. A tag that appears after the first render fades up from a blur and scales\n * in while its slot opens; one that is removed stays, shrinking and collapsing, until its\n * exit ends. A leaving tag is inert, hidden from assistive technology, and skipped by the arrows.\n */\nfunction TagChip({\n  tag,\n  leaving,\n  fresh,\n  onGone,\n}: {\n  tag: string;\n  leaving: boolean;\n  fresh: boolean;\n  onGone: (tag: string) => void;\n}) {\n  // Decided once, at this tag's own mount.\n  const [arrives] = useState(fresh);\n  const gone = useCallback(() => onGone(tag), [onGone, tag]);\n  useExitBackstop(leaving, gone, COLLAPSE_BACKSTOP);\n  // Reduced motion removes it at once: an animation that is switched off never ends.\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) gone();\n  }, [leaving, gone]);\n  return (\n    <AriaTag\n      id={tag}\n      textValue={tag}\n      isDisabled={leaving}\n      data-slot=\"tag-input-tag\"\n      data-tag={tag}\n      ref={(node) => {\n        if (!node) return;\n        // React Aria drops aria-hidden from the props it forwards, so the leaving state is written here.\n        if (leaving) {\n          node.setAttribute(\"inert\", \"\");\n          node.setAttribute(\"aria-hidden\", \"true\");\n        } else {\n          node.removeAttribute(\"inert\");\n          node.removeAttribute(\"aria-hidden\");\n        }\n      }}\n      onAnimationEnd={(event) => {\n        if (leaving && event.target === event.currentTarget && event.animationName === \"chip-slot-out\")\n          gone();\n      }}\n      className={cnAll(\n        tagClass,\n        leaving\n          ? \"pointer-events-none motion-safe:animate-chip-out\"\n          : arrives && \"motion-safe:animate-chip-in motion-reduce:animate-fade-in\",\n      )}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          <span className=\"truncate\">{tag}</span>\n          {allowsRemoving ? (\n            <AriaButton slot=\"remove\" excludeFromTabOrder className={removeClass}>\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.75\"\n                strokeLinecap=\"round\"\n              >\n                <path d=\"m4 4 8 8M12 4l-8 8\" />\n              </svg>\n            </AriaButton>\n          ) : null}\n        </>\n      )}\n    </AriaTag>\n  );\n}\n"],"mappings":"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"}

package/dist/text-morph/index.d.ts

@@ -0,0 +1,2 @@
+import { TextMorph, TextMorphProps } from "./text-morph.js";
+export { TextMorph, type TextMorphProps };

package/dist/text-morph/index.js

@@ -0,0 +1,2 @@
+import { TextMorph } from "./text-morph.js";
+export { TextMorph };

package/dist/text-morph/text-morph.d.ts

@@ -0,0 +1,23 @@
+//#region src/text-morph/text-morph.d.ts
+/**
+ * TextMorph: one short label morphing into the next, in place. Letters both
+ * labels share glide to their new positions, new letters rise in from a soft
+ * blur, removed letters lift away, and the width follows on a spring so the
+ * layout around it glides instead of jumping. Use it for status words that
+ * change a few letters at a time (Publish, Publishing, Published; Follow,
+ * Following). It stays on one line. The letters are a picture: assistive
+ * technology reads the plain text. Nothing animates on first render, and reduced
+ * motion fades instead of moving.
+ */
+export interface TextMorphProps {
+  /** The label. Changing it morphs from the old one. */
+  children: string;
+  /** The element to render. @default "span" */
+  as?: "span" | "div" | "p" | "strong" | "h1" | "h2" | "h3";
+  id?: string;
+  /** Extra classes. Merged last. */
+  className?: string;
+}
+export declare const TextMorph: import("react").ForwardRefExoticComponent<TextMorphProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=text-morph.d.ts.map

package/dist/text-morph/text-morph.js

@@ -0,0 +1,21 @@
+"use client";
+import { MorphText } from "../lib/morph-text.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/text-morph/text-morph.tsx
+const TextMorph = forwardRef(function TextMorph({ children, as = "span", id, className }, ref) {
+	return /* @__PURE__ */ jsxs(as, {
+		ref,
+		id,
+		"data-slot": "text-morph",
+		className,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children
+		}), /* @__PURE__ */ jsx(MorphText, { text: children })]
+	});
+});
+//#endregion
+export { TextMorph };
+
+//# sourceMappingURL=text-morph.js.map

package/dist/text-morph/text-morph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-morph.js","names":["Tag"],"sources":["../../src/text-morph/text-morph.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ElementType } from \"react\";\n\nimport { MorphText } from \"../lib/morph-text.js\";\n\n/**\n * TextMorph: one short label morphing into the next, in place. Letters both\n * labels share glide to their new positions, new letters rise in from a soft\n * blur, removed letters lift away, and the width follows on a spring so the\n * layout around it glides instead of jumping. Use it for status words that\n * change a few letters at a time (Publish, Publishing, Published; Follow,\n * Following). It stays on one line. The letters are a picture: assistive\n * technology reads the plain text. Nothing animates on first render, and reduced\n * motion fades instead of moving.\n */\nexport interface TextMorphProps {\n  /** The label. Changing it morphs from the old one. */\n  children: string;\n  /** The element to render. @default \"span\" */\n  as?: \"span\" | \"div\" | \"p\" | \"strong\" | \"h1\" | \"h2\" | \"h3\";\n  id?: string;\n  /** Extra classes. Merged last. */\n  className?: string;\n}\n\nexport const TextMorph = forwardRef<HTMLElement, TextMorphProps>(function TextMorph(\n  { children, as = \"span\", id, className },\n  ref,\n) {\n  const Tag = as as ElementType;\n  return (\n    <Tag ref={ref} id={id} data-slot=\"text-morph\" className={className}>\n      <span className=\"sr-only\">{children}</span>\n      <MorphText text={children} />\n    </Tag>\n  );\n});\n"],"mappings":";;;;;AA0BA,MAAa,YAAY,WAAwC,SAAS,UACxE,EAAE,UAAU,KAAK,QAAQ,IAAI,aAC7B,KACA;CAEA,OACE,qBAACA,IAAD;EAAU;EAAS;EAAI,aAAU;EAAwB;EAAzD,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GAAW;EAAe,CAAA,GAC1C,oBAAC,WAAD,EAAW,MAAM,SAAW,CAAA,CACzB;;AAET,CAAC"}

package/dist/text-reveal/index.d.ts

@@ -0,0 +1,2 @@
+import { TextReveal, TextRevealProps } from "./text-reveal.js";
+export { TextReveal, type TextRevealProps };

package/dist/text-reveal/index.js

@@ -0,0 +1,2 @@
+import { TextReveal } from "./text-reveal.js";
+export { TextReveal };

package/dist/text-reveal/text-reveal.d.ts

@@ -0,0 +1,27 @@
+//#region src/text-reveal/text-reveal.d.ts
+/**
+ * TextReveal: a short headline or sentence that reveals itself once, as it
+ * mounts. Each word rises out of its own clip while it sharpens from a soft
+ * blur, one word a beat after the last (the whole stagger stays under 480ms
+ * however long the text is).
+ *
+ * The entrance is CSS, so it starts on first paint and never leaves text
+ * hidden while scripts are slow. Use `\n` in `text` for a deliberate line break,
+ * and change the element's `key` to play it again. A heading takes its
+ * accessible name from the sentence itself, so it is read once; a paragraph
+ * cannot be named, so it keeps a visually hidden copy. Reduced motion fades.
+ */
+export interface TextRevealProps {
+  /** The sentence. `\n` breaks the line. */
+  text: string;
+  /** The element to render. @default "h2" */
+  as?: "h1" | "h2" | "h3" | "p";
+  /** Milliseconds to wait before the first word rises. @default 0 */
+  delay?: number;
+  id?: string;
+  /** Extra classes. Merged last. */
+  className?: string;
+}
+export declare const TextReveal: import("react").ForwardRefExoticComponent<TextRevealProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=text-reveal.d.ts.map

package/dist/text-reveal/text-reveal.js

@@ -0,0 +1,51 @@
+import { cnAll } from "../lib/cn.js";
+import { Fragment, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/text-reveal/text-reveal.tsx
+/** The longest the stagger may run, in ms (the considered duration), however long the text is. */
+const MAX_STAGGER_MS = 480;
+const WORD_STEP_MS = 40;
+const TYPE = {
+	h1: "font-display text-h1 leading-(--leading-snug) font-semibold",
+	h2: "font-display text-h2 leading-(--leading-snug) font-semibold",
+	h3: "font-display text-h3 leading-(--leading-snug) font-semibold",
+	p: "text-lg leading-(--leading-normal)"
+};
+const TextReveal = forwardRef(function TextReveal({ text, as = "h2", delay = 0, id, className }, ref) {
+	const Tag = as;
+	const lines = text.split("\n").map((line) => line.split(" ").filter(Boolean));
+	const count = lines.reduce((total, words) => total + words.length, 0);
+	const step = Math.min(WORD_STEP_MS, MAX_STAGGER_MS / Math.max(count, 1));
+	const spoken = text.replace(/\n/g, " ");
+	const named = as !== "p";
+	let index = 0;
+	return /* @__PURE__ */ jsxs(Tag, {
+		ref,
+		id,
+		"data-slot": "text-reveal",
+		"aria-label": named ? spoken : void 0,
+		className: cnAll("text-reveal", TYPE[as], className),
+		children: [named ? null : /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: spoken
+		}), lines.map((words, lineIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-reveal-line",
+			"aria-hidden": "true",
+			children: words.map((word, wordIndex) => {
+				const position = index++;
+				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-reveal-clip",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "text-reveal-word",
+						style: { "--reveal-delay": `${delay + (position + lineIndex) * step}ms` },
+						children: word
+					})
+				}), wordIndex < words.length - 1 ? " " : null] }, `${word}-${position}`);
+			})
+		}), lineIndex < lines.length - 1 ? " " : null] }, lineIndex))]
+	});
+});
+//#endregion
+export { TextReveal };
+
+//# sourceMappingURL=text-reveal.js.map

package/dist/text-reveal/text-reveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-reveal.js","names":[],"sources":["../../src/text-reveal/text-reveal.tsx"],"sourcesContent":["import { Fragment, forwardRef, type CSSProperties, type ElementType } from \"react\";\n\nimport { cnAll } from \"../lib/cn.js\";\n\n/**\n * TextReveal: a short headline or sentence that reveals itself once, as it\n * mounts. Each word rises out of its own clip while it sharpens from a soft\n * blur, one word a beat after the last (the whole stagger stays under 480ms\n * however long the text is).\n *\n * The entrance is CSS, so it starts on first paint and never leaves text\n * hidden while scripts are slow. Use `\\n` in `text` for a deliberate line break,\n * and change the element's `key` to play it again. A heading takes its\n * accessible name from the sentence itself, so it is read once; a paragraph\n * cannot be named, so it keeps a visually hidden copy. Reduced motion fades.\n */\nexport interface TextRevealProps {\n  /** The sentence. `\\n` breaks the line. */\n  text: string;\n  /** The element to render. @default \"h2\" */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"p\";\n  /** Milliseconds to wait before the first word rises. @default 0 */\n  delay?: number;\n  id?: string;\n  /** Extra classes. Merged last. */\n  className?: string;\n}\n\n/** The longest the stagger may run, in ms (the considered duration), however long the text is. */\nconst MAX_STAGGER_MS = 480;\nconst WORD_STEP_MS = 40;\n\n// Static strings: Tailwind scans source text, so a class built at runtime would never be emitted.\nconst TYPE: Record<NonNullable<TextRevealProps[\"as\"]>, string> = {\n  h1: \"font-display text-h1 leading-(--leading-snug) font-semibold\",\n  h2: \"font-display text-h2 leading-(--leading-snug) font-semibold\",\n  h3: \"font-display text-h3 leading-(--leading-snug) font-semibold\",\n  p: \"text-lg leading-(--leading-normal)\",\n};\n\nexport const TextReveal = forwardRef<HTMLElement, TextRevealProps>(function TextReveal(\n  { text, as = \"h2\", delay = 0, id, className },\n  ref,\n) {\n  const Tag = as as ElementType;\n  const lines = text.split(\"\\n\").map((line) => line.split(\" \").filter(Boolean));\n  const count = lines.reduce((total, words) => total + words.length, 0);\n  const step = Math.min(WORD_STEP_MS, MAX_STAGGER_MS / Math.max(count, 1));\n  const spoken = text.replace(/\\n/g, \" \");\n  // Headings take their accessible name from aria-label, so the sentence appears once in the DOM.\n  const named = as !== \"p\";\n  let index = 0;\n  return (\n    <Tag\n      ref={ref}\n      id={id}\n      data-slot=\"text-reveal\"\n      aria-label={named ? spoken : undefined}\n      className={cnAll(\"text-reveal\", TYPE[as], className)}\n    >\n      {named ? null : <span className=\"sr-only\">{spoken}</span>}\n      {lines.map((words, lineIndex) => (\n        <Fragment key={lineIndex}>\n          <span className=\"text-reveal-line\" aria-hidden=\"true\">\n            {words.map((word, wordIndex) => {\n              const position = index++;\n              return (\n                <Fragment key={`${word}-${position}`}>\n                  <span className=\"text-reveal-clip\">\n                    <span\n                      className=\"text-reveal-word\"\n                      style={\n                        {\n                          \"--reveal-delay\": `${delay + (position + lineIndex) * step}ms`,\n                        } as CSSProperties\n                      }\n                    >\n                      {word}\n                    </span>\n                  </span>\n                  {wordIndex < words.length - 1 ? \" \" : null}\n                </Fragment>\n              );\n            })}\n          </span>\n          {lineIndex < lines.length - 1 ? \" \" : null}\n        </Fragment>\n      ))}\n    </Tag>\n  );\n});\n"],"mappings":";;;;;AA6BA,MAAM,iBAAiB;AACvB,MAAM,eAAe;AAGrB,MAAM,OAA2D;CAC/D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,GAAG;AACL;AAEA,MAAa,aAAa,WAAyC,SAAS,WAC1E,EAAE,MAAM,KAAK,MAAM,QAAQ,GAAG,IAAI,aAClC,KACA;CACA,MAAM,MAAM;CACZ,MAAM,QAAQ,KAAK,MAAM,IAAI,CAAC,CAAC,KAAK,SAAS,KAAK,MAAM,GAAG,CAAC,CAAC,OAAO,OAAO,CAAC;CAC5E,MAAM,QAAQ,MAAM,QAAQ,OAAO,UAAU,QAAQ,MAAM,QAAQ,CAAC;CACpE,MAAM,OAAO,KAAK,IAAI,cAAc,iBAAiB,KAAK,IAAI,OAAO,CAAC,CAAC;CACvE,MAAM,SAAS,KAAK,QAAQ,OAAO,GAAG;CAEtC,MAAM,QAAQ,OAAO;CACrB,IAAI,QAAQ;CACZ,OACE,qBAAC,KAAD;EACO;EACD;EACJ,aAAU;EACV,cAAY,QAAQ,SAAS,KAAA;EAC7B,WAAW,MAAM,eAAe,KAAK,KAAK,SAAS;EALrD,UAAA,CAOG,QAAQ,OAAO,oBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAa,CAAA,GACvD,MAAM,KAAK,OAAO,cACjB,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GAAmB,eAAY;GAC5C,UAAA,MAAM,KAAK,MAAM,cAAc;IAC9B,MAAM,WAAW;IACjB,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KACd,UAAA,oBAAC,QAAD;MACE,WAAU;MACV,OACE,EACE,kBAAkB,GAAG,SAAS,WAAW,aAAa,KAAK,IAC7D;MAGD,UAAA;KACG,CAAA;IACF,CAAA,GACL,YAAY,MAAM,SAAS,IAAI,MAAM,IAC9B,EAAA,GAdK,GAAG,KAAK,GAAG,UAchB;GAEd,CAAC;EACG,CAAA,GACL,YAAY,MAAM,SAAS,IAAI,MAAM,IAC9B,EAAA,GAxBK,SAwBL,CACX,CACE;;AAET,CAAC"}

package/dist/text-shimmer/index.d.ts

@@ -0,0 +1,2 @@
+import { TextShimmer, TextShimmerProps } from "./text-shimmer.js";
+export { TextShimmer, type TextShimmerProps };

package/dist/text-shimmer/index.js

@@ -0,0 +1,2 @@
+import { TextShimmer } from "./text-shimmer.js";
+export { TextShimmer };

package/dist/text-shimmer/text-shimmer.d.ts

@@ -0,0 +1,29 @@
+//#region src/text-shimmer/text-shimmer.d.ts
+/**
+ * TextShimmer: a calm light sweep across a short status line, such as
+ * "Thinking" or "Generating summary", to show that work is ongoing.
+ *
+ * The band is the current text colour over a muted base, painted by CSS alone
+ * (a gradient clipped to the text, its position driven by a registered custom
+ * property), so nothing re-renders per frame. A pause of about a quarter of the
+ * cycle follows each pass. When `active` turns false the text settles to solid
+ * over a short transition. A changed label rises in place. Under reduced motion
+ * nothing moves and the text stays in its muted base colour. The component sets
+ * `aria-busy`; announce completion from your own live region.
+ */
+export interface TextShimmerProps {
+  /** The status text. Keep it to one short line. */
+  children: string;
+  /** Sweep while work is ongoing. @default true */
+  active?: boolean;
+  /** Seconds for one pass of the band across the text (the pause between passes comes on top). @default 1.8 */
+  duration?: number;
+  /** The element to render. @default "span" */
+  as?: "span" | "p" | "div" | "h2" | "h3" | "h4";
+  /** Extra classes for the element. Merged last. */
+  className?: string;
+  id?: string;
+}
+export declare const TextShimmer: import("react").ForwardRefExoticComponent<TextShimmerProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=text-shimmer.d.ts.map

package/dist/text-shimmer/text-shimmer.js

@@ -0,0 +1,29 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { SwapText } from "../lib/swap-text.js";
+import { createElement, forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/text-shimmer/text-shimmer.tsx
+/** The sweep takes this share of one cycle; the rest is the rest between passes. */
+const SWEEP_SHARE = .76;
+const TextShimmer = forwardRef(function TextShimmer({ children, active = true, duration = 1.8, as = "span", className, id }, ref) {
+	return createElement(as, {
+		ref,
+		id,
+		"data-slot": "text-shimmer",
+		"data-state": active ? "active" : "idle",
+		"aria-busy": active || void 0,
+		style: { "--text-shimmer-cycle": `${duration / SWEEP_SHARE}s` },
+		className: cn("shimmer-text", className)
+	}, /* @__PURE__ */ jsx(SwapText, {
+		swapKey: children,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "shimmer-text-label",
+			children
+		})
+	}));
+});
+//#endregion
+export { TextShimmer };
+
+//# sourceMappingURL=text-shimmer.js.map

package/dist/text-shimmer/text-shimmer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-shimmer.js","names":[],"sources":["../../src/text-shimmer/text-shimmer.tsx"],"sourcesContent":["\"use client\";\n\nimport { createElement, forwardRef, type CSSProperties } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * TextShimmer: a calm light sweep across a short status line, such as\n * \"Thinking\" or \"Generating summary\", to show that work is ongoing.\n *\n * The band is the current text colour over a muted base, painted by CSS alone\n * (a gradient clipped to the text, its position driven by a registered custom\n * property), so nothing re-renders per frame. A pause of about a quarter of the\n * cycle follows each pass. When `active` turns false the text settles to solid\n * over a short transition. A changed label rises in place. Under reduced motion\n * nothing moves and the text stays in its muted base colour. The component sets\n * `aria-busy`; announce completion from your own live region.\n */\nexport interface TextShimmerProps {\n  /** The status text. Keep it to one short line. */\n  children: string;\n  /** Sweep while work is ongoing. @default true */\n  active?: boolean;\n  /** Seconds for one pass of the band across the text (the pause between passes comes on top). @default 1.8 */\n  duration?: number;\n  /** The element to render. @default \"span\" */\n  as?: \"span\" | \"p\" | \"div\" | \"h2\" | \"h3\" | \"h4\";\n  /** Extra classes for the element. Merged last. */\n  className?: string;\n  id?: string;\n}\n\n/** The sweep takes this share of one cycle; the rest is the rest between passes. */\nconst SWEEP_SHARE = 0.76;\n\nexport const TextShimmer = forwardRef<HTMLElement, TextShimmerProps>(function TextShimmer(\n  { children, active = true, duration = 1.8, as = \"span\", className, id },\n  ref,\n) {\n  return createElement(\n    as,\n    {\n      ref,\n      id,\n      \"data-slot\": \"text-shimmer\",\n      \"data-state\": active ? \"active\" : \"idle\",\n      \"aria-busy\": active || undefined,\n      style: { \"--text-shimmer-cycle\": `${duration / SWEEP_SHARE}s` } as CSSProperties,\n      className: cn(\"shimmer-text\", className),\n    },\n    <SwapText swapKey={children}>\n      <span className=\"shimmer-text-label\">{children}</span>\n    </SwapText>,\n  );\n});\n"],"mappings":";;;;;;;AAkCA,MAAM,cAAc;AAEpB,MAAa,cAAc,WAA0C,SAAS,YAC5E,EAAE,UAAU,SAAS,MAAM,WAAW,KAAK,KAAK,QAAQ,WAAW,MACnE,KACA;CACA,OAAO,cACL,IACA;EACE;EACA;EACA,aAAa;EACb,cAAc,SAAS,WAAW;EAClC,aAAa,UAAU,KAAA;EACvB,OAAO,EAAE,wBAAwB,GAAG,WAAW,YAAY,GAAG;EAC9D,WAAW,GAAG,gBAAgB,SAAS;CACzC,GACA,oBAAC,UAAD;EAAU,SAAS;EACjB,UAAA,oBAAC,QAAD;GAAM,WAAU;GAAsB;EAAe,CAAA;CAC7C,CAAA,CACZ;AACF,CAAC"}

package/dist/time-picker/time-picker.js

@@ -27,14 +27,14 @@ import { Time } from "@internationalized/date";
 const timePickerListVariants = cva([
 	"picker-pop w-(--trigger-width) origin-top overflow-hidden",
 	"[--pop-in-y:-6px] [--pop-in-scale:0.97] [--pop-out-y:-4px] [--pop-out-scale:0.98] [--pop-out-duration:120ms]",
-	"rounded-md border-(length:--border-width) border-border p-1",
+	"rounded-panel border-(length:--border-width) border-border p-1",
 	"bg-card text-card-foreground shadow-floating",
 	"box-border font-sans text-sm leading-(--leading-normal)"
 ]);
 /** A time. The highlight changes almost at once (the arrows move it often); a dot marks the chosen one. */
 const timePickerItemVariants = cva([
 	"relative flex min-h-9 cursor-pointer select-none items-center justify-between gap-2",
-	"rounded-2xs px-3 py-1.5 tabular-nums outline-none",
+	"rounded-control px-3 py-1.5 tabular-nums outline-none",
 	"text-sm leading-(--leading-normal) text-card-foreground",
 	"data-[focused]:bg-muted",
 	"motion-safe:transition-colors motion-safe:duration-80 motion-safe:ease-settle",