react-marketing-ui 0.0.2 → 0.0.4

package/dist/dia-text-reveal.mjs

@@ -1,4 +1,333 @@
-export { DiaTextReveal } from './chunk-YKGP5JIL.mjs';
-import './chunk-QAWSH567.mjs';
+"use client";
+import { useReducedMotion, useInView, motion } from 'framer-motion';
+import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function HeightClipper({ height, delay, children }) {
+  return /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "block w-full overflow-hidden",
+      animate: height === void 0 ? {} : { height },
+      transition: {
+        height: { duration: 0.4, ease: [0.4, 0, 0.2, 1], delay }
+      },
+      children
+    }
+  );
+}
+function ExitingLine({ text, textColor, duration, fallDuration, opacityEase, wrap = false, onDone }) {
+  return /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      "aria-hidden": true,
+      className: cn(
+        wrap ? "pointer-events-none absolute top-0 left-0 w-full" : "pointer-events-none absolute top-0 left-1/2 whitespace-nowrap"
+      ),
+      style: { color: textColor },
+      initial: wrap ? { opacity: 1, y: 0 } : { opacity: 1, x: "-50%", y: 0 },
+      animate: wrap ? { opacity: 0, y: 14 } : { opacity: 0, x: "-50%", y: 14 },
+      transition: {
+        opacity: { duration, ease: opacityEase },
+        y: { duration: fallDuration, ease: [0.22, 0.61, 0.36, 1] }
+      },
+      onAnimationComplete: onDone,
+      children: text
+    }
+  );
+}
+function WidthReservation({ texts }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "invisible block h-0 overflow-hidden", children: texts.map((t) => /* @__PURE__ */ jsx("span", { className: "block", children: t }, t)) });
+}
+
+// src/components/dia-text-reveal.sweep.ts
+var BAND_HALF = 17;
+var SWEEP_START = -BAND_HALF;
+var SWEEP_END = 100 + BAND_HALF;
+var sweepEaseFn = (t) => t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2;
+var coverageAt = (progress) => Math.min(1, sweepEaseFn(progress) * (SWEEP_END - SWEEP_START) / 100);
+var COVERAGE_SPAN = (() => {
+  let lo = 0;
+  let hi = 1;
+  for (let i = 0; i < 40; i += 1) {
+    const mid = (lo + hi) / 2;
+    if (coverageAt(mid) < 1) lo = mid;
+    else hi = mid;
+  }
+  return hi;
+})();
+var EXIT_FADE_BIAS = 0.4;
+var exitEase = (t) => coverageAt(t * COVERAGE_SPAN) ** EXIT_FADE_BIAS;
+var makeExitEase = (leadFraction) => {
+  if (leadFraction <= 0) return exitEase;
+  if (leadFraction >= 1) return () => 0;
+  return (t) => t <= leadFraction ? 0 : exitEase((t - leadFraction) / (1 - leadFraction));
+};
+var SWEEP_SCALE = 3;
+var BAND_HALF_IMAGE = BAND_HALF / SWEEP_SCALE;
+var positionFor = (pos) => (pos - 50 * SWEEP_SCALE) / (1 - SWEEP_SCALE);
+var SWEEP_FROM = `${positionFor(SWEEP_START).toFixed(3)}%`;
+var SWEEP_TO = `${positionFor(SWEEP_END).toFixed(3)}%`;
+var SWEEP_SIZE = `${SWEEP_SCALE * 100}% 100%`;
+var EASE_SAMPLES = 24;
+var sweepEaseCss = `linear(${Array.from({ length: EASE_SAMPLES + 1 }, (_, i) => sweepEaseFn(i / EASE_SAMPLES).toFixed(5)).join(
+  ", "
+)})`;
+function buildSweepGradient(colors, textColor) {
+  const bandStart = 50 - BAND_HALF_IMAGE;
+  const bandEnd = 50 + BAND_HALF_IMAGE;
+  const n = colors.length;
+  const parts = [`${textColor} 0%`, `${textColor} ${bandStart.toFixed(3)}%`];
+  for (const [i, c] of colors.entries()) {
+    const pct = n === 1 ? 50 : bandStart + i / (n - 1) * BAND_HALF_IMAGE * 2;
+    parts.push(`${c} ${pct.toFixed(3)}%`);
+  }
+  parts.push(`transparent ${bandEnd.toFixed(3)}%`, "transparent 100%");
+  return `linear-gradient(90deg, ${parts.join(", ")})`;
+}
+function buildSweepStyle({ colors, textColor, duration, delay, sweep, paused, reduced }) {
+  return {
+    color: "transparent",
+    backgroundClip: "text",
+    WebkitBackgroundClip: "text",
+    backgroundImage: buildSweepGradient(colors, textColor),
+    backgroundRepeat: "no-repeat",
+    backgroundSize: SWEEP_SIZE,
+    backgroundPositionX: reduced ? SWEEP_TO : SWEEP_FROM,
+    "--dia-sweep-from": SWEEP_FROM,
+    "--dia-sweep-to": SWEEP_TO,
+    ...sweep !== null && !reduced && {
+      animationName: sweep.cycle % 2 === 0 ? "dia-sweep-a" : "dia-sweep-b",
+      animationDuration: `${duration}s`,
+      animationDelay: `${delay}s`,
+      animationTimingFunction: sweepEaseCss,
+      animationFillMode: "both",
+      animationIterationCount: 1,
+      animationPlayState: paused ? "paused" : "running"
+    }
+  };
+}
+
+// src/components/dia-text-reveal.utils.ts
+function measureWidths(el, texts) {
+  const parent = el.parentElement;
+  if (!parent) return texts.map(() => 0);
+  const ghost = el.cloneNode();
+  if (!(ghost instanceof HTMLElement)) return texts.map(() => 0);
+  Object.assign(ghost.style, {
+    position: "absolute",
+    visibility: "hidden",
+    pointerEvents: "none",
+    width: "auto",
+    whiteSpace: "nowrap"
+  });
+  parent.appendChild(ghost);
+  const widths = texts.map((t) => {
+    ghost.textContent = t;
+    return ghost.getBoundingClientRect().width;
+  });
+  ghost.remove();
+  return widths;
+}
+var DEFAULT_COLORS = ["#c679c4", "#fa3d1d", "#ffb005", "#e1e1fe", "#0358f7"];
+var EXIT_LEAD_RATIO = 0.3;
+function DiaTextReveal({
+  text,
+  colors = DEFAULT_COLORS,
+  textColor = "var(--color-foreground)",
+  duration = 1,
+  delay = 0,
+  repeat = false,
+  repeatDelay = 0.5,
+  exitDuration,
+  exitLead,
+  startOnView = true,
+  start = true,
+  once = true,
+  className,
+  fixedWidth = false,
+  wrap = false,
+  ...props
+}) {
+  const texts = Array.isArray(text) ? text : [text];
+  const isMulti = texts.length > 1;
+  const prefersReducedMotion = useReducedMotion();
+  const exitSpan = exitDuration ?? duration * COVERAGE_SPAN;
+  const lead = Math.max(0, exitLead ?? duration * EXIT_LEAD_RATIO);
+  const exitTotal = lead + exitSpan;
+  const leadFraction = exitTotal > 0 ? lead / exitTotal : 0;
+  const exitOpacityEase = useMemo(() => makeExitEase(leadFraction), [leadFraction]);
+  const spanRef = useRef(null);
+  const optsRef = useRef({ repeat, repeatDelay, texts });
+  optsRef.current = { repeat, repeatDelay, texts };
+  const indexRef = useRef(0);
+  const hasPlayedRef = useRef(false);
+  const timerRef = useRef(void 0);
+  const pendingRepeatRef = useRef(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [sweep, setSweep] = useState(null);
+  const [exiting, setExiting] = useState(null);
+  const clearExiting = useCallback(() => setExiting(null), []);
+  const [measuredWidths, setMeasuredWidths] = useState([]);
+  const [wrapHeight, setWrapHeight] = useState(null);
+  const innerRef = useRef(null);
+  const isInView = useInView(spanRef, { once, amount: 0.1 });
+  const isLiveInView = useInView(spanRef, {
+    once: false,
+    amount: 0.1
+  });
+  useEffect(() => {
+    const el = spanRef.current;
+    if (!(el && isMulti) || wrap) return;
+    const measure = () => setMeasuredWidths(measureWidths(el, texts));
+    measure();
+    if (document.fonts.status !== "loaded") document.fonts.ready.then(measure);
+  }, [Array.isArray(text) ? text.join("\0") : text, isMulti, wrap, texts]);
+  useEffect(() => {
+    const el = innerRef.current;
+    if (!(el && wrap && isMulti)) return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      const h = entry.contentRect.height;
+      setWrapHeight(
+        (prev) => prev !== null && prev.h === h ? prev : {
+          h,
+          shrink: prev !== null && h < prev.h
+        }
+      );
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [wrap, isMulti]);
+  const advance = useCallback(() => {
+    const opts = optsRef.current;
+    const current = indexRef.current;
+    const next = (current + 1) % opts.texts.length;
+    indexRef.current = next;
+    setExiting({ index: current, token: Date.now() });
+    setActiveIndex(next);
+    setSweep((prev) => ({
+      cycle: (prev?.cycle ?? 0) + 1,
+      lead: true
+    }));
+  }, []);
+  const scheduleRepeat = useCallback(() => {
+    timerRef.current = setTimeout(() => {
+      timerRef.current = void 0;
+      advance();
+    }, optsRef.current.repeatDelay * 1e3);
+  }, [advance]);
+  const onSweepEnd = useCallback(
+    (event) => {
+      if (!event.animationName.startsWith("dia-sweep")) return;
+      if (!optsRef.current.repeat) return;
+      scheduleRepeat();
+    },
+    [scheduleRepeat]
+  );
+  useEffect(() => {
+    if (prefersReducedMotion) return;
+    if (startOnView && !isInView) return;
+    if (!start) return;
+    if (once && hasPlayedRef.current) return;
+    hasPlayedRef.current = true;
+    setSweep((prev) => prev === null ? { cycle: 0, lead: false } : { cycle: prev.cycle + 1, lead: false });
+  }, [isInView, start, startOnView, once, prefersReducedMotion]);
+  useEffect(() => {
+    if (!repeat || prefersReducedMotion) return;
+    if (!isLiveInView) {
+      if (timerRef.current === void 0) return;
+      clearTimeout(timerRef.current);
+      timerRef.current = void 0;
+      pendingRepeatRef.current = true;
+    } else if (pendingRepeatRef.current) {
+      pendingRepeatRef.current = false;
+      scheduleRepeat();
+    }
+  }, [isLiveInView, repeat, prefersReducedMotion, scheduleRepeat]);
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  const paused = repeat && sweep !== null && !isLiveInView;
+  const revealStyle = buildSweepStyle({
+    colors,
+    textColor,
+    duration,
+    delay: delay + (sweep?.lead ? lead : 0),
+    sweep,
+    paused,
+    reduced: prefersReducedMotion === true
+  });
+  if (!isMulti)
+    return /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        ref: spanRef,
+        className: cn("align-baseline text-inherit leading-[100%]", className),
+        style: revealStyle,
+        ...props,
+        onAnimationEnd: onSweepEnd,
+        children: texts[activeIndex]
+      }
+    );
+  const fixedW = !wrap && fixedWidth && measuredWidths.length > 0 ? Math.max(...measuredWidths) : void 0;
+  const animatedW = wrap || fixedWidth ? void 0 : measuredWidths[activeIndex];
+  const animatedH = wrap ? wrapHeight?.h : void 0;
+  const heightDelay = exiting !== null && wrapHeight?.shrink ? exitTotal : 0;
+  const incoming = /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: innerRef,
+      className: cn("inline-block", wrap && "w-full", !wrap && "whitespace-nowrap"),
+      style: revealStyle,
+      onAnimationEnd: onSweepEnd,
+      children: texts[activeIndex]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    motion.span,
+    {
+      ref: spanRef,
+      className: cn(
+        wrap ? "relative inline-block w-full text-center align-baseline text-inherit" : "relative inline-block whitespace-nowrap text-center align-baseline text-inherit leading-[100%]",
+        className
+      ),
+      style: {
+        ...fixedW !== void 0 && { width: fixedW }
+      },
+      animate: {
+        ...animatedW !== void 0 && { width: animatedW }
+      },
+      transition: {
+        width: { duration: 0.4, ease: [0.4, 0, 0.2, 1] }
+      },
+      ...props,
+      children: [
+        wrap ? /* @__PURE__ */ jsxs(HeightClipper, { height: animatedH, delay: heightDelay, children: [
+          /* @__PURE__ */ jsx(WidthReservation, { texts }),
+          incoming
+        ] }) : incoming,
+        exiting && !prefersReducedMotion && /* @__PURE__ */ jsx(
+          ExitingLine,
+          {
+            text: texts[exiting.index],
+            textColor,
+            duration: 0.4,
+            fallDuration: 0.25,
+            opacityEase: exitOpacityEase,
+            wrap,
+            onDone: clearExiting
+          },
+          exiting.token
+        )
+      ]
+    }
+  );
+}
+
+export { DiaTextReveal };
 //# sourceMappingURL=dia-text-reveal.mjs.map
 //# sourceMappingURL=dia-text-reveal.mjs.map

package/dist/dia-text-reveal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"dia-text-reveal.mjs"}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/dia-text-reveal.lines.tsx","../src/components/dia-text-reveal.sweep.ts","../src/components/dia-text-reveal.utils.ts","../src/components/dia-text-reveal.tsx"],"names":["jsx","motion"],"mappings":"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","file":"dia-text-reveal.mjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","'use client';\n\nimport { motion } from 'framer-motion';\nimport type { ReactNode } from 'react';\n\nimport { cn } from '../lib/utils.js';\n\ntype ExitingLineProps = {\n  text: string;\n  textColor: string;\n  duration: number;\n  fallDuration: number;\n  opacityEase: (t: number) => number;\n  wrap?: boolean;\n  onDone: () => void;\n};\n\ntype HeightClipperProps = {\n  height?: number;\n  delay: number;\n  children: ReactNode;\n};\n\ntype WidthReservationProps = { texts: string[] };\n\nexport function HeightClipper({ height, delay, children }: HeightClipperProps) {\n  return (\n    <motion.span\n      className=\"block w-full overflow-hidden\"\n      animate={height === undefined ? {} : { height }}\n      transition={{\n        height: { duration: 0.4, ease: [0.4, 0, 0.2, 1], delay },\n      }}\n    >\n      {children}\n    </motion.span>\n  );\n}\n\nexport function ExitingLine({ text, textColor, duration, fallDuration, opacityEase, wrap = false, onDone }: ExitingLineProps) {\n  return (\n    <motion.span\n      aria-hidden={true}\n      className={cn(\n        wrap\n          ? 'pointer-events-none absolute top-0 left-0 w-full'\n          : 'pointer-events-none absolute top-0 left-1/2 whitespace-nowrap',\n      )}\n      style={{ color: textColor }}\n      initial={wrap ? { opacity: 1, y: 0 } : { opacity: 1, x: '-50%', y: 0 }}\n      animate={wrap ? { opacity: 0, y: 14 } : { opacity: 0, x: '-50%', y: 14 }}\n      transition={{\n        opacity: { duration, ease: opacityEase },\n        y: { duration: fallDuration, ease: [0.22, 0.61, 0.36, 1] },\n      }}\n      onAnimationComplete={onDone}\n    >\n      {text}\n    </motion.span>\n  );\n}\n\nexport function WidthReservation({ texts }: WidthReservationProps) {\n  return (\n    <span aria-hidden={true} className=\"invisible block h-0 overflow-hidden\">\n      {texts.map((t) => (\n        <span key={t} className=\"block\">\n          {t}\n        </span>\n      ))}\n    </span>\n  );\n}\n","/**\n * The moving gradient band that paints DiaTextReveal's glyphs, and the coverage math that\n * lets the outgoing line's fade track it exactly.\n *\n * The band moves by *sliding a static gradient*, not by rebuilding one per frame. Rebuilding\n * meant a JS callback, a style recalc, a fresh gradient rasterization and a\n * `background-clip: text` repaint on every frame — all main-thread-only work, so the sweep\n * stalled whenever the thread was contended (scrolling, WebGL render loops, React commits).\n * A fixed image offset by a CSS animation needs no script at all and lets the browser cache\n * the raster, which is what keeps the sweep moving while the page is being scrolled.\n */\n\nimport type { CSSProperties } from 'react';\n\n/** Half-width of the colour band, in percent of the line. */\nconst BAND_HALF = 17;\n/** Band centre at the start of a sweep — fully left of the line, so nothing is painted. */\nconst SWEEP_START = -BAND_HALF;\n/** Band centre at the end of a sweep — fully right of the line, so everything is painted. */\nconst SWEEP_END = 100 + BAND_HALF;\n\n/** Cubic in-out: the band accelerates in, then eases out. */\nconst sweepEaseFn = (t: number) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);\n\n/**\n * Fraction of the line the sweep has painted at `progress` (0–1 of the sweep's duration).\n */\nconst coverageAt = (progress: number) => Math.min(1, (sweepEaseFn(progress) * (SWEEP_END - SWEEP_START)) / 100);\n\n/**\n * Point in the sweep (0–1) at which the whole line is painted.\n */\nconst COVERAGE_SPAN = (() => {\n  let lo = 0;\n  let hi = 1;\n  for (let i = 0; i < 40; i += 1) {\n    const mid = (lo + hi) / 2;\n    if (coverageAt(mid) < 1) lo = mid;\n    else hi = mid;\n  }\n  return hi;\n})();\n\nconst EXIT_FADE_BIAS = 0.4;\n\n/** Easing for the outgoing line's fade, tracking how much of the incoming line is painted. */\nconst exitEase = (t: number) => coverageAt(t * COVERAGE_SPAN) ** EXIT_FADE_BIAS;\n\nconst makeExitEase = (leadFraction: number) => {\n  if (leadFraction <= 0) return exitEase;\n  if (leadFraction >= 1) return () => 0;\n  return (t: number) => (t <= leadFraction ? 0 : exitEase((t - leadFraction) / (1 - leadFraction)));\n};\n\n/* ── Sliding-gradient geometry ───────────────────────────────────────── */\n\nconst SWEEP_SCALE = 3;\nconst BAND_HALF_IMAGE = BAND_HALF / SWEEP_SCALE;\n\nconst positionFor = (pos: number) => (pos - 50 * SWEEP_SCALE) / (1 - SWEEP_SCALE);\n\n/** Position holding the band fully left of the line — nothing painted. */\nconst SWEEP_FROM = `${positionFor(SWEEP_START).toFixed(3)}%`;\n/** Position holding the band fully right of the line — everything painted. */\nconst SWEEP_TO = `${positionFor(SWEEP_END).toFixed(3)}%`;\n/** `background-size` for the oversized image the animation slides. */\nconst SWEEP_SIZE = `${SWEEP_SCALE * 100}% 100%`;\n\nconst EASE_SAMPLES = 24;\nconst sweepEaseCss = `linear(${Array.from({ length: EASE_SAMPLES + 1 }, (_, i) => sweepEaseFn(i / EASE_SAMPLES).toFixed(5)).join(\n  ', ',\n)})`;\n\nfunction buildSweepGradient(colors: string[], textColor: string) {\n  const bandStart = 50 - BAND_HALF_IMAGE;\n  const bandEnd = 50 + BAND_HALF_IMAGE;\n  const n = colors.length;\n\n  const parts: string[] = [`${textColor} 0%`, `${textColor} ${bandStart.toFixed(3)}%`];\n  for (const [i, c] of colors.entries()) {\n    const pct = n === 1 ? 50 : bandStart + (i / (n - 1)) * BAND_HALF_IMAGE * 2;\n    parts.push(`${c} ${pct.toFixed(3)}%`);\n  }\n  parts.push(`transparent ${bandEnd.toFixed(3)}%`, 'transparent 100%');\n\n  return `linear-gradient(90deg, ${parts.join(', ')})`;\n}\n\nexport type Sweep = { cycle: number; lead: boolean } | null;\n\ntype SweepStyleArgs = {\n  colors: string[];\n  textColor: string;\n  duration: number;\n  delay: number;\n  sweep: Sweep;\n  paused: boolean;\n  reduced: boolean;\n};\n\nfunction buildSweepStyle({ colors, textColor, duration, delay, sweep, paused, reduced }: SweepStyleArgs) {\n  return {\n    color: 'transparent',\n    backgroundClip: 'text',\n    WebkitBackgroundClip: 'text',\n    backgroundImage: buildSweepGradient(colors, textColor),\n    backgroundRepeat: 'no-repeat',\n    backgroundSize: SWEEP_SIZE,\n    backgroundPositionX: reduced ? SWEEP_TO : SWEEP_FROM,\n    '--dia-sweep-from': SWEEP_FROM,\n    '--dia-sweep-to': SWEEP_TO,\n    ...(sweep !== null &&\n      !reduced && {\n        animationName: sweep.cycle % 2 === 0 ? 'dia-sweep-a' : 'dia-sweep-b',\n        animationDuration: `${duration}s`,\n        animationDelay: `${delay}s`,\n        animationTimingFunction: sweepEaseCss,\n        animationFillMode: 'both',\n        animationIterationCount: 1,\n        animationPlayState: paused ? 'paused' : 'running',\n      }),\n  } satisfies CSSProperties & Record<`--${string}`, string>;\n}\n\nexport { buildSweepStyle, COVERAGE_SPAN, makeExitEase };\n","/** Measures the single-line (nowrap) rendered width of each text string. */\nexport function measureWidths(el: HTMLElement, texts: string[]) {\n  const parent = el.parentElement;\n  if (!parent) return texts.map(() => 0);\n\n  const ghost = el.cloneNode();\n  if (!(ghost instanceof HTMLElement)) return texts.map(() => 0);\n\n  Object.assign(ghost.style, {\n    position: 'absolute',\n    visibility: 'hidden',\n    pointerEvents: 'none',\n    width: 'auto',\n    whiteSpace: 'nowrap',\n  });\n  parent.appendChild(ghost);\n  const widths = texts.map((t) => {\n    ghost.textContent = t;\n    return ghost.getBoundingClientRect().width;\n  });\n  ghost.remove();\n  return widths;\n}\n","'use client';\n\nimport { motion, useInView, useReducedMotion } from 'framer-motion';\nimport type { AnimationEvent, ComponentPropsWithoutRef } from 'react';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { cn } from '../lib/utils.js';\n\nimport { ExitingLine, HeightClipper, WidthReservation } from './dia-text-reveal.lines.js';\nimport { buildSweepStyle, COVERAGE_SPAN, makeExitEase, type Sweep } from './dia-text-reveal.sweep.js';\nimport { measureWidths } from './dia-text-reveal.utils.js';\nimport './dia-text-reveal.css';\n\nconst DEFAULT_COLORS = ['#c679c4', '#fa3d1d', '#ffb005', '#e1e1fe', '#0358f7'];\n\nconst EXIT_LEAD_RATIO = 0.3;\n\nexport interface DiaTextRevealProps\n  extends Omit<ComponentPropsWithoutRef<typeof motion.span>, 'ref' | 'children' | 'style' | 'animate' | 'transition' | 'color'> {\n  /** Text to reveal. Pass multiple strings to rotate when `repeat` is `true`. */\n  text: string | string[];\n  /** Colors sampled across the moving gradient band. */\n  colors?: string[];\n  /** CSS color for revealed text after the sweep. @defaultValue `\"var(--color-foreground)\"` */\n  textColor?: string;\n  /** Duration of one sweep pass, in seconds. @defaultValue `1` */\n  duration?: number;\n  /** Delay before the sweep starts, in seconds. @defaultValue `0` */\n  delay?: number;\n  /** When `text` is an array, replay the sweep and advance to the next string after each completion. */\n  repeat?: boolean;\n  /** Pause between cycles when `repeat` is `true`, in seconds. @defaultValue `0.5` */\n  repeatDelay?: number;\n  /** How long the outgoing line takes to fade/slide away, in seconds. @defaultValue the sweep's coverage window */\n  exitDuration?: number;\n  /** Head start given to the outgoing line, in seconds. @defaultValue `0.15 * duration` */\n  exitLead?: number;\n  /** If `true`, the animation starts only after the element enters the viewport. @defaultValue `true` */\n  startOnView?: boolean;\n  /** External gate: while `false`, the sweep is held at its start. @defaultValue `true` */\n  start?: boolean;\n  /** Passed to `useInView`: if `true`, in-view detection fires at most once. @defaultValue `true` */\n  once?: boolean;\n  /** Additional class names for the animated `span`. */\n  className?: string;\n  /** When `text` has multiple entries, use the widest string's width for layout. @defaultValue `false` */\n  fixedWidth?: boolean;\n  /** Allow the text to wrap onto multiple lines. @defaultValue `false` */\n  wrap?: boolean;\n}\n\nexport function DiaTextReveal({\n  text,\n  colors = DEFAULT_COLORS,\n  textColor = 'var(--color-foreground)',\n  duration = 1,\n  delay = 0,\n  repeat = false,\n  repeatDelay = 0.5,\n  exitDuration,\n  exitLead,\n  startOnView = true,\n  start = true,\n  once = true,\n  className,\n  fixedWidth = false,\n  wrap = false,\n  ...props\n}: DiaTextRevealProps) {\n  const texts = Array.isArray(text) ? text : [text];\n  const isMulti = texts.length > 1;\n  const prefersReducedMotion = useReducedMotion();\n  const exitSpan = exitDuration ?? duration * COVERAGE_SPAN;\n  const lead = Math.max(0, exitLead ?? duration * EXIT_LEAD_RATIO);\n  const exitTotal = lead + exitSpan;\n  const leadFraction = exitTotal > 0 ? lead / exitTotal : 0;\n  const exitOpacityEase = useMemo(() => makeExitEase(leadFraction), [leadFraction]);\n\n  const spanRef = useRef<HTMLSpanElement>(null);\n  const optsRef = useRef({ repeat, repeatDelay, texts });\n  optsRef.current = { repeat, repeatDelay, texts };\n\n  const indexRef = useRef(0);\n  const hasPlayedRef = useRef(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const pendingRepeatRef = useRef(false);\n\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [sweep, setSweep] = useState<Sweep>(null);\n  const [exiting, setExiting] = useState<{\n    index: number;\n    token: number;\n  } | null>(null);\n  const clearExiting = useCallback(() => setExiting(null), []);\n  const [measuredWidths, setMeasuredWidths] = useState<number[]>([]);\n  const [wrapHeight, setWrapHeight] = useState<{\n    h: number;\n    shrink: boolean;\n  } | null>(null);\n  const innerRef = useRef<HTMLSpanElement>(null);\n\n  const isInView = useInView(spanRef, { once, amount: 0.1 });\n  const isLiveInView = useInView(spanRef, {\n    once: false,\n    amount: 0.1,\n  });\n\n  // biome-ignore lint/plugin: measures live DOM layout (getBoundingClientRect on a ghost clone) — post-render measurement.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: re-measures only when the text content changes; isMulti/texts are derived from the same text prop.\n  useEffect(() => {\n    const el = spanRef.current;\n    if (!(el && isMulti) || wrap) return;\n    const measure = () => setMeasuredWidths(measureWidths(el, texts));\n    measure();\n    if (document.fonts.status !== 'loaded') document.fonts.ready.then(measure);\n  }, [Array.isArray(text) ? text.join('\\0') : text, isMulti, wrap, texts]);\n\n  // biome-ignore lint/plugin: subscribes a ResizeObserver to live DOM layout.\n  useEffect(() => {\n    const el = innerRef.current;\n    if (!(el && wrap && isMulti)) return;\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const h = entry.contentRect.height;\n      setWrapHeight((prev) =>\n        prev !== null && prev.h === h\n          ? prev\n          : {\n              h,\n              shrink: prev !== null && h < prev.h,\n            },\n      );\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [wrap, isMulti]);\n\n  const advance = useCallback(() => {\n    const opts = optsRef.current;\n    const current = indexRef.current;\n    const next = (current + 1) % opts.texts.length;\n    indexRef.current = next;\n    setExiting({ index: current, token: Date.now() });\n    setActiveIndex(next);\n    setSweep((prev) => ({\n      cycle: (prev?.cycle ?? 0) + 1,\n      lead: true,\n    }));\n  }, []);\n\n  const scheduleRepeat = useCallback(() => {\n    timerRef.current = setTimeout(() => {\n      timerRef.current = undefined;\n      advance();\n    }, optsRef.current.repeatDelay * 1000);\n  }, [advance]);\n\n  const onSweepEnd = useCallback(\n    (event: AnimationEvent<HTMLSpanElement>) => {\n      if (!event.animationName.startsWith('dia-sweep')) return;\n      if (!optsRef.current.repeat) return;\n      scheduleRepeat();\n    },\n    [scheduleRepeat],\n  );\n\n  // biome-ignore lint/plugin: flips imperative animation state on a viewport/gate edge.\n  useEffect(() => {\n    if (prefersReducedMotion) return;\n    if (startOnView && !isInView) return;\n    if (!start) return;\n    if (once && hasPlayedRef.current) return;\n    hasPlayedRef.current = true;\n    setSweep((prev) => (prev === null ? { cycle: 0, lead: false } : { cycle: prev.cycle + 1, lead: false }));\n  }, [isInView, start, startOnView, once, prefersReducedMotion]);\n\n  // biome-ignore lint/plugin: pauses/re-arms a pending timer on live viewport presence.\n  useEffect(() => {\n    if (!repeat || prefersReducedMotion) return;\n    if (!isLiveInView) {\n      if (timerRef.current === undefined) return;\n      clearTimeout(timerRef.current);\n      timerRef.current = undefined;\n      pendingRepeatRef.current = true;\n    } else if (pendingRepeatRef.current) {\n      pendingRepeatRef.current = false;\n      scheduleRepeat();\n    }\n  }, [isLiveInView, repeat, prefersReducedMotion, scheduleRepeat]);\n\n  // biome-ignore lint/plugin: releases a pending timer on unmount.\n  useEffect(() => () => clearTimeout(timerRef.current), []);\n\n  const paused = repeat && sweep !== null && !isLiveInView;\n\n  const revealStyle = buildSweepStyle({\n    colors,\n    textColor,\n    duration,\n    delay: delay + (sweep?.lead ? lead : 0),\n    sweep,\n    paused,\n    reduced: prefersReducedMotion === true,\n  });\n\n  if (!isMulti)\n    return (\n      <motion.span\n        ref={spanRef}\n        className={cn('align-baseline text-inherit leading-[100%]', className)}\n        style={revealStyle}\n        {...props}\n        onAnimationEnd={onSweepEnd}\n      >\n        {texts[activeIndex]}\n      </motion.span>\n    );\n\n  const fixedW = !wrap && fixedWidth && measuredWidths.length > 0 ? Math.max(...measuredWidths) : undefined;\n  const animatedW = wrap || fixedWidth ? undefined : measuredWidths[activeIndex];\n  const animatedH = wrap ? wrapHeight?.h : undefined;\n  const heightDelay = exiting !== null && wrapHeight?.shrink ? exitTotal : 0;\n\n  const incoming = (\n    <span\n      ref={innerRef}\n      className={cn('inline-block', wrap && 'w-full', !wrap && 'whitespace-nowrap')}\n      style={revealStyle}\n      onAnimationEnd={onSweepEnd}\n    >\n      {texts[activeIndex]}\n    </span>\n  );\n\n  return (\n    <motion.span\n      ref={spanRef}\n      className={cn(\n        wrap\n          ? 'relative inline-block w-full text-center align-baseline text-inherit'\n          : 'relative inline-block whitespace-nowrap text-center align-baseline text-inherit leading-[100%]',\n        className,\n      )}\n      style={{\n        ...(fixedW !== undefined && { width: fixedW }),\n      }}\n      animate={{\n        ...(animatedW !== undefined && { width: animatedW }),\n      }}\n      transition={{\n        width: { duration: 0.4, ease: [0.4, 0, 0.2, 1] },\n      }}\n      {...props}\n    >\n      {wrap ? (\n        <HeightClipper height={animatedH} delay={heightDelay}>\n          <WidthReservation texts={texts} />\n          {incoming}\n        </HeightClipper>\n      ) : (\n        incoming\n      )}\n\n      {exiting && !prefersReducedMotion && (\n        <ExitingLine\n          key={exiting.token}\n          text={texts[exiting.index]!}\n          textColor={textColor}\n          duration={0.4}\n          fallDuration={0.25}\n          opacityEase={exitOpacityEase}\n          wrap={wrap}\n          onDone={clearExiting}\n        />\n      )}\n    </motion.span>\n  );\n}\n"]}

package/dist/elevated-input.js

@@ -1,10 +1,10 @@
+"use client";
 'use strict';
 
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/lib/utils.ts
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }

package/dist/elevated-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.ts","../src/components/elevated-input.tsx"],"names":["twMerge","clsx","jsx"],"mappings":";;;;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACGO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,GAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEG;AACD,EAAA,uBACEC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA;AAAA,QAET,4CAAA;AAAA;AAAA,QAEA,+EAAA;AAAA;AAAA,QAEA,UAAA;AAAA;AAAA,QAEA,0CAAA;AAAA;AAAA,QAGA,+DAAA;AAAA,QACA,oEAAA;AAAA;AAAA,QAGA,wLAAA;AAAA;AAAA,QAEA,4LAAA;AAAA;AAAA,QAGA,wMAAA;AAAA,QACA,6MAAA;AAAA,QAEA,gCAAA;AAAA,QACA,iDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"elevated-input.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import type { InputHTMLAttributes, RefObject } from 'react';\nimport { cn } from '../lib/utils.js';\n\n/**\n * Physically-recessed input: the inverse read of GlossyButton.\n * The illusion is built entirely from `box-shadow` layers (no wrapper div).\n *\n * Server-renderable: no browser APIs are used.\n */\nexport function ElevatedInput({\n  className,\n  type = 'text',\n  ref,\n  ...props\n}: InputHTMLAttributes<HTMLInputElement> & {\n  ref?: RefObject<HTMLInputElement | null>;\n}) {\n  return (\n    <input\n      ref={ref}\n      type={type}\n      className={cn(\n        // Layout & shape\n        'relative w-full overflow-hidden rounded-lg',\n        // Typography\n        'text-(--color-foreground) text-sm placeholder:text-(--color-muted-foreground)',\n        // Sizing\n        'h-9 px-3',\n        // Reset native input chrome\n        'appearance-none border-none outline-none',\n\n        // Background — a barely-there top darkening that reads as cavity depth.\n        'bg-[linear-gradient(to_bottom,oklch(0_0_0/0.04),transparent)]',\n        'dark:bg-[linear-gradient(to_bottom,oklch(1_0_0/0.04),transparent)]',\n\n        // Shadow stack — light mode\n        'shadow-[inset_0_1px_0_0_oklch(1_0_0/0.08),inset_0_2px_2px_-1px_oklch(0_0_0/0.08),inset_0_4px_4px_-2px_oklch(0_0_0/0.08),0_1px_0_0_oklch(0_0_0/0.12),inset_0_0_0_1px_oklch(0_0_0/0.16)]',\n        // Shadow stack — dark mode\n        'dark:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.1),inset_0_2px_2px_-1px_oklch(0_0_0/0.28),inset_0_4px_4px_-2px_oklch(0_0_0/0.22),0_1px_0_0_oklch(0_0_0/0.36),inset_0_0_0_1px_oklch(1_0_0/0.16)]',\n\n        // Focus\n        'focus-visible:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.08),inset_0_2px_2px_-1px_oklch(0_0_0/0.04),inset_0_4px_4px_-2px_oklch(0_0_0/0.04),0_0_0_3px_oklch(0_0_0/0.08),inset_0_0_0_1.5px_oklch(0_0_0/0.36)]',\n        'dark:focus-visible:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.12),inset_0_2px_2px_-1px_oklch(0_0_0/0.16),inset_0_4px_4px_-2px_oklch(0_0_0/0.12),0_0_0_3px_oklch(1_0_0/0.08),inset_0_0_0_1.5px_oklch(1_0_0/0.28)]',\n\n        'transition-shadow duration-150',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"]}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/elevated-input.tsx"],"names":["twMerge","clsx","jsx"],"mappings":";;;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACGO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,GAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEG;AACD,EAAA,uBACEC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA;AAAA,QAET,4CAAA;AAAA;AAAA,QAEA,+EAAA;AAAA;AAAA,QAEA,UAAA;AAAA;AAAA,QAEA,0CAAA;AAAA;AAAA,QAGA,+DAAA;AAAA,QACA,oEAAA;AAAA;AAAA,QAGA,wLAAA;AAAA;AAAA,QAEA,4LAAA;AAAA;AAAA,QAGA,wMAAA;AAAA,QACA,6MAAA;AAAA,QAEA,gCAAA;AAAA,QACA,iDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"elevated-input.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import type { InputHTMLAttributes, RefObject } from 'react';\nimport { cn } from '../lib/utils.js';\n\n/**\n * Physically-recessed input: the inverse read of GlossyButton.\n * The illusion is built entirely from `box-shadow` layers (no wrapper div).\n *\n * Server-renderable: no browser APIs are used.\n */\nexport function ElevatedInput({\n  className,\n  type = 'text',\n  ref,\n  ...props\n}: InputHTMLAttributes<HTMLInputElement> & {\n  ref?: RefObject<HTMLInputElement | null>;\n}) {\n  return (\n    <input\n      ref={ref}\n      type={type}\n      className={cn(\n        // Layout & shape\n        'relative w-full overflow-hidden rounded-lg',\n        // Typography\n        'text-(--color-foreground) text-sm placeholder:text-(--color-muted-foreground)',\n        // Sizing\n        'h-9 px-3',\n        // Reset native input chrome\n        'appearance-none border-none outline-none',\n\n        // Background — a barely-there top darkening that reads as cavity depth.\n        'bg-[linear-gradient(to_bottom,oklch(0_0_0/0.04),transparent)]',\n        'dark:bg-[linear-gradient(to_bottom,oklch(1_0_0/0.04),transparent)]',\n\n        // Shadow stack — light mode\n        'shadow-[inset_0_1px_0_0_oklch(1_0_0/0.08),inset_0_2px_2px_-1px_oklch(0_0_0/0.08),inset_0_4px_4px_-2px_oklch(0_0_0/0.08),0_1px_0_0_oklch(0_0_0/0.12),inset_0_0_0_1px_oklch(0_0_0/0.16)]',\n        // Shadow stack — dark mode\n        'dark:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.1),inset_0_2px_2px_-1px_oklch(0_0_0/0.28),inset_0_4px_4px_-2px_oklch(0_0_0/0.22),0_1px_0_0_oklch(0_0_0/0.36),inset_0_0_0_1px_oklch(1_0_0/0.16)]',\n\n        // Focus\n        'focus-visible:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.08),inset_0_2px_2px_-1px_oklch(0_0_0/0.04),inset_0_4px_4px_-2px_oklch(0_0_0/0.04),0_0_0_3px_oklch(0_0_0/0.08),inset_0_0_0_1.5px_oklch(0_0_0/0.36)]',\n        'dark:focus-visible:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.12),inset_0_2px_2px_-1px_oklch(0_0_0/0.16),inset_0_4px_4px_-2px_oklch(0_0_0/0.12),0_0_0_3px_oklch(1_0_0/0.08),inset_0_0_0_1.5px_oklch(1_0_0/0.28)]',\n\n        'transition-shadow duration-150',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"]}

package/dist/elevated-input.mjs

@@ -1,4 +1,50 @@
-export { ElevatedInput } from './chunk-6T5LR34O.mjs';
-import './chunk-QAWSH567.mjs';
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function ElevatedInput({
+  className,
+  type = "text",
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type,
+      className: cn(
+        // Layout & shape
+        "relative w-full overflow-hidden rounded-lg",
+        // Typography
+        "text-(--color-foreground) text-sm placeholder:text-(--color-muted-foreground)",
+        // Sizing
+        "h-9 px-3",
+        // Reset native input chrome
+        "appearance-none border-none outline-none",
+        // Background — a barely-there top darkening that reads as cavity depth.
+        "bg-[linear-gradient(to_bottom,oklch(0_0_0/0.04),transparent)]",
+        "dark:bg-[linear-gradient(to_bottom,oklch(1_0_0/0.04),transparent)]",
+        // Shadow stack — light mode
+        "shadow-[inset_0_1px_0_0_oklch(1_0_0/0.08),inset_0_2px_2px_-1px_oklch(0_0_0/0.08),inset_0_4px_4px_-2px_oklch(0_0_0/0.08),0_1px_0_0_oklch(0_0_0/0.12),inset_0_0_0_1px_oklch(0_0_0/0.16)]",
+        // Shadow stack — dark mode
+        "dark:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.1),inset_0_2px_2px_-1px_oklch(0_0_0/0.28),inset_0_4px_4px_-2px_oklch(0_0_0/0.22),0_1px_0_0_oklch(0_0_0/0.36),inset_0_0_0_1px_oklch(1_0_0/0.16)]",
+        // Focus
+        "focus-visible:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.08),inset_0_2px_2px_-1px_oklch(0_0_0/0.04),inset_0_4px_4px_-2px_oklch(0_0_0/0.04),0_0_0_3px_oklch(0_0_0/0.08),inset_0_0_0_1.5px_oklch(0_0_0/0.36)]",
+        "dark:focus-visible:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.12),inset_0_2px_2px_-1px_oklch(0_0_0/0.16),inset_0_4px_4px_-2px_oklch(0_0_0/0.12),0_0_0_3px_oklch(1_0_0/0.08),inset_0_0_0_1.5px_oklch(1_0_0/0.28)]",
+        "transition-shadow duration-150",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { ElevatedInput };
 //# sourceMappingURL=elevated-input.mjs.map
 //# sourceMappingURL=elevated-input.mjs.map

package/dist/elevated-input.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"elevated-input.mjs"}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/elevated-input.tsx"],"names":[],"mappings":";;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACGO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,GAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA;AAAA,QAET,4CAAA;AAAA;AAAA,QAEA,+EAAA;AAAA;AAAA,QAEA,UAAA;AAAA;AAAA,QAEA,0CAAA;AAAA;AAAA,QAGA,+DAAA;AAAA,QACA,oEAAA;AAAA;AAAA,QAGA,wLAAA;AAAA;AAAA,QAEA,4LAAA;AAAA;AAAA,QAGA,wMAAA;AAAA,QACA,6MAAA;AAAA,QAEA,gCAAA;AAAA,QACA,iDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"elevated-input.mjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import type { InputHTMLAttributes, RefObject } from 'react';\nimport { cn } from '../lib/utils.js';\n\n/**\n * Physically-recessed input: the inverse read of GlossyButton.\n * The illusion is built entirely from `box-shadow` layers (no wrapper div).\n *\n * Server-renderable: no browser APIs are used.\n */\nexport function ElevatedInput({\n  className,\n  type = 'text',\n  ref,\n  ...props\n}: InputHTMLAttributes<HTMLInputElement> & {\n  ref?: RefObject<HTMLInputElement | null>;\n}) {\n  return (\n    <input\n      ref={ref}\n      type={type}\n      className={cn(\n        // Layout & shape\n        'relative w-full overflow-hidden rounded-lg',\n        // Typography\n        'text-(--color-foreground) text-sm placeholder:text-(--color-muted-foreground)',\n        // Sizing\n        'h-9 px-3',\n        // Reset native input chrome\n        'appearance-none border-none outline-none',\n\n        // Background — a barely-there top darkening that reads as cavity depth.\n        'bg-[linear-gradient(to_bottom,oklch(0_0_0/0.04),transparent)]',\n        'dark:bg-[linear-gradient(to_bottom,oklch(1_0_0/0.04),transparent)]',\n\n        // Shadow stack — light mode\n        'shadow-[inset_0_1px_0_0_oklch(1_0_0/0.08),inset_0_2px_2px_-1px_oklch(0_0_0/0.08),inset_0_4px_4px_-2px_oklch(0_0_0/0.08),0_1px_0_0_oklch(0_0_0/0.12),inset_0_0_0_1px_oklch(0_0_0/0.16)]',\n        // Shadow stack — dark mode\n        'dark:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.1),inset_0_2px_2px_-1px_oklch(0_0_0/0.28),inset_0_4px_4px_-2px_oklch(0_0_0/0.22),0_1px_0_0_oklch(0_0_0/0.36),inset_0_0_0_1px_oklch(1_0_0/0.16)]',\n\n        // Focus\n        'focus-visible:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.08),inset_0_2px_2px_-1px_oklch(0_0_0/0.04),inset_0_4px_4px_-2px_oklch(0_0_0/0.04),0_0_0_3px_oklch(0_0_0/0.08),inset_0_0_0_1.5px_oklch(0_0_0/0.36)]',\n        'dark:focus-visible:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.12),inset_0_2px_2px_-1px_oklch(0_0_0/0.16),inset_0_4px_4px_-2px_oklch(0_0_0/0.12),0_0_0_3px_oklch(1_0_0/0.08),inset_0_0_0_1.5px_oklch(1_0_0/0.28)]',\n\n        'transition-shadow duration-150',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"]}

package/dist/fade-in.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var framerMotion = require('framer-motion');

package/dist/fade-in.mjs

@@ -1,4 +1,86 @@
-export { FadeIn, Stagger, StaggerItem } from './chunk-WYJYLDUA.mjs';
-import './chunk-NNHPQ67J.mjs';
+"use client";
+import { useInView, motion } from 'framer-motion';
+import { createContext, useRef, useCallback, useEffect, useContext, useState } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/ease.ts
+var easeOut = [0.22, 1, 0.36, 1];
+var viewport = { once: true, margin: "-60px" };
+var ROW_TOLERANCE = 8;
+var StaggerContext = createContext(null);
+function FadeIn({ children, className, delay = 0, duration = 1, yOffset = 20, start = true }) {
+  const ref = useRef(null);
+  const inView = useInView(ref, viewport);
+  const hidden = { opacity: 0, y: yOffset };
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref,
+      className,
+      initial: hidden,
+      animate: inView && start ? { opacity: 1, y: 0 } : hidden,
+      transition: { duration, delay, ease: easeOut },
+      children
+    }
+  );
+}
+function Stagger({ children, className, staggerDelay = 0.15, baseDelay = 0, start = true }) {
+  const queue = useRef([]);
+  const frame = useRef(null);
+  const started = useRef(start);
+  started.current = start;
+  const flush = useCallback(() => {
+    frame.current = null;
+    const batch = queue.current;
+    queue.current = [];
+    const positioned = batch.map((entry) => ({
+      ...entry,
+      rect: entry.element.getBoundingClientRect()
+    }));
+    positioned.sort(
+      (a, b) => Math.abs(a.rect.top - b.rect.top) > ROW_TOLERANCE ? a.rect.top - b.rect.top : a.rect.left - b.rect.left
+    );
+    for (const [index, entry] of positioned.entries()) entry.reveal(baseDelay + index * staggerDelay);
+  }, [baseDelay, staggerDelay]);
+  const register = useCallback(
+    (element, reveal) => {
+      queue.current.push({ element, reveal });
+      if (started.current) frame.current ??= requestAnimationFrame(flush);
+    },
+    [flush]
+  );
+  useEffect(() => {
+    if (start && queue.current.length > 0) frame.current ??= requestAnimationFrame(flush);
+  }, [start, flush]);
+  return /* @__PURE__ */ jsx(StaggerContext, { value: register, children: /* @__PURE__ */ jsx("div", { className, children }) });
+}
+function StaggerItem({ children, className }) {
+  const register = useContext(StaggerContext);
+  const ref = useRef(null);
+  const claimed = useRef(false);
+  const [delay, setDelay] = useState(null);
+  const onViewportEnter = useCallback(() => {
+    if (claimed.current) return;
+    claimed.current = true;
+    const element = ref.current;
+    if (register && element) register(element, setDelay);
+    else setDelay(0);
+  }, [register]);
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref,
+      className,
+      initial: { opacity: 0, y: 18 },
+      animate: delay === null ? { opacity: 0, y: 18 } : { opacity: 1, y: 0 },
+      transition: { duration: 0.45, delay: delay ?? 0, ease: easeOut },
+      viewport,
+      onViewportEnter,
+      children
+    }
+  );
+}
+
+export { FadeIn, Stagger, StaggerItem };
 //# sourceMappingURL=fade-in.mjs.map
 //# sourceMappingURL=fade-in.mjs.map

package/dist/fade-in.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"fade-in.mjs"}
+{"version":3,"sources":["../src/lib/ease.ts","../src/components/fade-in.tsx"],"names":[],"mappings":"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","file":"fade-in.mjs","sourcesContent":["/**\n * Easing curves shared across landing-ui components.\n */\n\n/** Smooth deceleration — matches the former CSS `ease-out-expo`. */\nexport const easeOut = [0.22, 1, 0.36, 1] as const;\n\n/** Gentle overshoot — bounce-like settle for spring alternatives. */\nexport const easeOutBack = [0.34, 1.56, 0.64, 1] as const;\n\n// ── Content-swap tokens (action-swap) ─────────────────────────────────────\n// Values mirror beui.dev's `lib/ease.ts` so vendored action-swap primitives\n// keep their upstream timing.\n\n/** Strong ease-out — the default `ease-out` reads weak at these durations. */\nexport const EASE_OUT = [0.16, 1, 0.3, 1] as const;\n\n/** CSS string form of {@link EASE_OUT} for inline style transitions. */\nexport const EASE_OUT_CSS = 'cubic-bezier(0.16, 1, 0.3, 1)';\n\n/** Content swaps — label/icon slots trading places inside a control. */\nexport const SPRING_SWAP = { type: 'spring', stiffness: 460, damping: 30, mass: 0.55 } as const;\n","'use client';\n\nimport { motion, useInView } from 'framer-motion';\nimport { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport { easeOut } from '../lib/ease.js';\n\n/** Holds an entrance back until an external cue is ready. */\ntype Gate = {\n  /** While `false`, the entrance stays in its initial state even once in view. @defaultValue `true` */\n  start?: boolean;\n};\n\nexport type FadeInProps = Gate & {\n  children: React.ReactNode;\n  className?: string;\n  delay?: number;\n  duration?: number;\n  yOffset?: number;\n};\n\nexport type StaggerProps = Gate & {\n  children: React.ReactNode;\n  className?: string;\n  staggerDelay?: number;\n  baseDelay?: number;\n};\n\nexport type StaggerItemProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\n/** Shared viewport config so every entrance in this file triggers at the same threshold. */\nconst viewport = { once: true, margin: '-60px' } as const;\n\n/** Rows in a grid can differ by a fraction of a pixel; treat near-equal tops as the same row. */\nconst ROW_TOLERANCE = 8;\n\n/** Registers a newly visible item and receives back the delay it should animate with. */\ntype RegisterItem = (element: Element, reveal: (delay: number) => void) => void;\n\nconst StaggerContext = createContext<RegisterItem | null>(null);\n\n/**\n * Wraps children in a framer-motion div that fades+slides up\n * when it enters the viewport.\n */\nexport function FadeIn({ children, className, delay = 0, duration = 1, yOffset = 20, start = true }: FadeInProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const inView = useInView(ref, viewport);\n  const hidden = { opacity: 0, y: yOffset };\n\n  return (\n    <motion.div\n      ref={ref}\n      className={className}\n      initial={hidden}\n      animate={inView && start ? { opacity: 1, y: 0 } : hidden}\n      transition={{ duration, delay, ease: easeOut }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\n/**\n * Coordinates staggered entrances for the `<StaggerItem>`s inside it.\n *\n * Unlike framer-motion's `staggerChildren`, the cascade is driven by each\n * item's own visibility rather than the container's: items that scroll into\n * view together are batched into one frame, sorted top-to-bottom then\n * left-to-right, and given progressively later delays.\n *\n * While `start` is `false`, items that come into view queue up instead of\n * revealing, so the whole cascade lands as one batch when the cue arrives.\n */\nexport function Stagger({ children, className, staggerDelay = 0.15, baseDelay = 0, start = true }: StaggerProps) {\n  const queue = useRef<{ element: Element; reveal: (delay: number) => void }[]>([]);\n  const frame = useRef<number | null>(null);\n  const started = useRef(start);\n  started.current = start;\n\n  const flush = useCallback(() => {\n    frame.current = null;\n    const batch = queue.current;\n    queue.current = [];\n\n    const positioned = batch.map((entry) => ({\n      ...entry,\n      rect: entry.element.getBoundingClientRect(),\n    }));\n    positioned.sort((a, b) =>\n      Math.abs(a.rect.top - b.rect.top) > ROW_TOLERANCE ? a.rect.top - b.rect.top : a.rect.left - b.rect.left,\n    );\n    for (const [index, entry] of positioned.entries()) entry.reveal(baseDelay + index * staggerDelay);\n  }, [baseDelay, staggerDelay]);\n\n  const register = useCallback<RegisterItem>(\n    (element, reveal) => {\n      queue.current.push({ element, reveal });\n      if (started.current) frame.current ??= requestAnimationFrame(flush);\n    },\n    [flush],\n  );\n\n  // biome-ignore lint/plugin: drains an imperative queue of pending reveals when the gate opens.\n  useEffect(() => {\n    if (start && queue.current.length > 0) frame.current ??= requestAnimationFrame(flush);\n  }, [start, flush]);\n\n  return (\n    <StaggerContext value={register}>\n      <div className={className}>{children}</div>\n    </StaggerContext>\n  );\n}\n\n/** Use inside <Stagger> to mark each animated child. */\nexport function StaggerItem({ children, className }: StaggerItemProps) {\n  const register = useContext(StaggerContext);\n  const ref = useRef<HTMLDivElement>(null);\n  const claimed = useRef(false);\n  const [delay, setDelay] = useState<number | null>(null);\n\n  const onViewportEnter = useCallback(() => {\n    if (claimed.current) return;\n    claimed.current = true;\n    const element = ref.current;\n    if (register && element) register(element, setDelay);\n    else setDelay(0);\n  }, [register]);\n\n  return (\n    <motion.div\n      ref={ref}\n      className={className}\n      initial={{ opacity: 0, y: 18 }}\n      animate={delay === null ? { opacity: 0, y: 18 } : { opacity: 1, y: 0 }}\n      transition={{ duration: 0.45, delay: delay ?? 0, ease: easeOut }}\n      viewport={viewport}\n      onViewportEnter={onViewportEnter}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"]}

package/dist/feature-card.js

@@ -1,10 +1,10 @@
+"use client";
 'use strict';
 
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/lib/utils.ts
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }