@jotis-me/react 0.0.0-stage → 0.1.0

package/dist/components/StreamStatus.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+export type StreamStatusValue = "live" | "offline" | "rerun";
+export interface StreamStatusLabels {
+    /** @default "En directo" */
+    live: string;
+    /** @default "Reemisión" */
+    rerun: string;
+    /** @default "Sin directo" */
+    offline: string;
+    /** Tras la cifra, solo para lectores de pantalla. @default "espectadores" */
+    viewers: string;
+    /** Tras el tiempo en emisión, solo para lectores de pantalla. @default "en emisión" */
+    uptime: string;
+}
+export interface StreamStatusProps {
+    /** @default "live" */
+    status?: StreamStatusValue;
+    /** Espectadores; solo en `live`. Quítalo si no quieres exponer la cifra. */
+    viewers?: number;
+    /** Tiempo en emisión como texto ("2:14:05"); solo en `live`. */
+    uptime?: string;
+    category?: ReactNode;
+    /** Sustituye los textos (ampliación sobre la guía). */
+    labels?: Partial<StreamStatusLabels>;
+    className?: string;
+}
+/** Píldora de estado del canal (en directo, reemisión o sin directo), siempre en oscuro. */
+export declare function StreamStatus({ status, viewers, uptime, category, labels, className, }: StreamStatusProps): import("react").JSX.Element;

package/dist/components/StreamStatus.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { formatNumber } from "../internal/format.js";
+import { STREAM_ROOT, TABULAR } from "../internal/stream.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Icon } from "./Icon.js";
+// Nunca rojo para "en directo": en el sistema el rojo es error. El punto va siempre junto a la palabra.
+const DOT = {
+    live: "bg-fg-success-secondary",
+    rerun: "bg-fg-warning-secondary",
+    offline: "bg-fg-quaternary",
+};
+/** Píldora de estado del canal (en directo, reemisión o sin directo), siempre en oscuro. */
+export function StreamStatus({ status = "live", viewers, uptime, category, labels, className, }) {
+    const t = {
+        live: defaultStrings.streamLive,
+        rerun: defaultStrings.streamRerun,
+        offline: defaultStrings.streamOffline,
+        viewers: defaultStrings.viewers,
+        uptime: defaultStrings.onAir,
+        ...labels,
+    };
+    const live = status === "live";
+    const meta = cx(TABULAR, "inline-flex items-center gap-1.5");
+    return (_jsxs("div", { role: "status", className: cx(STREAM_ROOT, "inline-flex items-center gap-4 rounded-full border border-secondary bg-primary_alt px-4 py-2 text-sm font-medium text-secondary", className), children: [_jsxs("span", { className: "inline-flex items-center gap-2 font-semibold text-primary", children: [_jsx("span", { "aria-hidden": "true", className: cx("inline-block size-2 flex-none rounded-full", DOT[status]) }), t[status]] }), live && viewers != null ? (_jsxs("span", { className: meta, children: [_jsx(Icon, { name: "eye", size: 16, className: "text-fg-tertiary" }), formatNumber(viewers), _jsxs("span", { className: "sr-only", children: [" ", t.viewers] })] })) : null, live && uptime ? (_jsxs("span", { className: meta, children: [_jsx(Icon, { name: "clock", size: 16, className: "text-fg-tertiary" }), uptime, _jsxs("span", { className: "sr-only", children: [" ", t.uptime] })] })) : null, category ? _jsx("span", { className: meta, children: category }) : null] }));
+}

package/dist/components/Table.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from "react";
+export interface TableColumn<R = Record<string, unknown>> {
+    key: string;
+    label: ReactNode;
+    /** Columna principal (la primera): `text-primary` medium. Solo una. */
+    primary?: boolean;
+    /** Los números, a la derecha. @default "left" */
+    align?: "left" | "right";
+    /** Pinta la celda; por defecto, `row[key]`. */
+    render?: (row: R) => ReactNode;
+}
+export interface TableProps<R = Record<string, unknown>> {
+    columns: TableColumn<R>[];
+    /** Filas. Si tienen `id`, se usa como clave. */
+    rows: R[];
+    /** Título de la tarjeta; también da nombre a la tabla. */
+    title?: ReactNode;
+    /** Total junto al título, en un `Badge` de marca. */
+    count?: ReactNode;
+    description?: ReactNode;
+    /** Acciones de la cabecera (buscar, exportar): a la vista, sin esconderlas. */
+    actions?: ReactNode;
+    /** Pie, por ejemplo una `Pagination`. */
+    footer?: ReactNode;
+    /**
+     * Alto de fila: `md` 72px · `sm` 56px.
+     * @default "md"
+     */
+    size?: "sm" | "md";
+    className?: string;
+}
+/**
+ * Tabla de datos en tarjeta con cabecera, columnas y pie opcional. Mínima: nada que no sea dato.
+ * Si no cabe a lo ancho, se desplaza dentro de la tarjeta (también con teclado).
+ */
+export declare function Table<R = Record<string, unknown>>({ columns, rows, title, count, description, actions, footer, size, className, }: TableProps<R>): import("react").JSX.Element;

package/dist/components/Table.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "../internal/cx.js";
+import { Badge } from "./Badge.js";
+/**
+ * Tabla de datos en tarjeta con cabecera, columnas y pie opcional. Mínima: nada que no sea dato.
+ * Si no cabe a lo ancho, se desplaza dentro de la tarjeta (también con teclado).
+ */
+export function Table({ columns, rows, title, count, description, actions, footer, size = "md", className, }) {
+    const id = useId();
+    const titleId = title ? `${id}-title` : undefined;
+    return (_jsxs("div", { className: cx("overflow-hidden rounded-xl bg-primary font-body shadow-[var(--shadow-xs),inset_0_0_0_1px_var(--border-secondary)]", className), children: [title ? (_jsxs("div", { className: "flex items-center gap-4 px-6 py-5", children: [_jsxs("div", { className: "flex-1", children: [_jsxs("h3", { id: titleId, className: "m-0 flex items-center gap-2 text-lg font-semibold text-primary", children: [title, count != null ? (_jsx(Badge, { color: "brand", size: "sm", children: count })) : null] }), description ? (_jsx("p", { className: "mt-1 mb-0 text-sm text-tertiary", children: description })) : null] }), actions ?? null] })) : null, _jsx("div", { ...(titleId ? { role: "region", "aria-labelledby": titleId } : {}), 
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: región desplazable; sin foco no se podría recorrer con teclado
+                tabIndex: 0, className: "overflow-x-auto focus-visible:shadow-[inset_0_0_0_2px_var(--focus-ring)] focus-visible:outline-none", children: _jsxs("table", { "aria-labelledby": titleId, className: "w-full border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((c) => (_jsx("th", { scope: "col", className: cx("h-11 border-y border-secondary bg-secondary px-6 py-3 text-xs font-semibold whitespace-nowrap text-quaternary", c.align === "right" ? "text-right" : "text-left"), children: c.label }, c.key))) }) }), _jsx("tbody", { children: rows.map((row, i) => (_jsx("tr", { className: "hover:bg-primary_hover [&:last-child>td]:border-b-0", children: columns.map((c) => (_jsx("td", { className: cx("border-b border-secondary px-6 text-sm", size === "sm" ? "h-14 py-3" : "h-18 py-4", c.primary ? "font-medium text-primary" : "text-tertiary", c.align === "right" && "text-right"), children: c.render ? c.render(row) : row[c.key] }, c.key))) }, String(row.id ?? i)))) })] }) }), footer ?? null] }));
+}

package/dist/components/Tabs.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+export type TabsType = "underline" | "button-brand" | "button-gray" | "button-border";
+export type TabsSize = "sm" | "md";
+export interface TabItem {
+    id: string;
+    label: ReactNode;
+    /** Contador junto a la etiqueta (por ejemplo, elementos sin leer). */
+    count?: number;
+}
+export interface TabsProps {
+    items: TabItem[];
+    /** Pestaña activa (controlado). */
+    value?: string;
+    /** Pestaña activa al principio (no controlado). Si falta, la primera. */
+    defaultValue?: string;
+    onChange?: (id: string) => void;
+    /**
+     * `underline` para secciones de página; `button-border` como control segmentado dentro de una tarjeta;
+     * `button-brand` cuando la navegación es la protagonista.
+     * @default "underline"
+     */
+    type?: TabsType;
+    /**
+     * Alto: `sm` 36 · `md` 44.
+     * @default "sm"
+     */
+    size?: TabsSize;
+    /** Nombre de la lista de pestañas para lectores de pantalla. */
+    "aria-label"?: string;
+    /**
+     * Contenido de la pestaña activa (ampliación sobre la guía). Si llega, se pinta en un `tabpanel` enlazado a su
+     * pestaña; si no, el componente es solo la lista y tú pintas el contenido.
+     */
+    children?: (id: string) => ReactNode;
+    className?: string;
+}
+/** Pestañas para cambiar entre vistas hermanas dentro de una página. Flechas, Inicio y Fin mueven la selección. */
+export declare function Tabs({ items, value, defaultValue, onChange, type, size, children, className, ...rest }: TabsProps): import("react").JSX.Element;

package/dist/components/Tabs.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs as AriaTabs, Tab, TabList, TabPanel } from "react-aria-components";
+import { cx } from "../internal/cx.js";
+import { useControllable } from "../internal/use-controllable.js";
+const LIST = {
+    underline: "gap-3 shadow-[inset_0_-1px_0_var(--border-secondary)]",
+    "button-brand": "",
+    "button-gray": "",
+    "button-border": "inline-flex w-fit rounded-lg bg-secondary_alt p-1 shadow-[inset_0_0_0_1px_var(--border-secondary)]",
+};
+const TAB = {
+    underline: "h-auto rounded-none px-1 pt-0 pb-3 data-selected:text-brand-secondary data-selected:shadow-[inset_0_-2px_0_var(--fg-brand-primary_alt)] data-selected:data-focus-visible:shadow-[inset_0_-2px_0_var(--fg-brand-primary_alt),var(--focus-ring-shadow)]",
+    "button-brand": "data-hovered:bg-brand-primary_alt data-hovered:text-brand-secondary data-selected:bg-brand-primary_alt data-selected:text-brand-secondary",
+    "button-gray": "data-hovered:bg-primary_hover data-hovered:text-secondary data-selected:bg-primary_hover data-selected:text-secondary",
+    "button-border": "data-selected:bg-primary_alt data-selected:text-secondary data-selected:shadow-sm",
+};
+/** Pestañas para cambiar entre vistas hermanas dentro de una página. Flechas, Inicio y Fin mueven la selección. */
+export function Tabs({ items, value, defaultValue, onChange, type = "underline", size = "sm", children, className, ...rest }) {
+    const [current, setCurrent] = useControllable(value, defaultValue ?? items[0]?.id);
+    return (_jsxs(AriaTabs, { selectedKey: current, onSelectionChange: (key) => {
+            const id = String(key);
+            if (id === current)
+                return;
+            setCurrent(id);
+            onChange?.(id);
+        }, className: cx(className), children: [_jsx(TabList, { "aria-label": rest["aria-label"], className: cx("flex gap-1 font-body", LIST[type]), children: items.map((item) => (_jsxs(Tab, { id: item.id, 
+                    // Sin paneles, React Aria apuntaría aria-controls a un id que no existe
+                    render: children
+                        ? undefined
+                        : ({ "aria-controls": _, ...props }) => _jsx("div", { ...props }), className: cx("group inline-flex cursor-pointer items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 font-semibold text-quaternary outline-none transition-colors duration-100 data-hovered:text-secondary data-focus-visible:shadow-focus-ring", size === "md" ? "h-11 text-md" : "h-9 text-sm", TAB[type]), children: [item.label, item.count != null ? (_jsx("span", { className: "rounded-full bg-utility-neutral-50 px-2 text-xs font-medium text-utility-neutral-700 inset-ring inset-ring-utility-neutral-200 group-data-selected:bg-utility-brand-50 group-data-selected:text-utility-brand-700 group-data-selected:inset-ring-utility-brand-200", children: item.count })) : null] }, item.id))) }), children
+                ? items.map((item) => (_jsx(TabPanel, { id: item.id, className: "mt-4 rounded-md outline-none data-focus-visible:shadow-focus-ring", children: children(item.id) }, item.id)))
+                : null] }));
+}

package/dist/components/Tag.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export type TagSize = "sm" | "md" | "lg";
+export interface TagProps {
+    /** Alto: `sm` 24 · `md` 24 con texto de 14 · `lg` 28. */
+    size?: TagSize;
+    /** Contador tras el texto. */
+    count?: number;
+    /** Punto verde antes del texto. */
+    dot?: boolean;
+    /** Muestra una X para quitarlo. */
+    onRemove?: () => void;
+    /** Nombre accesible de la X. Por defecto, "Quitar" seguido del texto. */
+    removeLabel?: string;
+    children: ReactNode;
+    className?: string;
+}
+/** Chip neutro que pone o quita el usuario: filtros aplicados, etiquetas, selecciones. */
+export declare function Tag({ size, count, dot, onRemove, removeLabel, children, className }: TagProps): import("react").JSX.Element;

package/dist/components/Tag.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Icon } from "./Icon.js";
+const SIZE = {
+    sm: "px-2 py-[3px] text-xs",
+    md: "px-[9px] py-0.5 text-sm",
+    lg: "px-2.5 py-1 text-sm",
+};
+/** Chip neutro que pone o quita el usuario: filtros aplicados, etiquetas, selecciones. */
+export function Tag({ size = "sm", count, dot, onRemove, removeLabel, children, className }) {
+    const label = removeLabel ??
+        (typeof children === "string" ? `${defaultStrings.remove} ${children}` : defaultStrings.remove);
+    return (_jsxs("span", { className: cx("inline-flex items-center gap-[3px] whitespace-nowrap rounded-md bg-primary font-body font-medium text-secondary inset-ring inset-ring-primary", SIZE[size], className), children: [dot ? (_jsx("span", { "aria-hidden": "true", className: "m-px size-1.5 shrink-0 rounded-full bg-fg-success-secondary" })) : null, children, count != null ? (_jsx("span", { className: "rounded-[3px] bg-tertiary px-[5px] text-xs text-secondary", children: count })) : null, onRemove ? (_jsx("button", { type: "button", onClick: onRemove, "aria-label": label, className: "inline-flex cursor-pointer rounded-[3px] bg-transparent p-0.5 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", children: _jsx(Icon, { name: "x-close", size: size === "sm" ? 12 : 14 }) })) : null] }));
+}

package/dist/components/TextEditor.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+export interface TextEditorLabels {
+    toolbar: string;
+    bold: string;
+    italic: string;
+    underline: string;
+    list: string;
+    link: string;
+    linkPrompt: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    charactersLeft: (n: number) => string;
+}
+export interface TextEditorProps {
+    /** Etiqueta visible encima de la barra. */
+    label?: ReactNode;
+    /** HTML inicial. */
+    defaultValue?: string;
+    /** Recibe el HTML en cada cambio. Límpialo antes de guardarlo. */
+    onChange?: (html: string) => void;
+    /** @default "Escribe aquí…" */
+    placeholder?: string;
+    /** Muestra los caracteres que quedan en lugar de `hint`. No corta el texto. */
+    maxLength?: number;
+    /** Pista bajo el área, si no hay `maxLength`. */
+    hint?: ReactNode;
+    /** Alto mínimo del área en px. @default 160 */
+    minHeight?: number;
+    disabled?: boolean;
+    /** Textos sustituibles. */
+    labels?: Partial<TextEditorLabels>;
+    id?: string;
+    className?: string;
+}
+/** Editor de texto enriquecido sencillo sobre el modo de edición nativo del navegador. */
+export declare function TextEditor({ label, defaultValue, onChange, placeholder, maxLength, hint, minHeight, disabled, labels, id: givenId, className, }: TextEditorProps): import("react").JSX.Element;

package/dist/components/TextEditor.js

@@ -0,0 +1,103 @@
+"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";
+const DEFAULT_LABELS = {
+    toolbar: defaultStrings.formatting,
+    bold: defaultStrings.bold,
+    italic: defaultStrings.italic,
+    underline: defaultStrings.underline,
+    list: defaultStrings.list,
+    link: defaultStrings.link,
+    linkPrompt: defaultStrings.linkPrompt,
+    alignLeft: defaultStrings.alignLeft,
+    alignCenter: defaultStrings.alignCenter,
+    alignRight: defaultStrings.alignRight,
+    charactersLeft: defaultStrings.charactersLeft,
+};
+const COMMANDS = [
+    "bold",
+    "italic",
+    "underline",
+    "insertUnorderedList",
+    "justifyLeft",
+    "justifyCenter",
+    "justifyRight",
+];
+const BUTTON = "inline-flex size-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-editor-icon-fg transition-colors duration-100 hover:bg-primary_hover hover:text-editor-icon-fg_active focus-visible:shadow-focus-ring focus-visible:outline-none disabled:cursor-not-allowed";
+/** Editor de texto enriquecido sencillo sobre el modo de edición nativo del navegador. */
+export function TextEditor({ label, defaultValue, onChange, placeholder = defaultStrings.writeHere, maxLength, hint, minHeight, disabled, labels, id: givenId, className, }) {
+    const t = { ...DEFAULT_LABELS, ...labels };
+    const autoId = useId();
+    const id = givenId ?? autoId;
+    const area = useRef(null);
+    // El HTML inicial se pinta una vez (también en servidor); después lo gestiona el navegador
+    const [initial] = useState(() => ({ __html: defaultValue ?? "" }));
+    const [active, setActive] = useState({});
+    const [count, setCount] = useState(() => textLength(defaultValue ?? ""));
+    const refresh = () => {
+        const next = {};
+        for (const c of COMMANDS) {
+            try {
+                next[c] = document.queryCommandState?.(c) ?? false;
+            }
+            catch {
+                next[c] = false;
+            }
+        }
+        setActive(next);
+        setCount(visibleLength(area.current));
+    };
+    const changed = () => {
+        refresh();
+        if (area.current)
+            onChange?.(area.current.innerHTML);
+    };
+    const run = (command, value) => {
+        area.current?.focus();
+        try {
+            document.execCommand?.(command, false, value);
+        }
+        catch {
+            // Sin modo de edición (entornos sin DOM completo): no hace nada
+        }
+        changed();
+    };
+    useEffect(() => {
+        setCount(visibleLength(area.current));
+    }, []);
+    const button = (command, icon, name) => {
+        const toggles = command !== "createLink";
+        return (_jsx("button", { type: "button", "aria-label": name, title: name, "aria-pressed": toggles ? !!active[command] : undefined, disabled: disabled, 
+            // Sin perder la selección del área al pulsar
+            onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                if (toggles)
+                    return run(command);
+                const url = window.prompt(t.linkPrompt);
+                if (url)
+                    run("createLink", url);
+            }, className: cx(BUTTON, toggles && active[command] && "bg-primary_hover text-editor-icon-fg_active"), children: _jsx(Icon, { name: icon, size: 20 }) }));
+    };
+    const separator = _jsx("span", { "aria-hidden": "true", className: "mx-1.5 h-5 w-px bg-[var(--border-secondary)]" });
+    const below = maxLength !== undefined ? t.charactersLeft(Math.max(0, maxLength - count)) : (hint ?? null);
+    return (_jsxs("div", { className: cx("flex min-w-0 flex-col gap-1.5 font-body", disabled && "opacity-50", className), children: [label ? (_jsx("span", { id: `${id}-label`, className: "text-sm font-medium text-secondary", children: label })) : null, _jsxs("div", { role: "toolbar", "aria-label": t.toolbar, className: "flex flex-wrap items-center gap-0.5", children: [button("bold", "bold-01", t.bold), button("italic", "italic-01", t.italic), button("underline", "underline-01", t.underline), separator, button("insertUnorderedList", "dotpoints-01", t.list), button("createLink", "link-01", t.link), separator, button("justifyLeft", "align-left", t.alignLeft), button("justifyCenter", "align-center", t.alignCenter), button("justifyRight", "align-right", t.alignRight)] }), _jsx("div", { id: id, ref: area, role: "textbox", tabIndex: disabled ? -1 : 0, "aria-multiline": "true", "aria-labelledby": label ? `${id}-label` : undefined, "aria-label": label ? undefined : placeholder, "aria-describedby": below !== null ? `${id}-hint` : undefined, "aria-disabled": disabled || undefined, contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, 
+                // biome-ignore lint/security/noDangerouslySetInnerHtml: el HTML inicial lo da quien usa el componente (la ficha pide limpiarlo antes de guardar)
+                dangerouslySetInnerHTML: initial, onInput: changed, onKeyUp: refresh, onMouseUp: refresh, style: minHeight ? { minHeight } : undefined, className: "min-h-40 rounded-xl bg-primary p-5 text-md text-primary shadow-[var(--shadow-xs),inset_0_0_0_1px_var(--border-primary)] outline-none [overflow-wrap:anywhere] focus:shadow-[var(--shadow-xs),inset_0_0_0_2px_var(--border-brand)] focus-visible:shadow-[var(--shadow-xs),inset_0_0_0_2px_var(--border-brand),var(--focus-ring-shadow)] empty:before:text-placeholder empty:before:content-[attr(data-placeholder)] [&_a]:text-brand-secondary [&_a]:underline [&_ol]:list-decimal [&_ol]:pl-10 [&_p]:mt-0 [&_p]:mb-2 [&_ul]:mt-0 [&_ul]:mb-2 [&_ul]:list-disc [&_ul]:pl-10" }), below !== null ? (_jsx("p", { id: `${id}-hint`, className: "m-0 text-sm text-tertiary", children: below })) : null] }));
+}
+/** Caracteres del área como los ve el usuario: innerText separa bloques con saltos de línea. */
+function visibleLength(el) {
+    if (!el)
+        return 0;
+    // biome-ignore lint/performance/useDomNodeTextContent: textContent no cuenta los saltos entre bloques, como hace la guía
+    return (el.innerText ?? el.textContent ?? "").trim().length;
+}
+/** Longitud del texto visible de un HTML, sin etiquetas ni espacios a los lados. */
+function textLength(html) {
+    return html
+        .replace(/<[^>]*>/g, "")
+        .replace(/&nbsp;/g, " ")
+        .replace(/&[a-z]+;|&#\d+;/gi, "x")
+        .trim().length;
+}

package/dist/components/Textarea.d.ts

@@ -0,0 +1,6 @@
+import { type TextareaHTMLAttributes } from "react";
+import { type FieldProps } from "../internal/field.js";
+export interface TextareaProps extends FieldProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+/** Campo de texto multilínea con la misma etiqueta, pista y estados que `Input`. */
+export declare function Textarea({ label, required, hint, error, id: givenId, className, disabled, rows, ...rest }: TextareaProps): import("react").JSX.Element;

package/dist/components/Textarea.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "../internal/cx.js";
+import { controlClasses, describedBy, FieldShell, nativeClasses, } from "../internal/field.js";
+/** Campo de texto multilínea con la misma etiqueta, pista y estados que `Input`. */
+export function Textarea({ label, required, hint, error, id: givenId, className, disabled, rows = 4, ...rest }) {
+    const autoId = useId();
+    const id = givenId ?? autoId;
+    return (_jsx(FieldShell, { id: id, label: label, required: required, hint: hint, error: error, className: className, children: _jsx("div", { className: cx(controlClasses(undefined, error, disabled), "px-3.5 py-3"), children: _jsx("textarea", { id: id, rows: rows, required: required, disabled: disabled, ...describedBy(id, { hint, error }), ...rest, className: cx(nativeClasses(), "min-h-[104px] resize-y") }) }) }));
+}

package/dist/components/Toggle.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { type ChoiceSize } from "../internal/choice.js";
+export interface ToggleProps {
+    /** Etiqueta junto al interruptor. */
+    label?: ReactNode;
+    /** Texto de apoyo bajo la etiqueta. */
+    hint?: ReactNode;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    /**
+     * Pista de 36×20 (`sm`) o 44×24 (`md`).
+     * @default "sm"
+     */
+    size?: ChoiceSize;
+    disabled?: boolean;
+    /** Nombre del campo al enviar el formulario. */
+    name?: string;
+    className?: string;
+}
+/** Interruptor (`role="switch"`) para ajustes que se aplican al momento, sin botón de guardar. */
+export declare function Toggle({ label, hint, checked, defaultChecked, onChange, size, disabled, name, className, }: ToggleProps): import("react").JSX.Element;

package/dist/components/Toggle.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch } from "react-aria-components";
+import { ChoiceText, choiceLabel } from "../internal/choice.js";
+import { cx } from "../internal/cx.js";
+/** Interruptor (`role="switch"`) para ajustes que se aplican al momento, sin botón de guardar. */
+export function Toggle({ label, hint, checked, defaultChecked, onChange, size = "sm", disabled, name, className, }) {
+    const md = size === "md";
+    return (_jsxs(Switch, { isSelected: checked, defaultSelected: defaultChecked, onChange: onChange, isDisabled: disabled, name: name, className: cx(choiceLabel(size), className), children: [_jsx("span", { "aria-hidden": "true", className: cx("relative flex-none rounded-full bg-tertiary p-0.5 transition-colors duration-150 group-data-selected:bg-brand-solid group-data-selected:group-data-hovered:bg-brand-solid_hover group-data-focus-visible:shadow-focus-ring group-data-disabled:opacity-50", md ? "h-6 w-11" : "h-5 w-9"), children: _jsx("span", { className: cx("block rounded-full bg-fg-white shadow-sm transition-transform duration-150 motion-reduce:transition-none", md
+                        ? "size-5 group-data-selected:translate-x-5"
+                        : "size-4 group-data-selected:translate-x-4") }) }), _jsx(ChoiceText, { label: label, hint: hint, size: size, className: "group-data-disabled:opacity-50" })] }));
+}

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+export interface TooltipProps {
+    title: ReactNode;
+    /** Segunda línea, en `tooltip-supporting-text`. */
+    text?: ReactNode;
+    /** Fuerza el tooltip visible (vistas previas y capturas). */
+    open?: boolean;
+    /** El elemento que lo dispara: tiene que poder recibir el foco y pasar `ref` y props al DOM, como `Button`. */
+    children: ReactNode;
+}
+/**
+ * Burbuja oscura que explica un control al pasar el ratón o al enfocarlo; Escape la cierra.
+ * Nada imprescindible dentro: en móvil no hay hover.
+ */
+export declare function Tooltip({ title, text, open, children }: TooltipProps): import("react").JSX.Element;

package/dist/components/Tooltip.js

@@ -0,0 +1,27 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useId, } from "react";
+import { Tooltip as AriaTooltip, Focusable, OverlayArrow, TooltipTrigger } from "react-aria-components";
+import { cx } from "../internal/cx.js";
+const BUBBLE = "z-20 w-max max-w-[320px] rounded-lg bg-primary-solid font-body text-xs font-semibold text-white shadow-lg";
+const SUB = "mt-1 block font-medium text-tooltip-supporting-text";
+// Flecha de 12×6 centrada abajo, del color de la burbuja
+const ARROW = "after:absolute after:top-full after:left-1/2 after:-ml-1.5 after:border-[6px] after:border-b-0 after:border-transparent after:border-t-[var(--bg-primary-solid)]";
+/**
+ * Burbuja oscura que explica un control al pasar el ratón o al enfocarlo; Escape la cierra.
+ * Nada imprescindible dentro: en móvil no hay hover.
+ */
+export function Tooltip({ title, text, open, children }) {
+    const id = useId();
+    const padding = text ? "p-3" : "px-3 py-2";
+    const content = (_jsxs(_Fragment, { children: [title, text ? _jsx("span", { className: SUB, children: text }) : null] }));
+    if (open) {
+        // Forzado (vista previa): en línea sobre el disparador, como en la guía, sin capa flotante
+        return (_jsxs("span", { className: "relative inline-flex", children: [isValidElement(children)
+                    ? cloneElement(children, {
+                        "aria-describedby": id,
+                    })
+                    : children, _jsx("span", { id: id, role: "tooltip", className: cx(BUBBLE, ARROW, padding, "pointer-events-none absolute bottom-[calc(100%+10px)] left-1/2 -translate-x-1/2"), children: content })] }));
+    }
+    return (_jsxs(TooltipTrigger, { delay: 300, closeDelay: 0, children: [_jsx(Focusable, { children: children }), _jsxs(AriaTooltip, { placement: "top", offset: 10, className: cx(BUBBLE, padding), children: [_jsx(OverlayArrow, { className: "group", children: _jsx("svg", { width: 12, height: 6, viewBox: "0 0 12 6", "aria-hidden": "true", className: "block fill-[var(--bg-primary-solid)] group-data-[placement=bottom]:rotate-180", children: _jsx("path", { d: "M0 0 L6 6 L12 0 Z" }) }) }), content] })] }));
+}

package/dist/components/TreeView.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+import { type IconName } from "./Icon.js";
+export interface TreeItem {
+    id: string;
+    label: ReactNode;
+    /** Icono de 16px. Por defecto, `folder` si tiene hijos y `file-04` si no. */
+    icon?: IconName;
+    /** Dato a la derecha, como el tamaño del archivo. */
+    meta?: ReactNode;
+    children?: TreeItem[];
+    /** Texto para la búsqueda por teclado si `label` no es texto. */
+    textValue?: string;
+}
+export interface TreeViewProps {
+    /** Más de cuatro niveles es mala señal. */
+    items: TreeItem[];
+    /** Ids de las carpetas abiertas al principio. */
+    defaultOpen?: string[];
+    /** Elemento seleccionado al principio (no controlado). */
+    defaultSelected?: string;
+    /** Elemento seleccionado (controlado). */
+    selected?: string;
+    /** Al elegir un elemento con clic, Enter o espacio. */
+    onSelect?: (item: TreeItem) => void;
+    /** Nombre del árbol para lectores de pantalla. */
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * Árbol de carpetas y archivos desplegable, con guías de nivel.
+ * Clic, Enter o espacio eligen el elemento y abren o cierran la carpeta; las flechas mueven el foco sin elegir (→ ← abren y cierran).
+ */
+export declare function TreeView({ items, defaultOpen, defaultSelected, selected, onSelect, className, ...rest }: TreeViewProps): import("react").JSX.Element;

package/dist/components/TreeView.js

@@ -0,0 +1,48 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { TreeItem as AriaTreeItem, Tree, TreeItemContent } from "react-aria-components";
+import { cx } from "../internal/cx.js";
+import { useControllable } from "../internal/use-controllable.js";
+import { Icon } from "./Icon.js";
+function find(items, id) {
+    for (const it of items) {
+        if (it.id === id)
+            return it;
+        const inner = it.children && find(it.children, id);
+        if (inner)
+            return inner;
+    }
+    return undefined;
+}
+/**
+ * Árbol de carpetas y archivos desplegable, con guías de nivel.
+ * Clic, Enter o espacio eligen el elemento y abren o cierran la carpeta; las flechas mueven el foco sin elegir (→ ← abren y cierran).
+ */
+export function TreeView({ items, defaultOpen = [], defaultSelected, selected, onSelect, className, ...rest }) {
+    const [current, setCurrent] = useControllable(selected, defaultSelected);
+    const [expanded, setExpanded] = useState(() => new Set(defaultOpen));
+    const choose = (id, toggle) => {
+        const item = find(items, id);
+        if (!item)
+            return;
+        if (toggle && item.children?.length) {
+            const next = new Set(expanded);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            setExpanded(next);
+        }
+        setCurrent(item.id);
+        onSelect?.(item);
+    };
+    const render = (list) => list.map((item) => {
+        const kids = !!item.children?.length;
+        return (_jsxs(AriaTreeItem, { id: item.id, textValue: item.textValue ?? (typeof item.label === "string" ? item.label : item.id), onPress: () => choose(item.id, true), style: ({ level }) => ({ paddingLeft: 8 + (level - 1) * 24 }), className: "group relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2 text-sm font-semibold text-tertiary outline-none data-focus-visible:shadow-focus-ring data-hovered:bg-primary_hover data-hovered:text-secondary data-selected:bg-secondary_hover data-selected:text-secondary [&_svg]:text-fg-quaternary data-selected:[&_svg]:text-fg-tertiary", children: [_jsx(TreeItemContent, { children: ({ level, isExpanded }) => (_jsxs(_Fragment, { children: [level > 1 ? (_jsx("span", { "aria-hidden": "true", children: Array.from({ length: level - 1 }, (_, k) => (_jsx("i", { className: "absolute -top-0.5 -bottom-0.5 w-px bg-[var(--border-secondary)]", style: { left: 19 + k * 24 } }, k))) })) : null, _jsx("span", { className: "inline-flex w-4 flex-none", children: kids ? (_jsx(Icon, { name: isExpanded ? "chevron-down" : "chevron-right", size: 16 })) : null }), _jsx(Icon, { name: item.icon ?? (kids ? "folder" : "file-04"), size: 16 }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }), item.meta != null ? (_jsx("span", { className: "text-xs font-medium text-quaternary", children: item.meta })) : null] })) }), kids ? render(item.children) : null] }, item.id));
+    });
+    // Un solo elemento raíz: React Aria deja junto al árbol una plantilla y marcadores ocultos
+    return (_jsx("div", { className: cx("max-w-[280px]", className), children: _jsx(Tree, { "aria-label": rest["aria-label"], selectionMode: "single", selectionBehavior: "toggle", disallowEmptySelection: true, selectedKeys: current ? [current] : [], 
+            // La selección la llevan los clics y Enter o espacio (onPress de cada fila); React Aria solo la pinta
+            onSelectionChange: () => { }, expandedKeys: expanded, onExpandedChange: setExpanded, className: "flex flex-col gap-0.5 font-body outline-none", children: render(items) }) }));
+}

package/dist/components/VideoPlayer.d.ts

@@ -0,0 +1,25 @@
+import { type CSSProperties } from "react";
+export interface VideoPlayerLabels {
+    play: string;
+    pause: string;
+    seek: string;
+    mute: string;
+    unmute: string;
+    fullscreen: string;
+    /** Texto de la posición para lectores de pantalla: "1:05 de 4:12". */
+    position: (current: string, total: string) => string;
+}
+export interface VideoPlayerProps {
+    /** Fichero de vídeo. Sin él, el reproductor es una maqueta (con `poster` y `duration`). */
+    src?: string;
+    /** Imagen antes de reproducir. */
+    poster?: string;
+    /** Duración en segundos cuando no hay `src`. */
+    duration?: number;
+    /** Textos de los controles (ampliación sobre la guía). */
+    labels?: Partial<VideoPlayerLabels>;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Reproductor de vídeo 16:9 con botón central, barra de controles, tiempo, volumen y pantalla completa. */
+export declare function VideoPlayer({ src, poster, duration, labels, className, style }: VideoPlayerProps): import("react").JSX.Element;