danielgm-ui 0.4.2 → 0.4.3

package/dist/context-menu.d.ts

@@ -8,6 +8,8 @@ export interface ContextMenuProps {
     children: ReactElement;
     /** Acciones y separadores con IDs únicos. Los atajos son leyendas, no se registran. */
     items: readonly ContextMenuItem[];
+    /** Apariencia de las opciones; no modifica el panel. @defaultValue 'default' */
+    itemVariant?: 'default' | 'ghost';
     /** Encabezado visible y nombre accesible del menú. */
     label: string;
     /** Desactiva únicamente el menú personalizado y conserva el menú nativo. @defaultValue false */
@@ -18,4 +20,4 @@ export interface ContextMenuProps {
     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;
+export declare function ContextMenu({ children, items, itemVariant, label, disabled, onOpenChange, className, }: ContextMenuProps): ReactElement;

package/dist/context-menu.js

@@ -3,11 +3,12 @@ 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 { menuItemFocusProps } from './internal/menu-item-focus.js';
 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, }) {
+export function ContextMenu({ children, items, itemVariant = 'default', label, disabled = false, onOpenChange, className, }) {
     const { depth, style: layerStyle } = useOverlayLayer();
     const trigger = useRef(null);
     const outside = useRef(false);
@@ -34,7 +35,7 @@ export function ContextMenu({ children, items, label, disabled = false, onOpenCh
                             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) => {
+                    }, children: children }), _jsx(Primitive.Portal, { children: _jsxs(Primitive.Content, { ...menuItemFocusProps, 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();
@@ -46,5 +47,5 @@ export function ContextMenu({ children, items, label, disabled = false, onOpenCh
                             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)))] }) })] }) }));
+                        }, 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.variant ?? itemVariant) === 'ghost' && 'dgm-dropdown-item--ghost', 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/data-table.d.ts

@@ -40,6 +40,8 @@ export interface DataTableProps<T extends object> {
     searchPlaceholder?: string;
     /** Registros por página. @defaultValue 10 */
     pageSize?: number;
+    /** Oculta solo los controles con cero o una página de resultados filtrados. @defaultValue false */
+    hidePaginationOnSinglePage?: boolean;
     /** Página controlada, comenzando en 1. */
     page?: number;
     onPageChange?: (page: number) => void;
@@ -56,4 +58,4 @@ export interface DataTableProps<T extends object> {
     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, sortable, manualSorting, defaultSorting, onSortingChange, searchable, searchPlaceholder, pageSize, page, onPageChange, selectable, selection, defaultSelection, onSelectionChange, loading, emptyMessage, locale, className, }: DataTableProps<T>): ReactElement;
+export declare function DataTable<T extends object>({ data, columns, getRowId, caption, sorting, sortable, manualSorting, defaultSorting, onSortingChange, searchable, searchPlaceholder, pageSize, hidePaginationOnSinglePage, page, onPageChange, selectable, selection, defaultSelection, onSelectionChange, loading, emptyMessage, locale, className, }: DataTableProps<T>): ReactElement;

package/dist/data-table.js

@@ -20,7 +20,7 @@ const features = tableFeatures({
     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, sortable = true, manualSorting = false, defaultSorting = [], onSortingChange, searchable = true, searchPlaceholder, pageSize = 10, page, onPageChange, selectable = false, selection, defaultSelection = [], onSelectionChange, loading = false, emptyMessage, locale = 'en', className, }) {
+export function DataTable({ data, columns, getRowId, caption, sorting, sortable = true, manualSorting = false, defaultSorting = [], onSortingChange, searchable = true, searchPlaceholder, pageSize = 10, hidePaginationOnSinglePage = false, 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);
@@ -117,5 +117,5 @@ export function DataTable({ data, columns, getRowId, caption, sorting, sortable
                             ? 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 })] })] }));
+                            : `${filtered.length} ${es ? 'resultados' : 'results'}${selectable ? ` · ${selectedCount} ${es ? 'seleccionados' : 'selected'}` : ''}` }), (!hidePaginationOnSinglePage || pageCount > 1) && (_jsx(Pagination, { page: current, pageCount: pageCount, onPageChange: changePage, disabled: loading, locale: locale }))] })] }));
 }

package/dist/dropdown-menu.d.ts

@@ -14,6 +14,8 @@ export type DropdownMenuItem = {
     /** Leyenda visual: no registra por sí misma un atajo de teclado. */
     shortcut?: string;
     disabled?: boolean;
+    /** Apariencia de esta opción; hereda itemVariant del menú. */
+    variant?: 'default' | 'ghost';
     /** Resalta acciones destructivas sin ejecutarlas automáticamente. */
     danger?: boolean;
     /** Se ejecuta con puntero o teclado. preventDefault mantiene abierto el menú. */
@@ -24,6 +26,8 @@ export interface DropdownMenuProps {
     children: ReactElement;
     /** Acciones y separadores en orden de lectura. IDs únicos. */
     items: readonly DropdownMenuItem[];
+    /** Apariencia de las opciones; no modifica el panel. @defaultValue 'default' */
+    itemVariant?: 'default' | 'ghost';
     /** Encabezado opcional del menú. */
     label?: string;
     /** Apertura controlada, junto con onOpenChange. */
@@ -44,4 +48,4 @@ export interface DropdownMenuProps {
     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;
+export declare function DropdownMenu({ children, items, itemVariant, label, open, defaultOpen, onOpenChange, side, align, sideOffset, disabled, className, }: DropdownMenuProps): ReactElement;

package/dist/dropdown-menu.js

@@ -3,15 +3,16 @@ 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 { menuItemFocusProps } from './internal/menu-item-focus.js';
 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, }) {
+export function DropdownMenu({ children, items, itemVariant = 'default', 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: () => {
+    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, { ...menuItemFocusProps, 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.
@@ -20,5 +21,5 @@ export function DropdownMenu({ children, items, label, open, defaultOpen, onOpen
                                 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)))] }) })] }) }));
+                        }, 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.variant ?? itemVariant) === 'ghost' && 'dgm-dropdown-item--ghost', 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/internal/menu-item-focus.d.ts

@@ -0,0 +1,5 @@
+export declare const menuItemFocusProps: {
+    onPointerMoveCapture(event: import("react").PointerEvent<HTMLDivElement>): void;
+    onPointerDownCapture(event: import("react").PointerEvent<HTMLDivElement>): void;
+    onKeyDownCapture(event: import("react").KeyboardEvent<HTMLDivElement>): void;
+};

package/dist/internal/menu-item-focus.js

@@ -0,0 +1,11 @@
+export const menuItemFocusProps = {
+    onPointerMoveCapture(event) {
+        event.currentTarget.dataset.inputMode = 'pointer';
+    },
+    onPointerDownCapture(event) {
+        event.currentTarget.dataset.inputMode = 'pointer';
+    },
+    onKeyDownCapture(event) {
+        event.currentTarget.dataset.inputMode = 'keyboard';
+    },
+};

package/dist/navigation-menu.d.ts

@@ -17,10 +17,12 @@ export interface NavigationMenuProps {
     items: readonly NavigationMenuItem[];
     /** href activo exacto; el consumidor conoce la ruta actual. */
     currentHref?: string;
+    /** Apariencia de enlaces y disparadores. @defaultValue 'default' */
+    variant?: 'default' | 'ghost';
     /** Adaptador para routers: devuelve un único enlace que acepte props y ref. */
     renderLink?: (item: NavigationLink) => ReactElement;
     delayDuration?: number;
     className?: string;
 }
 /** En móvil los elementos se distribuyen en filas y los paneles permanecen dentro del ancho disponible. */
-export declare function NavigationMenu({ label, items, currentHref, renderLink, delayDuration, className, }: NavigationMenuProps): ReactElement;
+export declare function NavigationMenu({ label, items, currentHref, variant, renderLink, delayDuration, className, }: NavigationMenuProps): ReactElement;

package/dist/navigation-menu.js

@@ -18,10 +18,10 @@ function NavigationPanel({ label, children }) {
     return (_jsxs(_Fragment, { children: [_jsxs(Primitive.Trigger, { ref: trigger, className: "dgm-navigation-trigger", children: [label, _jsx(ChevronIcon, {})] }), _jsx(Primitive.Content, { ref: contentRef, className: "dgm-navigation-content", children: children })] }));
 }
 /** En móvil los elementos se distribuyen en filas y los paneles permanecen dentro del ancho disponible. */
-export function NavigationMenu({ label, items, currentHref, renderLink, delayDuration = 150, className, }) {
+export function NavigationMenu({ label, items, currentHref, variant = 'default', renderLink, delayDuration = 150, className, }) {
     function link(item) {
         const active = currentHref === item.href;
         return (_jsx(Primitive.Link, { asChild: true, active: active, "aria-current": active ? 'page' : undefined, className: "dgm-navigation-link", children: renderLink ? (renderLink(item)) : (_jsxs("a", { href: item.href, children: [item.icon && _jsx("span", { "aria-hidden": "true", children: item.icon }), _jsxs("span", { children: [item.label, item.description && _jsx("small", { children: item.description })] })] })) }, item.id));
     }
-    return (_jsx(Primitive.Root, { "aria-label": label, delayDuration: delayDuration, className: cx('dgm-navigation', className), children: _jsx(Primitive.List, { className: "dgm-navigation-list", children: items.map((item) => (_jsx(Primitive.Item, { className: "dgm-navigation-item", children: 'items' in item ? (_jsx(NavigationPanel, { label: item.label, children: _jsx("ul", { children: item.items.map((child) => (_jsx("li", { children: link(child) }, child.id))) }) })) : (link(item)) }, item.id))) }) }));
+    return (_jsx(Primitive.Root, { "aria-label": label, delayDuration: delayDuration, className: cx('dgm-navigation', `dgm-navigation--${variant}`, className), children: _jsx(Primitive.List, { className: "dgm-navigation-list", children: items.map((item) => (_jsx(Primitive.Item, { className: "dgm-navigation-item", children: 'items' in item ? (_jsx(NavigationPanel, { label: item.label, children: _jsx("ul", { children: item.items.map((child) => (_jsx("li", { children: link(child) }, child.id))) }) })) : (link(item)) }, item.id))) }) }));
 }

package/dist/styles.css

@@ -1609,7 +1609,10 @@ button.dgm-step:hover:not(:disabled),
   cursor: pointer;
   transition: var(--dgm-hover-transition);
 }
-.dgm-dropdown-item[data-highlighted]:not([data-disabled]) {
+/* Ghost distingue el foco de teclado del foco que Radix mueve con el puntero. */
+.dgm-dropdown-item:not(.dgm-dropdown-item--ghost)[data-highlighted]:not([data-disabled]),
+.dgm-dropdown:not([data-input-mode='pointer'])
+  .dgm-dropdown-item--ghost:focus-visible:not([data-disabled]) {
   outline: 2px solid var(--dgm-primary);
   outline-offset: -2px;
 }
@@ -3338,6 +3341,19 @@ button.dgm-step:disabled {
 .dgm-navigation-trigger[data-state='open'] {
   background: var(--dgm-subtle);
 }
+/* Conserva la geometría y el foco compartidos, también dentro de los submenús. */
+.dgm-navigation--ghost .dgm-navigation-trigger,
+.dgm-navigation--ghost .dgm-navigation-link {
+  background: transparent;
+  border-color: transparent;
+}
+.dgm-navigation--ghost .dgm-navigation-link[data-active],
+.dgm-navigation--ghost .dgm-navigation-trigger[data-state='open'],
+.dgm-navigation--ghost .dgm-navigation-trigger:hover:not(:disabled),
+.dgm-navigation--ghost .dgm-navigation-link:hover:not([aria-disabled='true']) {
+  background: var(--dgm-hover);
+  color: var(--dgm-on-hover);
+}
 .dgm-navigation-content {
   /* Misma separación inicial que Popover y los selectores que lo componen. */
   --dgm-navigation-gap: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "danielgm-ui",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Accessible React components for Next.js and the web.",
   "repository": {
     "type": "git",