@dowel-ui/react 0.5.0 → 0.8.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-effect.js","names":[],"sources":["../../../src/components/text-effect/text-effect.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Blur Out Up, Bottom Up Letters, Depth Parallax Words, Focus Blur Resolve, Kinetic Center Build, Line By Line Slide, Mask Reveal Up, Micro Scale Fade, Per Character Rise, Reveal Text, Scale Down Fade, Short Slide Down, Short Slide Right, Soft Blur In, Spring Scale In, Stagger From Center, Stagger From Edges, Top Down Letters and Wave Text (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type Key,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * One mechanism for nineteen SmoothUI text animations (ADR 0014). Every source\n * splits a string into characters, words or lines and moves each piece from a\n * pose to rest with a stagger; they differ only in numbers. So the numbers\n * live in PRESETS, and the component is one code path that reads them.\n *\n * - The motion is CSS. Each piece carries its stagger position as `--i`; the\n *   hoisted stylesheet turns that into a delay, and every delay and duration\n *   runs through --motion-scale. The sources used `motion`'s tweens, which\n *   are cubic-béziers, so nothing is lost.\n * - Every entrance keyframe ends at rest and fills `both`, so under reduced\n *   motion (one near-instant iteration) the text lands readable, never at\n *   opacity 0. The one loop (wave-text) runs once, back to rest.\n * - The split spans are aria-hidden; an sr-only copy carries the full string,\n *   so a screen reader reads a sentence, not a spelling bee.\n * - Horizontal travel is along the inline axis: \"from the left\" in the\n *   sources is \"from the inline start\" here, and mirrors in RTL.\n */\n\nimport {\n  PREFIX,\n  PRESETS,\n  STYLES,\n  textEffectPresetNames,\n  type PresetSpec,\n  type TextEffectDirection,\n  type TextEffectPreset,\n  type TextEffectUnit,\n} from \"./text-effect-presets\";\n\nexport {\n  textEffectPresetNames,\n  type TextEffectDirection,\n  type TextEffectPreset,\n  type TextEffectUnit,\n};\n\n/* Variants -------------------------------------------------------------- */\n\nconst presetRoots = Object.fromEntries(\n  textEffectPresetNames.map((name) => [name, (PRESETS[name] as PresetSpec).root ?? \"\"]),\n) as Record<TextEffectPreset, string>;\n\n/** Root classes: the layout each source gave its wrapper. */\nconst textEffectVariants = cva(\"\", {\n  variants: {\n    preset: presetRoots,\n    by: { character: \"\", word: \"\", line: \"block\", whole: \"\" },\n  },\n  defaultVariants: { preset: \"soft-blur-in\" },\n});\n\n/* Splitting ------------------------------------------------------------- */\n\ninterface Plan {\n  unit: TextEffectUnit;\n  spec: PresetSpec;\n  /** Duration of the piece run, in ms, for the \"which ends last\" sum. */\n  duration: number;\n  stagger: number;\n  /** Whether pieces animate at all in this run (a `glide` exit moves only the phrase). */\n  pieces: boolean;\n  /** Whether word slots grow (builder entrances). */\n  grow: boolean;\n  /** Ends last: a piece index, \"group\", or null for a loop. */\n  last: number | \"group\" | null;\n}\n\nfunction orderOf(index: number, count: number, order: PresetSpec[\"order\"]): number {\n  if (order === \"center\") return Math.abs(index - (count - 1) / 2);\n  if (order === \"edges\") return Math.min(index, count - 1 - index);\n  return index;\n}\n\ntype Vars = CSSProperties & Record<`--${string}`, string | number>;\n\nfunction ms(value: number): string {\n  return `calc(${String(value)}ms * var(--motion-scale, 1))`;\n}\n\nfunction renderPieces(text: string, plan: Plan): ReactNode[] {\n  const { unit, spec } = plan;\n  const units =\n    unit === \"character\"\n      ? Array.from(text)\n      : unit === \"word\"\n        ? text.split(\" \")\n        : unit === \"line\"\n          ? text.split(\"\\n\")\n          : [text];\n\n  const piece = (content: string, index: number): ReactNode => {\n    const style: Vars = { \"--i\": orderOf(index, units.length, spec.order) };\n    const first = index === 0 && spec.first !== undefined && plan.grow;\n    if (first) style[\"--text-effect-duration\"] = ms(spec.first ?? 0);\n    let node: ReactNode = (\n      <span\n        key={index}\n        data-slot=\"text-effect-piece\"\n        data-last={plan.last === index ? \"\" : undefined}\n        style={style}\n      >\n        {content}\n      </span>\n    );\n    if (spec.mask) {\n      node = (\n        <span key={index} data-slot=\"text-effect-mask\">\n          {node}\n        </span>\n      );\n    }\n    if (spec.layout === \"row\" || spec.layout === \"column\") {\n      node = (\n        <span\n          key={index}\n          data-slot=\"text-effect-cell\"\n          data-first={index === 0 ? \"\" : undefined}\n          style={{ \"--i\": style[\"--i\"] } as Vars}\n        >\n          {node}\n        </span>\n      );\n    }\n    return node;\n  };\n\n  if (spec.layout) return units.map(piece);\n\n  if (unit === \"word\") {\n    // Real spaces between words, so lines wrap where the text would.\n    return units.flatMap((word, index) =>\n      index === 0 ? [piece(word, index)] : [\" \", piece(word, index)],\n    );\n  }\n\n  if (unit === \"character\") {\n    // Letters are grouped per word so a line never breaks inside one.\n    const out: ReactNode[] = [];\n    let index = 0;\n    for (const [w, word] of text.split(\" \").entries()) {\n      if (w > 0) out.push(piece(\" \", index++));\n      const letters = Array.from(word).map((letter) => piece(letter, index++));\n      if (letters.length > 0) {\n        out.push(\n          <span key={`w${String(w)}`} data-slot=\"text-effect-word\">\n            {letters}\n          </span>,\n        );\n      }\n    }\n    return out;\n  }\n\n  return units.map(piece);\n}\n\n/** The piece (or the phrase) that finishes last, so `onComplete` fires once. */\nfunction lastOf(count: number, plan: Omit<Plan, \"last\">, groupEnd: number | null) {\n  if (plan.spec.loop) return null;\n  let best = -1;\n  let bestEnd = -Infinity;\n  if (plan.pieces) {\n    for (let index = 0; index < count; index++) {\n      const firstDuration = index === 0 && plan.grow ? plan.spec.first : undefined;\n      const end =\n        orderOf(index, count, plan.spec.order) * plan.stagger +\n        (firstDuration ?? plan.duration);\n      if (end >= bestEnd) {\n        best = index;\n        bestEnd = end;\n      }\n    }\n  }\n  if (groupEnd !== null && groupEnd > bestEnd) return \"group\" as const;\n  return best >= 0 ? best : null;\n}\n\nfunction countOf(text: string, unit: TextEffectUnit): number {\n  if (unit === \"character\") return Array.from(text).length;\n  if (unit === \"word\") return text.split(\" \").length;\n  if (unit === \"line\") return text.split(\"\\n\").length;\n  return 1;\n}\n\n/* Environment ----------------------------------------------------------- */\n\nconst noop = () => () => {};\n\nfunction subscribeReducedMotion(onChange: () => void) {\n  if (typeof window.matchMedia !== \"function\") return () => {};\n  const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n  query.addEventListener(\"change\", onChange);\n  return () => query.removeEventListener(\"change\", onChange);\n}\n\nfunction prefersReducedMotion(): boolean {\n  if (typeof window.matchMedia !== \"function\") return false;\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\nfunction assignRef<T>(ref: Ref<T> | undefined, node: T | null) {\n  if (typeof ref === \"function\") ref(node);\n  else if (ref) ref.current = node;\n}\n\n/* Component ------------------------------------------------------------- */\n\nexport type TextEffectElement = \"span\" | \"p\" | \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nexport interface TextEffectProps\n  extends\n    Omit<ComponentPropsWithRef<\"span\">, \"children\" | \"ref\">,\n    Omit<VariantProps<typeof textEffectVariants>, \"preset\" | \"by\"> {\n  /** The text. A string, because it is split; use `\\n` to separate lines. */\n  children: string;\n  ref?: Ref<HTMLElement>;\n  /** The element to render. Headings keep their role and read as one string. */\n  as?: TextEffectElement;\n  /** Which SmoothUI animation to play. */\n  preset?: TextEffectPreset;\n  /**\n   * Split unit. Defaults to the source's. The phrase builders\n   * (kinetic-center-build, short-slide-down, short-slide-right) are always\n   * per word: their layout is the effect. Prefer `word` or `line` for\n   * joined scripts (Arabic, Devanagari): separate letters cannot join.\n   */\n  by?: TextEffectUnit;\n  /** Milliseconds before the first piece moves. */\n  delay?: number;\n  /** Milliseconds between pieces. Defaults to the preset's. */\n  stagger?: number;\n  /** Milliseconds each piece takes to enter (or one wave cycle). Defaults to the preset's. */\n  duration?: number;\n  /** reveal-text only: the way the text travels as it appears. */\n  direction?: TextEffectDirection;\n  /** wave-text only: peak height of the wave, in pixels. */\n  amplitude?: number;\n  /**\n   * `mount` plays immediately; `in-view` waits until the text first scrolls\n   * into view, once. Without IntersectionObserver (or on the server) the text\n   * renders at rest.\n   */\n  trigger?: \"mount\" | \"in-view\";\n  /**\n   * `enter` brings the text in. `exit` takes it out — with the source's own\n   * exit where it had one (the phrase builders), otherwise the entrance\n   * played backwards. An exit ends hidden; the sr-only copy remains. Has no\n   * effect on wave-text, which is a loop rather than an entrance.\n   */\n  mode?: \"enter\" | \"exit\";\n  /** Change it to replay. Changing `children`, `preset` or `mode` also replays. */\n  replayKey?: Key;\n  /** Called once the last piece settles. Never called for wave-text. */\n  onComplete?: () => void;\n}\n\n/** Text that animates in, piece by piece, in one of nineteen SmoothUI motions. */\nexport function TextEffect({\n  children,\n  ref,\n  as: Comp = \"span\",\n  preset = \"soft-blur-in\",\n  by,\n  delay = 0,\n  stagger,\n  duration,\n  direction = \"up\",\n  amplitude = 8,\n  trigger = \"mount\",\n  mode = \"enter\",\n  replayKey,\n  onComplete,\n  className,\n  style,\n  ...props\n}: TextEffectProps) {\n  const spec: PresetSpec = PRESETS[preset];\n  const unit = spec.layout ? spec.by : (by ?? spec.by);\n  const exiting = mode === \"exit\" && !spec.loop;\n\n  const reduced = useSyncExternalStore(\n    subscribeReducedMotion,\n    prefersReducedMotion,\n    () => false,\n  );\n  // Server snapshot false: an in-view effect renders at rest on the server and\n  // wherever IntersectionObserver is missing, rather than waiting forever.\n  const observable = useSyncExternalStore(\n    noop,\n    () => typeof IntersectionObserver !== \"undefined\",\n    () => false,\n  );\n  const [seen, setSeen] = useState(false);\n  const node = useRef<HTMLElement | null>(null);\n\n  const setRef = useCallback(\n    (element: HTMLElement | null) => {\n      node.current = element;\n      assignRef(ref, element);\n    },\n    [ref],\n  );\n\n  const waiting = trigger === \"in-view\" && !seen;\n\n  useEffect(() => {\n    const element = node.current;\n    if (!waiting || !observable || !element) return;\n    const observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setSeen(true);\n        observer.disconnect();\n      }\n    });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [waiting, observable]);\n\n  // A native listener rather than onAnimationEnd: React listens for a\n  // vendor-prefixed event name wherever AnimationEvent is missing.\n  const complete = useRef(onComplete);\n  useEffect(() => {\n    complete.current = onComplete;\n  });\n  useEffect(() => {\n    const element = node.current;\n    if (!element) return;\n    const onEnd = (event: Event) => {\n      if (event.target instanceof Element && event.target.hasAttribute(\"data-last\")) {\n        complete.current?.();\n      }\n    };\n    element.addEventListener(\"animationend\", onEnd);\n    return () => element.removeEventListener(\"animationend\", onEnd);\n  }, [Comp]);\n\n  const state = waiting ? (observable ? \"idle\" : \"static\") : \"playing\";\n  const animated = state !== \"static\";\n\n  // What runs: the entrance, the source's exit, or the entrance reversed.\n  const exit = exiting ? spec.exit : undefined;\n  const id = `${PREFIX}-${preset}`;\n  const pieceRun = exit\n    ? exit.target === \"pieces\"\n      ? { name: `${id}-exit`, duration: exit.duration, ease: exit.ease, stagger: 0 }\n      : null\n    : {\n        name: spec.directions ? `${id}-${direction}` : id,\n        duration: duration ?? spec.duration,\n        ease: spec.ease,\n        stagger: stagger ?? spec.stagger,\n      };\n  const groupRun = exit\n    ? exit.target === \"group\"\n      ? { name: `${id}-exit`, duration: exit.duration, ease: exit.ease }\n      : null\n    : spec.group\n      ? { name: `${id}-group`, duration: spec.group.duration, ease: spec.group.ease }\n      : null;\n\n  const base = {\n    unit,\n    spec,\n    duration: pieceRun?.duration ?? 0,\n    stagger: pieceRun?.stagger ?? 0,\n    pieces: pieceRun !== null,\n    grow: !exiting && (spec.layout === \"row\" || spec.layout === \"column\"),\n  };\n  const plan: Plan = {\n    ...base,\n    last: lastOf(countOf(children, unit), base, groupRun?.duration ?? null),\n  };\n\n  const vars: Vars = {\n    \"--text-effect-name\": animated && pieceRun ? pieceRun.name : \"none\",\n    \"--text-effect-duration\": ms(plan.duration),\n    \"--text-effect-ease\": pieceRun?.ease ?? \"linear\",\n    \"--text-effect-delay\": `${String(delay)}ms`,\n    \"--text-effect-stagger\": `${String(plan.stagger)}ms`,\n    \"--text-effect-count\": spec.loop && !reduced ? \"infinite\" : \"1\",\n    \"--text-effect-direction\": exiting && !exit ? \"reverse\" : \"normal\",\n    \"--text-effect-grow\":\n      animated && plan.grow\n        ? `${PREFIX}-grow-${spec.layout === \"row\" ? \"inline\" : \"block\"}`\n        : \"none\",\n  };\n  if (spec.loop) vars[\"--text-effect-amplitude\"] = `${String(amplitude)}px`;\n  if (animated && groupRun) {\n    Object.assign(vars, {\n      animationName: groupRun.name,\n      animationDuration: ms(groupRun.duration),\n      animationTimingFunction: groupRun.ease,\n      animationDelay: ms(delay),\n      animationFillMode: \"both\",\n    } satisfies CSSProperties);\n  }\n\n  const run = [String(replayKey ?? \"\"), preset, unit, mode, direction, children].join(\"\u0000\");\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <Comp\n        ref={setRef}\n        data-slot=\"text-effect\"\n        data-preset={preset}\n        data-mode={spec.loop ? \"loop\" : mode}\n        data-state={state}\n        className={cn(textEffectVariants({ preset, by: unit }), className)}\n        style={style}\n        {...props}\n      >\n        <span data-slot=\"text-effect-label\" className=\"sr-only\">\n          {children}\n        </span>\n        <span\n          key={run}\n          aria-hidden=\"true\"\n          data-slot=\"text-effect-content\"\n          data-by={unit}\n          data-layout={spec.layout}\n          data-last={plan.last === \"group\" ? \"\" : undefined}\n          style={vars}\n        >\n          {renderPieces(children, plan)}\n        </span>\n      </Comp>\n    </>\n  );\n}\n\nexport { textEffectVariants };\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { TextLoader, TextLoaderProps, TextLoaderVariant, textLoaderVariantNames, textLoaderVariants } from "./text-loader.js";
+export { TextLoader, type TextLoaderProps, type TextLoaderVariant, textLoaderVariantNames, textLoaderVariants };

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

@@ -0,0 +1,2 @@
+import { TextLoader, textLoaderVariantNames, textLoaderVariants } from "./text-loader.js";
+export { TextLoader, textLoaderVariantNames, textLoaderVariants };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/text-loader/meta.ts
+const meta = defineMeta({
+	name: "text-loader",
+	title: "Text Loader",
+	description: "Indeterminate loading indicators made of words and interface shapes — shimmer, typing, skeleton, terminal and 15 more motions.",
+	category: "feedback",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["text-loader.tsx"],
+	a11y: "Renders aria-hidden by default so it does not announce inside controls that already expose a busy state; the words it shows are decoration. Pass `label` to announce it standalone via role=\"status\". Under reduced motion it slows rather than stopping, because a frozen loader reads as a hang."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/text-loader/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"text-loader\",\n  title: \"Text Loader\",\n  description:\n    \"Indeterminate loading indicators made of words and interface shapes — shimmer, typing, skeleton, terminal and 15 more motions.\",\n  category: \"feedback\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"text-loader.tsx\"],\n  a11y:\n    \"Renders aria-hidden by default so it does not announce inside controls that already \" +\n    'expose a busy state; the words it shows are decoration. Pass `label` to announce it standalone via role=\"status\". ' +\n    \"Under reduced motion it slows rather than stopping, because a frozen loader reads as a hang.\",\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,iBAAiB;CACzB,MACE;AAGJ,CAAC"}

package/dist/components/text-loader/text-loader.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/text-loader/text-loader.d.ts
+declare const VARIANT_NAMES: readonly ["shimmer", "blink", "dots", "shimmer-wave", "typing-indicator", "typing", "shimmer-line", "skeleton", "terminal", "reveal", "fluid-skeleton", "spring-pop", "unlock", "glass-card", "window-terminal", "island", "app-icon", "morph", "scan"];
+type TextLoaderVariant = (typeof VARIANT_NAMES)[number];
+/** Every variant, in catalogue order. Stories and tests iterate this. */
+declare const textLoaderVariantNames: TextLoaderVariant[];
+declare const textLoaderVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TextLoaderProps extends Omit<ComponentPropsWithRef<"span">, "children">, VariantProps<typeof textLoaderVariants> {
+  /** Which animation to play. */
+  variant?: TextLoaderVariant;
+  /** The word the text variants display. Decorative — `label` is what is announced. */
+  text?: string;
+  /** The words `morph` alternates between. Defaults to `text`, then "Wait". */
+  words?: readonly string[];
+  /**
+   * Announced to assistive technology while the loader is visible.
+   *
+   * Omit it when the loader sits inside something that already reports its
+   * busy state — announcing twice is worse than not announcing at all.
+   */
+  label?: string;
+}
+/** An indeterminate loading indicator made of words and interface shapes, in 19 motions. */
+declare function TextLoader({ className, size, variant, text, words, label, style, ...props }: TextLoaderProps): import("react").JSX.Element;
+//#endregion
+export { TextLoader, TextLoaderProps, TextLoaderVariant, textLoaderVariantNames, textLoaderVariants };
+//# sourceMappingURL=text-loader.d.ts.map

package/dist/components/text-loader/text-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-loader.d.ts","names":[],"sources":["../../../src/components/text-loader/text-loader.tsx"],"mappings":";;;cAmIM;KAsBM,4BAA4B;;cAoW3B,wBAAwB;cAE/B,qBAAkB;;6CAYtB;UAEe,wBAEb,KAAK,4CACL,oBAAoB;;EAEtB,UAAU;;EAEV;;EAEA;;;;;;;EAOA;;;iBAIc,aACd,WACA,MACA,SACA,MACA,OACA,OACA,UACG,SACF,kCAAe,IAAA"}

package/dist/components/text-loader/text-loader.js

@@ -0,0 +1,514 @@
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/text-loader/text-loader.tsx
+const PREFIX = "dowel-text-loader";
+/** A delay or duration in seconds, scaled for reduced motion. */
+function scaled(seconds) {
+	return `calc(${String(seconds)}s * var(--motion-scale-indicator, 1))`;
+}
+const FAINT = (percent) => `color-mix(in oklab, currentColor ${String(percent)}%, transparent)`;
+const STYLES = `
+.${PREFIX}{direction:ltr;position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;white-space:nowrap}
+.${PREFIX} [data-part]{animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--dur);animation-delay:var(--delay,0s)}
+.${PREFIX} [data-part=char]{display:inline-block}
+.${PREFIX} [data-part=dot]{display:block;border-radius:9999px;background:currentColor}
+.${PREFIX} [data-part=text]{display:inline-block}
+.${PREFIX} [data-part=sheen]{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0%,currentColor 50%,transparent 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+@keyframes ${PREFIX}-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
+@keyframes ${PREFIX}-unlock{from{background-position:200% 0}to{background-position:-200% 0}}
+@keyframes ${PREFIX}-blink{0%,100%{opacity:1}50%{opacity:.2}}
+@keyframes ${PREFIX}-dot-1{0%{opacity:0}20%,80%{opacity:1}100%{opacity:0}}
+@keyframes ${PREFIX}-dot-2{0%,40%{opacity:0}80%{opacity:1}100%{opacity:0}}
+@keyframes ${PREFIX}-dot-3{0%,60%{opacity:0}80%{opacity:1}100%{opacity:0}}
+@keyframes ${PREFIX}-wave{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-.125em)}}
+@keyframes ${PREFIX}-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--rise))}}
+@keyframes ${PREFIX}-cursor{0%,100%{opacity:1}50%{opacity:0}}
+@keyframes ${PREFIX}-slide{from{transform:translateX(-100%)}to{transform:translateX(var(--to))}}
+@keyframes ${PREFIX}-fade{0%,100%{opacity:.5}50%{opacity:1}}
+@keyframes ${PREFIX}-reveal{0%{transform:translateY(100%)}50%{transform:translateY(0)}100%{transform:translateY(-100%)}}
+@keyframes ${PREFIX}-drift{0%,100%{transform:translate(-1.25em,-.625em)}50%{transform:translate(1.25em,.625em)}}
+@keyframes ${PREFIX}-spin{to{transform:rotate(360deg)}}
+@keyframes ${PREFIX}-stretch{0%,100%{width:5em}50%{width:6.875em}}
+@keyframes ${PREFIX}-pulse{0%,100%{opacity:.4}50%{opacity:1}}
+@keyframes ${PREFIX}-level{0%,100%{height:.1875em}50%{height:.5em}}
+@keyframes ${PREFIX}-draw{from{stroke-dashoffset:125}to{stroke-dashoffset:0}}
+@keyframes ${PREFIX}-morph-out{0%{opacity:1;transform:translateY(0)}33.333%{opacity:0;transform:translateY(-1em)}66.667%{opacity:0;transform:translateY(1em)}100%{opacity:1;transform:translateY(0)}}
+@keyframes ${PREFIX}-morph-in{0%{opacity:0;transform:translateY(1em)}33.333%,66.667%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-1em)}}
+@keyframes ${PREFIX}-sweep{0%,100%{top:-100%}50%{top:100%}}
+`;
+/** An animation's inline style: its keyframe, duration and delay. */
+function motion(animation, duration, delay = 0, extra = {}) {
+	return {
+		animationName: `${PREFIX}-${animation}`,
+		"--dur": scaled(duration),
+		"--delay": scaled(delay),
+		...extra
+	};
+}
+/** One element per character, each on its own delay. */
+function chars(text, render) {
+	return Array.from(text).map((char, index) => /* @__PURE__ */ jsx("span", {
+		"data-part": "char",
+		style: render(index),
+		children: char === " " ? "\xA0" : char
+	}, index));
+}
+/** A blinking block cursor. */
+function cursor(width, height, duration, gap) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-part": "cursor",
+		style: motion("cursor", duration, 0, {
+			display: "inline-block",
+			width,
+			height,
+			marginInlineStart: gap,
+			background: "currentColor",
+			animationTimingFunction: "linear"
+		})
+	});
+}
+/** Faint base words with a bright band swept across them. */
+function sheen(text, animation, duration, base) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		style: { color: FAINT(base) },
+		children: text
+	}), /* @__PURE__ */ jsx("span", {
+		"data-part": "sheen",
+		style: motion(animation, duration, 0, { animationTimingFunction: "linear" }),
+		children: text
+	})] });
+}
+const MONO = "var(--font-mono, ui-monospace, monospace)";
+const CLIP = {
+	height: "1.5em",
+	lineHeight: "1.5em",
+	overflow: "hidden"
+};
+const VARIANT_NAMES = [
+	"shimmer",
+	"blink",
+	"dots",
+	"shimmer-wave",
+	"typing-indicator",
+	"typing",
+	"shimmer-line",
+	"skeleton",
+	"terminal",
+	"reveal",
+	"fluid-skeleton",
+	"spring-pop",
+	"unlock",
+	"glass-card",
+	"window-terminal",
+	"island",
+	"app-icon",
+	"morph",
+	"scan"
+];
+const VARIANTS = {
+	shimmer: {
+		root: {},
+		render: ({ text }) => sheen(text, "shimmer", 1.5, 30)
+	},
+	blink: {
+		root: {},
+		render: ({ text }) => /* @__PURE__ */ jsx("span", {
+			"data-part": "text",
+			style: motion("blink", 1.5),
+			children: text
+		})
+	},
+	dots: {
+		root: {},
+		render: ({ text }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: text }), /* @__PURE__ */ jsx("span", {
+			style: {
+				display: "flex",
+				width: "1.5em",
+				paddingInlineStart: "0.125em"
+			},
+			children: [
+				1,
+				2,
+				3
+			].map((index) => /* @__PURE__ */ jsx("span", {
+				"data-part": "char",
+				style: motion(`dot-${String(index)}`, 2),
+				children: "."
+			}, index))
+		})] })
+	},
+	"shimmer-wave": {
+		root: {},
+		render: ({ text }) => chars(text, (index) => motion("wave", 1.5, index * .1))
+	},
+	"typing-indicator": {
+		root: {
+			gap: "0.25em",
+			padding: "0.5em 1em",
+			borderRadius: "9999px",
+			background: "var(--color-muted)"
+		},
+		render: () => [
+			0,
+			1,
+			2
+		].map((index) => /* @__PURE__ */ jsx("span", {
+			"data-part": "dot",
+			style: motion("hop", .6, index * .15, {
+				width: "0.375em",
+				height: "0.375em",
+				"--rise": "-0.25em"
+			})
+		}, index))
+	},
+	typing: {
+		root: {},
+		render: ({ text }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: text }), cursor("0.375em", "1em", .8, "0.25em")] })
+	},
+	"shimmer-line": {
+		root: {
+			width: "6em",
+			height: "0.25em",
+			borderRadius: "9999px",
+			overflow: "hidden",
+			justifyContent: "flex-start",
+			background: FAINT(20)
+		},
+		render: () => /* @__PURE__ */ jsx("span", {
+			"data-part": "dot",
+			style: motion("slide", 1.5, 0, {
+				position: "absolute",
+				insetBlock: 0,
+				insetInlineStart: 0,
+				width: "33.333%",
+				"--to": "300%"
+			})
+		})
+	},
+	skeleton: {
+		root: {
+			width: "7.5em",
+			flexDirection: "column",
+			alignItems: "stretch",
+			gap: "0.5em",
+			color: "var(--color-muted)"
+		},
+		render: () => {
+			const block = (key, delay, extra) => /* @__PURE__ */ jsx("span", {
+				"data-part": "dot",
+				style: motion("fade", 1.5, delay, {
+					borderRadius: "9999px",
+					...extra
+				})
+			}, key);
+			return [
+				/* @__PURE__ */ jsxs("span", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "0.5em"
+					},
+					children: [block("avatar", 0, {
+						width: "2em",
+						height: "2em",
+						flexShrink: 0
+					}), block("title", .2, {
+						height: "0.75em",
+						width: "100%"
+					})]
+				}, "head"),
+				block("line-1", .4, {
+					height: "0.5em",
+					width: "100%"
+				}),
+				block("line-2", .6, {
+					height: "0.5em",
+					width: "80%"
+				})
+			];
+		}
+	},
+	terminal: {
+		root: {
+			minWidth: "8em",
+			height: "4em",
+			padding: "0.75em",
+			flexDirection: "column",
+			alignItems: "flex-start",
+			justifyContent: "flex-end",
+			overflow: "hidden",
+			borderRadius: "0.375em",
+			border: "0.0625em solid var(--color-border)",
+			background: "var(--color-card)",
+			fontFamily: MONO
+		},
+		render: ({ text }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				gap: "0.8em",
+				marginBlockEnd: "0.4em",
+				fontSize: "0.625em",
+				lineHeight: 1,
+				color: "var(--color-muted-foreground)"
+			},
+			children: [/* @__PURE__ */ jsx("span", { children: "$" }), /* @__PURE__ */ jsxs("span", { children: [text, "..."] })]
+		}), /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				fontSize: "0.625em",
+				lineHeight: 1
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: { color: "var(--color-success)" },
+				children: ">"
+			}), cursor("0.6em", "1em", .8, "0.8em")]
+		})] })
+	},
+	reveal: {
+		root: CLIP,
+		render: ({ text }) => /* @__PURE__ */ jsx("span", {
+			"data-part": "text",
+			style: motion("reveal", 2),
+			children: text
+		})
+	},
+	"fluid-skeleton": {
+		root: {
+			width: "6em",
+			height: "2.5em",
+			borderRadius: "0.75em",
+			overflow: "hidden",
+			background: "var(--color-muted)"
+		},
+		render: () => /* @__PURE__ */ jsx("span", {
+			"data-part": "band",
+			style: motion("slide", 1.5, 0, {
+				position: "absolute",
+				inset: 0,
+				background: "linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-card) 60%, transparent), transparent)",
+				animationTimingFunction: "linear",
+				"--to": "200%"
+			})
+		})
+	},
+	"spring-pop": {
+		root: { letterSpacing: "0.1em" },
+		render: ({ text }) => chars(`${text}...`, (index) => motion("hop", 1.2, index * .08, {
+			transformOrigin: "bottom",
+			"--rise": "-0.375em"
+		}))
+	},
+	unlock: {
+		root: {
+			letterSpacing: "0.025em",
+			userSelect: "none"
+		},
+		render: ({ text }) => sheen(text, "unlock", 2.2, 40)
+	},
+	"glass-card": {
+		root: {
+			width: "5em",
+			height: "4em",
+			overflow: "hidden",
+			borderRadius: "1em",
+			border: "0.0625em solid var(--color-border)",
+			background: "var(--color-muted)",
+			backdropFilter: "blur(0.75em)"
+		},
+		render: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"data-part": "dot",
+			style: motion("drift", 3, 0, {
+				position: "absolute",
+				width: "3em",
+				height: "3em",
+				background: FAINT(25),
+				filter: "blur(1.5em)"
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			"data-part": "ring",
+			style: motion("spin", 1, 0, {
+				position: "relative",
+				display: "block",
+				width: "1.25em",
+				height: "1.25em",
+				boxSizing: "border-box",
+				borderRadius: "9999px",
+				border: "0.125em solid currentColor",
+				borderTopColor: "transparent",
+				animationTimingFunction: "linear"
+			})
+		})] })
+	},
+	"window-terminal": {
+		root: { fontFamily: MONO },
+		render: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: "~ %" }), cursor("0.5em", "1em", 1, "0.375em")] })
+	},
+	island: {
+		root: {},
+		render: () => /* @__PURE__ */ jsxs("span", {
+			"data-part": "pill",
+			style: motion("stretch", 2.2, 0, {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				gap: "0.75em",
+				height: "2em",
+				padding: "0.5em 1em",
+				boxSizing: "border-box",
+				borderRadius: "9999px",
+				border: "0.0625em solid var(--color-border)",
+				background: "currentColor"
+			}),
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-part": "dot",
+				style: motion("pulse", 1.1, 0, {
+					width: "0.375em",
+					height: "0.375em",
+					background: "var(--color-success)"
+				})
+			}), /* @__PURE__ */ jsx("span", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "0.25em",
+					height: "0.5em"
+				},
+				children: [
+					0,
+					1,
+					2
+				].map((index) => /* @__PURE__ */ jsx("span", {
+					"data-part": "dot",
+					style: motion("level", .8, index * .15, {
+						width: "0.125em",
+						background: "color-mix(in oklab, var(--color-background) 75%, transparent)"
+					})
+				}, index))
+			})]
+		})
+	},
+	"app-icon": {
+		root: {
+			width: "3em",
+			height: "3em",
+			overflow: "hidden",
+			borderRadius: "0.75em",
+			background: "var(--color-muted)"
+		},
+		render: () => /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 50 50",
+			width: "2em",
+			height: "2em",
+			fill: "none",
+			strokeWidth: "4",
+			style: { position: "absolute" },
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "25",
+				cy: "25",
+				r: "20",
+				style: { stroke: FAINT(25) }
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: "25",
+				cy: "25",
+				r: "20",
+				strokeDasharray: "125",
+				"data-part": "arc",
+				style: motion("draw", 2, 0, {
+					stroke: "currentColor",
+					transform: "rotate(-90deg)",
+					transformOrigin: "center",
+					transformBox: "fill-box"
+				})
+			})]
+		})
+	},
+	morph: {
+		root: {
+			...CLIP,
+			display: "inline-grid",
+			placeItems: "center",
+			minWidth: "6em"
+		},
+		render: ({ words }) => ["morph-out", "morph-in"].map((animation, index) => /* @__PURE__ */ jsx("span", {
+			"data-part": "text",
+			style: motion(animation, 3, 0, { gridArea: "1 / 1" }),
+			children: words[index] ?? ""
+		}, animation))
+	},
+	scan: {
+		root: {
+			width: "3em",
+			height: "3em",
+			overflow: "hidden",
+			borderRadius: "0.75em",
+			border: "0.125em solid var(--color-border)"
+		},
+		render: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			width: "1.5em",
+			height: "1.5em",
+			style: { fill: FAINT(30) },
+			children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" })
+		}), /* @__PURE__ */ jsx("span", {
+			"data-part": "beam",
+			style: motion("sweep", 2.5, 0, {
+				position: "absolute",
+				insetInlineStart: 0,
+				width: "100%",
+				height: "2em",
+				background: `linear-gradient(to bottom, transparent, ${FAINT(30)})`,
+				borderBottom: "0.0625em solid currentColor",
+				animationTimingFunction: "linear"
+			})
+		})] })
+	}
+};
+/** Every variant, in catalogue order. Stories and tests iterate this. */
+const textLoaderVariantNames = [...VARIANT_NAMES];
+const textLoaderVariants = cva("", {
+	variants: { size: {
+		sm: "text-[0.75rem]",
+		md: "text-[1rem]",
+		lg: "text-[1.25rem]",
+		xl: "text-[1.5rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** An indeterminate loading indicator made of words and interface shapes, in 19 motions. */
+function TextLoader({ className, size, variant = "shimmer", text = "Loading", words, label, style, ...props }) {
+	const spec = VARIANTS[variant];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "text-loader",
+			"data-variant": variant,
+			"data-motion": "indicator",
+			className: cn(PREFIX, textLoaderVariants({ size }), className),
+			style: {
+				...spec.root,
+				...style
+			},
+			...props,
+			children: spec.render({
+				text,
+				words: words ?? [text, "Wait"]
+			})
+		}),
+		label ? /* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: "sr-only",
+			children: label
+		}) : null
+	] });
+}
+//#endregion
+export { TextLoader, textLoaderVariantNames, textLoaderVariants };
+
+//# sourceMappingURL=text-loader.js.map