danielgm-ui 0.1.0

package/dist/tree-view.js

@@ -0,0 +1,128 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Árbol de selección única: expansión independiente, foco itinerante y navegación por nodos visibles. */
+import { ExpandIcon, CollapseIcon, FolderIcon, FolderOpenIcon, FileIcon, } from './internal/icons.js';
+import { useMemo, useRef, useState, } from 'react';
+import { useControllable } from './internal/state.js';
+import { cx } from './utils.js';
+/** Flechas, Home/End, Enter/Espacio y búsqueda por prefijo. Un nodo desactivado desactiva también su rama. */
+export function TreeView({ label, items, value, defaultValue = '', onValueChange, expanded, defaultExpanded = [], onExpandedChange, className, }) {
+    const [selected, select] = useControllable(value, defaultValue, onValueChange);
+    const [open, expand] = useControllable(expanded, defaultExpanded, onExpandedChange);
+    const [focused, setFocused] = useState('');
+    const elements = useRef(new Map());
+    const search = useRef({ text: '', time: 0 });
+    const expandedIds = useMemo(() => new Set(open), [open]);
+    const enabled = useMemo(() => {
+        const visible = [];
+        function collect(nodes, parent) {
+            for (const node of nodes) {
+                // Una rama desactivada tampoco participa en el recorrido de teclado.
+                if (node.disabled)
+                    continue;
+                visible.push({ node, parent });
+                if (node.children && expandedIds.has(node.id))
+                    collect(node.children, node.id);
+            }
+        }
+        collect(items);
+        return visible;
+    }, [items, expandedIds]);
+    const tabId = enabled.find((item) => item.node.id === focused)?.node.id ??
+        enabled.find((item) => item.node.id === selected)?.node.id ??
+        enabled[0]?.node.id;
+    function focus(id, reveal = true) {
+        if (id) {
+            setFocused(id);
+            const element = elements.current.get(id);
+            element?.focus({ preventScroll: true });
+            // El li incluye sus descendientes. Revelamos solo su fila para no desplazar
+            // ramas completas ni centrar innecesariamente el árbol o la página.
+            if (reveal)
+                element?.firstElementChild?.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'nearest',
+                    behavior: 'instant',
+                });
+        }
+    }
+    function toggle(node) {
+        expand(expandedIds.has(node.id) ? open.filter((id) => id !== node.id) : [...open, node.id]);
+    }
+    function key(event, node) {
+        if (event.target !== event.currentTarget)
+            return;
+        const index = enabled.findIndex((item) => item.node.id === node.id);
+        if (index < 0)
+            return;
+        const children = node.children?.length;
+        if (event.key === 'ArrowDown')
+            focus(enabled[index + 1]?.node.id);
+        else if (event.key === 'ArrowUp')
+            focus(enabled[index - 1]?.node.id);
+        else if (event.key === 'Home')
+            focus(enabled[0]?.node.id);
+        else if (event.key === 'End')
+            focus(enabled.at(-1)?.node.id);
+        else if (event.key === 'ArrowRight') {
+            if (children && !expandedIds.has(node.id))
+                toggle(node);
+            else if (children)
+                focus(enabled.find((item) => item.parent === node.id)?.node.id);
+        }
+        else if (event.key === 'ArrowLeft') {
+            if (children && expandedIds.has(node.id))
+                toggle(node);
+            else
+                focus(enabled[index].parent);
+        }
+        else if (event.key === 'Enter' || event.key === ' ')
+            select(node.id);
+        else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            const now = Date.now();
+            search.current = {
+                text: (now - search.current.time > 700 ? '' : search.current.text) +
+                    event.key.toLocaleLowerCase(),
+                time: now,
+            };
+            const ordered = [...enabled.slice(index + 1), ...enabled.slice(0, index + 1)];
+            focus(ordered.find((item) => item.node.label.toLocaleLowerCase().startsWith(search.current.text))
+                ?.node.id);
+        }
+        else
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    function render(nodes, level = 1, inheritedDisabled = false) {
+        return nodes.map((node, index) => {
+            const blocked = inheritedDisabled || Boolean(node.disabled);
+            const branch = Boolean(node.children?.length);
+            const expanded = branch && expandedIds.has(node.id);
+            return (_jsxs("li", { role: "treeitem", "aria-label": node.label, "aria-level": level, "aria-posinset": index + 1, "aria-setsize": nodes.length, "aria-selected": selected === node.id, "aria-expanded": branch ? expanded : undefined, "aria-disabled": blocked || undefined, tabIndex: !blocked && tabId === node.id ? 0 : -1, ref: (element) => {
+                    if (element)
+                        elements.current.set(node.id, element);
+                    else
+                        elements.current.delete(node.id);
+                }, onFocus: (event) => {
+                    if (event.target === event.currentTarget)
+                        setFocused(node.id);
+                }, onKeyDown: (event) => key(event, node), children: [_jsxs("div", { className: "dgm-tree-row", style: { paddingInlineStart: `${0.5 + (level - 1) * 1.25}rem` }, onClick: () => {
+                            if (!blocked) {
+                                focus(node.id, false);
+                                select(node.id);
+                            }
+                        }, children: [_jsx("span", { className: "dgm-tree-expander", "aria-hidden": "true", onClick: (event) => {
+                                    if (branch) {
+                                        event.stopPropagation();
+                                        if (!blocked) {
+                                            focus(node.id, false);
+                                            toggle(node);
+                                        }
+                                    }
+                                }, children: branch ? expanded ? _jsx(CollapseIcon, {}) : _jsx(ExpandIcon, {}) : null }), _jsx("span", { className: "dgm-tree-node-icon", "aria-hidden": "true", children: node.icon ??
+                                    (branch ? expanded ? _jsx(FolderOpenIcon, {}) : _jsx(FolderIcon, {}) : _jsx(FileIcon, {})) }), _jsx("span", { children: node.label })] }), expanded && _jsx("ul", { role: "group", children: render(node.children, level + 1, blocked) })] }, node.id));
+        });
+    }
+    return (_jsx("ul", { role: "tree", "aria-label": label, className: cx('dgm-tree', className), children: render(items) }));
+}

package/dist/typography.d.ts

@@ -0,0 +1,23 @@
+/** Texto semántico con la escala pública; funciona en servidor y no necesita proveedor. */
+import type { HTMLAttributes, ReactElement } from 'react';
+/** Función visual del texto, independiente del nivel semántico escogido con as. */
+export type TypographyVariant = 'title' | 'subtitle' | 'body' | 'lead' | 'label' | 'caption' | 'code';
+/** Elementos de texto; los controles y enlaces conservan sus componentes específicos. */
+export type TypographyElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'small' | 'strong' | 'em' | 'code';
+/** Colores semánticos del tema o el color del contenedor. */
+export type TypographyTone = 'default' | 'muted' | 'primary' | 'danger' | 'inherit';
+/** Conserva children, className, style, id, eventos y atributos ARIA nativos. */
+export interface TypographyProps extends HTMLAttributes<HTMLElement> {
+    /** Presentación predeterminada de la escala. @defaultValue 'body' */
+    variant?: TypographyVariant;
+    /** Etiqueta HTML. Por defecto: title→h2, subtitle→h3, label→span, code→code, resto→p. */
+    as?: TypographyElement;
+    /** Color del texto; no cambia el tamaño ni el peso. @defaultValue 'default' */
+    tone?: TypographyTone;
+}
+/**
+ * Aplica estilos de lectura sin márgenes: el contenedor decide la separación.
+ * Usa as para respetar la jerarquía del documento; label es un estilo visual,
+ * no una etiqueta de formulario. No expone ref ni descarga fuentes.
+ */
+export declare function Typography({ variant, as, tone, className, ...props }: TypographyProps): ReactElement;

package/dist/typography.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './utils.js';
+const elements = {
+    title: 'h2',
+    subtitle: 'h3',
+    body: 'p',
+    lead: 'p',
+    label: 'span',
+    caption: 'p',
+    code: 'code',
+};
+/**
+ * Aplica estilos de lectura sin márgenes: el contenedor decide la separación.
+ * Usa as para respetar la jerarquía del documento; label es un estilo visual,
+ * no una etiqueta de formulario. No expone ref ni descarga fuentes.
+ */
+export function Typography({ variant = 'body', as, tone = 'default', className, ...props }) {
+    const Element = as ?? elements[variant];
+    return (_jsx(Element, { ...props, className: cx('dgm-typography', `dgm-typography--${variant}`, `dgm-typography--${tone}`, className) }));
+}

package/dist/utils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Une clases CSS e identificadores ARIA opcionales separados por espacios.
+ * Acepta condiciones como `loading && 'dgm-loading'` y descarta valores vacíos.
+ * No elimina duplicados ni resuelve conflictos entre reglas CSS.
+ */
+export declare function cx(...values: Array<string | false | null | undefined>): string;
+/**
+ * Distingue un contenido explícito de los valores que aquí significan «ausente».
+ * Conserva el número 0, que React sí representa y que una condición `!!value`
+ * descartaría. No inspecciona arrays, fragments ni el resultado de componentes.
+ * Se comparte entre el renderizado y ARIA para que no apunten a IDs inexistentes.
+ */
+export declare function hasContent(value: unknown): boolean;

package/dist/utils.js

@@ -0,0 +1,17 @@
+/**
+ * Une clases CSS e identificadores ARIA opcionales separados por espacios.
+ * Acepta condiciones como `loading && 'dgm-loading'` y descarta valores vacíos.
+ * No elimina duplicados ni resuelve conflictos entre reglas CSS.
+ */
+export function cx(...values) {
+    return values.filter(Boolean).join(' ');
+}
+/**
+ * Distingue un contenido explícito de los valores que aquí significan «ausente».
+ * Conserva el número 0, que React sí representa y que una condición `!!value`
+ * descartaría. No inspecciona arrays, fragments ni el resultado de componentes.
+ * Se comparte entre el renderizado y ARIA para que no apunten a IDs inexistentes.
+ */
+export function hasContent(value) {
+    return value !== null && value !== undefined && typeof value !== 'boolean' && value !== '';
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "danielgm-ui",
+  "version": "0.1.0",
+  "description": "Accessible React components for Next.js and the web.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "TABLER-LICENSE.txt"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/styles.mjs",
+    "dev": "node scripts/watch.mjs",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "nextjs",
+    "components",
+    "ui",
+    "typescript",
+    "accessible"
+  ],
+  "dependencies": {
+    "@radix-ui/react-accordion": "1.2.20",
+    "@radix-ui/react-avatar": "1.2.6",
+    "@radix-ui/react-context-menu": "2.3.7",
+    "@radix-ui/react-dialog": "1.1.23",
+    "@radix-ui/react-dropdown-menu": "2.1.24",
+    "@radix-ui/react-navigation-menu": "1.2.22",
+    "@radix-ui/react-popover": "1.1.23",
+    "@radix-ui/react-radio-group": "1.4.7",
+    "@radix-ui/react-select": "2.3.7",
+    "@radix-ui/react-slider": "1.4.7",
+    "@radix-ui/react-tabs": "1.1.21",
+    "@radix-ui/react-toast": "1.2.23",
+    "@radix-ui/react-toggle-group": "1.1.19",
+    "@radix-ui/react-tooltip": "1.2.16",
+    "@tabler/icons-react": "3.46.0",
+    "@tanstack/react-table": "9.2.4",
+    "cmdk": "1.1.1",
+    "date-fns": "4.4.0",
+    "react-day-picker": "10.0.1"
+  }
+}