atenea-components 1.4.17

package/dist/components/atoms/ActionDropdown.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface DropdownMenuItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+interface ActionDropdownProps {
+    trigger: React.ReactNode;
+    items: DropdownMenuItem[];
+    align?: "start" | "center" | "end";
+    side?: "top" | "bottom";
+    className?: string;
+    menuClassName?: string;
+    itemClassName?: string;
+}
+export declare const ActionDropdown: React.FC<ActionDropdownProps>;
+export {};

package/dist/components/atoms/ActionDropdown.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionDropdown = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const clsx_1 = __importDefault(require("clsx"));
+const ActionDropdown = ({ trigger, items, align = "end", side = "bottom", className = "", menuClassName = "", itemClassName = "", }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const dropdownRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const handleTriggerClick = () => {
+        setIsOpen(!isOpen);
+    };
+    const handleItemClick = (item) => {
+        if (!item.disabled) {
+            item.onClick();
+            setIsOpen(false);
+        }
+    };
+    const getAlignmentClasses = () => {
+        switch (align) {
+            case "start":
+                return "left-0";
+            case "center":
+                return "left-1/2 transform -translate-x-1/2";
+            case "end":
+                return "right-0";
+            default:
+                return "right-0";
+        }
+    };
+    const getSideClasses = () => {
+        switch (side) {
+            case "top":
+                return "bottom-full mb-2";
+            case "bottom":
+                return "top-full mt-2";
+            default:
+                return "top-full mt-2";
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: dropdownRef, className: (0, clsx_1.default)("relative inline-block", className), children: [(0, jsx_runtime_1.jsx)("div", { onClick: handleTriggerClick, className: "cursor-pointer", children: trigger }), isOpen && ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)("absolute z-50 min-w-[200px] bg-white-100 border border-gray-200 rounded-lg shadow-lg py-1", getAlignmentClasses(), getSideClasses(), menuClassName), children: items.map((item) => ((0, jsx_runtime_1.jsxs)("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: (0, clsx_1.default)("w-full px-4 py-2 text-left text-sm hover:bg-gray-50 transition-colors flex items-center gap-2", item.disabled && "opacity-50 cursor-not-allowed text-gray-300", item.className, itemClassName), children: [item.icon && ((0, jsx_runtime_1.jsx)("span", { className: "flex-shrink-0 text-gray-400", children: item.icon })), (0, jsx_runtime_1.jsx)("span", { children: item.label })] }, item.id))) }))] }));
+};
+exports.ActionDropdown = ActionDropdown;

package/dist/components/atoms/Button.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "primary" | "secondary" | "tertiary";
+    size?: "giant" | "large" | "medium" | "small" | "tiny";
+    isLoading?: boolean;
+    iconRight?: React.ReactNode;
+    iconLeft?: React.ReactNode;
+};
+export declare const Button: React.FC<ButtonProps>;
+export {};

package/dist/components/atoms/Button.js

@@ -0,0 +1,55 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const baseClasses = 'inline-flex items-center justify-center font-medium transition-colors gap-2';
+const sizeClasses = {
+    giant: 'h-14 px-6 text-buttonGiant rounded-lg',
+    large: 'h-12 px-5 text-buttonLarge rounded-lg',
+    medium: 'h-10 px-4 text-buttonMedium rounded-lg',
+    small: 'h-8 px-3 text-buttonSmall rounded-md',
+    tiny: 'h-6 px-2 text-buttonTiny rounded-md',
+};
+const variantClasses = {
+    primary: `
+    bg-primary-500 text-textAtenea-900
+    hover:bg-primary-600 hover:text-textAtenea-900 
+    focus:ring-2 focus:ring-primary-200 focus:bg-primary-500 focus:text-textAtenea-900
+    active:bg-primary-600 active:text-textAtenea-900 active:ring-0
+    disabled:bg-grey-200 disabled:text-textAtenea-300 disabled:cursor-not-allowed
+  `,
+    secondary: `
+    bg-white text-primary-700 border border-primary-500
+    hover:bg-primary-100
+    focus:ring-2 focus:ring-primary-100 focus:bg-white-100
+    active:bg-green-200 active:ring-0
+    disabled:bg-gray-100 disabled:text-gray-400 disabled:border-gray-200 disabled:cursor-not-allowed
+  `,
+    tertiary: `
+    bg-white-100 text-primary-700
+    hover:bg-primary-100
+    focus:ring-2 focus:ring-primary-100 focus:bg-white-100
+    active:bg-primary-200 active:ring-0
+    disabled:text-gray-400 disabled:cursor-not-allowed
+  `,
+};
+const Button = (_a) => {
+    var { variant = "primary", size = "medium", isLoading = false, iconRight, iconLeft, children, disabled, className } = _a, props = __rest(_a, ["variant", "size", "isLoading", "iconRight", "iconLeft", "children", "disabled", "className"]);
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ disabled: disabled || isLoading, className: (0, clsx_1.default)(baseClasses, sizeClasses[size], variantClasses[variant], className) }, props, { children: [isLoading && ((0, jsx_runtime_1.jsx)("span", { className: "animate-spin border-2 border-white border-t-transparent rounded-full w-4 h-4" })), !isLoading && iconLeft && iconLeft, (0, jsx_runtime_1.jsx)("span", { children: children }), !isLoading && iconRight && iconRight] })));
+};
+exports.Button = Button;

package/dist/components/atoms/Checkbox.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type CheckboxSize = "small" | "medium";
+type CheckboxProps = {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: CheckboxSize;
+    label?: string;
+    className?: string;
+    id?: string;
+};
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/atoms/Checkbox.js

@@ -0,0 +1,60 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const clsx_1 = __importDefault(require("clsx"));
+const lu_1 = require("react-icons/lu");
+exports.Checkbox = (0, react_1.forwardRef)((_a, ref) => {
+    var { checked = false, onChange, disabled = false, size = "medium", label, className = "", id } = _a, props = __rest(_a, ["checked", "onChange", "disabled", "size", "label", "className", "id"]);
+    const handleChange = (e) => {
+        if (!disabled && onChange) {
+            onChange(e.target.checked);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (!disabled && onChange) {
+                onChange(!checked);
+            }
+        }
+    };
+    const handleClick = () => {
+        if (!disabled && onChange) {
+            onChange(!checked);
+        }
+    };
+    const checkboxSize = size === "small" ? "w-4 h-4" : "w-5 h-5";
+    const labelSize = size === "small" ? "text-b3" : "text-b1";
+    const checkboxClasses = (0, clsx_1.default)("relative flex items-center justify-center rounded border cursor-pointer transition-all duration-200", checkboxSize, 
+    // Default state
+    !disabled && !checked && "border-primary-500 bg-white", 
+    // Hover state
+    !disabled && !checked && "hover:bg-primary-100", 
+    // Focus state
+    !disabled &&
+        !checked &&
+        "focus:border-primary-500 focus:ring-2 focus:ring-primary-200", 
+    // Selected state
+    !disabled && checked && "border-primary-500 bg-primary-500", 
+    // Disabled state
+    disabled && "border-gray-200 bg-gray-100 cursor-not-allowed", className);
+    const labelClasses = (0, clsx_1.default)("ml-2 select-none transition-colors", labelSize, disabled ? "text-gray-400" : "text-gray-700");
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: checkboxClasses, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onClick: handleClick, role: "checkbox", "aria-checked": checked, "aria-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled, id: id, className: "sr-only" }, props)), checked && (0, jsx_runtime_1.jsx)(lu_1.LuCheck, { className: "w-3 h-3 text-white-100" })] }), label && ((0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: labelClasses, onClick: handleClick, style: { cursor: disabled ? "not-allowed" : "pointer" }, children: label }))] }));
+});
+exports.Checkbox.displayName = "Checkbox";

package/dist/components/atoms/Dropdown.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+type Option = {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+};
+type DropdownProps = {
+    options: Option[];
+    value?: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    placeholderIcon?: React.ReactNode;
+};
+export declare const Dropdown: React.FC<DropdownProps>;
+export {};

package/dist/components/atoms/Dropdown.js

@@ -0,0 +1,116 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
+const IconChevronDown_1 = require("../icons/IconChevronDown");
+const IconChevronUp_1 = require("../icons/IconChevronUp");
+const Dropdown = ({ options, value, onChange, placeholder = "Select", disabled = false, className = "", placeholderIcon, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [hoveredIndex, setHoveredIndex] = (0, react_1.useState)(null);
+    const [menuStyles, setMenuStyles] = (0, react_1.useState)({});
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    const [menuReady, setMenuReady] = (0, react_1.useState)(false);
+    const triggerRef = (0, react_1.useRef)(null);
+    const dropdownRef = (0, react_1.useRef)(null);
+    const menuRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+    }, []);
+    const selectedOption = options.find((opt) => opt.value === value);
+    const triggerClass = [
+        "w-full flex items-center gap-2 px-4 py-2 rounded-lg transition-colors outline-none text-left text-base font-normal select-none",
+        "bg-white-100 border border-gray-300 hover:border-primary-500 focus:border-primary-500",
+        disabled ? "text-textAtenea-300 hover:border-gray-200 cursor-not-allowed border-gray-200" : "cursor-pointer",
+        isOpen && !disabled ? "border-primary-500 ring-2 ring-primary-200" : "",
+        className,
+    ].join(" ");
+    const listClass = "absolute z-10 mt-1 w-full bg-white-100 rounded-lg border border-gray-200 py-1 animate-fade-in";
+    const optionBase = "flex items-center gap-2 px-4 py-2 cursor-pointer transition-colors text-base";
+    const optionSelected = "bg-green-50 text-green-700";
+    const optionHover = "bg-gray-50";
+    const optionDisabled = "text-gray-300 cursor-not-allowed";
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setIsOpen(true);
+            setHoveredIndex((prev) => prev === null || prev === options.length - 1 ? 0 : prev + 1);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setIsOpen(true);
+            setHoveredIndex((prev) => prev === null || prev === 0 ? options.length - 1 : prev - 1);
+        }
+        else if (e.key === "Enter" || e.key === " ") {
+            if (isOpen && hoveredIndex !== null && !options[hoveredIndex].disabled) {
+                onChange(options[hoveredIndex].value);
+                setIsOpen(false);
+            }
+            else {
+                setIsOpen((open) => !open);
+            }
+        }
+        else if (e.key === "Escape") {
+            setIsOpen(false);
+        }
+    };
+    // Calcula la posición del menú cuando se abre y al hacer scroll/resize
+    (0, react_1.useEffect)(() => {
+        if (!isOpen) {
+            setMenuReady(false);
+            return;
+        }
+        const updatePosition = () => {
+            if (triggerRef.current) {
+                const rect = triggerRef.current.getBoundingClientRect();
+                setMenuStyles({
+                    position: "fixed",
+                    top: rect.bottom + 4,
+                    left: rect.left,
+                    width: rect.width,
+                    zIndex: 9999,
+                });
+                setMenuReady(true);
+            }
+        };
+        setTimeout(updatePosition, 0);
+        window.addEventListener("scroll", updatePosition, true);
+        window.addEventListener("resize", updatePosition);
+        // Cierra el menú si haces click fuera del trigger y del menú
+        const handleClick = (e) => {
+            var _a, _b;
+            const target = e.target;
+            const isInsideTrigger = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);
+            const isInsideMenu = (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.contains(target);
+            if (!isInsideTrigger && !isInsideMenu) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClick);
+        return () => {
+            window.removeEventListener("scroll", updatePosition, true);
+            window.removeEventListener("resize", updatePosition);
+            document.removeEventListener("mousedown", handleClick);
+        };
+    }, [isOpen]);
+    // El menú del dropdown (portal)
+    const menu = ((0, jsx_runtime_1.jsx)("ul", { ref: menuRef, className: listClass, style: menuStyles, role: "listbox", tabIndex: -1, children: options.map((opt, idx) => ((0, jsx_runtime_1.jsxs)("li", { role: "option", "aria-selected": value === opt.value, className: [
+                optionBase,
+                value === opt.value ? optionSelected : "",
+                hoveredIndex === idx ? optionHover : "",
+                opt.disabled ? optionDisabled : "",
+            ].join(" "), onMouseEnter: () => setHoveredIndex(idx), onMouseLeave: () => setHoveredIndex(null), onClick: () => {
+                if (!opt.disabled) {
+                    onChange(opt.value);
+                    setIsOpen(false);
+                }
+            }, tabIndex: -1, children: [opt.icon ? ((0, jsx_runtime_1.jsx)("span", { className: value === opt.value ? "text-greenSuccess-800" : "text-gray-400", children: opt.icon })) : null, (0, jsx_runtime_1.jsx)("span", { className: opt.disabled ? "text-gray-300" : "", children: opt.label })] }, opt.value))) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative w-full", ref: dropdownRef, children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", className: triggerClass, onClick: () => !disabled && setIsOpen((open) => !open), onKeyDown: handleKeyDown, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, tabIndex: 0, children: [(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.icon) ? ((0, jsx_runtime_1.jsx)("span", { className: "text-greenSuccess-800", children: selectedOption.icon })) : placeholderIcon ? ((0, jsx_runtime_1.jsx)("span", { className: "text-gray-400", children: placeholderIcon })) : null, (0, jsx_runtime_1.jsx)("span", { className: selectedOption ? "textAtenea-900" : "text-gray-400", children: selectedOption ? selectedOption.label : placeholder }), (0, jsx_runtime_1.jsx)("span", { className: "ml-auto", children: isOpen ? ((0, jsx_runtime_1.jsx)("span", { className: "text-greenSuccess-800", children: (0, jsx_runtime_1.jsx)(IconChevronUp_1.IconChevronUp, {}) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-gray-400", children: (0, jsx_runtime_1.jsx)(IconChevronDown_1.IconChevronDown, {}) })) })] }), mounted && isOpen && menuReady && !disabled && typeof window !== "undefined" && react_dom_1.default.createPortal(menu, document.body)] }));
+};
+exports.Dropdown = Dropdown;

package/dist/components/atoms/Input.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    icon?: React.ReactNode;
+    helperText?: string;
+    error?: boolean;
+    warning?: boolean;
+    disabled?: boolean;
+    inputSize?: "large" | "medium";
+    variant?: "outline" | "filled";
+    className?: string;
+    showButton?: boolean;
+    onButtonClick?: () => void;
+    buttonIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/Input.js

@@ -0,0 +1,118 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const IconArrowUp_1 = require("../icons/IconArrowUp");
+const IconCalendar_1 = require("../icons/IconCalendar");
+exports.Input = react_1.default.forwardRef((_a, ref) => {
+    var { label, icon, helperText, error = false, warning = false, disabled = false, inputSize = "large", variant = "outline", className, showButton = false, onButtonClick, buttonIcon, value, type, id } = _a, props = __rest(_a, ["label", "icon", "helperText", "error", "warning", "disabled", "inputSize", "variant", "className", "showButton", "onButtonClick", "buttonIcon", "value", "type", "id"]);
+    const hasValue = value ? String(value).trim().length > 0 : false;
+    const isDateType = type === "date" || type === "datetime-local" || type === "time";
+    // Detect iOS to not break the native datepicker
+    const isIOS = typeof navigator !== "undefined" &&
+        /iP(hone|od|ad)/.test(navigator.userAgent);
+    const internalRef = react_1.default.useRef(null);
+    const internalId = react_1.default.useId();
+    const inputId = id !== null && id !== void 0 ? id : internalId;
+    const setRefs = react_1.default.useCallback((node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    const handleDateIconClick = () => {
+        if (!internalRef.current || disabled)
+            return;
+        // Modern browsers (Chrome, Edge, etc.)
+        const anyInput = internalRef.current;
+        if (typeof anyInput.showPicker === "function") {
+            try {
+                anyInput.showPicker();
+                return;
+            }
+            catch (_a) {
+                // if it fails, go to the fallback
+            }
+        }
+        // Fallback: focus on the input (in iOS and browsers without showPicker)
+        internalRef.current.focus();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1 w-full", children: [label && ((0, jsx_runtime_1.jsx)("label", { className: "text-textAtenea-900", htmlFor: inputId, children: label })), (0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("flex items-center rounded-xl border transition-colors relative", inputSize === "large" && "h-16 text-b1", inputSize === "medium" && "h-12 text-b2", icon
+                    ? inputSize === "large"
+                        ? "pl-6 pr-6"
+                        : "pl-4 pr-4"
+                    : inputSize === "large"
+                        ? "px-6"
+                        : "px-4", variant === "filled" &&
+                    (error
+                        ? "bg-redDanger-50"
+                        : warning
+                            ? "bg-yellowWarning-50"
+                            : disabled
+                                ? "bg-grey-100"
+                                : "bg-grey-50"), variant === "outline" && "bg-white", error
+                    ? "border-redDanger-500 text-redDanger-500"
+                    : warning
+                        ? "border-yellowWarning-500 text-yellowWarning-500"
+                        : disabled
+                            ? "border-grey-200 text-grey-300"
+                            : "border-grey-200 text-grey-500 focus-within:border-primary-500 focus-within:text-primary-500", !disabled &&
+                    !error &&
+                    !warning &&
+                    variant === "outline" &&
+                    "hover:border-grey-400", !disabled &&
+                    !error &&
+                    !warning &&
+                    variant === "filled" &&
+                    "hover:border-grey-300", className), children: [icon && ((0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)("flex-shrink-0 z-10 relative", "mr-3"), children: icon })), (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: setRefs, id: inputId, type: type, className: (0, clsx_1.default)("bg-transparent outline-none text-grey-900 placeholder:text-grey-400", disabled &&
+                            "cursor-not-allowed text-grey-300 placeholder:text-grey-300", showButton || isDateType
+                            ? "flex-1 pr-3 min-w-0"
+                            : "flex-1 min-w-0", 
+                        // Hide native elements only when NOT iOS
+                        isDateType &&
+                            !isIOS &&
+                            "appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-inner-spin-button]:hidden [&::-webkit-clear-button]:hidden"), style: isDateType && !isIOS
+                            ? {
+                                colorScheme: "light",
+                                WebkitAppearance: "none",
+                                MozAppearance: "textfield",
+                            }
+                            : undefined, disabled: disabled, value: value }, props)), isDateType && !showButton && ((0, jsx_runtime_1.jsx)("label", { htmlFor: inputId, 
+                        // onClick for browsers with showPicker (Chrome, Storybook)
+                        onClick: handleDateIconClick, className: (0, clsx_1.default)("flex items-center justify-center flex-shrink-0", disabled
+                            ? "opacity-50 cursor-not-allowed"
+                            : "cursor-pointer"), "aria-label": "Abrir calendario", children: (0, jsx_runtime_1.jsx)(IconCalendar_1.IconCalendar, { size: 20, color: disabled
+                                ? "grey-300"
+                                : error
+                                    ? "redDanger-500"
+                                    : warning
+                                        ? "yellowWarning-500"
+                                        : "grey-500" }) })), showButton && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: hasValue && !error && !warning ? onButtonClick : undefined, disabled: disabled || !hasValue || error || warning, className: (0, clsx_1.default)("flex items-center justify-center transition-colors", inputSize === "large" && "w-10 h-10", inputSize === "medium" && "w-8 h-8", hasValue && "rounded-full", hasValue && !error && !warning && !disabled
+                            ? "bg-primary-500 hover:bg-primary-600 text-textAtenea-900"
+                            : "cursor-not-allowed text-grey-400"), children: buttonIcon || ((0, jsx_runtime_1.jsx)(IconArrowUp_1.IconArrowUp, { size: 16, color: hasValue ? "textAtenea-900" : "text-grey-400" })) }))] }), helperText && ((0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)("text-b3 mt-1", error
+                    ? "text-redDanger-500"
+                    : warning
+                        ? "text-yellowWarning-500"
+                        : "text-grey-400"), children: helperText }))] }));
+});
+exports.Input.displayName = "Input";

package/dist/components/atoms/IntroIllustration.d.ts

@@ -0,0 +1,6 @@
+interface IntroIllustrationProps {
+    className?: string;
+    variant?: "quiz" | "flashcard";
+}
+export declare const IntroIllustration: React.FC<IntroIllustrationProps>;
+export {};

package/dist/components/atoms/IntroIllustration.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntroIllustration = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const IntroIllustration = ({ className = "", variant = "quiz", }) => {
+    if (variant === "flashcard") {
+        return ((0, jsx_runtime_1.jsx)("div", { className: `w-60 h-48 rounded-lg flex items-center justify-center bg-green-200 ${className}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-48 h-32 rounded-lg bg-green-200" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 w-48 h-32 rounded-md bg-gray-100 transform -translate-x-1 -translate-y-1" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute top-6 left-2 w-48 h-28 rounded-md bg-white-100", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-54 h-16 m-3 rounded-md bg-gray-100" }), (0, jsx_runtime_1.jsx)("div", { className: "w-16 h-4 ml-16 rounded-md bg-gray-200" })] })] }) }));
+    }
+    // Default quiz variant
+    return ((0, jsx_runtime_1.jsx)("div", { className: `w-60 h-48 rounded-lg flex items-center justify-center bg-primary-300 ${className}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-48 h-32 rounded bg-white-100 flex flex-col gap-2 p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-6 bg-gray-100 rounded-sm" }), (0, jsx_runtime_1.jsx)("div", { className: "h-3 bg-gray-100 rounded-sm" }), (0, jsx_runtime_1.jsx)("div", { className: "h-3 bg-gray-100 rounded-sm border border-primary-500" }), (0, jsx_runtime_1.jsx)("div", { className: "h-3 bg-gray-100 rounded-sm" }), (0, jsx_runtime_1.jsx)("div", { className: "h-3 bg-gray-100 rounded-sm" })] }) }));
+};
+exports.IntroIllustration = IntroIllustration;

package/dist/components/atoms/List.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type ListProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const List: React.FC<ListProps>;
+export {};

package/dist/components/atoms/List.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const List = ({ children, className = "" }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)("bg-white border border-gray-200 rounded-lg p-4 space-y-3", className), children: react_1.default.Children.map(children, (child, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [child, index < react_1.default.Children.count(children) - 1 && ((0, jsx_runtime_1.jsx)("div", { className: "border-t border-gray-200 mt-3 -mx-4 px-4" }))] }, index))) }));
+};
+exports.List = List;

package/dist/components/atoms/ListItem.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type ListItemProps = {
+    icon: React.ReactNode;
+    text: string;
+    iconColor?: string;
+    className?: string;
+};
+export declare const ListItem: React.FC<ListItemProps>;
+export {};

package/dist/components/atoms/ListItem.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const ListItem = ({ icon, text, iconColor = "text-blue-500", className = "", }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("flex items-start space-x-4 px-4 py-6", className), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)("flex-shrink-0 w-6 h-6", iconColor), children: icon }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-500 text-b1 leading-relaxed", children: text })] }));
+};
+exports.ListItem = ListItem;

package/dist/components/atoms/MenuItem.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type MenuItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    size?: "medium" | "small";
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+    onClick?: () => void;
+    collapsed?: boolean;
+    isActive?: boolean;
+    disabled?: boolean;
+};
+export declare const MenuItem: React.FC<MenuItemProps>;
+export {};

package/dist/components/atoms/MenuItem.js

@@ -0,0 +1,47 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const baseClasses = "flex items-center gap-2 transition-colors duration-150 rounded-md";
+const sizeClasses = {
+    medium: "px-3 py-2 text-b4",
+    small: "px-2 py-1.5 text-c2",
+};
+const getStateClasses = (isActive, disabled) => {
+    if (disabled) {
+        return "text-gray-400 cursor-not-allowed opacity-30";
+    }
+    if (isActive) {
+        return "bg-primary-200 text-primary-700 cursor-pointer";
+    }
+    return "text-textAtenea-300 hover:bg-primary-100 hover:text-primary-700 active:bg-primary-200 active:text-primary-700 cursor-pointer";
+};
+const getIconClasses = (isActive, disabled) => {
+    if (disabled) {
+        return "text-gray-400 opacity-50";
+    }
+    if (isActive) {
+        return "text-primary-700";
+    }
+    return "text-textAtenea-300 group-hover:text-primary-700 group-active:text-primary-700";
+};
+const MenuItem = (_a) => {
+    var { size = "medium", icon, children, onClick, collapsed = false, isActive = false, disabled = false, className } = _a, props = __rest(_a, ["size", "icon", "children", "onClick", "collapsed", "isActive", "disabled", "className"]);
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: (0, clsx_1.default)(baseClasses, sizeClasses[size], getStateClasses(isActive, disabled), "group w-full", collapsed ? "justify-center" : "text-left", className), onClick: onClick, disabled: disabled }, props, { children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)("flex-shrink-0 w-6 h-6 flex items-center justify-center", getIconClasses(isActive, disabled)), children: icon })), !collapsed && (0, jsx_runtime_1.jsx)("span", { className: "flex-1", children: children })] })));
+};
+exports.MenuItem = MenuItem;

package/dist/components/atoms/Radio.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type RadioSize = "small" | "medium";
+export declare const Radio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "onChange"> & {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: RadioSize;
+    label?: string;
+    helperText?: string;
+    className?: string;
+    id?: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export {};