@jotis-me/react 0.0.0-stage → 0.1.0

package/dist/components/Banner.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Button } from "./Button.js";
+import { CloseButton } from "./CloseButton.js";
+import { FeaturedIcon } from "./FeaturedIcon.js";
+import { Input } from "./Input.js";
+const pad2 = (n) => String(n).padStart(2, "0");
+const UNITS = ["días", "horas", "min", "seg"];
+function Countdown({ to, now, brand }) {
+    const [tick, setTick] = useState(() => Date.now());
+    useEffect(() => {
+        if (now)
+            return;
+        const t = setInterval(() => setTick(Date.now()), 1000);
+        return () => clearInterval(t);
+    }, [now]);
+    const s = Math.max(0, Math.floor((to.getTime() - (now ? now.getTime() : tick)) / 1000));
+    const parts = [
+        Math.floor(s / 86400),
+        Math.floor((s % 86400) / 3600),
+        Math.floor((s % 3600) / 60),
+        s % 60,
+    ];
+    return (_jsx("div", { role: "timer", "aria-label": parts.map((n, i) => `${n} ${UNITS[i]}`).join(", "), className: "flex shrink-0 gap-2", children: parts.map((n, i) => (_jsxs("div", { "aria-hidden": "true", className: cx("flex min-w-12 flex-col items-center rounded-lg px-1.5 py-1", brand
+                ? "bg-fg-white/10 shadow-[inset_0_0_0_1px_var(--border-brand_alt)]"
+                : "bg-primary shadow-[inset_0_0_0_1px_var(--border-secondary)]"), children: [_jsx("span", { className: cx("text-lg font-semibold tabular-nums", brand ? "text-primary_on-brand" : "text-primary"), children: pad2(n) }), _jsx("span", { className: cx("text-[11px] leading-4 font-medium", 
+                    // En brand, blanco y no tertiary_on-brand: sobre la celda este daba 4,4:1 (decisión del usuario)
+                    brand ? "text-primary_on-brand" : "text-tertiary"), children: UNITS[i] })] }, UNITS[i]))) }));
+}
+/**
+ * Aviso de ancho de página o flotante para anunciar algo a toda la app: novedades, mantenimiento, captación de
+ * correo, cuenta atrás. Uno a la vez. En móvil se apila y oculta el icono.
+ */
+export function Banner({ title, description, icon, actions, email, countdown, now, theme = "default", layout = "floating", slim, onClose, closeLabel, className, ...rest }) {
+    const brand = theme === "brand";
+    const [value, setValue] = useState("");
+    const mail = email
+        ? { placeholder: defaultStrings.yourEmail, buttonLabel: defaultStrings.subscribe, ...email }
+        : null;
+    return (_jsx("section", { "aria-label": rest["aria-label"] ?? (typeof title === "string" ? title : defaultStrings.notice), className: cx("font-body", brand ? "bg-brand-section_subtle" : "bg-secondary", layout === "floating"
+            ? cx("rounded-xl", brand
+                ? "shadow-[inset_0_0_0_1px_var(--border-brand_alt),var(--shadow-lg)]"
+                : "shadow-[inset_0_0_0_1px_var(--border-secondary_alt),var(--shadow-lg)]")
+            : brand
+                ? "shadow-[inset_0_-1px_0_var(--border-brand_alt)]"
+                : "shadow-[inset_0_-1px_0_var(--border-secondary_alt)]", className), children: _jsxs("div", { className: cx("relative flex items-center gap-4 max-[720px]:flex-wrap", 
+            // En móvil el banner se apila (el estrecho conserva su relleno y su X centrada, como en la guía)
+            !slim && "max-[720px]:p-4", layout === "full"
+                ? "mx-auto max-w-[var(--container-max-width-desktop)] px-8 py-3"
+                : "p-3", slim && "justify-center px-4 py-3"), children: [icon && !slim ? (_jsx(FeaturedIcon, { icon: icon, variant: brand ? "light" : "modern", size: "lg", color: brand ? "brand" : "gray", className: "max-[720px]:hidden" })) : null, _jsxs("div", { className: cx("flex min-w-0 flex-wrap gap-x-1.5 text-sm max-[720px]:basis-[calc(100%-48px)]", slim ? "flex-initial" : "flex-1"), children: [_jsx("span", { className: cx("font-semibold", brand ? "text-primary_on-brand" : "text-secondary"), children: title }), description ? (_jsx("span", { className: brand ? "text-tertiary_on-brand" : "text-tertiary", children: description })) : null] }), countdown ? _jsx(Countdown, { to: countdown, now: now, brand: brand }) : null, mail ? (_jsxs("form", { className: "flex w-[360px] max-w-full shrink-0 flex-wrap gap-3 max-[720px]:w-full", onSubmit: (e) => {
+                        e.preventDefault();
+                        mail.onSubmit?.(value);
+                    }, children: [_jsx(Input, { type: "email", required: true, size: "sm", placeholder: mail.placeholder, "aria-label": mail.placeholder, value: value, onChange: (e) => setValue(e.target.value), className: "min-w-0 flex-1" }), _jsx(Button, { type: "submit", size: "sm", hierarchy: brand ? "secondary" : "primary", children: mail.buttonLabel }), mail.hint ? (_jsx("p", { className: cx("m-0 w-full text-xs", brand ? "text-tertiary_on-brand" : "text-tertiary"), children: mail.hint })) : null] })) : null, actions ? _jsx("div", { className: "flex shrink-0 gap-3 max-[720px]:w-full", children: actions }) : null, onClose ? (_jsx(CloseButton, { label: closeLabel ?? defaultStrings.closeNotice, onClick: onClose, className: cx("shrink-0", slim
+                        ? "absolute top-1/2 right-2 -translate-y-1/2"
+                        : "max-[720px]:absolute max-[720px]:top-2 max-[720px]:right-2", brand &&
+                        "text-tertiary_on-brand hover:bg-fg-white/10 hover:text-primary_on-brand") })) : null] }) }));
+}

package/dist/components/BarChart.d.ts

@@ -0,0 +1,25 @@
+import { type ChartSeries } from "../internal/chart.js";
+export interface BarChartProps {
+    /** Etiquetas del eje horizontal, una por barra. */
+    labels: string[];
+    /** Sin `color`, la paleta de series en orden (como `LineChart`). */
+    series: ChartSeries[];
+    /**
+     * Barras apiladas; `false` para agrupadas.
+     * @default true
+     */
+    stacked?: boolean;
+    /** Formato de los valores en el eje y en el título de cada barra. */
+    format?: (v: number) => string;
+    /** Leyenda encima. Por defecto, sí con dos series o más. */
+    legend?: boolean;
+    /** Proporción del dibujo (se escala al ancho del contenedor). @default 640 */
+    width?: number;
+    /** @default 240 */
+    height?: number;
+    /** Qué cuenta la gráfica, para lectores de pantalla. @default "Gráfica de barras" */
+    "aria-label"?: string;
+    className?: string;
+}
+/** Gráfica de barras, apiladas por defecto, para comparar cantidades por periodo o categoría. */
+export declare function BarChart({ labels, series, stacked, format, legend, width, height, className, ...rest }: BarChartProps): import("react").JSX.Element;

package/dist/components/BarChart.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Axes, nice, PAD, pointTitle, seriesColor } from "../internal/chart.js";
+import { cx } from "../internal/cx.js";
+import { ChartLegend } from "./ChartLegend.js";
+/** Gráfica de barras, apiladas por defecto, para comparar cantidades por periodo o categoría. */
+export function BarChart({ labels, series, stacked = true, format, legend, width = 640, height = 240, className, ...rest }) {
+    const plot = { w: width, h: height, pad: PAD };
+    const totals = labels.map((_, i) => stacked
+        ? series.reduce((a, s) => a + (s.data[i] ?? 0), 0)
+        : Math.max(0, ...series.map((s) => s.data[i] ?? 0)));
+    const top = nice(Math.max(0, ...totals));
+    const iw = width - PAD.l - PAD.r;
+    const ih = height - PAD.t - PAD.b;
+    const slot = iw / labels.length;
+    const bw = Math.min(32, slot * 0.6);
+    return (_jsxs("figure", { className: cx("m-0 flex flex-col gap-4 font-body", className), children: [(legend ?? series.length > 1) ? _jsx(ChartLegend, { series: series }) : null, _jsxs("svg", { viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": rest["aria-label"] ?? "Gráfica de barras", className: "h-auto w-full overflow-visible", children: [_jsx(Axes, { plot: plot, top: top, labels: labels, format: format }), labels.map((label, i) => {
+                        let acc = 0;
+                        const x0 = PAD.l + slot * i + (slot - bw) / 2;
+                        return (_jsx("g", { children: series.map((s, si) => {
+                                const v = s.data[i] ?? 0;
+                                const bh = (ih * v) / top;
+                                const x = stacked ? x0 : x0 + si * (bw / series.length);
+                                const w = stacked ? bw : bw / series.length - 2;
+                                const y = PAD.t + ih - (stacked ? acc + bh : bh);
+                                if (stacked)
+                                    acc += bh;
+                                return (_jsx("rect", { x: x, y: y, width: w, height: Math.max(bh, 0), rx: stacked && si < series.length - 1 ? 0 : 4, fill: seriesColor(si, s.color), children: _jsx("title", { children: pointTitle(s.name, label, format ? format(v) : v) }) }, si));
+                            }) }, i));
+                    })] })] }));
+}

package/dist/components/Breadcrumbs.d.ts

@@ -0,0 +1,19 @@
+import { type IconName } from "./Icon.js";
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    /** Icono en lugar del texto (el texto queda para lectores de pantalla). Pensado para el primero, `home-line`. */
+    icon?: IconName;
+}
+export interface BreadcrumbsProps {
+    /** Ruta desde el inicio. El último es la página actual: se pinta en `text-brand-secondary` y sin enlace. */
+    items: BreadcrumbItem[];
+    /**
+     * Nombre de la navegación para lectores de pantalla.
+     * @default "Migas de pan"
+     */
+    "aria-label"?: string;
+    className?: string;
+}
+/** Ruta de navegación encima del título de página. */
+export declare function Breadcrumbs({ items, className, ...rest }: BreadcrumbsProps): import("react").JSX.Element;

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Icon } from "./Icon.js";
+const CRUMB = "inline-flex items-center rounded-md px-2 py-1";
+/** Ruta de navegación encima del título de página. */
+export function Breadcrumbs({ items, className, ...rest }) {
+    return (_jsx("nav", { "aria-label": rest["aria-label"] ?? defaultStrings.breadcrumbs, className: className, children: _jsx("ol", { className: "m-0 flex list-none items-center gap-2 p-0 font-body text-sm font-semibold text-quaternary [&_svg]:text-fg-quaternary", children: items.map((item, i) => {
+                const last = i === items.length - 1;
+                const content = item.icon && !last ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: item.icon, size: 20 }), _jsx("span", { className: "sr-only", children: item.label })] })) : (item.label);
+                return (_jsxs(Fragment, { children: [i > 0 ? (_jsx("li", { "aria-hidden": "true", className: "flex", children: _jsx(Icon, { name: "chevron-right", size: 16 }) })) : null, _jsx("li", { className: "flex", children: last ? (_jsx("span", { "aria-current": "page", className: cx(CRUMB, "text-brand-secondary"), children: item.label })) : item.href ? (_jsx("a", { href: item.href, className: cx(CRUMB, "text-inherit no-underline transition-colors duration-100 hover:bg-primary_hover hover:text-tertiary_hover focus-visible:shadow-focus-ring focus-visible:outline-none"), children: content })) : (_jsx("span", { className: CRUMB, children: content })) })] }, i));
+            }) }) }));
+}

package/dist/components/BrowserFrame.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, ReactNode } from "react";
+export interface BrowserFrameProps {
+    /**
+     * `safari` semáforo, navegación, dirección y acciones · `minimal` semáforo gris y dirección.
+     * @default "safari"
+     */
+    variant?: "safari" | "minimal";
+    /** Dirección que se muestra en la barra. @default "jotis.me" */
+    url?: string;
+    /** Alto del área de contenido. */
+    height?: number | string;
+    /** La pantalla: componentes reales, no capturas, para que cambien con el tema. */
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Marco de navegador para enseñar una pantalla de la app dentro de una página. Decorativo salvo su contenido. */
+export declare function BrowserFrame({ variant, url, height, children, className, style, }: BrowserFrameProps): import("react").JSX.Element;

package/dist/components/BrowserFrame.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { Icon } from "./Icon.js";
+/** Marco de navegador para enseñar una pantalla de la app dentro de una página. Decorativo salvo su contenido. */
+export function BrowserFrame({ variant = "safari", url = "jotis.me", height, children, className, style, }) {
+    const minimal = variant === "minimal";
+    const dot = cx("size-3 rounded-full", minimal ? "bg-[var(--border-primary)]" : "shadow-[inset_0_0_0_0.5px_rgba(0,0,0,0.12)]");
+    const address = (_jsxs("div", { className: cx("mx-auto flex min-w-0 flex-[0_1_516px] items-center justify-center gap-1.5 rounded-lg px-3 font-medium text-tertiary", minimal
+            ? "h-6 bg-primary text-xs shadow-[inset_0_0_0_1px_var(--border-secondary)]"
+            : "h-7 bg-secondary text-[13px] leading-[18px]"), children: [_jsx(Icon, { name: "lock-01", size: 12 }), _jsx("span", { className: "truncate", children: url })] }));
+    const nav = "flex shrink-0 items-center gap-3 max-[560px]:hidden";
+    return (_jsxs("div", { className: cx("overflow-hidden rounded-xl border border-secondary bg-primary font-body shadow-xl", className), style: style, children: [_jsxs("div", { className: cx("flex items-center gap-4 px-4 text-fg-quaternary shadow-[inset_0_-1px_0_var(--border-secondary)]", minimal ? "h-9 bg-secondary" : "h-11 bg-primary"), children: [_jsxs("div", { "aria-hidden": "true", className: "flex shrink-0 gap-2", children: [_jsx("span", { className: cx(dot, !minimal && "bg-[#ee6a5f]") }), _jsx("span", { className: cx(dot, !minimal && "bg-[#f5bd4f]") }), _jsx("span", { className: cx(dot, !minimal && "bg-[#61c454]") })] }), minimal ? (_jsxs(_Fragment, { children: [address, _jsx("span", { className: "w-[52px] shrink-0" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: nav, children: [_jsx(Icon, { name: "chevron-left", size: 18 }), _jsx(Icon, { name: "chevron-right", size: 18 })] }), address, _jsxs("div", { className: cx(nav, "ml-auto"), children: [_jsx(Icon, { name: "refresh-cw-01", size: 16 }), _jsx(Icon, { name: "plus", size: 18 }), _jsx(Icon, { name: "copy-01", size: 16 })] })] }))] }), _jsx("div", { className: "relative overflow-auto", style: height !== undefined ? { height } : undefined, children: children })] }));
+}

package/dist/components/Button.d.ts

@@ -0,0 +1,51 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type IconName } from "./Icon.js";
+export type ButtonHierarchy = "primary" | "secondary" | "tertiary" | "link-color" | "link-gray";
+export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface ButtonBase {
+    /**
+     * Jerarquía: una sola `primary` por vista o modal.
+     * @default "primary"
+     */
+    hierarchy?: ButtonHierarchy;
+    /**
+     * Alto: `xs` 32 · `sm` 36 · `md` 40 · `lg` 44 · `xl` 48.
+     * @default "md"
+     */
+    size?: ButtonSize;
+    /** Acción destructiva. Con `primary`, solo cuando borrar es la acción principal. */
+    destructive?: boolean;
+    /** Muestra un spinner, marca `aria-busy` y desactiva el botón. */
+    loading?: boolean;
+    className?: string;
+}
+interface WithText extends ButtonBase {
+    /** Icono antes del texto: nombre del set o un nodo. */
+    iconLeading?: IconName | ReactNode;
+    /** Icono después del texto: nombre del set o un nodo. */
+    iconTrailing?: IconName | ReactNode;
+    iconOnly?: undefined;
+    label?: string;
+    children?: ReactNode;
+}
+interface IconOnly extends ButtonBase {
+    /** Botón solo con icono. Exige `label` para lectores de pantalla. */
+    iconOnly: IconName;
+    /** Nombre accesible del botón solo con icono. */
+    label: string;
+    iconLeading?: undefined;
+    iconTrailing?: undefined;
+    children?: undefined;
+}
+type AsButton = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className"> & {
+    href?: undefined;
+};
+type AsLink = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "className"> & {
+    /** Con `href` se pinta como enlace `<a>` con el mismo aspecto. */
+    href: string;
+    disabled?: boolean;
+};
+export type ButtonProps = (WithText | IconOnly) & (AsButton | AsLink);
+/** La acción de la pantalla: cinco jerarquías y cinco tamaños. Acepta `ref` (al `<button>` o al `<a>`). */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export {};

package/dist/components/Button.js

@@ -0,0 +1,54 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { cx } from "../internal/cx.js";
+import { Icon, iconSlot } from "./Icon.js";
+const BASE = "relative inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg font-body text-sm font-semibold no-underline cursor-pointer transition-colors duration-100 ease-linear focus-visible:outline-none focus-visible:shadow-focus-ring disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+const SIZE = {
+    xs: "h-8 px-2.5 py-1.5",
+    sm: "h-9 px-3 py-2",
+    md: "h-10 px-3.5 py-2.5",
+    lg: "h-11 px-4 py-2.5 gap-1.5 text-md",
+    xl: "h-12 px-4.5 py-3 gap-1.5 text-md",
+};
+const ICON_ONLY = {
+    xs: "w-8 p-1.5",
+    sm: "w-9 p-2",
+    md: "w-10 p-2.5",
+    lg: "w-11 p-3",
+    xl: "w-12 p-3.5",
+};
+const SKEUO_BORDER = "shadow-[var(--shadow-xs-skeuomorphic),inset_0_0_0_1px_var(--border-primary)]";
+const SKEUO_ERROR_BORDER = "shadow-[var(--shadow-xs-skeuomorphic),inset_0_0_0_1px_var(--border-error_subtle)]";
+// Borde interior del primario: degradado blanco del 12 % a 0 (ficha de Button)
+const HIGHLIGHT = 
+// color-fijo: brillo interior del botón primario, blanco 12 % → 0 en ambos temas (ficha de Button)
+"before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:p-0.5 before:content-[''] before:bg-[linear-gradient(180deg,#ffffff1f,#ffffff00)] before:[mask:linear-gradient(black_0_0)_content-box_exclude,linear-gradient(black_0_0)]";
+const HIERARCHY = {
+    primary: `bg-brand-solid text-white shadow-xs-skeuomorphic not-disabled:hover:bg-brand-solid_hover ${HIGHLIGHT}`,
+    secondary: `bg-primary text-secondary ${SKEUO_BORDER} not-disabled:hover:bg-primary_hover not-disabled:hover:text-secondary_hover [&_svg]:text-fg-quaternary`,
+    tertiary: "bg-transparent text-tertiary not-disabled:hover:bg-primary_hover not-disabled:hover:text-tertiary_hover [&_svg]:text-fg-quaternary",
+    "link-color": "h-auto p-0 rounded-sm bg-transparent text-brand-secondary not-disabled:hover:text-brand-secondary_hover not-disabled:hover:underline underline-offset-3",
+    "link-gray": "h-auto p-0 rounded-sm bg-transparent text-tertiary not-disabled:hover:text-tertiary_hover not-disabled:hover:underline underline-offset-3",
+};
+const DESTRUCTIVE = {
+    primary: "bg-error-solid not-disabled:hover:bg-error-solid_hover",
+    secondary: `text-error-primary ${SKEUO_ERROR_BORDER} not-disabled:hover:bg-error-primary not-disabled:hover:text-error-primary_hover [&_svg]:text-fg-error-secondary`,
+    tertiary: "text-error-primary not-disabled:hover:bg-error-primary not-disabled:hover:text-error-primary_hover [&_svg]:text-fg-error-secondary",
+    "link-color": "text-error-primary",
+    "link-gray": "",
+};
+/** La acción de la pantalla: cinco jerarquías y cinco tamaños. Acepta `ref` (al `<button>` o al `<a>`). */
+export const Button = forwardRef(function Button({ hierarchy = "primary", size = "md", destructive, loading, iconLeading, iconTrailing, iconOnly, label, children, className, ...rest }, ref) {
+    const link = hierarchy.startsWith("link");
+    const iconSize = size === "xs" ? 16 : 20;
+    const classes = cx(BASE, !link && SIZE[size], iconOnly && !link && ICON_ONLY[size], HIERARCHY[hierarchy], destructive && DESTRUCTIVE[hierarchy], destructive && "focus-visible:shadow-focus-ring-error", className);
+    const spinner = _jsx(Icon, { name: "loading-02", size: iconSize, spin: true });
+    const content = iconOnly ? (_jsxs(_Fragment, { children: [loading ? spinner : _jsx(Icon, { name: iconOnly, size: iconSize }), _jsx("span", { className: "sr-only", children: label })] })) : (_jsxs(_Fragment, { children: [loading ? spinner : iconSlot(iconLeading, iconSize), _jsx("span", { className: link ? undefined : "px-0.5", children: children }), iconSlot(iconTrailing, iconSize)] }));
+    if ("href" in rest && rest.href !== undefined) {
+        const { disabled, ...anchor } = rest;
+        const inactive = disabled || loading;
+        return (_jsx("a", { ...anchor, ref: ref, className: classes, "aria-busy": loading || undefined, "aria-disabled": inactive || undefined, tabIndex: inactive ? -1 : anchor.tabIndex, href: inactive ? undefined : anchor.href, children: content }));
+    }
+    const button = rest;
+    return (_jsx("button", { type: "button", ...button, ref: ref, className: classes, "aria-busy": loading || undefined, disabled: button.disabled || loading || undefined, children: content }));
+});

package/dist/components/ButtonGroup.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { type IconName } from "./Icon.js";
+export interface ButtonGroupItem {
+    value: string;
+    label?: ReactNode;
+    icon?: IconName;
+}
+export interface ButtonGroupProps {
+    /** De 2 a 5 opciones cortas. */
+    items: ButtonGroupItem[];
+    /** Opción elegida (controlado). */
+    value?: string;
+    /** Opción elegida al principio (no controlado). */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Nombre del grupo para lectores de pantalla. */
+    "aria-label"?: string;
+    className?: string;
+}
+/** Botones secundarios unidos para elegir una opción entre pocas. El elegido lleva `aria-pressed`. */
+export declare function ButtonGroup({ items, value, defaultValue, onChange, className, ...rest }: ButtonGroupProps): import("react").JSX.Element;

package/dist/components/ButtonGroup.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { useControllable } from "../internal/use-controllable.js";
+import { iconSlot } from "./Icon.js";
+/** Botones secundarios unidos para elegir una opción entre pocas. El elegido lleva `aria-pressed`. */
+export function ButtonGroup({ items, value, defaultValue, onChange, className, ...rest }) {
+    const [current, setCurrent] = useControllable(value, defaultValue);
+    const select = (next) => {
+        setCurrent(next);
+        onChange?.(next);
+    };
+    return (_jsx("fieldset", { "aria-label": rest["aria-label"], className: cx("m-0 inline-flex min-w-0 overflow-hidden border-0 p-0 rounded-lg shadow-[var(--shadow-xs-skeuomorphic),inset_0_0_0_1px_var(--border-primary)]", className), children: items.map((item) => (_jsxs("button", { type: "button", "aria-pressed": current === item.value, onClick: () => select(item.value), className: "inline-flex h-10 cursor-pointer items-center gap-2 border-l border-primary bg-primary px-4 py-2.5 font-body text-sm font-semibold text-secondary transition-colors duration-100 first:border-l-0 hover:bg-primary_hover hover:text-secondary_hover focus-visible:relative focus-visible:z-10 focus-visible:shadow-focus-ring focus-visible:outline-none aria-pressed:bg-secondary_hover aria-pressed:text-secondary_hover [&_svg]:text-fg-quaternary", children: [iconSlot(item.icon, 20), item.label] }, item.value))) }));
+}

package/dist/components/CalendarView.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+import { type BadgeColor } from "./Badge.js";
+export interface CalendarEvent {
+    date: Date;
+    title: string;
+    /** Hora o importe a la derecha del título. */
+    time?: string;
+    /** Colores de `Badge`. @default "gray" */
+    color?: BadgeColor;
+}
+export interface CalendarViewProps {
+    events?: CalendarEvent[];
+    /** El día que se marca como hoy (por defecto, la fecha del sistema). */
+    today?: Date;
+    /** Mes que se ve al principio. Por defecto, el de `today`. */
+    month?: Date;
+    /**
+     * Eventos por día; el resto se resume como "N más…".
+     * @default 3
+     */
+    maxEvents?: number;
+    /** Al pulsar un día (con ratón, o con teclado sobre su número). */
+    onSelectDate?: (date: Date) => void;
+    subtitle?: ReactNode;
+    /** Acciones a la derecha de la cabecera, como "Nuevo evento". */
+    actions?: ReactNode;
+    className?: string;
+}
+/** Calendario mensual con eventos en cada día, cabecera con la fecha de hoy y navegación. Solo vista de mes. */
+export declare function CalendarView({ events, today: todayProp, month, maxEvents, onSelectDate, subtitle, actions, className, }: CalendarViewProps): import("react").JSX.Element;

package/dist/components/CalendarView.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cx } from "../internal/cx.js";
+import { formatMonth } from "../internal/format.js";
+import { defaultStrings } from "../internal/strings.js";
+import { COLOR } from "./Badge.js";
+import { Icon } from "./Icon.js";
+const day0 = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const same = (a, b) => a.getTime() === b.getTime();
+const NAV = "inline-flex h-10 cursor-pointer items-center gap-2 border-0 border-l border-primary bg-primary px-3 py-2.5 font-body text-sm font-semibold text-secondary first:border-l-0 hover:bg-primary_hover hover:text-secondary_hover focus-visible:relative focus-visible:z-10 focus-visible:shadow-focus-ring focus-visible:outline-none [&_svg]:text-fg-quaternary";
+const longDate = (d) => new Intl.DateTimeFormat("es-ES", { weekday: "long", day: "numeric", month: "long" }).format(d);
+/** Calendario mensual con eventos en cada día, cabecera con la fecha de hoy y navegación. Solo vista de mes. */
+export function CalendarView({ events = [], today: todayProp, month, maxEvents = 3, onSelectDate, subtitle, actions, className, }) {
+    const today = day0(todayProp ?? new Date());
+    const startMonth = month ?? today;
+    const [shown, setShown] = useState(() => new Date(startMonth.getFullYear(), startMonth.getMonth(), 1));
+    const y = shown.getFullYear();
+    const mo = shown.getMonth();
+    // La semana empieza en lunes
+    const lead = (new Date(y, mo, 1).getDay() + 6) % 7;
+    const weeks = Math.ceil((lead + new Date(y, mo + 1, 0).getDate()) / 7);
+    const cells = Array.from({ length: weeks * 7 }, (_, i) => new Date(y, mo, 1 - lead + i));
+    const shortMonth = new Intl.DateTimeFormat("es-ES", { month: "short" })
+        .format(today)
+        .replace(".", "")
+        .toUpperCase();
+    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: [_jsxs("div", { className: "flex flex-wrap items-center gap-4 px-6 py-5 shadow-[inset_0_-1px_0_var(--border-secondary)]", children: [_jsxs("div", { "aria-hidden": "true", className: "flex w-16 flex-col overflow-hidden rounded-lg text-center shadow-[inset_0_0_0_1px_var(--border-secondary)]", children: [_jsx("span", { className: "bg-secondary py-1 text-xs font-semibold text-quaternary", children: shortMonth }), _jsx("strong", { className: "pt-0.5 pb-1 text-lg font-bold text-brand-secondary", children: today.getDate() })] }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "m-0 text-lg font-semibold text-primary", "aria-live": "polite", children: formatMonth(shown) }), subtitle ? _jsx("p", { className: "m-0 text-sm text-tertiary", children: subtitle }) : null] }), _jsxs("div", { className: "inline-flex overflow-hidden rounded-lg shadow-[var(--shadow-xs-skeuomorphic),inset_0_0_0_1px_var(--border-primary)]", children: [_jsx("button", { type: "button", "aria-label": defaultStrings.previousMonth, className: NAV, onClick: () => setShown(new Date(y, mo - 1, 1)), children: _jsx(Icon, { name: "chevron-left", size: 20 }) }), _jsx("button", { type: "button", className: NAV, onClick: () => setShown(new Date(today.getFullYear(), today.getMonth(), 1)), children: defaultStrings.today }), _jsx("button", { type: "button", "aria-label": defaultStrings.nextMonth, className: NAV, onClick: () => setShown(new Date(y, mo + 1, 1)), children: _jsx(Icon, { name: "chevron-right", size: 20 }) })] }), actions ?? null] }), _jsxs("table", { className: "w-full table-fixed border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: defaultStrings.weekdaysMin.map((d) => (_jsx("th", { scope: "col", className: "bg-secondary p-2 text-center text-xs font-semibold text-tertiary shadow-[inset_0_-1px_0_var(--border-secondary)]", children: d }, d))) }) }), _jsx("tbody", { children: Array.from({ length: weeks }, (_, w) => (_jsx("tr", { children: cells.slice(w * 7, w * 7 + 7).map((c) => {
+                                const list = events.filter((e) => same(day0(e.date), c));
+                                const out = c.getMonth() !== mo;
+                                const isToday = same(c, today);
+                                const label = `${longDate(c)}${isToday ? `, ${defaultStrings.today.toLowerCase()}` : ""}`;
+                                const number = cx("inline-flex size-6 items-center justify-center rounded-full text-xs", isToday
+                                    ? "bg-brand-solid font-semibold text-white"
+                                    : out
+                                        ? "font-medium text-quaternary"
+                                        : "font-semibold text-secondary");
+                                return (_jsx("td", { onClick: onSelectDate ? () => onSelectDate(c) : undefined, className: cx("h-28 min-w-0 p-2 align-top shadow-[inset_-1px_-1px_0_var(--border-secondary)]", out ? "bg-secondary" : "bg-primary", onSelectDate && "cursor-pointer"), children: _jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [onSelectDate ? (_jsx("button", { type: "button", "aria-label": label, onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    onSelectDate(c);
+                                                }, className: cx(number, "cursor-pointer border-0 p-0 focus-visible:shadow-focus-ring focus-visible:outline-none", !isToday && "bg-transparent"), children: c.getDate() })) : (_jsxs("span", { className: number, children: [_jsx("span", { "aria-hidden": "true", children: c.getDate() }), _jsx("span", { className: "sr-only", children: label })] })), list.slice(0, maxEvents).map((e, k) => (_jsxs("div", { title: e.title, className: cx("flex min-w-0 justify-between gap-1 rounded-md px-2 py-1 text-xs font-semibold inset-ring", COLOR[e.color ?? "gray"].badge), children: [_jsx("span", { className: "truncate", children: e.title }), e.time ? (_jsx("span", { className: "flex-none font-normal", children: e.time })) : null] }, k))), list.length > maxEvents ? (_jsx("div", { className: "px-2 text-xs font-semibold text-quaternary", children: defaultStrings.showMore(list.length - maxEvents) })) : null] }) }, c.getTime()));
+                            }) }, w))) })] })] }));
+}

package/dist/components/CamFrame.d.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties, ReactNode } from "react";
+export type CamFrameRatio = "16:9" | "4:3" | "1:1";
+export interface CamFrameProps {
+    /** @default "16:9" */
+    ratio?: CamFrameRatio;
+    /** @default 480 */
+    width?: number | string;
+    /** Añade el punto verde y la palabra "En directo": nunca solo el color. */
+    live?: boolean;
+    name?: ReactNode;
+    /** Pronombres o cargo, junto al nombre. */
+    role?: ReactNode;
+    /** Solo para maquetar: en directo no se pasa nada y OBS pone la cámara debajo. */
+    children?: ReactNode;
+    /** Sustituye a "En directo" (ampliación sobre la guía). */
+    liveLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Marco de cámara con el interior vacío (transparente) y etiqueta de nombre y estado, siempre en oscuro. */
+export declare function CamFrame({ ratio, width, live, name, role, children, liveLabel, className, style, }: CamFrameProps): import("react").JSX.Element;

package/dist/components/CamFrame.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { STREAM_ROOT } from "../internal/stream.js";
+import { defaultStrings } from "../internal/strings.js";
+/** Marco de cámara con el interior vacío (transparente) y etiqueta de nombre y estado, siempre en oscuro. */
+export function CamFrame({ ratio = "16:9", width, live = false, name, role, children, liveLabel, className, style, }) {
+    const [w, h] = ratio.split(":");
+    return (_jsxs("div", { className: cx(STREAM_ROOT, 
+        // Sin fondo: taparía la cámara. El borde va encima del contenido, en un ::after.
+        "relative max-w-full overflow-hidden rounded-2xl after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border-2 after:border-primary", width == null && "w-[480px]", className), style: { aspectRatio: `${w} / ${h ?? w}`, ...(width == null ? null : { width }), ...style }, children: [children ?? null, name || live ? (_jsxs("div", { className: "absolute bottom-4 left-4 z-1 inline-flex max-w-[calc(100%-32px)] items-center gap-3 rounded-lg border border-secondary bg-primary_alt px-3 py-1.5 text-sm font-medium text-secondary", children: [live ? (_jsxs("span", { className: "inline-flex items-center gap-2 font-semibold text-primary", children: [_jsx("span", { "aria-hidden": "true", className: "inline-block size-2 flex-none rounded-full bg-fg-success-secondary" }), liveLabel ?? defaultStrings.streamLive] })) : null, name ? _jsx("span", { className: "truncate font-semibold text-primary", children: name }) : null, role ? _jsx("span", { className: "whitespace-nowrap text-tertiary", children: role }) : null] })) : null] }));
+}

package/dist/components/CardHeader.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+import { type AvatarProps } from "./Avatar.js";
+import { type BadgeColor } from "./Badge.js";
+export interface CardHeaderProps {
+    /** Título de la tarjeta (`<h3>`, `text-lg` semibold). */
+    title: ReactNode;
+    /** Insignia junto al título, como "12 activas". */
+    badge?: ReactNode;
+    /**
+     * Color de la insignia.
+     * @default "brand"
+     */
+    badgeColor?: BadgeColor;
+    /** Una frase en `text-tertiary` bajo el título. */
+    description?: ReactNode;
+    /** Botones a la derecha: la acción principal, la última. */
+    actions?: ReactNode;
+    /**
+     * Menú de la tarjeta: `true` pinta el botón de tres puntos (con `onMenu`); también admite un nodo, como un
+     * `Dropdown` con `trigger` (ampliación sobre la guía, como en `MetricCard`).
+     */
+    menu?: boolean | ReactNode;
+    /** Al pulsar el botón de tres puntos. */
+    onMenu?: () => void;
+    /** Nombre del botón de tres puntos. @default "Más opciones" */
+    menuLabel?: string;
+    /** Avatar de 48px a la izquierda, para fichas de persona (props de `Avatar`). */
+    avatar?: AvatarProps;
+    className?: string;
+}
+/** Cabecera de una tarjeta: título con insignia opcional, descripción, acciones y menú, con línea inferior. */
+export declare function CardHeader({ title, badge, badgeColor, description, actions, menu, onMenu, menuLabel, avatar, className, }: CardHeaderProps): import("react").JSX.Element;

package/dist/components/CardHeader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { cx } from "../internal/cx.js";
+import { Line } from "../internal/line.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Avatar } from "./Avatar.js";
+import { Badge } from "./Badge.js";
+import { Button } from "./Button.js";
+/** Cabecera de una tarjeta: título con insignia opcional, descripción, acciones y menú, con línea inferior. */
+export function CardHeader({ title, badge, badgeColor = "brand", description, actions, menu, onMenu, menuLabel, avatar, className, }) {
+    return (_jsxs("div", { className: cx("flex flex-col gap-5 bg-primary font-body", className), children: [_jsxs("div", { className: "flex items-start gap-4 px-6 pt-5", children: [avatar ? _jsx(Avatar, { size: "lg", ...avatar }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("h3", { className: "m-0 flex items-center gap-2 text-lg font-semibold text-primary", children: [title, badge != null ? (_jsx(Badge, { size: "sm", color: badgeColor, children: badge })) : null] }), description ? _jsx("p", { className: "m-0 text-sm text-tertiary", children: description }) : null] }), actions ? _jsx("div", { className: "flex flex-wrap items-center gap-3", children: actions }) : null, menu === true ? (_jsx(Button, { hierarchy: "tertiary", size: "sm", iconOnly: "dots-vertical", label: menuLabel ?? defaultStrings.moreOptions, onClick: onMenu })) : isValidElement(menu) ? (menu) : null] }), _jsx(Line, {})] }));
+}

package/dist/components/ChannelBanner.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export interface ChannelBannerSlot {
+    day: ReactNode;
+    time: ReactNode;
+}
+export interface ChannelBannerProps {
+    /** @default "Tu canal" */
+    name?: ReactNode;
+    tagline?: ReactNode;
+    /** @default "Directos en Twitch" */
+    eyebrow?: ReactNode;
+    /** Horario a la derecha, dentro de la zona segura; no más de cuatro filas. */
+    schedule?: ChannelBannerSlot[];
+    /** Nombre del horario para lectores de pantalla (ampliación sobre la guía). @default "Horario de directos" */
+    scheduleLabel?: string;
+    /** Mide `1200 × scale` (`scale={1}` para exportarlo tal cual). Sin él se ajusta al ancho del contenedor. */
+    scale?: number;
+    className?: string;
+}
+/**
+ * Banner de perfil de 1200×480, siempre en oscuro. Twitch lo recorta en móvil y tapa parte con el avatar: todo
+ * el contenido queda a 120px de cada lado (zona segura). Es de servidor: solo el lienzo, que mide, es de cliente.
+ */
+export declare function ChannelBanner({ name, tagline, eyebrow, schedule, scheduleLabel, scale, className, }: ChannelBannerProps): import("react").JSX.Element;

package/dist/components/ChannelBanner.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { keyText, stableKeys, streamGrid, TABULAR } from "../internal/stream.js";
+import { StreamStage } from "../internal/stream-stage.js";
+const GRID = streamGrid(80, "80% 90%");
+/**
+ * Banner de perfil de 1200×480, siempre en oscuro. Twitch lo recorta en móvil y tapa parte con el avatar: todo
+ * el contenido queda a 120px de cada lado (zona segura). Es de servidor: solo el lienzo, que mide, es de cliente.
+ */
+export function ChannelBanner({ name, tagline, eyebrow, schedule, scheduleLabel, scale, className, }) {
+    const keys = stableKeys(schedule ?? [], (r) => `${keyText(r.day)}|${keyText(r.time)}`);
+    return (_jsxs(StreamStage, { width: 1200, height: 480, scale: scale, className: className, children: [_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0", style: GRID }), _jsxs("div", { className: "absolute top-0 bottom-0 left-[120px] flex w-[560px] flex-col justify-center gap-3", children: [_jsx("span", { className: "text-xl leading-7 font-medium text-tertiary", children: eyebrow ?? "Directos en Twitch" }), _jsx("h2", { className: "m-0 font-display text-[96px] leading-[1.04] font-semibold tracking-[-0.02em] wrap-anywhere text-primary", children: name ?? "Tu canal" }), tagline ? _jsx("p", { className: "m-0 text-[28px] leading-10 text-tertiary", children: tagline }) : null] }), schedule?.length ? (_jsx("ul", { "aria-label": scheduleLabel ?? "Horario de directos", className: "absolute top-1/2 right-[120px] m-0 w-[300px] -translate-y-1/2 list-none overflow-hidden rounded-xl border-2 border-secondary bg-primary_alt p-0", children: schedule.map((r, i) => (_jsxs("li", { className: "flex justify-between gap-4 border-t border-secondary px-6 py-4 text-[24px] leading-8 text-tertiary first:border-t-0", children: [_jsx("span", { children: r.day }), _jsx("b", { className: cx(TABULAR, "font-semibold text-primary"), children: r.time })] }, keys[i]))) })) : null] }));
+}

package/dist/components/ChannelPanel.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from "react";
+import { type ButtonHierarchy } from "./Button.js";
+import { type IconName } from "./Icon.js";
+export interface ChannelPanelRow {
+    label: ReactNode;
+    value: ReactNode;
+}
+export interface ChannelPanelAction {
+    label: ReactNode;
+    href?: string;
+    /** Icono tras el texto. */
+    icon?: IconName | ReactNode;
+    /** @default "secondary" */
+    hierarchy?: ButtonHierarchy;
+    /** Sin `href`, lo que hace el botón (ampliación sobre la guía). */
+    onClick?: () => void;
+}
+export interface ChannelPanelProps {
+    /** En Bricolage Grotesque 24/32 semibold. */
+    title: ReactNode;
+    icon?: IconName;
+    /** Párrafos; no más de cuatro líneas cada uno. */
+    children?: ReactNode;
+    /** Filas de datos: horario, normas cortas o enlaces. */
+    rows?: ChannelPanelRow[];
+    /** Una sola acción, a todo el ancho. */
+    action?: ChannelPanelAction;
+    /**
+     * Twitch pide 320px de ancho (exporta a 640px, 2x).
+     * @default 320
+     */
+    width?: number | string;
+    className?: string;
+}
+/** Panel de 320px para la página del canal de Twitch, siempre en oscuro. */
+export declare function ChannelPanel({ title, icon, children, rows, action, width, className }: ChannelPanelProps): import("react").JSX.Element;

package/dist/components/ChannelPanel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "../internal/cx.js";
+import { keyText, STREAM_ROOT, stableKeys, TABULAR } from "../internal/stream.js";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+/** Panel de 320px para la página del canal de Twitch, siempre en oscuro. */
+export function ChannelPanel({ title, icon, children, rows, action, width, className }) {
+    const titleId = useId();
+    const keys = stableKeys(rows ?? [], (r) => `${keyText(r.label)}|${keyText(r.value)}`);
+    return (_jsxs("section", { "aria-labelledby": titleId, className: cx(STREAM_ROOT, "max-w-full rounded-xl border border-secondary bg-primary_alt p-6", width == null && "w-[320px]", className), style: width == null ? undefined : { width }, children: [_jsxs("header", { className: "flex items-center gap-3", children: [icon ? (_jsx("span", { className: "inline-flex size-9 flex-none items-center justify-center rounded-lg bg-tertiary text-fg-secondary", children: _jsx(Icon, { name: icon, size: 20 }) })) : null, _jsx("h3", { id: titleId, className: "m-0 font-display text-display-xs font-semibold text-primary", children: title })] }), children ? (_jsx("div", { className: "mt-3 text-md text-secondary [&_p]:mb-2 [&_p]:last:mb-0", children: children })) : null, rows?.length ? (_jsx("dl", { className: "mt-3 mb-0", children: rows.map((r, i) => (_jsxs("div", { className: "flex justify-between gap-4 border-t border-secondary py-3 text-md", children: [_jsx("dt", { className: "text-tertiary", children: r.label }), _jsx("dd", { className: cx(TABULAR, "m-0 text-right font-medium text-primary"), children: r.value })] }, keys[i]))) })) : null, action ? (_jsx("div", { className: "mt-4", children: action.href ? (_jsx(Button, { hierarchy: action.hierarchy ?? "secondary", size: "md", href: action.href, iconTrailing: action.icon, className: "w-full", children: action.label })) : (_jsx(Button, { hierarchy: action.hierarchy ?? "secondary", size: "md", iconTrailing: action.icon, onClick: action.onClick, className: "w-full", children: action.label })) })) : null] }));
+}

package/dist/components/ChartLegend.d.ts

@@ -0,0 +1,12 @@
+export interface ChartLegendProps {
+    /** Series en el orden de la gráfica: sin `color`, el de su posición en la paleta. */
+    series: {
+        name?: string;
+        color?: string;
+    }[];
+    /** En columna (como junto a `PieChart`) en lugar de en fila. */
+    vertical?: boolean;
+    className?: string;
+}
+/** Leyenda de series con un punto de color y el nombre. */
+export declare function ChartLegend({ series, vertical, className }: ChartLegendProps): import("react").JSX.Element;