trama-ui 0.1.0

package/dist/components/ui/Button.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { renderGlyph } from "./Icon.js";
+import { INTENTS } from "./intent.js";
+import { vcls } from "./variants.js";
+/** Color del botón: el vocabulario común de todo el kit (ver intent.ts). */
+export const BUTTON_INTENTS = INTENTS;
+/** Énfasis: primary = relleno · secondary = superficie del estilo · outline = solo borde · ghost = solo texto · link = enlace */
+export const BUTTON_EMPHASES = ["primary", "secondary", "outline", "ghost", "link"];
+/** @deprecated usa `BUTTON_EMPHASES` / `ButtonEmphasis` */
+export const BUTTON_TONES = BUTTON_EMPHASES;
+/**
+ * Botón del sistema. La variante decide superficie, borde, radio, sombra y tipografía; `emphasis` el énfasis e `intent`
+ * el color (el intent sustituye `--acc` solo dentro del botón, así que funciona igual en los 7 estilos).
+ */
+const Button = forwardRef(function Button({ label, variant = "solid", emphasis, tone: legacyTone, intent = "accent", size = "md", glyph = "", glyphPosition = "end", iconOnly = false, fullWidth = false, disabled = false, active, loading = false, href, type = "button", onClick, className = "", ...aria }, ref) {
+    const tone = emphasis ?? legacyTone ?? "primary"; // (la clase CSS sigue siendo ui-button--<énfasis>)
+    const g = glyph ? _jsx("span", { className: "ui-button__glyph", "aria-hidden": true, children: renderGlyph(glyph) }) : null;
+    const blocked = disabled || loading;
+    const cls = [
+        "ui-button",
+        `ui-button--${tone}`,
+        `ui-button--${size}`,
+        `ui-intent--${intent}`,
+        fullWidth && "ui-button--full",
+        iconOnly && "ui-button--icon",
+        active && "is-active",
+        loading && "is-loading",
+        vcls(variant),
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const content = (_jsxs(_Fragment, { children: [loading && _jsx("span", { className: "ui-button__spin", "aria-hidden": true }), !iconOnly && glyphPosition === "start" && g, iconOnly ? (g ?? _jsx("span", { "aria-hidden": true, children: label.slice(0, 1) })) : _jsx("span", { className: "ui-button__label", children: label }), !iconOnly && glyphPosition === "end" && g] }));
+    const common = {
+        ...aria,
+        className: cls,
+        "aria-label": iconOnly ? label : aria["aria-label"],
+        "aria-pressed": active === undefined ? aria["aria-pressed"] : active,
+        "aria-busy": loading || undefined,
+    };
+    if (href !== undefined) {
+        return (_jsx("a", { ref: ref, ...common, href: blocked ? undefined : href, "aria-disabled": blocked || undefined, role: active === undefined ? undefined : "button", onClick: blocked ? undefined : onClick, children: content }));
+    }
+    return (_jsx("button", { ref: ref, ...common, type: type, disabled: blocked, onClick: onClick, children: content }));
+});
+export default Button;

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

@@ -0,0 +1,13 @@
+import { type Variant } from "./variants.js";
+export type CTASectionProps = {
+    kicker?: string;
+    title?: string;
+    subtitle?: string;
+    primaryCta?: string;
+    secondaryCta?: string;
+    align?: "left" | "center";
+    variant?: Variant;
+    className?: string;
+};
+/** Banner de llamada a la acción final: titular corto, una frase y uno o dos botones sobre una superficie destacada. */
+export default function CTASection({ kicker, title, subtitle, primaryCta, secondaryCta, align, variant, className, }: CTASectionProps): import("react").JSX.Element;

package/dist/components/ui/CTASection.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "./Button.js";
+import { vcls } from "./variants.js";
+/** Banner de llamada a la acción final: titular corto, una frase y uno o dos botones sobre una superficie destacada. */
+export default function CTASection({ kicker = "", title = "El swell llega el sábado", subtitle = "Quedan doce plazas. Trae toalla, nosotros ponemos el resto.", primaryCta = "Apuntarme", secondaryCta = "", align = "center", variant = "neon", className = "", }) {
+    return (_jsxs("section", { className: `ui-cta ui-cta--${align} ui-surface ${vcls(variant)} ${className}`, children: [kicker && _jsx("span", { className: "ui-cta__kicker", children: kicker }), _jsx("h3", { children: title }), subtitle && _jsx("p", { children: subtitle }), (primaryCta || secondaryCta) && (_jsxs("div", { className: "ui-cta__actions", children: [primaryCta && _jsx(Button, { label: primaryCta, variant: variant, emphasis: "primary", glyph: "\u2192" }), secondaryCta && _jsx(Button, { label: secondaryCta, variant: variant, emphasis: "ghost" })] }))] }));
+}

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

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+import "./swiperCss.js";
+import { type Variant } from "./variants.js";
+export type CarouselProps = {
+    /** cada hijo es una diapositiva */
+    children: ReactNode;
+    /** diapositivas visibles en pantallas anchas (en móvil baja sola a 1, en tablet a 2). Ignorado con `effect` ≠ slide */
+    perView?: number;
+    /** separación entre diapositivas, en px */
+    gap?: number;
+    loop?: boolean;
+    /** segundos entre diapositivas; 0 = sin reproducción automática (siempre apagado con prefers-reduced-motion) */
+    autoplay?: number;
+    arrows?: boolean;
+    dots?: "none" | "bullets" | "progress" | "fraction";
+    /** slide = desplazamiento · fade = fundido · cards = baraja apilada */
+    effect?: "slide" | "fade" | "cards";
+    /** cinta continua sin paradas (marcas, logos): ignora flechas, puntos y `perView` */
+    ticker?: boolean;
+    variant?: Variant;
+    /** nombre accesible del carrusel */
+    label?: string;
+    className?: string;
+};
+/**
+ * Carrusel genérico sobre Swiper (https://swiperjs.com/) con el lenguaje del kit: flechas y puntos cuadrados que leen las
+ * variables `--s-*` de la variante, y sin estilos propios de color (todo sale de los tokens). Sirve para cualquier lista de
+ * tarjetas: los componentes de sección lo usan con su prop `layout="carousel"`.
+ */
+export default function Carousel({ children, perView, gap, loop, autoplay, arrows, dots, effect, ticker, variant, label, className }: CarouselProps): import("react").JSX.Element;

package/dist/components/ui/Carousel.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, useEffect, useMemo, useState } from "react";
+import { A11y, Autoplay, EffectCards, EffectFade, FreeMode, Keyboard, Navigation, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "./swiperCss.js";
+import { vcls } from "./variants.js";
+function usePrefersReducedMotion() {
+    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);
+    }, []);
+    return reduced;
+}
+/**
+ * Carrusel genérico sobre Swiper (https://swiperjs.com/) con el lenguaje del kit: flechas y puntos cuadrados que leen las
+ * variables `--s-*` de la variante, y sin estilos propios de color (todo sale de los tokens). Sirve para cualquier lista de
+ * tarjetas: los componentes de sección lo usan con su prop `layout="carousel"`.
+ */
+export default function Carousel({ children, perView = 3, gap = 20, loop = false, autoplay = 0, arrows = true, dots = "bullets", effect = "slide", ticker = false, variant = "glass", label = "Carrusel", className = "" }) {
+    const reduced = usePrefersReducedMotion();
+    const slides = Children.toArray(children);
+    const single = effect !== "slide" && !ticker;
+    const pv = single ? 1 : Math.max(1, Math.round(perView));
+    const play = !reduced && (ticker || autoplay > 0);
+    const config = useMemo(() => {
+        const modules = [A11y, Keyboard];
+        const props = { a11y: { containerMessage: label }, keyboard: { enabled: true, onlyInViewport: true }, spaceBetween: gap, grabCursor: true };
+        if (ticker) {
+            modules.push(FreeMode, Autoplay);
+            Object.assign(props, {
+                slidesPerView: "auto",
+                loop: true,
+                freeMode: { enabled: true, momentum: false },
+                speed: 6000,
+                allowTouchMove: false,
+                autoplay: play ? { delay: 0, disableOnInteraction: false, pauseOnMouseEnter: true } : false,
+            });
+            return { modules, props };
+        }
+        if (effect === "fade") {
+            modules.push(EffectFade);
+            Object.assign(props, { effect: "fade", fadeEffect: { crossFade: true }, slidesPerView: 1 });
+        }
+        else if (effect === "cards") {
+            modules.push(EffectCards);
+            Object.assign(props, { effect: "cards", slidesPerView: 1, cardsEffect: { slideShadows: false, perSlideOffset: 10, perSlideRotate: 3 } });
+        }
+        else {
+            Object.assign(props, {
+                slidesPerView: 1,
+                breakpoints: { 0: { slidesPerView: 1 }, 700: { slidesPerView: Math.min(2, pv) }, 1000: { slidesPerView: pv } },
+            });
+        }
+        if (arrows) {
+            modules.push(Navigation);
+            props.navigation = true;
+        }
+        if (dots !== "none") {
+            modules.push(Pagination);
+            props.pagination = { type: dots === "bullets" ? "bullets" : dots === "progress" ? "progressbar" : "fraction", clickable: dots === "bullets" };
+        }
+        if (autoplay > 0) {
+            modules.push(Autoplay);
+            props.autoplay = play ? { delay: autoplay * 1000, disableOnInteraction: false, pauseOnMouseEnter: true } : false;
+        }
+        props.loop = loop && slides.length > pv;
+        return { modules, props };
+    }, [ticker, effect, arrows, dots, autoplay, play, loop, gap, pv, slides.length, label]);
+    // La cinta necesita más diapositivas que el ancho del contenedor para no dejar huecos al dar la vuelta
+    const items = ticker ? [...slides, ...slides, ...slides] : slides;
+    const cls = ["ui-car", vcls(variant), ticker ? "ui-car--ticker" : "", effect === "cards" ? "ui-car--cards" : "", effect === "fade" ? "ui-car--fade" : "", className].filter(Boolean).join(" ");
+    // Cambiar módulos o efecto exige montar de nuevo el Swiper
+    const key = `${ticker}-${effect}-${pv}-${arrows}-${dots}-${autoplay > 0}-${play}-${loop}`;
+    return (_jsx("div", { className: cls, children: _jsx(Swiper, { modules: config.modules, ...config.props, children: items.map((s, i) => (_jsx(SwiperSlide, { children: s }, i))) }, key) }));
+}

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

@@ -0,0 +1,11 @@
+import { type Variant } from "./variants.js";
+export type CheckboxGroupProps = {
+    label?: string;
+    options?: string;
+    /** valores marcados al inicio, separados por comas */
+    defaultValue?: string;
+    variant?: Variant;
+    className?: string;
+};
+/** Lista de casillas independientes. Retro y terminal las muestran como texto `[x]`/`[ ]` (ver CSS `--s-ff`). */
+export default function CheckboxGroup({ label, options, defaultValue, variant, className, }: CheckboxGroupProps): import("react").JSX.Element;

package/dist/components/ui/CheckboxGroup.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { vcls } from "./variants.js";
+/** Lista de casillas independientes. Retro y terminal las muestran como texto `[x]`/`[ ]` (ver CSS `--s-ff`). */
+export default function CheckboxGroup({ label = "Notificaciones", options = "Email, SMS, Push, Newsletter", defaultValue = "Email, Push", variant = "glass", className = "", }) {
+    const list = useMemo(() => options.split(",").map((s) => s.trim()).filter(Boolean), [options]);
+    const initial = useMemo(() => new Set(defaultValue.split(",").map((s) => s.trim()).filter(Boolean)), [defaultValue]);
+    const [checked, setChecked] = useState(initial);
+    useEffect(() => setChecked(initial), [initial]);
+    const toggle = (o) => setChecked((s) => {
+        const next = new Set(s);
+        if (next.has(o))
+            next.delete(o);
+        else
+            next.add(o);
+        return next;
+    });
+    return (_jsxs("fieldset", { className: `ui-cgroup ${vcls(variant)} ${className}`, children: [label && _jsx("legend", { children: label }), list.map((o) => (_jsxs("label", { className: "ui-cgroup__item", children: [_jsx("button", { type: "button", role: "checkbox", "aria-checked": checked.has(o), className: `ui-cgroup__box ${checked.has(o) ? "is-on" : ""}`, onClick: () => toggle(o), children: _jsx("span", { "aria-hidden": true, children: "\u2713" }) }), o] }, o)))] }));
+}

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

@@ -0,0 +1,11 @@
+import { type Variant } from "./variants.js";
+export type CodeBlockProps = {
+    code?: string;
+    language?: string;
+    filename?: string;
+    showLineNumbers?: boolean;
+    variant?: Variant;
+    className?: string;
+};
+/** Bloque de código con cabecera, numeración de línea opcional y botón de copiar. Sin resaltado de sintaxis. */
+export default function CodeBlock({ code, language, filename, showLineNumbers, variant, className, }: CodeBlockProps): import("react").JSX.Element;

package/dist/components/ui/CodeBlock.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { vcls } from "./variants.js";
+/** Bloque de código con cabecera, numeración de línea opcional y botón de copiar. Sin resaltado de sintaxis. */
+export default function CodeBlock({ code = 'export function greet(name: string) {\n  return `Hola, ${name}`;\n}', language = "tsx", filename = "", showLineNumbers = true, variant = "terminal", className = "", }) {
+    const [copied, setCopied] = useState(false);
+    const lines = code.split("\n");
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1400);
+        }
+        catch {
+            /* portapapeles no disponible */
+        }
+    };
+    return (_jsxs("div", { className: `ui-code ui-surface ${vcls(variant)} ${className}`, children: [_jsxs("div", { className: "ui-code__head", children: [_jsxs("div", { className: "ui-code__dots", "aria-hidden": true, children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }), _jsx("span", { className: "ui-code__name", children: filename || language }), _jsx("button", { type: "button", className: "ui-code__copy", onClick: copy, children: copied ? "Copiado ✓" : "Copiar" })] }), _jsx("pre", { className: "ui-code__pre", children: _jsx("code", { children: lines.map((line, i) => (_jsxs("span", { className: "ui-code__line", children: [showLineNumbers && (_jsx("span", { className: "ui-code__ln", "aria-hidden": true, children: i + 1 })), _jsx("span", { children: line || " " })] }, i))) }) })] }));
+}

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

@@ -0,0 +1,25 @@
+import { type Variant } from "./variants.js";
+export type ContactFormProps = {
+    title?: string;
+    subtitle?: string;
+    /** qué campos mostrar, separados por comas: "name,email,message" (contacto) o "email" (boletín) */
+    fields?: string;
+    namePlaceholder?: string;
+    emailPlaceholder?: string;
+    messagePlaceholder?: string;
+    submitLabel?: string;
+    successTitle?: string;
+    successMessage?: string;
+    /** stacked = formulario en columna; inline = campo(s) y botón en una fila (boletín) */
+    layout?: "stacked" | "inline";
+    variant?: Variant;
+    /** se llama con los datos del formulario al enviarlo; la demo siempre muestra el estado de éxito */
+    onSubmit?: (data: Record<string, string>) => void;
+    className?: string;
+};
+/**
+ * Formulario de contacto (o de boletín, con `fields="email"` y `layout="inline"`). Gestiona su propio
+ * estado de envío: al enviarlo muestra un mensaje de éxito con opción de volver a escribir. El envío
+ * real (llamada a la API, proveedor de email…) se conecta con `onSubmit`.
+ */
+export default function ContactForm({ title, subtitle, fields, namePlaceholder, emailPlaceholder, messagePlaceholder, submitLabel, successTitle, successMessage, layout, variant, onSubmit, className, }: ContactFormProps): import("react").JSX.Element;

package/dist/components/ui/ContactForm.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Button from "./Button.js";
+import TextField from "./TextField.js";
+import { vcls } from "./variants.js";
+/**
+ * Formulario de contacto (o de boletín, con `fields="email"` y `layout="inline"`). Gestiona su propio
+ * estado de envío: al enviarlo muestra un mensaje de éxito con opción de volver a escribir. El envío
+ * real (llamada a la API, proveedor de email…) se conecta con `onSubmit`.
+ */
+export default function ContactForm({ title = "Escríbenos", subtitle = "Te respondemos en menos de 24 horas.", fields = "name,email,message", namePlaceholder = "Tu nombre", emailPlaceholder = "tu@correo.com", messagePlaceholder = "Cuéntanos qué necesitas…", submitLabel = "Enviar mensaje", successTitle = "Mensaje enviado", successMessage = "Gracias, te contestaremos pronto.", layout = "stacked", variant = "glass", onSubmit, className = "", }) {
+    const list = fields.split(",").map((s) => s.trim());
+    const has = (k) => list.includes(k);
+    const [sent, setSent] = useState(false);
+    const submit = (e) => {
+        e.preventDefault();
+        const data = Object.fromEntries(new FormData(e.currentTarget).entries());
+        onSubmit?.(data);
+        setSent(true);
+    };
+    if (sent) {
+        return (_jsxs("div", { className: `ui-cform ui-cform--sent ui-surface ${vcls(variant)} ${className}`, children: [_jsx("strong", { children: successTitle }), _jsx("p", { children: successMessage }), _jsx("button", { type: "button", className: "ui-cform__again", onClick: () => setSent(false), children: "Enviar otro mensaje" })] }));
+    }
+    return (_jsxs("form", { className: `ui-cform ui-cform--${layout} ui-surface ${vcls(variant)} ${className}`, onSubmit: submit, children: [title && _jsx("h3", { children: title }), subtitle && _jsx("p", { className: "ui-cform__sub", children: subtitle }), _jsxs("div", { className: "ui-cform__row", children: [has("name") && _jsx(TextField, { label: layout === "inline" ? "" : "Nombre", name: "name", placeholder: namePlaceholder, variant: variant, required: true }), has("email") && _jsx(TextField, { label: layout === "inline" ? "" : "Email", name: "email", type: "email", placeholder: emailPlaceholder, variant: variant, required: true }), has("message") && _jsx(TextField, { label: "Mensaje", name: "message", placeholder: messagePlaceholder, variant: variant, multiline: true, rows: 4, required: true }), _jsx(Button, { type: "submit", label: submitLabel, variant: variant, emphasis: "primary", fullWidth: layout === "stacked" })] })] }));
+}

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

@@ -0,0 +1,10 @@
+export type CrtOverlayProps = {
+    scanlines?: number;
+    vignette?: number;
+    flicker?: number;
+    /** barra de barrido que recorre la pantalla */
+    sweep?: boolean;
+    className?: string;
+};
+/** Capa de efectos de monitor CRT (líneas de barrido, viñeta, parpadeo). Se superpone al contenedor y no bloquea el puntero. */
+export default function CrtOverlay({ scanlines, vignette, flicker, sweep, className }: CrtOverlayProps): import("react").JSX.Element;

package/dist/components/ui/CrtOverlay.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Capa de efectos de monitor CRT (líneas de barrido, viñeta, parpadeo). Se superpone al contenedor y no bloquea el puntero. */
+export default function CrtOverlay({ scanlines = 0.3, vignette = 0.6, flicker = 0.4, sweep = true, className = "" }) {
+    return (_jsxs("div", { className: `ui-crt ${className}`, style: { "--scan": scanlines, "--vig": vignette, "--flk": flicker }, "aria-hidden": true, children: [_jsx("div", { className: "ui-crt__scan" }), flicker > 0 && _jsx("div", { className: "ui-crt__flick" }), sweep && _jsx("div", { className: "ui-crt__bar" }), _jsx("div", { className: "ui-crt__vig" })] }));
+}

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

@@ -0,0 +1,12 @@
+import { type Variant } from "./variants.js";
+export type DividerProps = {
+    label?: string;
+    /** caracteres de la regla en el modo texto */
+    pattern?: string;
+    /** line = línea CSS; text = repetición de `pattern` */
+    mode?: "line" | "text";
+    variant?: Variant;
+    className?: string;
+};
+/** Separador con etiqueta opcional. El modo `text` dibuja la regla con caracteres. */
+export default function Divider({ label, pattern, mode, variant, className }: DividerProps): import("react").JSX.Element;

package/dist/components/ui/Divider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { vcls } from "./variants.js";
+/** Separador con etiqueta opcional. El modo `text` dibuja la regla con caracteres. */
+export default function Divider({ label = "o continúa con", pattern = "-=", mode = "line", variant = "minimal", className = "" }) {
+    const rule = (k) => (_jsx("span", { className: `ui-div__rule ${mode === "line" ? "ui-div__rule--line" : ""}`, "aria-hidden": true, children: mode === "text" ? (pattern || "-").repeat(80) : "" }, k));
+    return (_jsxs("div", { role: "separator", "aria-label": label, className: `ui-div ${vcls(variant)} ${className}`, children: [rule("a"), label && _jsx("span", { children: label }), rule("b")] }));
+}

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

@@ -0,0 +1,16 @@
+import { type Variant } from "./variants.js";
+export type DrawerProps = {
+    /** texto del botón que abre el panel */
+    triggerLabel?: string;
+    /** @deprecated usa `triggerLabel` */
+    trigger?: string;
+    side?: "left" | "right";
+    title?: string;
+    body?: string;
+    variant?: Variant;
+    /** cambia para abrir el panel desde fuera (botón «Repetir animación» del catálogo) */
+    playKey?: number;
+    className?: string;
+};
+/** Panel lateral deslizante (menú móvil, carrito, filtros). Se cierra con el fondo, Escape o su botón. */
+export default function Drawer({ triggerLabel, trigger: legacyTrigger, side, title, body, variant, playKey, className, }: DrawerProps): import("react").JSX.Element;

package/dist/components/ui/Drawer.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import Button from "./Button.js";
+import { vcls } from "./variants.js";
+/** Panel lateral deslizante (menú móvil, carrito, filtros). Se cierra con el fondo, Escape o su botón. */
+export default function Drawer({ triggerLabel, trigger: legacyTrigger, side = "left", title = "Menú", body = "Clases, Tablas, Reservas, Contacto, Ayuda.", variant = "glass", playKey = 0, className = "", }) {
+    const trigger = triggerLabel ?? legacyTrigger ?? "Abrir menú";
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        if (playKey > 0)
+            setOpen(true);
+    }, [playKey]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                setOpen(false);
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [open]);
+    return (_jsxs("div", { className: className, children: [_jsx(Button, { label: trigger, variant: variant, emphasis: "primary", onClick: () => setOpen(true) }), open && (_jsx("div", { className: "ui-drawer__backdrop", onClick: () => setOpen(false), children: _jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": title, className: `ui-drawer ui-drawer--${side} ui-surface ${vcls(variant)}`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "ui-drawer__head", children: [_jsx("strong", { children: title }), _jsx("button", { type: "button", className: "ui-drawer__close", "aria-label": "Cerrar", onClick: () => setOpen(false), children: "\u00D7" })] }), _jsx("p", { children: body })] }) }))] }));
+}

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

@@ -0,0 +1,10 @@
+import { type Variant } from "./variants.js";
+export type DropdownProps = {
+    label?: string;
+    items?: string;
+    align?: "left" | "right";
+    variant?: Variant;
+    className?: string;
+};
+/** Menú de acciones (⋮): un botón que abre una lista de comandos, no un formulario de selección (ver Select). */
+export default function Dropdown({ label, items, align, variant, className }: DropdownProps): import("react").JSX.Element;

package/dist/components/ui/Dropdown.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { vcls } from "./variants.js";
+/** Menú de acciones (⋮): un botón que abre una lista de comandos, no un formulario de selección (ver Select). */
+export default function Dropdown({ label = "⋮", items = "Editar, Duplicar, Archivar, Eliminar", align = "right", variant = "glass", className = "" }) {
+    const list = items.split(",").map((s) => s.trim()).filter(Boolean);
+    const [open, setOpen] = useState(false);
+    const root = useRef(null);
+    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-ddown ${className}`, children: [_jsx("button", { type: "button", className: `ui-ddown__trigger ui-surface ${vcls(variant)}`, "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen((v) => !v), children: label }), open && (_jsx("ul", { role: "menu", className: `ui-ddown__menu ui-ddown__menu--${align} ui-surface ${vcls(variant)}`, children: list.map((o) => (_jsx("li", { children: _jsx("button", { type: "button", role: "menuitem", className: "ui-ddown__item", onClick: () => setOpen(false), children: o }) }, o))) }))] }));
+}

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

@@ -0,0 +1,14 @@
+import type { Variant } from "./variants.js";
+export type FAQSectionProps = {
+    kicker?: string;
+    title?: string;
+    subtitle?: string;
+    /** una entrada por línea con el formato «Pregunta|Respuesta» (igual que `Accordion`) */
+    items?: string;
+    multiple?: boolean;
+    align?: "left" | "center";
+    variant?: Variant;
+    className?: string;
+};
+/** Sección de preguntas frecuentes: cabecera + `Accordion`, lista para pegar al final de una landing. */
+export default function FAQSection({ kicker, title, subtitle, items, multiple, align, variant, className, }: FAQSectionProps): import("react").JSX.Element;

package/dist/components/ui/FAQSection.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Accordion from "./Accordion.js";
+import SectionHeader from "./SectionHeader.js";
+/** Sección de preguntas frecuentes: cabecera + `Accordion`, lista para pegar al final de una landing. */
+export default function FAQSection({ kicker = "Preguntas frecuentes", title = "Todo lo que necesitas saber", subtitle = "", items, multiple = true, align = "center", variant = "glass", className = "", }) {
+    return (_jsxs("section", { className: `ui-faqs ${align === "left" ? "ui-faqs--left" : ""} ${className}`, children: [_jsx(SectionHeader, { kicker: kicker, title: title, subtitle: subtitle, align: align, variant: "minimal" }), _jsx("div", { className: "ui-faqs__body", children: _jsx(Accordion, { items: items, multiple: multiple, variant: variant }) })] }));
+}

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

@@ -0,0 +1,18 @@
+import { type Variant } from "./variants.js";
+export type FeatureGridProps = {
+    kicker?: string;
+    title?: string;
+    subtitle?: string;
+    /** una por línea: «glifo|título|texto». El glifo puede ser un icono pixel art: `icon:heart` (ver Icon) */
+    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;
+    variant?: Variant;
+    className?: string;
+};
+/** Cabecera de sección + rejilla de "por qué elegirnos" (glifo + título + texto), la más pedida en cualquier landing. */
+export default function FeatureGrid({ kicker, title, subtitle, items, layout, perView, autoplay, variant, className }: FeatureGridProps): import("react").JSX.Element;

package/dist/components/ui/FeatureGrid.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Carousel from "./Carousel.js";
+import { renderGlyph } from "./Icon.js";
+import SectionHeader from "./SectionHeader.js";
+import { vcls } from "./variants.js";
+const DEFAULT_ITEMS = "~|Monitores titulados|Todo el equipo tiene titulación oficial de escuela de surf y primeros auxilios.\n" +
+    "#|Grupos reducidos|Máximo seis alumnos por clase para que cada uno reciba atención de verdad.\n" +
+    "+|Material incluido|Neopreno, tabla y bolsa de deporte, sin coste extra ni sorpresas.";
+/** Cabecera de sección + rejilla de "por qué elegirnos" (glifo + título + texto), la más pedida en cualquier landing. */
+export default function FeatureGrid({ kicker = "Por qué nosotros", title = "Lo que nos hace distintos", subtitle = "", items = DEFAULT_ITEMS, layout = "grid", perView = 3, autoplay = 0, variant = "minimal", className = "" }) {
+    const rows = items.split("\n").map((l) => l.split("|")).filter((r) => r[0]?.trim());
+    const cards = rows.map(([glyph, t, text], i) => (_jsxs("div", { className: `ui-feats__item ui-surface ${vcls(variant)}`, children: [_jsx("span", { className: "ui-feats__glyph", "aria-hidden": true, children: renderGlyph(glyph, 24) }), _jsx("strong", { children: t }), _jsx("p", { children: text })] }, t + i)));
+    return (_jsxs("section", { className: `ui-feats ${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-feats__grid", children: cards }))] }));
+}

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

@@ -0,0 +1,14 @@
+import { type Variant } from "./variants.js";
+export type FooterProps = {
+    brand?: string;
+    tagline?: string;
+    /** columnas separadas por «;», cada una «Título: enlace1, enlace2, enlace3» */
+    columns?: string;
+    /** iniciales o siglas de redes, separadas por comas; vacío = ninguna. Cada una puede ser un icono pixel art: `icon:github` (ver Icon) */
+    social?: string;
+    copyright?: string;
+    variant?: Variant;
+    className?: string;
+};
+/** Pie de página: marca, columnas de enlaces, redes y línea de copyright. Cierre habitual de cualquier landing. */
+export default function Footer({ brand, tagline, columns, social, copyright, variant, className, }: FooterProps): import("react").JSX.Element;

package/dist/components/ui/Footer.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderGlyph } from "./Icon.js";
+import { vcls } from "./variants.js";
+const DEFAULT_COLUMNS = "Escuela: Clases, Monitores, Ubicación; Ayuda: Reservas, Cancelaciones, FAQ; Legal: Privacidad, Términos, Cookies";
+/** Pie de página: marca, columnas de enlaces, redes y línea de copyright. Cierre habitual de cualquier landing. */
+export default function Footer({ brand = "Maré Surf Club", tagline = "Del primer remo a tu primera ola verde.", columns = DEFAULT_COLUMNS, social = "X, IG, YT", copyright = "© 2026 Maré Surf Club. Todos los derechos reservados.", variant = "minimal", className = "", }) {
+    const cols = columns
+        .split(";")
+        .map((c) => {
+        const [head, rest] = c.split(":");
+        return { title: head?.trim() ?? "", links: (rest ?? "").split(",").map((l) => l.trim()).filter(Boolean) };
+    })
+        .filter((c) => c.title);
+    const soc = social.split(",").map((s) => s.trim()).filter(Boolean);
+    return (_jsxs("footer", { className: `ui-footer ui-surface ${vcls(variant)} ${className}`, children: [_jsxs("div", { className: "ui-footer__top", children: [_jsxs("div", { className: "ui-footer__brand", children: [_jsx("strong", { children: brand }), tagline && _jsx("p", { children: tagline }), soc.length > 0 && (_jsx("div", { className: "ui-footer__social", children: soc.map((s) => (_jsx("span", { "aria-label": s.startsWith("icon:") ? s.slice(5).replace(/:sharp$/, "") : undefined, children: renderGlyph(s, 18) }, s))) }))] }), cols.length > 0 && (_jsx("nav", { className: "ui-footer__cols", children: cols.map((c) => (_jsxs("div", { children: [_jsx("span", { children: c.title }), _jsx("ul", { children: c.links.map((l) => (_jsx("li", { children: l }, l))) })] }, c.title))) }))] }), copyright && _jsx("div", { className: "ui-footer__bottom", children: copyright })] }));
+}

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

@@ -0,0 +1,22 @@
+import { type Tone } from "./variants.js";
+export type GlyphCursorProps = {
+    /** glyph = un carácter; ring = anillo; dot = punto */
+    mode?: "glyph" | "ring" | "dot";
+    glyph?: string;
+    /** tamaño del cursor en px */
+    cursorSize?: number;
+    /** @deprecated usa `cursorSize` */
+    size?: number;
+    /** retardo del seguimiento en segundos (mayor = más "flotante") */
+    lag?: number;
+    spin?: boolean;
+    glow?: boolean;
+    tone?: Tone;
+    /** distancia al puntero en px */
+    offset?: number;
+};
+/**
+ * Elemento que persigue al puntero dentro de su contenedor padre (no de la ventana), así se puede
+ * usar en cualquier panel. Colócalo como hijo del elemento donde debe actuar. Sin efecto en táctil.
+ */
+export default function GlyphCursor({ mode, glyph, cursorSize, size: legacySize, lag, spin, glow, tone, offset }: GlyphCursorProps): import("react").JSX.Element;

package/dist/components/ui/GlyphCursor.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { tcls } from "./variants.js";
+/**
+ * Elemento que persigue al puntero dentro de su contenedor padre (no de la ventana), así se puede
+ * usar en cualquier panel. Colócalo como hijo del elemento donde debe actuar. Sin efecto en táctil.
+ */
+export default function GlyphCursor({ mode = "glyph", glyph = "*", cursorSize, size: legacySize, lag = 0.45, spin = true, glow = true, tone = "acc", offset = 14 }) {
+    const size = cursorSize ?? legacySize ?? 22;
+    const scope = useRef(null);
+    const glyphEl = useRef(null);
+    useEffect(() => {
+        const host = scope.current?.parentElement;
+        const g = glyphEl.current;
+        if (!host || !g || window.matchMedia("(pointer: coarse)").matches)
+            return;
+        let disposed = false;
+        let off;
+        (async () => {
+            const { gsap } = await import("gsap");
+            if (disposed)
+                return;
+            gsap.set(g, { autoAlpha: 0 });
+            const qx = gsap.quickTo(g, "x", { duration: lag, ease: "power3.out" });
+            const qy = gsap.quickTo(g, "y", { duration: lag, ease: "power3.out" });
+            const move = (e) => {
+                const r = host.getBoundingClientRect();
+                const o = mode === "glyph" ? offset : 0;
+                qx(e.clientX - r.left + o);
+                qy(e.clientY - r.top + o);
+                gsap.to(g, { autoAlpha: 1, duration: 0.2, overwrite: "auto" });
+            };
+            const leave = () => void gsap.to(g, { autoAlpha: 0, duration: 0.2 });
+            host.addEventListener("pointermove", move);
+            host.addEventListener("pointerleave", leave);
+            off = () => {
+                host.removeEventListener("pointermove", move);
+                host.removeEventListener("pointerleave", leave);
+                gsap.killTweensOf(g);
+            };
+        })();
+        return () => {
+            disposed = true;
+            off?.();
+        };
+    }, [lag, mode, offset]);
+    const dim = mode === "glyph" ? undefined : { width: size, height: size };
+    return (_jsx("div", { ref: scope, className: `ui-cursor-scope ${tcls(tone)}`, "aria-hidden": true, children: _jsx("span", { ref: glyphEl, className: `ui-cursor ui-cursor--${mode} ${spin && mode === "glyph" ? "ui-cursor--spin" : ""} ${glow ? "ui-cursor--glow" : ""}`, style: { fontSize: size, ...dim, boxShadow: glow && mode !== "glyph" ? "0 0 12px var(--tone, var(--acc))" : undefined }, children: mode === "glyph" ? glyph : "" }) }));
+}

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

@@ -0,0 +1,15 @@
+export type GridBackgroundProps = {
+    kind?: "dots" | "lines" | "cross" | "diagonal";
+    /** tamaño de la celda en px */
+    cellSize?: number;
+    /** @deprecated usa `cellSize` */
+    size?: number;
+    opacity?: number;
+    /** difumina hacia los bordes */
+    fade?: boolean;
+    /** desplazamiento lento */
+    drift?: boolean;
+    className?: string;
+};
+/** 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, cellSize, size: legacySize, opacity, fade, drift, className }: GridBackgroundProps): import("react").JSX.Element;