@jotis-me/react 0.0.0-stage → 0.2.0

package/dist/components/CreditCard.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+// Colores fijos de la ficha: la tarjeta es un objeto, no parte de la interfaz.
+const THEME = {
+    "brand-dark": {
+        card: "bg-[linear-gradient(45deg,#312c85,#432dd7)] shadow-lg",
+        fg: "text-[#ffffff]",
+        sub: "text-[#ffffffcc]",
+        edge: true,
+        darkChip: false,
+    },
+    "brand-light": {
+        card: "bg-[linear-gradient(45deg,#c6d2ff,#e0e7ff)] shadow-lg",
+        fg: "text-[#312c85]",
+        sub: "text-[#432dd7]",
+        edge: false,
+        darkChip: true,
+    },
+    "gray-dark": {
+        card: "bg-[linear-gradient(45deg,#0a0a0a,#404040)] shadow-lg",
+        fg: "text-[#ffffff]",
+        sub: "text-[#ffffffcc]",
+        edge: true,
+        darkChip: false,
+    },
+    "gray-light": {
+        card: "bg-[#f5f5f5] shadow-[var(--shadow-lg),inset_0_0_0_1px_#e5e5e5]",
+        fg: "text-[#404040]",
+        sub: "text-[#525252]",
+        edge: false,
+        darkChip: true,
+    },
+    transparent: {
+        card: "bg-[linear-gradient(135deg,#ffffff47,#ffffff0f)] shadow-lg backdrop-blur-lg",
+        fg: "text-[#ffffff]",
+        sub: "text-[#ffffffcc]",
+        edge: true,
+        darkChip: false,
+    },
+};
+// Canto: borde degradado blanco (0,5 → 0,08) recortado al anillo de 1px
+const EDGE = {
+    padding: 1,
+    background: "linear-gradient(135deg, #ffffff80, #ffffff14)",
+    mask: "linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)",
+    WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+    WebkitMaskComposite: "xor",
+};
+function Contactless({ className }) {
+    return (_jsxs("svg", { "aria-hidden": "true", width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", className: className, children: [_jsx("path", { d: "M8.5 8.5a5 5 0 0 1 0 7" }), _jsx("path", { d: "M12 6a8.5 8.5 0 0 1 0 12" }), _jsx("path", { d: "M15.5 3.5a12 12 0 0 1 0 17" })] }));
+}
+/** Maqueta de tarjeta de pago (316×190) para métodos de pago, onboarding o capturas. Es una imagen con nombre. */
+export function CreditCard({ theme = "brand-dark", company = "jotis.me", holder = "ADMINISTRADOR", expiry, last4 = "1234", network, className, style, ...rest }) {
+    const t = THEME[theme];
+    const last = String(last4).slice(-4);
+    const label = rest["aria-label"] ??
+        `Tarjeta ${typeof company === "string" ? `${company} ` : ""}terminada en ${last}` +
+            (holder ? `, titular ${holder}` : "") +
+            (expiry ? `, caduca ${expiry}` : "");
+    return (_jsxs("div", { role: "img", "aria-label": label, className: cx("relative isolate flex h-[190px] w-[316px] shrink-0 flex-col overflow-hidden rounded-2xl py-4 pr-4 pl-5 font-body", t.card, t.fg, className), style: style, children: [t.edge ? (_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 -z-10 rounded-[inherit]", style: EDGE })) : null, _jsxs("div", { className: "flex items-start justify-between", children: [_jsx("span", { className: "font-display text-md font-semibold tracking-[-0.01em]", children: company }), _jsx(Contactless, { className: t.sub })] }), _jsx("div", { className: cx("mt-3.5 h-7 w-9 rounded-md", t.darkChip
+                    ? "bg-[linear-gradient(135deg,#0000001f,#0000000a)] shadow-[inset_0_0_0_1px_#00000014]"
+                    : "bg-[linear-gradient(135deg,#ffffff8c,#ffffff26)] shadow-[inset_0_0_0_1px_#ffffff59]") }), _jsxs("div", { className: "mt-auto flex items-end gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("div", { className: cx("flex justify-between gap-2 text-xs font-semibold tracking-[0.05em]", t.sub), children: [_jsx("span", { className: "truncate uppercase", children: holder }), expiry ? _jsx("span", { children: expiry }) : null] }), _jsxs("span", { className: "text-md font-medium tracking-[0.06em] tabular-nums", children: ["\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ", last] })] }), network ? (_jsx("span", { className: "rounded-md bg-[#ffffff1a] px-2 py-1 text-sm/6 font-bold italic", children: network })) : null] })] }));
+}

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,48 @@
+export interface DateRange {
+    start: Date | null;
+    end?: Date | null;
+}
+export interface DatePickerPreset {
+    label: string;
+    start: Date;
+    /** Sin `end`, el preset es un solo día. */
+    end?: Date;
+}
+export interface DatePickerLabels {
+    /** Texto del disparador sin fecha y sin `placeholder`, con una fecha. */
+    pickDate: string;
+    /** Texto del disparador sin fecha y sin `placeholder`, con rango. */
+    pickDates: string;
+    /** Nombre accesible del panel. */
+    dialog: string;
+    /** Nombre accesible de la cuadrícula del mes. */
+    calendar: string;
+    previousMonth: string;
+    nextMonth: string;
+    cancel: string;
+    apply: string;
+}
+export interface DatePickerProps {
+    /** Elige un rango (inicio y fin) en lugar de una fecha. */
+    range?: boolean;
+    /** Valor inicial: `{ start, end }`; con una fecha, solo `start`. */
+    defaultValue?: DateRange;
+    /** Se llama al pulsar Aplicar, no al elegir cada día. */
+    onApply?: (value: DateRange) => void;
+    /** Atajos a la izquierda del calendario: "Este mes", "Mes pasado". */
+    presets?: DatePickerPreset[];
+    /** Texto del disparador mientras no hay fecha aplicada. */
+    placeholder?: string;
+    /** Abre o cierra el panel desde fuera. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    /** Pinta el panel sin botón ni ventana flotante. */
+    inline?: boolean;
+    /** Día marcado como hoy. Por defecto, la fecha del sistema. */
+    today?: Date;
+    /** Textos sustituibles. */
+    labels?: Partial<DatePickerLabels>;
+    className?: string;
+}
+/** Selector de una fecha o de un rango, con presets y botones de aplicar y cancelar. */
+export declare function DatePicker({ range, defaultValue, onApply, presets, placeholder, open: openProp, defaultOpen, inline, today: todayProp, labels, className, }: DatePickerProps): import("react").JSX.Element;

package/dist/components/DatePicker.js

@@ -0,0 +1,105 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarDate, isSameDay } from "@internationalized/date";
+import { useEffect, useRef, useState } from "react";
+import { Button as AriaButton, Calendar as AriaCalendar, RangeCalendar as AriaRangeCalendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, Dialog, I18nProvider, Popover, } from "react-aria-components";
+import { cx } from "../internal/cx.js";
+import { formatDate, formatMonth } from "../internal/format.js";
+import { defaultStrings } from "../internal/strings.js";
+import { useControllable } from "../internal/use-controllable.js";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+const DEFAULT_LABELS = {
+    pickDate: defaultStrings.pickDate,
+    pickDates: defaultStrings.pickDates,
+    dialog: defaultStrings.datePicker,
+    calendar: defaultStrings.calendar,
+    previousMonth: defaultStrings.previousMonth,
+    nextMonth: defaultStrings.nextMonth,
+    cancel: defaultStrings.cancel,
+    apply: defaultStrings.apply,
+};
+const day = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const toCalendar = (d) => new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate());
+const toDate = (c) => new Date(c.year, c.month - 1, c.day);
+const sameDay = (a, b) => !!a && !!b && a.getTime() === b.getTime();
+// "lun" → "Lu", "sáb" → "Sá": las iniciales de dos letras de la guía
+const weekday = (d) => d.charAt(0).toUpperCase() + d.slice(1, 2);
+const NAV = "inline-flex cursor-pointer rounded-lg border-0 bg-transparent p-2 text-fg-quaternary outline-none transition-colors duration-100 data-hovered:bg-primary_hover data-hovered:text-fg-quaternary_hover data-focus-visible:shadow-focus-ring";
+const TODAY_DOT = "after:absolute after:bottom-[5px] after:left-1/2 after:-ml-[2.5px] after:size-[5px] after:rounded-full after:content-['']";
+// Extremos del rango: círculo de marca sobre media celda del tono del tramo, hacia dentro
+const RANGE_START = "rounded-none bg-transparent bg-[radial-gradient(circle,var(--bg-brand-solid)_19.5px,transparent_20px),linear-gradient(to_right,transparent_50%,var(--bg-secondary_hover)_50%)]";
+const RANGE_END = "rounded-none bg-transparent bg-[radial-gradient(circle,var(--bg-brand-solid)_19.5px,transparent_20px),linear-gradient(to_left,transparent_50%,var(--bg-secondary_hover)_50%)]";
+function cellClass(range, today) {
+    return ({ date, isSelected, isSelectionStart, isSelectionEnd, isOutsideMonth, }) => {
+        const start = range && isSelectionStart;
+        const end = range && isSelectionEnd;
+        const selected = range ? start || end : isSelected;
+        const between = range && isSelected && !start && !end;
+        const isToday = isSameDay(date, today);
+        return cx("relative flex size-10 cursor-pointer items-center justify-center rounded-full text-sm text-secondary outline-none transition-colors duration-100 data-focus-visible:shadow-focus-ring", !selected && !between && "data-hovered:bg-primary_hover", isToday && `bg-tertiary font-medium ${TODAY_DOT} after:bg-fg-brand-primary`, between && "rounded-none bg-secondary_hover", selected && "font-medium text-white after:bg-fg-white", selected && start === end && "bg-brand-solid", start && !end && RANGE_START, end && !start && RANGE_END, isOutsideMonth && "hidden");
+    };
+}
+/** Selector de una fecha o de un rango, con presets y botones de aplicar y cancelar. */
+export function DatePicker({ range = false, defaultValue, onApply, presets, placeholder, open: openProp, defaultOpen = false, inline, today: todayProp, labels, className, }) {
+    const t = { ...DEFAULT_LABELS, ...labels };
+    const initial = {
+        start: defaultValue?.start ? day(defaultValue.start) : null,
+        end: range && defaultValue?.end ? day(defaultValue.end) : null,
+    };
+    const [draft, setDraft] = useState(initial);
+    const [applied, setApplied] = useState(initial);
+    const [open, setOpen] = useControllable(openProp, defaultOpen);
+    const today = toCalendar(todayProp ?? new Date());
+    const [focused, setFocused] = useState(() => (initial.start ? toCalendar(initial.start) : today));
+    const triggerRef = useRef(null);
+    const complete = !!draft.start && (!range || !!draft.end);
+    const close = () => setOpen(false);
+    // Al cerrar, el foco vuelve al disparador; antes no se puede, el resto de la página está inerte mientras el panel está abierto
+    const wasOpen = useRef(open);
+    useEffect(() => {
+        if (wasOpen.current && !open && !inline)
+            triggerRef.current?.querySelector("button")?.focus();
+        wasOpen.current = open;
+    }, [open, inline]);
+    const cancel = () => {
+        setDraft(applied);
+        setFocused(applied.start ? toCalendar(applied.start) : today);
+        close();
+    };
+    const apply = () => {
+        setApplied(draft);
+        close();
+        onApply?.(range ? draft : { start: draft.start });
+    };
+    const choosePreset = (p) => {
+        const start = day(p.start);
+        setDraft({ start, end: range ? day(p.end ?? p.start) : null });
+        setFocused(toCalendar(start));
+    };
+    const calendarBody = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx(AriaButton, { slot: "previous", "aria-label": t.previousMonth, className: NAV, children: _jsx(Icon, { name: "chevron-left", size: 20 }) }), _jsx("span", { className: "text-md font-semibold text-secondary", children: formatMonth(toDate(focused)) }), _jsx(AriaButton, { slot: "next", "aria-label": t.nextMonth, className: NAV, children: _jsx(Icon, { name: "chevron-right", size: 20 }) })] }), _jsxs(CalendarGrid, { weekdayStyle: "short", className: "-my-1 border-separate border-spacing-x-0 border-spacing-y-1", children: [_jsx(CalendarGridHeader, { children: (d) => (_jsx(CalendarHeaderCell, { className: "size-10 p-0 text-sm font-medium text-secondary", children: weekday(d) })) }), _jsx(CalendarGridBody, { children: (date) => _jsx(CalendarCell, { date: date, className: cellClass(range, today) }) })] })] }));
+    const calendarProps = {
+        "aria-label": t.calendar,
+        firstDayOfWeek: "mon",
+        focusedValue: focused,
+        onFocusChange: setFocused,
+        autoFocus: !inline,
+        className: "px-6 py-5",
+    };
+    const dateBox = (d) => (_jsx("span", { className: "min-w-26 rounded-lg px-3 py-2 text-sm text-primary shadow-[var(--shadow-xs),inset_0_0_0_1px_var(--border-primary)]", children: d ? formatDate(d) : "—" }));
+    const panel = (_jsxs("div", { className: cx("overflow-hidden rounded-2xl bg-primary font-body shadow-[var(--shadow-xl),inset_0_0_0_1px_var(--border-secondary_alt)]", inline ? "inline-flex" : "flex"), children: [presets?.length ? (_jsx("div", { className: "flex w-38 flex-none flex-col gap-0.5 p-3 shadow-[inset_-1px_0_0_var(--border-secondary)]", children: presets.map((p) => {
+                    const on = sameDay(draft.start, day(p.start)) &&
+                        (!range || sameDay(draft.end, day(p.end ?? p.start)));
+                    return (_jsx("button", { type: "button", "aria-pressed": on, onClick: () => choosePreset(p), className: cx("cursor-pointer rounded-md border-0 bg-transparent px-3 py-2 text-left text-sm font-medium text-secondary transition-colors duration-100 hover:bg-primary_hover hover:text-secondary_hover focus-visible:shadow-focus-ring focus-visible:outline-none", on && "bg-primary_hover text-secondary_hover"), children: p.label }, p.label));
+                }) })) : null, _jsxs("div", { className: "flex flex-col", children: [_jsx(I18nProvider, { locale: "es-ES", children: range ? (_jsx(AriaRangeCalendar, { ...calendarProps, value: draft.start && draft.end
+                                ? { start: toCalendar(draft.start), end: toCalendar(draft.end) }
+                                : null, onChange: (v) => v && setDraft({ start: toDate(v.start), end: toDate(v.end) }), children: calendarBody })) : (_jsx(AriaCalendar, { ...calendarProps, value: draft.start ? toCalendar(draft.start) : null, onChange: (v) => setDraft({ start: toDate(v), end: null }), children: calendarBody })) }), _jsxs("div", { className: "flex items-center justify-between gap-3 p-4 shadow-[inset_0_1px_0_var(--border-secondary)]", children: [_jsxs("div", { className: "flex items-center gap-2", children: [dateBox(draft.start), range ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-quaternary", children: "\u2013" }), dateBox(draft.end)] })) : null] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { hierarchy: "secondary", size: "sm", onClick: cancel, children: t.cancel }), _jsx(Button, { size: "sm", disabled: !complete, onClick: apply, children: t.apply })] })] })] })] }));
+    if (inline)
+        return (_jsx("fieldset", { "aria-label": t.dialog, className: cx("m-0 inline-flex min-w-0 border-0 p-0", className), children: panel }));
+    const label = applied.start
+        ? range && applied.end
+            ? `${formatDate(applied.start)} – ${formatDate(applied.end)}`
+            : formatDate(applied.start)
+        : placeholder || (range ? t.pickDates : t.pickDate);
+    return (_jsxs("div", { ref: triggerRef, className: cx("inline-flex", className), children: [_jsx(Button, { hierarchy: "secondary", size: "sm", iconLeading: "calendar", "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen(!open), className: applied.start ? undefined : "text-placeholder", children: label }), _jsx(Popover, { triggerRef: triggerRef, isOpen: open, onOpenChange: (next) => (next ? setOpen(true) : cancel()), placement: "bottom start", offset: 8, children: _jsx(Dialog, { "aria-label": t.dialog, className: "outline-none", children: panel }) })] }));
+}

package/dist/components/Dropdown.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import { type IconName } from "./Icon.js";
+export interface DropdownAction {
+    icon?: IconName;
+    label: ReactNode;
+    /** Atajo de teclado que se muestra a la derecha (solo texto; no lo registra). */
+    shortcut?: string;
+    /** Acción destructiva: va al final, tras un separador. */
+    danger?: boolean;
+    onSelect?: () => void;
+    /** Texto para la búsqueda por teclado si `label` no es texto. */
+    textValue?: string;
+}
+export type DropdownItem = DropdownAction | {
+    divider: true;
+};
+export interface DropdownProps {
+    /**
+     * Texto del botón que abre el menú.
+     * @default "Opciones"
+     */
+    label?: ReactNode;
+    /** Disparador propio en lugar del botón: un elemento que pase `ref` y props al DOM, como un `Button` solo icono. */
+    trigger?: ReactNode;
+    /** Cabecera del panel, por ejemplo un `AvatarLabel`. */
+    header?: ReactNode;
+    /** Abierto (controlado). */
+    open?: boolean;
+    /** Abierto al principio (no controlado). Así abierto no se lleva el foco ni bloquea la página. */
+    defaultOpen?: boolean;
+    /** Avisa al abrir y cerrar (ampliación sobre la guía, para el modo controlado). */
+    onOpenChange?: (open: boolean) => void;
+    items: DropdownItem[];
+    /** Nombre del menú para lectores de pantalla. Por defecto, el texto del botón. */
+    "aria-label"?: string;
+    className?: string;
+}
+/** Menú de acciones que se abre desde un botón. La acción destructiva va al final, tras un separador, con `danger`. */
+export declare function Dropdown({ label, trigger, header, open: openProp, defaultOpen, onOpenChange, items, className, ...rest }: DropdownProps): import("react").JSX.Element;

package/dist/components/Dropdown.js

@@ -0,0 +1,39 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement, useRef, useState } from "react";
+import { Menu, MenuItem, MenuTrigger, Popover, Pressable, Separator } from "react-aria-components";
+import { cx } from "../internal/cx.js";
+import { Kbd } from "../internal/kbd.js";
+import { defaultStrings } from "../internal/strings.js";
+import { useControllable } from "../internal/use-controllable.js";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+const PANEL = "min-w-60 rounded-lg bg-primary_alt py-1 font-body shadow-[var(--shadow-lg),inset_0_0_0_1px_var(--border-secondary_alt)] outline-none";
+const isDivider = (item) => "divider" in item;
+/** Menú de acciones que se abre desde un botón. La acción destructiva va al final, tras un separador, con `danger`. */
+export function Dropdown({ label, trigger, header, open: openProp, defaultOpen = false, onOpenChange, items, className, ...rest }) {
+    const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);
+    // Abierto por el usuario: menú modal con el foco dentro, y React Aria lo devuelve al disparador al cerrar.
+    // Abierto de inicio (defaultOpen): sin foco ni bloqueo de la página.
+    const [byUser, setByUser] = useState(false);
+    // MenuTrigger abre (no alterna) al pulsar con ratón; el menú abierto de inicio no es modal y nada lo cerraría.
+    const closeOnPress = useRef(false);
+    const menuLabel = rest["aria-label"] ?? (typeof label === "string" ? label : defaultStrings.options);
+    const panel = (_jsxs(_Fragment, { children: [header ? (_jsx("div", { className: "mb-1 flex items-center gap-3 px-4 py-3 shadow-[inset_0_-1px_0_var(--border-secondary)]", children: header })) : null, _jsx(Menu, { "aria-label": menuLabel, ...(byUser ? {} : { autoFocus: false }), className: "outline-none", children: items.map((item, i) => isDivider(item) ? (_jsx(Separator
+                // biome-ignore lint/suspicious/noArrayIndexKey: los separadores no tienen otra identidad
+                , { className: "my-1 h-px border-0 bg-[var(--border-secondary)]" }, `sep-${i}`)) : (_jsxs(MenuItem
+                // biome-ignore lint/suspicious/noArrayIndexKey: las etiquetas pueden ser nodos o repetirse
+                , { id: i, textValue: item.textValue ?? (typeof item.label === "string" ? item.label : undefined), onAction: () => item.onSelect?.(), className: cx("mx-1.5 my-px flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium outline-none data-focused:bg-primary_hover", item.danger
+                        ? "text-error-primary [&_svg]:text-fg-error-secondary"
+                        : "text-secondary data-focused:text-secondary_hover [&_svg]:text-fg-quaternary"), children: [item.icon ? _jsx(Icon, { name: item.icon, size: 16 }) : null, item.label, item.shortcut ? _jsx(Kbd, { className: "ml-auto", children: item.shortcut }) : null] }, i))) })] }));
+    return (_jsx("div", { className: cx("relative inline-block", className), children: _jsxs(MenuTrigger, { isOpen: open, onOpenChange: (next) => {
+                setByUser(next);
+                setOpen(next);
+            }, children: [_jsx(Pressable, { onPressStart: () => {
+                        closeOnPress.current = open && !byUser;
+                    }, onPress: () => {
+                        if (closeOnPress.current)
+                            setOpen(false);
+                        closeOnPress.current = false;
+                    }, children: trigger && isValidElement(trigger) ? trigger : (_jsx(Button, { hierarchy: "secondary", iconTrailing: "chevron-down", children: label ?? defaultStrings.options })) }), open && !byUser ? (_jsx("div", { className: cx("absolute top-[calc(100%+4px)] left-0 z-30", PANEL), children: panel })) : (_jsx(Popover, { placement: "bottom start", offset: 4, className: cx("z-30", PANEL), children: panel }))] }) }));
+}

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import type { IconName } from "./Icon.js";
+export interface EmptyStateProps {
+    /**
+     * Icono destacado (`FeaturedIcon` modern gris de 48px).
+     * @default "search-lg"
+     */
+    icon?: IconName;
+    /** Qué pasa: "Sin resultados", "Aún no hay gastos". */
+    title: ReactNode;
+    /** Por qué está vacío y qué hacer. Nada de "¡Ups!". */
+    description?: ReactNode;
+    /** La siguiente acción: normalmente un `Button` secundario y uno primario. */
+    actions?: ReactNode;
+    className?: string;
+}
+/** Lo que se ve cuando una lista, tabla o búsqueda no tiene contenido: qué pasa y qué hacer. */
+export declare function EmptyState({ icon, title, description, actions, className }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/EmptyState.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { FeaturedIcon } from "./FeaturedIcon.js";
+/** Lo que se ve cuando una lista, tabla o búsqueda no tiene contenido: qué pasa y qué hacer. */
+export function EmptyState({ icon = "search-lg", title, description, actions, className }) {
+    return (_jsxs("div", { className: cx("flex flex-col items-center gap-4 px-4 py-8 text-center font-body", className), children: [_jsx(FeaturedIcon, { icon: icon, color: "gray", size: "lg", variant: "modern" }), _jsxs("div", { children: [_jsx("h3", { className: "m-0 text-md font-semibold text-primary", children: title }), description ? (_jsx("p", { className: "mt-1 mb-0 max-w-[352px] text-sm text-tertiary", children: description })) : null] }), actions ? (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-3", children: actions })) : null] }));
+}

package/dist/components/FeaturedIcon.d.ts

@@ -0,0 +1,17 @@
+import type { StatusColor } from "./Badge.js";
+import { type IconName } from "./Icon.js";
+export type FeaturedIconSize = "sm" | "md" | "lg" | "xl";
+export type FeaturedIconVariant = "light" | "modern" | "outline";
+export interface FeaturedIconProps {
+    /** Por defecto, `check-circle`. */
+    icon?: IconName;
+    /** Tiene que coincidir con el significado del contenedor: un modal de borrado lleva `error`. */
+    color?: StatusColor;
+    /** Lado: `sm` 32 · `md` 40 · `lg` 48 · `xl` 56. */
+    size?: FeaturedIconSize;
+    /** `light` círculo tintado · `modern` cuadrado blanco esqueumórfico · `outline` anillos concéntricos. */
+    variant?: FeaturedIconVariant;
+    className?: string;
+}
+/** Icono dentro de una forma, para encabezar modales, alertas, estados vacíos y tarjetas. Es decorativo. */
+export declare function FeaturedIcon({ icon, color, size, variant, className, }: FeaturedIconProps): import("react").JSX.Element;

package/dist/components/FeaturedIcon.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { Icon } from "./Icon.js";
+const SIZE = { sm: "size-8", md: "size-10", lg: "size-12", xl: "size-14" };
+const ICON_SIZE = { sm: 16, md: 20, lg: 24, xl: 28 };
+const LIGHT = {
+    brand: "bg-brand-secondary text-featured-icon-light-fg-brand",
+    gray: "bg-tertiary text-featured-icon-light-fg-gray",
+    error: "bg-error-secondary text-featured-icon-light-fg-error",
+    warning: "bg-warning-secondary text-featured-icon-light-fg-warning",
+    success: "bg-success-secondary text-featured-icon-light-fg-success",
+};
+// Los anillos heredan el color del icono: interior al 30 %, exterior al 10 %
+const OUTLINE_RINGS = "relative before:absolute before:inset-1.5 before:rounded-full before:border-2 before:border-current before:opacity-30 before:content-[''] after:absolute after:inset-px after:rounded-full after:border-2 after:border-current after:opacity-10 after:content-['']";
+const OUTLINE = {
+    brand: "text-fg-brand-primary",
+    gray: "text-fg-tertiary",
+    error: "text-fg-error-primary",
+    warning: "text-fg-warning-primary",
+    success: "text-fg-success-primary",
+};
+const MODERN = "bg-primary text-fg-secondary shadow-[var(--shadow-xs-skeuomorphic),inset_0_0_0_1px_var(--border-primary)]";
+const MODERN_RADIUS = {
+    sm: "rounded-md",
+    md: "rounded-lg",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+};
+/** Icono dentro de una forma, para encabezar modales, alertas, estados vacíos y tarjetas. Es decorativo. */
+export function FeaturedIcon({ icon = "check-circle", color = "brand", size = "md", variant = "light", className, }) {
+    return (_jsx("span", { "aria-hidden": "true", className: cx("inline-flex shrink-0 items-center justify-center rounded-full", SIZE[size], variant === "light" && LIGHT[color], variant === "outline" && [OUTLINE_RINGS, OUTLINE[color]], variant === "modern" && [MODERN, MODERN_RADIUS[size]], className), children: _jsx(Icon, { name: icon, size: ICON_SIZE[size] }) }));
+}

package/dist/components/FileUpload.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+export interface UploadFile {
+    name: string;
+    /** Tamaño en bytes. */
+    size?: number;
+    /** De 0 a 100. */
+    progress?: number;
+    status?: "complete" | "error";
+    /** Mensaje si `status` es `error`. */
+    error?: string;
+}
+export interface FileUploadLabels {
+    upload: string;
+    orDrag: string;
+    complete: string;
+    uploading: string;
+    failed: string;
+    remove: (name: string) => string;
+    progress: (name: string) => string;
+}
+export interface FileUploadProps {
+    /** Formatos aceptados, como en `<input type="file">`: `.csv,.md`, `image/*`. */
+    accept?: string;
+    multiple?: boolean;
+    /** Formatos y tamaño máximo. Dilo siempre antes de que el usuario lo intente. */
+    hint?: ReactNode;
+    /** Archivos elegidos con clic o soltados. El componente no sube nada. */
+    onFiles?: (files: File[]) => void;
+    /** Archivos en curso, con el progreso que gestionas tú. */
+    files?: UploadFile[];
+    onRemove?: (index: number) => void;
+    disabled?: boolean;
+    /** Textos sustituibles. */
+    labels?: Partial<FileUploadLabels>;
+    id?: string;
+    className?: string;
+}
+/** Zona para subir archivos con clic o arrastrando, y lista de archivos con su progreso. */
+export declare function FileUpload({ accept, multiple, hint, onFiles, files, onRemove, disabled, labels, id: givenId, className, }: FileUploadProps): import("react").JSX.Element;

package/dist/components/FileUpload.js

@@ -0,0 +1,50 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { cx } from "../internal/cx.js";
+import { formatBytes } from "../internal/format.js";
+import { defaultStrings } from "../internal/strings.js";
+import { FeaturedIcon } from "./FeaturedIcon.js";
+import { Icon } from "./Icon.js";
+import { ProgressBar } from "./ProgressBar.js";
+const DEFAULT_LABELS = {
+    upload: defaultStrings.upload,
+    orDrag: defaultStrings.orDrag,
+    complete: defaultStrings.uploadComplete,
+    uploading: defaultStrings.uploading,
+    failed: defaultStrings.uploadFailed,
+    remove: defaultStrings.removeFile,
+    progress: defaultStrings.uploadProgress,
+};
+/** Zona para subir archivos con clic o arrastrando, y lista de archivos con su progreso. */
+export function FileUpload({ accept, multiple, hint, onFiles, files = [], onRemove, disabled, labels, id: givenId, className, }) {
+    const autoId = useId();
+    const id = givenId ?? autoId;
+    const t = { ...DEFAULT_LABELS, ...labels };
+    const [dragging, setDragging] = useState(false);
+    const take = (list) => {
+        if (!disabled && onFiles && list?.length)
+            onFiles(Array.from(list));
+    };
+    const onDrop = (e) => {
+        e.preventDefault();
+        setDragging(false);
+        take(e.dataTransfer.files);
+    };
+    return (_jsxs("div", { className: cx("flex flex-col gap-4 font-body", className), children: [_jsxs("label", { htmlFor: id, onDragOver: (e) => {
+                    e.preventDefault();
+                    if (!disabled)
+                        setDragging(true);
+                }, onDragLeave: () => setDragging(false), onDrop: onDrop, className: cx("flex cursor-pointer flex-col items-center gap-3 rounded-xl bg-primary px-6 py-4 text-center shadow-[inset_0_0_0_1px_var(--border-secondary)] focus-within:shadow-[inset_0_0_0_2px_var(--border-brand),var(--focus-ring-shadow)]", disabled
+                    ? "cursor-not-allowed opacity-50"
+                    : "hover:shadow-[inset_0_0_0_2px_var(--border-brand)]", dragging && "shadow-[inset_0_0_0_2px_var(--border-brand)]"), "data-dragging": dragging || undefined, children: [_jsx("input", { id: id, type: "file", accept: accept, multiple: multiple, disabled: disabled, onChange: (e) => {
+                            take(e.target.files);
+                            e.target.value = "";
+                        }, className: "sr-only" }), _jsx(FeaturedIcon, { icon: "upload-cloud-02", variant: "modern", size: "md", color: "gray" }), _jsxs("span", { className: "text-sm text-tertiary", children: [_jsx("span", { className: "font-semibold text-brand-secondary", children: t.upload }), " ", t.orDrag] }), hint ? _jsx("span", { className: "-mt-2 text-xs text-tertiary", children: hint }) : null] }), files.length ? (_jsx("ul", { className: "m-0 flex list-none flex-col gap-3 p-0", children: files.map((f, i) => {
+                    const failed = f.status === "error";
+                    const done = !failed && (f.status === "complete" || (f.progress ?? 0) >= 100);
+                    return (_jsxs("li", { className: cx("relative flex gap-3 rounded-xl bg-primary p-4", failed
+                            ? "shadow-[inset_0_0_0_2px_var(--border-error_subtle)]"
+                            : "shadow-[inset_0_0_0_1px_var(--border-secondary)]"), children: [_jsx(FeaturedIcon, { icon: failed ? "alert-circle" : "file-04", variant: "modern", size: "md", color: failed ? "error" : "gray" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1 pr-8", children: [_jsx("div", { className: "truncate text-sm font-medium text-secondary", children: f.name }), _jsx("div", { className: "flex items-center gap-1 text-sm text-tertiary [&>span]:inline-flex [&>span]:items-center [&>span]:gap-1", children: failed ? (_jsx("span", { className: "text-error-primary", children: f.error || t.failed })) : (_jsxs(_Fragment, { children: [formatBytes(f.size ?? 0), _jsx("span", { "aria-hidden": "true", children: " | " }), done ? (_jsxs("span", { className: "font-medium text-success-primary", children: [_jsx(Icon, { name: "check-circle", size: 14 }), " ", t.complete] })) : (_jsxs("span", { children: [_jsx(Icon, { name: "loading-02", size: 14, spin: true }), " ", t.uploading] }))] })) }), !done && !failed ? (_jsx(ProgressBar, { value: f.progress ?? 0, "aria-label": t.progress(f.name), className: "mt-1" })) : null] }), _jsx("button", { type: "button", onClick: () => onRemove?.(i), "aria-label": t.remove(f.name), className: "absolute top-3 right-3 inline-flex cursor-pointer rounded-md border-0 bg-transparent p-1.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: "trash-01", size: 16 }) })] }, i));
+                }) })) : null] }));
+}

package/dist/components/FilterBar.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import { type ButtonGroupItem } from "./ButtonGroup.js";
+export interface FilterBarLabels {
+    /** Nombre del grupo de vistas rápidas. @default "Vista" */
+    segments: string;
+    /** Nombre del buscador (el placeholder es `searchPlaceholder`). @default "Buscar" */
+    search: string;
+    /** @default "Filtros" */
+    filters: string;
+    /** @default "Limpiar todo" */
+    clear: string;
+}
+export interface FilterBarProps {
+    /** Vistas rápidas, en un `ButtonGroup`. */
+    segments?: ButtonGroupItem[];
+    /** Vista elegida (controlado). */
+    segmentValue?: string;
+    /** Vista elegida al principio (no controlado). */
+    defaultSegment?: string;
+    onSegment?: (value: string) => void;
+    /** Muestra el buscador (también aparece si pasas `onSearch`). */
+    search?: boolean;
+    /** Recibe el texto del buscador en cada cambio. */
+    onSearch?: (query: string) => void;
+    /**
+     * Placeholder del buscador.
+     * @default "Buscar"
+     */
+    searchPlaceholder?: string;
+    /** Abre los filtros avanzados, en un `Slideout` (no en un modal). */
+    onOpenFilters?: () => void;
+    /** Filtros aplicados: se ven siempre, como `Tag` con su X. El botón Filtros muestra cuántos hay. */
+    activeFilters?: ({
+        label: string;
+    } | string)[];
+    onRemoveFilter?: (index: number) => void;
+    /** "Limpiar todo", junto a los filtros aplicados. */
+    onClear?: () => void;
+    /** Controles extra antes del botón Filtros, como un `DatePicker`. */
+    extra?: ReactNode;
+    /** Textos que trae el componente, para sustituirlos. */
+    labels?: Partial<FilterBarLabels>;
+    className?: string;
+}
+/** Barra encima de una tabla o lista: vista rápida, búsqueda, botón de filtros y filtros activos. */
+export declare function FilterBar({ segments, segmentValue, defaultSegment, onSegment, search, onSearch, searchPlaceholder, onOpenFilters, activeFilters, onRemoveFilter, onClear, extra, labels, className, }: FilterBarProps): import("react").JSX.Element;

package/dist/components/FilterBar.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { defaultStrings } from "../internal/strings.js";
+import { Button } from "./Button.js";
+import { ButtonGroup } from "./ButtonGroup.js";
+import { Input } from "./Input.js";
+import { Tag } from "./Tag.js";
+/** Barra encima de una tabla o lista: vista rápida, búsqueda, botón de filtros y filtros activos. */
+export function FilterBar({ segments, segmentValue, defaultSegment, onSegment, search, onSearch, searchPlaceholder, onOpenFilters, activeFilters = [], onRemoveFilter, onClear, extra, labels, className, }) {
+    const t = {
+        segments: defaultStrings.view,
+        search: defaultStrings.search,
+        filters: defaultStrings.filters,
+        clear: defaultStrings.clearAll,
+        ...labels,
+    };
+    const count = activeFilters.length;
+    return (_jsxs("div", { className: cx("flex flex-col gap-3 font-body", className), children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [segments ? (_jsx(ButtonGroup, { items: segments, value: segmentValue, defaultValue: defaultSegment, onChange: onSegment, "aria-label": t.segments })) : null, _jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-3", children: [search || onSearch ? (_jsx("div", { className: "w-[296px] max-w-full", children: _jsx(Input, { size: "sm", icon: "search-lg", placeholder: searchPlaceholder ?? t.search, "aria-label": t.search, onChange: onSearch ? (e) => onSearch(e.target.value) : undefined }) })) : null, extra, _jsxs(Button, { hierarchy: "secondary", size: "sm", iconLeading: "filter-lines", onClick: onOpenFilters, children: [t.filters, count ? " " : null, count ? (_jsx("span", { className: "inline-flex min-w-5 justify-center rounded-full bg-utility-brand-50 px-1.5 text-xs font-medium text-utility-brand-700 inset-ring inset-ring-utility-brand-200", children: count })) : null] })] })] }), count ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [activeFilters.map((f, i) => {
+                        const text = typeof f === "string" ? f : f.label;
+                        return (_jsx(Tag
+                        // biome-ignore lint/suspicious/noArrayIndexKey: el índice es lo que recibe onRemoveFilter
+                        , { size: "md", onRemove: onRemoveFilter ? () => onRemoveFilter(i) : undefined, children: text }, i));
+                    }), _jsx(Button, { hierarchy: "link-gray", size: "sm", onClick: onClear, children: t.clear })] })) : null] }));
+}

package/dist/components/Icon.d.ts

@@ -0,0 +1,5 @@
+import { Icon, type IconName, type IconProps } from "@jotis-me/icons";
+import type { ReactNode } from "react";
+export { Icon, type IconName, type IconProps };
+/** Pinta un icono por nombre o deja pasar un nodo ya hecho (para props como `iconLeading`). */
+export declare function iconSlot(icon: IconName | ReactNode | undefined, size: number): ReactNode;

package/dist/components/Icon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "@jotis-me/icons";
+export { Icon };
+/** Pinta un icono por nombre o deja pasar un nodo ya hecho (para props como `iconLeading`). */
+export function iconSlot(icon, size) {
+    if (typeof icon === "string")
+        return _jsx(Icon, { name: icon, size: size });
+    return icon ?? null;
+}

package/dist/components/InlineCTA.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { IconName } from "./Icon.js";
+export interface InlineCTAProps {
+    /** Qué se propone, como "Conecta tu banco" (`<h3>`). */
+    title: ReactNode;
+    /** Qué gana quien lo haga. */
+    description?: ReactNode;
+    /** Los botones: siempre uno para descartar ("Ahora no") y la acción, la última. */
+    actions?: ReactNode;
+    /** Icono destacado (`FeaturedIcon` modern gris de 48px) sobre el título. */
+    icon?: IconName;
+    /** Imagen a la izquierda (240px de ancho): una URL o un nodo. */
+    image?: string | ReactNode;
+    /** Texto alternativo de la imagen cuando es una URL. Sin él, la imagen es decorativa. */
+    imageAlt?: string;
+    className?: string;
+}
+/** Tarjeta de invitación dentro de una página para animar a una acción secundaria. Una por pantalla como mucho. */
+export declare function InlineCTA({ title, description, actions, icon, image, imageAlt, className }: InlineCTAProps): import("react").JSX.Element;

package/dist/components/InlineCTA.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../internal/cx.js";
+import { FeaturedIcon } from "./FeaturedIcon.js";
+/** Tarjeta de invitación dentro de una página para animar a una acción secundaria. Una por pantalla como mucho. */
+export function InlineCTA({ title, description, actions, icon, image, imageAlt, className }) {
+    return (_jsxs("div", { className: cx("flex overflow-hidden rounded-xl bg-primary font-body shadow-[var(--shadow-xs),inset_0_0_0_1px_var(--border-secondary)]", className), children: [image ? (_jsx("div", { className: "shrink-0 grow-0 basis-60 bg-tertiary", children: typeof image === "string" ? (_jsx("img", { src: image, alt: imageAlt ?? "", className: "block size-full object-cover" })) : (image) })) : null, _jsxs("div", { className: "flex flex-1 flex-col gap-5 p-6", children: [icon ? _jsx(FeaturedIcon, { icon: icon, variant: "modern", size: "lg", color: "gray" }) : null, _jsxs("div", { children: [_jsx("h3", { className: "m-0 text-lg font-semibold text-primary", children: title }), description ? _jsx("p", { className: "mt-0.5 mb-0 text-sm text-tertiary", children: description }) : null] }), actions ? _jsx("div", { className: "flex flex-wrap items-center gap-3", children: actions }) : null] })] }));
+}

package/dist/components/Input.d.ts

@@ -0,0 +1,16 @@
+import { type InputHTMLAttributes } from "react";
+import { type FieldProps, type FieldSize } from "../internal/field.js";
+import { type IconName } from "./Icon.js";
+export interface InputProps extends FieldProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * Alto: `sm` 36 · `md` 40 · `lg` 44. En `md` y `lg` el valor va a 16px para que iOS no haga zoom.
+     * @default "md"
+     */
+    size?: FieldSize;
+    /** Icono inicial, 20px en `fg-quaternary`. */
+    icon?: IconName;
+    /** Icono final, 16px. Con error se sustituye por el de alerta. */
+    trailing?: IconName;
+}
+/** Campo de texto de una línea con etiqueta, pista y error, en tres alturas. */
+export declare function Input({ label, required, hint, error, size, icon, trailing, id: givenId, className, disabled, ...rest }: InputProps): import("react").JSX.Element;