danielgm-ui 0.1.0

package/dist/progress.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './utils.js';
+export function Progress({ label, value, max = 100, showValue = false, valueText, size = 'md', className, }) {
+    const limit = Number.isFinite(max) && max > 0 ? max : 100;
+    const current = value === undefined || !Number.isFinite(value)
+        ? undefined
+        : Math.max(0, Math.min(limit, value));
+    return (_jsxs("div", { className: cx('dgm-progress', `dgm-progress--${size}`, className), children: [_jsxs("div", { className: "dgm-progress-label", children: [_jsx("span", { children: label }), showValue && current !== undefined && (_jsxs("span", { "aria-hidden": "true", children: [Math.round((current / limit) * 100), "%"] }))] }), _jsx("progress", { "aria-label": label, "aria-valuetext": valueText, max: limit, value: current })] }));
+}

package/dist/radio-group.d.ts

@@ -0,0 +1,46 @@
+/** Selección única visible, con navegación por flechas y participación en formularios. */
+import { type ReactNode } from 'react';
+export interface RadioOption {
+    /** Valor único y no vacío que se envía al formulario. */
+    value: string;
+    /** Etiqueta visible: admite texto e iconos decorativos. */
+    label: ReactNode;
+    /** Ayuda de esta opción, vinculada al radio mediante ARIA. */
+    description?: ReactNode;
+    /** Desactiva solo esta alternativa. */
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    /** Nombre visible y accesible del conjunto. */
+    label: ReactNode;
+    /** Alternativas en orden de lectura, con valores estables. */
+    options: readonly RadioOption[];
+    /** Valor controlado; no combinar con defaultValue. */
+    value?: string;
+    /** No selecciona ninguna opción por defecto. */
+    defaultValue?: string;
+    /** Notifica el valor seleccionado con teclado o puntero. */
+    onValueChange?: (value: string) => void;
+    /** Ayuda común del grupo. */
+    description?: ReactNode;
+    /** Error visible; activa aria-invalid, sin validar la lógica de negocio. */
+    error?: ReactNode;
+    /** Nombre de los radios de formulario que crea Radix. */
+    name?: string;
+    /** Exige una opción seleccionada en el formulario. @defaultValue false */
+    required?: boolean;
+    /** Impide interactuar con todo el grupo. @defaultValue false */
+    disabled?: boolean;
+    /** Distribución y dirección de navegación. @defaultValue 'vertical' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Las flechas vuelven al principio al llegar al final. @defaultValue true */
+    loop?: boolean;
+    /** Identificador del grupo. Se genera con useId si se omite. */
+    id?: string;
+    /** Clase del contenedor con role radiogroup. */
+    className?: string;
+    /** Clase del conjunto formado por etiqueta, radios y mensajes. */
+    wrapperClassName?: string;
+}
+/** El ref apunta al grupo. Cada etiqueta amplía el área que permite elegir la opción. */
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/radio-group.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Selección única visible, con navegación por flechas y participación en formularios. */
+import { forwardRef, useId } from 'react';
+import * as Primitive from '@radix-ui/react-radio-group';
+import { cx, hasContent } from './utils.js';
+/** El ref apunta al grupo. Cada etiqueta amplía el área que permite elegir la opción. */
+export const RadioGroup = forwardRef(function RadioGroup({ label, options, value, defaultValue, onValueChange, description, error, name, required, disabled, orientation = 'vertical', loop = true, id, className, wrapperClassName, }, ref) {
+    const generatedId = useId();
+    const controlId = id ?? `dgm-radio-${generatedId}`;
+    const describedBy = cx(hasContent(description) && `${controlId}-description`, hasContent(error) && `${controlId}-error`) || undefined;
+    return (_jsxs("div", { className: cx('dgm-field', wrapperClassName), children: [_jsxs("span", { className: "dgm-label", id: `${controlId}-label`, children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] }), _jsx(Primitive.Root, { ref: ref, id: controlId, value: value, defaultValue: defaultValue, onValueChange: onValueChange, name: name, required: required, disabled: disabled, orientation: orientation, loop: loop, "aria-labelledby": `${controlId}-label`, "aria-describedby": describedBy, "aria-invalid": hasContent(error) || undefined, className: cx('dgm-radio-group', className), children: options.map((option, index) => {
+                    const optionId = `${controlId}-option-${index}`;
+                    return (_jsxs("label", { htmlFor: optionId, className: "dgm-radio-option", "data-disabled": disabled || option.disabled || undefined, children: [_jsx(Primitive.Item, { id: optionId, value: option.value, disabled: option.disabled, "aria-labelledby": `${optionId}-label`, "aria-describedby": hasContent(option.description) ? `${optionId}-description` : undefined, className: "dgm-radio-control", children: _jsx("span", { className: "dgm-radio-dot", "aria-hidden": "true" }) }), _jsxs("span", { className: "dgm-radio-copy", children: [_jsx("span", { id: `${optionId}-label`, children: option.label }), hasContent(option.description) && (_jsx("span", { className: "dgm-description", id: `${optionId}-description`, children: option.description }))] })] }, 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/resizable-panels.d.ts

@@ -0,0 +1,22 @@
+/** Dos paneles ajustables mediante Pointer Events o teclado, sin listeners globales ni tamaños en píxeles persistidos. */
+import { type CSSProperties, type ReactElement, type ReactNode } from 'react';
+export interface ResizablePanelsProps {
+    first: ReactNode;
+    second: ReactNode;
+    firstLabel: string;
+    secondLabel: string;
+    label: string;
+    /** Tamaño del primer panel como porcentaje del espacio útil, sin contar el separador. */
+    size?: number;
+    defaultSize?: number;
+    onSizeChange?: (size: number) => void;
+    minSize?: number;
+    maxSize?: number;
+    orientation?: 'horizontal' | 'vertical';
+    dir?: 'ltr' | 'rtl';
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Flechas mueven 1%, Shift+flecha 10%, Home/End alcanzan límites y Enter vuelve al tamaño inicial. */
+export declare function ResizablePanels({ first, second, firstLabel, secondLabel, label, size, defaultSize, onSizeChange, minSize, maxSize, orientation, dir, disabled, className, style, }: ResizablePanelsProps): ReactElement;

package/dist/resizable-panels.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Dos paneles ajustables mediante Pointer Events o teclado, sin listeners globales ni tamaños en píxeles persistidos. */
+import { useId, useRef } from 'react';
+import { useControllable } from './internal/state.js';
+import { cx } from './utils.js';
+/** Flechas mueven 1%, Shift+flecha 10%, Home/End alcanzan límites y Enter vuelve al tamaño inicial. */
+export function ResizablePanels({ first, second, firstLabel, secondLabel, label, size, defaultSize = 50, onSizeChange, minSize = 15, maxSize = 85, orientation = 'horizontal', dir = 'ltr', disabled, className, style, }) {
+    if (![minSize, maxSize, defaultSize, size ?? 50].every(Number.isFinite) ||
+        minSize < 0 ||
+        maxSize > 100 ||
+        minSize >= maxSize)
+        throw new RangeError('ResizablePanels requires 0 <= minSize < maxSize <= 100.');
+    const [current, change] = useControllable(size, defaultSize, onSizeChange);
+    const root = useRef(null);
+    const dragging = useRef(false);
+    const id = useId();
+    const vertical = orientation === 'vertical';
+    const clamp = (value) => Math.min(maxSize, Math.max(minSize, value));
+    const actual = clamp(current);
+    const tracks = `minmax(0, ${actual}fr) 1rem minmax(0, ${100 - actual}fr)`;
+    return (_jsxs("div", { ref: root, dir: dir, className: cx('dgm-resizable', className), "data-orientation": orientation, style: { ...style, [vertical ? 'gridTemplateRows' : 'gridTemplateColumns']: tracks }, children: [_jsx("section", { id: `${id}-first`, "aria-label": firstLabel, className: "dgm-resizable-panel", children: first }), _jsx("div", { role: "separator", tabIndex: disabled ? -1 : 0, "aria-label": label, "aria-controls": `${id}-first`, "aria-orientation": vertical ? 'horizontal' : 'vertical', "aria-valuemin": minSize, "aria-valuemax": maxSize, "aria-valuenow": Math.round(actual), "aria-disabled": disabled || undefined, className: "dgm-resize-handle", onKeyDown: (event) => {
+                    if (disabled)
+                        return;
+                    const forward = vertical ? 'ArrowDown' : dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+                    const backward = vertical ? 'ArrowUp' : dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+                    let next;
+                    if (event.key === forward)
+                        next = actual + (event.shiftKey ? 10 : 1);
+                    else if (event.key === backward)
+                        next = actual - (event.shiftKey ? 10 : 1);
+                    else if (event.key === 'Home')
+                        next = minSize;
+                    else if (event.key === 'End')
+                        next = maxSize;
+                    else if (event.key === 'Enter')
+                        next = defaultSize;
+                    else
+                        return;
+                    event.preventDefault();
+                    change(clamp(next));
+                }, onPointerDown: (event) => {
+                    if (!disabled && event.button === 0) {
+                        dragging.current = true;
+                        event.currentTarget.setPointerCapture(event.pointerId);
+                        event.currentTarget.focus({ preventScroll: true });
+                    }
+                }, onPointerMove: (event) => {
+                    if (!dragging.current || disabled || !root.current)
+                        return;
+                    const bounds = root.current.getBoundingClientRect();
+                    const handle = event.currentTarget.getBoundingClientRect();
+                    const available = vertical ? bounds.height - handle.height : bounds.width - handle.width;
+                    if (available <= 0)
+                        return;
+                    const position = vertical
+                        ? event.clientY - bounds.top - handle.height / 2
+                        : (dir === 'rtl' ? bounds.right - event.clientX : event.clientX - bounds.left) -
+                            handle.width / 2;
+                    change(clamp((position / available) * 100));
+                }, onPointerUp: (event) => {
+                    dragging.current = false;
+                    if (event.currentTarget.hasPointerCapture(event.pointerId))
+                        event.currentTarget.releasePointerCapture(event.pointerId);
+                }, onPointerCancel: () => {
+                    dragging.current = false;
+                }, onLostPointerCapture: () => {
+                    dragging.current = false;
+                }, children: _jsx("span", { "aria-hidden": "true" }) }), _jsx("section", { "aria-label": secondLabel, className: "dgm-resizable-panel", children: second })] }));
+}

package/dist/skeleton.d.ts

@@ -0,0 +1,17 @@
+/** Marcador visual estático compatible con Server Components. No necesita hidratación. */
+import type { CSSProperties, HTMLAttributes, ReactElement } from 'react';
+export interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Forma del marcador. @defaultValue 'text' */
+    variant?: 'text' | 'rectangular' | 'circular';
+    /** Número en píxeles o unidad CSS. @defaultValue '100%' */
+    width?: CSSProperties['width'];
+    /** Altura CSS; text usa 1em y las otras formas 3rem por defecto. */
+    height?: CSSProperties['height'];
+    /** Pulso suave o marcador inmóvil. @defaultValue true */
+    animate?: boolean;
+}
+/**
+ * Siempre decorativo: el consumidor anuncia la carga una vez en su región con aria-busy.
+ * No repite «cargando» por cada línea. style puede afinar las dimensiones y la forma.
+ */
+export declare function Skeleton({ variant, width, height, animate, className, style, ...props }: SkeletonProps): ReactElement;

package/dist/skeleton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './utils.js';
+/**
+ * Siempre decorativo: el consumidor anuncia la carga una vez en su región con aria-busy.
+ * No repite «cargando» por cada línea. style puede afinar las dimensiones y la forma.
+ */
+export function Skeleton({ variant = 'text', width = '100%', height, animate = true, className, style, ...props }) {
+    return (_jsx("span", { ...props, "aria-hidden": "true", className: cx('dgm-skeleton', `dgm-skeleton--${variant}`, animate && 'dgm-skeleton--animated'), style: { width, height: height ?? (variant === 'text' ? '1em' : '3rem'), ...style } }));
+}

package/dist/slider.d.ts

@@ -0,0 +1,41 @@
+/** Radix mantiene teclado, gestos táctiles y valores de formulario; la librería aporta etiquetas y estilo. */
+import { type ReactElement, type ReactNode } from 'react';
+/** Opciones comunes de los selectores numéricos. min < max y step debe ser positivo. */
+export interface SliderBaseProps {
+    label: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    name?: string;
+    /** 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. */
+    marks?: readonly {
+        value: number;
+        label?: ReactNode;
+    }[];
+    className?: string;
+    id?: string;
+}
+export interface SliderProps extends SliderBaseProps {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /** Se ejecuta al terminar el arrastre o un cambio de teclado. */
+    onValueCommit?: (value: number) => void;
+}
+export interface RangeSliderProps extends SliderBaseProps {
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onValueChange?: (value: [number, number]) => void;
+    onValueCommit?: (value: [number, number]) => void;
+    /** Nombres de los extremos para lectores de pantalla. */
+    thumbLabels?: [string, string];
+}
+/** Un valor: flechas cambian por step y Home/End recorren los límites. Controla value para reset de formulario. */
+export declare function Slider({ value, defaultValue, onValueChange, onValueCommit, ...props }: SliderProps): ReactElement;
+/** Dos extremos ordenados. FormData.getAll(name) recoge ambos valores; pueden coincidir. */
+export declare function RangeSlider({ value, defaultValue, onValueChange, onValueCommit, thumbLabels, ...props }: RangeSliderProps): ReactElement;

package/dist/slider.js

@@ -0,0 +1,29 @@
+'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 * 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, }) {
+    const generated = useId();
+    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
+                    .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 }))] }));
+}
+/** Un valor: flechas cambian por step y Home/End recorren los límites. Controla value para reset de formulario. */
+export function Slider({ value, defaultValue, onValueChange, onValueCommit, ...props }) {
+    const [current, change] = useControllable(value, defaultValue ?? props.min ?? 0, onValueChange);
+    return (_jsx(SliderControl, { ...props, values: [current], change: (next) => change(next[0]), commit: (next) => onValueCommit?.(next[0]) }));
+}
+/** Dos extremos ordenados. FormData.getAll(name) recoge ambos valores; pueden coincidir. */
+export function RangeSlider({ value, defaultValue, onValueChange, onValueCommit, thumbLabels = ['Minimum', 'Maximum'], ...props }) {
+    const [current, change] = useControllable(value, defaultValue ?? [props.min ?? 0, props.max ?? 100], onValueChange);
+    return (_jsx(SliderControl, { ...props, values: current, thumbLabels: thumbLabels, change: (next) => change([next[0], next[1]]), commit: (next) => onValueCommit?.([next[0], next[1]]) }));
+}

package/dist/stepper.d.ts

@@ -0,0 +1,25 @@
+import type { ReactElement, ReactNode } from 'react';
+export interface StepItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+export interface StepperProps {
+    steps: readonly StepItem[];
+    /** ID del paso actual. */
+    value: string;
+    /** Si se omite, presenta el progreso sin botones de navegación. */
+    onValueChange?: (id: string) => void;
+    /** Impide saltar a pasos futuros desde el índice. @defaultValue true */
+    linear?: boolean;
+    /** @defaultValue 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Nombre accesible de la navegación. */
+    label: string;
+    /** Si es true, todos los pasos aparecen completados. */
+    completed?: boolean;
+    locale?: 'es' | 'en';
+    className?: string;
+}
+export declare function Stepper({ steps, value, onValueChange, linear, orientation, label, completed, locale, className, }: StepperProps): ReactElement;

package/dist/stepper.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Índice de un proceso controlado. La validación y el contenido de los pasos pertenecen al consumidor. */
+import { CheckIcon } from './internal/icons.js';
+import { cx } from './utils.js';
+export function Stepper({ steps, value, onValueChange, linear = true, orientation = 'horizontal', label, completed = false, locale = 'en', className, }) {
+    const active = steps.findIndex((step) => step.id === value);
+    const es = locale === 'es';
+    return (_jsx("nav", { "aria-label": label, className: cx('dgm-stepper', className), "data-orientation": orientation, children: _jsx("ol", { children: steps.map((step, index) => {
+                const done = completed || index < active;
+                const current = !completed && step.id === value;
+                const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: "dgm-step-number", "aria-hidden": "true", children: done ? _jsx(CheckIcon, {}) : index + 1 }), _jsxs("span", { className: "dgm-step-copy", children: [_jsx("span", { children: step.title }), step.description && _jsx("span", { className: "dgm-description", children: step.description }), _jsx("span", { className: "dgm-visually-hidden", children: done
+                                        ? es
+                                            ? 'Completado'
+                                            : 'Completed'
+                                        : current
+                                            ? es
+                                                ? 'Actual'
+                                                : 'Current'
+                                            : es
+                                                ? 'Pendiente'
+                                                : 'Pending' })] })] }));
+                return (_jsx("li", { "data-complete": done || undefined, "data-current": current || undefined, children: onValueChange ? (_jsx("button", { type: "button", className: "dgm-step", disabled: step.disabled || (linear && !completed && index > active), "aria-current": current ? 'step' : undefined, onClick: () => onValueChange(step.id), children: content })) : (_jsx("div", { className: "dgm-step", "aria-current": current ? 'step' : undefined, children: content })) }, step.id));
+            }) }) }));
+}