@jotis-me/react 0.0.0-stage → 0.2.0

package/dist/components/Input.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { controlClasses, describedBy, FieldShell, nativeClasses, } from "../internal/field.js";
+import { Icon } from "./Icon.js";
+/** Campo de texto de una línea con etiqueta, pista y error, en tres alturas. */
+export function Input({ label, required, hint, error, size = "md", icon, trailing, id: givenId, className, disabled, ...rest }) {
+    const autoId = useId();
+    const id = givenId ?? autoId;
+    return (_jsx(FieldShell, { id: id, label: label, required: required, hint: hint, error: error, size: size, className: className, children: _jsxs("div", { className: controlClasses(size, error, disabled), children: [icon ? _jsx(Icon, { name: icon, size: 20 }) : null, _jsx("input", { id: id, required: required, disabled: disabled, ...describedBy(id, { hint, error }), ...rest, className: nativeClasses(size) }), error ? (_jsx("span", { className: "inline-flex text-fg-error-secondary", children: _jsx(Icon, { name: "alert-circle", size: 16 }) })) : trailing ? (_jsx("span", { className: "inline-flex", children: _jsx(Icon, { name: trailing, size: 16 }) })) : null] }) }));
+}

package/dist/components/LineChart.d.ts

@@ -0,0 +1,25 @@
+import { type ChartSeries } from "../internal/chart.js";
+export interface LineChartProps {
+    /** Etiquetas del eje horizontal, una por punto. */
+    labels: string[];
+    /** Hasta 4 series. Sin `color`, la paleta de series en orden. */
+    series: ChartSeries[];
+    /** Formato de los valores en el eje y en el título de cada punto, como `(v) => formatCurrency(v)`. */
+    format?: (v: number) => string;
+    /**
+     * Relleno suave bajo la primera serie.
+     * @default true
+     */
+    area?: boolean;
+    /** 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 líneas" */
+    "aria-label"?: string;
+    className?: string;
+}
+/** Gráfica de líneas para la evolución de una o varias series en el tiempo. La escala empieza en cero. */
+export declare function LineChart({ labels, series, format, area, legend, width, height, className, ...rest }: LineChartProps): import("react").JSX.Element;

package/dist/components/LineChart.js

@@ -0,0 +1,23 @@
+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 líneas para la evolución de una o varias series en el tiempo. La escala empieza en cero. */
+export function LineChart({ labels, series, format, area = true, legend, width = 640, height = 240, className, ...rest }) {
+    const plot = { w: width, h: height, pad: PAD };
+    const top = nice(Math.max(0, ...series.flatMap((s) => s.data)));
+    const iw = width - PAD.l - PAD.r;
+    const ih = height - PAD.t - PAD.b;
+    const n = labels.length;
+    const point = (v, i) => [PAD.l + iw * ((i + 0.5) / n), PAD.t + ih * (1 - v / top)];
+    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 líneas", className: "h-auto w-full overflow-visible", children: [_jsx(Axes, { plot: plot, top: top, labels: labels, format: format }), series.map((s, si) => {
+                        const pts = s.data.map(point);
+                        const c = seriesColor(si, s.color);
+                        const d = pts
+                            .map(([x, y], i) => `${i ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)}`)
+                            .join(" ");
+                        const first = pts[0];
+                        const last = pts[pts.length - 1];
+                        return (_jsxs("g", { children: [si === 0 && area && first && last ? (_jsx("path", { d: `${d} L${last[0]} ${PAD.t + ih} L${first[0]} ${PAD.t + ih} Z`, fill: c, opacity: 0.08 })) : null, _jsx("path", { d: d, fill: "none", stroke: c, strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round" }), pts.map(([x, y], i) => (_jsx("circle", { cx: x, cy: y, r: 3, fill: "var(--bg-primary)", stroke: c, strokeWidth: 2, children: _jsx("title", { children: pointTitle(s.name, labels[i] ?? "", format ? format(s.data[i] ?? 0) : (s.data[i] ?? 0)) }) }, i)))] }, si));
+                    })] })] }));
+}

package/dist/components/Message.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { type AvatarProps } from "./Avatar.js";
+export interface MessageProps {
+    /** Quien escribe. En los enviados, por defecto "Tú". */
+    author?: ReactNode;
+    /** Avatar del recibido (32px). Por defecto, las dos primeras letras del autor. */
+    avatar?: AvatarProps;
+    time?: ReactNode;
+    /** Enviado por el usuario: a la derecha, sin avatar, burbuja `bg-primary` con la esquina superior derecha recta. */
+    sent?: boolean;
+    /** Puntos de "escribiendo" en lugar del contenido. */
+    typing?: boolean;
+    /** Punto de en línea en el avatar. */
+    online?: boolean;
+    /** Bajo la burbuja: reacciones, adjuntos, "Visto". */
+    footer?: ReactNode;
+    /** Texto del mensaje. Respuestas cortas, en párrafos. */
+    children?: ReactNode;
+    className?: string;
+}
+/** Mensaje de una conversación, recibido (con avatar, a la izquierda) o enviado (a la derecha). Es el chat de Emptor. */
+export declare function Message({ author, avatar, time, sent, typing, online, footer, children, className, }: MessageProps): import("react").JSX.Element;

package/dist/components/Message.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Avatar } from "./Avatar.js";
+/** Mensaje de una conversación, recibido (con avatar, a la izquierda) o enviado (a la derecha). Es el chat de Emptor. */
+export function Message({ author, avatar, time, sent, typing, online, footer, children, className, }) {
+    return (_jsxs("div", { className: cx("flex max-w-[480px] gap-3 font-body", sent && "ml-auto justify-end", className), children: [sent ? null : (_jsx(Avatar, { size: "sm", status: online ? "online" : undefined, ...(avatar ?? { initials: typeof author === "string" ? author.slice(0, 2) : "?" }) })), _jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "text-sm font-medium text-secondary", children: sent ? (author ?? defaultStrings.you) : author }), time ? _jsx("span", { className: "text-xs text-tertiary", children: time }) : null] }), _jsx("div", { className: cx("px-3 py-2 text-md wrap-anywhere whitespace-pre-wrap text-primary shadow-[inset_0_0_0_1px_var(--border-secondary)]", sent
+                            ? "rounded-lg rounded-tr-none bg-primary"
+                            : "rounded-lg rounded-tl-none bg-secondary"), children: typing ? (_jsxs("span", { className: "inline-flex gap-1 py-2", children: [_jsx("span", { className: "sr-only", children: defaultStrings.typing }), [0, 1, 2].map((i) => (_jsx("i", { "aria-hidden": "true", className: cx("size-1.5 rounded-full bg-fg-quaternary motion-safe:animate-[pulse_1s_infinite]", i === 1 && "[animation-delay:.2s]", i === 2 && "[animation-delay:.4s]") }, i)))] })) : (children) }), footer ?? null] })] }));
+}

package/dist/components/MessageInput.d.ts

@@ -0,0 +1,17 @@
+export interface MessageInputProps {
+    /** También es el nombre accesible del campo si no pasas `aria-label`. */
+    placeholder?: string;
+    /** Recibe el texto sin espacios a los lados. Enter envía y Mayús+Enter salta de línea. */
+    onSend?: (text: string) => void;
+    /** Con esta prop aparece el botón de adjuntar. */
+    onAttach?: () => void;
+    /** @default "Enviar" */
+    sendLabel?: string;
+    /** Nombre accesible del botón de adjuntar. */
+    attachLabel?: string;
+    disabled?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+/** Caja para escribir y enviar un mensaje, con botón de adjuntar opcional. */
+export declare function MessageInput({ placeholder, onSend, onAttach, sendLabel, attachLabel, disabled, "aria-label": ariaLabel, className, }: MessageInputProps): import("react").JSX.Element;

package/dist/components/MessageInput.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Button } from "./Button.js";
+/** Caja para escribir y enviar un mensaje, con botón de adjuntar opcional. */
+export function MessageInput({ placeholder = defaultStrings.writeMessage, onSend, onAttach, sendLabel = defaultStrings.send, attachLabel = defaultStrings.attach, disabled, "aria-label": ariaLabel, className, }) {
+    const [text, setText] = useState("");
+    const empty = !text.trim();
+    const send = () => {
+        if (disabled || empty)
+            return;
+        onSend?.(text.trim());
+        setText("");
+    };
+    const onKeyDown = (e) => {
+        // Con un método de entrada (IME) a medias, Enter confirma la palabra, no envía
+        if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+            e.preventDefault();
+            send();
+        }
+    };
+    return (_jsxs("div", { className: cx("flex flex-col gap-2 rounded-lg bg-primary pt-3 pr-3 pb-2 pl-3.5 font-body shadow-[var(--shadow-xs),inset_0_0_0_1px_var(--border-primary)] focus-within:shadow-[var(--shadow-xs),inset_0_0_0_2px_var(--border-brand)] has-[textarea:focus-visible]:shadow-[var(--shadow-xs),inset_0_0_0_2px_var(--border-brand),var(--focus-ring-shadow)]", disabled && "opacity-50", className), children: [_jsx("textarea", { rows: 2, value: text, placeholder: placeholder, "aria-label": ariaLabel ?? placeholder ?? defaultStrings.message, disabled: disabled, onChange: (e) => setText(e.target.value), onKeyDown: onKeyDown, className: "resize-none border-0 bg-transparent p-0.5 font-body text-md text-primary outline-none placeholder:text-placeholder disabled:cursor-not-allowed" }), _jsxs("div", { className: "flex items-center justify-end gap-1", children: [onAttach ? (_jsx(Button, { hierarchy: "tertiary", size: "sm", iconOnly: "paperclip", label: attachLabel, disabled: disabled, onClick: onAttach })) : null, _jsx(Button, { size: "sm", iconTrailing: "send-01", disabled: disabled || empty, onClick: send, children: sendLabel })] })] }));
+}

package/dist/components/MetricCard.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+export interface MetricCardProps {
+    label: ReactNode;
+    /** La cifra, en Bricolage Grotesque 36/44 semibold. */
+    value: ReactNode;
+    /** Cambio frente al periodo anterior, como "12%". */
+    change?: ReactNode;
+    /**
+     * Sube (`text-success-primary`, flecha arriba) o baja (`text-error-primary`, flecha abajo): siempre con flecha,
+     * nunca solo color.
+     * @default "up"
+     */
+    trend?: "up" | "down";
+    /** Periodo de comparación, como "vs. septiembre". */
+    period?: 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).
+     */
+    menu?: boolean | ReactNode;
+    /** Al pulsar el botón de tres puntos (ampliación sobre la guía). */
+    onMenu?: () => void;
+    /** Nombre del botón de tres puntos. @default "Más opciones" */
+    menuLabel?: string;
+    className?: string;
+}
+/** Tarjeta con una cifra clave, su tendencia y el periodo de comparación. */
+export declare function MetricCard({ label, value, change, trend, period, menu, onMenu, menuLabel, className, }: MetricCardProps): import("react").JSX.Element;

package/dist/components/MetricCard.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+/** Tarjeta con una cifra clave, su tendencia y el periodo de comparación. */
+export function MetricCard({ label, value, change, trend = "up", period, menu, onMenu, menuLabel, className, }) {
+    const up = trend !== "down";
+    return (_jsxs("div", { className: cx("flex flex-col gap-5 rounded-xl bg-primary px-6 py-5 font-body shadow-[var(--shadow-xs),inset_0_0_0_1px_var(--border-secondary)]", className), children: [_jsxs("div", { className: "flex items-center justify-between text-md font-semibold text-primary", children: [label, menu === true ? (_jsx(Button, { hierarchy: "tertiary", size: "sm", iconOnly: "dots-vertical", label: menuLabel ?? defaultStrings.moreOptions, onClick: onMenu })) : isValidElement(menu) ? (menu) : null] }), _jsxs("div", { children: [_jsx("div", { className: "font-display text-display-md font-semibold text-primary", children: value }), change ? (_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-tertiary", children: [_jsxs("span", { className: cx("inline-flex items-center gap-1 font-medium", up ? "text-success-primary" : "text-error-primary"), children: [_jsx(Icon, { name: up ? "trend-up-01" : "trend-down-01", size: 20 }), _jsxs("span", { className: "sr-only", children: [up ? defaultStrings.rising : defaultStrings.falling, " "] }), change] }), period ?? null] })) : null] })] }));
+}

package/dist/components/Modal.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from "react";
+import type { StatusColor } from "./Badge.js";
+import { type FeaturedIconVariant } from "./FeaturedIcon.js";
+import type { IconName } from "./Icon.js";
+export interface ModalProps {
+    /**
+     * Visible. Con `false` no se pinta.
+     * @default true
+     */
+    open?: boolean;
+    /** Pregunta o tarea. El botón de confirmar repite su verbo ("Eliminar", no "Aceptar"). */
+    title: ReactNode;
+    description?: ReactNode;
+    /** Icono destacado sobre el título (`FeaturedIcon` de 48px). */
+    icon?: IconName;
+    /** Color del icono. Por defecto, `brand` (`error` si es `destructive`). */
+    color?: StatusColor;
+    /**
+     * Estilo del icono destacado.
+     * @default "light"
+     */
+    iconVariant?: FeaturedIconVariant;
+    /** Confirma una acción destructiva: icono en `error`. */
+    destructive?: boolean;
+    /**
+     * `stacked`: icono encima y botones a partes iguales. `horizontal`: icono a la izquierda y botones a la derecha.
+     * @default "stacked"
+     */
+    layout?: "stacked" | "horizontal";
+    /** Botones del pie: normalmente `Button` secundario + primario. Una sola acción principal. */
+    actions?: ReactNode;
+    /** Contenido, como un formulario corto. */
+    children?: ReactNode;
+    /** Cierra con la X, Escape o un clic fuera. Sin él no hay X y el modal no se puede descartar. */
+    onClose?: () => void;
+    /**
+     * Ancho máximo.
+     * @default 480
+     */
+    width?: number | string;
+    /** Se pinta dentro de su contenedor (posición relativa) en vez de sobre toda la página, sin atrapar el foco. */
+    contained?: boolean;
+}
+/** Diálogo sobre la página para confirmar o completar una tarea corta sin salir de ella. Un modal, una decisión. */
+export declare function Modal({ open, title, description, icon, color, iconVariant, destructive, layout, actions, children, onClose, width, contained, }: ModalProps): import("react").JSX.Element | null;

package/dist/components/Modal.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "../internal/cx.js";
+import { Layer } from "../internal/layer.js";
+import { CloseButton } from "./CloseButton.js";
+import { FeaturedIcon } from "./FeaturedIcon.js";
+/** Diálogo sobre la página para confirmar o completar una tarea corta sin salir de ella. Un modal, una decisión. */
+export function Modal({ open = true, title, description, icon, color, iconVariant = "light", destructive, layout = "stacked", actions, children, onClose, width, contained, }) {
+    const id = useId();
+    if (!open)
+        return null;
+    const horizontal = layout === "horizontal";
+    return (_jsxs(Layer, { contained: contained, onClose: onClose, overlayClassName: "items-center justify-center", panelClassName: "relative w-full max-w-[var(--width-sm)] rounded-2xl bg-primary_alt font-body shadow-xl", panelStyle: width !== undefined ? { maxWidth: width } : undefined, labelledBy: `${id}-title`, describedBy: description ? `${id}-desc` : undefined, children: [_jsxs("div", { className: cx("flex gap-4 px-6 pt-6", horizontal ? "flex-row" : "flex-col"), children: [icon ? (_jsx(FeaturedIcon, { icon: icon, color: color ?? (destructive ? "error" : "brand"), size: "lg", variant: iconVariant })) : null, _jsxs("div", { children: [_jsx("h2", { id: `${id}-title`, className: "m-0 text-lg font-semibold text-primary", children: title }), description ? (_jsx("p", { id: `${id}-desc`, className: "mt-1 mb-0 text-sm text-tertiary", children: description })) : null] })] }), children ? _jsx("div", { className: "px-6 pt-5", children: children }) : null, actions ? (_jsx("div", { className: cx("flex gap-3 px-6 pt-8 pb-6", horizontal ? "justify-end [&>*]:flex-none" : "[&>*]:flex-1"), children: actions })) : null, onClose ? _jsx(CloseButton, { onClick: onClose, className: "absolute top-4 right-4" }) : null] }));
+}

package/dist/components/Notification.d.ts

@@ -0,0 +1,15 @@
+import { type AlertProps } from "./Alert.js";
+export interface NotificationProps extends Omit<AlertProps, "variant"> {
+    /**
+     * Milisegundos hasta cerrarse sola (llama a `onClose`), o `false` para que no se cierre. Solo cuenta si hay
+     * `onClose` y no hay `actions`; el tiempo se para mientras el ratón está encima o el foco dentro.
+     * Ampliación sobre la guía.
+     * @default 6000
+     */
+    autoClose?: number | false;
+}
+/**
+ * Aviso flotante y temporal (toast) tras una acción del usuario, de 320px de ancho. La app lo coloca abajo a la
+ * derecha, apilado; se cierra solo a los 6 s salvo que tenga acciones.
+ */
+export declare function Notification({ autoClose, className, ...props }: NotificationProps): import("react").JSX.Element;

package/dist/components/Notification.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cx } from "../internal/cx.js";
+import { ALERT_BASE, alertBody } from "./Alert.js";
+/**
+ * Aviso flotante y temporal (toast) tras una acción del usuario, de 320px de ancho. La app lo coloca abajo a la
+ * derecha, apilado; se cierra solo a los 6 s salvo que tenga acciones.
+ */
+export function Notification({ autoClose = 6000, className, ...props }) {
+    const { color = "gray", onClose, actions } = props;
+    const enabled = autoClose !== false && !!onClose && !actions;
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const paused = hovered || focused;
+    const remaining = useRef(autoClose || 0);
+    const close = useRef(onClose);
+    close.current = onClose;
+    useEffect(() => {
+        if (!enabled || paused)
+            return;
+        const start = Date.now();
+        const timer = setTimeout(() => close.current?.(), remaining.current);
+        return () => {
+            clearTimeout(timer);
+            remaining.current = Math.max(0, remaining.current - (Date.now() - start));
+        };
+    }, [enabled, paused]);
+    return (_jsx("div", { role: color === "error" ? "alert" : "status", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget))
+                setFocused(false);
+        }, className: cx(ALERT_BASE, "w-full max-w-[var(--width-xxs)] rounded-xl shadow-[var(--shadow-lg),inset_0_0_0_1px_var(--border-secondary_alt)]", className), children: alertBody(props) }));
+}

package/dist/components/NowPlaying.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+export interface NowPlayingLabels {
+    /** @default "Suena ahora" */
+    playing: string;
+    /** @default "En pausa" */
+    paused: string;
+    /** Nombre de la barra. @default "Progreso de la canción" */
+    progress: string;
+}
+export interface NowPlayingProps {
+    title: ReactNode;
+    artist?: ReactNode;
+    /** URL de la carátula; sin ella, icono de volumen. */
+    cover?: string;
+    /** De 0 a 1. Sin él no hay barra. Avanza cuando llega un valor nuevo: no se anima por su cuenta. */
+    progress?: number;
+    paused?: boolean;
+    /** @default 360 */
+    width?: number | string;
+    /** Sustituye los textos (ampliación sobre la guía). */
+    labels?: Partial<NowPlayingLabels>;
+    className?: string;
+}
+/** Tarjeta de "suena ahora" con carátula, título, artista y una línea fina de progreso, siempre en oscuro. */
+export declare function NowPlaying({ title, artist, cover, progress, paused, width, labels, className, }: NowPlayingProps): import("react").JSX.Element;

package/dist/components/NowPlaying.js

@@ -0,0 +1,16 @@
+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";
+import { Icon } from "./Icon.js";
+/** Tarjeta de "suena ahora" con carátula, título, artista y una línea fina de progreso, siempre en oscuro. */
+export function NowPlaying({ title, artist, cover, progress, paused, width, labels, className, }) {
+    const t = {
+        playing: defaultStrings.nowPlaying,
+        paused: defaultStrings.paused,
+        progress: defaultStrings.songProgress,
+        ...labels,
+    };
+    const pct = progress == null ? null : Math.min(100, Math.max(0, progress * 100));
+    return (_jsxs("div", { className: cx(STREAM_ROOT, "relative flex max-w-full items-center gap-3 overflow-hidden rounded-xl border border-secondary bg-primary_alt p-3 pb-[15px]", width == null && "w-[360px]", className), style: width == null ? undefined : { width }, children: [_jsx("div", { className: "inline-flex size-14 flex-none items-center justify-center overflow-hidden rounded-lg bg-tertiary text-fg-secondary", children: cover ? (_jsx("img", { src: cover, alt: "", className: "size-full object-cover" })) : (_jsx(Icon, { name: "volume-max", size: 24 })) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "block text-sm font-medium text-tertiary", children: paused ? t.paused : t.playing }), _jsx("span", { className: "truncate text-md font-semibold text-primary", children: title }), artist ? _jsx("span", { className: "truncate text-sm text-tertiary", children: artist }) : null] }), pct != null ? (_jsx("div", { role: "progressbar", "aria-label": t.progress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(pct), className: "absolute inset-x-0 bottom-0 h-[3px] bg-quaternary", children: _jsx("div", { className: "h-full bg-brand-solid", style: { width: `${pct}%` } }) })) : null] }));
+}

package/dist/components/PageHeader.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { type BreadcrumbItem } from "./Breadcrumbs.js";
+export interface PageHeaderProps {
+    /** Título de la página (`<h1>`), en Bricolage Grotesque 30/38 semibold. */
+    title: ReactNode;
+    /** Una frase en `text-tertiary` bajo el título. */
+    description?: ReactNode;
+    /** Ruta encima del título (`Breadcrumbs`). */
+    breadcrumbs?: BreadcrumbItem[];
+    /** Botones a la derecha: la acción principal, la última. */
+    actions?: ReactNode;
+    /** Lo que va bajo el título, como unas `Tabs`. */
+    children?: ReactNode;
+    /**
+     * Línea inferior en `border-secondary`.
+     * @default true
+     */
+    divider?: boolean;
+    className?: string;
+}
+/** Cabecera de página de app: migas, título, descripción, acciones y línea inferior. */
+export declare function PageHeader({ title, description, breadcrumbs, actions, children, divider, className, }: PageHeaderProps): import("react").JSX.Element;

package/dist/components/PageHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { Line } from "../internal/line.js";
+import { Breadcrumbs } from "./Breadcrumbs.js";
+/** Cabecera de página de app: migas, título, descripción, acciones y línea inferior. */
+export function PageHeader({ title, description, breadcrumbs, actions, children, divider = true, className, }) {
+    return (_jsxs("header", { className: cx("flex flex-col gap-5 font-body", className), children: [breadcrumbs ? _jsx(Breadcrumbs, { items: breadcrumbs }) : null, _jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "m-0 font-display text-display-sm font-semibold text-primary", children: title }), description ? _jsx("p", { className: "mt-1 mb-0 text-md text-tertiary", children: description }) : null] }), actions ? _jsx("div", { className: "flex flex-wrap items-center gap-3", children: actions }) : null] }), children ?? null, divider ? _jsx(Line, {}) : null] }));
+}

package/dist/components/Pagination.d.ts

@@ -0,0 +1,29 @@
+export interface PaginationLabels {
+    /** @default "Anterior" */
+    previous: string;
+    /** @default "Siguiente" */
+    next: string;
+    /** Nombre de la navegación. @default "Paginación" */
+    nav: string;
+    /** Nombre de cada número. @default (n) => `Página ${n}` */
+    page: (n: number) => string;
+}
+export interface PaginationProps {
+    /** Número de páginas. */
+    total: number;
+    /** Página actual, desde 1 (controlado). */
+    page?: number;
+    /**
+     * Página al principio (no controlado).
+     * @default 1
+     */
+    defaultPage?: number;
+    onChange?: (n: number) => void;
+    /** Textos que trae el componente, para sustituirlos. */
+    labels?: Partial<PaginationLabels>;
+    className?: string;
+}
+/** Números que se muestran: todos hasta 7 páginas; con más, recorta con "…". */
+export declare function pageList(current: number, total: number): (number | "…")[];
+/** Paginación con Anterior/Siguiente y números, separada de la tabla por una línea `border-secondary`. */
+export declare function Pagination({ total, page, defaultPage, onChange, labels, className }: PaginationProps): import("react").JSX.Element;

package/dist/components/Pagination.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { useControllable } from "../internal/use-controllable.js";
+import { Button } from "./Button.js";
+/** Números que se muestran: todos hasta 7 páginas; con más, recorta con "…". */
+export function pageList(current, total) {
+    if (total <= 7)
+        return Array.from({ length: total }, (_, i) => i + 1);
+    if (current <= 3 || current >= total - 2)
+        return [1, 2, 3, "…", total - 2, total - 1, total];
+    return [1, "…", current - 1, current, current + 1, "…", total];
+}
+/** Paginación con Anterior/Siguiente y números, separada de la tabla por una línea `border-secondary`. */
+export function Pagination({ total, page, defaultPage = 1, onChange, labels, className }) {
+    const [current, setCurrent] = useControllable(page, defaultPage);
+    const pages = Math.max(1, total);
+    const text = {
+        previous: defaultStrings.previous,
+        next: defaultStrings.next,
+        nav: defaultStrings.pagination,
+        page: (n) => `${defaultStrings.page} ${n}`,
+        ...labels,
+    };
+    const go = (n) => {
+        if (n < 1 || n > pages || n === current)
+            return;
+        setCurrent(n);
+        onChange?.(n);
+    };
+    return (_jsxs("nav", { "aria-label": text.nav, className: cx("flex items-center justify-between gap-3 pt-3 font-body shadow-[inset_0_1px_0_var(--border-secondary)]", className), children: [_jsx(Button, { hierarchy: "secondary", size: "sm", iconLeading: "arrow-left", disabled: current <= 1, onClick: () => go(current - 1), children: text.previous }), _jsx("div", { className: "flex gap-0.5", children: pageList(current, pages).map((n, i) => n === "…" ? (_jsx("span", { "aria-hidden": "true", className: "w-10 text-center text-sm leading-10 text-quaternary", children: "\u2026" }, `gap-${i}`)) : (_jsx("button", { type: "button", "aria-label": text.page(n), "aria-current": n === current ? "page" : undefined, onClick: () => go(n), className: "size-10 cursor-pointer rounded-lg border-0 bg-transparent font-body text-sm font-medium text-quaternary transition-colors duration-100 hover:bg-primary_hover hover:text-secondary focus-visible:shadow-focus-ring focus-visible:outline-none aria-[current=page]:bg-primary_hover aria-[current=page]:text-secondary", children: n }, n))) }), _jsx(Button, { hierarchy: "secondary", size: "sm", iconTrailing: "arrow-right", disabled: current >= pages, onClick: () => go(current + 1), children: text.next })] }));
+}

package/dist/components/PieChart.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+export interface PieChartSlice {
+    name: string;
+    value: number;
+    /** Sin `color`, la paleta de series en orden. */
+    color?: string;
+}
+export interface PieChartProps {
+    /** Cinco porciones como mucho: agrupa el resto en "Otros". */
+    data: PieChartSlice[];
+    /** Lado en px. @default 200 */
+    size?: number;
+    /**
+     * Hueco del dónut, de 0 (tarta) a 0,9.
+     * @default 0.6
+     */
+    hole?: number;
+    /** Texto en el hueco, como el total. */
+    center?: ReactNode;
+    /** Formato del valor en el título de cada porción. */
+    format?: (v: number) => string;
+    /**
+     * Leyenda a la derecha: el color solo no basta.
+     * @default true
+     */
+    legend?: boolean;
+    /** Qué cuenta la gráfica, para lectores de pantalla. @default "Gráfica circular" */
+    "aria-label"?: string;
+    className?: string;
+}
+/** Gráfica circular o de dónut para el reparto de un total. */
+export declare function PieChart({ data, size, hole, center, format, legend, className, ...rest }: PieChartProps): import("react").JSX.Element;

package/dist/components/PieChart.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { seriesColor } from "../internal/chart.js";
+import { cx } from "../internal/cx.js";
+import { ChartLegend } from "./ChartLegend.js";
+/** Gráfica circular o de dónut para el reparto de un total. */
+export function PieChart({ data, size = 200, hole = 0.6, center, format, legend = true, className, ...rest }) {
+    const r = size / 2;
+    const total = data.reduce((a, d) => a + d.value, 0) || 1;
+    const arc = (a, b) => {
+        const ri = r * hole;
+        const large = b - a > Math.PI ? 1 : 0;
+        const { cos, sin } = Math;
+        const outer = `M${r + r * cos(a)} ${r + r * sin(a)} A${r} ${r} 0 ${large} 1 ${r + r * cos(b)} ${r + r * sin(b)}`;
+        return ri
+            ? `${outer} L${r + ri * cos(b)} ${r + ri * sin(b)} A${ri} ${ri} 0 ${large} 0 ${r + ri * cos(a)} ${r + ri * sin(a)} Z`
+            : `${outer} L${r} ${r} Z`;
+    };
+    let a0 = -Math.PI / 2;
+    return (_jsxs("figure", { className: cx("m-0 flex flex-row items-center gap-4 font-body", className), children: [_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, role: "img", "aria-label": rest["aria-label"] ?? "Gráfica circular", className: "flex-none overflow-visible", children: [data.map((d, i) => {
+                        const step = (2 * Math.PI * d.value) / total;
+                        const a = a0;
+                        // Un hueco de 0,02 rad entre porciones
+                        const b = a0 + step - (data.length > 1 ? 0.02 : 0);
+                        a0 += step;
+                        const color = seriesColor(i, d.color);
+                        if (data.length === 1)
+                            return (_jsx("circle", { cx: r, cy: r, r: (r * (1 + hole)) / 2, fill: "none", stroke: color, strokeWidth: r * (1 - hole), children: _jsx("title", { children: `${d.name}: ${format ? format(d.value) : d.value}` }) }, d.name));
+                        return (_jsx("path", { d: arc(a, b), fill: color, children: _jsx("title", { children: `${d.name}: ${format ? format(d.value) : d.value}` }) }, i));
+                    }), center ? (_jsx("text", { x: r, y: r + 8, textAnchor: "middle", fontSize: 24, fontWeight: 600, className: "font-display", fill: "var(--text-primary)", children: center })) : null] }), legend ? _jsx(ChartLegend, { vertical: true, series: data }) : null] }));
+}

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,11 @@
+export interface ProgressBarProps {
+    /** De 0 a 100. */
+    value: number;
+    /** Porcentaje a la derecha (por defecto), debajo o sin texto. */
+    label?: "right" | "bottom" | false;
+    /** Qué progresa: "Presupuesto usado", "Subida". */
+    "aria-label"?: string;
+    className?: string;
+}
+/** Barra de progreso de 8px con el porcentaje a la derecha o debajo. */
+export declare function ProgressBar({ value, label, "aria-label": ariaLabel, className, }: ProgressBarProps): import("react").JSX.Element;

package/dist/components/ProgressBar.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+/** Barra de progreso de 8px con el porcentaje a la derecha o debajo. */
+export function ProgressBar({ value, label = "right", "aria-label": ariaLabel, className, }) {
+    const v = Math.max(0, Math.min(100, value || 0));
+    const bottom = label === "bottom";
+    return (_jsxs("div", { className: cx("flex items-center gap-3 font-body text-sm font-medium text-secondary", bottom && "flex-col items-end gap-2", className), children: [_jsx("div", { role: "progressbar", "aria-valuenow": v, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": ariaLabel, className: cx("h-2 w-full overflow-hidden rounded-full bg-quaternary", bottom ? "flex-none" : "flex-1"), children: _jsx("div", { className: "h-full rounded-full bg-fg-brand-primary", style: { width: `${Math.max(v, 3)}%` } }) }), label ? _jsxs("span", { children: [v, "%"] }) : null] }));
+}

package/dist/components/Radio.d.ts

@@ -0,0 +1,15 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+import { type ChoiceSize } from "../internal/choice.js";
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** Etiqueta junto al botón. */
+    label?: ReactNode;
+    /** Texto de apoyo bajo la etiqueta. */
+    hint?: ReactNode;
+    /**
+     * Círculo de 16px (`sm`) o 20px (`md`).
+     * @default "sm"
+     */
+    size?: ChoiceSize;
+}
+/** Botón de opción suelto, con `<input type="radio">` nativo. En grupo, usa `RadioGroup`. */
+export declare function Radio({ label, hint, size, id: givenId, className, ...rest }: RadioProps): import("react").JSX.Element;

package/dist/components/Radio.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { ChoiceText, choiceBox, choiceLabel, hiddenInput, radioDot, } from "../internal/choice.js";
+import { cx } from "../internal/cx.js";
+/** Botón de opción suelto, con `<input type="radio">` nativo. En grupo, usa `RadioGroup`. */
+export function Radio({ label, hint, size = "sm", id: givenId, className, ...rest }) {
+    const autoId = useId();
+    const id = givenId ?? autoId;
+    return (_jsxs("label", { htmlFor: id, className: cx(choiceLabel(size), className), children: [_jsx("input", { id: id, type: "radio", ...rest, className: hiddenInput }), _jsx("span", { "aria-hidden": "true", className: cx(choiceBox(size, true), "peer-checked:bg-brand-solid peer-checked:shadow-none peer-focus-visible:shadow-focus-ring peer-disabled:opacity-50"), children: _jsx("span", { className: cx(radioDot(size), "hidden group-has-[:checked]:block") }) }), _jsx(ChoiceText, { label: label, hint: hint, size: size, className: "peer-disabled:opacity-50" })] }));
+}

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { type ChoiceSize } from "../internal/choice.js";
+export interface RadioGroupOption {
+    value: string;
+    label: ReactNode;
+    hint?: ReactNode;
+}
+export interface RadioGroupProps {
+    /** Hasta cinco opciones; con más, `Select`. */
+    options: RadioGroupOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /**
+     * Círculos de 16px (`sm`) o 20px (`md`).
+     * @default "sm"
+     */
+    size?: ChoiceSize;
+    /** Nombre del campo al enviar el formulario. */
+    name?: string;
+    /** Qué se elige, si no hay una etiqueta visible. */
+    "aria-label"?: string;
+    className?: string;
+}
+/** Grupo de opciones excluyentes con flechas para moverse entre ellas. */
+export declare function RadioGroup({ options, value, defaultValue, onChange, size, name, "aria-label": ariaLabel, className, }: RadioGroupProps): import("react").JSX.Element;

package/dist/components/RadioGroup.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as AriaRadio, RadioGroup as AriaRadioGroup } from "react-aria-components";
+import { ChoiceText, choiceBox, choiceLabel, radioDot } from "../internal/choice.js";
+import { cx } from "../internal/cx.js";
+/** Grupo de opciones excluyentes con flechas para moverse entre ellas. */
+export function RadioGroup({ options, value, defaultValue, onChange, size = "sm", name, "aria-label": ariaLabel, className, }) {
+    return (_jsx(AriaRadioGroup, { value: value, defaultValue: defaultValue, onChange: onChange, name: name, "aria-label": ariaLabel, className: cx("flex flex-col gap-3", className), children: options.map((o) => (_jsxs(AriaRadio, { value: o.value, className: choiceLabel(size), children: [_jsx("span", { "aria-hidden": "true", className: cx(choiceBox(size, true), "group-data-selected:bg-brand-solid group-data-selected:shadow-none group-data-focus-visible:shadow-focus-ring group-data-disabled:opacity-50"), children: _jsx("span", { className: cx(radioDot(size), "hidden group-data-selected:block") }) }), _jsx(ChoiceText, { label: o.label, hint: o.hint, size: size, className: "group-data-disabled:opacity-50" })] }, o.value))) }));
+}

package/dist/components/SectionFooter.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export interface SectionFooterProps {
+    /** A la izquierda: un enlace, un `ButtonGroup`… */
+    start?: ReactNode;
+    /** Botones a la derecha: la acción principal, la última. */
+    actions?: ReactNode;
+    /** Añade el padding de tarjeta (24px a los lados, 16px abajo). */
+    card?: boolean;
+    className?: string;
+}
+/** Pie de sección o de tarjeta con línea superior: un enlace o grupo a la izquierda y las acciones a la derecha. */
+export declare function SectionFooter({ start, actions, card, className }: SectionFooterProps): import("react").JSX.Element;