fancy-ui-react 0.2.0

package/dist/components/text-reveal-card/TextRevealStars.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { cn } from "../../utils.js";
+/* empty css                      */
+function mulberry32(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = state + 1831565813 >>> 0;
+    let t = state;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function createStars(starsCount, seed) {
+  const random = mulberry32(seed);
+  const randomMove = () => random() * 4 - 2;
+  return Array.from({ length: starsCount }, () => ({
+    top: `calc(${random() * 100}% + ${randomMove()}px)`,
+    left: `calc(${random() * 100}% + ${randomMove()}px)`,
+    targetTop: `calc(${random() * 100}% + ${randomMove()}px)`,
+    targetLeft: `calc(${random() * 100}% + ${randomMove()}px)`,
+    opacity: random(),
+    duration: random() * 10 + 20
+  }));
+}
+const TextRevealStars = memo(function TextRevealStars2({
+  starsCount = 130,
+  className,
+  seed = 1
+}) {
+  const stars = useMemo(() => createStars(starsCount, seed), [starsCount, seed]);
+  return (
+    // `text-reveal-stars` is port-added: the CSS anchor class for the
+    // compiler-scoped `.star-animate` rule (see text-reveal-stars.css).
+    /* @__PURE__ */ jsx("div", { className: "text-reveal-stars absolute inset-0", children: stars.map((star, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "star-animate absolute z-[1] inline-block h-0.5 w-0.5 rounded-full bg-white",
+          className
+        ),
+        style: {
+          top: star.top,
+          left: star.left,
+          "--target-top": star.targetTop,
+          "--target-left": star.targetLeft,
+          "--star-opacity": star.opacity,
+          animationDuration: `${star.duration}s`
+        }
+      },
+      i
+    )) })
+  );
+});
+export {
+  TextRevealStars
+};

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

@@ -0,0 +1,4 @@
+export { TextRevealCard } from "./TextRevealCard.js";
+export type { TextRevealCardProps } from "./TextRevealCard.js";
+export { TextRevealStars } from "./TextRevealStars.js";
+export type { TextRevealStarsProps } from "./TextRevealStars.js";

package/dist/components/text-roll/TextRoll.d.ts

@@ -0,0 +1,43 @@
+import type { HTMLAttributes } from "react";
+import type { StaggerFrom } from "../../internals/motion/types.js";
+export interface TextRollProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /**
+     * The text to display. A change after mount triggers a per-grapheme
+     * roll to the new value. TextRoll has no `trigger` prop of its own
+     * (unlike Reveal) — it only ever reacts to `value` changing, so the
+     * very first render is always a plain, non-animated real-layer text
+     * node. That is what keeps it safe from Presence's documented "no
+     * intro on first mount" trap without any special-casing here.
+     */
+    value: string;
+    /**
+     * Which way the cells travel. `"auto"` compares the trimmed old and
+     * new values as numbers and rolls up for an increase, down for a
+     * decrease; a non-numeric change, a tie, or an empty side falls back
+     * to `"up"`.
+     */
+    direction?: "auto" | "up" | "down";
+    /** Roll duration in ms. Collapsed to `0` under
+     * `prefers-reduced-motion: reduce` (synchronous swap). */
+    duration?: number;
+    /** Per-cell stagger step in ms, before compression — see
+     * `STAGGER_CAPS.text` (200ms total). Collapsed to `0` under reduced
+     * motion, same as `duration`. */
+    stagger?: number;
+    /** Stagger origin, forwarded to the shared `staggerDelay` helper. */
+    from?: StaggerFrom;
+    /** `font-variant-numeric: tabular-nums` on BOTH layers (must be both,
+     * or the two layers stop being the same width) — locks digit advance
+     * width, primarily useful alongside a numeric `direction="auto"`
+     * ticker. Does not fix general alignment risk for non-digit text. */
+    tabular?: boolean;
+    /**
+     * Off by default: a live region firing on every tick of a fast
+     * counter is worse than silence. `"polite"`/`"assertive"` put the
+     * matching `role` + `aria-live` pair on the real (unsplit) text layer
+     * only — the cell layer stays `aria-hidden` in every state, so
+     * assistive tech never gets fragmented per-grapheme spam.
+     */
+    live?: "off" | "polite" | "assertive";
+}
+export declare const TextRoll: import("react").ForwardRefExoticComponent<TextRollProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/text-roll/TextRoll.js

@@ -0,0 +1,242 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { runTransition } from "../../internals/motion/animate.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
+import { DURATIONS, STAGGER_CAPS, STAGGERS } from "../../internals/motion/tokens.js";
+import { rollIn, rollOut } from "./roll-transitions.js";
+/* empty css              */
+const DEFAULT_DURATION = DURATIONS.base;
+function segmentGraphemes(text) {
+  if (typeof Intl.Segmenter !== "function") return [text];
+  const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+  const graphemes = [];
+  for (const { segment } of segmenter.segment(text)) graphemes.push(segment);
+  return graphemes;
+}
+function resolveDirection(prev, next, requested) {
+  if (requested !== "auto") return requested;
+  const p = prev.trim();
+  const n = next.trim();
+  if (p !== "" && n !== "") {
+    const pn = Number(p);
+    const nn = Number(n);
+    if (Number.isFinite(pn) && Number.isFinite(nn) && pn !== nn) return nn > pn ? "up" : "down";
+  }
+  return "up";
+}
+function mergeCells(current, prev) {
+  const currentKeys = new Set(current.map((c) => c.key));
+  const prevByKey = new Map(prev.map((c) => [c.key, c]));
+  const next = current.map((c) => {
+    const existing = prevByKey.get(c.key);
+    if (!existing) return { ...c, phase: "enter" };
+    if (existing.phase === "exit") return { ...existing, phase: "enter" };
+    return existing;
+  });
+  for (const p of prev) {
+    if (currentKeys.has(p.key)) continue;
+    next.push(p.phase === "exit" ? p : { ...p, phase: "exit" });
+  }
+  return next;
+}
+const TextRoll = forwardRef(function TextRoll2({
+  value,
+  direction = "auto",
+  duration = DEFAULT_DURATION,
+  // Same rationale as `DEFAULT_DURATION` above: `STAGGERS.char` IS
+  // TextRoll's per-grapheme step (that key's own comment in `tokens.ts`
+  // says so) — not a second `15` that could silently drift from it.
+  stagger = STAGGERS.char,
+  from = "first",
+  tabular = false,
+  live = "off",
+  className,
+  style,
+  ...restProps
+}, ref) {
+  const reduced = useReducedMotion();
+  const effDuration = reduced ? 0 : duration;
+  const effStagger = reduced ? 0 : stagger;
+  const graphemes = useMemo(() => segmentGraphemes(value), [value]);
+  const [generation, setGeneration] = useState(0);
+  const [resolvedDirection, setResolvedDirection] = useState(
+    () => direction === "auto" ? "up" : direction
+  );
+  const [inFlight, setInFlight] = useState(0);
+  const rollState = inFlight > 0 ? "rolling" : "idle";
+  const cells = useMemo(
+    () => graphemes.map((grapheme, index) => ({
+      key: `${generation}:${index}:${grapheme}`,
+      grapheme,
+      index
+    })),
+    [graphemes, generation]
+  );
+  const [rendered, setRendered] = useState(
+    () => cells.map((c) => ({ ...c, phase: "idle" }))
+  );
+  const keysSignature = useMemo(() => cells.map((c) => c.key).join("\0"), [cells]);
+  const [prevKeysSignature, setPrevKeysSignature] = useState(keysSignature);
+  if (keysSignature !== prevKeysSignature) {
+    setPrevKeysSignature(keysSignature);
+    setRendered((prev) => mergeCells(cells, prev));
+  }
+  const effDurationRef = useLiveRef(effDuration);
+  const effStaggerRef = useLiveRef(effStagger);
+  const fromRef = useLiveRef(from);
+  const countRef = useLiveRef(graphemes.length);
+  const nodesRef = useRef(/* @__PURE__ */ new Map());
+  const legsRef = useRef(/* @__PURE__ */ new Map());
+  const refCallbacksRef = useRef(/* @__PURE__ */ new Map());
+  const dirRef = useRef(resolvedDirection);
+  function getCellRef(key) {
+    let callback = refCallbacksRef.current.get(key);
+    if (!callback) {
+      callback = (node) => {
+        if (node) {
+          nodesRef.current.set(key, node);
+          return;
+        }
+        nodesRef.current.delete(key);
+        const leg = legsRef.current.get(key);
+        leg?.run?.abort();
+        legsRef.current.delete(key);
+        if (refCallbacksRef.current.get(key) === callback) {
+          refCallbacksRef.current.delete(key);
+        }
+      };
+      refCallbacksRef.current.set(key, callback);
+    }
+    return callback;
+  }
+  function beginTransition() {
+    setInFlight((n) => n + 1);
+  }
+  function endTransition() {
+    setInFlight((n) => Math.max(0, n - 1));
+  }
+  function startLeg(cell, to) {
+    const node = nodesRef.current.get(cell.key);
+    if (!node) return;
+    const leg = legsRef.current.get(cell.key) ?? { run: void 0, to: null };
+    const params = {
+      direction: dirRef.current,
+      duration: effDurationRef.current,
+      index: cell.index,
+      count: countRef.current,
+      step: effStaggerRef.current,
+      from: fromRef.current
+    };
+    const spec = to === 1 ? rollIn(node, params) : rollOut(node, params);
+    const counterpart = leg.run;
+    leg.to = to;
+    leg.run = void 0;
+    legsRef.current.set(cell.key, leg);
+    beginTransition();
+    let finished = false;
+    const handle = { current: void 0 };
+    const run = runTransition(node, spec, to, counterpart, () => {
+      finished = true;
+      endTransition();
+      if (to === 1) {
+        handle.current?.abort();
+        leg.run = void 0;
+        return;
+      }
+      legsRef.current.delete(cell.key);
+      setRendered((prev) => prev.filter((p) => p.key !== cell.key));
+    });
+    handle.current = run;
+    if (!finished) leg.run = run;
+  }
+  const priorValueForDirectionRef = useRef(value);
+  const priorRequestedDirectionRef = useRef(direction);
+  useIsomorphicLayoutEffect(() => {
+    const nextValue = value;
+    const requested = direction;
+    if (priorValueForDirectionRef.current === nextValue && priorRequestedDirectionRef.current === requested) {
+      return;
+    }
+    const resolved = resolveDirection(
+      priorValueForDirectionRef.current ?? "",
+      nextValue ?? "",
+      requested
+    );
+    priorValueForDirectionRef.current = nextValue;
+    priorRequestedDirectionRef.current = requested;
+    dirRef.current = resolved;
+    setResolvedDirection(resolved);
+  }, [value, direction]);
+  useIsomorphicLayoutEffect(() => {
+    for (const cell of rendered) {
+      const desired = cell.phase === "exit" ? 0 : cell.phase === "enter" ? 1 : null;
+      if (desired === null) continue;
+      const leg = legsRef.current.get(cell.key);
+      if (leg && leg.to === desired) continue;
+      startLeg(cell, desired);
+    }
+  }, [rendered]);
+  const priorLengthRef = useRef(graphemes.length);
+  const backstopFirstRunRef = useRef(true);
+  useEffect(() => {
+    const nextLength = graphemes.length;
+    if (backstopFirstRunRef.current) {
+      backstopFirstRunRef.current = false;
+      priorLengthRef.current = nextLength;
+      return;
+    }
+    if (nextLength !== priorLengthRef.current) setGeneration((g) => g + 1);
+    priorLengthRef.current = nextLength;
+    const backstopMs = Math.max(
+      DURATIONS.entrance,
+      effDurationRef.current + STAGGER_CAPS.text + DURATIONS.fast
+    );
+    const timeoutId = setTimeout(() => {
+      setInFlight(0);
+    }, backstopMs);
+    return () => clearTimeout(timeoutId);
+  }, [value]);
+  useIsomorphicLayoutEffect(() => {
+    const legs = legsRef.current;
+    return () => {
+      for (const leg of legs.values()) leg.run?.abort();
+      legs.clear();
+    };
+  }, []);
+  const liveRole = live === "off" ? void 0 : live === "polite" ? "status" : "alert";
+  const liveAriaLive = live === "off" ? void 0 : live;
+  const vars = {};
+  if (duration !== DEFAULT_DURATION) vars["--ft-textroll-duration"] = `${duration}ms`;
+  const layerStyle = tabular ? { fontVariantNumeric: "tabular-nums" } : void 0;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...restProps,
+      ref,
+      className: cn("ft-textroll", className),
+      style: { ...style, ...vars },
+      "data-state": rollState,
+      "data-direction": resolvedDirection,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ft-textroll-real", style: layerStyle, role: liveRole, "aria-live": liveAriaLive, children: value }),
+        /* @__PURE__ */ jsx("span", { className: "ft-textroll-cells", "aria-hidden": "true", style: layerStyle, children: rendered.map((cell) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: getCellRef(cell.key),
+            className: "ft-textroll-cell",
+            style: { gridColumnStart: cell.index + 1 },
+            children: cell.grapheme
+          },
+          cell.key
+        )) })
+      ]
+    }
+  );
+});
+export {
+  TextRoll
+};

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

@@ -0,0 +1,2 @@
+export { TextRoll } from "./TextRoll.js";
+export type { TextRollProps } from "./TextRoll.js";

package/dist/components/text-roll/roll-transitions.d.ts

@@ -0,0 +1,74 @@
+/**
+ * `rollIn` / `rollOut` — the per-grapheme cell transitions TextRoll's overlay
+ * layer runs on its enter/exit legs. Unlike `internals/motion/transitions.ts`'s
+ * `preset()` (one shared geometry table shared by Reveal/Presence/
+ * StickyScroll), these two are specific to TextRoll's own "rolling cylinder"
+ * geometry and its own per-cell stagger bookkeeping, so they live next to the
+ * component that uses them instead of in the shared foundation — the frozen
+ * contract draws exactly this line (`text-roll/roll-transitions.ts`, not
+ * `internals/motion/`), and the foundation exports nothing named `rollIn`/
+ * `rollOut` for this file to wrap.
+ *
+ * Both are css-only transition specs (a `css(t, u)` string, no `tick`) — the
+ * same WAAPI mechanism `preset()` uses, so the same fact its file header
+ * documents applies unchanged here: the sampler (`animate.ts`'s
+ * `runTransition`) samples `t`/`u` from the spec's OWN easing curve before
+ * `css()` ever runs, so `easing` only has to be handed through on the
+ * returned `TransitionSpec`, never applied a second time inside `cssForRoll`.
+ */
+import type { TransitionSpec } from "../../internals/motion/transitions.js";
+import { type StaggerFrom } from "../../internals/motion/stagger.js";
+export interface RollTransitionParams {
+    /**
+     * "up" mirrors an odometer counting up: an entering cell rises from
+     * below into place, a leaving cell continues rising off the top. "down"
+     * is the mirror image. The enter (`rollIn`) and exit (`rollOut`) legs on
+     * the SAME roll always receive the same `direction` — a same-length
+     * update at one position runs its exit and entrance as one coherent
+     * turn, not two independently-decided fades.
+     */
+    direction: "up" | "down";
+    /** ms. `0` (reduced motion, written by the component) makes the
+     * transition sampler short-circuit synchronously — nothing in this file
+     * has to special-case that. */
+    duration?: number;
+    /**
+     * This cell's own position, frozen into the cell object by TextRoll at
+     * the render that created it — so a cell being REMOVED keeps the index
+     * it actually held there rather than one recomputed against whatever
+     * replaced it.
+     */
+    index: number;
+    /**
+     * The CURRENT (new) value's grapheme count — deliberately the SAME
+     * number for every cell in one roll, entering and leaving alike, so a
+     * `from="center"` sweep reads as one sweep across the new shape rather
+     * than two sweeps computed against two different lengths (only possible
+     * to observe on a length-changing update, where old and new counts
+     * differ; on the far more common same-length update they are already
+     * identical).
+     */
+    count: number;
+    /** The `stagger` prop's per-step ms — already collapsed to `0` under
+     * reduced motion by the component. This file applies `STAGGER_CAPS.text`
+     * compression on top, via the shared `staggerDelay` helper (compression,
+     * never per-cell clipping — see that file). */
+    step: number;
+    /** Stagger origin, forwarded from the `from` prop. Omitted, `staggerDelay`
+     * falls back to its own `"first"` default. */
+    from?: StaggerFrom;
+}
+/**
+ * A cell arriving at its slot. `direction="up"`: rises from below
+ * (`+distance`) into place. `direction="down"`: descends from above
+ * (`-distance`) into place.
+ */
+export declare function rollIn(_node: Element, params: RollTransitionParams): TransitionSpec;
+/**
+ * A cell leaving its slot, continuing the SAME rotation the entering cell
+ * (`rollIn`, above) is completing: `direction="up"` exits upward (toward
+ * `-distance`), `direction="down"` exits downward — the OPPOSITE sign from
+ * `rollIn`'s for the same `direction`, which is exactly what makes the two
+ * read as one wheel turning rather than two unrelated fades.
+ */
+export declare function rollOut(_node: Element, params: RollTransitionParams): TransitionSpec;

package/dist/components/text-roll/roll-transitions.js

@@ -0,0 +1,31 @@
+"use client";
+import { JS_EASINGS, DURATIONS, STAGGER_CAPS } from "../../internals/motion/tokens.js";
+import { staggerDelay } from "../../internals/motion/stagger.js";
+function delayFor(params) {
+  return staggerDelay(params.index, params.count, params.step, params.from, STAGGER_CAPS.text);
+}
+function cssForRoll(sign, t, u) {
+  return `opacity: ${t}; transform: translateY(calc(${sign} * var(--ft-textroll-distance, 1em) * ${u}))`;
+}
+function rollIn(_node, params) {
+  const sign = params.direction === "up" ? 1 : -1;
+  return {
+    duration: params.duration ?? DURATIONS.base,
+    delay: delayFor(params),
+    easing: JS_EASINGS.out,
+    css: (t, u) => cssForRoll(sign, t, u)
+  };
+}
+function rollOut(_node, params) {
+  const sign = params.direction === "up" ? -1 : 1;
+  return {
+    duration: params.duration ?? DURATIONS.base,
+    delay: delayFor(params),
+    easing: JS_EASINGS.in,
+    css: (t, u) => cssForRoll(sign, t, u)
+  };
+}
+export {
+  rollIn,
+  rollOut
+};

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

@@ -0,0 +1,48 @@
+import type { HTMLInputAutoCompleteAttribute } from "react";
+export interface TextareaProps {
+    /**
+     * Current value. Controlled when supplied: pair it with `onValueChange`,
+     * the React counterpart of the Svelte source's `bind:value`.
+     */
+    value?: string;
+    /** Initial value when uncontrolled (no `value` prop given). */
+    defaultValue?: string;
+    /** Called with the new value on every input event. */
+    onValueChange?: (value: string) => void;
+    /** Shown while the field is empty. */
+    placeholder?: string;
+    /** Blocks focus and typing; excluded from form submission. Overridden by a surrounding FormField. */
+    disabled?: boolean;
+    /** Blocks typing but stays focusable and is still submitted, unlike `disabled`. */
+    readonly?: boolean;
+    /** Native `required`. Overridden by a surrounding FormField. */
+    required?: boolean;
+    /** Drives the error border and `aria-invalid`. Overridden by a surrounding FormField. */
+    invalid?: boolean;
+    /** Element id. Overridden by a surrounding FormField's own `controlId`. */
+    id?: string;
+    /** Native `name`, read on form submission. */
+    name?: string;
+    /** Native `autocomplete` hint — the real token set the DOM accepts, not a bare string. */
+    autocomplete?: HTMLInputAutoCompleteAttribute;
+    /** Accessible name — for a control with no visible Label next to it. */
+    label?: string;
+    /** Visible height in text rows before anything grows it. Also the no-JS fallback height. */
+    rows?: number;
+    /** Native character ceiling; also the counter's denominator. */
+    maxlength?: number;
+    /** Renders the live "n / max" counter under the field. */
+    showCount?: boolean;
+    /** Grows to fit content instead of scrolling; disables manual resize. */
+    autoResize?: boolean;
+    /** Additional CSS classes — applied to the `<textarea>` itself, not the wrapper. */
+    className?: string;
+}
+/**
+ * A styled native `<textarea>` with full FormField integration, an optional
+ * character counter and an optional grow-to-fit mode.
+ *
+ * The element reference arrives through the ref channel (the Svelte source
+ * declares `ref = $bindable(null)`), pointing at the native `<textarea>`.
+ */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef } from "react";
+import { cn } from "../../utils.js";
+import { useField } from "../../internals/field.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+/* empty css             */
+const Textarea = forwardRef(
+  ({
+    value: valueProp,
+    defaultValue = "",
+    onValueChange,
+    placeholder,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    id,
+    name,
+    autocomplete,
+    label,
+    rows = 3,
+    maxlength,
+    showCount = false,
+    autoResize = false,
+    className
+  }, forwardedRef) => {
+    const isControlled = valueProp !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const value = isControlled ? valueProp : uncontrolledValue;
+    const field = useField();
+    const effectiveId = field?.controlId ?? id;
+    const effectiveDisabled = field?.disabled ?? disabled;
+    const effectiveRequired = field?.required ?? required;
+    const effectiveInvalid = field?.invalid ?? invalid;
+    const reactId = useFancyId();
+    const countId = `${reactId}-count`;
+    const count = value.length;
+    const atLimit = maxlength != null && count >= maxlength;
+    const describedBy = [field?.describedBy, showCount ? countId : void 0].filter(Boolean).join(" ") || void 0;
+    const classes = cn(
+      "ft-textarea w-full rounded-[8px] border border-input bg-background px-[12px] py-[10px] text-[13px] leading-[1.5] text-foreground transition-colors",
+      "placeholder:text-muted-foreground",
+      "focus-visible:outline-none",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      autoResize ? "resize-none overflow-hidden" : "resize-y",
+      effectiveInvalid && "border-destructive/50",
+      className
+    );
+    const innerRef = useRef(null);
+    const composedRef = useComposedRefs(forwardedRef, innerRef);
+    const metricsRef = useRef(null);
+    function px(input) {
+      const parsed = Number.parseFloat(input);
+      return Number.isFinite(parsed) ? parsed : 0;
+    }
+    function measure(el) {
+      if (metricsRef.current) return metricsRef.current;
+      const style = getComputedStyle(el);
+      const declared = Number.parseFloat(style.lineHeight);
+      const fontSize = Number.parseFloat(style.fontSize);
+      const line = Number.isFinite(declared) && declared > 0 ? declared : Number.isFinite(fontSize) && fontSize > 0 ? fontSize * 1.5 : 20;
+      const padding = px(style.paddingTop) + px(style.paddingBottom);
+      const border = style.boxSizing === "border-box" ? px(style.borderTopWidth) + px(style.borderBottomWidth) : 0;
+      metricsRef.current = { line, extra: padding + border };
+      return metricsRef.current;
+    }
+    function grow() {
+      const el = innerRef.current;
+      if (!el) return;
+      const { line, extra } = measure(el);
+      el.style.height = "auto";
+      const min = rows * line + extra;
+      el.style.height = `${Math.max(el.scrollHeight, min)}px`;
+    }
+    function handleInput(event) {
+      if (effectiveDisabled) return;
+      const next = event.currentTarget.value;
+      if (!isControlled) setUncontrolledValue(next);
+      onValueChange?.(next);
+      if (autoResize) grow();
+    }
+    useIsomorphicLayoutEffect(() => {
+      if (!autoResize) return;
+      grow();
+    }, [autoResize, value, rows]);
+    return /* @__PURE__ */ jsxs("div", { className: "ft-textarea-wrapper flex w-full flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: composedRef,
+          id: effectiveId,
+          placeholder,
+          name,
+          autoComplete: autocomplete,
+          rows,
+          maxLength: maxlength,
+          disabled: effectiveDisabled,
+          readOnly: readonly,
+          required: effectiveRequired,
+          "aria-invalid": effectiveInvalid ? "true" : void 0,
+          "aria-describedby": describedBy,
+          "aria-label": label,
+          className: classes,
+          value,
+          onChange: handleInput
+        }
+      ),
+      showCount && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          id: countId,
+          className: "ft-textarea-count text-muted-foreground self-end text-[11px]",
+          "data-limit-reached": atLimit ? "true" : void 0,
+          children: [
+            count,
+            maxlength != null ? ` / ${maxlength}` : ""
+          ]
+        }
+      )
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+export {
+  Textarea
+};

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

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

package/dist/components/thinking-indicator/ThinkingIndicator.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+/**
+ * Props for ThinkingIndicator
+ */
+export interface ThinkingIndicatorProps {
+    /** What the agent is doing right now, e.g. "Reading files" */
+    status: string;
+    /** Whether the activity is still in flight: drives the shimmer and the live timer */
+    running?: boolean;
+    /** `"inline"` is a bare text row; `"pill"` is a bordered chip with a leading pulse dot */
+    variant?: "inline" | "pill";
+    /** Epoch ms the activity started; the internal stopwatch ticks from it */
+    since?: number;
+    /** Externally-driven elapsed time in ms; overrides the internal stopwatch */
+    elapsedMs?: number;
+    /** Show the elapsed duration alongside the status */
+    showElapsed?: boolean;
+    /** Rendered instead of the status label once `running` is false */
+    done?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * ThinkingIndicator
+ */
+export declare const ThinkingIndicator: import("react").ForwardRefExoticComponent<ThinkingIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;