@dowel-ui/react 0.5.0 → 0.8.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-loader.js","names":[],"sources":["../../../src/components/text-loader/text-loader.tsx"],"sourcesContent":["// Ported from amicro \"Text & Interface\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\n//\n// Renamed so no variant carries another company's product name:\n// apple-text-reveal → reveal, apple-unlock → unlock, mac-terminal → window-terminal,\n// dynamic-island → island, face-id-scan → scan. The rest drop their redundant\n// \"text-\"/\"-loader\" affixes (text-shimmer → shimmer, skeleton-loader → skeleton, …).\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Same shape as every loader family (ADR 0014): geometry in `em`, colour from\n * `currentColor`, keyframes hoisted with the component and every duration run\n * through --motion-scale-indicator, `direction: ltr` on the root.\n *\n * This family carries words. The words inherit the parent's font; `size` sets\n * the font size, and the non-text geometry (cursors, bars, surfaces) is in em\n * so it follows. Surfaces use the semantic surface tokens, never a literal.\n * The words are decoration — the root is aria-hidden — and `label` stays the\n * accessible announcement.\n */\n\nconst PREFIX = \"dowel-text-loader\";\n\n/** A delay or duration in seconds, scaled for reduced motion. */\nfunction scaled(seconds: number): string {\n  return `calc(${String(seconds)}s * var(--motion-scale-indicator, 1))`;\n}\n\nconst FAINT = (percent: number) =>\n  `color-mix(in oklab, currentColor ${String(percent)}%, transparent)`;\n\nconst STYLES = `\n.${PREFIX}{direction:ltr;position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;white-space:nowrap}\n.${PREFIX} [data-part]{animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--dur);animation-delay:var(--delay,0s)}\n.${PREFIX} [data-part=char]{display:inline-block}\n.${PREFIX} [data-part=dot]{display:block;border-radius:9999px;background:currentColor}\n.${PREFIX} [data-part=text]{display:inline-block}\n.${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}\n@keyframes ${PREFIX}-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}\n@keyframes ${PREFIX}-unlock{from{background-position:200% 0}to{background-position:-200% 0}}\n@keyframes ${PREFIX}-blink{0%,100%{opacity:1}50%{opacity:.2}}\n@keyframes ${PREFIX}-dot-1{0%{opacity:0}20%,80%{opacity:1}100%{opacity:0}}\n@keyframes ${PREFIX}-dot-2{0%,40%{opacity:0}80%{opacity:1}100%{opacity:0}}\n@keyframes ${PREFIX}-dot-3{0%,60%{opacity:0}80%{opacity:1}100%{opacity:0}}\n@keyframes ${PREFIX}-wave{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-.125em)}}\n@keyframes ${PREFIX}-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--rise))}}\n@keyframes ${PREFIX}-cursor{0%,100%{opacity:1}50%{opacity:0}}\n@keyframes ${PREFIX}-slide{from{transform:translateX(-100%)}to{transform:translateX(var(--to))}}\n@keyframes ${PREFIX}-fade{0%,100%{opacity:.5}50%{opacity:1}}\n@keyframes ${PREFIX}-reveal{0%{transform:translateY(100%)}50%{transform:translateY(0)}100%{transform:translateY(-100%)}}\n@keyframes ${PREFIX}-drift{0%,100%{transform:translate(-1.25em,-.625em)}50%{transform:translate(1.25em,.625em)}}\n@keyframes ${PREFIX}-spin{to{transform:rotate(360deg)}}\n@keyframes ${PREFIX}-stretch{0%,100%{width:5em}50%{width:6.875em}}\n@keyframes ${PREFIX}-pulse{0%,100%{opacity:.4}50%{opacity:1}}\n@keyframes ${PREFIX}-level{0%,100%{height:.1875em}50%{height:.5em}}\n@keyframes ${PREFIX}-draw{from{stroke-dashoffset:125}to{stroke-dashoffset:0}}\n@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)}}\n@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)}}\n@keyframes ${PREFIX}-sweep{0%,100%{top:-100%}50%{top:100%}}\n`;\n\ntype Content = { text: string; words: readonly string[] };\n\ntype Variant = {\n  /**\n   * Layout of the root, inline rather than as utilities. The hoisted stylesheet\n   * is unlayered, so it outranks Tailwind's layered utilities whatever their\n   * specificity; inline styles are the one thing that reliably outranks it.\n   */\n  root: CSSProperties;\n  render: (content: Content) => ReactNode;\n};\n\ntype Style = CSSProperties & Record<`--${string}`, string>;\n\n/** An animation's inline style: its keyframe, duration and delay. */\nfunction motion(animation: string, duration: number, delay = 0, extra: Style = {}): Style {\n  return {\n    animationName: `${PREFIX}-${animation}`,\n    \"--dur\": scaled(duration),\n    \"--delay\": scaled(delay),\n    ...extra,\n  };\n}\n\n/** One element per character, each on its own delay. */\nfunction chars(text: string, render: (index: number) => Style): ReactNode {\n  return Array.from(text).map((char, index) => (\n    <span key={index} data-part=\"char\" style={render(index)}>\n      {char === \" \" ? \"\\u00A0\" : char}\n    </span>\n  ));\n}\n\n/** A blinking block cursor. */\nfunction cursor(width: string, height: string, duration: number, gap: string): ReactNode {\n  return (\n    <span\n      data-part=\"cursor\"\n      style={motion(\"cursor\", duration, 0, {\n        display: \"inline-block\",\n        width,\n        height,\n        marginInlineStart: gap,\n        background: \"currentColor\",\n        animationTimingFunction: \"linear\",\n      })}\n    />\n  );\n}\n\n/** Faint base words with a bright band swept across them. */\nfunction sheen(text: string, animation: string, duration: number, base: number): ReactNode {\n  return (\n    <>\n      <span style={{ color: FAINT(base) }}>{text}</span>\n      <span\n        data-part=\"sheen\"\n        style={motion(animation, duration, 0, { animationTimingFunction: \"linear\" })}\n      >\n        {text}\n      </span>\n    </>\n  );\n}\n\nconst MONO = \"var(--font-mono, ui-monospace, monospace)\";\nconst CLIP: CSSProperties = { height: \"1.5em\", lineHeight: \"1.5em\", overflow: \"hidden\" };\n\nconst VARIANT_NAMES = [\n  \"shimmer\",\n  \"blink\",\n  \"dots\",\n  \"shimmer-wave\",\n  \"typing-indicator\",\n  \"typing\",\n  \"shimmer-line\",\n  \"skeleton\",\n  \"terminal\",\n  \"reveal\",\n  \"fluid-skeleton\",\n  \"spring-pop\",\n  \"unlock\",\n  \"glass-card\",\n  \"window-terminal\",\n  \"island\",\n  \"app-icon\",\n  \"morph\",\n  \"scan\",\n] as const;\n\nexport type TextLoaderVariant = (typeof VARIANT_NAMES)[number];\n\n// Annotated rather than inferred: the inferred type drags csstype's internals\n// into the declaration output (TS2883).\nconst VARIANTS: Record<TextLoaderVariant, Variant> = {\n  shimmer: { root: {}, render: ({ text }) => sheen(text, \"shimmer\", 1.5, 30) },\n  blink: {\n    root: {},\n    render: ({ text }) => (\n      <span data-part=\"text\" style={motion(\"blink\", 1.5)}>\n        {text}\n      </span>\n    ),\n  },\n  dots: {\n    root: {},\n    render: ({ text }) => (\n      <>\n        <span>{text}</span>\n        <span style={{ display: \"flex\", width: \"1.5em\", paddingInlineStart: \"0.125em\" }}>\n          {[1, 2, 3].map((index) => (\n            <span key={index} data-part=\"char\" style={motion(`dot-${String(index)}`, 2)}>\n              .\n            </span>\n          ))}\n        </span>\n      </>\n    ),\n  },\n  \"shimmer-wave\": {\n    root: {},\n    render: ({ text }) => chars(text, (index) => motion(\"wave\", 1.5, index * 0.1)),\n  },\n  \"typing-indicator\": {\n    root: {\n      gap: \"0.25em\",\n      padding: \"0.5em 1em\",\n      borderRadius: \"9999px\",\n      background: \"var(--color-muted)\",\n    },\n    render: () =>\n      [0, 1, 2].map((index) => (\n        <span\n          key={index}\n          data-part=\"dot\"\n          style={motion(\"hop\", 0.6, index * 0.15, {\n            width: \"0.375em\",\n            height: \"0.375em\",\n            \"--rise\": \"-0.25em\",\n          })}\n        />\n      )),\n  },\n  typing: {\n    root: {},\n    render: ({ text }) => (\n      <>\n        <span>{text}</span>\n        {cursor(\"0.375em\", \"1em\", 0.8, \"0.25em\")}\n      </>\n    ),\n  },\n  \"shimmer-line\": {\n    root: {\n      width: \"6em\",\n      height: \"0.25em\",\n      borderRadius: \"9999px\",\n      overflow: \"hidden\",\n      justifyContent: \"flex-start\",\n      background: FAINT(20),\n    },\n    render: () => (\n      <span\n        data-part=\"dot\"\n        style={motion(\"slide\", 1.5, 0, {\n          position: \"absolute\",\n          insetBlock: 0,\n          insetInlineStart: 0,\n          width: \"33.333%\",\n          \"--to\": \"300%\",\n        })}\n      />\n    ),\n  },\n  skeleton: {\n    root: {\n      width: \"7.5em\",\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n      gap: \"0.5em\",\n      color: \"var(--color-muted)\",\n    },\n    render: () => {\n      const block = (key: string, delay: number, extra: Style) => (\n        <span\n          key={key}\n          data-part=\"dot\"\n          style={motion(\"fade\", 1.5, delay, { borderRadius: \"9999px\", ...extra })}\n        />\n      );\n      return [\n        <span key=\"head\" style={{ display: \"flex\", alignItems: \"center\", gap: \"0.5em\" }}>\n          {block(\"avatar\", 0, { width: \"2em\", height: \"2em\", flexShrink: 0 })}\n          {block(\"title\", 0.2, { height: \"0.75em\", width: \"100%\" })}\n        </span>,\n        block(\"line-1\", 0.4, { height: \"0.5em\", width: \"100%\" }),\n        block(\"line-2\", 0.6, { height: \"0.5em\", width: \"80%\" }),\n      ];\n    },\n  },\n  terminal: {\n    root: {\n      minWidth: \"8em\",\n      height: \"4em\",\n      padding: \"0.75em\",\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n      justifyContent: \"flex-end\",\n      overflow: \"hidden\",\n      borderRadius: \"0.375em\",\n      border: \"0.0625em solid var(--color-border)\",\n      background: \"var(--color-card)\",\n      fontFamily: MONO,\n    },\n    render: ({ text }) => (\n      <>\n        <span\n          style={{\n            display: \"flex\",\n            gap: \"0.8em\",\n            marginBlockEnd: \"0.4em\",\n            fontSize: \"0.625em\",\n            lineHeight: 1,\n            color: \"var(--color-muted-foreground)\",\n          }}\n        >\n          <span>$</span>\n          <span>{text}...</span>\n        </span>\n        <span\n          style={{ display: \"flex\", alignItems: \"center\", fontSize: \"0.625em\", lineHeight: 1 }}\n        >\n          <span style={{ color: \"var(--color-success)\" }}>&gt;</span>\n          {cursor(\"0.6em\", \"1em\", 0.8, \"0.8em\")}\n        </span>\n      </>\n    ),\n  },\n  reveal: {\n    root: CLIP,\n    render: ({ text }) => (\n      <span data-part=\"text\" style={motion(\"reveal\", 2)}>\n        {text}\n      </span>\n    ),\n  },\n  \"fluid-skeleton\": {\n    root: {\n      width: \"6em\",\n      height: \"2.5em\",\n      borderRadius: \"0.75em\",\n      overflow: \"hidden\",\n      background: \"var(--color-muted)\",\n    },\n    render: () => (\n      <span\n        data-part=\"band\"\n        style={motion(\"slide\", 1.5, 0, {\n          position: \"absolute\",\n          inset: 0,\n          background:\n            \"linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-card) 60%, transparent), transparent)\",\n          animationTimingFunction: \"linear\",\n          \"--to\": \"200%\",\n        })}\n      />\n    ),\n  },\n  \"spring-pop\": {\n    root: { letterSpacing: \"0.1em\" },\n    render: ({ text }) =>\n      chars(`${text}...`, (index) =>\n        motion(\"hop\", 1.2, index * 0.08, { transformOrigin: \"bottom\", \"--rise\": \"-0.375em\" }),\n      ),\n  },\n  unlock: {\n    root: { letterSpacing: \"0.025em\", userSelect: \"none\" },\n    render: ({ text }) => sheen(text, \"unlock\", 2.2, 40),\n  },\n  \"glass-card\": {\n    root: {\n      width: \"5em\",\n      height: \"4em\",\n      overflow: \"hidden\",\n      borderRadius: \"1em\",\n      border: \"0.0625em solid var(--color-border)\",\n      background: \"var(--color-muted)\",\n      backdropFilter: \"blur(0.75em)\",\n    },\n    render: () => (\n      <>\n        <span\n          data-part=\"dot\"\n          style={motion(\"drift\", 3, 0, {\n            position: \"absolute\",\n            width: \"3em\",\n            height: \"3em\",\n            background: FAINT(25),\n            filter: \"blur(1.5em)\",\n          })}\n        />\n        <span\n          data-part=\"ring\"\n          style={motion(\"spin\", 1, 0, {\n            position: \"relative\",\n            display: \"block\",\n            width: \"1.25em\",\n            height: \"1.25em\",\n            boxSizing: \"border-box\",\n            borderRadius: \"9999px\",\n            border: \"0.125em solid currentColor\",\n            borderTopColor: \"transparent\",\n            animationTimingFunction: \"linear\",\n          })}\n        />\n      </>\n    ),\n  },\n  \"window-terminal\": {\n    root: { fontFamily: MONO },\n    render: () => (\n      <>\n        <span>~ %</span>\n        {cursor(\"0.5em\", \"1em\", 1, \"0.375em\")}\n      </>\n    ),\n  },\n  island: {\n    root: {},\n    render: () => (\n      <span\n        data-part=\"pill\"\n        style={motion(\"stretch\", 2.2, 0, {\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: \"0.75em\",\n          height: \"2em\",\n          padding: \"0.5em 1em\",\n          boxSizing: \"border-box\",\n          borderRadius: \"9999px\",\n          border: \"0.0625em solid var(--color-border)\",\n          background: \"currentColor\",\n        })}\n      >\n        <span\n          data-part=\"dot\"\n          style={motion(\"pulse\", 1.1, 0, {\n            width: \"0.375em\",\n            height: \"0.375em\",\n            background: \"var(--color-success)\",\n          })}\n        />\n        <span style={{ display: \"flex\", alignItems: \"center\", gap: \"0.25em\", height: \"0.5em\" }}>\n          {[0, 1, 2].map((index) => (\n            <span\n              key={index}\n              data-part=\"dot\"\n              style={motion(\"level\", 0.8, index * 0.15, {\n                width: \"0.125em\",\n                background: \"color-mix(in oklab, var(--color-background) 75%, transparent)\",\n              })}\n            />\n          ))}\n        </span>\n      </span>\n    ),\n  },\n  \"app-icon\": {\n    root: {\n      width: \"3em\",\n      height: \"3em\",\n      overflow: \"hidden\",\n      borderRadius: \"0.75em\",\n      background: \"var(--color-muted)\",\n    },\n    render: () => (\n      <svg\n        viewBox=\"0 0 50 50\"\n        width=\"2em\"\n        height=\"2em\"\n        fill=\"none\"\n        strokeWidth=\"4\"\n        style={{ position: \"absolute\" }}\n      >\n        <circle cx=\"25\" cy=\"25\" r=\"20\" style={{ stroke: FAINT(25) }} />\n        <circle\n          cx=\"25\"\n          cy=\"25\"\n          r=\"20\"\n          strokeDasharray=\"125\"\n          data-part=\"arc\"\n          style={motion(\"draw\", 2, 0, {\n            stroke: \"currentColor\",\n            transform: \"rotate(-90deg)\",\n            transformOrigin: \"center\",\n            transformBox: \"fill-box\",\n          })}\n        />\n      </svg>\n    ),\n  },\n  morph: {\n    root: { ...CLIP, display: \"inline-grid\", placeItems: \"center\", minWidth: \"6em\" },\n    render: ({ words }) =>\n      ([\"morph-out\", \"morph-in\"] as const).map((animation, index) => (\n        <span\n          key={animation}\n          data-part=\"text\"\n          style={motion(animation, 3, 0, { gridArea: \"1 / 1\" })}\n        >\n          {words[index] ?? \"\"}\n        </span>\n      )),\n  },\n  scan: {\n    root: {\n      width: \"3em\",\n      height: \"3em\",\n      overflow: \"hidden\",\n      borderRadius: \"0.75em\",\n      border: \"0.125em solid var(--color-border)\",\n    },\n    render: () => (\n      <>\n        <svg viewBox=\"0 0 24 24\" width=\"1.5em\" height=\"1.5em\" style={{ fill: FAINT(30) }}>\n          <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\" />\n        </svg>\n        <span\n          data-part=\"beam\"\n          style={motion(\"sweep\", 2.5, 0, {\n            position: \"absolute\",\n            insetInlineStart: 0,\n            width: \"100%\",\n            height: \"2em\",\n            background: `linear-gradient(to bottom, transparent, ${FAINT(30)})`,\n            borderBottom: \"0.0625em solid currentColor\",\n            animationTimingFunction: \"linear\",\n          })}\n        />\n      </>\n    ),\n  },\n};\n\n/** Every variant, in catalogue order. Stories and tests iterate this. */\nexport const textLoaderVariantNames: TextLoaderVariant[] = [...VARIANT_NAMES];\n\nconst textLoaderVariants = cva(\"\", {\n  variants: {\n    size: {\n      sm: \"text-[0.75rem]\",\n      md: \"text-[1rem]\",\n      lg: \"text-[1.25rem]\",\n      xl: \"text-[1.5rem]\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface TextLoaderProps\n  extends\n    Omit<ComponentPropsWithRef<\"span\">, \"children\">,\n    VariantProps<typeof textLoaderVariants> {\n  /** Which animation to play. */\n  variant?: TextLoaderVariant;\n  /** The word the text variants display. Decorative — `label` is what is announced. */\n  text?: string;\n  /** The words `morph` alternates between. Defaults to `text`, then \"Wait\". */\n  words?: readonly string[];\n  /**\n   * Announced to assistive technology while the loader is visible.\n   *\n   * Omit it when the loader sits inside something that already reports its\n   * busy state — announcing twice is worse than not announcing at all.\n   */\n  label?: string;\n}\n\n/** An indeterminate loading indicator made of words and interface shapes, in 19 motions. */\nexport function TextLoader({\n  className,\n  size,\n  variant = \"shimmer\",\n  text = \"Loading\",\n  words,\n  label,\n  style,\n  ...props\n}: TextLoaderProps) {\n  const spec = VARIANTS[variant];\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"text-loader\"\n        data-variant={variant}\n        // Exempt from the reduced-motion blanket: a loader that stops says the\n        // application has hung. It is slowed instead — see ADR 0014.\n        data-motion=\"indicator\"\n        className={cn(PREFIX, textLoaderVariants({ size }), className)}\n        style={{ ...spec.root, ...style }}\n        {...props}\n      >\n        {spec.render({ text, words: words ?? [text, \"Wait\"] })}\n      </span>\n      {label ? (\n        <span role=\"status\" className=\"sr-only\">\n          {label}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport { textLoaderVariants };\n"],"mappings":";;;;AAuBA,MAAM,SAAS;;AAGf,SAAS,OAAO,SAAyB;CACvC,OAAO,QAAQ,OAAO,OAAO,EAAE;AACjC;AAEA,MAAM,SAAS,YACb,oCAAoC,OAAO,OAAO,EAAE;AAEtD,MAAM,SAAS;GACZ,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;aACG,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;;;AAkBpB,SAAS,OAAO,WAAmB,UAAkB,QAAQ,GAAG,QAAe,CAAC,GAAU;CACxF,OAAO;EACL,eAAe,GAAG,OAAO,GAAG;EAC5B,SAAS,OAAO,QAAQ;EACxB,WAAW,OAAO,KAAK;EACvB,GAAG;CACL;AACF;;AAGA,SAAS,MAAM,MAAc,QAA6C;CACxE,OAAO,MAAM,KAAK,IAAI,CAAC,CAAC,KAAK,MAAM,UACjC,oBAAC,QAAD;EAAkB,aAAU;EAAO,OAAO,OAAO,KAAK;EACnD,UAAA,SAAS,MAAM,SAAW;CACvB,GAFK,KAEL,CACP;AACH;;AAGA,SAAS,OAAO,OAAe,QAAgB,UAAkB,KAAwB;CACvF,OACE,oBAAC,QAAD;EACE,aAAU;EACV,OAAO,OAAO,UAAU,UAAU,GAAG;GACnC,SAAS;GACT;GACA;GACA,mBAAmB;GACnB,YAAY;GACZ,yBAAyB;EAC3B,CAAC;CACF,CAAA;AAEL;;AAGA,SAAS,MAAM,MAAc,WAAmB,UAAkB,MAAyB;CACzF,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,OAAO,EAAE,OAAO,MAAM,IAAI,EAAE;EAAI,UAAA;CAAW,CAAA,GACjD,oBAAC,QAAD;EACE,aAAU;EACV,OAAO,OAAO,WAAW,UAAU,GAAG,EAAE,yBAAyB,SAAS,CAAC;EAE1E,UAAA;CACG,CAAA,CACN,EAAA,CAAA;AAEN;AAEA,MAAM,OAAO;AACb,MAAM,OAAsB;CAAE,QAAQ;CAAS,YAAY;CAAS,UAAU;AAAS;AAEvF,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAMA,MAAM,WAA+C;CACnD,SAAS;EAAE,MAAM,CAAC;EAAG,SAAS,EAAE,WAAW,MAAM,MAAM,WAAW,KAAK,EAAE;CAAE;CAC3E,OAAO;EACL,MAAM,CAAC;EACP,SAAS,EAAE,WACT,oBAAC,QAAD;GAAM,aAAU;GAAO,OAAO,OAAO,SAAS,GAAG;GAC9C,UAAA;EACG,CAAA;CAEV;CACA,MAAM;EACJ,MAAM,CAAC;EACP,SAAS,EAAE,WACT,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,GAClB,oBAAC,QAAD;GAAM,OAAO;IAAE,SAAS;IAAQ,OAAO;IAAS,oBAAoB;GAAU;GAC3E,UAAA;IAAC;IAAG;IAAG;GAAC,CAAC,CAAC,KAAK,UACd,oBAAC,QAAD;IAAkB,aAAU;IAAO,OAAO,OAAO,OAAO,OAAO,KAAK,KAAK,CAAC;IAAG,UAAA;GAEvE,GAFK,KAEL,CACP;EACG,CAAA,CACN,EAAA,CAAA;CAEN;CACA,gBAAgB;EACd,MAAM,CAAC;EACP,SAAS,EAAE,WAAW,MAAM,OAAO,UAAU,OAAO,QAAQ,KAAK,QAAQ,EAAG,CAAC;CAC/E;CACA,oBAAoB;EAClB,MAAM;GACJ,KAAK;GACL,SAAS;GACT,cAAc;GACd,YAAY;EACd;EACA,cACE;GAAC;GAAG;GAAG;EAAC,CAAC,CAAC,KAAK,UACb,oBAAC,QAAD;GAEE,aAAU;GACV,OAAO,OAAO,OAAO,IAAK,QAAQ,KAAM;IACtC,OAAO;IACP,QAAQ;IACR,UAAU;GACZ,CAAC;EACF,GAPM,KAON,CACF;CACL;CACA,QAAQ;EACN,MAAM,CAAC;EACP,SAAS,EAAE,WACT,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,GACjB,OAAO,WAAW,OAAO,IAAK,QAAQ,CACvC,EAAA,CAAA;CAEN;CACA,gBAAgB;EACd,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,cAAc;GACd,UAAU;GACV,gBAAgB;GAChB,YAAY,MAAM,EAAE;EACtB;EACA,cACE,oBAAC,QAAD;GACE,aAAU;GACV,OAAO,OAAO,SAAS,KAAK,GAAG;IAC7B,UAAU;IACV,YAAY;IACZ,kBAAkB;IAClB,OAAO;IACP,QAAQ;GACV,CAAC;EACF,CAAA;CAEL;CACA,UAAU;EACR,MAAM;GACJ,OAAO;GACP,eAAe;GACf,YAAY;GACZ,KAAK;GACL,OAAO;EACT;EACA,cAAc;GACZ,MAAM,SAAS,KAAa,OAAe,UACzC,oBAAC,QAAD;IAEE,aAAU;IACV,OAAO,OAAO,QAAQ,KAAK,OAAO;KAAE,cAAc;KAAU,GAAG;IAAM,CAAC;GACvE,GAHM,GAGN;GAEH,OAAO;IACL,qBAAC,QAAD;KAAiB,OAAO;MAAE,SAAS;MAAQ,YAAY;MAAU,KAAK;KAAQ;KAA9E,UAAA,CACG,MAAM,UAAU,GAAG;MAAE,OAAO;MAAO,QAAQ;MAAO,YAAY;KAAE,CAAC,GACjE,MAAM,SAAS,IAAK;MAAE,QAAQ;MAAU,OAAO;KAAO,CAAC,CACpD;IAHI,GAAA,MAGJ;IACN,MAAM,UAAU,IAAK;KAAE,QAAQ;KAAS,OAAO;IAAO,CAAC;IACvD,MAAM,UAAU,IAAK;KAAE,QAAQ;KAAS,OAAO;IAAM,CAAC;GACxD;EACF;CACF;CACA,UAAU;EACR,MAAM;GACJ,UAAU;GACV,QAAQ;GACR,SAAS;GACT,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,cAAc;GACd,QAAQ;GACR,YAAY;GACZ,YAAY;EACd;EACA,SAAS,EAAE,WACT,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,QAAD;GACE,OAAO;IACL,SAAS;IACT,KAAK;IACL,gBAAgB;IAChB,UAAU;IACV,YAAY;IACZ,OAAO;GACT;GARF,UAAA,CAUE,oBAAC,QAAD,EAAA,UAAM,IAAO,CAAA,GACb,qBAAC,QAAD,EAAA,UAAA,CAAO,MAAK,KAAS,EAAA,CAAA,CACjB;EACN,CAAA,GAAA,qBAAC,QAAD;GACE,OAAO;IAAE,SAAS;IAAQ,YAAY;IAAU,UAAU;IAAW,YAAY;GAAE;GADrF,UAAA,CAGE,oBAAC,QAAD;IAAM,OAAO,EAAE,OAAO,uBAAuB;IAAG,UAAA;GAAU,CAAA,GACzD,OAAO,SAAS,OAAO,IAAK,OAAO,CAChC;EACN,CAAA,CAAA,EAAA,CAAA;CAEN;CACA,QAAQ;EACN,MAAM;EACN,SAAS,EAAE,WACT,oBAAC,QAAD;GAAM,aAAU;GAAO,OAAO,OAAO,UAAU,CAAC;GAC7C,UAAA;EACG,CAAA;CAEV;CACA,kBAAkB;EAChB,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,cAAc;GACd,UAAU;GACV,YAAY;EACd;EACA,cACE,oBAAC,QAAD;GACE,aAAU;GACV,OAAO,OAAO,SAAS,KAAK,GAAG;IAC7B,UAAU;IACV,OAAO;IACP,YACE;IACF,yBAAyB;IACzB,QAAQ;GACV,CAAC;EACF,CAAA;CAEL;CACA,cAAc;EACZ,MAAM,EAAE,eAAe,QAAQ;EAC/B,SAAS,EAAE,WACT,MAAM,GAAG,KAAK,OAAO,UACnB,OAAO,OAAO,KAAK,QAAQ,KAAM;GAAE,iBAAiB;GAAU,UAAU;EAAW,CAAC,CACtF;CACJ;CACA,QAAQ;EACN,MAAM;GAAE,eAAe;GAAW,YAAY;EAAO;EACrD,SAAS,EAAE,WAAW,MAAM,MAAM,UAAU,KAAK,EAAE;CACrD;CACA,cAAc;EACZ,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,UAAU;GACV,cAAc;GACd,QAAQ;GACR,YAAY;GACZ,gBAAgB;EAClB;EACA,cACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GACE,aAAU;GACV,OAAO,OAAO,SAAS,GAAG,GAAG;IAC3B,UAAU;IACV,OAAO;IACP,QAAQ;IACR,YAAY,MAAM,EAAE;IACpB,QAAQ;GACV,CAAC;EACF,CAAA,GACD,oBAAC,QAAD;GACE,aAAU;GACV,OAAO,OAAO,QAAQ,GAAG,GAAG;IAC1B,UAAU;IACV,SAAS;IACT,OAAO;IACP,QAAQ;IACR,WAAW;IACX,cAAc;IACd,QAAQ;IACR,gBAAgB;IAChB,yBAAyB;GAC3B,CAAC;EACF,CAAA,CACD,EAAA,CAAA;CAEN;CACA,mBAAmB;EACjB,MAAM,EAAE,YAAY,KAAK;EACzB,cACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAM,MAAS,CAAA,GACd,OAAO,SAAS,OAAO,GAAG,SAAS,CACpC,EAAA,CAAA;CAEN;CACA,QAAQ;EACN,MAAM,CAAC;EACP,cACE,qBAAC,QAAD;GACE,aAAU;GACV,OAAO,OAAO,WAAW,KAAK,GAAG;IAC/B,SAAS;IACT,YAAY;IACZ,gBAAgB;IAChB,KAAK;IACL,QAAQ;IACR,SAAS;IACT,WAAW;IACX,cAAc;IACd,QAAQ;IACR,YAAY;GACd,CAAC;GAbH,UAAA,CAeE,oBAAC,QAAD;IACE,aAAU;IACV,OAAO,OAAO,SAAS,KAAK,GAAG;KAC7B,OAAO;KACP,QAAQ;KACR,YAAY;IACd,CAAC;GACF,CAAA,GACD,oBAAC,QAAD;IAAM,OAAO;KAAE,SAAS;KAAQ,YAAY;KAAU,KAAK;KAAU,QAAQ;IAAQ;IAClF,UAAA;KAAC;KAAG;KAAG;IAAC,CAAC,CAAC,KAAK,UACd,oBAAC,QAAD;KAEE,aAAU;KACV,OAAO,OAAO,SAAS,IAAK,QAAQ,KAAM;MACxC,OAAO;MACP,YAAY;KACd,CAAC;IACF,GANM,KAMN,CACF;GACG,CAAA,CACF;;CAEV;CACA,YAAY;EACV,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,UAAU;GACV,cAAc;GACd,YAAY;EACd;EACA,cACE,qBAAC,OAAD;GACE,SAAQ;GACR,OAAM;GACN,QAAO;GACP,MAAK;GACL,aAAY;GACZ,OAAO,EAAE,UAAU,WAAW;GANhC,UAAA,CAQE,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAK,OAAO,EAAE,QAAQ,MAAM,EAAE,EAAE;GAAI,CAAA,GAC9D,oBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAE;IACF,iBAAgB;IAChB,aAAU;IACV,OAAO,OAAO,QAAQ,GAAG,GAAG;KAC1B,QAAQ;KACR,WAAW;KACX,iBAAiB;KACjB,cAAc;IAChB,CAAC;GACF,CAAA,CACE;;CAET;CACA,OAAO;EACL,MAAM;GAAE,GAAG;GAAM,SAAS;GAAe,YAAY;GAAU,UAAU;EAAM;EAC/E,SAAS,EAAE,YACR,CAAC,aAAa,UAAU,CAAC,CAAW,KAAK,WAAW,UACnD,oBAAC,QAAD;GAEE,aAAU;GACV,OAAO,OAAO,WAAW,GAAG,GAAG,EAAE,UAAU,QAAQ,CAAC;GAEnD,UAAA,MAAM,UAAU;EACb,GALC,SAKD,CACP;CACL;CACA,MAAM;EACJ,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,UAAU;GACV,cAAc;GACd,QAAQ;EACV;EACA,cACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;GAAK,SAAQ;GAAY,OAAM;GAAQ,QAAO;GAAQ,OAAO,EAAE,MAAM,MAAM,EAAE,EAAE;GAC7E,UAAA,oBAAC,QAAD,EAAM,GAAE,+HAAgI,CAAA;EACrI,CAAA,GACL,oBAAC,QAAD;GACE,aAAU;GACV,OAAO,OAAO,SAAS,KAAK,GAAG;IAC7B,UAAU;IACV,kBAAkB;IAClB,OAAO;IACP,QAAQ;IACR,YAAY,2CAA2C,MAAM,EAAE,EAAE;IACjE,cAAc;IACd,yBAAyB;GAC3B,CAAC;EACF,CAAA,CACD,EAAA,CAAA;CAEN;AACF;;AAGA,MAAa,yBAA8C,CAAC,GAAG,aAAa;AAE5E,MAAM,qBAAqB,IAAI,IAAI;CACjC,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAsBD,SAAgB,WAAW,EACzB,WACA,MACA,UAAU,WACV,OAAO,WACP,OACA,OACA,OACA,GAAG,SACe;CAClB,MAAM,OAAO,SAAS;CAEtB,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GAAO,MAAM;GAAQ,YAAW;GAC7B,UAAA;EACI,CAAA;EACP,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,gBAAc;GAGd,eAAY;GACZ,WAAW,GAAG,QAAQ,mBAAmB,EAAE,KAAK,CAAC,GAAG,SAAS;GAC7D,OAAO;IAAE,GAAG,KAAK;IAAM,GAAG;GAAM;GAChC,GAAI;GAEH,UAAA,KAAK,OAAO;IAAE;IAAM,OAAO,SAAS,CAAC,MAAM,MAAM;GAAE,CAAC;EACjD,CAAA;EACL,QACC,oBAAC,QAAD;GAAM,MAAK;GAAS,WAAU;GAC3B,UAAA;EACG,CAAA,IACJ;CACJ,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,3 @@
+import { TextSwap, TextSwapElement, TextSwapProps, TextSwapTransition, textSwapTransitionNames, textSwapVariants } from "./text-swap.js";
+import { TextRotate, TextRotateProps } from "./text-rotate.js";
+export { TextRotate, type TextRotateProps, TextSwap, type TextSwapElement, type TextSwapProps, type TextSwapTransition, textSwapTransitionNames, textSwapVariants };

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

@@ -0,0 +1,3 @@
+import { TextSwap, textSwapTransitionNames, textSwapVariants } from "./text-swap.js";
+import { TextRotate } from "./text-rotate.js";
+export { TextRotate, TextSwap, textSwapTransitionNames, textSwapVariants };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/text-swap/meta.ts
+const meta = defineMeta({
+	name: "text-swap",
+	title: "Text Swap",
+	description: "Text that animates from the old string to the new one when its value changes — fade through, shared axis X/Y/Z and per-word crossfade — with a TextRotate for cycling phrases.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["text-swap.tsx", "text-rotate.tsx"],
+	a11y: "The incoming text is the accessible text from the moment it changes; the outgoing copy is aria-hidden while it animates out and is then removed, and a change mid-transition replaces the pending text rather than stacking copies. Per-word transitions keep the whole string in a visually hidden copy with the word spans aria-hidden. Nothing is a live region unless you pass aria-live, and then only the settled value is added, never per word. Under reduced motion the swap is instant and TextRotate stops rotating; `paused` stops it on demand. shared-axis-x mirrors in RTL so forward always arrives from the inline end."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/text-swap/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"text-swap\",\n  title: \"Text Swap\",\n  description:\n    \"Text that animates from the old string to the new one when its value changes — fade through, shared axis X/Y/Z and per-word crossfade — with a TextRotate for cycling phrases.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"text-swap.tsx\", \"text-rotate.tsx\"],\n  a11y:\n    \"The incoming text is the accessible text from the moment it changes; the outgoing copy is aria-hidden \" +\n    \"while it animates out and is then removed, and a change mid-transition replaces the pending text rather \" +\n    \"than stacking copies. Per-word transitions keep the whole string in a visually hidden copy with the word \" +\n    \"spans aria-hidden. Nothing is a live region unless you pass aria-live, and then only the settled value is \" +\n    \"added, never per word. Under reduced motion the swap is instant and TextRotate stops rotating; `paused` \" +\n    \"stops it on demand. shared-axis-x mirrors in RTL so forward always arrives from the inline end.\",\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,iBAAiB;CAC1C,MACE;AAMJ,CAAC"}

package/dist/components/text-swap/text-rotate.d.ts

@@ -0,0 +1,17 @@
+import { TextSwapProps } from "./text-swap.js";
+//#region src/components/text-swap/text-rotate.d.ts
+interface TextRotateProps extends Omit<TextSwapProps, "children"> {
+  /** The phrases to cycle through, in order. */
+  items: readonly string[];
+  /** Milliseconds each phrase stays before the next one. */
+  interval?: number;
+  /** Stops the rotation on the current phrase. */
+  paused?: boolean;
+  /** Called with the index of each phrase as it arrives. */
+  onIndexChange?: (index: number) => void;
+}
+/** Cycles through `items` on a timer, swapping each with a TextSwap transition. */
+declare function TextRotate({ items, interval, paused, onIndexChange, ...props }: TextRotateProps): import("react").JSX.Element;
+//#endregion
+export { TextRotate, TextRotateProps };
+//# sourceMappingURL=text-rotate.d.ts.map

package/dist/components/text-swap/text-rotate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-rotate.d.ts","names":[],"sources":["../../../src/components/text-swap/text-rotate.tsx"],"mappings":";;UAmCiB,wBAAwB,KAAK;;EAE5C;;EAEA;;EAEA;;EAEA,iBAAiB;;;iBAIH,aACd,OACA,UACA,QACA,kBACG,SACF,kCAAe,IAAA"}

package/dist/components/text-swap/text-rotate.js

@@ -0,0 +1,51 @@
+"use client";
+import { TextSwap } from "./text-swap.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+//#region src/components/text-swap/text-rotate.tsx
+const REDUCED = "(prefers-reduced-motion: reduce)";
+function subscribe(onChange) {
+	if (typeof window.matchMedia !== "function") return () => {};
+	const query = window.matchMedia(REDUCED);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+function readReduced() {
+	return typeof window.matchMedia === "function" && window.matchMedia(REDUCED).matches;
+}
+/** The server cannot know; it renders the first phrase either way. */
+function readServer() {
+	return false;
+}
+/** Cycles through `items` on a timer, swapping each with a TextSwap transition. */
+function TextRotate({ items, interval = 2500, paused = false, onIndexChange, ...props }) {
+	const [index, setIndex] = useState(0);
+	const reduced = useSyncExternalStore(subscribe, readReduced, readServer);
+	const count = items.length;
+	const stopped = paused || reduced || count <= 1;
+	useEffect(() => {
+		if (stopped) return;
+		const timer = setInterval(() => {
+			setIndex((previous) => (previous + 1) % count);
+		}, interval);
+		return () => clearInterval(timer);
+	}, [
+		stopped,
+		count,
+		interval
+	]);
+	const announced = useRef(index);
+	useEffect(() => {
+		if (announced.current === index) return;
+		announced.current = index;
+		onIndexChange?.(index);
+	}, [index, onIndexChange]);
+	return /* @__PURE__ */ jsx(TextSwap, {
+		...props,
+		children: items[index % Math.max(count, 1)] ?? ""
+	});
+}
+//#endregion
+export { TextRotate };
+
+//# sourceMappingURL=text-rotate.js.map

package/dist/components/text-swap/text-rotate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-rotate.js","names":[],"sources":["../../../src/components/text-swap/text-rotate.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Fade Through, Shared Axis X, Shared Axis Y and Shared Axis Z (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { useEffect, useRef, useState, useSyncExternalStore } from \"react\";\n\nimport { TextSwap, type TextSwapProps } from \"./text-swap\";\n\n/*\n * The four SmoothUI phrase components are a TextSwap driven by a timer: a\n * `phrases` array and an `interval` (2500ms). That timer is all this adds.\n *\n * Rotation stops under reduced motion, as Fade Through's does — a phrase that\n * keeps changing is movement even when the swap itself is instant — and the\n * current phrase stays put. `paused` gives consumers the pause control WCAG\n * 2.2.2 asks of anything that updates on its own.\n */\n\nconst REDUCED = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void): () => void {\n  if (typeof window.matchMedia !== \"function\") return () => {};\n  const query = window.matchMedia(REDUCED);\n  query.addEventListener(\"change\", onChange);\n  return () => query.removeEventListener(\"change\", onChange);\n}\n\nfunction readReduced(): boolean {\n  return typeof window.matchMedia === \"function\" && window.matchMedia(REDUCED).matches;\n}\n\n/** The server cannot know; it renders the first phrase either way. */\nfunction readServer(): boolean {\n  return false;\n}\n\nexport interface TextRotateProps extends Omit<TextSwapProps, \"children\"> {\n  /** The phrases to cycle through, in order. */\n  items: readonly string[];\n  /** Milliseconds each phrase stays before the next one. */\n  interval?: number;\n  /** Stops the rotation on the current phrase. */\n  paused?: boolean;\n  /** Called with the index of each phrase as it arrives. */\n  onIndexChange?: (index: number) => void;\n}\n\n/** Cycles through `items` on a timer, swapping each with a TextSwap transition. */\nexport function TextRotate({\n  items,\n  interval = 2500,\n  paused = false,\n  onIndexChange,\n  ...props\n}: TextRotateProps) {\n  const [index, setIndex] = useState(0);\n  const reduced = useSyncExternalStore(subscribe, readReduced, readServer);\n  const count = items.length;\n  const stopped = paused || reduced || count <= 1;\n\n  useEffect(() => {\n    if (stopped) return;\n    const timer = setInterval(() => {\n      setIndex((previous) => (previous + 1) % count);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [stopped, count, interval]);\n\n  const announced = useRef(index);\n  useEffect(() => {\n    if (announced.current === index) return;\n    announced.current = index;\n    onIndexChange?.(index);\n  }, [index, onIndexChange]);\n\n  return <TextSwap {...props}>{items[index % Math.max(count, 1)] ?? \"\"}</TextSwap>;\n}\n"],"mappings":";;;;;AAiBA,MAAM,UAAU;AAEhB,SAAS,UAAU,UAAkC;CACnD,IAAI,OAAO,OAAO,eAAe,YAAY,aAAa,CAAC;CAC3D,MAAM,QAAQ,OAAO,WAAW,OAAO;CACvC,MAAM,iBAAiB,UAAU,QAAQ;CACzC,aAAa,MAAM,oBAAoB,UAAU,QAAQ;AAC3D;AAEA,SAAS,cAAuB;CAC9B,OAAO,OAAO,OAAO,eAAe,cAAc,OAAO,WAAW,OAAO,CAAC,CAAC;AAC/E;;AAGA,SAAS,aAAsB;CAC7B,OAAO;AACT;;AAcA,SAAgB,WAAW,EACzB,OACA,WAAW,MACX,SAAS,OACT,eACA,GAAG,SACe;CAClB,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CACpC,MAAM,UAAU,qBAAqB,WAAW,aAAa,UAAU;CACvE,MAAM,QAAQ,MAAM;CACpB,MAAM,UAAU,UAAU,WAAW,SAAS;CAE9C,gBAAgB;EACd,IAAI,SAAS;EACb,MAAM,QAAQ,kBAAkB;GAC9B,UAAU,cAAc,WAAW,KAAK,KAAK;EAC/C,GAAG,QAAQ;EACX,aAAa,cAAc,KAAK;CAClC,GAAG;EAAC;EAAS;EAAO;CAAQ,CAAC;CAE7B,MAAM,YAAY,OAAO,KAAK;CAC9B,gBAAgB;EACd,IAAI,UAAU,YAAY,OAAO;EACjC,UAAU,UAAU;EACpB,gBAAgB,KAAK;CACvB,GAAG,CAAC,OAAO,aAAa,CAAC;CAEzB,OAAO,oBAAC,UAAD;EAAU,GAAI;EAAQ,UAAA,MAAM,QAAQ,KAAK,IAAI,OAAO,CAAC,MAAM;CAAa,CAAA;AACjF"}

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

@@ -0,0 +1,41 @@
+import { ComponentPropsWithRef, Ref } from "react";
+//#region src/components/text-swap/text-swap.d.ts
+type TextSwapTransition = "fade-through" | "per-word-crossfade" | "shared-axis-x" | "shared-axis-y" | "shared-axis-z";
+/** The transitions, in source order — for stories, docs and tests. */
+declare const textSwapTransitionNames: TextSwapTransition[];
+declare const textSwapVariants: (props?: ({
+  transition?: "fade-through" | "per-word-crossfade" | "shared-axis-x" | "shared-axis-y" | "shared-axis-z" | null | undefined;
+  display?: "block" | "inline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TextSwapElement = "span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+interface TextSwapProps extends Omit<ComponentPropsWithRef<"span">, "children" | "ref"> {
+  /** The value. Whenever it changes, the old text animates out and the new text in. */
+  children: string | number;
+  /** How the old text leaves and the new text arrives. */
+  transition?: TextSwapTransition;
+  /**
+   * Which way the change moves. `forward` (default) is the sources' motion:
+   * with `shared-axis-x` the next phrase arrives from the inline end (the right
+   * in LTR, the left in RTL); `backward` reverses it on every axis, and runs a
+   * staircase from the last word.
+   */
+  direction?: "forward" | "backward";
+  /** Milliseconds between words, for the split transitions. Defaults to the source's. */
+  stagger?: number;
+  /** Milliseconds added before every entrance. */
+  delay?: number;
+  /**
+   * Animate the first value in too. `in-view` waits until the element
+   * scrolls into view (SmoothUI's `triggerOnView`). Default `false`: only
+   * changes animate.
+   */
+  appear?: boolean | "in-view";
+  /** Rendered element. Block elements lay out as `grid`, inline ones as `inline-grid`. */
+  as?: TextSwapElement;
+  ref?: Ref<HTMLElement>;
+}
+/** Text that animates from the old string to the new one whenever it changes. */
+declare function TextSwap({ children, transition, direction, stagger, delay, appear, as, className, style, ref, ...props }: TextSwapProps): import("react").JSX.Element;
+//#endregion
+export { TextSwap, TextSwapElement, TextSwapProps, TextSwapTransition, textSwapTransitionNames, textSwapVariants };
+//# sourceMappingURL=text-swap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-swap.d.ts","names":[],"sources":["../../../src/components/text-swap/text-swap.tsx"],"mappings":";;KAqEY;;cA4DC,yBAAsD;cAE7D,mBAAgB;;;6CAmBpB;KAEU;UA+CK,sBAAsB,KAAK;;EAE1C;;EAEA,aAAa;;;;;;;EAOb;;EAEA;;EAEA;;;;;;EAMA;;EAEA,KAAK;EACL,MAAM,IAAI;;;iBAII,WACd,UACA,YACA,WACA,SACA,OACA,QACA,IACA,WACA,OACA,QACG,SACF,gCAAa,IAAA"}

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

@@ -0,0 +1,303 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/text-swap/text-swap.tsx
+const PREFIX = "dowel-text-swap";
+/** SmoothUI's Material easings, and Per Word Crossfade's keynote ease-out. */
+const ENTER_EASE = "cubic-bezier(0.2, 0, 0, 1)";
+const EXIT_EASE = "cubic-bezier(0.4, 0, 1, 1)";
+const KEYNOTE_EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+const STYLES = `
+[data-slot=text-swap]{--text-swap-inline:1;--text-swap-z-in:0.9;--text-swap-z-out:1.06}
+[dir=rtl] [data-slot=text-swap],[data-slot=text-swap][dir=rtl]{--text-swap-inline:-1}
+[data-slot=text-swap]:dir(ltr){--text-swap-inline:1}
+[data-slot=text-swap]:dir(rtl){--text-swap-inline:-1}
+[data-slot=text-swap][data-direction=backward]{--text-swap-z-in:1.06;--text-swap-z-out:0.9}
+[data-slot=text-swap-word]{display:inline-block;white-space:pre}
+@keyframes ${PREFIX}-fade-through-in{from{opacity:0;filter:blur(2px);transform:translateY(calc(6px * var(--text-swap-dir,1))) scale(0.99)}to{opacity:1;filter:blur(0);transform:none}}
+@keyframes ${PREFIX}-fade-through-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(calc(-4px * var(--text-swap-dir,1)))}}
+@keyframes ${PREFIX}-axis-x-in{from{opacity:0;transform:translateX(calc(24px * var(--text-swap-dir,1) * var(--text-swap-inline,1))) scale(0.98)}to{opacity:1;transform:none}}
+@keyframes ${PREFIX}-axis-x-out{from{opacity:1;transform:none}to{opacity:0;transform:translateX(calc(-20px * var(--text-swap-dir,1) * var(--text-swap-inline,1))) scale(0.98)}}
+@keyframes ${PREFIX}-axis-z-in{from{opacity:0;filter:blur(2px);transform:scale(var(--text-swap-z-in,0.9))}to{opacity:1;filter:blur(0);transform:none}}
+@keyframes ${PREFIX}-axis-z-out{from{opacity:1;filter:blur(0);transform:none}to{opacity:0;filter:blur(1px);transform:scale(var(--text-swap-z-out,1.06))}}
+@keyframes ${PREFIX}-cut-in{from{opacity:0}to{opacity:1}}
+@keyframes ${PREFIX}-cut-out{from{opacity:1}to{opacity:0}}
+@keyframes ${PREFIX}-word-in{from{opacity:0;transform:translateY(calc(8px * var(--text-swap-dir,1)))}to{opacity:1;transform:none}}
+`;
+/** Timings copied from each SmoothUI source. */
+const TRANSITIONS = {
+	"fade-through": {
+		split: false,
+		stagger: 0,
+		enter: {
+			keyframe: "fade-through-in",
+			ms: 420,
+			ease: ENTER_EASE
+		},
+		exit: {
+			keyframe: "fade-through-out",
+			ms: 260,
+			ease: EXIT_EASE
+		}
+	},
+	"per-word-crossfade": {
+		split: true,
+		stagger: 70,
+		enter: {
+			keyframe: "word-in",
+			ms: 700,
+			ease: KEYNOTE_EASE
+		},
+		exit: null
+	},
+	"shared-axis-x": {
+		split: false,
+		stagger: 0,
+		enter: {
+			keyframe: "axis-x-in",
+			ms: 500,
+			ease: ENTER_EASE
+		},
+		exit: {
+			keyframe: "axis-x-out",
+			ms: 360,
+			ease: EXIT_EASE
+		}
+	},
+	"shared-axis-y": {
+		split: true,
+		stagger: 78,
+		enter: {
+			keyframe: "cut-in",
+			ms: 0,
+			ease: "linear"
+		},
+		exit: {
+			keyframe: "cut-out",
+			ms: 0,
+			ease: "linear"
+		}
+	},
+	"shared-axis-z": {
+		split: false,
+		stagger: 0,
+		enter: {
+			keyframe: "axis-z-in",
+			ms: 520,
+			ease: ENTER_EASE
+		},
+		exit: {
+			keyframe: "axis-z-out",
+			ms: 360,
+			ease: EXIT_EASE
+		}
+	}
+};
+/** The transitions, in source order — for stories, docs and tests. */
+const textSwapTransitionNames = Object.keys(TRANSITIONS);
+const textSwapVariants = cva("[&>*]:col-start-1 [&>*]:row-start-1", {
+	variants: {
+		transition: {
+			"fade-through": "",
+			"per-word-crossfade": "",
+			"shared-axis-x": "overflow-x-clip",
+			"shared-axis-y": "",
+			"shared-axis-z": "overflow-clip"
+		},
+		display: {
+			inline: "inline-grid",
+			block: "grid"
+		}
+	},
+	defaultVariants: {
+		transition: "fade-through",
+		display: "inline"
+	}
+});
+/** Splits text into words and the whitespace between them. */
+function tokenize(text) {
+	return text.split(/(\s+)/).filter((token) => token.length > 0);
+}
+function wordCount(text) {
+	return tokenize(text).filter((token) => token.trim().length > 0).length;
+}
+/** How long a phrase takes to leave, in unscaled milliseconds. */
+function exitLength(spec, text, step) {
+	if (!spec.exit) return 0;
+	const stagger = spec.split ? Math.max(0, wordCount(text) - 1) * step : 0;
+	return spec.exit.ms + stagger;
+}
+function scaled(ms) {
+	return `calc(${String(ms)}ms * var(--motion-scale, 1))`;
+}
+function animation(phase, delayMs, paused) {
+	return {
+		animationName: `${PREFIX}-${phase.keyframe}`,
+		animationDuration: scaled(phase.ms),
+		animationTimingFunction: phase.ease,
+		animationDelay: scaled(delayMs),
+		animationFillMode: "both",
+		animationPlayState: paused ? "paused" : void 0
+	};
+}
+/** Text that animates from the old string to the new one whenever it changes. */
+function TextSwap({ children, transition = "fade-through", direction = "forward", stagger, delay = 0, appear = false, as = "span", className, style, ref, ...props }) {
+	const text = String(children);
+	const spec = TRANSITIONS[transition];
+	const step = stagger ?? spec.stagger;
+	const [state, setState] = useState(() => ({
+		current: {
+			key: 0,
+			text,
+			mode: appear ? "enter" : "static",
+			wait: 0
+		},
+		leaving: null
+	}));
+	let { current, leaving } = state;
+	if (text !== current.text) {
+		if (leaving && spec.exit) current = {
+			...current,
+			text
+		};
+		else {
+			leaving = spec.exit ? current : null;
+			const wait = spec.exit ? exitLength(spec, current.text, step) : 0;
+			current = {
+				key: current.key + 1,
+				text,
+				mode: "enter",
+				wait
+			};
+		}
+		setState({
+			current,
+			leaving
+		});
+	}
+	const [inView, setInView] = useState(appear !== "in-view");
+	const node = useRef(null);
+	useEffect(() => {
+		if (inView) return;
+		const element = node.current;
+		if (typeof IntersectionObserver === "undefined" || !element) {
+			setInView(true);
+			return;
+		}
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				setInView(true);
+				observer.disconnect();
+			}
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [inView]);
+	const leavingKey = leaving?.key;
+	const leavingText = leaving?.text ?? "";
+	const removeLeaving = useCallback((key) => {
+		setState((previous) => previous.leaving?.key === key ? {
+			...previous,
+			leaving: null
+		} : previous);
+	}, []);
+	useEffect(() => {
+		const element = node.current;
+		if (!element || leavingKey === void 0) return;
+		const onEnd = (event) => {
+			const target = event.target;
+			if (!target.hasAttribute("data-swap-last")) return;
+			if (target.closest("[data-slot=\"text-swap-layer\"]")?.getAttribute("data-state") !== "exit") return;
+			removeLeaving(leavingKey);
+		};
+		element.addEventListener("animationend", onEnd);
+		return () => element.removeEventListener("animationend", onEnd);
+	}, [leavingKey, removeLeaving]);
+	useEffect(() => {
+		if (leavingKey === void 0) return;
+		const timer = setTimeout(() => removeLeaving(leavingKey), exitLength(spec, leavingText, step) * 2 + 100);
+		return () => clearTimeout(timer);
+	}, [
+		leavingKey,
+		leavingText,
+		spec,
+		step,
+		removeLeaving
+	]);
+	const setRef = useCallback((element) => {
+		node.current = element;
+		if (typeof ref === "function") return ref(element);
+		if (ref) ref.current = element;
+	}, [ref]);
+	const paused = !inView;
+	function renderLayer(layer, phase) {
+		const exiting = phase === "exit";
+		const active = exiting ? spec.exit : layer.mode === "enter" ? spec.enter : null;
+		const base = exiting ? 0 : layer.wait + delay;
+		const shared = {
+			"data-slot": "text-swap-layer",
+			"data-state": exiting ? "exit" : layer.mode === "enter" ? "enter" : "idle",
+			"aria-hidden": exiting ? true : void 0
+		};
+		if (!spec.split || !active) return /* @__PURE__ */ jsx("span", {
+			...shared,
+			"data-swap-last": "",
+			style: active ? animation(active, base, paused) : void 0,
+			children: layer.text
+		}, layer.key);
+		const tokens = tokenize(layer.text);
+		const words = tokens.filter((token) => token.trim().length > 0).length;
+		let index = -1;
+		return /* @__PURE__ */ jsxs("span", {
+			...shared,
+			children: [exiting ? null : /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: layer.text
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "text-swap-words",
+				children: tokens.map((token, position) => {
+					if (token.trim().length === 0) return token;
+					index += 1;
+					const order = direction === "backward" ? words - 1 - index : index;
+					const style = {
+						"--i": order,
+						...animation(active, base + order * step, paused)
+					};
+					return /* @__PURE__ */ jsx("span", {
+						"data-slot": "text-swap-word",
+						"data-swap-last": order === words - 1 ? "" : void 0,
+						style,
+						children: token
+					}, position);
+				})
+			})]
+		}, layer.key);
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsxs(as, {
+		ref: setRef,
+		"data-slot": "text-swap",
+		"data-transition": transition,
+		"data-direction": direction,
+		className: cn(textSwapVariants({
+			transition,
+			display: as === "span" ? "inline" : "block"
+		}), className),
+		style: {
+			"--text-swap-dir": direction === "backward" ? -1 : 1,
+			...style
+		},
+		...props,
+		children: [leaving ? renderLayer(leaving, "exit") : null, renderLayer(current, "enter")]
+	})] });
+}
+//#endregion
+export { TextSwap, textSwapTransitionNames, textSwapVariants };
+
+//# sourceMappingURL=text-swap.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-swap.js","names":["Tag"],"sources":["../../../src/components/text-swap/text-swap.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Fade Through, Per Word Crossfade, Shared Axis X, Shared Axis Y and Shared Axis Z (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva } from \"class-variance-authority\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * One mechanism for SmoothUI's five phrase transitions (ADR 0014). Each source\n * is a `motion` AnimatePresence in `mode=\"wait\"`: the old phrase finishes\n * leaving before the new one starts arriving. That is two keyframes and a\n * delay, so this is CSS:\n *\n * - Both phrases sit in one grid cell, so the box is as wide as the wider of\n *   the two while they overlap and nothing reflows mid-transition.\n * - The incoming layer is mounted at once, with its entrance delayed by the\n *   exit's length and `fill-mode: both` holding it at its first keyframe\n *   until then. Its last keyframe is the readable one, so under reduced\n *   motion (every duration and delay runs through --motion-scale) the text\n *   simply appears.\n * - The outgoing layer is aria-hidden and removed on its own animationend,\n *   with a timer as a backstop for environments that never fire one.\n * - A change that lands while a phrase is still leaving replaces the pending\n *   incoming text in place: there is never more than one ghost.\n *\n * This is decoration, never an indicator.\n */\n\nconst PREFIX = \"dowel-text-swap\";\n\n/** SmoothUI's Material easings, and Per Word Crossfade's keynote ease-out. */\nconst ENTER_EASE = \"cubic-bezier(0.2, 0, 0, 1)\";\nconst EXIT_EASE = \"cubic-bezier(0.4, 0, 1, 1)\";\nconst KEYNOTE_EASE = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/*\n * --text-swap-dir is 1 forward and -1 backward; --text-swap-inline is -1 in\n * RTL, so \"forward\" on the x axis always means the next phrase arrives from the\n * inline end. `[dir=rtl]` covers browsers without :dir(); :dir() then corrects\n * an LTR island nested inside an RTL page.\n */\nconst STYLES = `\n[data-slot=text-swap]{--text-swap-inline:1;--text-swap-z-in:0.9;--text-swap-z-out:1.06}\n[dir=rtl] [data-slot=text-swap],[data-slot=text-swap][dir=rtl]{--text-swap-inline:-1}\n[data-slot=text-swap]:dir(ltr){--text-swap-inline:1}\n[data-slot=text-swap]:dir(rtl){--text-swap-inline:-1}\n[data-slot=text-swap][data-direction=backward]{--text-swap-z-in:1.06;--text-swap-z-out:0.9}\n[data-slot=text-swap-word]{display:inline-block;white-space:pre}\n@keyframes ${PREFIX}-fade-through-in{from{opacity:0;filter:blur(2px);transform:translateY(calc(6px * var(--text-swap-dir,1))) scale(0.99)}to{opacity:1;filter:blur(0);transform:none}}\n@keyframes ${PREFIX}-fade-through-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(calc(-4px * var(--text-swap-dir,1)))}}\n@keyframes ${PREFIX}-axis-x-in{from{opacity:0;transform:translateX(calc(24px * var(--text-swap-dir,1) * var(--text-swap-inline,1))) scale(0.98)}to{opacity:1;transform:none}}\n@keyframes ${PREFIX}-axis-x-out{from{opacity:1;transform:none}to{opacity:0;transform:translateX(calc(-20px * var(--text-swap-dir,1) * var(--text-swap-inline,1))) scale(0.98)}}\n@keyframes ${PREFIX}-axis-z-in{from{opacity:0;filter:blur(2px);transform:scale(var(--text-swap-z-in,0.9))}to{opacity:1;filter:blur(0);transform:none}}\n@keyframes ${PREFIX}-axis-z-out{from{opacity:1;filter:blur(0);transform:none}to{opacity:0;filter:blur(1px);transform:scale(var(--text-swap-z-out,1.06))}}\n@keyframes ${PREFIX}-cut-in{from{opacity:0}to{opacity:1}}\n@keyframes ${PREFIX}-cut-out{from{opacity:1}to{opacity:0}}\n@keyframes ${PREFIX}-word-in{from{opacity:0;transform:translateY(calc(8px * var(--text-swap-dir,1)))}to{opacity:1;transform:none}}\n`;\n\nexport type TextSwapTransition =\n  \"fade-through\" | \"per-word-crossfade\" | \"shared-axis-x\" | \"shared-axis-y\" | \"shared-axis-z\";\n\ninterface Phase {\n  keyframe: string;\n  /** Milliseconds, before --motion-scale. */\n  ms: number;\n  ease: string;\n}\n\ninterface TransitionSpec {\n  /** Animated word by word rather than as one block. */\n  split: boolean;\n  /** Default per-word stagger in milliseconds (split transitions only). */\n  stagger: number;\n  enter: Phase;\n  /** `null` when the source removes the old text instantly. */\n  exit: Phase | null;\n}\n\n/** Timings copied from each SmoothUI source. */\nconst TRANSITIONS: Record<TextSwapTransition, TransitionSpec> = {\n  // Enter 420ms rising 6px out of a 2px blur; exit 260ms lifting 4px.\n  \"fade-through\": {\n    split: false,\n    stagger: 0,\n    enter: { keyframe: \"fade-through-in\", ms: 420, ease: ENTER_EASE },\n    exit: { keyframe: \"fade-through-out\", ms: 260, ease: EXIT_EASE },\n  },\n  // 700ms per word, 8px drift, 70ms stagger. The source has no exit.\n  \"per-word-crossfade\": {\n    split: true,\n    stagger: 70,\n    enter: { keyframe: \"word-in\", ms: 700, ease: KEYNOTE_EASE },\n    exit: null,\n  },\n  // Enter 500ms from 24px along the inline axis; exit 360ms to -20px.\n  \"shared-axis-x\": {\n    split: false,\n    stagger: 0,\n    enter: { keyframe: \"axis-x-in\", ms: 500, ease: ENTER_EASE },\n    exit: { keyframe: \"axis-x-out\", ms: 360, ease: EXIT_EASE },\n  },\n  // \"Word Cut Staircase\": zero-duration opacity cuts, 78ms apart per word.\n  \"shared-axis-y\": {\n    split: true,\n    stagger: 78,\n    enter: { keyframe: \"cut-in\", ms: 0, ease: \"linear\" },\n    exit: { keyframe: \"cut-out\", ms: 0, ease: \"linear\" },\n  },\n  // Enter 520ms from scale 0.9 and a 2px blur; exit 360ms to 1.06 and 1px.\n  \"shared-axis-z\": {\n    split: false,\n    stagger: 0,\n    enter: { keyframe: \"axis-z-in\", ms: 520, ease: ENTER_EASE },\n    exit: { keyframe: \"axis-z-out\", ms: 360, ease: EXIT_EASE },\n  },\n};\n\n/** The transitions, in source order — for stories, docs and tests. */\nexport const textSwapTransitionNames = Object.keys(TRANSITIONS) as TextSwapTransition[];\n\nconst textSwapVariants = cva(\"[&>*]:col-start-1 [&>*]:row-start-1\", {\n  variants: {\n    transition: {\n      \"fade-through\": \"\",\n      \"per-word-crossfade\": \"\",\n      // The sources clip the travelling and scaling phrases to the box.\n      \"shared-axis-x\": \"overflow-x-clip\",\n      \"shared-axis-y\": \"\",\n      \"shared-axis-z\": \"overflow-clip\",\n    },\n    display: {\n      inline: \"inline-grid\",\n      block: \"grid\",\n    },\n  },\n  defaultVariants: {\n    transition: \"fade-through\",\n    display: \"inline\",\n  },\n});\n\nexport type TextSwapElement = \"span\" | \"div\" | \"p\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n/** Splits text into words and the whitespace between them. */\nfunction tokenize(text: string): string[] {\n  return text.split(/(\\s+)/).filter((token) => token.length > 0);\n}\n\nfunction wordCount(text: string): number {\n  return tokenize(text).filter((token) => token.trim().length > 0).length;\n}\n\n/** How long a phrase takes to leave, in unscaled milliseconds. */\nfunction exitLength(spec: TransitionSpec, text: string, step: number): number {\n  if (!spec.exit) return 0;\n  const stagger = spec.split ? Math.max(0, wordCount(text) - 1) * step : 0;\n  return spec.exit.ms + stagger;\n}\n\nfunction scaled(ms: number): string {\n  return `calc(${String(ms)}ms * var(--motion-scale, 1))`;\n}\n\nfunction animation(phase: Phase, delayMs: number, paused: boolean): CSSProperties {\n  return {\n    animationName: `${PREFIX}-${phase.keyframe}`,\n    animationDuration: scaled(phase.ms),\n    animationTimingFunction: phase.ease,\n    animationDelay: scaled(delayMs),\n    animationFillMode: \"both\",\n    animationPlayState: paused ? \"paused\" : undefined,\n  };\n}\n\ninterface Layer {\n  key: number;\n  text: string;\n  /** `static` is the first render without `appear`: no animation at all. */\n  mode: \"static\" | \"enter\";\n  /** Unscaled milliseconds before the entrance starts (the old phrase's exit). */\n  wait: number;\n}\n\ninterface SwapState {\n  current: Layer;\n  leaving: Layer | null;\n}\n\nexport interface TextSwapProps extends Omit<ComponentPropsWithRef<\"span\">, \"children\" | \"ref\"> {\n  /** The value. Whenever it changes, the old text animates out and the new text in. */\n  children: string | number;\n  /** How the old text leaves and the new text arrives. */\n  transition?: TextSwapTransition;\n  /**\n   * Which way the change moves. `forward` (default) is the sources' motion:\n   * with `shared-axis-x` the next phrase arrives from the inline end (the right\n   * in LTR, the left in RTL); `backward` reverses it on every axis, and runs a\n   * staircase from the last word.\n   */\n  direction?: \"forward\" | \"backward\";\n  /** Milliseconds between words, for the split transitions. Defaults to the source's. */\n  stagger?: number;\n  /** Milliseconds added before every entrance. */\n  delay?: number;\n  /**\n   * Animate the first value in too. `in-view` waits until the element\n   * scrolls into view (SmoothUI's `triggerOnView`). Default `false`: only\n   * changes animate.\n   */\n  appear?: boolean | \"in-view\";\n  /** Rendered element. Block elements lay out as `grid`, inline ones as `inline-grid`. */\n  as?: TextSwapElement;\n  ref?: Ref<HTMLElement>;\n}\n\n/** Text that animates from the old string to the new one whenever it changes. */\nexport function TextSwap({\n  children,\n  transition = \"fade-through\",\n  direction = \"forward\",\n  stagger,\n  delay = 0,\n  appear = false,\n  as = \"span\",\n  className,\n  style,\n  ref,\n  ...props\n}: TextSwapProps) {\n  const text = String(children);\n  const spec = TRANSITIONS[transition];\n  const step = stagger ?? spec.stagger;\n\n  const [state, setState] = useState<SwapState>(() => ({\n    current: { key: 0, text, mode: appear ? \"enter\" : \"static\", wait: 0 },\n    leaving: null,\n  }));\n\n  // Derive the next layers during render, so the new value is never painted\n  // for a frame without its transition.\n  let { current, leaving } = state;\n  if (text !== current.text) {\n    if (leaving && spec.exit) {\n      // Still leaving: the pending phrase has not started yet, so swap it.\n      current = { ...current, text };\n    } else {\n      leaving = spec.exit ? current : null;\n      const wait = spec.exit ? exitLength(spec, current.text, step) : 0;\n      current = { key: current.key + 1, text, mode: \"enter\", wait };\n    }\n    setState({ current, leaving });\n  }\n\n  const [inView, setInView] = useState(appear !== \"in-view\");\n  const node = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (inView) return;\n    const element = node.current;\n    if (typeof IntersectionObserver === \"undefined\" || !element) {\n      // Nothing can tell us when it is visible: show it rather than hide it.\n      setInView(true);\n      return;\n    }\n    const observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setInView(true);\n        observer.disconnect();\n      }\n    });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [inView]);\n\n  const leavingKey = leaving?.key;\n  const leavingText = leaving?.text ?? \"\";\n  const removeLeaving = useCallback((key: number) => {\n    setState((previous) =>\n      previous.leaving?.key === key ? { ...previous, leaving: null } : previous,\n    );\n  }, []);\n\n  // A native listener rather than onAnimationEnd: React picks a vendor-prefixed\n  // event name wherever AnimationEvent is missing, and would never hear it.\n  useEffect(() => {\n    const element = node.current;\n    if (!element || leavingKey === undefined) return;\n    const onEnd = (event: Event) => {\n      const target = event.target as Element;\n      if (!target.hasAttribute(\"data-swap-last\")) return;\n      if (\n        target.closest('[data-slot=\"text-swap-layer\"]')?.getAttribute(\"data-state\") !== \"exit\"\n      )\n        return;\n      removeLeaving(leavingKey);\n    };\n    element.addEventListener(\"animationend\", onEnd);\n    return () => element.removeEventListener(\"animationend\", onEnd);\n  }, [leavingKey, removeLeaving]);\n\n  // Backstop for environments that never fire animationend.\n  useEffect(() => {\n    if (leavingKey === undefined) return;\n    const timer = setTimeout(\n      () => removeLeaving(leavingKey),\n      exitLength(spec, leavingText, step) * 2 + 100,\n    );\n    return () => clearTimeout(timer);\n  }, [leavingKey, leavingText, spec, step, removeLeaving]);\n\n  const setRef = useCallback(\n    (element: HTMLElement | null) => {\n      node.current = element;\n      if (typeof ref === \"function\") return ref(element);\n      if (ref) ref.current = element;\n    },\n    [ref],\n  );\n\n  const paused = !inView;\n\n  function renderLayer(layer: Layer, phase: \"enter\" | \"exit\"): ReactNode {\n    const exiting = phase === \"exit\";\n    const active = exiting ? spec.exit : layer.mode === \"enter\" ? spec.enter : null;\n    const base = exiting ? 0 : layer.wait + delay;\n\n    const shared = {\n      \"data-slot\": \"text-swap-layer\",\n      \"data-state\": exiting ? \"exit\" : layer.mode === \"enter\" ? \"enter\" : \"idle\",\n      \"aria-hidden\": exiting ? true : undefined,\n    } as const;\n\n    if (!spec.split || !active) {\n      return (\n        <span\n          key={layer.key}\n          {...shared}\n          data-swap-last=\"\"\n          style={active ? animation(active, base, paused) : undefined}\n        >\n          {layer.text}\n        </span>\n      );\n    }\n\n    const tokens = tokenize(layer.text);\n    const words = tokens.filter((token) => token.trim().length > 0).length;\n    let index = -1;\n    return (\n      <span key={layer.key} {...shared}>\n        {exiting ? null : <span className=\"sr-only\">{layer.text}</span>}\n        <span aria-hidden=\"true\" data-slot=\"text-swap-words\">\n          {tokens.map((token, position) => {\n            if (token.trim().length === 0) return token;\n            index += 1;\n            const order = direction === \"backward\" ? words - 1 - index : index;\n            const style: CSSProperties & Record<\"--i\", number> = {\n              \"--i\": order,\n              ...animation(active, base + order * step, paused),\n            };\n            return (\n              <span\n                key={position}\n                data-slot=\"text-swap-word\"\n                data-swap-last={order === words - 1 ? \"\" : undefined}\n                style={style}\n              >\n                {token}\n              </span>\n            );\n          })}\n        </span>\n      </span>\n    );\n  }\n\n  const Tag = as as \"span\";\n  const display = as === \"span\" ? \"inline\" : \"block\";\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <Tag\n        ref={setRef}\n        data-slot=\"text-swap\"\n        data-transition={transition}\n        data-direction={direction}\n        className={cn(textSwapVariants({ transition, display }), className)}\n        style={\n          { \"--text-swap-dir\": direction === \"backward\" ? -1 : 1, ...style } as CSSProperties\n        }\n        {...props}\n      >\n        {leaving ? renderLayer(leaving, \"exit\") : null}\n        {renderLayer(current, \"enter\")}\n      </Tag>\n    </>\n  );\n}\n\nexport { textSwapVariants };\n"],"mappings":"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"}

package/dist/components/textarea/index.d.ts

@@ -0,0 +1,2 @@
+import { Textarea, TextareaProps, textareaVariants } from "./textarea.js";
+export { Textarea, type TextareaProps, textareaVariants };

package/dist/components/textarea/index.js

@@ -0,0 +1,2 @@
+import { Textarea, textareaVariants } from "./textarea.js";
+export { Textarea, textareaVariants };

package/dist/components/textarea/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/textarea/meta.ts
+const meta = defineMeta({
+	name: "textarea",
+	title: "Textarea",
+	description: "A multi-line text field, with optional auto-resize and a character count that knows when to stay quiet.",
+	category: "form",
+	status: "stable",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["textarea.tsx"],
+	a11y: "Pair with a Label via htmlFor/id. The error state is driven by aria-invalid, so assistive technology and styling stay in sync. The character count is described by the field rather than announced on every keystroke — a permanently live counter reads the remaining number between every letter typed, which is unusable — so it goes live only once the limit is close, and states the remainder in words rather than as a bare ratio that is read aloud as two unlabelled numbers. Horizontal resizing is off by default, because a field dragged wider than its container is a broken layout."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/textarea/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/textarea/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"textarea\",\n  title: \"Textarea\",\n  description:\n    \"A multi-line text field, with optional auto-resize and a character count that knows when to stay quiet.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"textarea.tsx\"],\n  a11y:\n    \"Pair with a Label via htmlFor/id. The error state is driven by aria-invalid, so assistive \" +\n    \"technology and styling stay in sync. The character count is described by the field rather \" +\n    \"than announced on every keystroke — a permanently live counter reads the remaining number \" +\n    \"between every letter typed, which is unusable — so it goes live only once the limit is \" +\n    \"close, and states the remainder in words rather than as a bare ratio that is read aloud as \" +\n    \"two unlabelled numbers. Horizontal resizing is off by default, because a field dragged \" +\n    \"wider than its container is a broken layout.\",\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,cAAc;CACtB,MACE;AAOJ,CAAC"}