autocasting-ui-library-padimasso 1.2.2 → 1.2.4

package/dist/components/Chevron/ChevronLeft.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+const ChevronLeft = () => {
+    return (jsx("svg", { width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className: "cursor-pointer", children: jsx("path", { d: "M15 6l-6 6 6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
+};
+
+export { ChevronLeft as default };

package/dist/components/Chevron/ChevronRight.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+const ChevronRight = () => {
+    return (jsx("svg", { width: "30", height: "30", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className: "cursor-pointer", children: jsx("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
+};
+
+export { ChevronRight as default };

package/dist/components/Chevron/ChevronUpDown.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+const ChevronUpDown = ({ open, sizePx = 28, className }) => {
+    return (jsx("svg", { width: sizePx, height: sizePx, className: ['transition-transform', open ? 'rotate-180' : '', className ?? ''].filter(Boolean).join(' '), viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" }) }));
+};
+
+export { ChevronUpDown as default };

package/dist/components/Chip/Chip.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../Icon/Icon.js';
+
+function Chip({ label, onRemove, newItem = false }) {
+    return (jsxs("span", { className: [
+            'flex items-center gap-[6px] rounded-xl border px-3 py-1 lg:text-[14px]',
+            newItem
+                ? 'font-semibold bg-[var(--color-secondary-white)] border-[var(--color-primary-purple)] text-[var(--color-primary-purple)]'
+                : 'bg-[var(--color-primary-white)] border-[var(--color-secondary-outline)] text-[var(--color-primary-black)]',
+        ].join(' '), children: [jsx("p", { className: "text-sm", children: label }), onRemove && jsx(Icon, { name: "cross", variant: "primary", size: 11, onClick: onRemove })] }));
+}
+
+export { Chip as default };

package/dist/components/DetailsView/DetailsView.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useRef, useEffect } from 'react';
+import { Icon } from '../Icon/Icon.js';
+
+function DetailsView({ open, onClose, headerLeft: navigation, headerRight, children, className, }) {
+    const bodyRef = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        // 1) Panel: siempre arrancar desde arriba
+        if (bodyRef.current) {
+            bodyRef.current.scrollTop = 0;
+            bodyRef.current.scrollLeft = 0;
+        }
+        // 2) Root de la app (por si también querés que la pantalla general esté en top)
+        const root = document.querySelector('#app-scroll-root');
+        if (root) {
+            root.scrollTop = 0;
+            root.scrollLeft = 0;
+        }
+        else {
+            // fallback
+            window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+        }
+        return () => {
+            document.body.style.overflow = prevOverflow;
+        };
+    }, [open]);
+    if (!open)
+        return null;
+    return (jsxs("div", { className: "fixed inset-0 z-[100] flex justify-end items-stretch", children: [jsx("button", { type: "button", "aria-label": "Cerrar", onClick: onClose, className: "absolute inset-0 bg-black/60" }), jsxs("aside", { className: clsx('relative ml-auto h-full w-full max-w-[550px] bg-[var(--color-secondary-white)] shadow-xl flex flex-col', className), children: [jsxs("header", { className: "flex items-center justify-between p-5 border-b border-[var(--color-secondary-outline)] bg-[var(--color-primary-white)]", children: [navigation, jsxs("div", { className: "flex items-center gap-4", children: [headerRight, jsx(Icon, { name: "burgerClose", onClick: onClose })] })] }), jsx("div", { ref: bodyRef, className: "flex-1 min-h-0 overflow-auto px-8 py-10", children: children })] })] }));
+}
+
+export { DetailsView as default };

package/dist/components/ImageCarousel/ImageCarousel.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
+import PLACEHOLDER_SVG from '../../icons/image_placeholder.svg.js';
+
+function ImageCarousel({ images, className, isDesktop, isDesktopXL }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    // Hasta 4 slots, rellenando con placeholder
+    const finalImages = useMemo(() => {
+        const MAX_SLOTS = 4;
+        const base = (images ?? []).filter((src) => typeof src === 'string' && src.trim().length > 0).slice(0, MAX_SLOTS);
+        const missing = MAX_SLOTS - base.length;
+        if (missing <= 0)
+            return base;
+        return [...base, ...Array.from({ length: missing }, () => PLACEHOLDER_SVG)];
+    }, [images]);
+    useEffect(() => {
+        if (selectedIndex >= finalImages.length)
+            setSelectedIndex(0);
+    }, [finalImages.length, selectedIndex]);
+    const selectedImage = finalImages[selectedIndex];
+    const rightThumbIndices = useMemo(() => finalImages.map((_, i) => i).slice(1, 4), [finalImages]);
+    const desktopLayout = !!isDesktop || !!isDesktopXL;
+    const showDesktopThumbs = desktopLayout && finalImages.length > 1;
+    const gridCols = showDesktopThumbs ? 'grid-cols-[1fr_130px]' : 'grid-cols-1';
+    const figureClass = desktopLayout ? 'w-full h-full' : 'w-full aspect-[8/10]';
+    const wrapperClass = desktopLayout
+        ? `grid ${gridCols} gap-3 h-full min-h-0 items-stretch`
+        : 'flex flex-col gap-3 w-full';
+    return (jsx("div", { className: `w-full ${desktopLayout ? 'h-full min-h-0' : 'h-auto'} ${className ?? ''}`, children: jsxs("div", { className: wrapperClass, children: [jsxs("div", { className: desktopLayout ? 'col-[1] h-full min-h-0 flex flex-col' : 'flex flex-col gap-2', children: [jsx("figure", { className: `relative overflow-hidden rounded-xl ${figureClass}`, children: jsx("img", { src: selectedImage, alt: `Imagen ${selectedIndex + 1}`, className: "absolute inset-0 w-full h-full object-cover" }) }), !desktopLayout && finalImages.length > 1 && (jsx("div", { className: "flex gap-2 overflow-x-auto w-full", children: finalImages.slice(1).map((img, i) => (jsx("button", { type: "button", "aria-label": `Ver imagen ${i + 1}`, className: "w-[120px] aspect-[8/10] flex-shrink-0 rounded-lg overflow-hidden border-2 border-transparent", children: jsx("img", { src: img, alt: `Miniatura ${i + 1}`, className: "w-full h-full object-cover" }) }, `thumb-m-${i}`))) }))] }), showDesktopThumbs && (jsx("div", { className: "col-[2] h-full min-h-0 flex flex-col gap-2 items-stretch justify-center", style: { ['--g']: '12px' }, children: rightThumbIndices.map((idx) => {
+                        const img = finalImages[idx];
+                        return (jsx("button", { type: "button", "aria-label": `Ver imagen ${idx + 1}`, style: { height: 'calc((100% - 2*var(--g)) / 3)' }, className: "relative w-full aspect-[4/5] rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0", children: jsx("img", { src: img, alt: `Miniatura ${idx + 1}`, className: "absolute inset-0 w-full h-full object-cover" }) }, `thumb-d-${idx}`));
+                    }) }))] }) }));
+}
+
+export { ImageCarousel as default };

package/dist/components/OverflowMenu/OverflowMenu.js

@@ -0,0 +1,162 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Icon } from '../Icon/Icon.js';
+
+function cx(...xs) {
+    return xs.filter(Boolean).join(' ');
+}
+const OverflowMenu = ({ items, align = 'end', side = 'bottom', offset = 8, triggerClassName, menuClassName, itemClassName, disabled = false, trigger, }) => {
+    const [open, setOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    const [anchor, setAnchor] = useState(null);
+    const [hoverKey, setHoverKey] = useState(null);
+    const visibleItems = useMemo(() => (items ?? []).filter((it) => it?.hidden !== true), [items]);
+    const close = useCallback(() => setOpen(false), []);
+    const toggleOpen = useCallback(() => {
+        if (disabled)
+            return;
+        setOpen((v) => !v);
+    }, [disabled]);
+    const measure = useCallback(() => {
+        const el = triggerRef.current;
+        if (!el)
+            return;
+        const r = el.getBoundingClientRect();
+        if (side === 'bottom') {
+            setAnchor({
+                x: align === 'end' ? r.right : r.left,
+                y: r.bottom + offset,
+            });
+        }
+        else {
+            setAnchor({
+                x: align === 'end' ? r.right : r.left,
+                y: r.top - offset,
+            });
+        }
+    }, [align, side, offset]);
+    useEffect(() => {
+        if (!open)
+            return;
+        measure();
+    }, [open, measure]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onResize = () => close();
+        const onScroll = (e) => {
+            const target = e.target;
+            if (!target)
+                return;
+            if (menuRef.current?.contains(target))
+                return;
+            if (triggerRef.current?.contains(target))
+                return;
+            close();
+        };
+        window.addEventListener('resize', onResize);
+        window.addEventListener('scroll', onScroll, true);
+        return () => {
+            window.removeEventListener('resize', onResize);
+            window.removeEventListener('scroll', onScroll, true);
+        };
+    }, [open, close]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                close();
+        };
+        const onPointerDown = (e) => {
+            const t = e.target;
+            if (!t)
+                return;
+            const inTrigger = !!triggerRef.current?.contains(t);
+            const inMenu = !!menuRef.current?.contains(t);
+            if (!inTrigger && !inMenu)
+                close();
+        };
+        document.addEventListener('keydown', onKey);
+        document.addEventListener('mousedown', onPointerDown, true);
+        document.addEventListener('touchstart', onPointerDown, true);
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            document.removeEventListener('mousedown', onPointerDown, true);
+            document.removeEventListener('touchstart', onPointerDown, true);
+        };
+    }, [open, close]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onFocusIn = (e) => {
+            const t = e.target;
+            if (!t)
+                return;
+            const inTrigger = !!triggerRef.current?.contains(t);
+            const inMenu = !!menuRef.current?.contains(t);
+            if (!inTrigger && !inMenu)
+                close();
+        };
+        document.addEventListener('focusin', onFocusIn, true);
+        return () => {
+            document.removeEventListener('focusin', onFocusIn, true);
+        };
+    }, [open, close]);
+    const onSelectItem = async (it) => {
+        if (it.type === 'separator' || it.type === 'content')
+            return;
+        if (it.disabled)
+            return;
+        try {
+            await it.onSelect?.();
+        }
+        finally {
+            const closeOnSelect = it.closeOnSelect ?? true;
+            if (closeOnSelect)
+                close();
+        }
+    };
+    const MenuRenderer = !open || !anchor
+        ? null
+        : createPortal(jsx("div", { ref: menuRef, role: "menu", className: cx('fixed z-[999] min-w-[210px] rounded-2xl shadow-lg', 'bg-[var(--color-primary-white)] border border-[var(--color-secondary-outline)]', 'p-2', menuClassName), style: {
+                left: anchor.x,
+                top: anchor.y,
+                transform: align === 'end'
+                    ? side === 'bottom'
+                        ? 'translateX(-100%) translateY(0)'
+                        : 'translateX(-100%) translateY(-100%)'
+                    : side === 'bottom'
+                        ? 'translateX(0) translateY(0)'
+                        : 'translateX(0) translateY(-100%)',
+            }, children: visibleItems.map((it) => {
+                if (it.type === 'separator') {
+                    return (jsx("div", { className: "my-2 h-px w-full bg-[var(--color-secondary-outline)] opacity-60" }, it.key));
+                }
+                if (it.type === 'content') {
+                    return (jsx("div", { className: "p-2", children: it.content }, it.key));
+                }
+                const isDestructive = !!it.destructive;
+                const isDisabled = !!it.disabled;
+                const iconName = it.iconName;
+                const forcedIconVariant = it.iconVariant;
+                const resolvedIconVariant = forcedIconVariant ||
+                    (isDisabled
+                        ? 'disabled'
+                        : isDestructive
+                            ? 'danger'
+                            : hoverKey === it.key
+                                ? 'primary'
+                                : 'default');
+                const labelNode = it.label;
+                const isStringLabel = typeof labelNode === 'string';
+                return (jsxs("button", { type: "button", role: "menuitem", "data-menuitem": "true", disabled: isDisabled, onClick: () => void onSelectItem(it), onMouseEnter: () => setHoverKey(it.key), onMouseLeave: () => setHoverKey(null), className: cx('w-full text-left px-3 py-2 rounded-xl', 'flex items-center gap-3', 'text-sm font-normal', 'cursor-pointer disabled:cursor-not-allowed', isDestructive
+                        ? 'text-[var(--color-alert-error)] hover:bg-red-50'
+                        : 'text-[var(--color-primary-black)] hover:text-[var(--color-primary-purple)] hover:bg-[var(--color-secondary-white)]', 'transition-colors', 'disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-inherit', itemClassName), children: [iconName && jsx(Icon, { name: iconName, variant: resolvedIconVariant }), isStringLabel ? jsx("span", { className: "select-none", children: labelNode }) : labelNode] }, it.key));
+            }) }), document.body);
+    return (jsxs(Fragment, { children: [jsx("button", { ref: triggerRef, type: "button", onClick: toggleOpen, "aria-haspopup": "menu", "aria-expanded": open, disabled: disabled, className: cx('disabled:opacity-50 disabled:cursor-not-allowed', triggerClassName), children: trigger ? trigger({ open, disabled }) : jsx(Icon, { name: "overflowmenu", variant: "default" }) }), MenuRenderer] }));
+};
+
+export { OverflowMenu as default };

package/dist/components/PhotoZoomOverlay/PhotoZoomOverlay.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import ChevronLeft from '../Chevron/ChevronLeft.js';
+import ChevronRight from '../Chevron/ChevronRight.js';
+
+function PhotoZoomOverlay({ open, images, initialIndex = 0, onClose, onIndexChange }) {
+    const [idx, setIdx] = useState(initialIndex);
+    useEffect(() => {
+        if (open)
+            setIdx(initialIndex);
+    }, [open, initialIndex]);
+    const total = images.length;
+    const current = useMemo(() => images[idx] ?? images[0], [images, idx]);
+    const hasArrows = total > 1;
+    const prev = useCallback(() => setIdx((i) => (i - 1 + total) % total), [total]);
+    const next = useCallback(() => setIdx((i) => (i + 1) % total), [total]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+            if (e.key === 'ArrowLeft')
+                prev();
+            if (e.key === 'ArrowRight')
+                next();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => {
+            document.body.style.overflow = prevOverflow;
+            window.removeEventListener('keydown', onKey);
+        };
+    }, [open, prev, next, onClose]);
+    useEffect(() => {
+        onIndexChange?.(idx);
+    }, [idx, onIndexChange]);
+    if (!open)
+        return null;
+    return createPortal(jsxs("div", { className: "fixed inset-0 z-[1000]", role: "dialog", "aria-modal": "true", onClick: onClose, children: [jsx("div", { className: "absolute inset-0 bg-black/80" }), jsx("div", { className: "relative z-10 flex items-center justify-center h-full px-4", children: jsxs("div", { className: "relative w-[90%] h-[90%] max-w-[600px] max-h-[700px] m-auto rounded-3xl", onClick: (e) => {
+                        e.stopPropagation();
+                    }, children: [jsx("button", { type: "button", "aria-label": "Cerrar", onClick: onClose, className: " cursor-pointer absolute z-10 right-3 top-3 w-9 h-9 grid place-items-center rounded-full bg-black/50 text-white", children: jsx("span", { className: "text-2xl leading-none mb-[10%]", children: "\u00D7" }) }), jsxs("figure", { className: "relative w-full h-full overflow-hidden rounded-2xl", children: [jsx("img", { src: current, alt: `Foto ${idx + 1} de ${total}`, className: "absolute inset-0 w-full h-full object-cover select-none", draggable: false }), hasArrows && (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: (e) => {
+                                                e.stopPropagation();
+                                                prev();
+                                            }, "aria-label": "Foto anterior", className: "absolute left-5 top-1/2 -translate-y-1/2 grid place-items-center w-8 h-8 rounded-full bg-white/95 hover:bg-white", children: jsx(ChevronLeft, {}) }), jsx("button", { type: "button", onClick: (e) => {
+                                                e.stopPropagation();
+                                                next();
+                                            }, "aria-label": "Foto siguiente", className: "absolute right-5 top-1/2 -translate-y-1/2 grid place-items-center w-8 h-8 rounded-full bg-white/95 hover:bg-white", children: jsx(ChevronRight, {}) })] }))] })] }) })] }), document.body);
+}
+
+export { PhotoZoomOverlay as default };

package/dist/components/Pills/Pills.js

@@ -0,0 +1,48 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { useRef, useMemo, useEffect } from 'react';
+
+function Pills({ items, value, onChange, className, listClassName, }) {
+    const listRef = useRef(null);
+    const btnRefs = useRef({});
+    const idx = useMemo(() => items.findIndex((i) => i.key === value), [items, value]);
+    const clamp = (n) => Math.max(0, Math.min(items.length - 1, n));
+    useEffect(() => {
+        const el = btnRefs.current[String(value)];
+        el?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+    }, [value]);
+    const onKeyDown = (e) => {
+        if (!items.length)
+            return;
+        if (e.key === 'ArrowRight') {
+            const next = clamp(idx + 1);
+            onChange(items[next].key);
+            e.preventDefault();
+        }
+        if (e.key === 'ArrowLeft') {
+            const prev = clamp(idx - 1);
+            onChange(items[prev].key);
+            e.preventDefault();
+        }
+        if (e.key === 'Home') {
+            onChange(items[0].key);
+            e.preventDefault();
+        }
+        if (e.key === 'End') {
+            onChange(items[items.length - 1].key);
+            e.preventDefault();
+        }
+    };
+    return (jsx("div", { className: clsx('relative', className), children: jsx("div", { className: "flex items-center gap-2", children: jsx("div", { ref: listRef, role: "tablist", "aria-label": "pills", 
+                // TODO Handle scrollbar hide on ""drag and scroll"" + Fade de lado derecho
+                className: clsx('flex-1 flex items-center gap-2 overflow-x-auto snap-x', listClassName), tabIndex: 0, onKeyDown: onKeyDown, children: items.map(({ key, label }) => {
+                    const selected = key === value;
+                    return (jsx("button", { ref: (el) => {
+                            btnRefs.current[String(key)] = el;
+                        }, role: "tab", "aria-selected": selected, "aria-controls": `panel-${String(key)}`, id: `tab-${String(key)}`, onClick: () => onChange(key), className: clsx('bg-[var(--color-primary-white)] text-base border-1 lg:text-[14px] font-semibold cursor-pointer px-4 py-1', 'snap-start whitespace-nowrap rounded-full', selected
+                            ? 'text-[var(--color-primary-purple)] border-[var(--color-primary-purple)]'
+                            : 'text-[var(--color-secondary-grey-fonts)]'), children: label }, String(key)));
+                }) }) }) }));
+}
+
+export { Pills as default };

package/dist/components/SearchWithSuggestions/SearchWithSuggestions.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+function SearchWithSuggestions({ label, placeholder, suggestions, onSelect, }) {
+    const [query, setQuery] = useState('');
+    const [open, setOpen] = useState(false);
+    const [active, setActive] = useState(0);
+    const wrapRef = useRef(null);
+    const inputRef = useRef(null);
+    const menuRef = useRef(null);
+    // Posición del menú en viewport coords
+    const [menuPos, setMenuPos] = useState(null);
+    // Solo buscar por la parte de la skill (después de ":")
+    const skillText = (s) => {
+        const parts = s.text.split(':');
+        return (parts.length > 1 ? parts.slice(1).join(':') : s.text).trim();
+    };
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return [];
+        return suggestions.filter((s) => skillText(s).toLowerCase().includes(q)).slice(0, 12);
+    }, [query, suggestions]);
+    const updateMenuPos = () => {
+        const el = inputRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const width = rect.width;
+        const gutter = 8;
+        const viewportH = window.innerHeight;
+        // Altura máxima (no “choca” el borde inferior del modal/viewport)
+        const maxH = 240; // ~max-h-60
+        let top = rect.bottom + gutter;
+        // Si no entra abajo, lo “flip” hacia arriba
+        if (top + maxH > viewportH - gutter) {
+            top = Math.max(gutter, rect.top - maxH - gutter);
+        }
+        setMenuPos({ top, left: rect.left, width });
+    };
+    // Abrimos/cerramos según query y actualizamos posición
+    useEffect(() => {
+        const hasQuery = query.trim().length > 0;
+        setOpen(hasQuery);
+        if (hasQuery)
+            updateMenuPos();
+    }, [query]);
+    // Click-away que contempla también el portal
+    useEffect(() => {
+        const onClickAway = (e) => {
+            const target = e.target;
+            if (wrapRef.current?.contains(target))
+                return;
+            if (menuRef.current?.contains(target))
+                return;
+            setOpen(false);
+        };
+        window.addEventListener('mousedown', onClickAway);
+        return () => window.removeEventListener('mousedown', onClickAway);
+    }, []);
+    // Reposicionar en scroll/resize
+    useEffect(() => {
+        const onScrollOrResize = () => {
+            if (open)
+                updateMenuPos();
+        };
+        window.addEventListener('scroll', onScrollOrResize, true);
+        window.addEventListener('resize', onScrollOrResize);
+        return () => {
+            window.removeEventListener('scroll', onScrollOrResize, true);
+            window.removeEventListener('resize', onScrollOrResize);
+        };
+    }, [open]);
+    const onKeyDown = (e) => {
+        if (!open || !filtered.length)
+            return;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setActive((i) => Math.min(i + 1, filtered.length - 1));
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActive((i) => Math.max(i - 1, 0));
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            const pick = filtered[active];
+            if (pick) {
+                onSelect(pick.id);
+                setQuery('');
+                setOpen(false);
+                document.activeElement?.blur?.();
+            }
+        }
+        else if (e.key === 'Escape') {
+            setOpen(false);
+            document.activeElement?.blur?.();
+        }
+    };
+    const dropdown = open && menuPos
+        ? createPortal(jsx("div", { ref: menuRef, style: {
+                position: 'fixed',
+                top: menuPos.top,
+                left: menuPos.left,
+                width: menuPos.width,
+                maxHeight: 310,
+                overflow: 'auto',
+                zIndex: 2147483647,
+            }, className: "\n            rounded-lg border border-[var(--color-secondary-outline)]\n            bg-white shadow\n          ", children: filtered.map((s, i) => (jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                    onSelect(s.id);
+                    setOpen(false);
+                    setQuery('');
+                }, onMouseEnter: () => setActive(i), className: `w-full text-left px-4 py-3 cursor-pointer ${i === active ? 'bg-[var(--color-primary-light-grey)]' : ''}`, children: s.text }, s.id))) }), document.body)
+        : null;
+    return (jsxs("div", { className: "flex flex-col gap-2", ref: wrapRef, children: [jsx("label", { className: "font-bold", htmlFor: "skill-search", children: label }), jsxs("div", { className: "relative", children: [jsx("input", { id: "skill-search", ref: inputRef, value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: onKeyDown, placeholder: placeholder, className: "w-full h-14 px-5 py-3 rounded-xl text-base placeholder:text-[var(--color-secondary-grey)] placeholder:font-normal placeholder:text-base border border-[var(--color-secondary-outline)] focus:outline-none focus:ring-0 focus:border-[var(--color-primary-black)] disabled:bg-[var(--color-secondary-offwhite)] disabled:cursor-not-allowed transition-colors" }), dropdown] })] }));
+}
+
+export { SearchWithSuggestions as default };

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Spinner({ color, strokeWidth = 2, className = 'h-9 w-9', ariaLabel = 'Loading...', arc = 0.65, speedMs = 1300, }) {
+    const style = {
+        ...(color ? { color } : {}),
+        animationDuration: `${speedMs}ms`,
+    };
+    const r = 9;
+    const C = 2 * Math.PI * r;
+    const visible = Math.max(0, Math.min(1, arc)) * C;
+    const gap = C - visible;
+    return (jsxs("span", { role: "status", "aria-live": "polite", "aria-label": ariaLabel, className: `inline-flex items-center justify-center ${className}`, style: style, children: [jsx("svg", { className: "animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true", children: jsx("circle", { cx: "12", cy: "12", r: r, stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: `${visible} ${gap}`, strokeDashoffset: C * 0.25 }) }), jsx("span", { className: "sr-only", children: ariaLabel })] }));
+}
+
+export { Spinner as default };

package/dist/components/Trigger/TextDropdownTrigger.js

@@ -0,0 +1,6 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import ChevronUpDown from '../Chevron/ChevronUpDown.js';
+
+const TextDropdownTrigger = ({ label, open }) => (jsxs("span", { className: "flex items-center gap-1 cursor-pointer select-none", children: [jsx("span", { className: "underline font-normal text-sm", children: label }), jsx("span", { className: open ? 'rotate-180 transition-transform' : 'transition-transform', children: jsx(ChevronUpDown, { open: open, sizePx: 18 }) })] }));
+
+export { TextDropdownTrigger as default };

package/dist/components/UploadTile/UploadTile.js

@@ -0,0 +1,99 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useRef, useState, useCallback } from 'react';
+import { Icon } from '../Icon/Icon.js';
+
+const DEFAULT_ROUNDED = 'rounded-xl';
+function withinAccept(file, accept) {
+    if (!accept)
+        return true;
+    const parts = accept.split(',').map((s) => s.trim());
+    return parts.some((p) => {
+        if (p.endsWith('/*')) {
+            const prefix = p.slice(0, -2);
+            return file.type.startsWith(prefix);
+        }
+        return file.type === p;
+    });
+}
+function withBust(url, bustKey) {
+    if (!url)
+        return url ?? undefined;
+    if (bustKey == null)
+        return url;
+    return url + (url.includes('?') ? '&' : '?') + 'v=' + encodeURIComponent(String(bustKey));
+}
+const UploadTile = forwardRef(function UploadTile({ label, value, previewUrl, onSelect, onClear, onEditClick, onDeleteClick, className, classes, style, aspectRatio, roundedClassName = DEFAULT_ROUNDED, dashed = true, objectFit = 'cover', disabled = false, multiple = false, accept = 'image/*', capture, maxSizeMB, onError, renderEmpty, renderPreview, bustKey, busy = false, busyText = 'Loading...', ariaLabel = 'Upload file', }, ref) {
+    const inputRef = useRef(null);
+    const [dragOver, setDragOver] = useState(false);
+    const openDialog = useCallback(() => {
+        if (!disabled)
+            inputRef.current?.click();
+    }, [disabled]);
+    const handleFiles = useCallback((filesList) => {
+        const files = Array.from(filesList);
+        for (const f of files) {
+            if (!withinAccept(f, accept)) {
+                onError?.(new Error('Formato no permitido.'));
+                return;
+            }
+            if (maxSizeMB && f.size > maxSizeMB * 1024 * 1024) {
+                onError?.(new Error(`Máximo ${maxSizeMB}MB.`));
+                return;
+            }
+        }
+        onSelect(multiple ? files : files[0]);
+    }, [accept, maxSizeMB, multiple, onSelect, onError]);
+    const onInputChange = (e) => {
+        const fl = e.target.files;
+        if (fl?.length)
+            handleFiles(fl);
+        e.currentTarget.value = '';
+    };
+    const onDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragOver(false);
+        if (disabled)
+            return;
+        if (e.dataTransfer.files?.length)
+            handleFiles(e.dataTransfer.files);
+    };
+    const onDragOver = (e) => {
+        e.preventDefault();
+        if (!disabled)
+            setDragOver(true);
+    };
+    const onDragLeave = () => setDragOver(false);
+    const baseBorder = dashed ? 'border-1 border-dashed' : 'border';
+    const dragCls = dragOver ? 'bg-gray-100 border-gray-400' : 'bg-gray-50 border-gray-300';
+    const displayUrl = withBust(previewUrl ?? value ?? undefined, bustKey);
+    const hasImage = Boolean(displayUrl);
+    const rootClickable = !disabled && !busy && !hasImage;
+    const mergedStyle = aspectRatio ? { ...style, aspectRatio } : style;
+    return (jsxs("div", { ref: ref, className: clsx('relative w-full h-full select-none focus:outline-none overflow-hidden', rootClickable ? 'cursor-pointer' : 'cursor-default', classes?.root, className), style: mergedStyle, role: rootClickable ? 'button' : undefined, "aria-label": ariaLabel, "aria-disabled": disabled || undefined, "aria-busy": busy || undefined, tabIndex: rootClickable ? 0 : -1, onClick: () => {
+            if (rootClickable)
+                openDialog();
+        }, onKeyDown: (e) => {
+            if (!rootClickable)
+                return;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                openDialog();
+            }
+        }, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: [jsx("div", { className: clsx('h-full w-full flex items-center justify-center', baseBorder, roundedClassName, dragCls, disabled && 'opacity-50 pointer-events-none', classes?.inner), children: displayUrl ? (renderPreview ? (renderPreview(displayUrl)) : (jsx("img", { src: displayUrl, alt: "", loading: "lazy", decoding: "async", crossOrigin: "anonymous", className: clsx('h-full w-full', roundedClassName, classes?.preview), style: { objectFit } }))) : renderEmpty ? (renderEmpty()) : (jsxs("div", { className: clsx('flex flex-col items-center gap-2 text-gray-400', classes?.empty), children: [jsx("div", { className: clsx('h-10 w-10 grid place-items-center justify-center rounded-full bg-gray-200 text-xl', classes?.icon), children: jsx("span", { className: "mb-[2px] mx-[1px]", children: "+" }) }), label && jsx("span", { className: clsx('text-xs', classes?.label), children: label })] })) }), busy && (jsx("div", { className: clsx('absolute inset-0 grid place-items-center', roundedClassName, classes?.overlay), style: { pointerEvents: 'none', background: 'rgba(0,0,0,0.25)' }, children: jsxs("div", { className: "flex items-center gap-2 text-white text-sm", children: [jsxs("svg", { className: "h-5 w-5 animate-spin", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2", opacity: "0.25" }), jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "2" })] }), jsx("span", { children: busyText })] }) })), hasImage && !busy && (jsx("div", { className: clsx('absolute left-0 right-0 bottom-0 px-3 py-2 lg:px-4 lg:py-2 bg-black/45 z-10 pointer-events-auto', roundedClassName, classes?.actionsBar), style: { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, onClick: (e) => e.stopPropagation(), children: jsxs("div", { className: "flex flex-row justify-between items-center", children: [jsx("button", { type: "button", className: clsx('w-12 h-12 rounded-full bg-[var(--color-primary-light-grey)] grid place-items-center', 'lg:w-10 lg:h-10', classes?.actionBtn), style: { cursor: 'pointer' }, "aria-label": "Editar imagen", onClick: (e) => {
+                                e.stopPropagation();
+                                if (onEditClick)
+                                    onEditClick();
+                                else
+                                    openDialog();
+                            }, children: jsx(Icon, { name: "edit", variant: "default", size: 16 }) }), jsx("button", { type: "button", className: clsx('w-12 h-12 rounded-full bg-[var(--color-primary-light-grey)] grid place-items-center', 'lg:w-10 lg:h-10', classes?.actionBtn), style: { cursor: 'pointer' }, "aria-label": "Eliminar imagen", onClick: (e) => {
+                                e.stopPropagation();
+                                if (onDeleteClick)
+                                    onDeleteClick();
+                                else
+                                    onClear?.();
+                            }, children: jsx(Icon, { name: "delete", variant: "default", size: 16 }) })] }) })), jsx("input", { ref: inputRef, className: clsx('hidden', classes?.input), type: "file", accept: accept, multiple: multiple, capture: capture, disabled: disabled, onChange: onInputChange })] }));
+});
+
+export { UploadTile as default };

package/dist/components/Wizard/Wizard.js

@@ -0,0 +1,21 @@
+import { useMemo, Children, isValidElement, useState, cloneElement } from 'react';
+
+function Wizard({ children }) {
+    const steps = useMemo(() => Children.toArray(children).filter(isValidElement), [children]);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const totalSteps = steps.length;
+    const progress = totalSteps === 0 ? 0 : ((activeIndex + 1) / totalSteps) * 100;
+    const goNext = () => setActiveIndex((prev) => Math.min(prev + 1, totalSteps - 1));
+    const goBack = () => setActiveIndex((prev) => Math.max(prev - 1, 0));
+    const injectedProps = {
+        stepIndex: activeIndex,
+        totalSteps,
+        progress,
+        goNext,
+        goBack,
+    };
+    const CurrentStep = steps[activeIndex];
+    return cloneElement(CurrentStep, injectedProps);
+}
+
+export { Wizard as default };