@jotis-me/react 0.0.0-stage → 0.1.0

package/dist/components/ChartLegend.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { seriesColor } from "../internal/chart.js";
+import { cx } from "../internal/cx.js";
+/** Leyenda de series con un punto de color y el nombre. */
+export function ChartLegend({ series, vertical, className }) {
+    return (_jsx("ul", { className: cx("m-0 flex list-none gap-x-3 gap-y-1 p-0 font-body", vertical ? "flex-col" : "flex-wrap", className), children: series.map((s, i) => (_jsxs("li", { className: "inline-flex items-center gap-2 text-sm text-tertiary", children: [_jsx("span", { "aria-hidden": "true", className: "size-2 shrink-0 rounded-full", style: { background: seriesColor(i, s.color) } }), s.name] }, i))) }));
+}

package/dist/components/ChatBadge.d.ts

@@ -0,0 +1,15 @@
+export type ChatBadgeKind = "broadcaster" | "mod" | "vip" | "sub" | "bits";
+export interface ChatBadgeProps {
+    /** @default "sub" */
+    kind?: ChatBadgeKind;
+    /**
+     * Lado en px; 18 como mínimo en el chat.
+     * @default 20
+     */
+    size?: number;
+    /** Sustituye al texto accesible y al del `title` ("Streamer", "Moderador", "VIP", "Suscriptor", "Bits"). */
+    title?: string;
+    className?: string;
+}
+/** Insignia cuadrada de chat para el rol del usuario, siempre en oscuro. */
+export declare function ChatBadge({ kind, size, title, className }: ChatBadgeProps): import("react").JSX.Element;

package/dist/components/ChatBadge.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { STREAM_ROOT } from "../internal/stream.js";
+import { Icon } from "./Icon.js";
+// Receta de Badge sobre las escalas utility en oscuro: fondo -50, borde -200, icono -700. Cada rol lleva además su
+// icono, así que no depende solo del color. Clases enteras: Tailwind solo genera las que ve escritas.
+const BADGES = {
+    broadcaster: {
+        icon: "play",
+        label: "Streamer",
+        tone: "bg-utility-brand-50 text-utility-brand-700 inset-ring-utility-brand-200",
+    },
+    mod: {
+        icon: "shield-tick",
+        label: "Moderador",
+        tone: "bg-utility-emerald-50 text-utility-emerald-700 inset-ring-utility-emerald-200",
+    },
+    vip: {
+        icon: "stars-02",
+        label: "VIP",
+        tone: "bg-utility-pink-50 text-utility-pink-700 inset-ring-utility-pink-200",
+    },
+    sub: {
+        icon: "star-01",
+        label: "Suscriptor",
+        tone: "bg-utility-sky-50 text-utility-sky-700 inset-ring-utility-sky-200",
+    },
+    bits: {
+        icon: "zap",
+        label: "Bits",
+        tone: "bg-utility-purple-50 text-utility-purple-700 inset-ring-utility-purple-200",
+    },
+};
+/** Insignia cuadrada de chat para el rol del usuario, siempre en oscuro. */
+export function ChatBadge({ kind = "sub", size = 20, title, className }) {
+    const b = BADGES[kind] ?? BADGES.sub;
+    const name = title ?? b.label;
+    return (_jsx("span", { role: "img", "aria-label": name, title: name, className: cx(STREAM_ROOT, "inline-flex flex-none items-center justify-center rounded-sm inset-ring", b.tone, className), style: { width: size, height: size }, children: _jsx(Icon, { name: b.icon, size: Math.round(size * 0.65), strokeWidth: 2.25 }) }));
+}

package/dist/components/ChatBox.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { type ChatBadgeKind } from "./ChatBadge.js";
+export type ChatTone = "brand" | "sky" | "emerald" | "pink" | "purple" | "orange" | "indigo" | "neutral";
+export interface ChatMessage {
+    user: ReactNode;
+    /**
+     * Lo que escribe el espectador. Siempre texto plano: llega del público y se pinta tal cual, nunca como HTML
+     * (por eso es `string` y no un nodo).
+     */
+    text: string;
+    /**
+     * Tono del nombre: escala `utility-<tono>-700`.
+     * @default "neutral"
+     */
+    tone?: ChatTone;
+    /** Insignias delante del nombre; no más de tres. */
+    badges?: ChatBadgeKind[];
+    /** Clave estable. Sin ella se deriva del usuario y el texto. */
+    id?: string | number;
+}
+export interface ChatBoxProps {
+    /** Del más antiguo al más reciente; no más de 12 visibles. */
+    messages: ChatMessage[];
+    /** @default 420 */
+    width?: number | string;
+    /** @default 520 */
+    height?: number | string;
+    /** Fondo mezclado con transparencia y desenfoque de 16px; sólido si el navegador no tiene `color-mix`. */
+    translucent?: boolean;
+    /**
+     * Desvanece la parte de arriba de la lista.
+     * @default true
+     */
+    fade?: boolean;
+    /** Solo el último mensaje entra con fundido y 8px de subida. */
+    animate?: boolean;
+    /** @default "Chat del directo" */
+    "aria-label"?: string;
+    className?: string;
+}
+/** Chat del directo para overlay: anclado abajo, desvanecido arriba y siempre en oscuro. */
+export declare function ChatBox({ messages, width, height, translucent, fade, animate, "aria-label": ariaLabel, className, }: ChatBoxProps): import("react").JSX.Element;

package/dist/components/ChatBox.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { keyText, STREAM_ROOT, stableKeys, streamMotion } from "../internal/stream.js";
+import { defaultStrings } from "../internal/strings.js";
+import { ChatBadge } from "./ChatBadge.js";
+// Clases enteras: Tailwind solo genera las que ve escritas.
+const TONE = {
+    brand: "text-utility-brand-700",
+    sky: "text-utility-sky-700",
+    emerald: "text-utility-emerald-700",
+    pink: "text-utility-pink-700",
+    purple: "text-utility-purple-700",
+    orange: "text-utility-orange-700",
+    indigo: "text-utility-indigo-700",
+    neutral: "text-utility-neutral-700",
+};
+// La máscara solo usa el alfa: negro opaco arriba del 30 %, transparente en el borde.
+const FADE = {
+    // color-fijo: máscara de desvanecido (solo cuenta el alfa), como BackgroundPattern
+    maskImage: "linear-gradient(to bottom, transparent 0, black 30%)",
+    WebkitMaskImage: "linear-gradient(to bottom, transparent 0, black 30%)",
+};
+const contentKey = (m) => `${keyText(m.user)}|${m.text}`;
+/** Chat del directo para overlay: anclado abajo, desvanecido arriba y siempre en oscuro. */
+export function ChatBox({ messages, width, height, translucent = false, fade = true, animate = false, "aria-label": ariaLabel, className, }) {
+    const keys = stableKeys(messages, contentKey);
+    const size = {};
+    if (width != null)
+        size.width = width;
+    if (height != null)
+        size.height = height;
+    return (_jsx("div", { role: "log", "aria-live": "polite", "aria-label": ariaLabel ?? defaultStrings.streamChat, className: cx(STREAM_ROOT, "max-w-full overflow-hidden rounded-2xl border border-secondary", width == null && "w-[420px]", height == null && "h-[520px]", 
+        // Tailwind emite el sólido y, con `@supports (color: color-mix(…))`, la mezcla al 72 %.
+        translucent ? "bg-primary_alt/72 backdrop-blur-lg" : "bg-primary_alt", className), style: size, children: _jsx("div", { className: "flex h-full flex-col justify-end gap-3 p-4", style: fade ? FADE : undefined, children: messages.map((m, i) => (_jsxs("div", { className: cx("text-xl wrap-anywhere text-primary", i === messages.length - 1 && animate && streamMotion("enter")), children: [m.badges?.length ? (_jsx("span", { className: "mr-2 inline-flex gap-1 align-[-4px]", children: m.badges.map((b) => (_jsx(ChatBadge, { kind: b }, b))) })) : null, _jsxs("span", { className: cx("font-semibold", TONE[m.tone ?? "neutral"] ?? TONE.neutral), children: [m.user, _jsx("span", { className: "mr-2", children: ":" })] }), _jsx("span", { className: "text-primary", children: m.text })] }, keys[i]))) }) }));
+}

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,17 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+import { type ChoiceSize } from "../internal/choice.js";
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** Etiqueta junto a la casilla. */
+    label?: ReactNode;
+    /** Texto de apoyo bajo la etiqueta. */
+    hint?: ReactNode;
+    /** Selección parcial: guion en lugar de check y `aria-checked="mixed"`. */
+    indeterminate?: boolean;
+    /**
+     * Caja de 16px (`sm`) o 20px (`md`).
+     * @default "sm"
+     */
+    size?: ChoiceSize;
+}
+/** Casilla para activar opciones independientes, con etiqueta y texto de apoyo. */
+export declare function Checkbox({ label, hint, indeterminate, size, id: givenId, className, ...rest }: CheckboxProps): import("react").JSX.Element;

package/dist/components/Checkbox.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { ChoiceText, choiceBox, choiceLabel, hiddenInput } from "../internal/choice.js";
+import { cx } from "../internal/cx.js";
+import { Icon } from "./Icon.js";
+/** Casilla para activar opciones independientes, con etiqueta y texto de apoyo. */
+export function Checkbox({ label, hint, indeterminate, size = "sm", id: givenId, className, ...rest }) {
+    const autoId = useId();
+    const id = givenId ?? autoId;
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current)
+            ref.current.indeterminate = !!indeterminate;
+    }, [indeterminate]);
+    const markSize = size === "md" ? 14 : 12;
+    return (_jsxs("label", { htmlFor: id, className: cx(choiceLabel(size), className), children: [_jsx("input", { ref: ref, id: id, type: "checkbox", "aria-checked": indeterminate ? "mixed" : undefined, ...rest, className: hiddenInput }), _jsx("span", { "aria-hidden": "true", className: cx(choiceBox(size, false), "peer-checked:bg-brand-solid peer-checked:shadow-none peer-focus-visible:shadow-focus-ring peer-disabled:opacity-50", indeterminate && "bg-brand-solid shadow-none"), children: indeterminate ? (_jsx(Icon, { name: "minus", size: markSize, strokeWidth: 1.67 })) : (_jsx("span", { className: "hidden group-has-[:checked]:inline-flex", children: _jsx(Icon, { name: "check", size: markSize, strokeWidth: 1.67 }) })) }), _jsx(ChoiceText, { label: label, hint: hint, size: size, className: "peer-disabled:opacity-50" })] }));
+}

package/dist/components/CloseButton.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonHTMLAttributes } from "react";
+export interface CloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Nombre accesible. Por defecto, "Cerrar". */
+    label?: string;
+}
+/** Botón cuadrado de 36px con la X, para cerrar modales, alertas y notificaciones. */
+export declare function CloseButton({ label, className, ...rest }: CloseButtonProps): import("react").JSX.Element;

package/dist/components/CloseButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Icon } from "./Icon.js";
+/** Botón cuadrado de 36px con la X, para cerrar modales, alertas y notificaciones. */
+export function CloseButton({ label = defaultStrings.close, className, ...rest }) {
+    return (_jsx("button", { type: "button", "aria-label": label, ...rest, className: cx("inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-transparent p-2 text-fg-quaternary transition-colors duration-100 hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:shadow-focus-ring focus-visible:outline-none", className), children: _jsx(Icon, { name: "x-close", size: 20 }) }));
+}

package/dist/components/CodeSnippet.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+export interface CodeSnippetTab {
+    label: string;
+    code: string;
+}
+export interface CodeSnippetProps {
+    /** Código de una sola pestaña. */
+    code?: string;
+    /** Nombre de esa pestaña única (no cambia el resaltado, que es el mismo para todos). */
+    language?: string;
+    /** Varias versiones del mismo código, cada una en su pestaña. */
+    tabs?: CodeSnippetTab[];
+    /**
+     * Columna de números de línea.
+     * @default true
+     */
+    lineNumbers?: boolean;
+    className?: string;
+}
+/** Trocea el código en comentarios, cadenas, palabras clave y nombres con los colores de la guía. */
+export declare function highlight(src: string): ReactNode[];
+/** Bloque de código con números de línea, resaltado sencillo, pestañas y botón de copiar. */
+export declare function CodeSnippet({ code, language, tabs, lineNumbers, className }: CodeSnippetProps): import("react").JSX.Element;

package/dist/components/CodeSnippet.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Icon } from "./Icon.js";
+// Resaltado deliberadamente simple (JS, TS, bash, Python básico), el mismo que la guía
+const KEYWORDS = /^(import|from|export|default|const|let|var|function|return|new|if|else|for|while|class|extends|async|await|try|catch|throw|true|false|null|undefined|def|in|of|as|type|interface)$/;
+const TOKENS = /(\/\/[^\n]*|#[^\n]*|\/\*[\s\S]*?\*\/)|('(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"|`(?:\\.|[^`\\])*`)|([A-Za-z_$][\w$]*)|([\s\S])/g;
+/** Trocea el código en comentarios, cadenas, palabras clave y nombres con los colores de la guía. */
+export function highlight(src) {
+    const out = [];
+    let k = 0;
+    for (const m of src.matchAll(TOKENS)) {
+        const at = m.index ?? 0;
+        if (m[1])
+            out.push(_jsx("span", { className: "text-utility-green-700", children: m[1] }, k++));
+        else if (m[2])
+            out.push(_jsx("span", { className: "text-primary", children: m[2] }, k++));
+        else if (m[3]) {
+            const word = m[3];
+            const next = /^\s*[:(]/.test(src.slice(at + word.length));
+            const prev = src[at - 1];
+            if (KEYWORDS.test(word))
+                out.push(_jsx("span", { className: "text-utility-pink-600", children: word }, k++));
+            else if (/^[A-Z]/.test(word) || prev === "." || next)
+                out.push(_jsx("span", { className: "text-utility-blue-600", children: word }, k++));
+            else
+                out.push(word);
+        }
+        else
+            out.push(m[4]);
+    }
+    return out;
+}
+/** Bloque de código con números de línea, resaltado sencillo, pestañas y botón de copiar. */
+export function CodeSnippet({ code, language, tabs, lineNumbers = true, className }) {
+    const list = tabs ?? [{ label: language ?? defaultStrings.code, code: code ?? "" }];
+    const [index, setIndex] = useState(0);
+    const [copied, setCopied] = useState(false);
+    const timer = useRef(undefined);
+    const id = useId();
+    const tabRefs = useRef([]);
+    const current = list[Math.min(index, list.length - 1)];
+    const lines = current.code.replace(/\n$/, "").split("\n");
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(current.code);
+        }
+        catch {
+            // Sin permiso de portapapeles: el botón confirma igual, como en la guía
+        }
+        setCopied(true);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setCopied(false), 1500);
+    };
+    const onTabKey = (e, i) => {
+        const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+        if (!step)
+            return;
+        e.preventDefault();
+        const next = (i + step + list.length) % list.length;
+        setIndex(next);
+        tabRefs.current[next]?.focus();
+    };
+    const multi = list.length > 1;
+    return (_jsxs("div", { className: cx("relative overflow-hidden rounded-xl bg-primary font-body shadow-[inset_0_0_0_1px_var(--border-secondary)]", className), children: [multi ? (_jsx("div", { role: "tablist", "aria-label": defaultStrings.code, className: "flex gap-1 bg-secondary px-3 py-2 shadow-[inset_0_-1px_0_var(--border-secondary)]", children: list.map((t, i) => (_jsx("button", { ref: (el) => {
+                        tabRefs.current[i] = el;
+                    }, type: "button", role: "tab", id: `${id}-tab-${i}`, "aria-selected": i === index, "aria-controls": `${id}-panel`, tabIndex: i === index ? 0 : -1, onClick: () => setIndex(i), onKeyDown: (e) => onTabKey(e, i), className: "cursor-pointer rounded-md border-0 bg-transparent px-2 py-1 font-body text-sm font-semibold text-quaternary focus-visible:shadow-focus-ring focus-visible:outline-none aria-selected:bg-primary aria-selected:text-primary aria-selected:shadow-[var(--shadow-xs),inset_0_0_0_1px_var(--border-secondary)]", children: t.label }, i))) })) : null, _jsxs("div", { className: "relative flex", ...(multi
+                    ? { role: "tabpanel", id: `${id}-panel`, "aria-labelledby": `${id}-tab-${index}` }
+                    : {}), children: [lineNumbers ? (_jsx("div", { "aria-hidden": "true", className: "flex-none bg-secondary px-4 py-5 text-right font-mono text-code-sm text-quaternary shadow-[inset_-1px_0_0_var(--border-secondary)] select-none", children: lines.map((_, i) => (_jsx("div", { children: i + 1 }, i))) })) : null, _jsx("pre", { 
+                        // biome-ignore lint/a11y/noNoninteractiveTabindex: si una línea no cabe, el bloque se desplaza y tiene que poder hacerse con teclado
+                        tabIndex: 0, className: "m-0 flex-1 overflow-auto p-5 pr-14 font-mono text-code-sm text-primary [tab-size:2] focus-visible:shadow-[inset_0_0_0_2px_var(--focus-ring)] focus-visible:outline-none", children: _jsx("code", { children: highlight(lines.join("\n")) }) }), _jsx("button", { type: "button", onClick: copy, "aria-label": copied ? defaultStrings.copied : defaultStrings.copyCode, className: "absolute top-3 right-3 inline-flex cursor-pointer rounded-md border-0 bg-primary p-1.5 text-fg-quaternary shadow-[inset_0_0_0_1px_var(--border-secondary)] hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:shadow-focus-ring focus-visible:outline-none", children: _jsx(Icon, { name: copied ? "check" : "copy-01", size: 16 }) }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? defaultStrings.copied : "" })] })] }));
+}

package/dist/components/ColorPicker.d.ts

@@ -0,0 +1,15 @@
+export interface ColorPickerProps {
+    /** Color inicial en hex. Por defecto, el índigo de la marca. */
+    defaultValue?: string;
+    /** Recibe el hex en minúsculas con `#` en cada cambio. */
+    onChange?: (hex: string) => void;
+    /** Colores guardados, en hex. */
+    swatches?: string[];
+    /** @default "Colores guardados" */
+    swatchesLabel?: string;
+    /** Nombre accesible del campo hexadecimal. @default "Hex" */
+    hexLabel?: string;
+    className?: string;
+}
+/** Selector de color: área de saturación y brillo, barra de tono, campo hex y muestras guardadas. */
+export declare function ColorPicker({ defaultValue, onChange, swatches, swatchesLabel, hexLabel, className, }: ColorPickerProps): import("react").JSX.Element;

package/dist/components/ColorPicker.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ColorArea, ColorSlider, ColorThumb, I18nProvider, parseColor, SliderTrack, } from "react-aria-components";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Input } from "./Input.js";
+const HEX = /^#?([0-9a-f]{6})$/i;
+const toHsb = (hex) => parseColor(`#${HEX.exec(hex)?.[1] ?? "4f39f6"}`).toFormat("hsb");
+const hexOf = (c) => c.toString("hex").toLowerCase();
+// Mandos blancos de 20px con filo oscuro, legibles sobre cualquier color (ficha de ColorPicker)
+const THUMB = 
+// color-fijo: mando blanco con filo negro al 10 % sobre cualquier color (ficha de ColorPicker)
+"size-5 rounded-full border-2 border-[#ffffff] shadow-[var(--shadow-md),0_0_0_1px_#0000001a] data-focus-visible:shadow-[var(--shadow-md),0_0_0_1px_#0000001a,var(--focus-ring-shadow)]";
+// color-fijo: filo negro al 10 % de las muestras, que pueden ser de cualquier color (ficha de ColorPicker)
+const HAIRLINE = "shadow-[inset_0_0_0_1px_#0000001a]";
+/** Selector de color: área de saturación y brillo, barra de tono, campo hex y muestras guardadas. */
+export function ColorPicker({ 
+// color-fijo: valor inicial, el índigo de marca de la vista previa (ficha de ColorPicker)
+defaultValue = "#4f39f6", onChange, swatches, swatchesLabel = defaultStrings.savedColors, hexLabel = defaultStrings.hex, className, }) {
+    const [color, setColor] = useState(() => toHsb(defaultValue));
+    // Lo que se está tecleando en el campo hex, hasta que sea un color válido
+    const [typing, setTyping] = useState(null);
+    const hex = hexOf(color);
+    const set = (next) => {
+        setColor(next);
+        setTyping(null);
+        onChange?.(hexOf(next));
+    };
+    return (_jsx(I18nProvider, { locale: "es-ES", children: _jsxs("div", { className: cx("flex w-80 flex-col gap-4 rounded-2xl bg-primary_alt p-5 font-body shadow-[var(--shadow-xl),inset_0_0_0_1px_var(--border-secondary_alt)]", className), children: [_jsx(ColorArea, { value: color, onChange: set, xChannel: "saturation", yChannel: "brightness", className: "h-50 w-full cursor-crosshair touch-none rounded-lg", children: _jsx(ColorThumb, { className: THUMB }) }), _jsx(ColorSlider, { value: color, onChange: set, channel: "hue", colorSpace: "hsb", children: _jsx(SliderTrack, { className: "h-3 cursor-pointer touch-none rounded-full", children: _jsx(ColorThumb, { className: cx(THUMB, "top-1/2") }) }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: cx("size-9 flex-none rounded-lg", HAIRLINE), style: { background: hex } }), _jsx(Input, { size: "sm", "aria-label": hexLabel, className: "flex-1", value: typing ?? hex.toUpperCase(), onChange: (e) => {
+                                const v = e.target.value;
+                                setTyping(v);
+                                if (HEX.test(v)) {
+                                    const next = toHsb(v);
+                                    setColor(next);
+                                    onChange?.(hexOf(next));
+                                }
+                            }, onBlur: () => setTyping(null) })] }), swatches?.length ? (_jsxs("div", { children: [_jsx("div", { className: "mb-2 text-sm font-medium text-secondary", children: swatchesLabel }), _jsx("div", { className: "flex flex-wrap gap-2", children: swatches.map((c) => {
+                                const on = c.toLowerCase() === hex;
+                                return (_jsx("button", { type: "button", "aria-label": c.toUpperCase(), "aria-pressed": on, onClick: () => set(toHsb(c)), style: { background: c }, className: cx("size-6 cursor-pointer rounded-full border-0 focus-visible:shadow-focus-ring focus-visible:outline-none", on ? "shadow-focus-ring" : HAIRLINE) }, c));
+                            }) })] })) : null] }) }));
+}

package/dist/components/CommandMenu.d.ts

@@ -0,0 +1,72 @@
+import { type ReactNode } from "react";
+import { type IconName } from "./Icon.js";
+export interface CommandItem {
+    icon?: IconName;
+    label: string;
+    /** Texto de apoyo tras la etiqueta, en `text-tertiary`. */
+    description?: string;
+    /** Atajo que se muestra a la derecha (solo texto; no lo registra). */
+    shortcut?: string;
+    /** Palabras extra para el filtro, separadas por espacios. */
+    keywords?: string;
+    onSelect?: () => void;
+}
+export interface CommandGroup {
+    label: string;
+    items: CommandItem[];
+}
+export interface CommandMenuLabels {
+    /** Nombre del diálogo. @default "Menú de comandos" */
+    dialog: string;
+    /** Nombre del buscador. @default "Buscar comandos" */
+    search: string;
+    /** Título del estado vacío. @default "Sin resultados" */
+    noResults: string;
+    /** Pie: "↑ ↓ moverse", "↵ abrir", "esc cerrar". */
+    move: string;
+    open: string;
+    close: string;
+}
+export interface CommandMenuProps {
+    /**
+     * Visible. Con `false` no se pinta.
+     * @default true
+     */
+    open?: boolean;
+    /** Al pulsar Escape, fuera del panel o tras ejecutar un comando. */
+    onClose?: () => void;
+    /** Primero las apps de la suite, luego las acciones de la app actual. */
+    groups: CommandGroup[];
+    /**
+     * Placeholder del buscador.
+     * @default "Busca o escribe un comando"
+     */
+    placeholder?: string;
+    /**
+     * Texto bajo "Sin resultados".
+     * @default "Prueba con otra palabra."
+     */
+    emptyText?: ReactNode;
+    /** Se pinta dentro de su contenedor (posición relativa) en vez de sobre toda la página, sin atrapar el foco. */
+    contained?: boolean;
+    /**
+     * Lleva el foco al buscador al abrirse.
+     * @default true
+     */
+    autoFocus?: boolean;
+    /** Textos que trae el componente, para sustituirlos. */
+    labels?: Partial<CommandMenuLabels>;
+    /** Cada cambio del buscador (ampliación sobre la guía): para pedir resultados a otra fuente, como un índice de búsqueda. */
+    onQueryChange?: (query: string) => void;
+    /**
+     * Filtra los elementos por lo escrito. Con `false`, los grupos se pintan tal cual y el filtro es de la app (ampliación sobre la guía).
+     * @default true
+     */
+    filter?: boolean;
+}
+/**
+ * Menú de comandos (⌘K) para saltar entre apps de la suite y lanzar acciones escribiendo.
+ * Filtra mientras escribes (etiqueta, descripción y `keywords`); ↑ ↓ para moverse, ↵ para ejecutar, Esc para cerrar.
+ * El atajo global lo registra la app: este componente solo se abre y se cierra con `open` y `onClose`.
+ */
+export declare function CommandMenu({ open, onClose, groups, placeholder, emptyText, contained, autoFocus, labels, onQueryChange, filter, }: CommandMenuProps): import("react").JSX.Element | null;

package/dist/components/CommandMenu.js

@@ -0,0 +1,102 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Dialog, Modal, ModalOverlay } from "react-aria-components";
+import { cx } from "../internal/cx.js";
+import { Kbd } from "../internal/kbd.js";
+import { OVERLAY, OVERLAY_POSITION } from "../internal/overlay.js";
+import { defaultStrings } from "../internal/strings.js";
+import { FeaturedIcon } from "./FeaturedIcon.js";
+import { Icon } from "./Icon.js";
+const matches = (item, needle) => !needle ||
+    `${item.label} ${item.description ?? ""} ${item.keywords ?? ""}`.toLowerCase().includes(needle);
+/**
+ * Menú de comandos (⌘K) para saltar entre apps de la suite y lanzar acciones escribiendo.
+ * Filtra mientras escribes (etiqueta, descripción y `keywords`); ↑ ↓ para moverse, ↵ para ejecutar, Esc para cerrar.
+ * El atajo global lo registra la app: este componente solo se abre y se cierra con `open` y `onClose`.
+ */
+export function CommandMenu({ open = true, onClose, groups, placeholder, emptyText, contained, autoFocus = true, labels, onQueryChange, filter = true, }) {
+    const t = {
+        dialog: defaultStrings.commandMenu,
+        search: defaultStrings.searchCommands,
+        noResults: defaultStrings.noResults,
+        move: defaultStrings.toMove,
+        open: defaultStrings.toOpen,
+        close: defaultStrings.toClose,
+        ...labels,
+    };
+    const [query, setQuery] = useState("");
+    const [active, setActive] = useState(0);
+    const id = useId();
+    const listRef = useRef(null);
+    const needle = filter ? query.trim().toLowerCase() : "";
+    const visible = groups
+        .map((g) => ({ label: g.label, items: g.items.filter((it) => matches(it, needle)) }))
+        .filter((g) => g.items.length);
+    const flat = visible.flatMap((g) => g.items);
+    const current = Math.min(active, Math.max(flat.length - 1, 0));
+    const optionId = (i) => `${id}-opt-${i}`;
+    // Mantiene la opción activa a la vista desplazando solo la lista (scrollIntoView movería también la página)
+    useEffect(() => {
+        const list = listRef.current;
+        const el = list?.ownerDocument.getElementById(optionId(current));
+        if (!list || !el)
+            return;
+        const top = el.offsetTop; // la lista es `relative`: offsetTop ya es relativo a ella
+        if (top < list.scrollTop)
+            list.scrollTop = top;
+        else if (top + el.offsetHeight > list.scrollTop + list.clientHeight)
+            list.scrollTop = top + el.offsetHeight - list.clientHeight;
+    });
+    if (!open)
+        return null;
+    const run = (item) => {
+        if (!item)
+            return;
+        item.onSelect?.();
+        onClose?.();
+    };
+    const onKeyDown = (e) => {
+        const n = Math.max(flat.length, 1);
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setActive((current + 1) % n);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setActive((current - 1 + n) % n);
+        }
+        else if (e.key === "Enter") {
+            e.preventDefault();
+            run(flat[current]);
+        }
+        else if (e.key === "Escape" && contained) {
+            // Fuera de `contained`, Escape lo gestiona el modal de React Aria
+            onClose?.();
+        }
+    };
+    let index = -1;
+    const listId = `${id}-list`;
+    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 p-4 text-fg-quaternary shadow-[inset_0_-1px_0_var(--border-secondary)]", children: [_jsx(Icon, { name: "search-lg", size: 20 }), _jsx("input", { 
+                        // biome-ignore lint/a11y/noAutofocus: el buscador es lo único que hay que hacer al abrir el menú
+                        autoFocus: autoFocus, value: query, placeholder: placeholder ?? defaultStrings.commandPlaceholder, "aria-label": t.search, role: "combobox", "aria-expanded": flat.length > 0, "aria-controls": flat.length ? listId : undefined, "aria-autocomplete": "list", "aria-activedescendant": flat.length ? optionId(current) : undefined, onChange: (e) => {
+                            setQuery(e.target.value);
+                            setActive(0);
+                            onQueryChange?.(e.target.value);
+                        }, onKeyDown: onKeyDown, className: "min-w-0 flex-1 border-0 bg-transparent px-0.5 py-px font-body text-md text-primary outline-none placeholder:text-placeholder" }), _jsx(Kbd, { children: "\u2318K" })] }), flat.length ? (_jsx("div", { ref: listRef, id: listId, role: "listbox", "aria-label": t.dialog, className: "relative max-h-[360px] overflow-auto", children: visible.map((g, gi) => (_jsxs("div", { role: "group", "aria-labelledby": `${id}-g${gi}`, className: "py-2 shadow-[inset_0_-1px_0_var(--border-secondary)]", children: [_jsx("div", { id: `${id}-g${gi}`, className: "px-[18px] pt-2 pb-1 text-xs font-semibold text-primary", children: g.label }), g.items.map((item) => {
+                            index++;
+                            const i = index;
+                            return (_jsxs("div", { id: optionId(i), role: "option", "aria-selected": i === current, tabIndex: -1, onMouseEnter: () => setActive(i), onClick: () => run(item), className: "mx-2 my-0.5 flex cursor-pointer items-center gap-2 rounded-lg py-2 pr-2 pl-2.5 text-sm font-medium text-secondary aria-selected:bg-primary_hover aria-selected:text-secondary_hover [&_svg]:text-fg-quaternary", children: [item.icon ? _jsx(Icon, { name: item.icon, size: 20 }) : null, _jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [_jsx("span", { className: "shrink-0 whitespace-nowrap", children: item.label }), item.description ? (_jsx("span", { className: "truncate font-normal text-tertiary", children: item.description })) : null] }), item.shortcut ? _jsx(Kbd, { children: item.shortcut }) : null] }, optionId(i)));
+                        })] }, gi))) })) : (_jsxs("div", { role: "status", className: "flex flex-col items-center gap-2 px-4 py-8 text-center", children: [_jsx(FeaturedIcon, { icon: "search-lg", variant: "modern", color: "gray", size: "md" }), _jsx("div", { className: "m-0 text-md font-semibold text-primary", children: t.noResults }), _jsx("div", { className: "mt-1 max-w-[352px] text-sm text-tertiary", children: emptyText ?? defaultStrings.tryAnother })] })), _jsxs("div", { className: "flex gap-4 bg-secondary px-4 py-3 text-xs text-tertiary", children: [_jsxs("span", { children: [_jsx(Kbd, { className: "mr-0.5 bg-primary", children: "\u2191" }), _jsx(Kbd, { className: "mr-0.5 bg-primary", children: "\u2193" }), " ", t.move] }), _jsxs("span", { children: [_jsx(Kbd, { className: "mr-0.5 bg-primary", children: "\u21B5" }), " ", t.open] }), _jsxs("span", { children: [_jsx(Kbd, { className: "mr-0.5 bg-primary", children: "esc" }), " ", t.close] })] })] }));
+    const PANEL = "w-full max-w-[640px] overflow-hidden rounded-xl bg-primary_alt font-body shadow-[var(--shadow-xl),inset_0_0_0_1px_var(--border-secondary_alt)] outline-none";
+    if (contained) {
+        return (_jsx("div", { className: cx(OVERLAY, OVERLAY_POSITION(true), "items-start justify-center pt-6"), onClick: (e) => {
+                if (e.target === e.currentTarget)
+                    onClose?.();
+            }, children: _jsx("div", { role: "dialog", "aria-label": t.dialog, className: PANEL, children: body }) }));
+    }
+    return (_jsx(ModalOverlay, { isOpen: true, isDismissable: true, onOpenChange: (next) => {
+            if (!next)
+                onClose?.();
+        }, className: cx(OVERLAY, OVERLAY_POSITION(false), "items-start justify-center pt-40"), children: _jsx(Modal, { className: PANEL, children: _jsx(Dialog, { "aria-label": t.dialog, className: "outline-none", children: body }) }) }));
+}

package/dist/components/ContentDivider.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export interface ContentDividerProps {
+    /** Texto en el centro, como "o continúa con" o una fecha. */
+    label?: ReactNode;
+    /** El texto como título (`text-md` semibold en `text-primary`) en lugar de `text-sm` en `text-tertiary`. */
+    heading?: boolean;
+    /**
+     * `single` una línea · `dual` dos líneas · `fill` banda en `bg-secondary`.
+     * @default "single"
+     */
+    variant?: "single" | "dual" | "fill";
+    /** Un `Button` en el centro, como "Cargar más". Sustituye a `label`. */
+    children?: ReactNode;
+    className?: string;
+}
+/** Separador horizontal, solo o con texto o un botón en el centro. */
+export declare function ContentDivider({ label, heading, variant, children, className, }: ContentDividerProps): import("react").JSX.Element;

package/dist/components/ContentDivider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+const LINE = {
+    single: "border-t border-secondary",
+    dual: "h-[5px] border-y border-secondary",
+    fill: "h-8 bg-secondary",
+};
+/** Separador horizontal, solo o con texto o un botón en el centro. */
+export function ContentDivider({ label, heading, variant = "single", children, className, }) {
+    const mid = children ? (children) : label ? (_jsx("span", { className: cx("whitespace-nowrap", heading ? "text-md font-semibold text-primary" : "text-sm font-medium text-tertiary", variant === "fill" && "inline-flex h-8 items-center bg-secondary px-2"), children: label })) : null;
+    const line = _jsx("span", { "aria-hidden": "true", className: cx("flex-1", LINE[variant]) });
+    return (_jsxs("div", { role: mid ? undefined : "separator", className: cx("flex items-center font-body", variant === "fill" ? "gap-0" : "gap-2", className), children: [line, mid, mid ? line : null] }));
+}

package/dist/components/CreditCard.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties, ReactNode } from "react";
+export type CreditCardTheme = "brand-dark" | "brand-light" | "gray-dark" | "gray-light" | "transparent";
+export interface CreditCardProps {
+    /**
+     * Acabado de la tarjeta. Sus colores son fijos: es un objeto y no cambia con el tema.
+     * @default "brand-dark"
+     */
+    theme?: CreditCardTheme;
+    /** Texto arriba a la izquierda, en Bricolage Grotesque. @default "jotis.me" */
+    company?: ReactNode;
+    /** Titular, en mayúsculas. @default "ADMINISTRADOR" */
+    holder?: string;
+    /** Caducidad, como "06/29". */
+    expiry?: string;
+    /** Los cuatro últimos dígitos: nunca se muestra el número entero. @default "1234" */
+    last4?: string;
+    /** Red de pago como texto, abajo a la derecha. Sin logotipos. */
+    network?: ReactNode;
+    /**
+     * Nombre para lectores de pantalla (ampliación sobre la guía). Por defecto resume los datos:
+     * "Tarjeta Pecunia terminada en 4821, titular Administrador, caduca 06/29".
+     */
+    "aria-label"?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Maqueta de tarjeta de pago (316×190) para métodos de pago, onboarding o capturas. Es una imagen con nombre. */
+export declare function CreditCard({ theme, company, holder, expiry, last4, network, className, style, ...rest }: CreditCardProps): import("react").JSX.Element;