trama-ui 0.1.0

package/dist/components/ui/GridBackground.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Fondo de rejilla en CSS puro (sin canvas): la opción más ligera para fondos discretos. Rellena su contenedor. */
+export default function GridBackground({ kind = "dots", cellSize, size: legacySize, opacity = 0.6, fade = true, drift = false, className = "" }) {
+    const size = cellSize ?? legacySize ?? 28;
+    return (_jsx("div", { className: `ui-grid ui-grid--${kind} ${fade ? "ui-grid--fade" : ""} ${drift ? "ui-grid--drift" : ""} ${className}`, style: { "--gs": `${size}px`, "--gop": opacity }, "aria-hidden": true, children: _jsx("div", { className: "ui-grid__layer" }) }));
+}

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

@@ -0,0 +1,21 @@
+import type { Variant } from "./variants.js";
+export type HeroProps = {
+    kicker?: string;
+    title?: string;
+    subtitle?: string;
+    primaryCta?: string;
+    secondaryCta?: string;
+    /** insignias de confianza separadas por comas; vacío = ninguna */
+    badges?: string;
+    align?: "left" | "center";
+    /** patrón decorativo de fondo, solo CSS (sin canvas) */
+    backdrop?: "none" | "grid" | "dots" | "glow";
+    variant?: Variant;
+    className?: string;
+};
+/**
+ * Cabecera de landing: sobretítulo, titular grande, subtítulo, una o dos llamadas a la acción y una
+ * fila de insignias de confianza. El fondo decorativo es CSS puro (sin motor de render); para una escena
+ * ASCII de verdad, combínalo con un componente de "Fondos" por detrás (ver guía §7).
+ */
+export default function Hero({ kicker, title, subtitle, primaryCta, secondaryCta, badges, align, backdrop, variant, className, }: HeroProps): import("react").JSX.Element;

package/dist/components/ui/Hero.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Badge from "./Badge.js";
+import Button from "./Button.js";
+/**
+ * Cabecera de landing: sobretítulo, titular grande, subtítulo, una o dos llamadas a la acción y una
+ * fila de insignias de confianza. El fondo decorativo es CSS puro (sin motor de render); para una escena
+ * ASCII de verdad, combínalo con un componente de "Fondos" por detrás (ver guía §7).
+ */
+export default function Hero({ kicker = "ESCUELA DE SURF · CANTABRIA", title = "Aprende a leer el mar", subtitle = "Del primer remo a tu primera ola verde. Neopreno, tabla y monitores titulados incluidos.", primaryCta = "Reservar clase", secondaryCta = "Ver horarios", badges = "+500 alumnos, 4.9 ★ valoración, Grupos de 6", align = "center", backdrop = "grid", variant = "minimal", className = "", }) {
+    const chips = badges.split(",").map((s) => s.trim()).filter(Boolean);
+    return (_jsx("section", { className: `ui-hero ui-hero--${align} ui-hero--bd-${backdrop} ${className}`, children: _jsxs("div", { className: "ui-hero__inner", children: [kicker && _jsx("span", { className: "ui-hero__kicker", children: kicker }), _jsx("h1", { children: title }), subtitle && _jsx("p", { children: subtitle }), (primaryCta || secondaryCta) && (_jsxs("div", { className: "ui-hero__cta", children: [primaryCta && _jsx(Button, { label: primaryCta, variant: variant, emphasis: "primary", glyph: "\u2192" }), secondaryCta && _jsx(Button, { label: secondaryCta, variant: variant, emphasis: "secondary" })] })), chips.length > 0 && (_jsx("div", { className: "ui-hero__trust", children: chips.map((c) => (_jsx(Badge, { text: c, variant: variant, intent: "neutral" }, c))) }))] }) }));
+}

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

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+import { type Tone } from "./variants.js";
+export type HoverEffectKind = "none" | "lift" | "scale" | "tilt" | "glow" | "shine" | "scanline" | "jitter" | "brackets" | "underline";
+export declare const HOVERFX_EFFECTS: {
+    id: HoverEffectKind;
+    label: string;
+}[];
+export type HoverFXProps = {
+    effect?: HoverEffectKind;
+    /** 0–1: fuerza del desplazamiento, la escala, el glifo o el brillo */
+    strength?: number;
+    tone?: Tone;
+    /** radio del brillo, en px (solo "glow") */
+    radius?: number;
+    /** inclinación máxima en grados (solo "tilt") */
+    tiltMax?: number;
+    /** ocupa el 100% del contenedor en vez de ajustarse al contenido (para usarlo sobre fondos) */
+    fill?: boolean;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+};
+/**
+ * Envoltorio de efectos de hover reutilizable en cualquier contenido: elevación, escala,
+ * inclinación 3D, brillo que sigue al puntero, destello diagonal, barrido de escaneo,
+ * micro-glitch, corchetes de objetivo o subrayado. La mayoría son CSS puro; "tilt" y "glow"
+ * siguen la posición del puntero con GSAP. Sin efecto en táctil ni con movimiento reducido.
+ */
+export default function HoverFX({ effect, strength, tone, radius, tiltMax, fill, disabled, children, className, }: HoverFXProps): import("react").JSX.Element;

package/dist/components/ui/HoverFX.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { tcls } from "./variants.js";
+export const HOVERFX_EFFECTS = [
+    { id: "lift", label: "Elevación" },
+    { id: "scale", label: "Escala" },
+    { id: "tilt", label: "Inclinación 3D" },
+    { id: "glow", label: "Brillo que sigue al puntero" },
+    { id: "shine", label: "Destello diagonal" },
+    { id: "scanline", label: "Barrido de escaneo" },
+    { id: "jitter", label: "Micro-glitch" },
+    { id: "brackets", label: "Corchetes de objetivo" },
+    { id: "underline", label: "Subrayado animado" },
+    { id: "none", label: "Ninguno" },
+];
+/**
+ * Envoltorio de efectos de hover reutilizable en cualquier contenido: elevación, escala,
+ * inclinación 3D, brillo que sigue al puntero, destello diagonal, barrido de escaneo,
+ * micro-glitch, corchetes de objetivo o subrayado. La mayoría son CSS puro; "tilt" y "glow"
+ * siguen la posición del puntero con GSAP. Sin efecto en táctil ni con movimiento reducido.
+ */
+export default function HoverFX({ effect = "lift", strength = 0.6, tone = "acc", radius = 220, tiltMax = 10, fill = false, disabled = false, children, className = "", }) {
+    const root = useRef(null);
+    const inner = useRef(null);
+    const fx = disabled ? "none" : effect;
+    useEffect(() => {
+        const el = root.current;
+        const box = inner.current;
+        if (!el || !box || disabled)
+            return;
+        if (fx !== "tilt" && fx !== "glow")
+            return;
+        if (window.matchMedia("(pointer: coarse)").matches || window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+            return;
+        let disposed = false;
+        let off;
+        (async () => {
+            const { gsap } = await import("gsap");
+            if (disposed)
+                return;
+            const rx = fx === "tilt" ? gsap.quickTo(box, "rotationX", { duration: 0.5, ease: "power3.out" }) : null;
+            const ry = fx === "tilt" ? gsap.quickTo(box, "rotationY", { duration: 0.5, ease: "power3.out" }) : null;
+            const move = (e) => {
+                const r = el.getBoundingClientRect();
+                const nx = (e.clientX - r.left) / r.width;
+                const ny = (e.clientY - r.top) / r.height;
+                el.style.setProperty("--mx", `${nx * 100}%`);
+                el.style.setProperty("--my", `${ny * 100}%`);
+                if (fx === "tilt") {
+                    rx?.((0.5 - ny) * tiltMax);
+                    ry?.((nx - 0.5) * tiltMax * 1.2);
+                }
+            };
+            const leave = () => {
+                if (fx === "tilt") {
+                    rx?.(0);
+                    ry?.(0);
+                }
+            };
+            el.addEventListener("pointermove", move);
+            el.addEventListener("pointerleave", leave);
+            off = () => {
+                el.removeEventListener("pointermove", move);
+                el.removeEventListener("pointerleave", leave);
+                gsap.killTweensOf(box);
+            };
+        })();
+        return () => {
+            disposed = true;
+            off?.();
+        };
+    }, [fx, tiltMax, disabled]);
+    return (_jsxs("div", { ref: root, className: `ui-hoverfx ui-hoverfx--${fx} ${fill ? "ui-hoverfx--fill" : ""} ${tcls(tone)} ${className}`, style: { "--hf-radius": `${radius}px`, "--hf-strength": strength }, children: [_jsx("div", { ref: inner, className: "ui-hoverfx__inner", children: children }), fx === "shine" && _jsx("span", { className: "ui-hoverfx__shine", "aria-hidden": true }), fx === "scanline" && _jsx("span", { className: "ui-hoverfx__scan", "aria-hidden": true }), fx === "glow" && _jsx("span", { className: "ui-hoverfx__glow", "aria-hidden": true }), fx === "brackets" && (_jsxs(_Fragment, { children: [_jsx("i", { className: "ui-hoverfx__bracket ui-hoverfx__bracket--tl", "aria-hidden": true }), _jsx("i", { className: "ui-hoverfx__bracket ui-hoverfx__bracket--tr", "aria-hidden": true }), _jsx("i", { className: "ui-hoverfx__bracket ui-hoverfx__bracket--bl", "aria-hidden": true }), _jsx("i", { className: "ui-hoverfx__bracket ui-hoverfx__bracket--br", "aria-hidden": true })] }))] }));
+}

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

@@ -0,0 +1,33 @@
+import type { ReactElement, ReactNode, SVGProps } from "react";
+import { type IconName } from "../../lib/ui/icons.js";
+import { type Tone } from "./variants.js";
+export type IconProps = {
+    /** clave del set curado, p. ej. "heart" o "external-link" (agrupadas en `ICON_GROUPS`, `lib/ui/icons.ts`) */
+    name?: IconName;
+    /** alternativa a `name`: cualquier componente de `pixelarticons/react/*`, sin pasar por el set curado */
+    icon?: (props: SVGProps<SVGSVGElement>) => ReactElement;
+    /** lado: px (número) o cualquier longitud CSS */
+    iconSize?: number | string;
+    /** @deprecated usa `iconSize` */
+    size?: number | string;
+    /** variante de esquinas duras, cuando el icono la tiene (~1 de cada 2); si no, cae a la base */
+    sharp?: boolean;
+    /** token de color; sin él hereda el color del texto que lo rodea (`currentColor`) */
+    tone?: Tone;
+    /** nombre accesible; sin él el icono es decorativo y se oculta a los lectores de pantalla */
+    label?: string;
+    className?: string;
+};
+/**
+ * Icono pixel art (Pixelarticons, MIT). SVG con `fill: currentColor`: se tiñe con el color del texto o con
+ * un token del tema (`tone`), igual que el resto del kit. `shape-rendering: crispEdges` (ver `.ui-icon`) evita
+ * que los bordes de cada píxel se suavicen al escalar.
+ */
+export default function Icon({ name, icon, iconSize, size: legacySize, sharp, tone, label, className }: IconProps): import("react").JSX.Element | null;
+/**
+ * Para los componentes del kit que reciben un "glifo" como texto (`glyph="→"`, los `items` de FeatureGrid…):
+ * `"icon:heart"` (o `"icon:heart:sharp"`) se dibuja como el icono pixel art de ese nombre; cualquier otra cadena
+ * pasa tal cual, así que lo existente no cambia. Un nombre que no está en el set se devuelve como texto — el
+ * error de tecleo se ve en pantalla en vez de desaparecer.
+ */
+export declare function renderGlyph(glyph: string, size?: number | string): ReactNode;

package/dist/components/ui/Icon.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ICONS } from "../../lib/ui/icons.js";
+import { tcls } from "./variants.js";
+/**
+ * Icono pixel art (Pixelarticons, MIT). SVG con `fill: currentColor`: se tiñe con el color del texto o con
+ * un token del tema (`tone`), igual que el resto del kit. `shape-rendering: crispEdges` (ver `.ui-icon`) evita
+ * que los bordes de cada píxel se suavicen al escalar.
+ */
+export default function Icon({ name, icon, iconSize, size: legacySize, sharp = false, tone, label, className = "" }) {
+    const size = iconSize ?? legacySize ?? 24;
+    const entry = name ? ICONS[name] : undefined;
+    const Glyph = icon ?? (entry ? (sharp && entry.sharp ? entry.sharp : entry.base) : undefined);
+    if (!Glyph)
+        return null;
+    return (_jsx(Glyph, { width: size, height: size, className: `ui-icon ${tone ? `ui-icon--tone ${tcls(tone)}` : ""} ${className}`.trim(), role: label ? "img" : undefined, "aria-label": label, "aria-hidden": label ? undefined : true }));
+}
+const GLYPH_ICON = /^icon:([a-z0-9-]+)(:sharp)?$/;
+/**
+ * Para los componentes del kit que reciben un "glifo" como texto (`glyph="→"`, los `items` de FeatureGrid…):
+ * `"icon:heart"` (o `"icon:heart:sharp"`) se dibuja como el icono pixel art de ese nombre; cualquier otra cadena
+ * pasa tal cual, así que lo existente no cambia. Un nombre que no está en el set se devuelve como texto — el
+ * error de tecleo se ve en pantalla en vez de desaparecer.
+ */
+export function renderGlyph(glyph, size = "1.25em") {
+    const m = GLYPH_ICON.exec(glyph);
+    if (!m || !(m[1] in ICONS))
+        return glyph;
+    return _jsx(Icon, { name: m[1], iconSize: size, sharp: Boolean(m[2]) });
+}

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

@@ -0,0 +1,31 @@
+import "./swiperCss.js";
+import { type Variant } from "./variants.js";
+export declare const GALLERY_LAYOUTS: readonly ["thumbs", "coverflow", "cards", "fade", "cube", "creative", "filmstrip", "mosaic"];
+export type GalleryLayout = (typeof GALLERY_LAYOUTS)[number];
+export type ImageGalleryProps = {
+    /** una por línea: «imagen|título|texto». La imagen es una URL/ruta, o `gen:N` para una escena de ejemplo generada (0, 1, 2…) */
+    images?: string;
+    /**
+     * thumbs = imagen grande + tira de miniaturas · coverflow = carrusel 3D centrado · cards = baraja apilada ·
+     * fade = fundido a pantalla completa · cube = cubo 3D · creative = diapositivas que entran girando ·
+     * filmstrip = tira libre que se arrastra, de anchos distintos · mosaic = mosaico de dos filas
+     */
+    layout?: GalleryLayout;
+    /** proporción de cada imagen (no afecta a filmstrip ni mosaic) */
+    ratio?: "4/3" | "16/9" | "21/9" | "1/1" | "3/4";
+    /** muestra título y texto sobre cada imagen */
+    captions?: boolean;
+    /** segundos entre imágenes; 0 = manual (siempre apagado con prefers-reduced-motion) */
+    autoplay?: number;
+    loop?: boolean;
+    /** zoom con doble clic o pellizco (solo en thumbs y fade) */
+    zoom?: boolean;
+    variant?: Variant;
+    className?: string;
+};
+/**
+ * Galería de imágenes sobre Swiper (https://swiperjs.com/) con ocho maneras de presentar las mismas fotos. El estilo sale de
+ * `variant` (borde, sombra y radio de cada imagen) y de los tokens, igual que el resto del kit; las flechas y los puntos
+ * los define components/ui/styles/ui-carousel.css con las variables `--s-*`. Sin imágenes propias usa escenas pixel art generadas (`gen:N`).
+ */
+export default function ImageGallery({ images, layout, ratio, captions, autoplay, loop, zoom, variant, className }: ImageGalleryProps): import("react").JSX.Element;

package/dist/components/ui/ImageGallery.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { A11y, Autoplay, EffectCards, EffectCoverflow, EffectCreative, EffectCube, EffectFade, FreeMode, Grid, Keyboard, Navigation, Pagination, Thumbs, Zoom } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { resolveImage } from "../../lib/ui/placeholder.js";
+import "./swiperCss.js";
+import { vcls } from "./variants.js";
+export const GALLERY_LAYOUTS = ["thumbs", "coverflow", "cards", "fade", "cube", "creative", "filmstrip", "mosaic"];
+const DEFAULT_IMAGES = "gen:0|Amanecer|Primera luz sobre la bahía\n" +
+    "gen:1|Mediodía|Mar limpio y viento suave\n" +
+    "gen:2|Atardecer|La hora dorada del swell\n" +
+    "gen:3|Noche|Luna llena y marea alta\n" +
+    "gen:4|Cala|Aguas verdes entre rocas\n" +
+    "gen:5|Ocaso|Rojos y naranjas en el horizonte\n" +
+    "gen:6|Bruma|Mañana de niebla fina\n" +
+    "gen:7|Aurora|Cielo violeta sobre el agua";
+/** Proporciones de la tira libre: ancho relativo a la altura de cada diapositiva. */
+const STRIP = [1.5, 1, 0.8, 1.3, 1.15, 0.9, 1.4, 1.05];
+function Figure({ s, captions, zoom, variant, fill = false }) {
+    const img = _jsx("img", { src: resolveImage(s.src), alt: s.title, loading: "lazy", draggable: false });
+    return (_jsxs("figure", { className: `ui-gal__shot ui-surface ${vcls(variant)} ${fill ? "ui-gal__shot--fill" : ""}`, children: [zoom ? _jsx("div", { className: "swiper-zoom-container", children: img }) : img, captions && (s.title || s.text) && (_jsxs("figcaption", { className: "ui-gal__cap", children: [s.title && _jsx("strong", { children: s.title }), s.text && _jsx("span", { children: s.text })] }))] }));
+}
+/**
+ * Galería de imágenes sobre Swiper (https://swiperjs.com/) con ocho maneras de presentar las mismas fotos. El estilo sale de
+ * `variant` (borde, sombra y radio de cada imagen) y de los tokens, igual que el resto del kit; las flechas y los puntos
+ * los define components/ui/styles/ui-carousel.css con las variables `--s-*`. Sin imágenes propias usa escenas pixel art generadas (`gen:N`).
+ */
+export default function ImageGallery({ images = DEFAULT_IMAGES, layout = "thumbs", ratio = "4/3", captions = true, autoplay = 0, loop = false, zoom = false, variant = "retro", className = "" }) {
+    const shots = useMemo(() => images
+        .split("\n")
+        .map((l) => l.split("|"))
+        .filter((r) => r[0]?.trim())
+        .map(([src, title = "", text = ""]) => ({ src, title: title.trim(), text: text.trim() })), [images]);
+    const [thumbs, setThumbs] = useState(null);
+    const [reduced, setReduced] = useState(false);
+    useEffect(() => {
+        const mq = matchMedia("(prefers-reduced-motion: reduce)");
+        setReduced(mq.matches);
+        const on = () => setReduced(mq.matches);
+        mq.addEventListener("change", on);
+        return () => mq.removeEventListener("change", on);
+    }, []);
+    const play = !reduced && autoplay > 0 ? { delay: autoplay * 1000, disableOnInteraction: false, pauseOnMouseEnter: true } : false;
+    const canLoop = loop && shots.length > 3;
+    const base = [A11y, Keyboard];
+    const root = `ui-gal ui-gal--${layout} ${vcls(variant)} ${className}`;
+    const style = { "--gal-ratio": ratio };
+    const key = `${layout}-${zoom}-${canLoop}-${autoplay > 0}-${play !== false}`;
+    const slide = (s, i, extra) => (_jsx(SwiperSlide, { style: extra?.width ? { "--w": extra.width } : undefined, children: _jsx(Figure, { s: s, captions: captions, zoom: extra?.zoom, fill: extra?.fill, variant: variant }) }, s.src + i));
+    let body;
+    switch (layout) {
+        case "thumbs":
+            body = (_jsxs(_Fragment, { children: [_jsx(Swiper, { modules: [...base, Navigation, Thumbs, ...(zoom ? [Zoom] : []), ...(play ? [Autoplay] : [])], spaceBetween: 10, navigation: true, zoom: zoom, autoplay: play, thumbs: { swiper: thumbs && !thumbs.destroyed ? thumbs : null }, className: "ui-gal__main", children: shots.map((s, i) => slide(s, i, { zoom })) }, key), _jsx(Swiper, { onSwiper: setThumbs, modules: [FreeMode, Thumbs], spaceBetween: 10, slidesPerView: 4, breakpoints: { 700: { slidesPerView: 6 } }, freeMode: true, watchSlidesProgress: true, className: "ui-gal__thumbs", children: shots.map((s, i) => (_jsx(SwiperSlide, { children: _jsx("figure", { className: `ui-gal__thumb ui-surface ${vcls(variant)}`, children: _jsx("img", { src: resolveImage(s.src), alt: s.title, loading: "lazy", draggable: false }) }) }, s.src + i))) }, `t-${key}`)] }));
+            break;
+        case "coverflow":
+            body = (_jsx(Swiper, { modules: [...base, EffectCoverflow, Pagination, ...(play ? [Autoplay] : [])], effect: "coverflow", grabCursor: true, centeredSlides: true, slidesPerView: "auto", loop: canLoop, autoplay: play, coverflowEffect: { rotate: 38, stretch: 0, depth: 170, modifier: 1, slideShadows: true }, pagination: { clickable: true }, children: shots.map((s, i) => slide(s, i)) }, key));
+            break;
+        case "cards":
+            body = (_jsx(Swiper, { modules: [...base, EffectCards, ...(play ? [Autoplay] : [])], effect: "cards", grabCursor: true, autoplay: play, cardsEffect: { slideShadows: false, perSlideOffset: 9, perSlideRotate: 3 }, children: shots.map((s, i) => slide(s, i)) }, key));
+            break;
+        case "fade":
+            body = (_jsx(Swiper, { modules: [...base, EffectFade, Navigation, Pagination, ...(zoom ? [Zoom] : []), ...(play ? [Autoplay] : [])], effect: "fade", fadeEffect: { crossFade: true }, navigation: true, pagination: { type: "fraction" }, zoom: zoom, loop: canLoop, autoplay: play, children: shots.map((s, i) => slide(s, i, { zoom })) }, key));
+            break;
+        case "cube":
+            body = (_jsx(Swiper, { modules: [...base, EffectCube, Pagination, ...(play ? [Autoplay] : [])], effect: "cube", grabCursor: true, cubeEffect: { shadow: true, slideShadows: true, shadowOffset: 24, shadowScale: 0.92 }, pagination: { clickable: true }, autoplay: play, children: shots.map((s, i) => slide(s, i)) }, key));
+            break;
+        case "creative":
+            body = (_jsx(Swiper, { modules: [...base, EffectCreative, Navigation, Pagination, ...(play ? [Autoplay] : [])], effect: "creative", grabCursor: true, creativeEffect: { prev: { shadow: true, translate: ["-110%", 0, -400], rotate: [0, 0, -8] }, next: { translate: ["110%", 0, 0], rotate: [0, 0, 8] } }, navigation: true, pagination: { clickable: true }, loop: canLoop, autoplay: play, children: shots.map((s, i) => slide(s, i)) }, key));
+            break;
+        case "filmstrip":
+            body = (_jsx(Swiper, { modules: [...base, FreeMode, Pagination, ...(play ? [Autoplay] : [])], slidesPerView: "auto", spaceBetween: 14, freeMode: { enabled: true, sticky: false }, grabCursor: true, pagination: { type: "progressbar" }, loop: canLoop, autoplay: play, children: shots.map((s, i) => slide(s, i, { fill: true, width: STRIP[i % STRIP.length] })) }, key));
+            break;
+        case "mosaic":
+            body = (_jsx(Swiper, { modules: [...base, Grid, Pagination, ...(play ? [Autoplay] : [])], slidesPerView: 2, grid: { rows: 2, fill: "row" }, spaceBetween: 12, breakpoints: { 700: { slidesPerView: 3 }, 1000: { slidesPerView: 4 } }, pagination: { clickable: true }, autoplay: play, children: shots.map((s, i) => slide(s, i, { fill: true })) }, key));
+            break;
+    }
+    return (_jsx("div", { className: root, style: style, children: body }));
+}

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

@@ -0,0 +1,12 @@
+import { type Variant } from "./variants.js";
+export type LogoCloudProps = {
+    label?: string;
+    /** nombres de marca separados por comas (sin imágenes: son "logos" tipográficos) */
+    brands?: string;
+    /** row = fila que salta de línea · ticker = cinta continua que se desplaza sola (Swiper) */
+    layout?: "row" | "ticker";
+    variant?: Variant;
+    className?: string;
+};
+/** Tira de marcas en texto — "con la confianza de…" — sin depender de imágenes que el kit no tiene. */
+export default function LogoCloud({ label, brands, layout, variant, className }: LogoCloudProps): import("react").JSX.Element;

package/dist/components/ui/LogoCloud.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Carousel from "./Carousel.js";
+import { vcls } from "./variants.js";
+/** Tira de marcas en texto — "con la confianza de…" — sin depender de imágenes que el kit no tiene. */
+export default function LogoCloud({ label = "Con la confianza de", brands = "Nautilus, Costa Brava FM, Surfrider, Deporte Norte, Vela & Mar", layout = "row", variant = "minimal", className = "" }) {
+    const list = brands.split(",").map((s) => s.trim()).filter(Boolean);
+    const brandEls = list.map((b) => (_jsx("span", { className: "ui-logos__brand", children: b }, b)));
+    return (_jsxs("section", { className: `ui-logos ${className}`, children: [label && _jsx("span", { className: "ui-logos__label", children: label }), layout === "ticker" ? (_jsx(Carousel, { ticker: true, variant: variant, label: label || "Marcas", className: "ui-logos__ticker", children: brandEls })) : (_jsx("div", { className: `ui-logos__row ${vcls(variant)}`, children: brandEls }))] }));
+}

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

@@ -0,0 +1,12 @@
+import { type ButtonProps } from "./Button.js";
+export type MagneticButtonProps = Omit<ButtonProps, "className"> & {
+    /** cuánto se acerca al puntero (0 = nada, 1 = pegado) */
+    strength?: number;
+    /** distancia en px a la que empieza a atraerse */
+    radius?: number;
+    /** giro sutil hacia el puntero, en grados */
+    tilt?: number;
+    className?: string;
+};
+/** `Button` que se desplaza hacia el puntero cuando este se acerca. Sin efecto en táctil. */
+export default function MagneticButton({ strength, radius, tilt, className, ...button }: MagneticButtonProps): import("react").JSX.Element;

package/dist/components/ui/MagneticButton.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import Button from "./Button.js";
+/** `Button` que se desplaza hacia el puntero cuando este se acerca. Sin efecto en táctil. */
+export default function MagneticButton({ strength = 0.35, radius = 160, tilt = 0, className = "", ...button }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const btn = ref.current;
+        if (!btn || window.matchMedia("(pointer: coarse)").matches)
+            return;
+        let disposed = false;
+        let off;
+        (async () => {
+            const { gsap } = await import("gsap");
+            if (disposed)
+                return;
+            const qx = gsap.quickTo(btn, "x", { duration: 0.5, ease: "power3.out" });
+            const qy = gsap.quickTo(btn, "y", { duration: 0.5, ease: "power3.out" });
+            const qr = gsap.quickTo(btn, "rotation", { duration: 0.5, ease: "power3.out" });
+            const move = (e) => {
+                const r = btn.getBoundingClientRect();
+                const dx = e.clientX - (r.left + r.width / 2);
+                const dy = e.clientY - (r.top + r.height / 2);
+                if (Math.hypot(dx, dy) < radius) {
+                    qx(dx * strength);
+                    qy(dy * strength);
+                    qr((dx / (r.width / 2)) * tilt);
+                }
+                else {
+                    qx(0);
+                    qy(0);
+                    qr(0);
+                }
+            };
+            window.addEventListener("pointermove", move);
+            off = () => {
+                window.removeEventListener("pointermove", move);
+                gsap.killTweensOf(btn);
+                gsap.set(btn, { x: 0, y: 0, rotation: 0 });
+            };
+        })();
+        return () => {
+            disposed = true;
+            off?.();
+        };
+    }, [strength, radius, tilt]);
+    return _jsx(Button, { ref: ref, className: className, ...button });
+}

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

@@ -0,0 +1,29 @@
+import { type Tone, type Variant } from "./variants.js";
+export type MarqueeProps = {
+    text: string;
+    /** segundos que tarda una vuelta completa (más = más lento) */
+    duration?: number;
+    /** @deprecated usa `duration` */
+    speed?: number;
+    rows?: number;
+    variant?: Variant;
+    tone?: Tone;
+    /** alternate = las filas van en sentidos opuestos */
+    direction?: "alternate" | "left" | "right";
+    separator?: string;
+    /** tamaño de letra en px */
+    fontSize?: number;
+    /** @deprecated usa `fontSize` */
+    size?: number;
+    pauseOnHover?: boolean;
+    /** difumina los extremos */
+    edgeFade?: boolean;
+    /** inclina la cinta en grados */
+    tilt?: number;
+    className?: string;
+};
+/**
+ * Cinta de texto en bucle, en CSS puro (sin JS). El estilo lo da la variante; el color, el token elegido.
+ * El texto se repite solo para llenar el ancho; el lector de pantalla recibe una sola vez.
+ */
+export default function Marquee({ text, duration, speed: legacySpeed, rows, variant, tone, direction, separator, fontSize, size: legacySize, pauseOnHover, edgeFade, tilt, className, }: MarqueeProps): import("react").JSX.Element;

package/dist/components/ui/Marquee.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tcls } from "./variants.js";
+/**
+ * Cinta de texto en bucle, en CSS puro (sin JS). El estilo lo da la variante; el color, el token elegido.
+ * El texto se repite solo para llenar el ancho; el lector de pantalla recibe una sola vez.
+ */
+export default function Marquee({ text, duration, speed: legacySpeed, rows = 2, variant = "terminal", tone = "acc", direction = "alternate", separator = "  //  ", fontSize, size: legacySize, pauseOnHover = true, edgeFade = false, tilt = 0, className = "", }) {
+    const speed = duration ?? legacySpeed ?? 18;
+    const size = fontSize ?? legacySize ?? 28;
+    const track = `${text}${separator}`.repeat(6);
+    return (_jsx("div", { className: `ui-marquee ui-marquee--${variant} ${tcls(tone)} ${pauseOnHover ? "ui-marquee--pause" : ""} ${edgeFade ? "ui-marquee--edges" : ""} ${className}`, style: { fontSize: size, transform: tilt ? `rotate(${tilt}deg)` : undefined }, role: "marquee", "aria-label": text, children: Array.from({ length: Math.max(1, rows) }, (_, i) => (_jsx("div", { className: "ui-marquee__row", "aria-hidden": true, children: _jsxs("div", { className: "ui-marquee__track", style: {
+                    animationDuration: `${speed * (1 + (i % 3) * 0.25)}s`,
+                    animationDirection: direction === "left" ? "normal" : direction === "right" ? "reverse" : i % 2 ? "reverse" : "normal",
+                }, children: [_jsx("span", { children: track }), _jsx("span", { children: track })] }) }, i))) }));
+}

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

@@ -0,0 +1,40 @@
+import type { Intent } from "./intent.js";
+import { type Variant } from "./variants.js";
+export type ModalProps = {
+    /** texto del botón que abre el diálogo */
+    triggerLabel?: string;
+    /** @deprecated usa `triggerLabel` */
+    trigger?: string;
+    title?: string;
+    body?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    size?: "sm" | "md" | "lg";
+    /** color del botón de confirmar (y del disparador): `danger` para acciones destructivas, como borrar */
+    intent?: Intent;
+    variant?: Variant;
+    /** cambia para abrir el diálogo desde fuera (botón «Repetir animación» del catálogo) */
+    playKey?: number;
+    /**
+     * Modo controlado: si se pasa (aunque sea `false`), sustituye al estado interno y el propio
+     * `Modal` deja de pintar su botón `trigger` — es el propio proyecto quien decide cuándo se abre
+     * (p. ej. al enviar un formulario). Se cierra llamando a `onOpenChange(false)`.
+     */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** se llama al pulsar «confirmar», antes de cerrar el diálogo */
+    onConfirm?: () => void;
+    /** se llama al pulsar «cancelar», el fondo o Escape, antes de cerrar el diálogo */
+    onCancel?: () => void;
+    className?: string;
+};
+/**
+ * Diálogo modal: un botón lo abre, un fondo semitransparente cubre la página. Se cierra al pulsar
+ * fuera, con Escape o con sus propios botones. `position: fixed` (no portal): escapa de cualquier
+ * contenedor con `overflow` sin necesitar un `createPortal`.
+ *
+ * Sin `open`, es autónomo (pinta su propio botón `trigger` y lleva su estado). Con `open` pasa a
+ * modo controlado: no pinta el botón `trigger` (se abre desde donde decida quien lo usa) y notifica
+ * cada cambio por `onOpenChange`; `onConfirm`/`onCancel` avisan de qué botón se pulsó.
+ */
+export default function Modal({ triggerLabel, trigger: legacyTrigger, title, body, confirmLabel, cancelLabel, size, intent, variant, playKey, open: openProp, onOpenChange, onConfirm, onCancel, className, }: ModalProps): import("react").JSX.Element;

package/dist/components/ui/Modal.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import Button from "./Button.js";
+import { vcls } from "./variants.js";
+/**
+ * Diálogo modal: un botón lo abre, un fondo semitransparente cubre la página. Se cierra al pulsar
+ * fuera, con Escape o con sus propios botones. `position: fixed` (no portal): escapa de cualquier
+ * contenedor con `overflow` sin necesitar un `createPortal`.
+ *
+ * Sin `open`, es autónomo (pinta su propio botón `trigger` y lleva su estado). Con `open` pasa a
+ * modo controlado: no pinta el botón `trigger` (se abre desde donde decida quien lo usa) y notifica
+ * cada cambio por `onOpenChange`; `onConfirm`/`onCancel` avisan de qué botón se pulsó.
+ */
+export default function Modal({ triggerLabel, trigger: legacyTrigger, title = "¿Seguro que quieres continuar?", body = "Esta acción no se puede deshacer. Se borrarán todos tus datos y no podrás recuperarlos.", confirmLabel = "Sí, eliminar", cancelLabel = "Cancelar", size = "md", intent = "accent", variant = "glass", playKey = 0, open: openProp, onOpenChange, onConfirm, onCancel, className = "", }) {
+    const trigger = triggerLabel ?? legacyTrigger ?? "Eliminar cuenta";
+    const controlled = openProp !== undefined;
+    const [openState, setOpenState] = useState(false);
+    const open = controlled ? openProp : openState;
+    const setOpen = (v) => (controlled ? onOpenChange?.(v) : setOpenState(v));
+    const panelRef = useRef(null);
+    useEffect(() => {
+        if (playKey > 0)
+            setOpen(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [playKey]);
+    useEffect(() => {
+        if (!open)
+            return;
+        panelRef.current?.focus();
+        const onKey = (e) => {
+            if (e.key === "Escape") {
+                onCancel?.();
+                setOpen(false);
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    return (_jsxs("div", { className: className, children: [!controlled && _jsx(Button, { label: trigger, variant: variant, emphasis: "primary", intent: intent, onClick: () => setOpen(true) }), open && (_jsx("div", { className: "ui-modal__backdrop", onClick: () => {
+                    onCancel?.();
+                    setOpen(false);
+                }, children: _jsxs("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, className: `ui-modal ui-modal--${size} ui-surface ${vcls(variant)}`, onClick: (e) => e.stopPropagation(), children: [_jsx("h3", { children: title }), _jsx("p", { children: body }), _jsxs("div", { className: "ui-modal__actions", children: [_jsx(Button, { label: cancelLabel, variant: variant, emphasis: "ghost", onClick: () => {
+                                        onCancel?.();
+                                        setOpen(false);
+                                    } }), _jsx(Button, { label: confirmLabel, variant: variant, emphasis: "primary", intent: intent, onClick: () => {
+                                        onConfirm?.();
+                                        setOpen(false);
+                                    } })] })] }) }))] }));
+}

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

@@ -0,0 +1,14 @@
+import { type Variant } from "./variants.js";
+export type NavBarProps = {
+    brand?: string;
+    /** enlaces separados por comas */
+    links?: string;
+    cta?: string;
+    defaultActive?: number;
+    variant?: Variant;
+    /** barra flotante con forma de píldora, en lugar de a todo el ancho */
+    floating?: boolean;
+    className?: string;
+};
+/** Barra de navegación con marca, enlaces y llamada a la acción. El enlace activo cambia con la variante. */
+export default function NavBar({ brand, links, cta, defaultActive, variant, floating, className }: NavBarProps): import("react").JSX.Element;

package/dist/components/ui/NavBar.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import Button from "./Button.js";
+import { vcls } from "./variants.js";
+/** Barra de navegación con marca, enlaces y llamada a la acción. El enlace activo cambia con la variante. */
+export default function NavBar({ brand = "Maré", links = "Clases, Tablas, Reservas, Contacto", cta = "Reservar", defaultActive = 0, variant = "glass", floating = false, className = "" }) {
+    const items = useMemo(() => links.split(",").map((s) => s.trim()).filter(Boolean), [links]);
+    const [active, setActive] = useState(defaultActive);
+    useEffect(() => setActive(defaultActive), [defaultActive]);
+    return (_jsxs("nav", { "aria-label": "Principal", className: `ui-nav ui-surface ${floating ? "ui-nav--floating" : ""} ${vcls(variant)} ${className}`, children: [_jsx("span", { className: "ui-nav__brand", children: brand }), _jsx("ul", { className: "ui-nav__links", children: items.map((l, i) => (_jsx("li", { children: _jsx("button", { className: "ui-nav__link", "aria-current": i === active, onClick: () => setActive(i), children: l }) }, l + i))) }), cta && _jsx(Button, { label: cta, variant: variant, size: "sm" })] }));
+}

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

@@ -0,0 +1,14 @@
+import { type Tone } from "./variants.js";
+export type NeonSignProps = {
+    text?: string;
+    mode?: "tube" | "outline" | "pixel";
+    tone?: Extract<Tone, "acc" | "acc2" | "fg">;
+    /** tamaño de letra en px */
+    fontSize?: number;
+    /** @deprecated usa `fontSize` */
+    size?: number;
+    flicker?: boolean;
+    className?: string;
+};
+/** Rótulo luminoso: tubo de neón, contorno o sombra de píxel. Usa `--acc` / `--acc2`. */
+export default function NeonSign({ text, mode, tone, fontSize, size: legacySize, flicker, className }: NeonSignProps): import("react").JSX.Element;

package/dist/components/ui/NeonSign.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tcls } from "./variants.js";
+/** Rótulo luminoso: tubo de neón, contorno o sombra de píxel. Usa `--acc` / `--acc2`. */
+export default function NeonSign({ text = "ABIERTO", mode = "tube", tone = "acc", fontSize, size: legacySize, flicker = true, className = "" }) {
+    const size = fontSize ?? legacySize ?? 64;
+    return (_jsx("p", { className: `ui-neon ui-neon--${mode} ${flicker ? "ui-neon--flicker" : ""} ${tcls(tone)} ${className}`, style: { fontSize: size, margin: 0 }, children: text }));
+}

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

@@ -0,0 +1,9 @@
+import { type Variant } from "./variants.js";
+export type OtpInputProps = {
+    length?: number;
+    size?: "sm" | "md" | "lg";
+    variant?: Variant;
+    className?: string;
+};
+/** Casillas de código de verificación: el foco avanza solo al escribir y retrocede con Retroceso. */
+export default function OtpInput({ length, size, variant, className }: OtpInputProps): import("react").JSX.Element;