danielgm-ui 0.4.1 → 0.4.2

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

@@ -2775,7 +2775,7 @@ button.dgm-step:hover:not(:disabled),
 }
 .dgm-table-sort-icon {
   position: absolute;
-  inset-inline-end: 0;
+  inset-inline-end: 0.5625rem;
   top: 50%;
   width: 0.875rem;
   height: 0.875rem;
@@ -2793,22 +2793,13 @@ button.dgm-step:hover:not(:disabled),
   opacity: 1;
   transform: translateY(-50%) scale(1);
 }
-.dgm-data-table th[data-align='center'] .dgm-table-sort[data-sorted] .dgm-table-sort-label,
-.dgm-data-table th[data-align='end'] .dgm-table-sort[data-sorted] .dgm-table-sort-label {
+.dgm-data-table th .dgm-table-sort[data-sorted] .dgm-table-sort-label {
   transform: translateX(-0.5625rem);
 }
-.dgm-data-table th[data-align='center'] .dgm-table-sort-icon,
-.dgm-data-table th[data-align='end'] .dgm-table-sort-icon {
-  inset-inline-end: 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:not([data-align='start'])
-  .dgm-table-sort[data-sorted]
-  .dgm-table-sort-label {
+[dir='rtl'] .dgm-data-table th .dgm-table-sort[data-sorted] .dgm-table-sort-label {
   transform: translateX(0.5625rem);
 }
 @media (prefers-reduced-motion: reduce) {
@@ -3139,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;
@@ -3584,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.1",
+  "version": "0.4.2",
   "description": "Accessible React components for Next.js and the web.",
   "repository": {
     "type": "git",