flysoft-react-ui 0.3.1 → 0.3.2

package/dist/components/form-controls/AutocompleteInput.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import type { InputProps } from "./Input";
+export interface AutocompleteOption {
+    label: string;
+    value: string;
+    description?: string | number;
+    icon?: string;
+}
+export interface AutocompleteInputProps<T = AutocompleteOption, K = string> extends Omit<InputProps, "onChange" | "value"> {
+    options: T[];
+    value?: string;
+    /**
+     * Valor de texto del input (controlado)
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback al seleccionar una opción. Devuelve el item completo (T) y el valor mapeado (K)
+     */
+    onSelectOption?: (option: T, value: K) => void;
+    noResultsText?: string;
+    /**
+     * Obtiene el label que se muestra para cada opción. Por defecto usa la propiedad "label".
+     */
+    getOptionLabel?: (item: T) => string;
+    /**
+     * Obtiene el valor que se devuelve al seleccionar una opción. Por defecto usa la propiedad "value".
+     */
+    getOptionValue?: (item: T) => K;
+    /**
+     * Obtiene la descripción opcional para cada opción. Por defecto usa la propiedad "description".
+     */
+    getOptionDescription?: (item: T) => string | number | undefined;
+    /**
+     * Renderizado personalizado de cada opción. Si se define, se ignora el render por defecto.
+     */
+    renderOption?: (item: T) => React.ReactNode;
+}
+export declare const AutocompleteInput: <T = AutocompleteOption, K = string>({ options, value, onChange, onSelectOption, noResultsText, className, getOptionLabel, getOptionValue, getOptionDescription, renderOption, ...inputProps }: AutocompleteInputProps<T, K>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AutocompleteInput.d.ts.map

package/dist/components/form-controls/AutocompleteInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/AutocompleteInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,GAAG,kBAAkB,EAAE,CAAC,GAAG,MAAM,CACxE,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,CAAC;IAC9C,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IAChC;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAChE;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CAC7C;AAED,eAAO,MAAM,iBAAiB,GAAI,CAAC,GAAG,kBAAkB,EAAE,CAAC,GAAG,MAAM,EAAE,2JAYnE,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,4CAoM9B,CAAC"}

package/dist/components/form-controls/AutocompleteInput.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Input } from "./Input";
+export const AutocompleteInput = ({ options, value, onChange, onSelectOption, noResultsText = "Sin resultados", className = "", getOptionLabel, getOptionValue, getOptionDescription, renderOption, ...inputProps }) => {
+    const [internalValue, setInternalValue] = React.useState(value || "");
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
+    const containerRef = React.useRef(null);
+    const inputValue = value !== undefined ? value : internalValue;
+    const labelGetter = React.useCallback((item) => {
+        if (getOptionLabel)
+            return getOptionLabel(item);
+        const anyItem = item;
+        return (anyItem.label ?? "").toString();
+    }, [getOptionLabel]);
+    const valueGetter = React.useCallback((item) => {
+        if (getOptionValue)
+            return getOptionValue(item);
+        const anyItem = item;
+        return anyItem.value ?? undefined;
+    }, [getOptionValue]);
+    const descriptionGetter = React.useCallback((item) => {
+        if (getOptionDescription)
+            return getOptionDescription(item);
+        const anyItem = item;
+        return anyItem.description;
+    }, [getOptionDescription]);
+    const filteredOptions = React.useMemo(() => {
+        const search = inputValue.trim().toLowerCase();
+        if (!search)
+            return options;
+        return options.filter((option) => {
+            const label = labelGetter(option).toLowerCase();
+            const optionValue = String(valueGetter(option) ?? "").toLowerCase();
+            return label.includes(search) || optionValue.includes(search);
+        });
+    }, [inputValue, options, labelGetter, valueGetter]);
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        if (value === undefined) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+        setIsOpen(true);
+        setHighlightedIndex(-1);
+    };
+    const handleSelect = (option) => {
+        const label = labelGetter(option);
+        const selectedValue = valueGetter(option);
+        if (value === undefined) {
+            setInternalValue(label);
+        }
+        onChange?.(label);
+        onSelectOption?.(option, selectedValue);
+        setIsOpen(false);
+    };
+    const handleKeyDown = (event) => {
+        if (!isOpen && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+            setIsOpen(true);
+            return;
+        }
+        if (!filteredOptions.length)
+            return;
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0);
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setHighlightedIndex((prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1);
+        }
+        else if (event.key === "Enter") {
+            if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+                event.preventDefault();
+                handleSelect(filteredOptions[highlightedIndex]);
+            }
+        }
+        else if (event.key === "Escape") {
+            setIsOpen(false);
+        }
+    };
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setInternalValue(value);
+        }
+    }, [value]);
+    const showDropdown = isOpen && (filteredOptions.length > 0 || noResultsText);
+    return (_jsxs("div", { ref: containerRef, className: "relative w-full", children: [_jsx(Input, { ...inputProps, value: inputValue, onChange: handleChange, onFocus: () => setIsOpen(true), onKeyDown: handleKeyDown, className: className, autoComplete: "off" }), showDropdown && (_jsx("div", { className: "absolute z-20 mt-1 w-full rounded-md border border-[var(--color-border-default)] \r\n          bg-[var(--color-bg-default)] shadow-[var(--shadow-lg)] max-h-60 overflow-auto", children: filteredOptions.length > 0 ? (_jsx("ul", { className: "py-1", children: filteredOptions.map((option, index) => {
+                        const label = labelGetter(option);
+                        const description = descriptionGetter(option);
+                        const anyOption = option;
+                        return (_jsx("li", { className: `px-3 py-2 cursor-pointer flex items-start gap-2 text-sm
+                      ${index === highlightedIndex
+                                ? "bg-[var(--color-primary-soft)] text-[var(--color-primary)]"
+                                : "text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)]"}`, onMouseDown: (event) => {
+                                event.preventDefault();
+                                handleSelect(option);
+                            }, onMouseEnter: () => setHighlightedIndex(index), children: renderOption ? (renderOption(option)) : (_jsxs(_Fragment, { children: [anyOption.icon && (_jsx("i", { className: `fa ${anyOption.icon} mt-0.5 text-[var(--color-text-muted)]` })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-[var(--font-default)]", children: label }), description !== undefined &&
+                                                description !== null && (_jsx("span", { className: "text-xs text-[var(--color-text-secondary)]", children: description }))] })] })) }, String(valueGetter(option) ?? label ?? index)));
+                    }) })) : (_jsx("div", { className: "px-3 py-2 text-sm text-[var(--color-text-secondary)]", children: noResultsText })) }))] }));
+};

package/dist/components/form-controls/DateInput.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { InputProps } from "./Input";
+import type { DatePickerProps } from "./DatePicker";
+export type DateInputFormat = "dd/mm/yyyy" | "mm/dd/yyyy";
+export interface DateInputProps extends Omit<InputProps, "type" | "value" | "onChange"> {
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+    format?: DateInputFormat;
+    datePickerProps?: Omit<DatePickerProps, "value" | "onChange">;
+}
+export declare const DateInput: React.FC<DateInputProps>;
+//# sourceMappingURL=DateInput.d.ts.map

package/dist/components/form-controls/DateInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,YAAY,CAAC;AAE1D,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IACvD,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;CAC/D;AAsFD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuK9C,CAAC"}

package/dist/components/form-controls/DateInput.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Input } from "./Input";
+import { DatePicker } from "./DatePicker";
+const pad = (value) => value.toString().padStart(2, "0");
+const formatDateToString = (date, format) => {
+    if (!date)
+        return "";
+    const day = pad(date.getDate());
+    const month = pad(date.getMonth() + 1);
+    const year = date.getFullYear().toString();
+    if (format === "mm/dd/yyyy") {
+        return `${month}/${day}/${year}`;
+    }
+    return `${day}/${month}/${year}`;
+};
+const parseDateFromString = (value, format) => {
+    // Primero intentar parsear como números sin separadores (ej: 11102025)
+    const numbersOnly = value.replace(/\D/g, "");
+    if (numbersOnly.length === 8) {
+        // Formato: ddmmyyyy o mmddyyyy
+        const p1 = parseInt(numbersOnly.substring(0, 2), 10);
+        const p2 = parseInt(numbersOnly.substring(2, 4), 10);
+        const p3 = parseInt(numbersOnly.substring(4, 8), 10);
+        const day = format === "mm/dd/yyyy" ? p2 : p1;
+        const month = format === "mm/dd/yyyy" ? p1 : p2;
+        const year = p3;
+        if (!isNaN(day) &&
+            !isNaN(month) &&
+            !isNaN(year) &&
+            day >= 1 &&
+            month >= 1 &&
+            month <= 12 &&
+            year >= 1000 &&
+            year <= 9999) {
+            const date = new Date(year, month - 1, day);
+            if (date.getFullYear() === year &&
+                date.getMonth() === month - 1 &&
+                date.getDate() === day) {
+                return date;
+            }
+        }
+    }
+    // Si no funciona, intentar parsear con separadores
+    const parts = value.split(/[/\-.]/).map((p) => p.trim());
+    if (parts.length !== 3)
+        return null;
+    const [p1, p2, p3] = parts;
+    const day = format === "mm/dd/yyyy" ? parseInt(p2, 10) : parseInt(p1, 10);
+    const month = format === "mm/dd/yyyy" ? parseInt(p1, 10) : parseInt(p2, 10);
+    const year = parseInt(p3, 10);
+    if (isNaN(day) ||
+        isNaN(month) ||
+        isNaN(year) ||
+        day < 1 ||
+        month < 1 ||
+        month > 12) {
+        return null;
+    }
+    const date = new Date(year, month - 1, day);
+    if (date.getFullYear() !== year ||
+        date.getMonth() !== month - 1 ||
+        date.getDate() !== day) {
+        return null;
+    }
+    return date;
+};
+export const DateInput = ({ value, onChange, format = "dd/mm/yyyy", datePickerProps, icon = "fa-calendar-alt", iconPosition = "right", className = "", ...inputProps }) => {
+    const [internalDate, setInternalDate] = React.useState(value ?? null);
+    const [inputValue, setInputValue] = React.useState(formatDateToString(value ?? null, format));
+    const [isOpen, setIsOpen] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const inputWrapperRef = React.useRef(null);
+    const iconRef = React.useRef(null);
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setInternalDate(value);
+            setInputValue(formatDateToString(value, format));
+        }
+    }, [value, format]);
+    // Centrar el ícono verticalmente respecto al input real
+    React.useEffect(() => {
+        const updateIconPosition = () => {
+            if (iconPosition === "right" &&
+                inputWrapperRef.current &&
+                iconRef.current) {
+                const inputElement = inputWrapperRef.current.querySelector("input");
+                if (inputElement) {
+                    const inputRect = inputElement.getBoundingClientRect();
+                    const wrapperRect = inputWrapperRef.current.getBoundingClientRect();
+                    const topOffset = inputRect.top - wrapperRect.top + inputRect.height / 2;
+                    iconRef.current.style.top = `${topOffset}px`;
+                    iconRef.current.style.transform = "translateY(-50%)";
+                }
+            }
+        };
+        // Ejecutar inmediatamente
+        updateIconPosition();
+        // Ejecutar cuando cambie el tamaño de la ventana
+        window.addEventListener("resize", updateIconPosition);
+        return () => {
+            window.removeEventListener("resize", updateIconPosition);
+        };
+    }, [iconPosition, inputValue, inputProps.label, inputProps.size]);
+    const handleDateChange = (date) => {
+        if (value === undefined) {
+            setInternalDate(date);
+            setInputValue(formatDateToString(date, format));
+        }
+        onChange?.(date);
+        setIsOpen(false);
+    };
+    const handleInputChange = (event) => {
+        const newValue = event.target.value;
+        setInputValue(newValue);
+        // No intentamos parsear en cada pulsación, solo actualizamos el texto.
+    };
+    const handleInputBlur = (event) => {
+        const newValue = event.target.value.trim();
+        if (!newValue) {
+            handleDateChange(null);
+            return;
+        }
+        const parsed = parseDateFromString(newValue, format);
+        if (parsed) {
+            handleDateChange(parsed);
+        }
+        else {
+            // Si no es válida, restauramos el valor anterior formateado.
+            setInputValue(formatDateToString(internalDate, format));
+        }
+    };
+    const handleIconClick = (event) => {
+        event.preventDefault();
+        setIsOpen((prev) => !prev);
+    };
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    const datePickerInitialViewDate = internalDate ?? datePickerProps?.initialViewDate ?? new Date();
+    return (_jsxs("div", { ref: containerRef, className: "relative w-full", children: [_jsxs("div", { ref: inputWrapperRef, className: "relative", children: [_jsx(Input, { ...inputProps, type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, icon: iconPosition === "right" ? undefined : icon, iconPosition: iconPosition, placeholder: inputProps.placeholder ??
+                            (format === "mm/dd/yyyy" ? "mm/dd/yyyy" : "dd/mm/yyyy"), className: `${className} ${iconPosition === "right" ? "pr-10" : ""}` }), iconPosition === "right" && (_jsx("div", { ref: iconRef, className: "absolute right-3 cursor-pointer", onMouseDown: handleIconClick, children: _jsx("i", { className: `fa ${icon} ${inputProps.size === "sm"
+                                ? "w-4 h-4"
+                                : inputProps.size === "lg"
+                                    ? "w-6 h-6"
+                                    : "w-5 h-5"} text-[var(--color-text-muted)]` }) }))] }), isOpen && (_jsx("div", { className: "absolute z-20 mt-1 right-0", children: _jsx(DatePicker, { ...datePickerProps, value: internalDate ?? datePickerInitialViewDate, onChange: (date) => handleDateChange(date) }) }))] }));
+};

package/dist/components/form-controls/DatePicker.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type DatePickerView = {
+    month: number;
+    year: number;
+};
+export interface DatePickerProps {
+    value?: Date | null;
+    onChange?: (date: Date) => void;
+    initialViewDate?: Date;
+    startWeekOn?: "monday" | "sunday";
+    className?: string;
+}
+export declare const DatePicker: React.FC<DatePickerProps>;
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/form-controls/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,eAAe,CAAC,EAAE,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuOhD,CAAC"}

package/dist/components/form-controls/DatePicker.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Button } from "./Button";
+const createDateAtMidnight = (date) => {
+    const d = new Date(date);
+    d.setHours(0, 0, 0, 0);
+    return d;
+};
+const isSameDay = (a, b) => {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+};
+const getDaysInMonth = (year, month) => {
+    return new Date(year, month + 1, 0).getDate();
+};
+const getWeekdayLabels = (startWeekOn) => {
+    const base = ["D", "L", "M", "X", "J", "V", "S"];
+    if (startWeekOn === "sunday") {
+        return base;
+    }
+    return [...base.slice(1), base[0]];
+};
+export const DatePicker = ({ value, onChange, initialViewDate, startWeekOn = "sunday", className = "", }) => {
+    const today = React.useMemo(() => createDateAtMidnight(new Date()), []);
+    const initial = React.useMemo(() => {
+        const base = value ?? initialViewDate ?? today;
+        return {
+            month: base.getMonth(),
+            year: base.getFullYear(),
+        };
+    }, [value, initialViewDate, today]);
+    const [view, setView] = React.useState(initial);
+    React.useEffect(() => {
+        if (value) {
+            setView({
+                month: value.getMonth(),
+                year: value.getFullYear(),
+            });
+        }
+    }, [value]);
+    const handlePrevMonth = () => {
+        setView((prev) => {
+            const month = prev.month === 0 ? 11 : prev.month - 1;
+            const year = prev.month === 0 ? prev.year - 1 : prev.year;
+            return { month, year };
+        });
+    };
+    const handleNextMonth = () => {
+        setView((prev) => {
+            const month = prev.month === 11 ? 0 : prev.month + 1;
+            const year = prev.month === 11 ? prev.year + 1 : prev.year;
+            return { month, year };
+        });
+    };
+    const handlePrevYear = () => {
+        setView((prev) => ({ ...prev, year: prev.year - 1 }));
+    };
+    const handleNextYear = () => {
+        setView((prev) => ({ ...prev, year: prev.year + 1 }));
+    };
+    const handleSelectDay = (day, month, year) => {
+        const targetMonth = month !== undefined ? month : view.month;
+        const targetYear = year !== undefined ? year : view.year;
+        const date = new Date(targetYear, targetMonth, day);
+        onChange?.(createDateAtMidnight(date));
+        // Si el día es de otro mes, cambiar la vista
+        if (month !== undefined && month !== view.month) {
+            setView({ month: targetMonth, year: targetYear });
+        }
+        else if (year !== undefined && year !== view.year) {
+            setView({ month: targetMonth, year: targetYear });
+        }
+    };
+    const firstDayOfMonth = new Date(view.year, view.month, 1);
+    const firstWeekday = firstDayOfMonth.getDay(); // 0-6, Sunday=0
+    const daysInMonth = getDaysInMonth(view.year, view.month);
+    const weekdayLabels = getWeekdayLabels(startWeekOn);
+    const offset = startWeekOn === "sunday"
+        ? firstWeekday
+        : firstWeekday === 0
+            ? 6
+            : firstWeekday - 1;
+    // Calcular días del mes anterior y siguiente
+    const prevMonth = view.month === 0 ? 11 : view.month - 1;
+    const prevYear = view.month === 0 ? view.year - 1 : view.year;
+    const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth);
+    const nextMonth = view.month === 11 ? 0 : view.month + 1;
+    const nextYear = view.month === 11 ? view.year + 1 : view.year;
+    const weeks = [];
+    // Construir todas las semanas (6 semanas = 42 días)
+    let dayCounter = 1 - offset; // Puede ser negativo para días del mes anterior
+    for (let week = 0; week < 6; week++) {
+        const currentWeek = [];
+        for (let dayOfWeek = 0; dayOfWeek < 7; dayOfWeek++) {
+            if (dayCounter < 1) {
+                // Día del mes anterior
+                const day = daysInPrevMonth + dayCounter;
+                currentWeek.push({ day, month: prevMonth, year: prevYear });
+            }
+            else if (dayCounter > daysInMonth) {
+                // Día del mes siguiente
+                const day = dayCounter - daysInMonth;
+                currentWeek.push({ day, month: nextMonth, year: nextYear });
+            }
+            else {
+                // Día del mes actual
+                currentWeek.push({
+                    day: dayCounter,
+                    month: view.month,
+                    year: view.year,
+                });
+            }
+            dayCounter++;
+        }
+        weeks.push(currentWeek);
+    }
+    const selectedDate = value && !isNaN(value.getTime()) ? createDateAtMidnight(value) : null;
+    const monthName = new Date(view.year, view.month, 1).toLocaleString("es-ES", {
+        month: "long",
+    });
+    return (_jsxs("div", { className: `inline-flex flex-col rounded-lg border border-[var(--color-border-default)] 
+      bg-[var(--color-bg-default)] p-3 shadow-sm font-[var(--font-default)] text-sm ${className}`, children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { size: "sm", variant: "ghost", icon: "fa-angle-double-left", onClick: handlePrevYear, "aria-label": "A\u00F1o anterior" }), _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-angle-left", onClick: handlePrevMonth, "aria-label": "Mes anterior" })] }), _jsx("div", { className: "text-center", children: _jsxs("div", { className: "text-[var(--color-text-primary)] font-medium capitalize", children: [monthName, " ", view.year] }) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { size: "sm", variant: "ghost", icon: "fa-angle-right", onClick: handleNextMonth, "aria-label": "Mes siguiente" }), _jsx(Button, { size: "sm", variant: "ghost", icon: "fa-angle-double-right", onClick: handleNextYear, "aria-label": "A\u00F1o siguiente" })] })] }), _jsx("div", { className: "grid grid-cols-7 gap-1 mb-1", children: weekdayLabels.map((label) => (_jsx("div", { className: "text-xs text-center text-[var(--color-text-secondary)]", children: label }, label))) }), _jsx("div", { className: "grid grid-rows-6 gap-1", children: weeks.map((week, rowIndex) => (_jsx("div", { className: "grid grid-cols-7 gap-1", children: week.map((dayInfo, index) => {
+                        const { day, month, year } = dayInfo;
+                        const isCurrentMonth = month === view.month && year === view.year;
+                        const date = new Date(year, month, day);
+                        const isToday = isSameDay(date, today);
+                        const isSelected = selectedDate !== null && isSameDay(date, selectedDate);
+                        let dayClasses = "w-8 h-8 flex items-center justify-center rounded-full cursor-pointer text-xs";
+                        if (isSelected) {
+                            dayClasses +=
+                                " bg-[var(--color-primary)] text-[var(--color-primary-contrast)]";
+                        }
+                        else if (isToday) {
+                            dayClasses +=
+                                " border border-[var(--color-primary)] text-[var(--color-primary)]";
+                        }
+                        else if (isCurrentMonth) {
+                            dayClasses +=
+                                " text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)]";
+                        }
+                        else {
+                            dayClasses +=
+                                " text-[var(--color-text-muted)] opacity-50 hover:bg-[var(--color-bg-secondary)] hover:opacity-75";
+                        }
+                        return (_jsx("button", { type: "button", className: dayClasses, onClick: () => handleSelectDay(day, month, year), children: day }, index));
+                    }) }, rowIndex))) })] }));
+};

package/dist/components/form-controls/index.d.ts

@@ -1,5 +1,11 @@
 export { Button } from "./Button";
 export { Input } from "./Input";
+export { AutocompleteInput } from "./AutocompleteInput";
+export { DatePicker } from "./DatePicker";
+export { DateInput } from "./DateInput";
 export type { ButtonProps } from "./Button";
 export type { InputProps } from "./Input";
+export type { AutocompleteInputProps, AutocompleteOption, } from "./AutocompleteInput";
+export type { DatePickerProps } from "./DatePicker";
+export type { DateInputProps, DateInputFormat } from "./DateInput";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/form-controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/form-controls/index.js

@@ -1,2 +1,5 @@
 export { Button } from "./Button";
 export { Input } from "./Input";
+export { AutocompleteInput } from "./AutocompleteInput";
+export { DatePicker } from "./DatePicker";
+export { DateInput } from "./DateInput";

package/dist/components/layout/AppLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/AppLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,MAAM,WAAW,cAAc;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoL9C,CAAC"}
+{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/AppLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,MAAM,WAAW,cAAc;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyN9C,CAAC"}

package/dist/components/layout/AppLayout.js

@@ -10,35 +10,69 @@ export const AppLayout = ({ navBarDrawer, leftDrawer, children, className = "",
     const [isMobileDrawerOpen, setIsMobileDrawerOpen] = useState(false);
     const [isNavbarVisible, setIsNavbarVisible] = useState(true);
     const isNavbarVisibleRef = useRef(isNavbarVisible);
+    const isTransitioningRef = useRef(false);
+    const lastScrollYRef = useRef(0);
     const shouldShowMobileDrawer = isMobile || isTablet;
     const shouldShowDesktopDrawer = !shouldShowMobileDrawer && leftDrawer;
     // Mantener el ref sincronizado con el estado
     React.useEffect(() => {
         isNavbarVisibleRef.current = isNavbarVisible;
+        // Marcar que estamos en transición por 350ms (duración de la transición + margen)
+        isTransitioningRef.current = true;
+        const timer = setTimeout(() => {
+            isTransitioningRef.current = false;
+        }, 350);
+        return () => clearTimeout(timer);
     }, [isNavbarVisible]);
-    // Controlar visibilidad del navbar basado en scroll
+    // Controlar visibilidad del navbar basado en scroll con histeresis mejorada
     React.useEffect(() => {
+        // Ignorar cambios durante transiciones o cambios muy pequeños de scroll
+        if (isTransitioningRef.current) {
+            return;
+        }
+        const SCROLL_DELTA_THRESHOLD = 5; // Mínimo cambio de scroll para considerar
+        const scrollDelta = Math.abs(scrollY - lastScrollYRef.current);
+        // Ignorar cambios muy pequeños que pueden ser causados por el cambio de padding
+        if (scrollDelta < SCROLL_DELTA_THRESHOLD && lastScrollYRef.current > 0) {
+            return;
+        }
+        const SHOW_THRESHOLD = 80;
+        const HIDE_THRESHOLD = 120;
+        // Verificar si estamos cerca del final del scroll (margen de error de 10px)
+        const element = contentRef.current;
+        const isNearBottom = element
+            ? Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 10
+            : false;
         let shouldBeVisible;
-        if (scrollY < 100) {
+        if (scrollY < SHOW_THRESHOLD) {
             // Siempre mostrar navbar cerca del top
             shouldBeVisible = true;
         }
-        else if (scrollDirection === "down" && scrollY > 100) {
-            // Ocultar navbar al hacer scroll hacia abajo
+        else if (scrollDirection === "down" && scrollY > HIDE_THRESHOLD && !isNearBottom) {
+            // Ocultar navbar al hacer scroll hacia abajo, excepto si estamos cerca del final
             shouldBeVisible = false;
         }
-        else if (scrollDirection === "up" && scrollY > 100) {
+        else if (scrollDirection === "up" && scrollY > SHOW_THRESHOLD) {
             // Mostrar navbar al hacer scroll hacia arriba
             shouldBeVisible = true;
         }
+        else if (isNearBottom && scrollDirection === "down") {
+            // Si estamos en el final y scrolleamos hacia abajo, mantener el estado actual
+            return;
+        }
         else {
             // No cambiar el estado si scrollDirection es null o no se cumple ninguna condición
             return;
         }
         // Solo actualizar el estado si hay un cambio real
         if (shouldBeVisible !== isNavbarVisibleRef.current) {
+            lastScrollYRef.current = scrollY;
             setIsNavbarVisible(shouldBeVisible);
         }
+        else {
+            // Actualizar la referencia del scroll incluso si no cambiamos la visibilidad
+            lastScrollYRef.current = scrollY;
+        }
     }, [scrollDirection, scrollY]);
     const handleMobileDrawerToggle = () => {
         setIsMobileDrawerOpen(!isMobileDrawerOpen);

package/dist/docs/AutocompleteInputDocs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const AutocompleteInputDocs: React.FC;
+export default AutocompleteInputDocs;
+//# sourceMappingURL=AutocompleteInputDocs.d.ts.map

package/dist/docs/AutocompleteInputDocs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInputDocs.d.ts","sourceRoot":"","sources":["../../src/docs/AutocompleteInputDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA4E1B,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EA4SlC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}