danielgm-ui 0.1.0

package/dist/button.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Botón de acción de la librería.
+ * La frontera cliente se declara en este módulo, no en el barrel público.
+ * forwardRef permite entregar el botón real tanto en React 18 como en React 19.
+ */
+import { forwardRef } from 'react';
+import { cx } from './utils.js';
+/**
+ * Acción nativa con foco de teclado, soporte de formularios y ref al HTMLButtonElement.
+ * Se usa type="button" por defecto para evitar envíos accidentales de formularios.
+ * El consumidor puede indicar type="submit" y pasar onClick u otros eventos nativos.
+ *
+ * @example
+ * <Button type="submit" loading={saving}>Guardar</Button>
+ */
+export const Button = forwardRef(function Button({ variant = 'primary', size = 'md', loading = false, fullWidth = false, iconOnly = false, disabled, type = 'button', className, children, ...props }, ref) {
+    // Las props calculadas se aplican después de ...props: el estado de carga
+    // siempre bloquea la interacción. El nombre se conserva en el texto o los atributos ARIA.
+    return (_jsxs("button", { ...props, ref: ref, type: type, disabled: disabled || loading, "aria-busy": loading || undefined, className: cx('dgm-button', `dgm-button--${variant}`, `dgm-button--${size}`, fullWidth && !iconOnly && 'dgm-full', iconOnly && 'dgm-button--icon-only', className), children: [loading && _jsx("span", { className: "dgm-spinner", "aria-hidden": "true" }), iconOnly
+                ? // El nombre lo proporciona el botón: ni el dibujo ni el spinner se anuncian.
+                    !loading && (_jsx("span", { className: "dgm-button-icon", "aria-hidden": "true", children: children }))
+                : children] }));
+});

package/dist/carousel.d.ts

@@ -0,0 +1,19 @@
+/** Carrusel de una diapositiva por vista. Scroll-snap nativo conserva gestos y rueda sin capturar el gesto vertical. */
+import { type ReactElement, type ReactNode } from 'react';
+export interface CarouselItem {
+    id: string;
+    label: string;
+    content: ReactNode;
+}
+export interface CarouselProps {
+    label: string;
+    items: readonly CarouselItem[];
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    locale?: 'es' | 'en';
+    /** Muestra accesos directos a cada diapositiva. @defaultValue true */
+    showIndicators?: boolean;
+    className?: string;
+}
+/** Sin autoplay: el movimiento siempre lo inicia la persona. Respeta prefers-reduced-motion. */
+export declare function Carousel({ label, items, defaultIndex, onIndexChange, locale, showIndicators, className, }: CarouselProps): ReactElement;

package/dist/carousel.js

@@ -0,0 +1,133 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Carrusel de una diapositiva por vista. Scroll-snap nativo conserva gestos y rueda sin capturar el gesto vertical. */
+import { useEffect, useId, useRef, useState } from 'react';
+import { Button } from './button.js';
+import { cx } from './utils.js';
+/** Distancia real entre diapositivas: incluye el gap CSS sin duplicar su medida en JavaScript.
+ * El viewport es el contenedor posicionado, por lo que todos los offsets comparten origen.
+ */
+function slideOffset(viewport, index) {
+    const first = viewport.children[0];
+    const slide = viewport.children[index];
+    return first && slide ? slide.offsetLeft - first.offsetLeft : 0;
+}
+/** Sin autoplay: el movimiento siempre lo inicia la persona. Respeta prefers-reduced-motion. */
+export function Carousel({ label, items, defaultIndex = 0, onIndexChange, locale = 'en', showIndicators = true, className, }) {
+    const initial = Math.max(0, Math.min(items.length - 1, defaultIndex));
+    const [index, setIndex] = useState(initial);
+    const active = Math.max(0, Math.min(items.length - 1, index));
+    const viewport = useRef(null);
+    const indexRef = useRef(initial);
+    // Mientras los controles desplazan el visor, el índice representa su destino.
+    // Los eventos scroll intermedios no deben volver a anunciar las tarjetas anteriores.
+    const target = useRef(null);
+    const settleTimer = useRef(undefined);
+    const callback = useRef(onIndexChange);
+    callback.current = onIndexChange;
+    const id = useId();
+    const es = locale === 'es';
+    useEffect(() => {
+        const node = viewport.current;
+        if (!node)
+            return;
+        function resize() {
+            if (node) {
+                target.current = null;
+                node.scrollLeft = slideOffset(node, Math.max(0, Math.min(items.length - 1, indexRef.current)));
+            }
+        }
+        resize();
+        const observer = new ResizeObserver(resize);
+        observer.observe(node);
+        // scrollend confirma el destino; el temporizador de scroll cubre navegadores sin ese evento.
+        const settle = () => {
+            target.current = null;
+            syncPosition(node);
+        };
+        node.addEventListener('scrollend', settle);
+        return () => {
+            observer.disconnect();
+            node.removeEventListener('scrollend', settle);
+            clearTimeout(settleTimer.current);
+        };
+    }, [items.length]);
+    function update(next) {
+        if (next !== indexRef.current) {
+            indexRef.current = next;
+            setIndex(next);
+            callback.current?.(next);
+        }
+    }
+    function go(next) {
+        const node = viewport.current;
+        if (!node || !items.length)
+            return;
+        const bounded = Math.max(0, Math.min(items.length - 1, next));
+        clearTimeout(settleTimer.current);
+        target.current = bounded;
+        update(bounded);
+        node.scrollTo({
+            left: slideOffset(node, bounded),
+            behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches
+                ? 'instant'
+                : 'smooth',
+        });
+    }
+    /** Un gesto del usuario puede interrumpir el desplazamiento programado. */
+    function interrupt() {
+        target.current = null;
+        clearTimeout(settleTimer.current);
+    }
+    function syncPosition(node) {
+        // scrollend puede ejecutarse entre el commit de nuevas tarjetas y la limpieza
+        // del efecto anterior. La lista real evita leer offsets de nodos retirados.
+        const slides = node.children;
+        const count = slides.length;
+        if (!node.clientWidth || !count)
+            return;
+        let nearest = 0;
+        let distance = Infinity;
+        // Una sola lectura del origen y del scroll por evento, sin conservar geometría
+        // que pueda quedar obsoleta al redimensionar, cambiar el gap o cargar contenido.
+        const origin = slides[0].offsetLeft;
+        const scrollLeft = node.scrollLeft;
+        for (let position = 0; position < count; position++) {
+            const candidate = Math.abs(scrollLeft - (slides[position].offsetLeft - origin));
+            if (candidate < distance) {
+                nearest = position;
+                distance = candidate;
+            }
+        }
+        update(nearest);
+    }
+    return (_jsxs("section", { "aria-label": label, "aria-roledescription": es ? 'carrusel' : 'carousel', className: cx('dgm-carousel', className), children: [_jsx("div", { id: id, ref: viewport, className: "dgm-carousel-viewport", dir: "ltr", tabIndex: items.length ? 0 : -1, "aria-label": es ? 'Diapositivas' : 'Slides', onPointerDown: interrupt, onTouchStart: interrupt, onWheel: interrupt, onScroll: (event) => {
+                    const node = event.currentTarget;
+                    if (target.current === null)
+                        syncPosition(node);
+                    else if (Math.abs(node.scrollLeft - slideOffset(node, target.current)) < 1) {
+                        target.current = null;
+                    }
+                    clearTimeout(settleTimer.current);
+                    settleTimer.current = setTimeout(() => {
+                        target.current = null;
+                        syncPosition(node);
+                    }, 160);
+                }, onKeyDown: (event) => {
+                    if (event.target !== event.currentTarget)
+                        return;
+                    if (event.key === 'ArrowRight')
+                        go(active + 1);
+                    else if (event.key === 'ArrowLeft')
+                        go(active - 1);
+                    else if (event.key === 'Home')
+                        go(0);
+                    else if (event.key === 'End')
+                        go(items.length - 1);
+                    else
+                        return;
+                    event.preventDefault();
+                }, children: items.map((item, position) => (_jsx("div", { role: "group", "aria-roledescription": es ? 'diapositiva' : 'slide', "aria-label": `${position + 1} / ${items.length}: ${item.label}`, "aria-hidden": active !== position || undefined, ref: (element) => {
+                        element?.toggleAttribute('inert', active !== position);
+                    }, className: "dgm-carousel-slide", children: item.content }, item.id))) }), _jsxs("div", { className: "dgm-carousel-controls", children: [_jsx(Button, { variant: "outline", disabled: !items.length || active === 0, "aria-controls": id, onClick: () => go(active - 1), children: es ? 'Anterior' : 'Previous' }), _jsxs("span", { className: "dgm-description", role: "status", "aria-atomic": "true", children: [items.length ? active + 1 : 0, " / ", items.length] }), _jsx(Button, { variant: "outline", disabled: !items.length || active >= items.length - 1, "aria-controls": id, onClick: () => go(active + 1), children: es ? 'Siguiente' : 'Next' })] }), showIndicators && (_jsx("div", { className: "dgm-carousel-indicators", children: items.map((item, position) => (_jsx("button", { type: "button", "aria-label": `${es ? 'Ir a' : 'Go to'} ${item.label}`, "aria-current": active === position ? 'true' : undefined, "aria-controls": id, onClick: () => go(position), children: _jsx("span", {}) }, item.id))) }))] }));
+}

package/dist/choice-group.d.ts

@@ -0,0 +1,36 @@
+/** Familia de selección múltiple basada en Checkbox y Switch, con un fieldset común. */
+import { type ReactElement, type ReactNode } from 'react';
+export interface ChoiceGroupOption {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+export interface CheckboxGroupProps {
+    /** Legend visible y nombre accesible del grupo. */
+    label: ReactNode;
+    /** Opciones con valores únicos y no vacíos. */
+    options: readonly ChoiceGroupOption[];
+    /** Valores controlados. */
+    value?: readonly string[];
+    /** Selección inicial no controlada. @defaultValue [] */
+    defaultValue?: readonly string[];
+    /** Notifica todos los valores marcados. */
+    onValueChange?: (value: string[]) => void;
+    /** Nombre compartido; FormData.getAll(name) devuelve los marcados. */
+    name?: string;
+    description?: ReactNode;
+    error?: ReactNode;
+    disabled?: boolean;
+    /** Exige al menos una opción habilitada seleccionada. */
+    required?: boolean;
+    /** @defaultValue 'vertical' */
+    orientation?: 'horizontal' | 'vertical';
+    id?: string;
+    className?: string;
+}
+export type SwitchGroupProps = CheckboxGroupProps;
+/** Selección múltiple para formularios. En modo controlado, restablecer value en onReset. */
+export declare function CheckboxGroup(props: CheckboxGroupProps): ReactElement;
+/** Ajustes independientes con la misma gestión de grupo que CheckboxGroup. */
+export declare function SwitchGroup(props: SwitchGroupProps): ReactElement;

package/dist/choice-group.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Familia de selección múltiple basada en Checkbox y Switch, con un fieldset común. */
+import { useId } from 'react';
+import { Checkbox, Switch } from './toggles.js';
+import { useControllable } from './internal/state.js';
+import { cx, hasContent } from './utils.js';
+function ChoiceGroup({ label, options, value, defaultValue = [], onValueChange, name, description, error, disabled, required, orientation = 'vertical', id, className, kind, }) {
+    const generatedId = useId();
+    const controlId = id ?? `dgm-choices-${generatedId}`;
+    const [selected, change] = useControllable(value, defaultValue, onValueChange ? (next) => onValueChange([...next]) : undefined);
+    const Control = kind === 'switch' ? Switch : Checkbox;
+    const describedBy = cx(hasContent(description) && `${controlId}-description`, hasContent(error) && `${controlId}-error`) || undefined;
+    const firstEnabled = options.find((option) => !option.disabled)?.value;
+    const missing = required && !options.some((option) => !option.disabled && selected.includes(option.value));
+    return (_jsxs("fieldset", { id: controlId, disabled: disabled, "aria-describedby": describedBy, "aria-invalid": hasContent(error) || undefined, className: cx('dgm-choice-group', `dgm-choice-group--${kind}`, className), children: [_jsxs("legend", { className: "dgm-label", children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] }), hasContent(description) && (_jsx("p", { className: "dgm-description", id: `${controlId}-description`, children: description })), _jsx("div", { className: "dgm-choice-group-options", "data-orientation": orientation, children: options.map((option, index) => (_jsx(Control, { id: `${controlId}-${index}`, name: name, value: option.value, checked: selected.includes(option.value), disabled: disabled || option.disabled, label: option.label, description: option.description, "aria-describedby": describedBy, "aria-invalid": hasContent(error) || undefined, required: Boolean(missing && option.value === firstEnabled), onChange: (event) => change(event.target.checked
+                        ? [...selected, option.value]
+                        : selected.filter((item) => item !== option.value)) }, option.value))) }), hasContent(error) && (_jsx("p", { className: "dgm-error", id: `${controlId}-error`, children: error }))] }));
+}
+/** Selección múltiple para formularios. En modo controlado, restablecer value en onReset. */
+export function CheckboxGroup(props) {
+    return _jsx(ChoiceGroup, { ...props, kind: "checkbox" });
+}
+/** Ajustes independientes con la misma gestión de grupo que CheckboxGroup. */
+export function SwitchGroup(props) {
+    return _jsx(ChoiceGroup, { ...props, kind: "switch" });
+}

package/dist/combobox.d.ts

@@ -0,0 +1,37 @@
+/** Selector con búsqueda: Popover sitúa el panel y cmdk gestiona la lista con teclado. */
+import { type ReactNode } from 'react';
+import type { SelectOption } from './custom-select.js';
+export interface ComboboxOption extends SelectOption {
+    /** Sinónimos adicionales que participan en la búsqueda. */
+    keywords?: readonly string[];
+}
+export interface ComboboxProps {
+    label: ReactNode;
+    options: readonly ComboboxOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Texto sin selección. */
+    placeholder?: string;
+    /** Etiqueta y placeholder del buscador. */
+    searchPlaceholder?: string;
+    /** Mensaje cuando ninguna opción coincide. */
+    emptyMessage?: string;
+    description?: ReactNode;
+    error?: ReactNode;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Muestra un control para borrar la selección. @defaultValue false */
+    clearable?: boolean;
+    /** Idioma de los textos integrados. @defaultValue 'en' */
+    locale?: 'es' | 'en';
+    id?: string;
+    className?: string;
+    wrapperClassName?: string;
+}
+/** Selección única de un catálogo; no permite enviar texto libre como valor. */
+export declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** Alias de Combobox: Autocomplete también selecciona valores existentes, no texto libre. */
+export declare const Autocomplete: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type AutocompleteProps = ComboboxProps;

package/dist/combobox.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Selector con búsqueda: Popover sitúa el panel y cmdk gestiona la lista con teclado. */
+import { forwardRef, useId, useImperativeHandle, useRef, useState } from 'react';
+import * as Popover from '@radix-ui/react-popover';
+import { Command } from 'cmdk';
+import { useControllable } from './internal/state.js';
+import { restoreFocus } from './internal/focus.js';
+import { preventTriggerLabelDismiss } from './internal/trigger-label.js';
+import { CheckIcon, ChevronIcon } from './internal/icons.js';
+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';
+/** Selección única de un catálogo; no permite enviar texto libre como valor. */
+export const Combobox = forwardRef(function Combobox({ label, options, value, defaultValue = '', onValueChange, placeholder, searchPlaceholder, emptyMessage, description, error, name, required, disabled, clearable = false, locale = 'en', id, className, wrapperClassName, }, ref) {
+    const [selected, change] = useControllable(value, defaultValue, onValueChange);
+    const [open, setOpen] = useFieldOpen(disabled);
+    const { depth, style: layerStyle } = useOverlayLayer();
+    const [invalid, setInvalid] = useState(false);
+    const trigger = useRef(null);
+    // Un clic fuera debe conservar el foco en su destino, como ocurre en Popover.
+    const interactedOutside = useRef(false);
+    useImperativeHandle(ref, () => trigger.current);
+    const generatedId = useId();
+    const controlId = id ?? `dgm-combo-${generatedId}`;
+    const es = locale === 'es';
+    const current = options.find((option) => option.value === selected);
+    const message = error || (invalid ? (es ? 'Selecciona una opción.' : 'Select an option.') : undefined);
+    const describedBy = cx(hasContent(description) && `${controlId}-description`, hasContent(message) && `${controlId}-error`) || undefined;
+    function choose(next) {
+        if (disabled)
+            return;
+        change(next);
+        setInvalid(false);
+        setOpen(false);
+    }
+    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: " *" })] }), _jsxs("select", { className: "dgm-form-value", "aria-hidden": "true", tabIndex: -1, name: name, value: current ? selected : '', required: required, disabled: disabled, onChange: (event) => choose(event.target.value), onInvalid: (event) => {
+                    event.preventDefault();
+                    setInvalid(true);
+                    trigger.current?.focus({ preventScroll: true });
+                }, children: [_jsx("option", { value: "" }), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }), _jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Popover.Trigger, { ref: trigger, id: controlId, disabled: disabled, "aria-labelledby": `${controlId}-label ${controlId}-value`, "aria-describedby": describedBy, "aria-invalid": hasContent(message) || undefined, className: cx('dgm-input', 'dgm-combobox-trigger', className), children: [_jsxs("span", { className: "dgm-custom-value", id: `${controlId}-value`, children: [current?.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: current.icon })), current?.label ?? placeholder ?? (es ? 'Seleccionar…' : 'Select…')] }), _jsx("span", { className: "dgm-custom-chevron", children: _jsx(ChevronIcon, {}) })] }), _jsx(Popover.Portal, { children: _jsx(Popover.Content, { className: "dgm-combobox-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: _jsxs(Command, { defaultValue: selected, className: "dgm-command", label: es ? 'Opciones' : 'Options', loop: true, children: [_jsx(Command.Input, { className: "dgm-command-input", "aria-label": searchPlaceholder ?? (es ? 'Buscar opciones' : 'Search options'), placeholder: searchPlaceholder ?? (es ? 'Buscar…' : 'Search…') }), _jsx(ScrollHints, { children: _jsxs(Command.List, { className: "dgm-command-list", children: [_jsx(Command.Empty, { className: "dgm-command-empty", children: emptyMessage ?? (es ? 'Sin resultados.' : 'No results.') }), options.map((option) => (_jsxs(Command.Item, { value: option.value, keywords: [option.label, ...(option.keywords ?? [])], disabled: disabled || option.disabled, onSelect: () => choose(option.value), className: "dgm-command-item", children: [option.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: option.icon })), _jsx("span", { children: option.label }), option.value === selected && (_jsx("span", { className: "dgm-command-check", "aria-hidden": "true", children: _jsx(CheckIcon, {}) }))] }, option.value)))] }) })] }) }) })] }) }), clearable && selected && (_jsx("button", { type: "button", className: "dgm-text-action", disabled: disabled, onClick: () => {
+                    choose('');
+                    trigger.current?.focus({ preventScroll: true });
+                }, children: es ? 'Borrar selección' : 'Clear selection' })), hasContent(description) && (_jsx("span", { className: "dgm-description", id: `${controlId}-description`, children: description })), hasContent(message) && (_jsx("span", { className: "dgm-error", id: `${controlId}-error`, children: message }))] }));
+});
+/** Alias de Combobox: Autocomplete también selecciona valores existentes, no texto libre. */
+export const Autocomplete = Combobox;

package/dist/command-palette.d.ts

@@ -0,0 +1,28 @@
+/** Buscador de acciones en nuestro Modal. El atajo global es opcional y se limpia al desmontar. */
+import { type ReactElement, type ReactNode } from 'react';
+export interface CommandAction {
+    id: string;
+    label: string;
+    /** Sinónimos para la búsqueda. */
+    keywords?: readonly string[];
+    /** Agrupa acciones bajo un título visible. */
+    group?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** La aplicación decide la navegación o acción concreta. */
+    onSelect: () => void;
+}
+export interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    actions: readonly CommandAction[];
+    title: string;
+    placeholder?: string;
+    emptyMessage?: string;
+    /** Ctrl+K / Cmd+K fuera de campos editables. Actívalo una sola vez por aplicación. @defaultValue false */
+    shortcut?: boolean;
+    locale?: 'es' | 'en';
+    closeLabel?: string;
+    className?: string;
+}
+export declare function CommandPalette({ open, onOpenChange, actions, title, placeholder, emptyMessage, shortcut, locale, closeLabel, className, }: CommandPaletteProps): ReactElement;

package/dist/command-palette.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Buscador de acciones en nuestro Modal. El atajo global es opcional y se limpia al desmontar. */
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Command } from 'cmdk';
+import { Modal } from './modal.js';
+import { cx } from './utils.js';
+import { ScrollHints } from './internal/scroll-hints.js';
+export function CommandPalette({ open, onOpenChange, actions, title, placeholder, emptyMessage, shortcut = false, locale = 'en', closeLabel, className, }) {
+    const searchInput = useRef(null);
+    const interacted = useRef(false);
+    const [active, setActive] = useState('');
+    const [inputMode, setInputMode] = useState('idle');
+    useEffect(() => {
+        if (!open) {
+            interacted.current = false;
+            setActive('');
+            setInputMode('idle');
+            return;
+        }
+        // Modal registra primero el disparador para devolverle el foco al cerrar.
+        // En el siguiente frame llevamos el foco al buscador sin alterar ese destino.
+        const frame = requestAnimationFrame(() => searchInput.current?.focus({ preventScroll: true }));
+        return () => cancelAnimationFrame(frame);
+    }, [open]);
+    const latest = useRef({ open, onOpenChange });
+    latest.current = { open, onOpenChange };
+    useEffect(() => {
+        if (!shortcut)
+            return;
+        function keydown(event) {
+            const target = event.target;
+            if (event.defaultPrevented ||
+                event.repeat ||
+                event.altKey ||
+                event.shiftKey ||
+                !(event.ctrlKey || event.metaKey) ||
+                event.key.toLowerCase() !== 'k')
+                return;
+            if (target instanceof HTMLElement &&
+                (target.isContentEditable ||
+                    target.closest('input,textarea,select,[contenteditable="true"]')))
+                return;
+            event.preventDefault();
+            latest.current.onOpenChange(!latest.current.open);
+        }
+        document.addEventListener('keydown', keydown);
+        return () => document.removeEventListener('keydown', keydown);
+    }, [shortcut]);
+    // Conserva el orden de grupos y acciones sin filtrar de nuevo toda la lista por grupo.
+    const groups = useMemo(() => {
+        const grouped = new Map();
+        for (const action of actions) {
+            const key = action.group ?? '';
+            const group = grouped.get(key);
+            if (group)
+                group.push(action);
+            else
+                grouped.set(key, [action]);
+        }
+        return [...grouped];
+    }, [actions]);
+    const es = locale === 'es';
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, title: title, closeLabel: closeLabel ?? (es ? 'Cerrar buscador' : 'Close command menu'), className: cx('dgm-command-modal', className), children: _jsxs(Command, { label: title, loop: true, className: "dgm-command dgm-command--palette", value: active, onValueChange: (value) => {
+                // cmdk propone la primera acción al montar. Solo aceptamos una opción
+                // después de una interacción; abrir el modal no equivale a seleccionarla.
+                if (interacted.current)
+                    setActive(value);
+            }, "data-input-mode": inputMode, onPointerMoveCapture: () => {
+                interacted.current = true;
+                setInputMode('pointer');
+            }, onKeyDownCapture: (event) => {
+                const navigationKey = ['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key);
+                const vimKey = event.ctrlKey && ['n', 'j', 'p', 'k'].includes(event.key);
+                if (navigationKey || vimKey) {
+                    interacted.current = true;
+                    setInputMode('keyboard');
+                }
+            }, children: [_jsx(Command.Input, { ref: searchInput, onValueChange: () => {
+                        interacted.current = true;
+                        setInputMode('keyboard');
+                    }, className: "dgm-command-input", "aria-label": placeholder ?? (es ? 'Buscar acciones' : 'Search actions'), placeholder: placeholder ?? (es ? 'Buscar acciones…' : 'Search actions…') }), _jsx(ScrollHints, { children: _jsxs(Command.List, { className: "dgm-command-list", children: [_jsx(Command.Empty, { className: "dgm-command-empty", children: emptyMessage ?? (es ? 'No hay acciones coincidentes.' : 'No matching actions.') }), groups.map(([group, groupActions]) => (_jsx(Command.Group, { heading: group || undefined, children: groupActions.map((action) => (_jsxs(Command.Item, { className: "dgm-command-item", value: action.id, keywords: [action.label, ...(action.keywords ?? [])], disabled: action.disabled, onPointerLeave: () => {
+                                        // El hover termina al salir de la fila, aunque el puntero siga en el modal.
+                                        if (inputMode === 'pointer')
+                                            setActive('');
+                                    }, onSelect: () => {
+                                        onOpenChange(false);
+                                        action.onSelect();
+                                    }, children: [action.icon && (_jsx("span", { className: "dgm-option-icon", "aria-hidden": "true", children: action.icon })), action.label] }, action.id))) }, group)))] }) })] }) }));
+}

package/dist/container.d.ts

@@ -0,0 +1,21 @@
+/** Estructura de página estática: no necesita hooks, hidratación ni frontera `use client`. */
+import type { HTMLAttributes, ReactElement } from 'react';
+/** Elementos estructurales con atributos HTML comunes; no admite controles ni componentes arbitrarios. */
+export type ContainerElement = 'div' | 'main' | 'section' | 'article' | 'header' | 'footer' | 'aside' | 'nav';
+/** Anchos máximos exteriores, incluido el padding: 40, 48, 64 y 80 rem, o todo el padre. */
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** Atributos HTML y opciones de estructura. children, className, style y aria-* se conservan. */
+export interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    /** Elemento semántico. Usa un único main visible por página. @defaultValue 'div' */
+    as?: ContainerElement;
+    /** Límite de ancho; siempre se adapta al espacio disponible en el padre. @defaultValue 'xl' */
+    size?: ContainerSize;
+    /** Espaciado lateral fluido de 1 a 2 rem según el viewport; false lo elimina. @defaultValue true */
+    padding?: boolean;
+}
+/**
+ * Centra y limita el contenido sin imponer color, altura ni distribución interna.
+ * No expone ref: es una pieza de composición estática, como Card.
+ * Para fondos a todo el ancho, coloca el fondo en una sección exterior y el Container dentro.
+ */
+export declare function Container({ as: Element, size, padding, className, ...props }: ContainerProps): ReactElement;

package/dist/container.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './utils.js';
+/**
+ * Centra y limita el contenido sin imponer color, altura ni distribución interna.
+ * No expone ref: es una pieza de composición estática, como Card.
+ * Para fondos a todo el ancho, coloca el fondo en una sección exterior y el Container dentro.
+ */
+export function Container({ as: Element = 'div', size = 'xl', padding = true, className, ...props }) {
+    return (_jsx(Element, { ...props, className: cx('dgm-container', `dgm-container--${size}`, !padding && 'dgm-container--flush', className) }));
+}

package/dist/context-menu.d.ts

@@ -0,0 +1,21 @@
+/** Menú contextual sobre una zona concreta. Radix gestiona el anclaje al puntero y la navegación. */
+import { type ReactElement } from 'react';
+import type { DropdownMenuItem } from './dropdown-menu.js';
+/** Mismo contrato de acciones y separadores que DropdownMenu. */
+export type ContextMenuItem = DropdownMenuItem;
+export interface ContextMenuProps {
+    /** Un único elemento DOM o componente que transmita ref y props; se conserva su aspecto. */
+    children: ReactElement;
+    /** Acciones y separadores con IDs únicos. Los atajos son leyendas, no se registran. */
+    items: readonly ContextMenuItem[];
+    /** Encabezado visible y nombre accesible del menú. */
+    label: string;
+    /** Desactiva únicamente el menú personalizado y conserva el menú nativo. @defaultValue false */
+    disabled?: boolean;
+    /** Notifica apertura y cierre. La posición y la apertura proceden del disparador. */
+    onOpenChange?: (open: boolean) => void;
+    /** Clase CSS del panel renderizado en el portal. */
+    className?: string;
+}
+/** Clic derecho, pulsación prolongada o Shift+F10. El clic izquierdo conserva la acción del hijo. */
+export declare function ContextMenu({ children, items, label, disabled, onOpenChange, className, }: ContextMenuProps): ReactElement;

package/dist/context-menu.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Menú contextual sobre una zona concreta. Radix gestiona el anclaje al puntero y la navegación. */
+import { useId, useRef, useState } from 'react';
+import * as Primitive from '@radix-ui/react-context-menu';
+import { restoreFocus } from './internal/focus.js';
+import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { cx } from './utils.js';
+/** Clic derecho, pulsación prolongada o Shift+F10. El clic izquierdo conserva la acción del hijo. */
+export function ContextMenu({ children, items, label, disabled = false, onOpenChange, className, }) {
+    const { depth, style: layerStyle } = useOverlayLayer();
+    const trigger = useRef(null);
+    const outside = useRef(false);
+    const [open, setOpen] = useState(false);
+    const menuId = useId();
+    return (_jsx(OverlayLayerProvider, { depth: depth, children: _jsxs(Primitive.Root, { modal: false, onOpenChange: (next) => {
+                setOpen(next);
+                onOpenChange?.(next);
+            }, children: [_jsx(Primitive.Trigger, { asChild: true, ref: trigger, disabled: disabled, style: disabled ? { WebkitTouchCallout: 'default' } : undefined, tabIndex: disabled ? undefined : 0, "aria-haspopup": disabled ? undefined : 'menu', "aria-expanded": disabled ? undefined : open, "aria-controls": open ? menuId : undefined, className: "dgm-context-trigger", onKeyDown: (event) => {
+                        if (disabled ||
+                            event.defaultPrevented ||
+                            event.target !== event.currentTarget ||
+                            event.repeat)
+                            return;
+                        if (event.key !== 'ContextMenu' && !(event.shiftKey && event.key === 'F10'))
+                            return;
+                        event.preventDefault();
+                        const rect = event.currentTarget.getBoundingClientRect();
+                        // Reutiliza el evento de apertura de Radix para situar su ancla virtual junto al elemento.
+                        event.currentTarget.dispatchEvent(new MouseEvent('contextmenu', {
+                            bubbles: true,
+                            cancelable: true,
+                            button: 2,
+                            clientX: rect.left + 8,
+                            clientY: rect.bottom,
+                        }));
+                    }, children: children }), _jsx(Primitive.Portal, { children: _jsxs(Primitive.Content, { style: layerStyle, id: menuId, "aria-label": label, collisionPadding: 12, className: cx('dgm-dropdown', 'dgm-context-menu', className), onContextMenu: (event) => {
+                            // El panel ya es el menú contextual: evita superponer el del navegador
+                            // o propagar el gesto a otra zona contextual a través del portal.
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }, onInteractOutside: () => {
+                            outside.current = true;
+                        }, onCloseAutoFocus: (event) => {
+                            event.preventDefault();
+                            if (!outside.current && trigger.current?.isConnected)
+                                restoreFocus(trigger.current);
+                            outside.current = false;
+                        }, children: [_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/custom-select.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+/** Cada valor debe ser único y no vacío; label proporciona el texto accesible y de búsqueda. */
+export interface SelectOption {
+    /** Identificador enviado al formulario y a onValueChange. */
+    value: string;
+    /** Texto visible, nombre accesible y clave para la búsqueda por letras. */
+    label: string;
+    /** Icono decorativo: puede ser SVG, un componente de iconos o texto. */
+    icon?: ReactNode;
+    /** Impide seleccionar esta opción con teclado o puntero. */
+    disabled?: boolean;
+}
+/** Selector recomendado para código nuevo. La API se limita a selección única. */
+export interface CustomSelectProps {
+    /** Etiqueta visible obligatoria vinculada al disparador. */
+    label: ReactNode;
+    /** Catálogo ordenado de valores disponibles. */
+    options: readonly SelectOption[];
+    /** Valor controlado. No combinar con defaultValue. */
+    value?: string;
+    /** Valor inicial cuando el consumidor no controla el estado. */
+    defaultValue?: string;
+    /** Notifica el valor elegido; no entrega un evento de select nativo. */
+    onValueChange?: (value: string) => void;
+    /** Texto cuando no hay selección. Localizar en la aplicación consumidora. */
+    placeholder?: string;
+    /** Ayuda asociada mediante aria-describedby. */
+    description?: ReactNode;
+    /** Error visible que activa aria-invalid; no ejecuta validación de negocio. */
+    error?: ReactNode;
+    /** Impide cambiar el valor y cierra el desplegable si está abierto. @defaultValue false */
+    disabled?: boolean;
+    /** Exige una selección en el formulario. @defaultValue false */
+    required?: boolean;
+    /** Nombre usado por el control de formulario que mantiene Radix. */
+    name?: string;
+    /** ID del disparador. Se genera con useId si se omite. */
+    id?: string;
+    /** Clase del botón disparador. */
+    className?: string;
+    /** Clase del conjunto formado por etiqueta, control y mensajes. */
+    wrapperClassName?: string;
+}
+/** Desplegable animado renderizado en un portal para evitar recortes por overflow. */
+export declare const CustomSelect: import("react").ForwardRefExoticComponent<CustomSelectProps & import("react").RefAttributes<HTMLButtonElement>>;