danielgm-ui 0.1.0

package/dist/tabs.d.ts

@@ -0,0 +1,32 @@
+/** Paneles relacionados con foco itinerante y asociaciones ARIA proporcionadas por Radix. */
+import type { ReactElement, ReactNode } from 'react';
+export interface TabItem {
+    /** Identificador estable, único y no vacío dentro del grupo. */
+    value: string;
+    /** Etiqueta visible; puede incluir un icono decorativo junto al texto. */
+    label: ReactNode;
+    /** Contenido del panel. Se desmonta cuando la pestaña queda inactiva. */
+    content: ReactNode;
+    /** Excluye la pestaña de la interacción y del recorrido por flechas. */
+    disabled?: boolean;
+}
+export interface TabsProps {
+    /** Nombre accesible del grupo de pestañas. */
+    label: string;
+    /** Pestañas y paneles en su orden visual. */
+    items: readonly TabItem[];
+    /** Pestaña controlada. No combinar con defaultValue. */
+    value?: string;
+    /** Pestaña inicial. Por defecto, la primera habilitada. */
+    defaultValue?: string;
+    /** Recibe el identificador de la pestaña seleccionada. */
+    onValueChange?: (value: string) => void;
+    /** Determina la distribución y las flechas de navegación. @defaultValue 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** manual necesita Enter o Espacio para activar tras mover el foco. @defaultValue 'automatic' */
+    activationMode?: 'automatic' | 'manual';
+    /** Clase del contenedor del grupo. */
+    className?: string;
+}
+/** El estado de formularios que deba sobrevivir al cambio de panel se conserva en el consumidor. */
+export declare function Tabs({ label, items, value, defaultValue, onValueChange, orientation, activationMode, className, }: TabsProps): ReactElement;

package/dist/tabs.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Primitive from '@radix-ui/react-tabs';
+import { cx } from './utils.js';
+/** El estado de formularios que deba sobrevivir al cambio de panel se conserva en el consumidor. */
+export function Tabs({ label, items, value, defaultValue, onValueChange, orientation = 'horizontal', activationMode = 'automatic', className, }) {
+    return (_jsxs(Primitive.Root, { value: value, defaultValue: defaultValue ?? items.find((item) => !item.disabled)?.value, onValueChange: onValueChange, orientation: orientation, activationMode: activationMode, className: cx('dgm-tabs', className), children: [_jsx(Primitive.List, { "aria-label": label, className: "dgm-tabs-list", children: items.map((item) => (_jsx(Primitive.Trigger, { value: item.value, disabled: item.disabled, className: "dgm-tabs-trigger", children: item.label }, item.value))) }), items.map((item) => (_jsx(Primitive.Content, { value: item.value, className: "dgm-tabs-panel", children: item.content }, item.value)))] }));
+}

package/dist/toast.d.ts

@@ -0,0 +1,54 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type AlertProps } from './display.js';
+export interface ToastOptions {
+    /** Título visible y anunciado. */
+    title: ReactNode;
+    /** Cuerpo opcional del anuncio. Evita controles interactivos; utiliza action. */
+    description?: ReactNode;
+    /** La intención visual es independiente de la urgencia del anuncio. @defaultValue 'info' */
+    tone?: AlertProps['tone'];
+    /** Milisegundos; 0 conserva el aviso hasta cerrarlo. Hereda del Provider si se omite. */
+    duration?: number;
+    /** background anuncia con cortesía; foreground interrumpe. @defaultValue 'background' */
+    type?: 'foreground' | 'background';
+    /** Acción opcional que cierra el aviso al terminar. Siempre debe existir otra forma de realizarla. */
+    action?: {
+        label: string;
+        altText: string;
+        onClick: () => void;
+    };
+    /** Etiqueta localizada para la X de este aviso; hereda del Provider. */
+    closeLabel?: string;
+    /** Clase de la notificación, en el portal. */
+    className?: string;
+}
+export interface ToastContextValue {
+    /** Añade a la cola y devuelve un identificador para su cierre posterior. */
+    notify: (options: ToastOptions) => string;
+    /** Cierra un aviso por ID, o todos si se omite. También retira los pendientes. */
+    dismiss: (id?: string) => void;
+}
+export interface ToastProviderProps {
+    /** Área de la aplicación cuyos descendientes pueden usar useToast. */
+    children: ReactNode;
+    /** Duración predeterminada en ms. 0 desactiva el cierre automático. @defaultValue 5000 */
+    duration?: number;
+    /** Límite de avisos visibles; los demás esperan por orden de llegada. @defaultValue 3 */
+    maxVisible?: number;
+    /** Nombre accesible localizado de cada notificación. @defaultValue 'Notification' */
+    label?: string;
+    /** Nombre de la región; {hotkey} se sustituye por F8. @defaultValue 'Notifications ({hotkey})' */
+    viewportLabel?: string;
+    /** Nombre accesible localizado de las X. @defaultValue 'Dismiss notification' */
+    closeLabel?: string;
+    /** Clase de la pila fija abajo a la derecha. */
+    className?: string;
+}
+/** Se usa dentro de ToastProvider, en un Client Component de React/Next.js. */
+export declare function useToast(): ToastContextValue;
+/**
+ * Monta un único Provider alrededor del área que comparte avisos. En Astro debe
+ * envolver a sus consumidores dentro de la misma isla React. Solo accede al DOM
+ * después de hidratar: servidor y primer render cliente producen el mismo HTML.
+ */
+export declare function ToastProvider({ children, duration, maxVisible, label, viewportLabel, closeLabel, className, }: ToastProviderProps): ReactElement;

package/dist/toast.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Notificaciones por contexto: sin estado global compartido entre peticiones SSR. */
+import { CloseIcon } from './internal/icons.js';
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import * as Primitive from '@radix-ui/react-toast';
+import { Alert } from './display.js';
+import { Button } from './button.js';
+import { cx, hasContent } from './utils.js';
+const ToastContext = createContext(null);
+/** Se usa dentro de ToastProvider, en un Client Component de React/Next.js. */
+export function useToast() {
+    const context = useContext(ToastContext);
+    if (!context)
+        throw new Error('useToast must be used within ToastProvider.');
+    return context;
+}
+/** Evita que valores negativos o no finitos se conviertan en temporizadores inmediatos. */
+function durationInMs(value) {
+    return value === 0 ? Infinity : Number.isFinite(value) && value > 0 ? value : 5000;
+}
+/** Respeta las listas CSS, sus delays y unidades; una salida no bloquea la cola indefinidamente. */
+function exitDuration(style) {
+    const times = (value) => value.split(',').map((part) => {
+        const number = Number.parseFloat(part) || 0;
+        return part.trim().endsWith('ms') ? number : number * 1000;
+    });
+    const durations = times(style.animationDuration);
+    const delays = times(style.animationDelay);
+    const iterations = style.animationIterationCount.split(',').map((value) => {
+        const count = Number.parseFloat(value);
+        return Number.isFinite(count) ? Math.max(0, count) : 1;
+    });
+    return Math.max(0, ...style.animationName
+        .split(',')
+        .map((name, index) => name.trim() && name.trim() !== 'none'
+        ? durations[index % durations.length] * iterations[index % iterations.length] +
+            delays[index % delays.length]
+        : 0));
+}
+/**
+ * Cada aviso visible posee su ciclo de salida. Radix pausa el tiempo al enfocar,
+ * pasar el puntero por la pila o cambiar de ventana y permite cerrar por swipe.
+ */
+function ToastItem({ notice, duration, closeLabel, dismiss, remove, }) {
+    const element = useRef(null);
+    useEffect(() => {
+        if (notice.open)
+            return;
+        if (element.current?.contains(document.activeElement)) {
+            element.current.closest('ol')?.focus({ preventScroll: true });
+        }
+        element.current?.setAttribute('inert', '');
+        // La cola avanza al terminar el CSS. El respaldo también cubre un CSS ausente
+        // o modificado por el consumidor; sin movimiento, no se introduce demora.
+        const style = element.current && getComputedStyle(element.current);
+        const milliseconds = style ? exitDuration(style) : 0;
+        if (milliseconds <= 0) {
+            remove(notice.id);
+            return;
+        }
+        const timeout = window.setTimeout(() => remove(notice.id), milliseconds + 50);
+        return () => window.clearTimeout(timeout);
+    }, [notice.open, notice.id, remove]);
+    return (_jsxs(Primitive.Root, { ref: element, open: notice.open, "aria-hidden": !notice.open || undefined, type: notice.type ?? 'background', duration: durationInMs(notice.duration ?? duration), onOpenChange: (open) => {
+            if (!open)
+                dismiss(notice.id);
+        }, className: cx('dgm-toast', `dgm-tone--${notice.tone ?? 'info'}`, notice.className), style: { touchAction: 'pan-y' }, onAnimationEnd: (event) => {
+            if (!notice.open && event.target === event.currentTarget)
+                remove(notice.id);
+        }, children: [_jsxs(Alert, { tone: notice.tone, title: _jsx(Primitive.Title, { children: notice.title }), children: [hasContent(notice.description) && (_jsx(Primitive.Description, { children: notice.description })), notice.action && (_jsx(Primitive.Action, { asChild: true, altText: notice.action.altText, children: _jsx(Button, { size: "sm", variant: "outline", className: "dgm-toast-action", onClick: notice.action.onClick, children: notice.action.label }) }))] }), _jsx(Primitive.Close, { className: "dgm-icon-close", "aria-label": notice.closeLabel ?? closeLabel, children: _jsx(CloseIcon, {}) })] }));
+}
+/**
+ * Monta un único Provider alrededor del área que comparte avisos. En Astro debe
+ * envolver a sus consumidores dentro de la misma isla React. Solo accede al DOM
+ * después de hidratar: servidor y primer render cliente producen el mismo HTML.
+ */
+export function ToastProvider({ children, duration = 5000, maxVisible = 3, label = 'Notification', viewportLabel = 'Notifications ({hotkey})', closeLabel = 'Dismiss notification', className, }) {
+    const [notices, setNotices] = useState([]);
+    const [host, setHost] = useState(null);
+    const prefix = useId();
+    const sequence = useRef(0);
+    const limit = Number.isFinite(maxVisible) ? Math.max(1, Math.floor(maxVisible)) : 3;
+    useEffect(() => {
+        setHost(document.body);
+    }, []);
+    const notify = useCallback((options) => {
+        const id = `${prefix}-${++sequence.current}`;
+        setNotices((current) => [...current, { ...options, id, open: true }]);
+        return id;
+    }, [prefix]);
+    const remove = useCallback((id) => {
+        setNotices((current) => current.filter((notice) => notice.id !== id));
+    }, []);
+    const dismiss = useCallback((id) => {
+        setNotices((current) => current.flatMap((notice, index) => {
+            if (id !== undefined && notice.id !== id)
+                return [notice];
+            // Los avisos en espera no están montados: no tienen una salida que esperar.
+            return index < limit ? [{ ...notice, open: false }] : [];
+        }));
+    }, [limit]);
+    const context = useMemo(() => ({ notify, dismiss }), [notify, dismiss]);
+    return (_jsx(ToastContext.Provider, { value: context, children: _jsxs(Primitive.Provider, { label: label, duration: durationInMs(duration), swipeDirection: "right", children: [children, host &&
+                    createPortal(_jsxs(_Fragment, { children: [notices.slice(0, limit).map((notice) => (_jsx(ToastItem, { notice: notice, duration: duration, closeLabel: closeLabel, dismiss: dismiss, remove: remove }, notice.id))), _jsx(Primitive.Viewport, { label: viewportLabel, className: cx('dgm-toast-viewport', className) })] }), host)] }) }));
+}

package/dist/toggle-group.d.ts

@@ -0,0 +1,32 @@
+/** Botones con estado: Radix aporta foco itinerante y flechas; anuncia aria-checked en single y aria-pressed en multiple. */
+import type { ReactElement, ReactNode } from 'react';
+export interface ToggleOption {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface ToggleGroupBase {
+    label: string;
+    options: readonly ToggleOption[];
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    /** Oculta el texto visible de las opciones; label sigue siendo su nombre accesible. */
+    iconOnly?: boolean;
+    className?: string;
+}
+export type ToggleGroupProps = ToggleGroupBase & ({
+    type?: 'single';
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+} | {
+    type: 'multiple';
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+});
+/** No es un campo de formulario: single permite desmarcar la opción activa. Usa RadioGroup si es obligatoria. */
+export declare function ToggleGroup({ label, options, disabled, orientation, size, iconOnly, className, ...state }: ToggleGroupProps): ReactElement;
+export {};

package/dist/toggle-group.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Primitive from '@radix-ui/react-toggle-group';
+import { cx } from './utils.js';
+/** No es un campo de formulario: single permite desmarcar la opción activa. Usa RadioGroup si es obligatoria. */
+export function ToggleGroup({ label, options, disabled, orientation = 'horizontal', size = 'md', iconOnly = false, className, ...state }) {
+    const children = options.map((option) => (_jsxs(Primitive.Item, { value: option.value, disabled: option.disabled, "aria-label": option.label, className: cx('dgm-toggle-item', `dgm-toggle-item--${size}`, iconOnly && 'dgm-toggle-item--icon'), children: [option.icon && _jsx("span", { "aria-hidden": "true", children: option.icon }), !iconOnly && option.label] }, option.value)));
+    const props = {
+        'aria-label': label,
+        disabled,
+        orientation,
+        className: cx('dgm-toggle-group', className),
+        children,
+    };
+    return state.type === 'multiple' ? (_jsx(Primitive.Root, { ...props, ...state })) : (_jsx(Primitive.Root, { ...props, ...state, type: "single" }));
+}

package/dist/toggles.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Controles booleanos. Ambos usan un input nativo para conservar teclado, foco,
+ * formularios y eventos. Solo cambian su semántica anunciada y su presentación CSS.
+ */
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+/**
+ * Atributos de un checkbox nativo, sin permitir cambiar type, size o children.
+ * checked/onChange controla el estado desde React; defaultChecked deja el estado al DOM.
+ * name y value se envían en FormData únicamente cuando el control está marcado.
+ */
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'children'> {
+    /** Etiqueta visible y estable que identifica la opción. */
+    label: ReactNode;
+    /** Ayuda opcional asociada mediante aria-describedby. */
+    description?: ReactNode;
+    /** Clase del contenedor. className afecta al input nativo. */
+    wrapperClassName?: string;
+}
+/** Mismo contrato de estado y formularios que Checkbox, con semántica de interruptor. */
+export interface SwitchProps extends CheckboxProps {
+}
+/**
+ * Selección independiente con ref al HTMLInputElement.
+ * La etiqueta es clicable gracias a htmlFor; Espacio alterna el estado de forma nativa.
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+/**
+ * Interruptor binario con role="switch" y ref al HTMLInputElement.
+ * Sigue siendo type="checkbox": no necesita eventos artificiales para teclado o forms.
+ * La etiqueta debe permanecer igual al activar/desactivar; el estado lo aporta checked.
+ * No implementa un tercer estado indeterminado.
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/toggles.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Controles booleanos. Ambos usan un input nativo para conservar teclado, foco,
+ * formularios y eventos. Solo cambian su semántica anunciada y su presentación CSS.
+ */
+import { forwardRef, useId } from 'react';
+import { cx, hasContent } from './utils.js';
+/**
+ * Selección independiente con ref al HTMLInputElement.
+ * La etiqueta es clicable gracias a htmlFor; Espacio alterna el estado de forma nativa.
+ */
+export const Checkbox = forwardRef(function Checkbox({ label, description, wrapperClassName, className, id, 'aria-describedby': describedBy, ...props }, ref) {
+    // La llamada incondicional mantiene estable el orden de hooks si cambia la prop id.
+    const generatedId = useId();
+    const controlId = id ?? `dgm-${generatedId}`;
+    return (_jsxs("div", { className: cx('dgm-choice', wrapperClassName), children: [_jsx("input", { ...props, ref: ref, type: "checkbox", id: controlId, "aria-describedby": cx(describedBy, hasContent(description) && `${controlId}-description`) || undefined, className: cx('dgm-checkbox', className) }), _jsxs("div", { className: "dgm-choice-text", children: [_jsx("label", { className: "dgm-label", htmlFor: controlId, children: label }), hasContent(description) && (_jsx("span", { className: "dgm-description", id: `${controlId}-description`, children: description }))] })] }));
+});
+/**
+ * Interruptor binario con role="switch" y ref al HTMLInputElement.
+ * Sigue siendo type="checkbox": no necesita eventos artificiales para teclado o forms.
+ * La etiqueta debe permanecer igual al activar/desactivar; el estado lo aporta checked.
+ * No implementa un tercer estado indeterminado.
+ */
+export const Switch = forwardRef(function Switch({ label, description, wrapperClassName, className, id, 'aria-describedby': describedBy, ...props }, ref) {
+    const generatedId = useId();
+    const controlId = id ?? `dgm-${generatedId}`;
+    return (_jsxs("div", { className: cx('dgm-choice', wrapperClassName), children: [_jsx("input", { ...props, ref: ref, type: "checkbox", role: "switch", id: controlId, "aria-describedby": cx(describedBy, hasContent(description) && `${controlId}-description`) || undefined, className: cx('dgm-switch', className) }), _jsxs("div", { className: "dgm-choice-text", children: [_jsx("label", { className: "dgm-label", htmlFor: controlId, children: label }), hasContent(description) && (_jsx("span", { className: "dgm-description", id: `${controlId}-description`, children: description }))] })] }));
+});

package/dist/tooltip.d.ts

@@ -0,0 +1,26 @@
+/** Ayuda contextual sobre un disparador existente. Radix gestiona foco, hover, Escape y colisiones. */
+import type { ReactElement, ReactNode } from 'react';
+export interface TooltipProps {
+    /** Un único elemento enfocable que acepte ref y props, como Button. No usar Fragment. */
+    children: ReactElement;
+    /** Ayuda breve no interactiva. No colocar aquí enlaces, botones ni información imprescindible. */
+    content: ReactNode;
+    /** Lado preferido; puede cambiar si no hay espacio. @defaultValue 'top' */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Alineación respecto al disparador. @defaultValue 'center' */
+    align?: 'start' | 'center' | 'end';
+    /** Separación del disparador en píxeles. @defaultValue 6 */
+    sideOffset?: number;
+    /** Espera al pasar el puntero; el foco de teclado abre inmediatamente. @defaultValue 300 */
+    delayDuration?: number;
+    /** Apertura controlada. No combinar con defaultOpen. */
+    open?: boolean;
+    /** Apertura inicial no controlada. @defaultValue false */
+    defaultOpen?: boolean;
+    /** Notifica los cambios solicitados por interacción. */
+    onOpenChange?: (open: boolean) => void;
+    /** Clase del contenido flotante, no del disparador. */
+    className?: string;
+}
+/** Provider local: se puede usar sin instalar un proveedor global en la aplicación. */
+export declare function Tooltip({ children, content, side, align, sideOffset, delayDuration, open, defaultOpen, onOpenChange, className, }: TooltipProps): ReactElement;

package/dist/tooltip.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Primitive from '@radix-ui/react-tooltip';
+import { isRestoringFocus } from './internal/focus.js';
+import { OverlayLayerProvider, useOverlayLayer } from './internal/overlay-layer.js';
+import { cx } from './utils.js';
+/** Provider local: se puede usar sin instalar un proveedor global en la aplicación. */
+export function Tooltip({ children, content, side = 'top', align = 'center', sideOffset = 6, delayDuration = 300, open, defaultOpen, onOpenChange, className, }) {
+    const { depth, style: layerStyle } = useOverlayLayer();
+    return (_jsx(OverlayLayerProvider, { depth: depth, children: _jsx(Primitive.Provider, { delayDuration: delayDuration, children: _jsxs(Primitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(Primitive.Trigger, { asChild: true, onFocus: (event) => {
+                            // El foco sigue llegando al botón y a sus manejadores. Solo se omite
+                            // la apertura automática de Radix al volver desde una capa de la librería.
+                            if (isRestoringFocus(event.currentTarget))
+                                event.preventDefault();
+                        }, children: children }), _jsx(Primitive.Portal, { children: _jsx(Primitive.Content, { style: layerStyle, side: side, align: align, sideOffset: sideOffset, collisionPadding: 12, className: cx('dgm-tooltip', className), children: content }) })] }) }) }));
+}

package/dist/transition.d.ts

@@ -0,0 +1,27 @@
+import { type ReactElement, type ReactNode } from 'react';
+/** Entrada y salida de contenido condicional sin desmontarlo antes de terminar la secuencia. */
+export interface TransitionProps {
+    /** Visibilidad solicitada. Mantén Transition montado para poder animar la salida. */
+    show: boolean;
+    /** Contenido dentro de divs; no usar directamente en table, select o listas que exijan li. */
+    children: ReactNode;
+    /** Efecto visual, independiente de la altura. @defaultValue 'fade' */
+    variant?: 'fade' | 'scale' | 'slide';
+    /** Milisegundos por fase. Con collapse hay dos fases por recorrido (altura y efecto). Cero es inmediato. @defaultValue 240 */
+    duration?: number;
+    /** Anima también si show ya es true al montar. @defaultValue false */
+    appear?: boolean;
+    /** Abre primero el espacio y después muestra el contenido; cierra en orden inverso. Incluye la separación dentro de children. @defaultValue false */
+    collapse?: boolean;
+    /** Se ejecuta una sola vez al completar toda la salida, para retirar el elemento de una colección. */
+    onExited?: () => void;
+    /** Clase del contenedor exterior. */
+    className?: string;
+}
+/**
+ * Con collapse: closed → expanding → entering → open; la salida invierte ese orden.
+ * El contenido conserva su altura intrínseca aunque sea invisible durante expanding/collapsing.
+ * Los eventos del propio contenedor avanzan las fases; un plazo de respaldo evita bloqueos.
+ * Reabrir o desmontar cancela los manejadores y plazos anteriores. El consumidor gestiona el foco.
+ */
+export declare function Transition({ show, children, variant, duration, appear, collapse, onExited, className, }: TransitionProps): ReactElement | null;

package/dist/transition.js

@@ -0,0 +1,148 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from 'react';
+import { cx } from './utils.js';
+/**
+ * Con collapse: closed → expanding → entering → open; la salida invierte ese orden.
+ * El contenido conserva su altura intrínseca aunque sea invisible durante expanding/collapsing.
+ * Los eventos del propio contenedor avanzan las fases; un plazo de respaldo evita bloqueos.
+ * Reabrir o desmontar cancela los manejadores y plazos anteriores. El consumidor gestiona el foco.
+ */
+export function Transition({ show, children, variant = 'fade', duration = 240, appear = false, collapse = false, onExited, className, }) {
+    const [presence, setPresence] = useState({
+        show,
+        collapse,
+        phase: !show ? 'closed' : !appear ? 'open' : collapse ? 'expanding' : 'entering',
+    });
+    const [expanded, setExpanded] = useState(show && !appear);
+    const visualRef = useRef(null);
+    const layoutRef = useRef(null);
+    const exitCallback = useRef(onExited);
+    const milliseconds = Number.isFinite(duration) ? Math.max(0, duration) : 240;
+    // Ajuste derivado antes del commit: un cambio de intención no pinta la fase anterior.
+    if (presence.show !== show || presence.collapse !== collapse) {
+        let phase;
+        if (show) {
+            phase =
+                collapse &&
+                    (presence.phase === 'closed' ||
+                        presence.phase === 'collapsing' ||
+                        presence.phase === 'expanding')
+                    ? 'expanding'
+                    : 'entering';
+            if (collapse && !presence.collapse)
+                setExpanded(true);
+        }
+        else {
+            phase =
+                presence.phase === 'closed'
+                    ? 'closed'
+                    : collapse && (presence.phase === 'expanding' || presence.phase === 'collapsing')
+                        ? 'collapsing'
+                        : 'exiting';
+        }
+        setPresence({ show, collapse, phase });
+    }
+    useEffect(() => {
+        exitCallback.current = onExited;
+    }, [onExited]);
+    const { phase } = presence;
+    const interactive = phase === 'entering' || phase === 'open';
+    useEffect(() => {
+        const root = collapse ? layoutRef.current : visualRef.current;
+        if (!root || phase === 'closed')
+            return;
+        // El atributo DOM conserva compatibilidad con los tipos antiguos de React 18.
+        root.toggleAttribute('inert', !interactive);
+        if (phase === 'open')
+            return;
+        const sizing = phase === 'expanding' || phase === 'collapsing';
+        const node = sizing ? layoutRef.current : visualRef.current;
+        if (!node)
+            return;
+        if (phase === 'expanding') {
+            // Registrar la fila cerrada permite arrancar la transición desde un montaje nuevo.
+            node.getBoundingClientRect();
+            setExpanded(true);
+        }
+        else if (phase === 'collapsing') {
+            setExpanded(false);
+        }
+        let finished = false;
+        const finish = (immediate = false) => {
+            if (finished)
+                return;
+            finished = true;
+            const next = immediate
+                ? show
+                    ? 'open'
+                    : 'closed'
+                : phase === 'expanding'
+                    ? 'entering'
+                    : phase === 'entering'
+                        ? 'open'
+                        : phase === 'exiting' && collapse
+                            ? 'collapsing'
+                            : 'closed';
+            if (immediate)
+                setExpanded(show);
+            setPresence((current) => ({ ...current, phase: next }));
+            if (next === 'closed')
+                exitCallback.current?.();
+        };
+        const onAnimationEnd = (event) => {
+            const name = `dgm-transition-${variant}-${phase === 'entering' ? 'in' : 'out'}`;
+            if (!sizing && event.target === node && event.animationName === name)
+                finish();
+        };
+        const onSizeEnd = (event) => {
+            if (sizing && event.target === node && event.propertyName === 'grid-template-rows')
+                finish();
+        };
+        const preference = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+        const onPreferenceChange = () => {
+            if (preference?.matches)
+                finish(true);
+        };
+        if (milliseconds === 0 || preference?.matches) {
+            finish(true);
+            return;
+        }
+        const styles = window.getComputedStyle(node);
+        const hasMotion = sizing
+            ? styles.transitionProperty
+                .split(',')
+                .some((property) => ['grid-template-rows', 'all'].includes(property.trim())) &&
+                parseFloat(styles.transitionDuration) > 0
+            : !!styles.animationName && styles.animationName !== 'none';
+        // Sin CSS de esta fase, avanzar inmediatamente a la siguiente sin retener contenido.
+        if (!hasMotion) {
+            finish();
+            return;
+        }
+        node.addEventListener('animationend', onAnimationEnd);
+        node.addEventListener('animationcancel', onAnimationEnd);
+        node.addEventListener('transitionend', onSizeEnd);
+        preference?.addEventListener('change', onPreferenceChange);
+        const timeout = window.setTimeout(() => finish(), milliseconds + 50);
+        return () => {
+            finished = true;
+            window.clearTimeout(timeout);
+            node.removeEventListener('animationend', onAnimationEnd);
+            node.removeEventListener('animationcancel', onAnimationEnd);
+            node.removeEventListener('transitionend', onSizeEnd);
+            preference?.removeEventListener('change', onPreferenceChange);
+        };
+    }, [phase, show, collapse, interactive, milliseconds, variant]);
+    if (phase === 'closed')
+        return null;
+    const style = { '--dgm-transition-duration': `${milliseconds}ms` };
+    const visual = (_jsx("div", { ref: visualRef, className: cx('dgm-transition', !collapse && className), "data-state": phase === 'expanding' || phase === 'collapsing'
+            ? 'hidden'
+            : phase === 'exiting'
+                ? 'closed'
+                : 'open', "data-variant": variant, "data-enter": phase === 'entering' || undefined, "aria-hidden": !interactive || undefined, style: style, children: children }));
+    if (!collapse)
+        return visual;
+    return (_jsx("div", { ref: layoutRef, className: cx('dgm-transition-collapse', className), "data-state": show ? 'open' : 'closed', "data-expanded": (phase !== 'collapsing' && expanded) || undefined, "aria-hidden": !interactive || undefined, style: style, children: _jsx("div", { className: "dgm-transition-clip", children: visual }) }));
+}

package/dist/tree-view.d.ts

@@ -0,0 +1,22 @@
+import { type ReactElement, type ReactNode } from 'react';
+export interface TreeNode {
+    /** ID único en todo el árbol, incluso entre ramas distintas. */
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    children?: readonly TreeNode[];
+}
+export interface TreeViewProps {
+    label: string;
+    items: readonly TreeNode[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    expanded?: string[];
+    defaultExpanded?: string[];
+    onExpandedChange?: (expanded: string[]) => void;
+    className?: string;
+}
+/** Flechas, Home/End, Enter/Espacio y búsqueda por prefijo. Un nodo desactivado desactiva también su rama. */
+export declare function TreeView({ label, items, value, defaultValue, onValueChange, expanded, defaultExpanded, onExpandedChange, className, }: TreeViewProps): ReactElement;