@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/tags-input/tags-input.js

@@ -2,15 +2,36 @@
 import { disabledStyles, focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 //#region src/components/tags-input/tags-input.tsx
+const TAG_KEYFRAMES = `
+@keyframes dowel-tags-input-in{from{opacity:0;filter:blur(4px);transform:translateY(0.5rem) scale(0.9)}}
+@keyframes dowel-tags-input-out{to{opacity:0;filter:blur(4px);transform:translateY(0.5rem) scale(0.9)}}
+[data-slot="tags-input-tag"][data-enter]{animation:dowel-tags-input-in var(--duration-normal) var(--ease-out-quint)}
+[data-slot="tags-input-tag"][data-state="closed"]{animation:dowel-tags-input-out var(--duration-fast) var(--ease-in-quint) forwards}
+`;
+/** Clears departing tags whose animation never runs (hidden, unstyled). */
+const EXIT_FALLBACK_MS = 1e3;
+/**
+* Keys that survive removals: the tag plus how many times it has appeared so
+* far. An index key would shift every later tag on a removal, remounting them
+* (and replaying their entrance) and mistaking the last one for the removed.
+*/
+function occurrenceKeys(tags) {
+	const seen = /* @__PURE__ */ new Map();
+	return tags.map((tag) => {
+		const count = seen.get(tag) ?? 0;
+		seen.set(tag, count + 1);
+		return `${String(count)}:${tag}`;
+	});
+}
 /** Splits pasted or typed text on any delimiter, dropping empty fragments. */
 function splitOn(text, delimiters) {
 	if (delimiters.length === 0) return [text];
 	const pattern = new RegExp(`[${delimiters.map((d) => `\\${d}`).join("")}]`);
 	return text.split(pattern).map((part) => part.trim()).filter((part) => part.length > 0);
 }
-function TagsInput({ className, value, onValueChange, label, delimiters = [",", ";"], validate, allowDuplicates = false, max, placeholder, disabled = false, inputProps, ...props }) {
+function TagsInput({ className, value, onValueChange, label, delimiters = [",", ";"], validate, allowDuplicates = false, max, placeholder, disabled = false, inputProps, animateExit = false, ...props }) {
 	const [draft, setDraft] = useState("");
 	const [announcement, setAnnouncement] = useState("");
 	const inputRef = useRef(null);
@@ -18,6 +39,51 @@ function TagsInput({ className, value, onValueChange, label, delimiters = [",",
 	const inputId = useId();
 	const hintId = useId();
 	const atLimit = max !== void 0 && value.length >= max;
+	const keys = occurrenceKeys(value);
+	const [settled, setSettled] = useState(() => new Set(keys));
+	const [previous, setPrevious] = useState(value);
+	const [leaving, setLeaving] = useState([]);
+	if (previous !== value) {
+		setPrevious(value);
+		const present = new Set(keys);
+		const gone = animateExit ? occurrenceKeys(previous).flatMap((key, index) => present.has(key) ? [] : [{
+			key,
+			tag: previous[index] ?? "",
+			index
+		}]) : [];
+		setSettled((current) => new Set([...current].filter((key) => present.has(key))));
+		setLeaving((current) => [...current.filter((entry) => !present.has(entry.key) && !gone.some((g) => g.key === entry.key)), ...gone]);
+	}
+	useEffect(() => {
+		if (leaving.length === 0) return;
+		const timer = setTimeout(() => {
+			setLeaving([]);
+		}, EXIT_FALLBACK_MS);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [leaving]);
+	const listenForExitEnd = useCallback((key) => (element) => {
+		if (!element) return;
+		const onEnd = (event) => {
+			if (event.target !== element) return;
+			setLeaving((current) => current.filter((entry) => entry.key !== key));
+		};
+		element.addEventListener("animationend", onEnd);
+		return () => {
+			element.removeEventListener("animationend", onEnd);
+		};
+	}, []);
+	const rendered = value.map((tag, index) => ({
+		key: keys[index] ?? tag,
+		tag,
+		index,
+		gone: false
+	}));
+	for (const entry of [...leaving].sort((a, b) => a.index - b.index)) rendered.splice(Math.min(entry.index, rendered.length), 0, {
+		...entry,
+		gone: true
+	});
 	function reasonFor(tag) {
 		if (!validate) return null;
 		const result = validate(tag, value);
@@ -90,6 +156,11 @@ function TagsInput({ className, value, onValueChange, label, delimiters = [",",
 		className: cn("flex flex-col gap-1.5", className),
 		...props,
 		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "dowel-tags-input",
+				precedence: "dowel",
+				children: TAG_KEYFRAMES
+			}),
 			/* @__PURE__ */ jsx("label", {
 				id: labelId,
 				htmlFor: inputId,
@@ -101,13 +172,18 @@ function TagsInput({ className, value, onValueChange, label, delimiters = [",",
 				"aria-labelledby": labelId,
 				"data-disabled": disabled || void 0,
 				className: cn("flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-2 py-1.5", "focus-within:ring-2 focus-within:ring-ring/55", disabled && "pointer-events-none opacity-55"),
-				children: [value.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				children: [rendered.length > 0 ? /* @__PURE__ */ jsx("ul", {
 					className: "contents",
-					children: value.map((tag, index) => {
+					children: rendered.map(({ key, tag, index, gone }) => {
 						const reason = reasonFor(tag);
 						return /* @__PURE__ */ jsxs("li", {
+							ref: gone ? listenForExitEnd(key) : void 0,
 							"data-slot": "tags-input-tag",
 							"data-invalid": reason !== null || void 0,
+							"data-enter": !gone && !settled.has(key) || void 0,
+							"data-state": gone ? "closed" : void 0,
+							"aria-hidden": gone || void 0,
+							inert: gone || void 0,
 							className: cn("inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", reason === null ? "border-transparent bg-secondary text-secondary-foreground" : "border-destructive/40 bg-destructive/10 text-destructive"),
 							children: [
 								tag,
@@ -123,7 +199,7 @@ function TagsInput({ className, value, onValueChange, label, delimiters = [",",
 									onClick: () => {
 										removeAt(index);
 									},
-									className: cn("-me-0.5 grid size-4 place-items-center rounded-full", "transition-colors hover:bg-foreground/10", focusRing, disabledStyles),
+									className: cn("-me-0.5 grid size-4 place-items-center rounded-full", "transition-[background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "hover:bg-foreground/10 active:scale-90", focusRing, disabledStyles),
 									children: /* @__PURE__ */ jsx("svg", {
 										viewBox: "0 0 24 24",
 										"aria-hidden": "true",
@@ -137,7 +213,7 @@ function TagsInput({ className, value, onValueChange, label, delimiters = [",",
 									})
 								})
 							]
-						}, `${tag}-${String(index)}`);
+						}, gone ? `gone:${key}` : key);
 					})
 				}) : null, /* @__PURE__ */ jsx("input", {
 					ref: inputRef,

package/dist/components/tags-input/tags-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags-input.js","names":[],"sources":["../../../src/components/tags-input/tags-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useRef,\n  useState,\n  type ClipboardEvent,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A field whose value is a list of short strings: invited emails, allowed\n * domains, labels, stop sequences.\n *\n * The behaviour that makes this worth shipping is what happens to input that\n * fails validation. Every implementation surveyed either refuses to create the\n * token, or creates it and silently throws it away — and both leave the reader\n * staring at a field that did not do what they asked, with nothing to correct.\n * Here an invalid entry becomes a token like any other, marked invalid and\n * carrying its reason, so it can be seen, read out, and fixed by removing it.\n * `value` holds every token including the invalid ones; the consumer runs the\n * same `validate` to decide whether the field is submittable.\n *\n * Deliberately no suggestion list. A token field with an anchored listbox is a\n * multi-select combobox, and this library already has 544 lines of hand-rolled\n * combobox ARIA. A second copy of that would be the expensive kind of\n * duplication — the kind that drifts. When multi-select is wanted, it belongs in\n * Combobox.\n */\n\n/** Returns `true` for a valid tag, or a reason it is not. */\nexport type TagValidator = (tag: string, existing: string[]) => true | string;\n\nexport interface TagsInputProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onChange\" | \"children\"\n> {\n  value: string[];\n  onValueChange: (tags: string[]) => void;\n  /** Names the field. Required — an unlabelled list of tokens is unreadable. */\n  label: string;\n  /** Characters that commit the token being typed, besides Enter. */\n  delimiters?: string[];\n  /**\n   * Decides whether a tag is acceptable. An invalid tag is still added, marked,\n   * and given its reason, rather than being refused or dropped.\n   */\n  validate?: TagValidator;\n  /** Rejects a tag already present. Rejections are announced, never silent. */\n  allowDuplicates?: boolean;\n  /** Refuses further tags once reached, and says so. */\n  max?: number;\n  placeholder?: string;\n  disabled?: boolean;\n  inputProps?: Omit<ComponentPropsWithRef<\"input\">, \"value\" | \"onChange\" | \"disabled\">;\n}\n\n/** Splits pasted or typed text on any delimiter, dropping empty fragments. */\nfunction splitOn(text: string, delimiters: string[]): string[] {\n  if (delimiters.length === 0) return [text];\n  const pattern = new RegExp(`[${delimiters.map((d) => `\\\\${d}`).join(\"\")}]`);\n  return text\n    .split(pattern)\n    .map((part) => part.trim())\n    .filter((part) => part.length > 0);\n}\n\nexport function TagsInput({\n  className,\n  value,\n  onValueChange,\n  label,\n  delimiters = [\",\", \";\"],\n  validate,\n  allowDuplicates = false,\n  max,\n  placeholder,\n  disabled = false,\n  inputProps,\n  ...props\n}: TagsInputProps) {\n  const [draft, setDraft] = useState(\"\");\n  const [announcement, setAnnouncement] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const labelId = useId();\n  const inputId = useId();\n  const hintId = useId();\n\n  const atLimit = max !== undefined && value.length >= max;\n\n  function reasonFor(tag: string): string | null {\n    if (!validate) return null;\n    const result = validate(tag, value);\n    return result === true ? null : result;\n  }\n\n  /** Adds tags, reporting anything refused rather than dropping it in silence. */\n  function commit(candidates: string[]) {\n    const accepted: string[] = [];\n    const refused: string[] = [];\n\n    // Split defensively rather than trusting the caller. A draft can arrive\n    // holding a delimiter from autofill, an IME commit, or a programmatic set,\n    // and a token with a comma inside it is never what was meant.\n    for (const candidate of candidates.flatMap((part) => splitOn(part, delimiters))) {\n      const tag = candidate.trim();\n      if (tag.length === 0) continue;\n\n      if (!allowDuplicates && [...value, ...accepted].includes(tag)) {\n        refused.push(`${tag} is already added`);\n        continue;\n      }\n      if (max !== undefined && value.length + accepted.length >= max) {\n        refused.push(`${tag} not added, limit of ${String(max)} reached`);\n        continue;\n      }\n      // An invalid tag is still added. It is the reader's text and they need to\n      // see it to fix it; refusing silently is how these fields lose input.\n      accepted.push(tag);\n    }\n\n    if (accepted.length > 0) onValueChange([...value, ...accepted]);\n\n    const parts: string[] = [];\n    if (accepted.length > 0) {\n      const invalid = accepted.filter((tag) => reasonFor(tag) !== null);\n      parts.push(`Added ${accepted.join(\", \")}`);\n      if (invalid.length > 0) parts.push(`${String(invalid.length)} need attention`);\n    }\n    parts.push(...refused);\n    setAnnouncement(parts.join(\". \"));\n  }\n\n  function removeAt(index: number) {\n    const removed = value[index];\n    onValueChange(value.filter((_, position) => position !== index));\n    setAnnouncement(removed === undefined ? \"\" : `Removed ${removed}`);\n    inputRef.current?.focus();\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    if (event.key === \"Enter\") {\n      // Never let a token commit submit the form as well.\n      event.preventDefault();\n      if (draft.trim().length > 0) {\n        commit([draft]);\n        setDraft(\"\");\n      }\n      return;\n    }\n\n    if (delimiters.includes(event.key)) {\n      event.preventDefault();\n      if (draft.trim().length > 0) {\n        commit([draft]);\n        setDraft(\"\");\n      }\n      return;\n    }\n\n    // Backspace on an empty field removes the last token — the expected\n    // shortcut, and the only way to correct without reaching for the mouse.\n    if (event.key === \"Backspace\" && draft.length === 0 && value.length > 0) {\n      event.preventDefault();\n      removeAt(value.length - 1);\n    }\n  }\n\n  function handlePaste(event: ClipboardEvent<HTMLInputElement>) {\n    const text = event.clipboardData.getData(\"text\");\n    const parts = splitOn(text, delimiters);\n    // Only intercept a paste that actually contains several tags; a single\n    // value should behave like an ordinary paste and stay editable.\n    if (parts.length <= 1) return;\n\n    event.preventDefault();\n    commit(parts);\n    setDraft(\"\");\n  }\n\n  return (\n    <div data-slot=\"tags-input\" className={cn(\"flex flex-col gap-1.5\", className)} {...props}>\n      <label id={labelId} htmlFor={inputId} className=\"w-fit text-sm font-medium\">\n        {label}\n      </label>\n\n      {/* A group rather than a listbox: these are committed values, not options\n          being chosen from, and calling it a listbox would promise navigation\n          semantics that do not exist here. */}\n      <div\n        role=\"group\"\n        aria-labelledby={labelId}\n        data-disabled={disabled || undefined}\n        className={cn(\n          \"flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-2 py-1.5\",\n          \"focus-within:ring-2 focus-within:ring-ring/55\",\n          disabled && \"pointer-events-none opacity-55\",\n        )}\n      >\n        {value.length > 0 ? (\n          <ul className=\"contents\">\n            {value.map((tag, index) => {\n              const reason = reasonFor(tag);\n              return (\n                <li\n                  key={`${tag}-${String(index)}`}\n                  data-slot=\"tags-input-tag\"\n                  data-invalid={reason !== null || undefined}\n                  className={cn(\n                    \"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium\",\n                    reason === null\n                      ? \"border-transparent bg-secondary text-secondary-foreground\"\n                      : \"border-destructive/40 bg-destructive/10 text-destructive\",\n                  )}\n                >\n                  {tag}\n                  {/* The reason travels with the token, so it is announced when\n                      the token is, rather than as a detached error elsewhere. */}\n                  {reason === null ? null : (\n                    <span className=\"sr-only\">, invalid: {reason}</span>\n                  )}\n                  <button\n                    type=\"button\"\n                    data-slot=\"tags-input-remove\"\n                    disabled={disabled}\n                    aria-label={`Remove ${tag}`}\n                    onClick={() => {\n                      removeAt(index);\n                    }}\n                    className={cn(\n                      \"-me-0.5 grid size-4 place-items-center rounded-full\",\n                      \"transition-colors hover:bg-foreground/10\",\n                      focusRing,\n                      disabledStyles,\n                    )}\n                  >\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" className=\"size-2.5\">\n                      <path\n                        d=\"M6 6l12 12M18 6L6 18\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"3\"\n                        strokeLinecap=\"round\"\n                      />\n                    </svg>\n                  </button>\n                </li>\n              );\n            })}\n          </ul>\n        ) : null}\n\n        <input\n          ref={inputRef}\n          type=\"text\"\n          id={inputId}\n          data-slot=\"tags-input-field\"\n          value={draft}\n          disabled={disabled}\n          placeholder={value.length === 0 ? placeholder : undefined}\n          aria-describedby={hintId}\n          onChange={(event) => {\n            setDraft(event.target.value);\n          }}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\n          onBlur={() => {\n            // Committing on blur stops a typed-but-uncommitted value being lost\n            // when the reader tabs away thinking they are done.\n            if (draft.trim().length > 0) {\n              commit([draft]);\n              setDraft(\"\");\n            }\n          }}\n          className={cn(\n            \"min-w-24 flex-1 self-stretch bg-transparent text-sm outline-none\",\n            \"placeholder:text-muted-foreground\",\n          )}\n          {...inputProps}\n        />\n      </div>\n\n      <span id={hintId} className=\"text-xs text-muted-foreground\">\n        {atLimit\n          ? `Limit of ${String(max ?? 0)} reached`\n          : `Press Enter${delimiters.length > 0 ? ` or ${delimiters.join(\" \")}` : \"\"} to add`}\n      </span>\n\n      {/* Additions, removals and refusals all land here. A refusal that is only\n          visible as \"nothing happened\" is the failure this component exists to\n          avoid. */}\n      <span aria-live=\"polite\" className=\"sr-only\">\n        {announcement}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"tags-input.js","names":[],"sources":["../../../src/components/tags-input/tags-input.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AnimatedTags (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ClipboardEvent,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A field whose value is a list of short strings: invited emails, allowed\n * domains, labels, stop sequences.\n *\n * The behaviour that makes this worth shipping is what happens to input that\n * fails validation. Every implementation surveyed either refuses to create the\n * token, or creates it and silently throws it away — and both leave the reader\n * staring at a field that did not do what they asked, with nothing to correct.\n * Here an invalid entry becomes a token like any other, marked invalid and\n * carrying its reason, so it can be seen, read out, and fixed by removing it.\n * `value` holds every token including the invalid ones; the consumer runs the\n * same `validate` to decide whether the field is submittable.\n *\n * Deliberately no suggestion list. A token field with an anchored listbox is a\n * multi-select combobox, and this library already has 544 lines of hand-rolled\n * combobox ARIA. A second copy of that would be the expensive kind of\n * duplication — the kind that drifts. When multi-select is wanted, it belongs in\n * Combobox.\n */\n\n/** Returns `true` for a valid tag, or a reason it is not. */\nexport type TagValidator = (tag: string, existing: string[]) => true | string;\n\nexport interface TagsInputProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onChange\" | \"children\"\n> {\n  value: string[];\n  onValueChange: (tags: string[]) => void;\n  /** Names the field. Required — an unlabelled list of tokens is unreadable. */\n  label: string;\n  /** Characters that commit the token being typed, besides Enter. */\n  delimiters?: string[];\n  /**\n   * Decides whether a tag is acceptable. An invalid tag is still added, marked,\n   * and given its reason, rather than being refused or dropped.\n   */\n  validate?: TagValidator;\n  /** Rejects a tag already present. Rejections are announced, never silent. */\n  allowDuplicates?: boolean;\n  /** Refuses further tags once reached, and says so. */\n  max?: number;\n  placeholder?: string;\n  disabled?: boolean;\n  inputProps?: Omit<ComponentPropsWithRef<\"input\">, \"value\" | \"onChange\" | \"disabled\">;\n  /**\n   * Lets a removed tag blur and drop away before it leaves the DOM. The\n   * departing copy is `aria-hidden` and inert. Off by default, because the old\n   * token briefly remains in the markup. Tags added after mount always blur in.\n   */\n  animateExit?: boolean;\n}\n\n/*\n * SmoothUI's AnimatedTags: a new token rises in out of a blur, a removed one\n * sinks back into it. Keyframes ship with the component (ADR 0014) and run on\n * duration tokens, so reduced motion collapses them. Tags present on first\n * render do not animate — a page load is not an addition.\n */\nconst TAG_KEYFRAMES = `\n@keyframes dowel-tags-input-in{from{opacity:0;filter:blur(4px);transform:translateY(0.5rem) scale(0.9)}}\n@keyframes dowel-tags-input-out{to{opacity:0;filter:blur(4px);transform:translateY(0.5rem) scale(0.9)}}\n[data-slot=\"tags-input-tag\"][data-enter]{animation:dowel-tags-input-in var(--duration-normal) var(--ease-out-quint)}\n[data-slot=\"tags-input-tag\"][data-state=\"closed\"]{animation:dowel-tags-input-out var(--duration-fast) var(--ease-in-quint) forwards}\n`;\n\n/** Clears departing tags whose animation never runs (hidden, unstyled). */\nconst EXIT_FALLBACK_MS = 1000;\n\n/**\n * Keys that survive removals: the tag plus how many times it has appeared so\n * far. An index key would shift every later tag on a removal, remounting them\n * (and replaying their entrance) and mistaking the last one for the removed.\n */\nfunction occurrenceKeys(tags: string[]): string[] {\n  const seen = new Map<string, number>();\n  return tags.map((tag) => {\n    const count = seen.get(tag) ?? 0;\n    seen.set(tag, count + 1);\n    return `${String(count)}:${tag}`;\n  });\n}\n\ninterface LeavingTag {\n  key: string;\n  tag: string;\n  index: number;\n}\n\n/** Splits pasted or typed text on any delimiter, dropping empty fragments. */\nfunction splitOn(text: string, delimiters: string[]): string[] {\n  if (delimiters.length === 0) return [text];\n  const pattern = new RegExp(`[${delimiters.map((d) => `\\\\${d}`).join(\"\")}]`);\n  return text\n    .split(pattern)\n    .map((part) => part.trim())\n    .filter((part) => part.length > 0);\n}\n\nexport function TagsInput({\n  className,\n  value,\n  onValueChange,\n  label,\n  delimiters = [\",\", \";\"],\n  validate,\n  allowDuplicates = false,\n  max,\n  placeholder,\n  disabled = false,\n  inputProps,\n  animateExit = false,\n  ...props\n}: TagsInputProps) {\n  const [draft, setDraft] = useState(\"\");\n  const [announcement, setAnnouncement] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const labelId = useId();\n  const inputId = useId();\n  const hintId = useId();\n\n  const atLimit = max !== undefined && value.length >= max;\n\n  const keys = occurrenceKeys(value);\n  // Keys already on screen, which do not play an entrance. Derived from the\n  // previous render rather than in an effect, so a departing tag is in place on\n  // the same commit its live copy leaves.\n  const [settled, setSettled] = useState(() => new Set(keys));\n  const [previous, setPrevious] = useState(value);\n  const [leaving, setLeaving] = useState<LeavingTag[]>([]);\n  if (previous !== value) {\n    setPrevious(value);\n    const present = new Set(keys);\n    const gone = animateExit\n      ? occurrenceKeys(previous).flatMap((key, index) =>\n          present.has(key) ? [] : [{ key, tag: previous[index] ?? \"\", index }],\n        )\n      : [];\n    setSettled((current) => new Set([...current].filter((key) => present.has(key))));\n    setLeaving((current) => [\n      ...current.filter(\n        (entry) => !present.has(entry.key) && !gone.some((g) => g.key === entry.key),\n      ),\n      ...gone,\n    ]);\n  }\n\n  useEffect(() => {\n    if (leaving.length === 0) return;\n    const timer = setTimeout(() => {\n      setLeaving([]);\n    }, EXIT_FALLBACK_MS);\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [leaving]);\n\n  // A native listener: React maps onAnimationEnd to a vendor-prefixed name\n  // wherever AnimationEvent is missing. React 19 runs the returned cleanup.\n  const listenForExitEnd = useCallback(\n    (key: string) => (element: HTMLLIElement | null) => {\n      if (!element) return;\n      const onEnd = (event: Event) => {\n        if (event.target !== element) return;\n        setLeaving((current) => current.filter((entry) => entry.key !== key));\n      };\n      element.addEventListener(\"animationend\", onEnd);\n      return () => {\n        element.removeEventListener(\"animationend\", onEnd);\n      };\n    },\n    [],\n  );\n\n  // Live tags in order, with departing ones slotted back where they stood.\n  const rendered: (LeavingTag & { gone: boolean })[] = value.map((tag, index) => ({\n    key: keys[index] ?? tag,\n    tag,\n    index,\n    gone: false,\n  }));\n  for (const entry of [...leaving].sort((a, b) => a.index - b.index)) {\n    rendered.splice(Math.min(entry.index, rendered.length), 0, { ...entry, gone: true });\n  }\n\n  function reasonFor(tag: string): string | null {\n    if (!validate) return null;\n    const result = validate(tag, value);\n    return result === true ? null : result;\n  }\n\n  /** Adds tags, reporting anything refused rather than dropping it in silence. */\n  function commit(candidates: string[]) {\n    const accepted: string[] = [];\n    const refused: string[] = [];\n\n    // Split defensively rather than trusting the caller. A draft can arrive\n    // holding a delimiter from autofill, an IME commit, or a programmatic set,\n    // and a token with a comma inside it is never what was meant.\n    for (const candidate of candidates.flatMap((part) => splitOn(part, delimiters))) {\n      const tag = candidate.trim();\n      if (tag.length === 0) continue;\n\n      if (!allowDuplicates && [...value, ...accepted].includes(tag)) {\n        refused.push(`${tag} is already added`);\n        continue;\n      }\n      if (max !== undefined && value.length + accepted.length >= max) {\n        refused.push(`${tag} not added, limit of ${String(max)} reached`);\n        continue;\n      }\n      // An invalid tag is still added. It is the reader's text and they need to\n      // see it to fix it; refusing silently is how these fields lose input.\n      accepted.push(tag);\n    }\n\n    if (accepted.length > 0) onValueChange([...value, ...accepted]);\n\n    const parts: string[] = [];\n    if (accepted.length > 0) {\n      const invalid = accepted.filter((tag) => reasonFor(tag) !== null);\n      parts.push(`Added ${accepted.join(\", \")}`);\n      if (invalid.length > 0) parts.push(`${String(invalid.length)} need attention`);\n    }\n    parts.push(...refused);\n    setAnnouncement(parts.join(\". \"));\n  }\n\n  function removeAt(index: number) {\n    const removed = value[index];\n    onValueChange(value.filter((_, position) => position !== index));\n    setAnnouncement(removed === undefined ? \"\" : `Removed ${removed}`);\n    inputRef.current?.focus();\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    if (event.key === \"Enter\") {\n      // Never let a token commit submit the form as well.\n      event.preventDefault();\n      if (draft.trim().length > 0) {\n        commit([draft]);\n        setDraft(\"\");\n      }\n      return;\n    }\n\n    if (delimiters.includes(event.key)) {\n      event.preventDefault();\n      if (draft.trim().length > 0) {\n        commit([draft]);\n        setDraft(\"\");\n      }\n      return;\n    }\n\n    // Backspace on an empty field removes the last token — the expected\n    // shortcut, and the only way to correct without reaching for the mouse.\n    if (event.key === \"Backspace\" && draft.length === 0 && value.length > 0) {\n      event.preventDefault();\n      removeAt(value.length - 1);\n    }\n  }\n\n  function handlePaste(event: ClipboardEvent<HTMLInputElement>) {\n    const text = event.clipboardData.getData(\"text\");\n    const parts = splitOn(text, delimiters);\n    // Only intercept a paste that actually contains several tags; a single\n    // value should behave like an ordinary paste and stay editable.\n    if (parts.length <= 1) return;\n\n    event.preventDefault();\n    commit(parts);\n    setDraft(\"\");\n  }\n\n  return (\n    <div data-slot=\"tags-input\" className={cn(\"flex flex-col gap-1.5\", className)} {...props}>\n      <style href=\"dowel-tags-input\" precedence=\"dowel\">\n        {TAG_KEYFRAMES}\n      </style>\n      <label id={labelId} htmlFor={inputId} className=\"w-fit text-sm font-medium\">\n        {label}\n      </label>\n\n      {/* A group rather than a listbox: these are committed values, not options\n          being chosen from, and calling it a listbox would promise navigation\n          semantics that do not exist here. */}\n      <div\n        role=\"group\"\n        aria-labelledby={labelId}\n        data-disabled={disabled || undefined}\n        className={cn(\n          \"flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-2 py-1.5\",\n          \"focus-within:ring-2 focus-within:ring-ring/55\",\n          disabled && \"pointer-events-none opacity-55\",\n        )}\n      >\n        {rendered.length > 0 ? (\n          <ul className=\"contents\">\n            {rendered.map(({ key, tag, index, gone }) => {\n              const reason = reasonFor(tag);\n              return (\n                <li\n                  key={gone ? `gone:${key}` : key}\n                  ref={gone ? listenForExitEnd(key) : undefined}\n                  data-slot=\"tags-input-tag\"\n                  data-invalid={reason !== null || undefined}\n                  data-enter={(!gone && !settled.has(key)) || undefined}\n                  data-state={gone ? \"closed\" : undefined}\n                  aria-hidden={gone || undefined}\n                  inert={gone || undefined}\n                  className={cn(\n                    \"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium\",\n                    reason === null\n                      ? \"border-transparent bg-secondary text-secondary-foreground\"\n                      : \"border-destructive/40 bg-destructive/10 text-destructive\",\n                  )}\n                >\n                  {tag}\n                  {/* The reason travels with the token, so it is announced when\n                      the token is, rather than as a detached error elsewhere. */}\n                  {reason === null ? null : (\n                    <span className=\"sr-only\">, invalid: {reason}</span>\n                  )}\n                  <button\n                    type=\"button\"\n                    data-slot=\"tags-input-remove\"\n                    disabled={disabled}\n                    aria-label={`Remove ${tag}`}\n                    onClick={() => {\n                      removeAt(index);\n                    }}\n                    className={cn(\n                      \"-me-0.5 grid size-4 place-items-center rounded-full\",\n                      \"transition-[background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n                      \"hover:bg-foreground/10 active:scale-90\",\n                      focusRing,\n                      disabledStyles,\n                    )}\n                  >\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" className=\"size-2.5\">\n                      <path\n                        d=\"M6 6l12 12M18 6L6 18\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"3\"\n                        strokeLinecap=\"round\"\n                      />\n                    </svg>\n                  </button>\n                </li>\n              );\n            })}\n          </ul>\n        ) : null}\n\n        <input\n          ref={inputRef}\n          type=\"text\"\n          id={inputId}\n          data-slot=\"tags-input-field\"\n          value={draft}\n          disabled={disabled}\n          placeholder={value.length === 0 ? placeholder : undefined}\n          aria-describedby={hintId}\n          onChange={(event) => {\n            setDraft(event.target.value);\n          }}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\n          onBlur={() => {\n            // Committing on blur stops a typed-but-uncommitted value being lost\n            // when the reader tabs away thinking they are done.\n            if (draft.trim().length > 0) {\n              commit([draft]);\n              setDraft(\"\");\n            }\n          }}\n          className={cn(\n            \"min-w-24 flex-1 self-stretch bg-transparent text-sm outline-none\",\n            \"placeholder:text-muted-foreground\",\n          )}\n          {...inputProps}\n        />\n      </div>\n\n      <span id={hintId} className=\"text-xs text-muted-foreground\">\n        {atLimit\n          ? `Limit of ${String(max ?? 0)} reached`\n          : `Press Enter${delimiters.length > 0 ? ` or ${delimiters.join(\" \")}` : \"\"} to add`}\n      </span>\n\n      {/* Additions, removals and refusals all land here. A refusal that is only\n          visible as \"nothing happened\" is the failure this component exists to\n          avoid. */}\n      <span aria-live=\"polite\" className=\"sr-only\">\n        {announcement}\n      </span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA6EA,MAAM,gBAAgB;;;;;;;AAQtB,MAAM,mBAAmB;;;;;;AAOzB,SAAS,eAAe,MAA0B;CAChD,MAAM,uBAAO,IAAI,IAAoB;CACrC,OAAO,KAAK,KAAK,QAAQ;EACvB,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK;EAC/B,KAAK,IAAI,KAAK,QAAQ,CAAC;EACvB,OAAO,GAAG,OAAO,KAAK,EAAE,GAAG;CAC7B,CAAC;AACH;;AASA,SAAS,QAAQ,MAAc,YAAgC;CAC7D,IAAI,WAAW,WAAW,GAAG,OAAO,CAAC,IAAI;CACzC,MAAM,UAAU,IAAI,OAAO,IAAI,WAAW,KAAK,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,EAAE;CAC1E,OAAO,KACJ,MAAM,OAAO,CAAC,CACd,KAAK,SAAS,KAAK,KAAK,CAAC,CAAC,CAC1B,QAAQ,SAAS,KAAK,SAAS,CAAC;AACrC;AAEA,SAAgB,UAAU,EACxB,WACA,OACA,eACA,OACA,aAAa,CAAC,KAAK,GAAG,GACtB,UACA,kBAAkB,OAClB,KACA,aACA,WAAW,OACX,YACA,cAAc,OACd,GAAG,SACc;CACjB,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CACrC,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,WAAW,OAAgC,IAAI;CACrD,MAAM,UAAU,MAAM;CACtB,MAAM,UAAU,MAAM;CACtB,MAAM,SAAS,MAAM;CAErB,MAAM,UAAU,QAAQ,KAAA,KAAa,MAAM,UAAU;CAErD,MAAM,OAAO,eAAe,KAAK;CAIjC,MAAM,CAAC,SAAS,cAAc,eAAe,IAAI,IAAI,IAAI,CAAC;CAC1D,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,SAAS,cAAc,SAAuB,CAAC,CAAC;CACvD,IAAI,aAAa,OAAO;EACtB,YAAY,KAAK;EACjB,MAAM,UAAU,IAAI,IAAI,IAAI;EAC5B,MAAM,OAAO,cACT,eAAe,QAAQ,CAAC,CAAC,SAAS,KAAK,UACrC,QAAQ,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;GAAE;GAAK,KAAK,SAAS,UAAU;GAAI;EAAM,CAAC,CACrE,IACA,CAAC;EACL,YAAY,YAAY,IAAI,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,QAAQ,QAAQ,IAAI,GAAG,CAAC,CAAC,CAAC;EAC/E,YAAY,YAAY,CACtB,GAAG,QAAQ,QACR,UAAU,CAAC,QAAQ,IAAI,MAAM,GAAG,KAAK,CAAC,KAAK,MAAM,MAAM,EAAE,QAAQ,MAAM,GAAG,CAC7E,GACA,GAAG,IACL,CAAC;CACH;CAEA,gBAAgB;EACd,IAAI,QAAQ,WAAW,GAAG;EAC1B,MAAM,QAAQ,iBAAiB;GAC7B,WAAW,CAAC,CAAC;EACf,GAAG,gBAAgB;EACnB,aAAa;GACX,aAAa,KAAK;EACpB;CACF,GAAG,CAAC,OAAO,CAAC;CAIZ,MAAM,mBAAmB,aACtB,SAAiB,YAAkC;EAClD,IAAI,CAAC,SAAS;EACd,MAAM,SAAS,UAAiB;GAC9B,IAAI,MAAM,WAAW,SAAS;GAC9B,YAAY,YAAY,QAAQ,QAAQ,UAAU,MAAM,QAAQ,GAAG,CAAC;EACtE;EACA,QAAQ,iBAAiB,gBAAgB,KAAK;EAC9C,aAAa;GACX,QAAQ,oBAAoB,gBAAgB,KAAK;EACnD;CACF,GACA,CAAC,CACH;CAGA,MAAM,WAA+C,MAAM,KAAK,KAAK,WAAW;EAC9E,KAAK,KAAK,UAAU;EACpB;EACA;EACA,MAAM;CACR,EAAE;CACF,KAAK,MAAM,SAAS,CAAC,GAAG,OAAO,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,GAC/D,SAAS,OAAO,KAAK,IAAI,MAAM,OAAO,SAAS,MAAM,GAAG,GAAG;EAAE,GAAG;EAAO,MAAM;CAAK,CAAC;CAGrF,SAAS,UAAU,KAA4B;EAC7C,IAAI,CAAC,UAAU,OAAO;EACtB,MAAM,SAAS,SAAS,KAAK,KAAK;EAClC,OAAO,WAAW,OAAO,OAAO;CAClC;;CAGA,SAAS,OAAO,YAAsB;EACpC,MAAM,WAAqB,CAAC;EAC5B,MAAM,UAAoB,CAAC;EAK3B,KAAK,MAAM,aAAa,WAAW,SAAS,SAAS,QAAQ,MAAM,UAAU,CAAC,GAAG;GAC/E,MAAM,MAAM,UAAU,KAAK;GAC3B,IAAI,IAAI,WAAW,GAAG;GAEtB,IAAI,CAAC,mBAAmB,CAAC,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC,SAAS,GAAG,GAAG;IAC7D,QAAQ,KAAK,GAAG,IAAI,kBAAkB;IACtC;GACF;GACA,IAAI,QAAQ,KAAA,KAAa,MAAM,SAAS,SAAS,UAAU,KAAK;IAC9D,QAAQ,KAAK,GAAG,IAAI,uBAAuB,OAAO,GAAG,EAAE,SAAS;IAChE;GACF;GAGA,SAAS,KAAK,GAAG;EACnB;EAEA,IAAI,SAAS,SAAS,GAAG,cAAc,CAAC,GAAG,OAAO,GAAG,QAAQ,CAAC;EAE9D,MAAM,QAAkB,CAAC;EACzB,IAAI,SAAS,SAAS,GAAG;GACvB,MAAM,UAAU,SAAS,QAAQ,QAAQ,UAAU,GAAG,MAAM,IAAI;GAChE,MAAM,KAAK,SAAS,SAAS,KAAK,IAAI,GAAG;GACzC,IAAI,QAAQ,SAAS,GAAG,MAAM,KAAK,GAAG,OAAO,QAAQ,MAAM,EAAE,gBAAgB;EAC/E;EACA,MAAM,KAAK,GAAG,OAAO;EACrB,gBAAgB,MAAM,KAAK,IAAI,CAAC;CAClC;CAEA,SAAS,SAAS,OAAe;EAC/B,MAAM,UAAU,MAAM;EACtB,cAAc,MAAM,QAAQ,GAAG,aAAa,aAAa,KAAK,CAAC;EAC/D,gBAAgB,YAAY,KAAA,IAAY,KAAK,WAAW,SAAS;EACjE,SAAS,SAAS,MAAM;CAC1B;CAEA,SAAS,cAAc,OAAwC;EAC7D,IAAI,MAAM,QAAQ,SAAS;GAEzB,MAAM,eAAe;GACrB,IAAI,MAAM,KAAK,CAAC,CAAC,SAAS,GAAG;IAC3B,OAAO,CAAC,KAAK,CAAC;IACd,SAAS,EAAE;GACb;GACA;EACF;EAEA,IAAI,WAAW,SAAS,MAAM,GAAG,GAAG;GAClC,MAAM,eAAe;GACrB,IAAI,MAAM,KAAK,CAAC,CAAC,SAAS,GAAG;IAC3B,OAAO,CAAC,KAAK,CAAC;IACd,SAAS,EAAE;GACb;GACA;EACF;EAIA,IAAI,MAAM,QAAQ,eAAe,MAAM,WAAW,KAAK,MAAM,SAAS,GAAG;GACvE,MAAM,eAAe;GACrB,SAAS,MAAM,SAAS,CAAC;EAC3B;CACF;CAEA,SAAS,YAAY,OAAyC;EAE5D,MAAM,QAAQ,QADD,MAAM,cAAc,QAAQ,MAChB,GAAG,UAAU;EAGtC,IAAI,MAAM,UAAU,GAAG;EAEvB,MAAM,eAAe;EACrB,OAAO,KAAK;EACZ,SAAS,EAAE;CACb;CAEA,OACE,qBAAC,OAAD;EAAK,aAAU;EAAa,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;EAAnF,UAAA;GACE,oBAAC,SAAD;IAAO,MAAK;IAAmB,YAAW;IACvC,UAAA;GACI,CAAA;GACP,oBAAC,SAAD;IAAO,IAAI;IAAS,SAAS;IAAS,WAAU;IAC7C,UAAA;GACI,CAAA;GAKP,qBAAC,OAAD;IACE,MAAK;IACL,mBAAiB;IACjB,iBAAe,YAAY,KAAA;IAC3B,WAAW,GACT,gHACA,iDACA,YAAY,gCACd;IARF,UAAA,CAUG,SAAS,SAAS,IACjB,oBAAC,MAAD;KAAI,WAAU;KACX,UAAA,SAAS,KAAK,EAAE,KAAK,KAAK,OAAO,WAAW;MAC3C,MAAM,SAAS,UAAU,GAAG;MAC5B,OACE,qBAAC,MAAD;OAEE,KAAK,OAAO,iBAAiB,GAAG,IAAI,KAAA;OACpC,aAAU;OACV,gBAAc,WAAW,QAAQ,KAAA;OACjC,cAAa,CAAC,QAAQ,CAAC,QAAQ,IAAI,GAAG,KAAM,KAAA;OAC5C,cAAY,OAAO,WAAW,KAAA;OAC9B,eAAa,QAAQ,KAAA;OACrB,OAAO,QAAQ,KAAA;OACf,WAAW,GACT,sFACA,WAAW,OACP,8DACA,0DACN;OAdF,UAAA;QAgBG;QAGA,WAAW,OAAO,OACjB,qBAAC,QAAD;SAAM,WAAU;SAAhB,UAAA,CAA0B,eAAY,MAAa;;QAErD,oBAAC,UAAD;SACE,MAAK;SACL,aAAU;SACA;SACV,cAAY,UAAU;SACtB,eAAe;UACb,SAAS,KAAK;SAChB;SACA,WAAW,GACT,uDACA,oGACA,0CACA,WACA,cACF;SAEA,UAAA,oBAAC,OAAD;UAAK,SAAQ;UAAY,eAAY;UAAO,WAAU;UACpD,UAAA,oBAAC,QAAD;WACE,GAAE;WACF,QAAO;WACP,aAAY;WACZ,eAAc;UACf,CAAA;SACE,CAAA;QACC,CAAA;OACN;MA9CG,GAAA,OAAO,QAAQ,QAAQ,GA8C1B;KAER,CAAC;IACC,CAAA,IACF,MAEJ,oBAAC,SAAD;KACE,KAAK;KACL,MAAK;KACL,IAAI;KACJ,aAAU;KACV,OAAO;KACG;KACV,aAAa,MAAM,WAAW,IAAI,cAAc,KAAA;KAChD,oBAAkB;KAClB,WAAW,UAAU;MACnB,SAAS,MAAM,OAAO,KAAK;KAC7B;KACA,WAAW;KACX,SAAS;KACT,cAAc;MAGZ,IAAI,MAAM,KAAK,CAAC,CAAC,SAAS,GAAG;OAC3B,OAAO,CAAC,KAAK,CAAC;OACd,SAAS,EAAE;MACb;KACF;KACA,WAAW,GACT,oEACA,mCACF;KACA,GAAI;IACL,CAAA,CACE;;GAEL,oBAAC,QAAD;IAAM,IAAI;IAAQ,WAAU;IACzB,UAAA,UACG,YAAY,OAAO,OAAO,CAAC,EAAE,YAC7B,cAAc,WAAW,SAAS,IAAI,OAAO,WAAW,KAAK,GAAG,MAAM,GAAG;GACzE,CAAA;GAKN,oBAAC,QAAD;IAAM,aAAU;IAAS,WAAU;IAChC,UAAA;GACG,CAAA;EACH;;AAET"}

package/dist/components/text-effect/index.d.ts

@@ -0,0 +1,3 @@
+import { TextEffectDirection, TextEffectPreset, TextEffectUnit, textEffectPresetNames } from "./text-effect-presets.js";
+import { TextEffect, TextEffectElement, TextEffectProps, textEffectVariants } from "./text-effect.js";
+export { TextEffect, type TextEffectDirection, type TextEffectElement, type TextEffectPreset, type TextEffectProps, type TextEffectUnit, textEffectPresetNames, textEffectVariants };

package/dist/components/text-effect/index.js

@@ -0,0 +1,3 @@
+import { textEffectPresetNames } from "./text-effect-presets.js";
+import { TextEffect, textEffectVariants } from "./text-effect.js";
+export { TextEffect, textEffectPresetNames, textEffectVariants };

package/dist/components/text-effect/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/text-effect/meta.ts
+const meta = defineMeta({
+	name: "text-effect",
+	title: "Text Effect",
+	description: "Text that animates in by character, word or line — blur, rise, mask, spring, centre-out, phrase builds and a wave, as 19 presets.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["text-effect.tsx", "text-effect-presets.ts"],
+	a11y: "The split pieces are aria-hidden and an sr-only copy carries the whole string, so screen readers read the sentence once, not letter by letter; `as` keeps heading semantics. Nothing is announced on its own: pass aria-live to announce the settled text when `children` changes, never per piece. The motion is decoration — under reduced motion every entrance lands at rest in one frame and the wave stops after one pass, back at rest."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/text-effect/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/text-effect/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"text-effect\",\n  title: \"Text Effect\",\n  description:\n    \"Text that animates in by character, word or line — blur, rise, mask, spring, centre-out, phrase builds and a wave, as 19 presets.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"text-effect.tsx\", \"text-effect-presets.ts\"],\n  a11y:\n    \"The split pieces are aria-hidden and an sr-only copy carries the whole string, so screen readers read the \" +\n    \"sentence once, not letter by letter; `as` keeps heading semantics. Nothing is announced on its own: pass \" +\n    \"aria-live to announce the settled text when `children` changes, never per piece. The motion is decoration — \" +\n    \"under reduced motion every entrance lands at rest in one frame and the wave stops after one pass, back at rest.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB,wBAAwB;CACnD,MACE;AAIJ,CAAC"}

package/dist/components/text-effect/text-effect-presets.d.ts

@@ -0,0 +1,256 @@
+//#region src/components/text-effect/text-effect-presets.d.ts
+/** How a string is split. `whole` animates it as one piece. */
+type TextEffectUnit = "character" | "word" | "line" | "whole";
+/** Where reveal-text travels to. `start`/`end` follow reading direction. */
+type TextEffectDirection = "up" | "down" | "start" | "end";
+declare const PRESETS: {
+  "blur-out-up": {
+    by: "word";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      blur: number;
+      y: number;
+    };
+  };
+  "bottom-up-letters": {
+    by: "character";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      y: number;
+    };
+  };
+  "depth-parallax-words": {
+    by: "word";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      blur: number;
+      scale: number;
+      y: number;
+    };
+  };
+  "focus-blur-resolve": {
+    by: "whole";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      blur: number;
+      scale: number;
+      y: number;
+    };
+  };
+  "kinetic-center-build": {
+    by: "word";
+    stagger: number;
+    duration: number;
+    first: number;
+    ease: string;
+    from: {
+      blur: number;
+      scale: number;
+      x: number;
+      y: number;
+    };
+    layout: "row";
+    exit: {
+      target: "pieces";
+      to: {
+        blur: number;
+        y: number;
+      };
+      duration: number;
+      ease: string;
+    };
+    root: string;
+  };
+  "line-by-line-slide": {
+    by: "line";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      x: number;
+    };
+    root: string;
+  };
+  "mask-reveal-up": {
+    by: "line";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      blur: number;
+      y: number;
+    };
+    mask: true;
+    root: string;
+  };
+  "micro-scale-fade": {
+    by: "whole";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      scale: number;
+    };
+  };
+  "per-character-rise": {
+    by: "character";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      y: number;
+    };
+  };
+  "reveal-text": {
+    by: "whole";
+    stagger: number;
+    duration: number;
+    ease: string;
+    directions: {
+      up: {
+        y: number;
+      };
+      down: {
+        y: number;
+      };
+      start: {
+        x: number;
+      };
+      end: {
+        x: number;
+      };
+    };
+  };
+  "scale-down-fade": {
+    by: "whole";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      scale: number;
+      y: number;
+    };
+  };
+  "short-slide-down": {
+    by: "word";
+    stagger: number;
+    duration: number;
+    first: number;
+    ease: string;
+    from: {
+      blur: number;
+      scale: number;
+      y: number;
+    };
+    layout: "column";
+    exit: {
+      target: "pieces";
+      to: {
+        blur: number;
+        y: number;
+      };
+      duration: number;
+      ease: string;
+    };
+    root: string;
+  };
+  "short-slide-right": {
+    by: "word";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {};
+    layout: "glide";
+    group: {
+      from: {
+        opacity: number;
+        blur: number;
+        x: number;
+      };
+      duration: number;
+      ease: string;
+    };
+    exit: {
+      target: "group";
+      to: {
+        blur: number;
+        x: number;
+      };
+      duration: number;
+      ease: string;
+    };
+    root: string;
+  };
+  "soft-blur-in": {
+    by: "character";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      blur: number;
+      y: number;
+    };
+  };
+  "spring-scale-in": {
+    by: "word";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      scale: number;
+    };
+  };
+  "stagger-from-center": {
+    by: "character";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      blur: number;
+      y: number;
+    };
+    order: "center";
+  };
+  "stagger-from-edges": {
+    by: "character";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      blur: number;
+      y: number;
+    };
+    order: "edges";
+  };
+  "top-down-letters": {
+    by: "character";
+    stagger: number;
+    duration: number;
+    ease: string;
+    from: {
+      y: number;
+    };
+  };
+  "wave-text": {
+    by: "character";
+    stagger: number;
+    duration: number;
+    ease: string;
+    loop: true;
+    frames: string;
+  };
+};
+type TextEffectPreset = keyof typeof PRESETS;
+/** Every preset, in catalogue order. Stories and tests iterate this. */
+declare const textEffectPresetNames: TextEffectPreset[];
+//#endregion
+export { PRESETS, TextEffectDirection, TextEffectPreset, TextEffectUnit, textEffectPresetNames };
+//# sourceMappingURL=text-effect-presets.d.ts.map

package/dist/components/text-effect/text-effect-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-effect-presets.d.ts","names":[],"sources":["../../../src/components/text-effect/text-effect-presets.ts"],"mappings":";;KAWY;;KAGA;cA4DC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgKD,gCAAgC;;cAG/B,uBAAgD"}