trama-ui 0.1.0

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

@@ -0,0 +1,35 @@
+import { type PricingCardProps } from "./PricingCard.js";
+import type { CardFill } from "./fill.js";
+import { type Variant } from "./variants.js";
+export type PricingSectionProps = {
+    kicker?: string;
+    title?: string;
+    subtitle?: string;
+    /**
+     * un plan por línea: «nombre|precio|periodo|destacado(si/no)|características separadas por ;|descripción|precio anual».
+     * Las dos últimas son opcionales; una característica que empieza por «-» se muestra como no incluida. Si algún plan
+     * trae precio anual, aparece el selector Mensual / Anual.
+     */
+    plans?: string;
+    /** grid = rejilla · list = una columna de tarjetas horizontales · carousel = carrusel de Swiper */
+    layout?: "grid" | "list" | "carousel";
+    /** maquetación de cada tarjeta en `grid` y `carousel` */
+    cardLayout?: "classic" | "compact";
+    /** cómo se destaca el plan marcado (ver PricingCard) */
+    highlight?: PricingCardProps["highlight"];
+    /** fondo de las tarjetas no destacadas (ver fill.ts) */
+    fill?: CardFill;
+    /** texto del periodo cuando se elige facturación anual */
+    yearlyPeriod?: string;
+    /** etiqueta del ahorro junto a «Anual» (vacío = sin etiqueta) */
+    yearlyNote?: string;
+    /** con layout="carousel": tarjetas visibles en pantallas anchas */
+    perView?: number;
+    /** con layout="carousel": segundos entre tarjetas (0 = manual) */
+    autoplay?: number;
+    variant?: Variant;
+    className?: string;
+};
+export declare const DEFAULT_PLANS: string;
+/** Cabecera + planes (`PricingCard`), con selector mensual/anual opcional: la sección de precios lista para pegar. */
+export default function PricingSection({ kicker, title, subtitle, plans, layout, cardLayout, highlight, fill, yearlyPeriod, yearlyNote, perView, autoplay, variant, className, }: PricingSectionProps): import("react").JSX.Element;

package/dist/components/ui/PricingSection.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import PricingCard from "./PricingCard.js";
+import Carousel from "./Carousel.js";
+import SectionHeader from "./SectionHeader.js";
+import { vcls } from "./variants.js";
+export const DEFAULT_PLANS = "Básico|9 €|/ mes|no|Un proyecto;Exportación PNG;Soporte por email;-Dominio propio|Para probar sin compromiso|90 €\n" +
+    "Pro|29 €|/ mes|si|Proyectos ilimitados;Soporte prioritario;Exportación a PNG y SVG;Dominio propio|Para quien publica cada semana|290 €\n" +
+    "Equipo|79 €|/ mes|no|Todo lo de Pro;5 puestos;Panel de administración;Facturación centralizada|Para estudios y agencias|790 €";
+/** Cabecera + planes (`PricingCard`), con selector mensual/anual opcional: la sección de precios lista para pegar. */
+export default function PricingSection({ kicker = "Precios", title = "Un plan para cada tamaño", subtitle = "Cambia o cancela cuando quieras.", plans = DEFAULT_PLANS, layout = "grid", cardLayout = "classic", highlight = "invert", fill = "surface", yearlyPeriod = "/ año", yearlyNote = "2 meses gratis", perView = 3, autoplay = 0, variant = "glass", className = "", }) {
+    const rows = useMemo(() => plans.split("\n").map((l) => l.split("|").map((x) => x.trim())).filter((r) => r[0]), [plans]);
+    const hasYearly = rows.some((r) => r[6]);
+    const [yearly, setYearly] = useState(false);
+    const cards = rows.map(([plan, price, period, hl, features, description, yearlyPrice], i) => {
+        const useYear = yearly && !!yearlyPrice;
+        return (_jsx(PricingCard, { plan: plan, description: description, price: useYear ? yearlyPrice : price, period: useYear ? yearlyPeriod : period, note: useYear ? `equivale a ${price} ${period}`.replace(/\s+/g, " ") : "", highlighted: hl === "si", highlight: highlight, features: (features ?? "").split(";").filter(Boolean).join("\n"), layout: layout === "list" ? "horizontal" : cardLayout, fill: fill, variant: variant }, plan + i));
+    });
+    return (_jsxs("section", { className: `ui-pricing ${className}`, children: [_jsx(SectionHeader, { kicker: kicker, title: title, subtitle: subtitle, align: "center", variant: "minimal" }), hasYearly && (_jsxs("div", { className: `ui-billing ui-surface ${vcls(variant)}`, role: "group", "aria-label": "Periodo de facturaci\u00F3n", children: [_jsx("button", { type: "button", "aria-pressed": !yearly, onClick: () => setYearly(false), children: "Mensual" }), _jsxs("button", { type: "button", "aria-pressed": yearly, onClick: () => setYearly(true), children: ["Anual", yearlyNote && _jsx("span", { className: "ui-billing__note", children: yearlyNote })] })] })), layout === "carousel" ? (_jsx(Carousel, { perView: perView, autoplay: autoplay, variant: variant, label: title, children: cards })) : (_jsx("div", { className: `ui-pricing__grid ui-pricing__grid--${layout}`, children: cards }))] }));
+}

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

@@ -0,0 +1,17 @@
+import { type Variant } from "./variants.js";
+export type ProgressProps = {
+    value?: number;
+    label?: string;
+    showValue?: boolean;
+    variant?: Variant;
+    /** franjas animadas en la barra */
+    striped?: boolean;
+    /** dibuja la barra con caracteres: [#####-----] */
+    ascii?: boolean;
+    /** caracteres del modo ascii: lleno y vacío */
+    fillChar?: string;
+    emptyChar?: string;
+    className?: string;
+};
+/** Barra de progreso. `ascii` la convierte en texto (por defecto ya lo es en retro y terminal cuando se activa). */
+export default function Progress({ value, label, showValue, variant, striped, ascii, fillChar, emptyChar, className }: ProgressProps): import("react").JSX.Element;

package/dist/components/ui/Progress.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { vcls } from "./variants.js";
+/** Barra de progreso. `ascii` la convierte en texto (por defecto ya lo es en retro y terminal cuando se activa). */
+export default function Progress({ value = 62, label = "Subiendo", showValue = true, variant = "glass", striped = false, ascii = false, fillChar = "#", emptyChar = "-", className = "" }) {
+    const v = Math.max(0, Math.min(100, value));
+    const cells = 24;
+    const filled = Math.round((v / 100) * cells);
+    return (_jsxs("div", { className: `ui-progress ${striped ? "ui-progress--striped" : ""} ${vcls(variant)} ${className}`, style: { "--v": `${v}%` }, children: [_jsxs("div", { className: "ui-progress__head", children: [_jsx("span", { children: label }), showValue && _jsxs("output", { children: [Math.round(v), "%"] })] }), ascii ? (_jsxs("pre", { className: "ui-progress__ascii", role: "progressbar", "aria-valuenow": v, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": label, children: ["[", fillChar.repeat(filled), emptyChar.repeat(cells - filled), "]"] })) : (_jsx("div", { className: "ui-progress__track", role: "progressbar", "aria-valuenow": v, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": label, children: _jsx("div", { className: "ui-progress__fill" }) }))] }));
+}

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

@@ -0,0 +1,10 @@
+import { type Variant } from "./variants.js";
+export type RadioGroupProps = {
+    label?: string;
+    options?: string;
+    defaultValue?: string;
+    variant?: Variant;
+    className?: string;
+};
+/** Selección única entre varias opciones. Retro y terminal las muestran como texto `(•)`/`( )`. */
+export default function RadioGroup({ label, options, defaultValue, variant, className }: RadioGroupProps): import("react").JSX.Element;

package/dist/components/ui/RadioGroup.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { vcls } from "./variants.js";
+/** Selección única entre varias opciones. Retro y terminal las muestran como texto `(•)`/`( )`. */
+export default function RadioGroup({ label = "Plan", options = "Mensual, Anual", defaultValue = "Mensual", variant = "glass", className = "" }) {
+    const list = useMemo(() => options.split(",").map((s) => s.trim()).filter(Boolean), [options]);
+    const [value, setValue] = useState(defaultValue);
+    useEffect(() => setValue(defaultValue), [defaultValue]);
+    return (_jsxs("fieldset", { className: `ui-rgroup ${vcls(variant)} ${className}`, children: [label && _jsx("legend", { children: label }), list.map((o) => (_jsxs("label", { className: "ui-rgroup__item", children: [_jsx("button", { type: "button", role: "radio", "aria-checked": o === value, className: `ui-rgroup__dot ${o === value ? "is-on" : ""}`, onClick: () => setValue(o) }), o] }, o)))] }));
+}

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

@@ -0,0 +1,14 @@
+import { type Variant } from "./variants.js";
+export type RangeSliderProps = {
+    label?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    defaultValue?: number;
+    unit?: string;
+    showValue?: boolean;
+    variant?: Variant;
+    className?: string;
+};
+/** Deslizador nativo con pista y pulgar adaptados a cada variante. */
+export default function RangeSlider({ label, min, max, step, defaultValue, unit, showValue, variant, className }: RangeSliderProps): import("react").JSX.Element;

package/dist/components/ui/RangeSlider.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { vcls } from "./variants.js";
+/** Deslizador nativo con pista y pulgar adaptados a cada variante. */
+export default function RangeSlider({ label = "Intensidad", min = 0, max = 100, step = 1, defaultValue = 40, unit = "%", showValue = true, variant = "glass", className = "" }) {
+    const [v, setV] = useState(defaultValue);
+    useEffect(() => setV(defaultValue), [defaultValue]);
+    const pct = ((v - min) / Math.max(1, max - min)) * 100;
+    return (_jsxs("div", { className: `ui-range ${vcls(variant)} ${className}`, style: { "--pct": `${pct}%` }, children: [_jsxs("div", { className: "ui-range__head", children: [_jsx("span", { children: label }), showValue && (_jsxs("output", { children: [v, unit] }))] }), _jsx("input", { type: "range", min: min, max: max, step: step, value: v, onChange: (e) => setV(parseFloat(e.target.value)), "aria-label": label })] }));
+}

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

@@ -0,0 +1,48 @@
+import { type CSSProperties, type ReactNode } from "react";
+export declare const REVEAL_KINDS: readonly ["fade", "slide", "scale", "blur", "wipe", "flip", "iris"];
+export type RevealKind = (typeof REVEAL_KINDS)[number];
+export type RevealDirection = "up" | "down" | "left" | "right";
+export type RevealEasing = "out" | "in-out" | "back" | "linear";
+export type RevealProps = {
+    /** efecto; `rise` (= slide hacia arriba) y `stagger` (= slide + escalonado 0,12 s) se mantienen por compatibilidad */
+    kind?: RevealKind | "rise" | "stagger";
+    /** hacia dónde se mueve el contenido al entrar (slide, wipe, flip) */
+    direction?: RevealDirection;
+    /** distancia en px de slide (y del ligero desplazamiento de blur) */
+    distance?: number;
+    duration?: number;
+    delay?: number;
+    easing?: RevealEasing;
+    /** segundos entre hijos directos (0 = todo el bloque a la vez) */
+    stagger?: number;
+    /** trocea un texto plano en palabras o letras y las escalona (solo si `children` es texto) */
+    split?: "none" | "words" | "chars";
+    /** `mount`: al montar · `inview`: al entrar en pantalla · `scroll`: el progreso sigue al scroll (scrub) */
+    trigger?: "mount" | "inview" | "scroll";
+    /** con `inview`: solo la primera vez (true) o cada vez que vuelve a entrar (false) */
+    once?: boolean;
+    /** con `inview`: fracción visible (0–1) necesaria para disparar */
+    threshold?: number;
+    /** con `inview`: margen del viewport (rootMargin); el valor por defecto dispara un poco antes del borde inferior */
+    margin?: string;
+    /** etiqueta del contenedor */
+    as?: "div" | "section" | "article" | "header" | "footer" | "ul" | "ol" | "li" | "p" | "span" | "h1" | "h2" | "h3" | "h4";
+    /** cambia para volver a lanzar la animación desde fuera */
+    playKey?: number;
+    onReveal?: () => void;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Revela su contenido al montar, al entrar en pantalla o siguiendo el scroll. Siete efectos × cuatro direcciones,
+ * escalonado de hijos o de palabras/letras, y repetición al volver a entrar.
+ *
+ * Todo lo mueve una variable CSS registrada (`--rv-p`, 0 → 1, `@property` en ui-kit.css) que cada efecto traduce
+ * a opacidad, desplazamiento, recorte… El estado oculto viene ya en el HTML del servidor (sin parpadeo antes de
+ * hidratar); la animación es de la Web Animations API sobre `--rv-p` (sin GSAP, y sin tocar el `transition` de los
+ * hijos); el modo scroll reutiliza las mismas fórmulas. Sin JS (`<noscript>`) o con movimiento reducido el contenido
+ * se ve tal cual. Al terminar, las reglas del efecto dejan de aplicarse: no queda transform/filter/clip-path que
+ * atrape a un `Modal`/`Drawer` (position: fixed) de dentro.
+ */
+export default function Reveal({ kind, direction, distance, duration, delay, easing, stagger, split, trigger, once, threshold, margin, as: Tag, playKey, onReveal, children, className, style, }: RevealProps): import("react").JSX.Element;

package/dist/components/ui/Reveal.js

@@ -0,0 +1,181 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useEffect, useRef } from "react";
+export const REVEAL_KINDS = ["fade", "slide", "scale", "blur", "wipe", "flip", "iris"];
+const EASE = {
+    out: "cubic-bezier(0.22, 1, 0.36, 1)",
+    "in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
+    back: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    linear: "linear",
+};
+/** Desplazamiento inicial, lado recortado y giro de cada dirección («up» = entra subiendo). */
+const DIR = {
+    up: { dx: 0, dy: 1, clip: "--rv-ct", rot: ["--rv-rx", "55deg"], origin: "50% 100%" },
+    down: { dx: 0, dy: -1, clip: "--rv-cb", rot: ["--rv-rx", "-55deg"], origin: "50% 0%" },
+    left: { dx: 1, dy: 0, clip: "--rv-cl", rot: ["--rv-ry", "-55deg"], origin: "100% 50%" },
+    right: { dx: -1, dy: 0, clip: "--rv-cr", rot: ["--rv-ry", "55deg"], origin: "0% 50%" },
+};
+/** Parte un texto en unidades animables sin tocar el DOM de React (a diferencia de SplitText, guía §10). */
+function splitText(text, mode) {
+    return text.split(/(\s+)/).map((part, i) => {
+        if (!part)
+            return null;
+        if (/^\s+$/.test(part))
+            return part;
+        if (mode === "words")
+            return _jsx("span", { className: "ui-rv__u", "aria-hidden": true, children: part }, i);
+        return (_jsx("span", { className: "ui-rv__word", "aria-hidden": true, children: Array.from(part).map((c, j) => _jsx("span", { className: "ui-rv__u", children: c }, j)) }, i));
+    });
+}
+/**
+ * Revela su contenido al montar, al entrar en pantalla o siguiendo el scroll. Siete efectos × cuatro direcciones,
+ * escalonado de hijos o de palabras/letras, y repetición al volver a entrar.
+ *
+ * Todo lo mueve una variable CSS registrada (`--rv-p`, 0 → 1, `@property` en ui-kit.css) que cada efecto traduce
+ * a opacidad, desplazamiento, recorte… El estado oculto viene ya en el HTML del servidor (sin parpadeo antes de
+ * hidratar); la animación es de la Web Animations API sobre `--rv-p` (sin GSAP, y sin tocar el `transition` de los
+ * hijos); el modo scroll reutiliza las mismas fórmulas. Sin JS (`<noscript>`) o con movimiento reducido el contenido
+ * se ve tal cual. Al terminar, las reglas del efecto dejan de aplicarse: no queda transform/filter/clip-path que
+ * atrape a un `Modal`/`Drawer` (position: fixed) de dentro.
+ */
+export default function Reveal({ kind = "slide", direction = "up", distance = 40, duration = 0.8, delay = 0, easing = "out", stagger, split = "none", trigger = "inview", once = true, threshold = 0.2, margin = "0px 0px -10% 0px", as: Tag = "div", playKey = 0, onReveal, children, className = "", style, }) {
+    const ref = useRef(null);
+    const onRevealRef = useRef(onReveal);
+    onRevealRef.current = onReveal;
+    const effect = kind === "rise" || kind === "stagger" ? "slide" : kind;
+    const step = stagger ?? (kind === "stagger" ? 0.12 : split !== "none" ? (split === "chars" ? 0.03 : 0.08) : 0);
+    const text = typeof children === "string" ? children : Children.toArray(children).every((c) => typeof c === "string" || typeof c === "number") ? Children.toArray(children).join("") : null;
+    const splitMode = split !== "none" && text !== null ? split : "none";
+    const mode = splitMode === "chars" ? "chars" : splitMode === "words" || step > 0 ? "each" : "self";
+    const d = DIR[direction];
+    const count = Children.count(children);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        // Unidades animadas: el propio contenedor, sus hijos directos o las palabras/letras
+        const units = () => mode === "self" ? [el] : Array.from(el.querySelectorAll(mode === "chars" ? ":scope > .ui-rv__word > .ui-rv__u" : ":scope > :not(.ui-rv__sr)"));
+        const items = units();
+        items.forEach((it, i) => it.style.setProperty("--rv-i", String(i)));
+        el.style.setProperty("--rv-n", String(items.length));
+        // En modo scroll el escalonado se reparte dentro del recorrido: la última unidad empieza al 40 %
+        el.style.setProperty("--rv-k", trigger === "scroll" && step > 0 && items.length > 1 ? String(0.6 / (items.length - 1)) : "0");
+        let fired = false;
+        let anims = [];
+        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        const reveal = () => {
+            if (fired)
+                return;
+            fired = true;
+            onRevealRef.current?.();
+        };
+        const stop = () => {
+            anims.forEach((a) => a.cancel());
+            anims = [];
+        };
+        // Estado final estático (data-rv="1") + una animación de --rv-p 0 → 1 por unidad con su retardo; `fill:
+        // backwards` mantiene el 0 durante el retardo. Al acabar todas, data-rv-done retira las reglas del efecto.
+        const show = () => {
+            stop();
+            el.removeAttribute("data-rv-done");
+            el.dataset.rv = "1";
+            reveal();
+            if (reduced || typeof el.animate !== "function")
+                return el.setAttribute("data-rv-done", "");
+            anims = items.map((it, i) => it.animate([{ "--rv-p": "0" }, { "--rv-p": "1" }], {
+                duration: duration * 1000,
+                delay: (delay + i * step) * 1000,
+                easing: EASE[easing],
+                fill: "backwards",
+            }));
+            const current = anims;
+            Promise.all(current.map((a) => a.finished)).then(() => current === anims && el.setAttribute("data-rv-done", ""), () => { });
+        };
+        const hide = () => {
+            stop();
+            el.removeAttribute("data-rv-done");
+            el.dataset.rv = "0";
+        };
+        const cleanups = [stop];
+        if (trigger === "scroll") {
+            stop();
+            el.removeAttribute("data-rv-done");
+            el.dataset.rv = "scroll";
+            let raf = 0;
+            const update = () => {
+                raf = 0;
+                const r = el.getBoundingClientRect();
+                const vh = window.innerHeight;
+                // 0 cuando el borde superior asoma por abajo, 1 cuando llega al 25 % superior de la pantalla
+                const p = Math.min(1, Math.max(0, (vh - r.top) / (vh * 0.75)));
+                el.style.setProperty("--rv-t", p.toFixed(4));
+                if (p >= 1)
+                    reveal();
+            };
+            const onScroll = () => (raf ||= requestAnimationFrame(update));
+            update();
+            // captura: también los scroll de contenedores internos (p. ej. el escenario del catálogo)
+            window.addEventListener("scroll", onScroll, { capture: true, passive: true });
+            window.addEventListener("resize", onScroll);
+            cleanups.push(() => {
+                cancelAnimationFrame(raf);
+                window.removeEventListener("scroll", onScroll, { capture: true });
+                window.removeEventListener("resize", onScroll);
+                el.style.removeProperty("--rv-t");
+            });
+        }
+        else if (trigger === "inview") {
+            hide();
+            const showNow = () => {
+                stop();
+                el.dataset.rv = "1";
+                el.setAttribute("data-rv-done", "");
+                reveal();
+            };
+            const io = new IntersectionObserver(([e]) => {
+                if (e.isIntersecting) {
+                    show();
+                    if (once)
+                        disconnect();
+                }
+                else if (!once && el.dataset.rv === "1")
+                    hide();
+            }, { threshold, rootMargin: margin });
+            // Si queda por encima sin haberse visto (recarga a mitad de página, enlace con #ancla, salto de scroll), el
+            // observer principal no avisa: no cruza ningún umbral. Este segundo, con el viewport extendido hacia arriba,
+            // sí; se muestra sin animación para no encontrarse huecos vacíos al subir.
+            const above = new IntersectionObserver(([e]) => {
+                if (e.isIntersecting && e.boundingClientRect.bottom <= 0 && el.dataset.rv !== "1") {
+                    showNow();
+                    if (once)
+                        disconnect();
+                }
+            }, { rootMargin: "100000px 0px 0px 0px" });
+            const disconnect = () => {
+                io.disconnect();
+                above.disconnect();
+            };
+            io.observe(el);
+            above.observe(el);
+            cleanups.push(disconnect);
+        }
+        else {
+            show();
+        }
+        return () => cleanups.forEach((f) => f());
+    }, [effect, direction, distance, mode, trigger, once, threshold, margin, step, delay, duration, easing, playKey, text, count]);
+    const vars = {
+        "--rv-dur": `${duration}s`,
+        "--rv-delay": `${delay}s`,
+        "--rv-stagger": `${step}s`,
+        "--rv-ease": EASE[easing],
+        "--rv-dx": `${d.dx * distance}px`,
+        "--rv-dy": `${d.dy * distance}px`,
+        [d.clip]: "100%",
+        [d.rot[0]]: d.rot[1],
+        "--rv-origin": d.origin,
+        ...style,
+    };
+    const content = splitMode !== "none" && text !== null ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "ui-rv__sr", children: text }), splitText(text, splitMode)] })) : (children);
+    return (_jsxs(_Fragment, { children: [_jsx("noscript", { dangerouslySetInnerHTML: { __html: "<style>.ui-rv{--rv-t:1!important}</style>" } }), _jsx(Tag, { ref: ref, "data-rv": "0", className: `ui-rv ui-rv--${effect} ui-rv--${mode} ${className}`, style: vars, children: content })] }));
+}

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

@@ -0,0 +1,14 @@
+export type SceneFlashProps = {
+    kind?: "sweep" | "iris" | "slices" | "blinds" | "pixels";
+    duration?: number;
+    /** lanza la transición en bucle cada pocos segundos */
+    loop?: boolean;
+    /** cambia el número para lanzarla desde fuera (p. ej. al cruzar de sección) */
+    playKey?: number;
+    className?: string;
+};
+/**
+ * Transición breve para cambios de escena. Ocupa el padre (que debe tener `position: relative`) y
+ * no bloquea el puntero. Usa `--acc` y `--acc2`. `blinds` (persianas) y `pixels` (mosaico) animan celdas escalonadas.
+ */
+export default function SceneFlash({ kind, duration, loop, playKey, className }: SceneFlashProps): import("react").JSX.Element;

package/dist/components/ui/SceneFlash.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+const CELLS = { blinds: 10, pixels: 96 };
+/**
+ * Transición breve para cambios de escena. Ocupa el padre (que debe tener `position: relative`) y
+ * no bloquea el puntero. Usa `--acc` y `--acc2`. `blinds` (persianas) y `pixels` (mosaico) animan celdas escalonadas.
+ */
+export default function SceneFlash({ kind = "sweep", duration = 1, loop = false, playKey = 0, className = "" }) {
+    const el = useRef(null);
+    useEffect(() => {
+        const node = el.current;
+        if (!node)
+            return;
+        let disposed = false;
+        const cleanups = [];
+        const cells = kind === "blinds" || kind === "pixels" ? Array.from(node.children) : [];
+        (async () => {
+            const { gsap } = await import("gsap");
+            if (disposed)
+                return;
+            gsap.set(cells.length ? cells : node, { autoAlpha: 0 });
+            if (!cells.length)
+                gsap.set(node, { autoAlpha: 0 });
+            const run = () => {
+                gsap.killTweensOf(cells.length ? cells : node);
+                if (kind === "sweep")
+                    gsap.fromTo(node, { yPercent: 100, autoAlpha: 1 }, { yPercent: -110, duration, ease: "power2.inOut", onComplete: () => void gsap.set(node, { autoAlpha: 0 }) });
+                else if (kind === "iris")
+                    gsap.fromTo(node, { scale: 0, autoAlpha: 0.85 }, { scale: 3.2, autoAlpha: 0, duration: duration * 1.1, ease: "power2.out" });
+                else if (kind === "slices")
+                    gsap.fromTo(node, { xPercent: -100, autoAlpha: 1, skewX: -18 }, { xPercent: 100, duration: duration * 0.55, ease: "power3.inOut", onComplete: () => void gsap.set(node, { autoAlpha: 0 }) });
+                else
+                    gsap.fromTo(cells, { autoAlpha: 0 }, { autoAlpha: 1, duration: duration * 0.35, ease: "none", stagger: { each: (duration * 0.65) / cells.length, from: kind === "pixels" ? "random" : "start" }, yoyo: true, repeat: 1 });
+            };
+            if (playKey > 0)
+                run();
+            if (loop) {
+                const id = setInterval(run, (duration + 1.4) * 1000);
+                cleanups.push(() => clearInterval(id));
+            }
+            cleanups.push(() => gsap.killTweensOf(cells.length ? cells : node));
+        })();
+        return () => {
+            disposed = true;
+            cleanups.reverse().forEach((f) => f());
+        };
+    }, [kind, duration, loop, playKey]);
+    const count = kind === "blinds" ? CELLS.blinds : kind === "pixels" ? CELLS.pixels : 0;
+    return (_jsx("div", { ref: el, className: `ui-flash ui-flash--${kind} ${className}`, "aria-hidden": true, children: Array.from({ length: count }, (_, i) => (_jsx("i", { className: "ui-flash__cell" }, i))) }, kind));
+}

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

@@ -0,0 +1,31 @@
+import { type Tone } from "./variants.js";
+export type ScrambleTextProps = {
+    text: string;
+    /** caracteres que se ven mientras se descifra */
+    chars?: string;
+    duration?: number;
+    /** velocidad de cambio de los glifos (0.2 lento – 2 rápido) */
+    speed?: number;
+    /** cuándo se lanza: al montar, al pasar el ratón o en bucle */
+    trigger?: "mount" | "hover" | "loop";
+    as?: "h1" | "h2" | "h3" | "p" | "span";
+    /** tamaño de letra en px */
+    fontSize?: number;
+    /** @deprecated usa `fontSize` */
+    size?: number;
+    weight?: number;
+    /** color: un token, o un degradado entre --acc y --acc2 */
+    tone?: Tone | "gradient";
+    align?: "left" | "center" | "right";
+    uppercase?: boolean;
+    /** espaciado entre letras en em (−0.05 – 0.3) */
+    tracking?: number;
+    /** cambia el número para repetir la animación desde fuera */
+    playKey?: number;
+    className?: string;
+};
+/**
+ * Texto que se "descifra" con ScrambleText de GSAP. El texto real siempre está en el DOM
+ * (legible sin JS); el efecto solo lo anima.
+ */
+export default function ScrambleText({ text, chars, duration, speed, trigger, as: Tag, fontSize, size: legacySize, weight, tone, align, uppercase, tracking, playKey, className, }: ScrambleTextProps): import("react").JSX.Element;

package/dist/components/ui/ScrambleText.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { tcls } from "./variants.js";
+/**
+ * Texto que se "descifra" con ScrambleText de GSAP. El texto real siempre está en el DOM
+ * (legible sin JS); el efecto solo lo anima.
+ */
+export default function ScrambleText({ text, chars = "!<>-_\\/[]{}=+*^?#", duration = 1.2, speed = 0.6, trigger = "mount", as: Tag = "h2", fontSize, size: legacySize, weight = 800, tone = "fg", align = "center", uppercase = false, tracking = -0.02, playKey = 0, className = "", }) {
+    const size = fontSize ?? legacySize ?? 40;
+    const inner = useRef(null);
+    useEffect(() => {
+        const el = inner.current;
+        if (!el)
+            return;
+        let disposed = false;
+        const cleanups = [];
+        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        (async () => {
+            const { gsap } = await import("gsap");
+            const { ScrambleTextPlugin } = await import("gsap/ScrambleTextPlugin");
+            if (disposed)
+                return;
+            gsap.registerPlugin(ScrambleTextPlugin);
+            const run = () => gsap.to(el, { duration, scrambleText: { text, chars, revealDelay: 0.15, speed }, ease: "none", overwrite: true });
+            if (!reduce) {
+                if (trigger === "hover") {
+                    el.parentElement?.addEventListener("mouseenter", run);
+                    cleanups.push(() => el.parentElement?.removeEventListener("mouseenter", run));
+                }
+                else {
+                    el.textContent = " ";
+                    run();
+                    if (trigger === "loop") {
+                        const id = setInterval(run, (duration + 1.6) * 1000);
+                        cleanups.push(() => clearInterval(id));
+                    }
+                }
+            }
+            cleanups.push(() => {
+                gsap.killTweensOf(el);
+                el.textContent = text;
+            });
+        })();
+        return () => {
+            disposed = true;
+            cleanups.reverse().forEach((f) => f());
+        };
+    }, [text, chars, duration, speed, trigger, playKey]);
+    return (_jsx(Tag, { className: `ui-scramble ${tone === "gradient" ? "ui-scramble--gradient" : tcls(tone)} ${uppercase ? "ui-scramble--upper" : ""} ${className}`, style: { fontSize: size, fontWeight: weight, textAlign: align, letterSpacing: `${tracking}em` }, children: _jsx("span", { ref: inner, children: text }, text) }));
+}

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

@@ -0,0 +1,15 @@
+import { type Variant } from "./variants.js";
+export type ScrollAreaProps = {
+    /** un párrafo por línea */
+    content?: string;
+    height?: number;
+    variant?: Variant;
+    className?: string;
+};
+/**
+ * Caja de contenido largo (registro de cambios, comentarios, salida de terminal…) con su propia
+ * barra de desplazamiento — ver la sección "Scrollbars personalizadas" en `components/ui/styles/ui-kit.css`: la
+ * barra la hereda automáticamente cualquier superficie `ui-s--<variante>`, este componente es solo
+ * el envoltorio con una altura fija para demostrarla y para usarla directamente en un proyecto.
+ */
+export default function ScrollArea({ content, height, variant, className }: ScrollAreaProps): import("react").JSX.Element;

package/dist/components/ui/ScrollArea.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { vcls } from "./variants.js";
+const DEFAULT_CONTENT = "Registro de cambios\n" +
+    "v1.4.0 — Panel de tokens con selector de tipografía y fuentes de Google autoalojadas.\n" +
+    "v1.3.0 — Categoría «Secciones»: hero, contacto, precios, FAQ y más, listos para pegar.\n" +
+    "v1.2.0 — Entrada, salida y hover por composición (Presence y HoverFX) para todo el catálogo.\n" +
+    "v1.1.0 — Comparador de los 7 estilos y vista «en caso real» por categoría.\n" +
+    "v1.0.0 — Primera versión del catálogo: tokens, sistema de estilos y 20 componentes.";
+/**
+ * Caja de contenido largo (registro de cambios, comentarios, salida de terminal…) con su propia
+ * barra de desplazamiento — ver la sección "Scrollbars personalizadas" en `components/ui/styles/ui-kit.css`: la
+ * barra la hereda automáticamente cualquier superficie `ui-s--<variante>`, este componente es solo
+ * el envoltorio con una altura fija para demostrarla y para usarla directamente en un proyecto.
+ */
+export default function ScrollArea({ content = DEFAULT_CONTENT, height = 220, variant = "glass", className = "" }) {
+    const lines = content.split("\n").filter((l) => l.trim());
+    return (_jsx("div", { className: `ui-scroll ui-surface ${vcls(variant)} ${className}`, style: { height }, children: lines.map((l, i) => (_jsx("p", { className: i === 0 ? "ui-scroll__head" : undefined, children: l }, i))) }));
+}

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

@@ -0,0 +1,12 @@
+import { type Variant } from "./variants.js";
+export type SectionHeaderProps = {
+    kicker?: string;
+    title?: string;
+    subtitle?: string;
+    align?: "left" | "center";
+    rule?: "none" | "line" | "ascii" | "dots";
+    variant?: Variant;
+    className?: string;
+};
+/** Cabecera de sección: sobretítulo, titular, subtítulo y regla decorativa. */
+export default function SectionHeader({ kicker, title, subtitle, align, rule, variant, className }: SectionHeaderProps): import("react").JSX.Element;

package/dist/components/ui/SectionHeader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { vcls } from "./variants.js";
+/** Cabecera de sección: sobretítulo, titular, subtítulo y regla decorativa. */
+export default function SectionHeader({ kicker = "Cómo funciona", title = "Tres pasos y estás en el agua", subtitle = "Reserva, elige tu horario y nosotros nos ocupamos del resto.", align = "left", rule = "line", variant = "minimal", className = "" }) {
+    return (_jsxs("header", { className: `ui-sh ${align === "center" ? "ui-sh--center" : ""} ${vcls(variant)} ${className}`, children: [kicker && _jsx("span", { className: "ui-sh__kicker", children: kicker }), _jsx("h2", { children: title }), subtitle && _jsx("p", { children: subtitle }), rule === "line" && _jsx("span", { className: "ui-sh__line" }), rule === "ascii" && _jsx("span", { className: "ui-sh__rule", "aria-hidden": true, children: "=".repeat(60) }), rule === "dots" && _jsx("span", { className: "ui-sh__rule", "aria-hidden": true, children: ". ".repeat(30) })] }));
+}

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

@@ -0,0 +1,17 @@
+import { type Variant } from "./variants.js";
+export type SelectProps = {
+    label?: string;
+    options?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    size?: "sm" | "md" | "lg";
+    variant?: Variant;
+    className?: string;
+};
+/**
+ * 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, options, defaultValue, placeholder, size, variant, className, }: SelectProps): import("react").JSX.Element;