trama-ui 0.1.0

package/dist/components/ui/Select.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { vcls } from "./variants.js";
+/**
+ * Desplegable con estilo propio, no un `<select>` nativo: un `<select>` real no se puede reskinar por
+ * dentro (la lista abierta la pinta el sistema operativo), así que esto es un botón + una lista
+ * absoluta, igual de accesible (`aria-haspopup`, `role="listbox"`) pero con los mismos 7 estilos que
+ * el resto del kit, abierto o cerrado.
+ */
+export default function Select({ label = "País", options = "España, Francia, Portugal, Italia, Alemania", defaultValue = "", placeholder = "Elige una opción", size = "md", variant = "glass", className = "", }) {
+    const list = useMemo(() => options.split(",").map((s) => s.trim()).filter(Boolean), [options]);
+    const [value, setValue] = useState(defaultValue);
+    const [open, setOpen] = useState(false);
+    const root = useRef(null);
+    useEffect(() => setValue(defaultValue), [defaultValue]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDoc = (e) => {
+            if (root.current && !root.current.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onDoc);
+        return () => document.removeEventListener("mousedown", onDoc);
+    }, [open]);
+    return (_jsxs("div", { ref: root, className: `ui-select ui-select--${size} ${className}`, children: [label && _jsx("span", { className: "ui-select__label", children: label }), _jsxs("button", { type: "button", className: `ui-select__trigger ui-surface ${vcls(variant)}`, "aria-haspopup": "listbox", "aria-expanded": open, onClick: () => setOpen((v) => !v), children: [_jsx("span", { className: value ? undefined : "ui-select__placeholder", children: value || placeholder }), _jsx("span", { className: "ui-select__mark", "aria-hidden": true, children: "\u25BE" })] }), open && (_jsx("ul", { className: `ui-select__list ui-surface ${vcls(variant)}`, role: "listbox", children: list.map((o) => (_jsx("li", { children: _jsx("button", { type: "button", role: "option", "aria-selected": o === value, className: `ui-select__opt ${o === value ? "is-selected" : ""}`, onClick: () => {
+                            setValue(o);
+                            setOpen(false);
+                        }, children: o }) }, o))) }))] }));
+}

package/dist/components/ui/Skeleton.d.ts

@@ -0,0 +1,12 @@
+import { type Tone } from "./variants.js";
+export type SkeletonProps = {
+    kind?: "text" | "card" | "avatar" | "table";
+    lines?: number;
+    tone?: Tone;
+    className?: string;
+};
+/**
+ * Placeholder de carga con barrido animado. Deliberadamente sin `--s-*`: un esqueleto no lleva el
+ * estilo de marca del contenido que va a sustituir, solo el tono de color (`tone`).
+ */
+export default function Skeleton({ kind, lines, tone, className }: SkeletonProps): import("react").JSX.Element;

package/dist/components/ui/Skeleton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tcls } from "./variants.js";
+/**
+ * Placeholder de carga con barrido animado. Deliberadamente sin `--s-*`: un esqueleto no lleva el
+ * estilo de marca del contenido que va a sustituir, solo el tono de color (`tone`).
+ */
+export default function Skeleton({ kind = "text", lines = 3, tone = "mut", className = "" }) {
+    if (kind === "avatar") {
+        return _jsx("div", { className: `ui-skel ui-skel--avatar ${tcls(tone)} ${className}`, "aria-hidden": true });
+    }
+    if (kind === "card") {
+        return (_jsxs("div", { className: `ui-skel-card ${className}`, "aria-hidden": true, children: [_jsx("div", { className: `ui-skel ui-skel--block ${tcls(tone)}` }), _jsx("div", { className: `ui-skel ui-skel--line ${tcls(tone)}`, style: { width: "70%" } }), _jsx("div", { className: `ui-skel ui-skel--line ${tcls(tone)}`, style: { width: "45%" } })] }));
+    }
+    if (kind === "table") {
+        return (_jsx("div", { className: `ui-skel-table ${className}`, "aria-hidden": true, children: Array.from({ length: Math.max(2, lines) }, (_, i) => (_jsx("div", { className: `ui-skel ui-skel--row ${tcls(tone)}` }, i))) }));
+    }
+    return (_jsx("div", { className: `ui-skel-lines ${className}`, "aria-hidden": true, children: Array.from({ length: Math.max(1, lines) }, (_, i) => (_jsx("div", { className: `ui-skel ui-skel--line ${tcls(tone)}`, style: { width: i === Math.max(1, lines) - 1 ? "60%" : "100%" } }, i))) }));
+}

package/dist/components/ui/Spinner.d.ts

@@ -0,0 +1,15 @@
+import { type Variant } from "./variants.js";
+export type SpinnerProps = {
+    kind?: "ring" | "line" | "braille" | "dots" | "bar" | "blocks";
+    label?: string;
+    /** fotogramas por segundo de las variantes de texto */
+    fps?: number;
+    /** tamaño en px (el texto va al 70 %) */
+    fontSize?: number;
+    /** @deprecated usa `fontSize` */
+    size?: number;
+    variant?: Variant;
+    className?: string;
+};
+/** Indicador de carga: anillo CSS o animaciones de texto (línea, braille, puntos, barra, bloques). */
+export default function Spinner({ kind, label, fps, fontSize, size: legacySize, variant, className }: SpinnerProps): import("react").JSX.Element;

package/dist/components/ui/Spinner.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { vcls } from "./variants.js";
+const FRAMES = {
+    line: ["|", "/", "-", "\\"],
+    braille: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"],
+    dots: ["·  ", "·· ", "···", " ··", "  ·", "   "],
+    bar: ["[=     ]", "[==    ]", "[===   ]", "[====  ]", "[ ==== ]", "[  ====]", "[   ===]", "[    ==]", "[     =]", "[      ]"],
+    blocks: ["▖", "▘", "▝", "▗"],
+};
+/** Indicador de carga: anillo CSS o animaciones de texto (línea, braille, puntos, barra, bloques). */
+export default function Spinner({ kind = "braille", label = "Cargando…", fps = 12, fontSize, size: legacySize, variant = "terminal", className = "" }) {
+    const size = fontSize ?? legacySize ?? 20;
+    const [i, setI] = useState(0);
+    useEffect(() => {
+        if (kind === "ring")
+            return;
+        const id = setInterval(() => setI((n) => n + 1), 1000 / Math.max(1, fps));
+        return () => clearInterval(id);
+    }, [kind, fps]);
+    const frames = kind === "ring" ? null : FRAMES[kind];
+    return (_jsxs("div", { className: `ui-spin ${vcls(variant)} ${className}`, role: "status", "aria-label": label, style: { fontSize: size }, children: [frames ? _jsx("span", { className: "ui-spin__frames", children: frames[i % frames.length] }) : _jsx("span", { className: "ui-spin__ring" }), label && _jsx("span", { style: { fontSize: Math.max(12, size * 0.7) }, children: label })] }));
+}

package/dist/components/ui/Spotlight.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import { type Tone, type Variant } from "./variants.js";
+export type SpotlightProps = {
+    /** radio del foco en px */
+    radius?: number;
+    /** intensidad del brillo, 0–100 */
+    intensity?: number;
+    /** también ilumina el borde bajo el puntero */
+    border?: boolean;
+    tone?: Extract<Tone, "acc" | "acc2" | "fg">;
+    variant?: Variant;
+    children: ReactNode;
+    className?: string;
+};
+/** Superficie con un foco de luz que sigue al puntero (variables CSS, sin JS por fotograma en el árbol de React). */
+export default function Spotlight({ radius, intensity, border, tone, variant, children, className }: SpotlightProps): import("react").JSX.Element;

package/dist/components/ui/Spotlight.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { tcls, vcls } from "./variants.js";
+/** Superficie con un foco de luz que sigue al puntero (variables CSS, sin JS por fotograma en el árbol de React). */
+export default function Spotlight({ radius = 220, intensity = 30, border = true, tone = "acc", variant = "glass", children, className = "" }) {
+    const ref = useRef(null);
+    return (_jsx("div", { ref: ref, className: `ui-spot ui-surface ${border ? "ui-spot--border" : ""} ${tcls(tone)} ${vcls(variant)} ${className}`, style: { "--spot-r": `${radius}px`, "--spot-i": `${intensity}%` }, onPointerMove: (e) => {
+            const el = ref.current;
+            if (!el)
+                return;
+            const r = el.getBoundingClientRect();
+            el.style.setProperty("--mx", `${e.clientX - r.left}px`);
+            el.style.setProperty("--my", `${e.clientY - r.top}px`);
+        }, children: children }));
+}

package/dist/components/ui/Sprite.d.ts

@@ -0,0 +1,27 @@
+/** Geometría de la hoja de Kenney "Pixel UI" (UIpackSheet_transparent.png): baldosas de 16 px con 2 px de margen. */
+export declare const SPRITE_SHEET: {
+    readonly src: "/pixel/kenney-pixel-ui/spritesheet/sheet.png";
+    readonly tile: 16;
+    readonly gap: 2;
+    readonly width: 538;
+    readonly height: 592;
+    readonly cols: 30;
+    readonly rows: 33;
+};
+export type SpriteProps = {
+    /** columna de la baldosa en la hoja, empezando en 0 */
+    col: number;
+    /** fila de la baldosa en la hoja, empezando en 0 */
+    row: number;
+    /** píxeles CSS por píxel del sprite (números enteros mantienen los píxeles nítidos) */
+    scale?: number;
+    /** nombre accesible; sin él el sprite es decorativo */
+    label?: string;
+    className?: string;
+};
+/**
+ * Una baldosa 16×16 de la hoja de sprites de Kenney "Pixel UI" (CC0): flechas, casillas, punteros, botones…
+ * Son píxeles ya coloreados, no se tiñen con los tokens del tema (a diferencia de `Icon`). Las coordenadas se
+ * ven en el catálogo (`/componentes` → Pixel art → Sprite), que dibuja la hoja con su rejilla.
+ */
+export default function Sprite({ col, row, scale, label, className }: SpriteProps): import("react").JSX.Element;

package/dist/components/ui/Sprite.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Geometría de la hoja de Kenney "Pixel UI" (UIpackSheet_transparent.png): baldosas de 16 px con 2 px de margen. */
+export const SPRITE_SHEET = {
+    src: "/pixel/kenney-pixel-ui/spritesheet/sheet.png",
+    tile: 16,
+    gap: 2,
+    width: 538,
+    height: 592,
+    cols: 30,
+    rows: 33,
+};
+/**
+ * Una baldosa 16×16 de la hoja de sprites de Kenney "Pixel UI" (CC0): flechas, casillas, punteros, botones…
+ * Son píxeles ya coloreados, no se tiñen con los tokens del tema (a diferencia de `Icon`). Las coordenadas se
+ * ven en el catálogo (`/componentes` → Pixel art → Sprite), que dibuja la hoja con su rejilla.
+ */
+export default function Sprite({ col, row, scale = 2, label, className = "" }) {
+    return (_jsx("span", { className: `ui-sprite ${className}`.trim(), style: { "--sp-img": `url(${SPRITE_SHEET.src})`, "--sp-s": scale, "--sp-x": col, "--sp-y": row }, role: label ? "img" : undefined, "aria-label": label, "aria-hidden": label ? undefined : true }));
+}

package/dist/components/ui/StatCounter.d.ts

@@ -0,0 +1,24 @@
+import { type Tone } from "./variants.js";
+export type StatCounterProps = {
+    value: number;
+    suffix?: string;
+    prefix?: string;
+    label?: string;
+    char?: string;
+    scale?: number;
+    duration?: number;
+    /** int = entero; decimal = con decimales; compact = 1,2K / 3,4M */
+    format?: "int" | "decimal" | "compact";
+    decimals?: number;
+    /** cuándo cuenta: al montar, al entrar en pantalla o al pasar el ratón */
+    trigger?: "mount" | "inview" | "hover";
+    tone?: Tone;
+    align?: "left" | "center" | "right";
+    playKey?: number;
+    className?: string;
+};
+/**
+ * Cifra grande en ASCII (fuente bitmap 7×7 de asciify-engine) que cuenta hacia arriba con GSAP.
+ * Pensada para secciones de "resultados" de una landing.
+ */
+export default function StatCounter({ value, suffix, prefix, label, char, scale, duration, format, decimals, trigger, tone, align, playKey, className, }: StatCounterProps): import("react").JSX.Element;

package/dist/components/ui/StatCounter.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { tcls } from "./variants.js";
+const fmt = (n, format, decimals) => {
+    if (format === "decimal")
+        return n.toFixed(decimals);
+    if (format === "compact")
+        return n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${(n / 1e3).toFixed(1)}K` : `${Math.round(n)}`;
+    return `${Math.round(n)}`;
+};
+/**
+ * Cifra grande en ASCII (fuente bitmap 7×7 de asciify-engine) que cuenta hacia arriba con GSAP.
+ * Pensada para secciones de "resultados" de una landing.
+ */
+export default function StatCounter({ value, suffix = "", prefix = "", label, char = "#", scale = 1, duration = 1.6, format = "int", decimals = 1, trigger = "mount", tone = "acc", align = "center", playKey = 0, className = "", }) {
+    const root = useRef(null);
+    const [bitmap, setBitmap] = useState(null);
+    const [shown, setShown] = useState(0);
+    useEffect(() => {
+        let live = true;
+        import("asciify-engine/core").then((m) => live && setBitmap(() => m.asciifyText));
+        return () => {
+            live = false;
+        };
+    }, []);
+    useEffect(() => {
+        const el = root.current;
+        if (!el)
+            return;
+        let disposed = false;
+        const cleanups = [];
+        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        (async () => {
+            const { gsap } = await import("gsap");
+            if (disposed)
+                return;
+            const obj = { v: 0 };
+            const run = () => {
+                gsap.killTweensOf(obj);
+                obj.v = 0;
+                gsap.to(obj, { v: value, duration, ease: "power2.out", onUpdate: () => setShown(obj.v) });
+            };
+            if (reduce) {
+                setShown(value);
+            }
+            else if (trigger === "hover") {
+                setShown(value);
+                el.addEventListener("mouseenter", run);
+                cleanups.push(() => el.removeEventListener("mouseenter", run));
+            }
+            else if (trigger === "inview") {
+                const io = new IntersectionObserver(([e]) => e.isIntersecting && run(), { threshold: 0.4 });
+                io.observe(el);
+                cleanups.push(() => io.disconnect());
+            }
+            else {
+                run();
+            }
+            cleanups.push(() => gsap.killTweensOf(obj));
+        })();
+        return () => {
+            disposed = true;
+            cleanups.reverse().forEach((f) => f());
+        };
+    }, [value, duration, trigger, playKey]);
+    const text = `${prefix}${fmt(shown, format, decimals)}${suffix}`;
+    const art = useMemo(() => (bitmap ? bitmap(text, { char, scale }) : text), [bitmap, text, char, scale]);
+    return (_jsxs("div", { ref: root, className: `ui-stat ui-stat--${align} ${tcls(tone)} ${className}`, children: [_jsx("pre", { className: "ui-stat__art", role: "img", "aria-label": `${prefix}${fmt(value, format, decimals)}${suffix} ${label ?? ""}`, children: art }), label && _jsx("span", { className: "ui-stat__label", children: label })] }));
+}

package/dist/components/ui/StatsSection.d.ts

@@ -0,0 +1,14 @@
+import type { Tone } from "./variants.js";
+export type StatsSectionProps = {
+    kicker?: string;
+    title?: string;
+    subtitle?: string;
+    /** una cifra por línea: «valor|sufijo|etiqueta» (sufijo puede ir vacío) */
+    stats?: string;
+    tone?: Tone;
+    /** cambia el número para repetir la animación de conteo desde fuera */
+    playKey?: number;
+    className?: string;
+};
+/** Fila de cifras animadas (`StatCounter`) con cabecera: la sección de "resultados" típica de una landing. */
+export default function StatsSection({ kicker, title, subtitle, stats, tone, playKey, className, }: StatsSectionProps): import("react").JSX.Element;

package/dist/components/ui/StatsSection.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import SectionHeader from "./SectionHeader.js";
+import StatCounter from "./StatCounter.js";
+// El sufijo se dibuja con la fuente bitmap 7×7 de asciify-engine (solo ASCII): símbolos como + o %
+// funcionan bien, pero letras acentuadas o "★" no. Cualquier palabra va en la etiqueta (texto normal).
+const DEFAULT_STATS = "500|+|Alumnos formados\n4.9||Valoración media\n12||Años de experiencia";
+/** Fila de cifras animadas (`StatCounter`) con cabecera: la sección de "resultados" típica de una landing. */
+export default function StatsSection({ kicker = "En números", title = "Diez años enseñando a leer el mar", subtitle = "", stats = DEFAULT_STATS, tone = "acc", playKey = 0, className = "", }) {
+    const rows = useMemo(() => stats.split("\n").map((l) => l.split("|")).filter((r) => r[0]?.trim()), [stats]);
+    return (_jsxs("section", { className: `ui-stats ${className}`, children: [_jsx(SectionHeader, { kicker: kicker, title: title, subtitle: subtitle, align: "center", variant: "minimal" }), _jsx("div", { className: "ui-stats__row", children: rows.map(([value, suffix, label], i) => (_jsx(StatCounter, { value: parseFloat(value) || 0, suffix: suffix || "", label: label, tone: tone, format: value.includes(".") ? "decimal" : "int", playKey: playKey }, (label ?? value) + i))) })] }));
+}

package/dist/components/ui/Stepper.d.ts

@@ -0,0 +1,10 @@
+import { type Variant } from "./variants.js";
+export type StepperProps = {
+    steps?: string;
+    /** índice (0-based) del paso activo; los anteriores se marcan como hechos */
+    current?: number;
+    variant?: Variant;
+    className?: string;
+};
+/** Indicador de progreso por pasos (alta, checkout, onboarding…). No gestiona el contenido de cada paso. */
+export default function Stepper({ steps, current, variant, className }: StepperProps): import("react").JSX.Element;

package/dist/components/ui/Stepper.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { vcls } from "./variants.js";
+/** Indicador de progreso por pasos (alta, checkout, onboarding…). No gestiona el contenido de cada paso. */
+export default function Stepper({ steps = "Datos, Envío, Pago, Confirmación", current = 1, variant = "glass", className = "" }) {
+    const list = steps.split(",").map((s) => s.trim()).filter(Boolean);
+    return (_jsx("ol", { className: `ui-steps ${vcls(variant)} ${className}`, children: list.map((s, i) => (_jsxs("li", { className: `ui-steps__item ${i < current ? "is-done" : ""} ${i === current ? "is-current" : ""}`, children: [_jsx("span", { className: "ui-steps__mark", "aria-hidden": true, children: i < current ? "✓" : i + 1 }), _jsx("span", { children: s })] }, s + i))) }));
+}

package/dist/components/ui/Table.d.ts

@@ -0,0 +1,10 @@
+import { type Variant } from "./variants.js";
+export type TableProps = {
+    /** CSV: la primera línea son las cabeceras; separa con «,» */
+    csv?: string;
+    striped?: boolean;
+    variant?: Variant;
+    className?: string;
+};
+/** Tabla de datos a partir de texto CSV. Cabecera y filas se adaptan a la variante. */
+export default function Table({ csv, striped, variant, className }: TableProps): import("react").JSX.Element;

package/dist/components/ui/Table.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { vcls } from "./variants.js";
+/** Tabla de datos a partir de texto CSV. Cabecera y filas se adaptan a la variante. */
+export default function Table({ csv = "Plan, Clases, Precio\nIniciación, 1, 35 €\nBono 5, 5, 150 €\nSurf trip, 6, 240 €", striped = true, variant = "solid", className = "" }) {
+    const rows = csv.split("\n").map((l) => l.split(",").map((c) => c.trim())).filter((r) => r.some(Boolean));
+    const [head, ...body] = rows;
+    return (_jsx("div", { className: `ui-table-wrap ui-surface ${vcls(variant)} ${className}`, style: { padding: 4 }, children: _jsxs("table", { className: `ui-table ${striped ? "ui-table--striped" : ""}`, children: [head && (_jsx("thead", { children: _jsx("tr", { children: head.map((h, i) => (_jsx("th", { children: h }, h + i))) }) })), _jsx("tbody", { children: body.map((r, i) => (_jsx("tr", { children: r.map((c, j) => (_jsx("td", { children: c }, j))) }, i))) })] }) }));
+}

package/dist/components/ui/Tabs.d.ts

@@ -0,0 +1,12 @@
+import { type Variant } from "./variants.js";
+export type TabsProps = {
+    /** pestañas separadas por comas */
+    items?: string;
+    /** contenido de cada pestaña: una línea por pestaña */
+    content?: string;
+    defaultIndex?: number;
+    variant?: Variant;
+    className?: string;
+};
+/** Pestañas con teclado (←/→). El indicador de la activa cambia con la variante. */
+export default function Tabs({ items, content, defaultIndex, variant, className, }: TabsProps): import("react").JSX.Element;

package/dist/components/ui/Tabs.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { vcls } from "./variants.js";
+/** Pestañas con teclado (←/→). El indicador de la activa cambia con la variante. */
+export default function Tabs({ items = "Resumen, Detalles, Reseñas", content = "Una vista general del producto.\nEspecificaciones técnicas y medidas.\nLo que dicen quienes ya lo usan.", defaultIndex = 0, variant = "glass", className = "", }) {
+    const tabs = useMemo(() => items.split(",").map((s) => s.trim()).filter(Boolean), [items]);
+    const panels = useMemo(() => content.split("\n"), [content]);
+    const [i, setI] = useState(defaultIndex);
+    useEffect(() => setI(Math.min(defaultIndex, Math.max(0, tabs.length - 1))), [defaultIndex, tabs.length]);
+    const cur = Math.min(i, Math.max(0, tabs.length - 1));
+    return (_jsxs("div", { className: `ui-tabs ${vcls(variant)} ${className}`, children: [_jsx("div", { role: "tablist", className: "ui-tabs__list", onKeyDown: (e) => {
+                    if (e.key === "ArrowRight")
+                        setI((cur + 1) % tabs.length);
+                    if (e.key === "ArrowLeft")
+                        setI((cur - 1 + tabs.length) % tabs.length);
+                }, children: tabs.map((t, k) => (_jsx("button", { role: "tab", "aria-selected": k === cur, tabIndex: k === cur ? 0 : -1, className: "ui-tabs__tab", onClick: () => setI(k), children: t }, t + k))) }), _jsx("div", { role: "tabpanel", className: "ui-tabs__panel", children: panels[cur] ?? "" })] }));
+}

package/dist/components/ui/TeamSection.d.ts

@@ -0,0 +1,18 @@
+import { type Variant } from "./variants.js";
+export type TeamSectionProps = {
+    kicker?: string;
+    title?: string;
+    subtitle?: string;
+    /** una por línea: «nombre|rol» */
+    people?: string;
+    /** grid = rejilla · carousel = carrusel de Swiper */
+    layout?: "grid" | "carousel";
+    /** con layout="carousel": tarjetas visibles en pantallas anchas */
+    perView?: number;
+    /** con layout="carousel": segundos entre tarjetas (0 = manual) */
+    autoplay?: number;
+    variant?: Variant;
+    className?: string;
+};
+/** Cabecera de sección + grid de perfiles. Sin fotos: usa el mismo avatar de iniciales que `Testimonial`. */
+export default function TeamSection({ kicker, title, subtitle, people, layout, perView, autoplay, variant, className }: TeamSectionProps): import("react").JSX.Element;

package/dist/components/ui/TeamSection.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Carousel from "./Carousel.js";
+import SectionHeader from "./SectionHeader.js";
+import { vcls } from "./variants.js";
+const DEFAULT_PEOPLE = "Marta Solé|Directora y monitora\nEnzo Rial|Monitor de iniciación\nCarla Duque|Monitora y fotógrafa";
+/** Cabecera de sección + grid de perfiles. Sin fotos: usa el mismo avatar de iniciales que `Testimonial`. */
+export default function TeamSection({ kicker = "El equipo", title = "Quién te va a enseñar", subtitle = "", people = DEFAULT_PEOPLE, layout = "grid", perView = 3, autoplay = 0, variant = "glass", className = "" }) {
+    const rows = people.split("\n").map((l) => l.split("|")).filter((r) => r[0]?.trim());
+    const cards = rows.map(([name, role], i) => {
+        const initials = (name ?? "")
+            .split(" ")
+            .map((w) => w[0])
+            .slice(0, 2)
+            .join("")
+            .toUpperCase();
+        return (_jsxs("div", { className: `ui-team__card ui-surface ${vcls(variant)}`, children: [_jsx("span", { className: "ui-team__avatar", "aria-hidden": true, children: initials }), _jsx("strong", { children: name }), _jsx("span", { children: role })] }, name + i));
+    });
+    return (_jsxs("section", { className: `ui-team ${className}`, children: [_jsx(SectionHeader, { kicker: kicker, title: title, subtitle: subtitle, align: "center", variant: "minimal" }), layout === "carousel" ? (_jsx(Carousel, { perView: perView, autoplay: autoplay, variant: variant, label: title, children: cards })) : (_jsx("div", { className: "ui-team__grid", children: cards }))] }));
+}

package/dist/components/ui/TerminalTyper.d.ts

@@ -0,0 +1,20 @@
+import { type Variant } from "./variants.js";
+export type TerminalTyperProps = {
+    /** una línea por renglón; las que empiezan por el prompt se pintan con `--acc2` */
+    lines: string;
+    /** caracteres por segundo */
+    charsPerSecond?: number;
+    /** @deprecated usa `charsPerSecond` */
+    speed?: number;
+    variant?: Variant;
+    /** barra superior con botones y título */
+    chrome?: boolean;
+    title?: string;
+    cursor?: "block" | "bar" | "underscore";
+    prompt?: string;
+    loop?: boolean;
+    playKey?: number;
+    className?: string;
+};
+/** Terminal que escribe sola, carácter a carácter. Con movimiento reducido muestra todo de golpe. */
+export default function TerminalTyper({ lines, charsPerSecond, speed: legacySpeed, variant, chrome, title, cursor, prompt, loop, playKey, className, }: TerminalTyperProps): import("react").JSX.Element;

package/dist/components/ui/TerminalTyper.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { vcls } from "./variants.js";
+/** Terminal que escribe sola, carácter a carácter. Con movimiento reducido muestra todo de golpe. */
+export default function TerminalTyper({ lines, charsPerSecond, speed: legacySpeed, variant = "terminal", chrome = true, title = "zsh — proyecto", cursor = "block", prompt = "$", loop = true, playKey = 0, className = "", }) {
+    const speed = charsPerSecond ?? legacySpeed ?? 32;
+    const rows = useMemo(() => lines.split("\n"), [lines]);
+    const total = useMemo(() => rows.reduce((n, r) => n + r.length + 6, 0), [rows]);
+    const [typed, setTyped] = useState(0);
+    useEffect(() => {
+        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            setTyped(total);
+            return;
+        }
+        setTyped(0);
+        let raf = 0;
+        let start = 0;
+        const tick = (now) => {
+            if (!start)
+                start = now;
+            const n = ((now - start) / 1000) * speed;
+            if (n >= total + speed * 1.2) {
+                if (loop)
+                    start = now;
+                else {
+                    setTyped(total);
+                    return;
+                }
+            }
+            setTyped(Math.min(total, Math.floor(n)));
+            raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, [total, speed, loop, playKey]);
+    let left = typed;
+    return (_jsxs("div", { className: `ui-term ui-surface ${vcls(variant)} ${className}`, children: [chrome && (_jsxs("div", { className: "ui-term__bar", "aria-hidden": true, children: [_jsx("i", { style: { background: "#ff5f57" } }), _jsx("i", { style: { background: "#febc2e" } }), _jsx("i", { style: { background: "#28c840" } }), _jsx("span", { style: { marginLeft: 8 }, children: title })] })), _jsx("pre", { className: "ui-term__body", "aria-label": lines, children: rows.map((row, i) => {
+                    const n = Math.max(0, Math.min(row.length, left));
+                    left -= row.length + 6;
+                    const active = n > 0 && n < row.length;
+                    const cls = row.startsWith(prompt) ? "ui-term__cmd" : row.startsWith("[ok]") ? "ui-term__ok" : "";
+                    return (_jsxs("span", { className: `ui-term__line ${cls}`, children: [row.slice(0, n), active && _jsx("b", { className: `ui-term__cursor ui-term__cursor--${cursor}` }), "\n"] }, i));
+                }) })] }));
+}

package/dist/components/ui/Testimonial.d.ts

@@ -0,0 +1,19 @@
+import { type CardFill, type CardPattern, type CardTone } from "./fill.js";
+import { type Variant } from "./variants.js";
+export type TestimonialProps = {
+    quote?: string;
+    author?: string;
+    role?: string;
+    /** 0 = sin estrellas */
+    rating?: number;
+    variant?: Variant;
+    /** fondo de la tarjeta: surface · tint · gradient · accent (invertida) · pattern · image (ver fill.ts) */
+    fill?: CardFill;
+    pattern?: CardPattern;
+    tone?: CardTone;
+    /** con fill="image": URL/ruta o `gen:N` */
+    image?: string;
+    className?: string;
+};
+/** Testimonio con avatar de iniciales, valoración y cita. */
+export default function Testimonial({ quote, author, role, rating, variant, fill, pattern, tone, image, className }: TestimonialProps): import("react").JSX.Element;

package/dist/components/ui/Testimonial.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fillProps } from "./fill.js";
+import { vcls } from "./variants.js";
+/** Testimonio con avatar de iniciales, valoración y cita. */
+export default function Testimonial({ quote = "Levanté la tabla el primer día. El equipo es paciente y el mar, una maravilla.", author = "Lucía Pardo", role = "Alumna, curso de iniciación", rating = 5, variant = "glass", fill, pattern, tone, image, className = "" }) {
+    const f = fillProps({ fill, pattern, tone, image });
+    const initials = author.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+    return (_jsxs("figure", { className: `ui-quote ui-surface ${f.className} ${vcls(variant)} ${className}`, style: { margin: 0, ...f.style }, children: [rating > 0 && (_jsxs("div", { className: "ui-quote__stars", "aria-label": `${rating} de 5`, children: ["★".repeat(Math.min(5, rating)), _jsx("span", { style: { opacity: 0.25 }, children: "★".repeat(5 - Math.min(5, rating)) })] })), _jsxs("blockquote", { children: ["\u201C", quote, "\u201D"] }), _jsxs("figcaption", { className: "ui-quote__by", children: [_jsx("span", { className: "ui-quote__avatar", "aria-hidden": true, children: initials }), _jsxs("span", { children: [_jsx("strong", { children: author }), _jsx("span", { children: role })] })] })] }));
+}

package/dist/components/ui/TestimonialSection.d.ts

@@ -0,0 +1,20 @@
+import type { Variant } from "./variants.js";
+export type TestimonialSectionProps = {
+    kicker?: string;
+    title?: string;
+    subtitle?: string;
+    /** un testimonio por línea: «cita|autor|rol|valoración (0-5)» */
+    items?: string;
+    /** grid = rejilla · carousel = carrusel de Swiper */
+    layout?: "grid" | "carousel";
+    /** con layout="carousel": tarjetas visibles en pantallas anchas */
+    perView?: number;
+    /** con layout="carousel": segundos entre tarjetas (0 = manual) */
+    autoplay?: number;
+    /** con layout="carousel": slide = desplazamiento · fade = una cita que se funde con la siguiente · cards = baraja */
+    effect?: "slide" | "fade" | "cards";
+    variant?: Variant;
+    className?: string;
+};
+/** Grid de reseñas (`Testimonial`) con cabecera: prueba social lista para pegar en una landing. */
+export default function TestimonialSection({ kicker, title, subtitle, items, layout, perView, autoplay, effect, variant, className, }: TestimonialSectionProps): import("react").JSX.Element;

package/dist/components/ui/TestimonialSection.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Carousel from "./Carousel.js";
+import SectionHeader from "./SectionHeader.js";
+import Testimonial from "./Testimonial.js";
+const DEFAULT_ITEMS = "Levanté la tabla el primer día. El equipo es paciente y el mar, una maravilla.|Lucía Pardo|Alumna, iniciación|5\n" +
+    "Vinimos en familia y los peques no querían salir del agua.|Marcos Ibáñez|Curso familiar|5\n" +
+    "El monitor grabó mis olas y corregimos la técnica al momento.|Diego Rus|Clases privadas|4";
+/** Grid de reseñas (`Testimonial`) con cabecera: prueba social lista para pegar en una landing. */
+export default function TestimonialSection({ kicker = "Lo que dicen", title = "Alumnos que ya cogieron su ola", subtitle = "", items = DEFAULT_ITEMS, layout = "grid", perView = 3, autoplay = 0, effect = "slide", variant = "glass", className = "", }) {
+    const rows = useMemo(() => items.split("\n").map((l) => l.split("|")).filter((r) => r[0]?.trim()), [items]);
+    const cards = rows.map(([quote, author, role, rating], i) => (_jsx(Testimonial, { quote: quote, author: author, role: role, rating: parseInt(rating, 10) || 0, variant: variant }, author + i)));
+    return (_jsxs("section", { className: `ui-testimonials ${className}`, children: [_jsx(SectionHeader, { kicker: kicker, title: title, subtitle: subtitle, align: "center", variant: "minimal" }), layout === "carousel" ? (_jsx(Carousel, { perView: perView, autoplay: autoplay, effect: effect, loop: true, variant: variant, label: title, children: cards })) : (_jsx("div", { className: "ui-testimonials__grid", children: cards }))] }));
+}

package/dist/components/ui/TextField.d.ts

@@ -0,0 +1,26 @@
+import { type Intent, type LegacyIntent } from "./intent.js";
+import { type Variant } from "./variants.js";
+export type TextFieldProps = {
+    label?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    hint?: string;
+    /** estado de validación con el vocabulario común (ver intent.ts): `danger` marca el campo como inválido (aria-invalid) */
+    intent?: Exclude<Intent, "accent" | "neutral"> | LegacyIntent;
+    /** @deprecated nombre antiguo de `intent`: "default" | "error" | "success" */
+    state?: "default" | "error" | "success";
+    variant?: Variant;
+    size?: "sm" | "md" | "lg";
+    /** carácter delante del texto (@, >, $…) */
+    prefix?: string;
+    type?: "text" | "email" | "password" | "search";
+    /** nombre del campo, para leerlo con `FormData` (ver `ContactForm`) */
+    name?: string;
+    /** dibuja un `<textarea>` en vez de un `<input>` */
+    multiline?: boolean;
+    rows?: number;
+    required?: boolean;
+    className?: string;
+};
+/** Campo de texto con etiqueta, ayuda y estados. El foco y los estados usan `--acc` / colores semánticos. */
+export default function TextField({ label, placeholder, defaultValue, hint, intent, state, variant, size, prefix, type, name, multiline, rows, required, className, }: TextFieldProps): import("react").JSX.Element;

package/dist/components/ui/TextField.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { intentCls, toIntent } from "./intent.js";
+import { vcls } from "./variants.js";
+/** Campo de texto con etiqueta, ayuda y estados. El foco y los estados usan `--acc` / colores semánticos. */
+export default function TextField({ label = "Correo electrónico", placeholder = "tu@correo.com", defaultValue = "", hint = "", intent, state, variant = "glass", size = "md", prefix = "", type = "text", name, multiline = false, rows = 4, required = false, className = "", }) {
+    const [value, setValue] = useState(defaultValue);
+    const raw = intent ?? (state && state !== "default" ? state : undefined);
+    const i = raw ? toIntent(raw, "info") : undefined;
+    const invalid = i === "danger" || undefined;
+    return (_jsxs("label", { className: `ui-field ui-field--${size} ${i ? `ui-field--state ${intentCls(i)}` : ""} ${multiline ? "ui-field--multiline" : ""} ${className}`, children: [label && _jsx("span", { className: "ui-field__label", children: label }), _jsxs("span", { className: `ui-field__box ui-surface ${vcls(variant)}`, children: [prefix && _jsx("span", { className: "ui-field__prefix", "aria-hidden": true, children: prefix }), multiline ? (_jsx("textarea", { "aria-invalid": invalid, name: name, rows: rows, placeholder: placeholder, value: value, required: required, onChange: (e) => setValue(e.target.value) }, defaultValue)) : (_jsx("input", { "aria-invalid": invalid, type: type, name: name, placeholder: placeholder, value: value, required: required, onChange: (e) => setValue(e.target.value) }, defaultValue))] }), hint && _jsx("span", { className: "ui-field__hint", children: hint })] }));
+}