danielgm-ui 0.4.0 → 0.4.2

package/dist/data-table.d.ts

@@ -10,7 +10,8 @@ export interface DataColumn<T extends object> {
     sortable?: boolean;
     /** Participa en el buscador global. @defaultValue true */
     searchable?: boolean;
-    align?: 'start' | 'end';
+    /** Alineación compartida por cabecera y celdas. @defaultValue 'start' */
+    align?: 'start' | 'center' | 'end';
     /** Ancho estable CSS (px si es número); las columnas sin ancho reparten el espacio restante. */
     width?: CSSProperties['width'];
 }
@@ -27,7 +28,12 @@ export interface DataTableProps<T extends object> {
     caption: string;
     /** Orden controlado. Usa [] para quitarlo. */
     sorting?: DataTableSort[];
+    /** Orden base: conserva aria-sort pero no muestra flecha. */
     defaultSorting?: DataTableSort[];
+    /** Habilita las cabeceras ordenables; cada columna puede desactivarlas. @defaultValue true */
+    sortable?: boolean;
+    /** Delega la ordenación al consumidor sin reordenar data. @defaultValue false */
+    manualSorting?: boolean;
     onSortingChange?: (sorting: DataTableSort[]) => void;
     /** Buscador de todas las columnas habilitadas. @defaultValue true */
     searchable?: boolean;
@@ -50,4 +56,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, 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, page, onPageChange, selectable, selection, defaultSelection, onSelectionChange, loading, emptyMessage, locale, className, }: DataTableProps<T>): ReactElement;

package/dist/data-table.js

@@ -1,7 +1,7 @@
 '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 { ArrowUpIcon, ArrowDownIcon } 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';
@@ -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, 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, 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);
@@ -55,6 +55,7 @@ export function DataTable({ data, columns, getRowId, caption, sorting, defaultSo
             changeSort(functionalUpdate(updater, sort));
             changePage(1);
         },
+        manualSorting,
         globalFilterFn: 'includesString',
         enableMultiSort: false,
     });
@@ -89,11 +90,27 @@ export function DataTable({ data, columns, getRowId, caption, sorting, defaultSo
                                             } }) })), 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'
+                                        const baseline = defaultSorting.find((item) => item.id === column.id);
+                                        const showArrow = Boolean(direction && !(baseline && baseline.desc === (direction === 'desc')));
+                                        return (_jsx("th", { scope: "col", "data-align": column.align ?? 'start', 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));
+                                                    : undefined, children: sortable && instance.getCanSort() ? (_jsxs(Button, { variant: "ghost", size: "sm", className: "dgm-table-sort", "data-sorted": showArrow || undefined, disabled: loading, onClick: () => {
+                                                    // El orden base alterna siempre con su inverso, también en números.
+                                                    if (baseline) {
+                                                        changeSort([
+                                                            {
+                                                                id: column.id,
+                                                                desc: direction ? direction !== 'desc' : !baseline.desc,
+                                                            },
+                                                        ]);
+                                                        changePage(1);
+                                                    }
+                                                    else {
+                                                        instance.toggleSorting();
+                                                    }
+                                                }, children: [_jsx("span", { className: "dgm-table-sort-label", children: column.header }), _jsx("span", { className: "dgm-table-sort-icon", "aria-hidden": "true", children: direction === 'desc' ? _jsx(ArrowDownIcon, {}) : _jsx(ArrowUpIcon, {}) })] })) : (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

package/dist/slider.d.ts

@@ -10,6 +10,8 @@ export interface SliderBaseProps {
     step?: number;
     disabled?: boolean;
     name?: string;
+    /** Visibilidad visual de los extremos en Slider y RangeSlider; conserva foco y accesibilidad. @defaultValue 'always' */
+    thumbVisibility?: 'always' | 'interaction';
     /** Valor visible y aria-valuetext; útil para porcentajes, unidades o precios. */
     formatValue?: (value: number) => string;
     /** Marcas informativas, sin interacción propia. Deben estar entre min y max. */

package/dist/slider.js

@@ -1,19 +1,27 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Radix mantiene teclado, gestos táctiles y valores de formulario; la librería aporta etiquetas y estilo. */
-import { useId } from 'react';
+import { useId, useState, useEffect } from 'react';
 import * as Primitive from '@radix-ui/react-slider';
 import { useControllable } from './internal/state.js';
 import { cx, hasContent } from './utils.js';
 /** Infraestructura interna; cada API pública mantiene un número fijo de controles. */
-function SliderControl({ label, description, error, min = 0, max = 100, step = 1, disabled, name, formatValue = String, marks = [], className, id, values, change, commit, thumbLabels, }) {
+function SliderControl({ label, description, error, min = 0, max = 100, step = 1, disabled, name, thumbVisibility = 'always', formatValue = String, marks = [], className, id, values, change, commit, thumbLabels, }) {
     const generated = useId();
+    const [activePointer, setActivePointer] = useState(null);
+    useEffect(() => {
+        if (disabled)
+            setActivePointer(null);
+    }, [disabled]);
     const controlId = id ?? `dgm-slider-${generated}`;
     if (![min, max, step].every(Number.isFinite) || min >= max || step <= 0) {
         throw new RangeError('Slider requires finite min < max and step > 0.');
     }
     const describedBy = cx(hasContent(description) && `${controlId}-description`, hasContent(error) && `${controlId}-error`) || undefined;
-    return (_jsxs("div", { className: cx('dgm-field', 'dgm-slider-field', className), id: controlId, children: [_jsxs("div", { className: "dgm-slider-heading", children: [_jsx("span", { className: "dgm-label", id: `${controlId}-label`, children: label }), _jsx("span", { className: "dgm-description", "aria-hidden": "true", children: values.map(formatValue).join(' – ') })] }), _jsxs(Primitive.Root, { className: "dgm-slider", value: values, onValueChange: change, onValueCommit: commit, min: min, max: max, step: step, disabled: disabled, name: name, children: [_jsx(Primitive.Track, { className: "dgm-slider-track", children: _jsx(Primitive.Range, { className: "dgm-slider-range" }) }), values.map((value, index) => (_jsx(Primitive.Thumb, { name: name, className: "dgm-slider-thumb", "aria-labelledby": `${controlId}-label${thumbLabels ? ` ${controlId}-thumb-${index}` : ''}`, "aria-describedby": describedBy, "aria-invalid": hasContent(error) || undefined, "aria-valuetext": formatValue(value) }, index)))] }), thumbLabels?.map((text, index) => (_jsx("span", { id: `${controlId}-thumb-${index}`, className: "dgm-visually-hidden", children: text }, index))), marks.length > 0 && (_jsx("div", { className: "dgm-slider-marks", "aria-hidden": "true", children: marks
+    return (_jsxs("div", { className: cx('dgm-field', 'dgm-slider-field', className), id: controlId, children: [_jsxs("div", { className: "dgm-slider-heading", children: [_jsx("span", { className: "dgm-label", id: `${controlId}-label`, children: label }), _jsx("span", { className: "dgm-description", "aria-hidden": "true", children: values.map(formatValue).join(' – ') })] }), _jsxs(Primitive.Root, { className: "dgm-slider", "data-thumb-visibility": thumbVisibility, "data-dragging": !disabled && activePointer !== null ? '' : undefined, onPointerDownCapture: (event) => {
+                    if (!disabled && event.button === 0)
+                        setActivePointer(event.pointerId);
+                }, onPointerUpCapture: () => setActivePointer(null), onPointerCancelCapture: () => setActivePointer(null), onLostPointerCapture: () => setActivePointer(null), value: values, onValueChange: change, onValueCommit: commit, min: min, max: max, step: step, disabled: disabled, name: name, children: [_jsx(Primitive.Track, { className: "dgm-slider-track", children: _jsx(Primitive.Range, { className: "dgm-slider-range" }) }), values.map((value, index) => (_jsx(Primitive.Thumb, { name: name, className: "dgm-slider-thumb", "aria-labelledby": `${controlId}-label${thumbLabels ? ` ${controlId}-thumb-${index}` : ''}`, "aria-describedby": describedBy, "aria-invalid": hasContent(error) || undefined, "aria-valuetext": formatValue(value) }, index)))] }), thumbLabels?.map((text, index) => (_jsx("span", { id: `${controlId}-thumb-${index}`, className: "dgm-visually-hidden", children: text }, index))), marks.length > 0 && (_jsx("div", { className: "dgm-slider-marks", "aria-hidden": "true", children: marks
                     .filter((mark) => mark.value >= min && mark.value <= max)
                     .map((mark) => (_jsx("span", { style: { left: `${(100 * (mark.value - min)) / (max - min)}%` }, children: mark.label ?? formatValue(mark.value) }, mark.value))) })), hasContent(description) && (_jsx("span", { id: `${controlId}-description`, className: "dgm-description", children: description })), hasContent(error) && (_jsx("span", { id: `${controlId}-error`, className: "dgm-error", children: error }))] }));
 }

package/dist/styles.css

@@ -2759,8 +2759,54 @@ button.dgm-step:hover:not(:disabled),
   font-weight: var(--dgm-font-weight-semibold);
   background: var(--dgm-subtle);
 }
-.dgm-data-table th .dgm-button {
-  padding-inline: 0;
+.dgm-data-table th .dgm-table-sort {
+  --dgm-table-sort-space: 1.125rem;
+  display: inline-block;
+  position: relative;
+  max-width: 100%;
+  padding-inline: var(--dgm-table-sort-space);
+  text-align: inherit;
+  white-space: normal;
+}
+.dgm-table-sort-label {
+  position: relative;
+  display: inline-block;
+  transition: transform 240ms ease;
+}
+.dgm-table-sort-icon {
+  position: absolute;
+  inset-inline-end: 0.5625rem;
+  top: 50%;
+  width: 0.875rem;
+  height: 0.875rem;
+  opacity: 0;
+  transform: translateY(-50%) scale(0.5);
+  transition:
+    opacity 240ms ease,
+    transform 240ms ease;
+}
+.dgm-table-sort-icon svg {
+  width: 100%;
+  height: 100%;
+}
+.dgm-table-sort[data-sorted] .dgm-table-sort-icon {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+.dgm-data-table th .dgm-table-sort[data-sorted] .dgm-table-sort-label {
+  transform: translateX(-0.5625rem);
+}
+.dgm-data-table th[data-align='start'] .dgm-table-sort {
+  margin-inline-start: calc(-1 * var(--dgm-table-sort-space));
+}
+[dir='rtl'] .dgm-data-table th .dgm-table-sort[data-sorted] .dgm-table-sort-label {
+  transform: translateX(0.5625rem);
+}
+@media (prefers-reduced-motion: reduce) {
+  .dgm-table-sort-label,
+  .dgm-table-sort-icon {
+    transition: none;
+  }
 }
 .dgm-data-table tr[data-selected] {
   background: var(--dgm-subtle);
@@ -3084,6 +3130,22 @@ button.dgm-step:disabled {
   box-shadow: 0 2px 5px #0002;
   cursor: grab;
 }
+/* Opacidad conserva la geometría, el área táctil y los controles accesibles. */
+.dgm-slider[data-thumb-visibility='interaction'] .dgm-slider-thumb {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.dgm-slider[data-thumb-visibility='interaction']:not([data-disabled]):focus-within
+  .dgm-slider-thumb,
+.dgm-slider[data-thumb-visibility='interaction']:not([data-disabled])[data-dragging]
+  .dgm-slider-thumb {
+  opacity: 1;
+}
+@media (hover: hover) {
+  .dgm-slider[data-thumb-visibility='interaction']:not([data-disabled]):hover .dgm-slider-thumb {
+    opacity: 1;
+  }
+}
 .dgm-slider-thumb::after {
   content: '';
   position: absolute;
@@ -3529,7 +3591,8 @@ button.dgm-step:disabled {
   .dgm-navigation-content {
     animation: none;
   }
-  .dgm-toggle-item {
+  .dgm-toggle-item,
+  .dgm-slider[data-thumb-visibility='interaction'] .dgm-slider-thumb {
     transition: none;
   }
 }

package/package.json

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