danielgm-ui 0.1.0

package/dist/custom-select.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Selector de selección única. Radix aporta teclado, búsqueda por letras y gestión de foco. */
+import { ChevronIcon, CheckIcon } from './internal/icons.js';
+import { forwardRef, useId } from 'react';
+import * as Primitive from '@radix-ui/react-select';
+import { cx, hasContent } from './utils.js';
+import { ScrollHints } from './internal/scroll-hints.js';
+import { useFieldOpen } from './internal/field-open.js';
+import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+/** Geometría centrada y tamaño fijo: evita que una fuente cambie la forma o el eje del icono. */
+function Chevron() {
+    return _jsx(ChevronIcon, { className: "dgm-chevron-svg" });
+}
+/** Desplegable animado renderizado en un portal para evitar recortes por overflow. */
+export const CustomSelect = forwardRef(function CustomSelect({ label, options, value, defaultValue, onValueChange, placeholder = 'Select…', description, error, disabled, required, name, id, className, wrapperClassName, }, ref) {
+    const [open, setOpen] = useFieldOpen(disabled);
+    const { depth, style: layerStyle } = useOverlayLayer();
+    const generatedId = useId();
+    const controlId = id ?? `dgm-custom-${generatedId}`;
+    const describedBy = cx(hasContent(description) && `${controlId}-description`, hasContent(error) && `${controlId}-error`) || undefined;
+    return (_jsxs("div", { className: cx('dgm-field', wrapperClassName), children: [_jsxs("label", { className: "dgm-label", id: `${controlId}-label`, htmlFor: controlId, children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] }), _jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Primitive.Root, { value: value, defaultValue: defaultValue, onValueChange: (next) => {
+                        if (!disabled)
+                            onValueChange?.(next);
+                    }, open: open, onOpenChange: setOpen, disabled: disabled, required: required, name: name, children: [_jsxs(Primitive.Trigger, { ref: ref, id: controlId, "aria-labelledby": `${controlId}-label`, "aria-describedby": describedBy, "aria-invalid": hasContent(error) || undefined, className: cx('dgm-input', 'dgm-custom-trigger', className), children: [_jsx(Primitive.Value, { className: "dgm-custom-value", placeholder: placeholder }), _jsx(Primitive.Icon, { className: "dgm-custom-chevron", "aria-hidden": "true", children: _jsx(Chevron, {}) })] }), _jsx(Primitive.Portal, { children: _jsx(Primitive.Content, { position: "popper", sideOffset: 6, collisionPadding: 12, className: "dgm-custom-menu", style: layerStyle, children: _jsx(ScrollHints, { className: "dgm-custom-scroll-region", children: _jsx(Primitive.Viewport, { className: "dgm-custom-viewport", children: options.map((option) => (_jsxs(Primitive.Item, { value: option.value, disabled: disabled || option.disabled, textValue: option.label, className: "dgm-custom-option", children: [_jsx(Primitive.ItemText, { children: _jsxs("span", { className: "dgm-custom-value", children: [option.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: option.icon })), option.label] }) }), _jsx(Primitive.ItemIndicator, { className: "dgm-custom-check", "aria-hidden": "true", children: _jsx(CheckIcon, {}) })] }, option.value))) }) }) }) })] }) }), hasContent(description) && (_jsx("span", { className: "dgm-description", id: `${controlId}-description`, children: description })), hasContent(error) && (_jsx("span", { className: "dgm-error", id: `${controlId}-error`, children: error }))] }));
+});

package/dist/data-table.d.ts

@@ -0,0 +1,53 @@
+import { type CSSProperties, type ReactElement, type ReactNode } from 'react';
+export interface DataColumn<T extends object> {
+    /** Identificador único y estable. */
+    id: string;
+    header: string;
+    /** Valor primitivo para ordenar y buscar; cell solo afecta a la presentación. */
+    accessor: (row: T) => string | number | null | undefined;
+    cell?: (row: T) => ReactNode;
+    /** @defaultValue true */
+    sortable?: boolean;
+    /** Participa en el buscador global. @defaultValue true */
+    searchable?: boolean;
+    align?: 'start' | 'end';
+    /** Ancho estable CSS (px si es número); las columnas sin ancho reparten el espacio restante. */
+    width?: CSSProperties['width'];
+}
+export interface DataTableSort {
+    id: string;
+    desc: boolean;
+}
+export interface DataTableProps<T extends object> {
+    data: readonly T[];
+    columns: readonly DataColumn<T>[];
+    /** Identidad estable independiente de la posición al ordenar o paginar. */
+    getRowId: (row: T) => string;
+    /** Caption visible y nombre de la tabla. */
+    caption: string;
+    /** Orden controlado. Usa [] para quitarlo. */
+    sorting?: DataTableSort[];
+    defaultSorting?: DataTableSort[];
+    onSortingChange?: (sorting: DataTableSort[]) => void;
+    /** Buscador de todas las columnas habilitadas. @defaultValue true */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Registros por página. @defaultValue 10 */
+    pageSize?: number;
+    /** Página controlada, comenzando en 1. */
+    page?: number;
+    onPageChange?: (page: number) => void;
+    /** Habilita selección por fila y de la página visible. @defaultValue false */
+    selectable?: boolean;
+    /** IDs seleccionados, opcionalmente controlados. */
+    selection?: readonly string[];
+    defaultSelection?: readonly string[];
+    onSelectionChange?: (ids: string[]) => void;
+    /** Muestra marcadores y desactiva operaciones mientras llegan los datos. */
+    loading?: boolean;
+    emptyMessage?: string;
+    locale?: 'es' | 'en';
+    className?: string;
+}
+/** Paginación y selección conservan IDs reales. El filtrado devuelve a la primera página. */
+export declare function DataTable<T extends object>({ data, columns, getRowId, caption, sorting, defaultSorting, onSortingChange, searchable, searchPlaceholder, pageSize, page, onPageChange, selectable, selection, defaultSelection, onSelectionChange, loading, emptyMessage, locale, className, }: DataTableProps<T>): ReactElement;

package/dist/data-table.js

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Tabla HTML con operaciones locales. TanStack calcula filas filtradas y ordenadas sin mutar data. */
+import { ArrowUpIcon, ArrowDownIcon, SortIcon } from './internal/icons.js';
+import { useEffect, useMemo, useRef, useState, } from 'react';
+import { useTable, tableFeatures, rowSortingFeature, columnFilteringFeature, globalFilteringFeature, createSortedRowModel, createFilteredRowModel, filterFn_includesString, functionalUpdate, } from '@tanstack/react-table';
+import { Button } from './button.js';
+import { Checkbox } from './toggles.js';
+import { Input } from './fields.js';
+import { Pagination } from './pagination.js';
+import { Skeleton } from './skeleton.js';
+import { useControllable } from './internal/state.js';
+import { cx } from './utils.js';
+const features = tableFeatures({
+    rowSortingFeature,
+    columnFilteringFeature,
+    globalFilteringFeature,
+    sortedRowModel: createSortedRowModel(),
+    filteredRowModel: createFilteredRowModel(),
+    filterFns: { includesString: filterFn_includesString },
+});
+/** Paginación y selección conservan IDs reales. El filtrado devuelve a la primera página. */
+export function DataTable({ data, columns, getRowId, caption, sorting, defaultSorting = [], onSortingChange, searchable = true, searchPlaceholder, pageSize = 10, page, onPageChange, selectable = false, selection, defaultSelection = [], onSelectionChange, loading = false, emptyMessage, locale = 'en', className, }) {
+    const [sort, changeSort] = useControllable(sorting, defaultSorting, onSortingChange);
+    const [currentPage, changePage] = useControllable(page, 1, onPageChange);
+    const [selected, changeSelection] = useControllable(selection, defaultSelection, onSelectionChange ? (next) => onSelectionChange([...next]) : undefined);
+    const [query, setQuery] = useState('');
+    // Mantiene el contrato público de arrays y evita recorrer la selección por fila.
+    const selectedIds = useMemo(() => new Set(selected), [selected]);
+    const selectPage = useRef(null);
+    const es = locale === 'es';
+    const collator = useMemo(() => new Intl.Collator(locale, { numeric: true, sensitivity: 'base' }), [locale]);
+    const definitions = useMemo(() => columns.map((column) => ({
+        id: column.id,
+        header: column.header,
+        accessorFn: column.accessor,
+        enableSorting: column.sortable !== false,
+        enableGlobalFilter: column.searchable !== false,
+        sortFn: (a, b, id) => {
+            const left = a.getValue(id);
+            const right = b.getValue(id);
+            return typeof left === 'number' && typeof right === 'number'
+                ? left - right
+                : collator.compare(String(left ?? ''), String(right ?? ''));
+        },
+    })), [columns, collator]);
+    const rowsData = useMemo(() => [...data], [data]);
+    const table = useTable({
+        features,
+        data: rowsData,
+        columns: definitions,
+        getRowId,
+        state: { sorting: sort, globalFilter: query },
+        onSortingChange: (updater) => {
+            changeSort(functionalUpdate(updater, sort));
+            changePage(1);
+        },
+        globalFilterFn: 'includesString',
+        enableMultiSort: false,
+    });
+    const filtered = table.getRowModel().rows;
+    const size = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 10;
+    const pageCount = Math.ceil(filtered.length / size);
+    const current = Math.max(1, Math.min(pageCount || 1, Number.isFinite(currentPage) ? currentPage : 1));
+    const visible = filtered.slice((current - 1) * size, current * size);
+    const visibleIds = visible.map((row) => row.id);
+    const allChecked = selectable && visibleIds.length > 0 && visibleIds.every((id) => selectedIds.has(id));
+    const someChecked = selectable && visibleIds.some((id) => selectedIds.has(id));
+    useEffect(() => {
+        if (selectPage.current)
+            selectPage.current.indeterminate = someChecked && !allChecked;
+    }, [someChecked, allChecked]);
+    // Si data se reduce, mostramos una página válida sin enviar callbacks durante el render.
+    useEffect(() => {
+        if (currentPage !== current)
+            changePage(current);
+    }, [current, currentPage]);
+    const selectedCount = useMemo(() => selectable
+        ? data.reduce((count, row) => count + Number(selectedIds.has(getRowId(row))), 0)
+        : 0, [data, getRowId, selectable, selectedIds]);
+    return (_jsxs("div", { className: cx('dgm-data-table', className), children: [searchable && (_jsx(Input, { label: es ? 'Buscar en la tabla' : 'Search table', placeholder: searchPlaceholder, value: query, disabled: loading, onChange: (event) => {
+                    setQuery(event.target.value);
+                    changePage(1);
+                } })), _jsx("div", { className: "dgm-table-scroll", role: "region", "aria-label": caption, tabIndex: 0, "aria-busy": loading, children: _jsxs("table", { style: { minWidth: `${columns.length * 10 + (selectable ? 3.5 : 0)}rem` }, children: [_jsx("caption", { children: caption }), _jsxs("colgroup", { children: [selectable && _jsx("col", { style: { width: '3.5rem' } }), columns.map((column) => (_jsx("col", { style: { width: column.width } }, column.id)))] }), _jsx("thead", { children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", children: _jsx(Checkbox, { ref: selectPage, label: _jsx("span", { className: "dgm-visually-hidden", children: es ? 'Seleccionar página' : 'Select page' }), checked: allChecked, "aria-checked": someChecked && !allChecked ? 'mixed' : allChecked, disabled: loading || visibleIds.length === 0, onChange: (event) => {
+                                                const pageIds = new Set(visibleIds);
+                                                changeSelection(event.target.checked
+                                                    ? [...new Set([...selected, ...visibleIds])]
+                                                    : selected.filter((id) => !pageIds.has(id)));
+                                            } }) })), columns.map((column) => {
+                                        const instance = table.getColumn(column.id);
+                                        const direction = instance.getIsSorted();
+                                        return (_jsx("th", { scope: "col", style: { textAlign: column.align ?? 'start' }, "aria-sort": direction === 'asc'
+                                                ? 'ascending'
+                                                : direction === 'desc'
+                                                    ? 'descending'
+                                                    : undefined, children: column.sortable !== false ? (_jsxs(Button, { variant: "ghost", size: "sm", disabled: loading, onClick: instance.getToggleSortingHandler(), children: [column.header, _jsx("span", { "aria-hidden": "true", children: direction === 'asc' ? (_jsx(ArrowUpIcon, {})) : direction === 'desc' ? (_jsx(ArrowDownIcon, {})) : (_jsx(SortIcon, {})) })] })) : (column.header) }, column.id));
+                                    })] }) }), _jsx("tbody", { children: loading ? (Array.from({ length: Math.min(size, 5) }, (_, index) => (_jsx("tr", { children: _jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), children: _jsx(Skeleton, { height: "1.5rem" }) }) }, index)))) : visible.length ? (visible.map((row) => (_jsxs("tr", { "data-selected": selectedIds.has(row.id) || undefined, children: [selectable && (_jsx("td", { children: _jsx(Checkbox, { checked: selectedIds.has(row.id), label: _jsxs("span", { className: "dgm-visually-hidden", children: [es ? 'Seleccionar fila' : 'Select row', " ", row.id] }), onChange: (event) => changeSelection(event.target.checked
+                                                ? [...new Set([...selected, row.id])]
+                                                : selected.filter((id) => id !== row.id)) }) })), columns.map((column) => (_jsx("td", { style: { textAlign: column.align ?? 'start' }, children: column.cell ? column.cell(row.original) : column.accessor(row.original) }, column.id)))] }, row.id)))) : (_jsx("tr", { children: _jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), className: "dgm-table-empty", children: emptyMessage ?? (es ? 'No hay resultados.' : 'No results.') }) })) })] }) }), _jsxs("div", { className: "dgm-table-footer", children: [_jsx("p", { role: "status", children: loading
+                            ? es
+                                ? 'Cargando…'
+                                : 'Loading…'
+                            : `${filtered.length} ${es ? 'resultados' : 'results'}${selectable ? ` · ${selectedCount} ${es ? 'seleccionados' : 'selected'}` : ''}` }), _jsx(Pagination, { page: current, pageCount: pageCount, onPageChange: changePage, disabled: loading, locale: locale })] })] }));
+}

package/dist/date-picker.d.ts

@@ -0,0 +1,43 @@
+import { type ReactElement, type ReactNode } from 'react';
+export interface DatePickerBaseProps {
+    label: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    /** Nombre de formulario. En rangos genera name.from y name.to. */
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Límites inclusivos en formato YYYY-MM-DD. */
+    min?: string;
+    max?: string;
+    /** Días no disponibles, también en YYYY-MM-DD. */
+    disabledDates?: readonly string[];
+    /** Mes inicial si no hay selección (YYYY-MM-DD). */
+    defaultMonth?: string;
+    /** Traduce fechas, meses, días y nombres accesibles. @defaultValue 'en' */
+    locale?: 'es' | 'en';
+    placeholder?: string;
+    /** Muestra una acción para borrar la selección. @defaultValue true */
+    clearable?: boolean;
+    id?: string;
+    className?: string;
+    wrapperClassName?: string;
+}
+export interface DatePickerProps extends DatePickerBaseProps {
+    /** Fecha controlada; null significa sin selección. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+}
+export interface DateRangeValue {
+    from: string;
+    to?: string;
+}
+export interface DateRangePickerProps extends DatePickerBaseProps {
+    /** Intervalo controlado. to queda ausente mientras se elige el segundo extremo. */
+    value?: DateRangeValue | null;
+    defaultValue?: DateRangeValue | null;
+    onValueChange?: (value: DateRangeValue | null) => void;
+}
+export declare function DatePicker({ value, defaultValue, onValueChange, ...props }: DatePickerProps): ReactElement;
+export declare function DateRangePicker({ value, defaultValue, onValueChange, ...props }: DateRangePickerProps): ReactElement;

package/dist/date-picker.js

@@ -0,0 +1,142 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Calendarios de fecha civil: la API usa YYYY-MM-DD, sin convertir a UTC ni añadir horas. */
+import { CalendarIcon, ChevronIcon, ChevronUpIcon, ChevronLeftIcon, ChevronRightIcon, } from './internal/icons.js';
+import { useId, useRef, useState } from 'react';
+import * as Popover from '@radix-ui/react-popover';
+import { DayPicker } from 'react-day-picker';
+import { es as spanish, enUS } from 'react-day-picker/locale';
+import { format } from 'date-fns';
+import { useControllable } from './internal/state.js';
+import { restoreFocus } from './internal/focus.js';
+import { preventTriggerLabelDismiss } from './internal/trigger-label.js';
+import { useFieldOpen } from './internal/field-open.js';
+import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { cx, hasContent } from './utils.js';
+/** Conserva la orientación de DayPicker y unifica sus controles con el resto de iconos. */
+function CalendarChevron({ orientation = 'down', size = 18, className, style, }) {
+    const Icon = orientation === 'left'
+        ? ChevronLeftIcon
+        : orientation === 'right'
+            ? ChevronRightIcon
+            : orientation === 'up'
+                ? ChevronUpIcon
+                : ChevronIcon;
+    return _jsx(Icon, { size: size, className: className, style: style });
+}
+/** Valida la fecha antes de construirla; evita normalizar 31 de febrero a otro mes. */
+function parseDay(value) {
+    if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value))
+        return;
+    const [year, month, day] = value.split('-').map(Number);
+    const date = new Date(0);
+    date.setFullYear(year, month - 1, day);
+    date.setHours(12, 0, 0, 0);
+    return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day
+        ? date
+        : undefined;
+}
+function toDay(date) {
+    return format(date, 'yyyy-MM-dd');
+}
+/** Contenedor común: etiqueta, valor de formulario, portal y mensajes. */
+function CalendarField({ props, from, to, range, onSelect, }) {
+    const { label, description, error, name, required, disabled, min, max, disabledDates = [], defaultMonth, locale = 'en', placeholder, clearable = true, id, className, wrapperClassName, } = props;
+    const [open, setOpen] = useFieldOpen(disabled);
+    const { depth, style: layerStyle } = useOverlayLayer();
+    const interactedOutside = useRef(false);
+    const [invalid, setInvalid] = useState(false);
+    const trigger = useRef(null);
+    const generatedId = useId();
+    const controlId = id ?? `dgm-date-${generatedId}`;
+    const isSpanish = locale === 'es';
+    const dateLocale = isSpanish ? spanish : enUS;
+    const first = parseDay(from);
+    const last = parseDay(to);
+    const minimum = parseDay(min);
+    const maximum = parseDay(max);
+    const blocked = [
+        ...(minimum ? [{ before: minimum }] : []),
+        ...(maximum ? [{ after: maximum }] : []),
+        ...disabledDates.flatMap((value) => {
+            const day = parseDay(value);
+            return day ? [day] : [];
+        }),
+    ];
+    const valid = (date) => Boolean(date &&
+        (!minimum || date >= minimum) &&
+        (!maximum || date <= maximum) &&
+        !disabledDates.includes(toDay(date)));
+    const complete = valid(first) &&
+        (!range ||
+            (valid(last) &&
+                last >= first &&
+                !disabledDates.some((value) => value >= from && value <= to)));
+    const display = first
+        ? format(first, 'PP', { locale: dateLocale }) +
+            (range
+                ? ' — ' + (last ? format(last, 'PP', { locale: dateLocale }) : isSpanish ? 'Fin' : 'End')
+                : '')
+        : (placeholder ?? (isSpanish ? 'Seleccionar fecha…' : 'Select date…'));
+    const message = error ||
+        (invalid
+            ? isSpanish
+                ? 'Selecciona una fecha o intervalo disponible.'
+                : 'Select an available date or range.'
+            : undefined);
+    const describedBy = cx(hasContent(description) && `${controlId}-description`, hasContent(message) && `${controlId}-error`) || undefined;
+    function choose(nextFrom, nextTo) {
+        if (disabled)
+            return;
+        onSelect(nextFrom, nextTo);
+        setInvalid(false);
+        if (!range || nextTo)
+            setOpen(false);
+    }
+    const shared = {
+        components: { Chevron: CalendarChevron },
+        locale: dateLocale,
+        autoFocus: true,
+        showOutsideDays: true,
+        defaultMonth: first ?? parseDay(defaultMonth) ?? minimum,
+        disabled: disabled || blocked,
+        startMonth: minimum,
+        endMonth: maximum,
+        className: 'dgm-calendar',
+    };
+    return (_jsxs("div", { className: cx('dgm-field', wrapperClassName), children: [_jsxs("label", { className: "dgm-label", htmlFor: controlId, id: `${controlId}-label`, children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] }), _jsx("input", { className: "dgm-form-value", "aria-hidden": "true", tabIndex: -1, name: range && name ? `${name}.from` : name, value: valid(first) ? (from ?? '') : '', required: required || Boolean(from), disabled: disabled, onChange: () => { }, onInvalid: (event) => {
+                    event.preventDefault();
+                    setInvalid(true);
+                    trigger.current?.focus({ preventScroll: true });
+                } }), range && (_jsx("input", { className: "dgm-form-value", "aria-hidden": "true", tabIndex: -1, name: name ? `${name}.to` : undefined, value: complete ? (to ?? '') : '', required: required || Boolean(from || to), disabled: disabled, onChange: () => { }, onInvalid: (event) => {
+                    event.preventDefault();
+                    setInvalid(true);
+                    trigger.current?.focus({ preventScroll: true });
+                } })), _jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Popover.Trigger, { ref: trigger, id: controlId, disabled: disabled, className: cx('dgm-input', 'dgm-date-trigger', className), "aria-labelledby": `${controlId}-label ${controlId}-value`, "aria-describedby": describedBy, "aria-invalid": hasContent(message) || undefined, children: [_jsx("span", { id: `${controlId}-value`, children: display }), _jsx(CalendarIcon, {})] }), _jsx(Popover.Portal, { children: _jsx(Popover.Content, { className: "dgm-calendar-panel", style: layerStyle, sideOffset: 6, collisionPadding: 12, "aria-labelledby": `${controlId}-label`, onInteractOutside: (event) => {
+                                    if (preventTriggerLabelDismiss(event, trigger.current))
+                                        return;
+                                    interactedOutside.current = true;
+                                }, onCloseAutoFocus: (event) => {
+                                    event.preventDefault();
+                                    if (!interactedOutside.current)
+                                        restoreFocus(trigger.current);
+                                    interactedOutside.current = false;
+                                }, children: range ? (_jsx(DayPicker, { ...shared, mode: "range", excludeDisabled: true, selected: first ? { from: first, to: last } : undefined, onSelect: (selection, day) => {
+                                        // El primer clic inicia un intervalo; el segundo lo completa, incluso en el mismo día.
+                                        if (!first || last)
+                                            choose(toDay(day));
+                                        else
+                                            choose(selection?.from ? toDay(selection.from) : undefined, selection?.to ? toDay(selection.to) : undefined);
+                                    } })) : (_jsx(DayPicker, { ...shared, mode: "single", selected: first, onSelect: (selection) => choose(selection ? toDay(selection) : undefined) })) }) })] }) }), clearable && first && (_jsx("button", { type: "button", className: "dgm-text-action", disabled: disabled, onClick: () => {
+                    choose();
+                    trigger.current?.focus({ preventScroll: true });
+                }, children: isSpanish ? 'Borrar fecha' : 'Clear date' })), hasContent(description) && (_jsx("span", { className: "dgm-description", id: `${controlId}-description`, children: description })), hasContent(message) && (_jsx("span", { className: "dgm-error", id: `${controlId}-error`, children: message }))] }));
+}
+export function DatePicker({ value, defaultValue = null, onValueChange, ...props }) {
+    const [selected, change] = useControllable(value, defaultValue, onValueChange);
+    return (_jsx(CalendarField, { props: props, from: selected ?? undefined, range: false, onSelect: (from) => change(from ?? null) }));
+}
+export function DateRangePicker({ value, defaultValue = null, onValueChange, ...props }) {
+    const [selected, change] = useControllable(value, defaultValue, onValueChange);
+    return (_jsx(CalendarField, { props: props, from: selected?.from, to: selected?.to, range: true, onSelect: (from, to) => change(from ? { from, to } : null) }));
+}

package/dist/display.d.ts

@@ -0,0 +1,63 @@
+import type { HTMLAttributes, ReactNode, ReactElement } from 'react';
+/** Intención visual compartida; el significado también debe expresarse mediante texto. */
+export type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+/** Atributos de span con un tono semántico opcional. */
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Paleta de la etiqueta.
+     * @defaultValue 'neutral'
+     */
+    tone?: Tone;
+}
+/** Etiqueta informativa. No introduce foco, eventos de botón ni un rol interactivo. */
+export declare function Badge({ tone, className, ...props }: BadgeProps): ReactElement;
+/** Atributos de div compartidos por Card y sus piezas de composición. */
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+}
+/** Contenedor visual. El consumidor decide el encabezado y las acciones que incluye. */
+export declare function Card({ className, ...props }: CardProps): ReactElement;
+/** Zona superior de Card; no genera automáticamente ningún h1, h2 o h3. */
+export declare function CardHeader({ className, ...props }: CardProps): ReactElement;
+/** Cuerpo de Card con espaciado coherente cuando sigue a CardHeader. */
+export declare function CardContent({ className, ...props }: CardProps): ReactElement;
+/** Pie con flex-wrap para que acciones y metadatos se adapten a anchos reducidos. */
+export declare function CardFooter({ className, ...props }: CardProps): ReactElement;
+/**
+ * Atributos de div. title se redefine como contenido React visible, no como tooltip HTML.
+ * Se pueden pasar role="alert" o role="status" cuando el mensaje deba anunciarse.
+ */
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Anima la entrada al montar un aviso dinámico. Desactivado para contenido estático. @defaultValue false */
+    animate?: boolean;
+    /**
+     * Intención visual del aviso.
+     * @defaultValue 'info'
+     */
+    tone?: Exclude<Tone, 'neutral'>;
+    /** Encabezado visible opcional, independiente del contenido de children. */
+    title?: ReactNode;
+}
+/**
+ * Mensaje contextual estático por defecto: no impone un rol de región viva.
+ * El consumidor decide si un cambio dinámico es urgente (alert) o informativo (status).
+ * El símbolo es decorativo; el título y el contenido deben explicar el mensaje.
+ */
+export declare function Alert({ animate, tone, title, children, className, ...props }: AlertProps): ReactElement;
+/** Atributos de hr junto a su orientación y su finalidad semántica. */
+export interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {
+    /**
+     * Dirección de la línea; en vertical necesita un contenedor flex.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Excluye la línea del árbol de accesibilidad.
+     * @defaultValue false
+     */
+    decorative?: boolean;
+}
+/**
+ * Separación temática nativa o línea decorativa, según decorative.
+ * role, aria-hidden y aria-orientation se derivan juntos para no contradecirse.
+ */
+export declare function Separator({ orientation, decorative, className, ...props }: SeparatorProps): ReactElement;

package/dist/display.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Componentes de presentación sin hooks ni frontera `use client`.
+ * Se pueden componer desde Server Components de Next.js o renderizar con Astro.
+ * Los retornos ReactElement explícitos mantienen compatibilidad con los tipos de React 18.
+ */
+import { SuccessIcon, InfoIcon, WarningIcon, DangerIcon } from './internal/icons.js';
+import { cx, hasContent } from './utils.js';
+/** Etiqueta informativa. No introduce foco, eventos de botón ni un rol interactivo. */
+export function Badge({ tone = 'neutral', className, ...props }) {
+    return _jsx("span", { ...props, className: cx('dgm-badge', `dgm-tone--${tone}`, className) });
+}
+/** Contenedor visual. El consumidor decide el encabezado y las acciones que incluye. */
+export function Card({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx('dgm-card', className) });
+}
+/** Zona superior de Card; no genera automáticamente ningún h1, h2 o h3. */
+export function CardHeader({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx('dgm-card-header', className) });
+}
+/** Cuerpo de Card con espaciado coherente cuando sigue a CardHeader. */
+export function CardContent({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx('dgm-card-content', className) });
+}
+/** Pie con flex-wrap para que acciones y metadatos se adapten a anchos reducidos. */
+export function CardFooter({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx('dgm-card-footer', className) });
+}
+/**
+ * Mensaje contextual estático por defecto: no impone un rol de región viva.
+ * El consumidor decide si un cambio dinámico es urgente (alert) o informativo (status).
+ * El símbolo es decorativo; el título y el contenido deben explicar el mensaje.
+ */
+export function Alert({ animate = false, tone = 'info', title, children, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cx('dgm-alert', `dgm-tone--${tone}`, animate && 'dgm-alert--animated', className), children: [_jsx("span", { className: "dgm-alert-symbol", "aria-hidden": "true", children: tone === 'success' ? (_jsx(SuccessIcon, { size: 20 })) : tone === 'info' ? (_jsx(InfoIcon, { size: 20 })) : tone === 'warning' ? (_jsx(WarningIcon, { size: 20 })) : (_jsx(DangerIcon, { size: 20 })) }), _jsxs("div", { children: [hasContent(title) && _jsx("div", { className: "dgm-alert-title", children: title }), hasContent(children) && _jsx("div", { className: "dgm-alert-content", children: children })] })] }));
+}
+/**
+ * Separación temática nativa o línea decorativa, según decorative.
+ * role, aria-hidden y aria-orientation se derivan juntos para no contradecirse.
+ */
+export function Separator({ orientation = 'horizontal', decorative = false, className, ...props }) {
+    return (_jsx("hr", { ...props, role: decorative ? 'none' : 'separator', "aria-hidden": decorative || undefined, "aria-orientation": decorative ? undefined : orientation, className: cx('dgm-separator', `dgm-separator--${orientation}`, className) }));
+}

package/dist/drawer.d.ts

@@ -0,0 +1,12 @@
+/** Diálogo anclado a un borde. Comparte el contrato de Modal y añade side. */
+import { type ReactElement } from 'react';
+import type { ModalProps } from './modal.js';
+export interface DrawerProps extends ModalProps {
+    /** Borde por el que entra y sale. @defaultValue 'right' */
+    side?: 'left' | 'right' | 'top' | 'bottom';
+}
+/** Atrapa el foco, bloquea el fondo y mantiene la cabecera y las acciones visibles. */
+export declare function Drawer({ open, onOpenChange, title, description, children, footer, side, closeLabel, closeOnOverlayClick, className, }: DrawerProps): ReactElement;
+/** Alias de Drawer: Sheet comparte comportamiento y propiedades. */
+export declare const Sheet: typeof Drawer;
+export type SheetProps = DrawerProps;

package/dist/drawer.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Diálogo anclado a un borde. Comparte el contrato de Modal y añade side. */
+import { useId, useRef } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { restoreFocus } from './internal/focus.js';
+import { CloseIcon } from './internal/icons.js';
+import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { cx, hasContent } from './utils.js';
+/** Atrapa el foco, bloquea el fondo y mantiene la cabecera y las acciones visibles. */
+export function Drawer({ open, onOpenChange, title, description, children, footer, side = 'right', closeLabel = 'Close drawer', closeOnOverlayClick = true, className, }) {
+    const { depth, style: layerStyle } = useOverlayLayer();
+    const returnFocus = useRef(null);
+    const descriptionId = useId();
+    return (_jsx(OverlayLayerProvider, { depth: depth, children: _jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "dgm-modal-overlay", style: layerStyle }), _jsxs(Dialog.Content, { style: layerStyle, className: cx('dgm-drawer', `dgm-drawer--${side}`, className), "aria-describedby": hasContent(description) ? descriptionId : undefined, onOpenAutoFocus: () => {
+                            returnFocus.current =
+                                document.activeElement instanceof HTMLElement ? document.activeElement : null;
+                        }, onCloseAutoFocus: (event) => {
+                            if (returnFocus.current?.isConnected) {
+                                event.preventDefault();
+                                restoreFocus(returnFocus.current);
+                            }
+                        }, onPointerDownOutside: (event) => {
+                            if (!closeOnOverlayClick)
+                                event.preventDefault();
+                        }, children: [_jsxs("header", { className: "dgm-modal-header", children: [_jsx(Dialog.Title, { className: "dgm-modal-title", children: title }), hasContent(description) && (_jsx(Dialog.Description, { id: descriptionId, className: "dgm-description", children: description })), _jsx(Dialog.Close, { className: "dgm-icon-close", "aria-label": closeLabel, children: _jsx(CloseIcon, {}) })] }), _jsx("div", { className: "dgm-modal-body", children: children }), hasContent(footer) && _jsx("footer", { className: "dgm-modal-footer", children: footer })] })] }) }) }));
+}
+/** Alias de Drawer: Sheet comparte comportamiento y propiedades. */
+export const Sheet = Drawer;

package/dist/dropdown-menu.d.ts

@@ -0,0 +1,47 @@
+/** Menú de acciones: Radix gestiona teclado, búsqueda por letras, portal y foco. */
+import { type ReactElement, type ReactNode } from 'react';
+/** Una acción tiene un ID estable; los separadores no son seleccionables. */
+export type DropdownMenuItem = {
+    id: string;
+    type: 'separator';
+} | {
+    id: string;
+    type?: 'item';
+    /** Texto visible, accesible y usado para buscar escribiendo. */
+    label: string;
+    /** Icono decorativo opcional. */
+    icon?: ReactNode;
+    /** Leyenda visual: no registra por sí misma un atajo de teclado. */
+    shortcut?: string;
+    disabled?: boolean;
+    /** Resalta acciones destructivas sin ejecutarlas automáticamente. */
+    danger?: boolean;
+    /** Se ejecuta con puntero o teclado. preventDefault mantiene abierto el menú. */
+    onSelect?: (event: Event) => void;
+};
+export interface DropdownMenuProps {
+    /** Un único botón que acepte ref y props; Button es compatible. */
+    children: ReactElement;
+    /** Acciones y separadores en orden de lectura. IDs únicos. */
+    items: readonly DropdownMenuItem[];
+    /** Encabezado opcional del menú. */
+    label?: string;
+    /** Apertura controlada, junto con onOpenChange. */
+    open?: boolean;
+    /** Apertura inicial en modo no controlado. @defaultValue false */
+    defaultOpen?: boolean;
+    /** Notifica apertura y cierre, incluido Escape o selección. */
+    onOpenChange?: (open: boolean) => void;
+    /** Lado preferido; cambia si no hay espacio. @defaultValue 'bottom' */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Alineación respecto al botón. @defaultValue 'start' */
+    align?: 'start' | 'center' | 'end';
+    /** Distancia al botón en píxeles. @defaultValue 6 */
+    sideOffset?: number;
+    /** Desactiva el disparador. @defaultValue false */
+    disabled?: boolean;
+    /** Clase del panel que se renderiza en el portal. */
+    className?: string;
+}
+/** El menú no bloquea el scroll de la página y devuelve el foco sin desplazarla. */
+export declare function DropdownMenu({ children, items, label, open, defaultOpen, onOpenChange, side, align, sideOffset, disabled, className, }: DropdownMenuProps): ReactElement;

package/dist/dropdown-menu.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Menú de acciones: Radix gestiona teclado, búsqueda por letras, portal y foco. */
+import { useRef } from 'react';
+import * as Primitive from '@radix-ui/react-dropdown-menu';
+import { restoreFocus } from './internal/focus.js';
+import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { cx } from './utils.js';
+/** El menú no bloquea el scroll de la página y devuelve el foco sin desplazarla. */
+export function DropdownMenu({ children, items, label, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 6, disabled, className, }) {
+    const { depth, style: layerStyle } = useOverlayLayer();
+    const trigger = useRef(null);
+    const interactedOutside = useRef(false);
+    return (_jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Primitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, modal: false, children: [_jsx(Primitive.Trigger, { asChild: true, ref: trigger, disabled: disabled, children: children }), _jsx(Primitive.Portal, { children: _jsxs(Primitive.Content, { style: layerStyle, side: side, align: align, sideOffset: sideOffset, collisionPadding: 12, className: cx('dgm-dropdown', className), onInteractOutside: () => {
+                            interactedOutside.current = true;
+                        }, onCloseAutoFocus: (event) => {
+                            // Un clic fuera conserva su destino; Escape o una acción vuelven al botón.
+                            event.preventDefault();
+                            if (!interactedOutside.current && trigger.current?.isConnected) {
+                                restoreFocus(trigger.current);
+                            }
+                            interactedOutside.current = false;
+                        }, children: [label && _jsx(Primitive.Label, { className: "dgm-dropdown-label", children: label }), items.map((item) => item.type === 'separator' ? (_jsx(Primitive.Separator, { className: "dgm-dropdown-separator" }, item.id)) : (_jsxs(Primitive.Item, { textValue: item.label, disabled: item.disabled, onSelect: item.onSelect, className: cx('dgm-dropdown-item', item.danger && 'dgm-dropdown-item--danger'), children: [item.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: item.icon })), _jsx("span", { className: "dgm-dropdown-text", children: item.label }), item.shortcut && (_jsx("span", { className: "dgm-dropdown-shortcut", "aria-hidden": "true", children: item.shortcut }))] }, item.id)))] }) })] }) }));
+}

package/dist/empty-state.d.ts

@@ -0,0 +1,13 @@
+/** Presentación estática compatible con Server Components; la aplicación aporta las acciones. */
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Icono decorativo; lupa por defecto. Pasa null para ocultarlo. */
+    icon?: ReactNode;
+    action?: ReactNode;
+    /** Escoge el nivel que corresponda a la estructura de la página. */
+    headingLevel?: 2 | 3 | 4;
+}
+/** No impone un live region: utiliza role="status" solo si necesitas anunciar cambios dinámicos. */
+export declare function EmptyState({ title, description, icon, action, headingLevel, className, children, ...props }: EmptyStateProps): ReactElement;

package/dist/empty-state.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './utils.js';
+import { SearchIcon } from './internal/icons.js';
+/** No impone un live region: utiliza role="status" solo si necesitas anunciar cambios dinámicos. */
+export function EmptyState({ title, description, icon = _jsx(SearchIcon, { size: 24 }), action, headingLevel = 3, className, children, ...props }) {
+    const Heading = `h${headingLevel}`;
+    return (_jsxs("div", { ...props, className: cx('dgm-empty-state', className), children: [icon && (_jsx("div", { className: "dgm-empty-icon", "aria-hidden": "true", children: icon })), _jsx(Heading, { children: title }), description && _jsx("p", { className: "dgm-description", children: description }), children, action && _jsx("div", { className: "dgm-empty-action", children: action })] }));
+}