flysoft-react-ui 0.4.0 → 0.5.2

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

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import dayjs, {} from "dayjs";
 import { Button } from "./Button";
 const createDateAtMidnight = (date) => {
-    const d = new Date(date);
-    d.setHours(0, 0, 0, 0);
-    return d;
+    const d = dayjs(date);
+    return d.startOf("day");
 };
 const isSameDay = (a, b) => {
-    return (a.getFullYear() === b.getFullYear() &&
-        a.getMonth() === b.getMonth() &&
-        a.getDate() === b.getDate());
+    return a.isSame(b, "day");
 };
 const getDaysInMonth = (year, month) => {
-    return new Date(year, month + 1, 0).getDate();
+    return dayjs().year(year).month(month).daysInMonth();
 };
 const getWeekdayLabels = (startWeekOn) => {
     const base = ["D", "L", "M", "X", "J", "V", "S"];
@@ -22,23 +20,19 @@ const getWeekdayLabels = (startWeekOn) => {
     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;
+    const today = React.useMemo(() => dayjs().startOf("day"), []);
+    const getViewFromValue = React.useCallback((val) => {
+        const base = val ?? initialViewDate ?? today;
         return {
-            month: base.getMonth(),
-            year: base.getFullYear(),
+            month: base.month(),
+            year: base.year(),
         };
-    }, [value, initialViewDate, today]);
-    const [view, setView] = React.useState(initial);
+    }, [initialViewDate, today]);
+    const [view, setView] = React.useState(() => getViewFromValue(value));
     React.useEffect(() => {
-        if (value) {
-            setView({
-                month: value.getMonth(),
-                year: value.getFullYear(),
-            });
-        }
-    }, [value]);
+        // Sincronizar la vista con el valor actual, incluso si es null/undefined
+        setView(getViewFromValue(value));
+    }, [value, getViewFromValue]);
     const handlePrevMonth = () => {
         setView((prev) => {
             const month = prev.month === 0 ? 11 : prev.month - 1;
@@ -62,7 +56,7 @@ export const DatePicker = ({ value, onChange, initialViewDate, startWeekOn = "su
     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);
+        const date = dayjs().year(targetYear).month(targetMonth).date(day);
         onChange?.(createDateAtMidnight(date));
         // Si el día es de otro mes, cambiar la vista
         if (month !== undefined && month !== view.month) {
@@ -72,8 +66,8 @@ export const DatePicker = ({ value, onChange, initialViewDate, startWeekOn = "su
             setView({ month: targetMonth, year: targetYear });
         }
     };
-    const firstDayOfMonth = new Date(view.year, view.month, 1);
-    const firstWeekday = firstDayOfMonth.getDay(); // 0-6, Sunday=0
+    const firstDayOfMonth = dayjs().year(view.year).month(view.month).date(1);
+    const firstWeekday = firstDayOfMonth.day(); // 0-6, Sunday=0
     const daysInMonth = getDaysInMonth(view.year, view.month);
     const weekdayLabels = getWeekdayLabels(startWeekOn);
     const offset = startWeekOn === "sunday"
@@ -115,15 +109,17 @@ export const DatePicker = ({ value, onChange, initialViewDate, startWeekOn = "su
         }
         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)] 
+    const selectedDate = value && value.isValid() ? createDateAtMidnight(value) : null;
+    const monthName = dayjs()
+        .year(view.year)
+        .month(view.month)
+        .date(1)
+        .format("MMMM");
+    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, { type: "button", size: "sm", variant: "ghost", icon: "fa-angle-double-left", onClick: handlePrevYear, "aria-label": "A\u00F1o anterior" }), _jsx(Button, { type: "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, { type: "button", size: "sm", variant: "ghost", icon: "fa-angle-right", onClick: handleNextMonth, "aria-label": "Mes siguiente" }), _jsx(Button, { type: "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 date = dayjs().year(year).month(month).date(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";

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

@@ -6,6 +6,15 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     iconPosition?: "left" | "right";
     size?: "sm" | "md" | "lg";
     children?: React.ReactNode;
+    /**
+     * Callback cuando se hace click en el ícono. Si está definido, el ícono será clickeable.
+     */
+    onIconClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Si es true, el input será de solo lectura. No se podrá modificar pero no se verá como disabled.
+     * Por defecto es false.
+     */
+    readOnly?: boolean;
 }
-export declare const Input: React.FC<InputProps>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0EtC,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,qFA4FjB,CAAC"}

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

@@ -1,27 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-export const Input = ({ label, error, icon, iconPosition = "left", size = "md", className = "", id, ...props }) => {
+export const Input = React.forwardRef(({ label, error, icon, iconPosition = "left", size = "md", className = "", id, onIconClick, readOnly = false, ...props }, ref) => {
     const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
     const baseClasses = `
-    w-full border rounded-lg transition-colors focus:outline-none focus:ring-1
+    w-full border rounded-lg transition-colors focus:outline-none
     disabled:opacity-50 disabled:cursor-not-allowed
     font-[var(--font-default)] text-[var(--color-text-primary)]
-    bg-[var(--color-bg-default)]
   `;
+    const readOnlyClasses = readOnly
+        ? `border-transparent bg-transparent focus:ring-0`
+        : `focus:ring-1 bg-[var(--color-bg-default)]`;
     const sizeClasses = {
         sm: "px-3 py-1.5 text-sm",
         md: "px-4 py-2 text-base",
         lg: "px-6 py-3 text-lg",
     };
-    const stateClasses = error
-        ? `border-[var(--color-border-error)] focus:border-[var(--color-border-error)] focus:ring-[var(--color-border-error)]`
-        : `border-[var(--color-border-default)] focus:border-[var(--color-border-focus)] focus:ring-[var(--color-border-focus)]`;
-    const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${className}`;
+    const stateClasses = readOnly
+        ? ""
+        : error
+            ? `border-[var(--color-border-error)] focus:border-[var(--color-border-error)] focus:ring-[var(--color-border-error)]`
+            : `border-[var(--color-border-default)] focus:border-[var(--color-border-focus)] focus:ring-[var(--color-border-focus)]`;
+    const inputClasses = `${baseClasses} ${readOnlyClasses} ${sizeClasses[size]} ${stateClasses} ${className}`;
     const iconClasses = size === "sm" ? "w-4 h-4" : size === "md" ? "w-5 h-5" : "w-6 h-6";
     const renderIcon = () => {
         if (!icon)
             return null;
-        return (_jsx("i", { className: `fa ${icon} ${iconClasses} text-[var(--color-text-muted)] absolute top-1/2 transform -translate-y-1/2 ${iconPosition === "left" ? "left-3" : "right-3"}` }));
+        const iconElement = (_jsx("i", { className: `fa ${icon} ${iconClasses} text-[var(--color-text-muted)] absolute top-1/2 transform -translate-y-1/2 ${iconPosition === "left" ? "left-3" : "right-3"} ${onIconClick && !readOnly ? "cursor-pointer hover:text-[var(--color-primary)] transition-colors" : ""}`, onClick: readOnly ? undefined : onIconClick }));
+        return iconElement;
     };
-    return (_jsxs("div", { className: "w-full", children: [label && (_jsx("label", { htmlFor: inputId, className: "block text-sm text-[var(--color-primary)] mb-1 font-[var(--font-default)]", children: label })), _jsxs("div", { className: "relative", children: [icon && iconPosition === "left" && renderIcon(), _jsx("input", { id: inputId, className: `${inputClasses} ${icon && iconPosition === "left" ? "pl-10" : ""} ${icon && iconPosition === "right" ? "pr-10" : ""}`, ...props }), icon && iconPosition === "right" && renderIcon()] }), error && (_jsx("p", { className: "mt-1 text-sm text-[var(--color-danger)] font-[var(--font-default)]", children: error }))] }));
-};
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx("label", { htmlFor: inputId, className: "block text-sm text-[var(--color-primary)] mb-1 font-[var(--font-default)]", children: label })), _jsxs("div", { className: "relative", children: [icon && iconPosition === "left" && renderIcon(), _jsx("input", { ref: ref, id: inputId, className: `${inputClasses} ${icon && iconPosition === "left" ? "pl-10" : ""} ${icon && iconPosition === "right" ? "pr-10" : ""}`, autoComplete: "off", readOnly: readOnly, ...props }), icon && iconPosition === "right" && renderIcon()] }), error && (_jsx("p", { className: "mt-1 text-sm text-[var(--color-danger)] font-[var(--font-default)]", children: error }))] }));
+});
+Input.displayName = "Input";

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

@@ -11,6 +11,7 @@ export interface PaginationProps {
     page?: number;
     pages?: number;
     total?: number;
+    isLoading?: boolean;
 }
 export declare const Pagination: React.FC<PaginationProps>;
 //# sourceMappingURL=Pagination.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsHhD,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0FhD,CAAC"}

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

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useSearchParams } from "react-router-dom";
 import { Button } from "./Button";
-export const Pagination = ({ fieldName = "pagina", page = 1, pages = 1, total = 0, }) => {
+export const Pagination = ({ fieldName = "pagina", page = 1, pages = 1, total = 0, isLoading = false, }) => {
     const [searchParams, setSearchParams] = useSearchParams();
     const navigateToPage = (newPage) => {
         if (newPage < 1 || newPage > pages || newPage === page) {
@@ -19,42 +19,5 @@ export const Pagination = ({ fieldName = "pagina", page = 1, pages = 1, total =
     const isFirstPage = page <= 1;
     const isLastPage = page >= pages;
     const hasPages = pages > 1;
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-double-left", onClick: goToFirstPage, disabled: isFirstPage || !hasPages, "aria-label": "Primera p\u00E1gina" }) }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-left", onClick: goToPreviousPage, disabled: isFirstPage || !hasPages, "aria-label": "P\u00E1gina anterior" }) }), _jsxs("div", { className: "text-xs", children: [_jsxs("span", { className: "block", children: ["P\u00E1gina ", page, " de ", pages] }), _jsxs("span", { className: "block", children: [total, " elemento", total !== 1 ? "s" : ""] })] }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-right", onClick: goToNextPage, disabled: isLastPage || !hasPages, "aria-label": "P\u00E1gina siguiente" }) }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-double-right", onClick: goToLastPage, disabled: isLastPage || !hasPages, "aria-label": "\u00DAltima p\u00E1gina" }) })] })
-    // <div className="flex flex-col items-center gap-0 font-[var(--font-default)]">
-    //   {/* Botones de navegación */}
-    //   <div className="flex items-center gap-2">
-    //
-    //     {/* Texto de página */}
-    //     <span
-    //       className="text-xs px-3 leading-none"
-    //       style={{ color: "var(--color-text-primary)" }}
-    //     >
-    //       Página {page} de {pages}
-    //     </span>
-    //     <Button
-    //       variant="ghost"
-    //       size="sm"
-    //       icon="fa-angle-right"
-    //       onClick={goToNextPage}
-    //       disabled={isLastPage || !hasPages}
-    //       aria-label="Página siguiente"
-    //     />
-    //     <Button
-    //       variant="ghost"
-    //       size="sm"
-    //       icon="fa-angle-double-right"
-    //       onClick={goToLastPage}
-    //       disabled={isLastPage || !hasPages}
-    //       aria-label="Última página"
-    //     />
-    //   </div>
-    //   {/* Texto de elementos */}
-    //   <span
-    //     className="text-xs leading-none"
-    //     style={{ color: "var(--color-text-secondary)" }}
-    //   >
-    //     {total} elemento{total !== 1 ? "s" : ""}
-    //   </span>
-    // </div>
-    );
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-double-left", onClick: goToFirstPage, disabled: isFirstPage || !hasPages || isLoading, "aria-label": "Primera p\u00E1gina" }) }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-left", onClick: goToPreviousPage, disabled: isFirstPage || !hasPages || isLoading, "aria-label": "P\u00E1gina anterior" }) }), _jsx("div", { className: `text-xs h-[32px] min-w-[100px] text-center flex flex-col justify-center`, children: isLoading ? (_jsx(_Fragment, { children: _jsx("span", { className: "block", children: "Cargando..." }) })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "block", children: ["P\u00E1gina ", page, " de ", pages] }), _jsxs("span", { className: "block", children: [total, " elemento", total !== 1 ? "s" : ""] })] })) }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-right", onClick: goToNextPage, disabled: isLastPage || !hasPages || isLoading, "aria-label": "P\u00E1gina siguiente" }) }), _jsx("div", { children: _jsx(Button, { variant: "ghost", size: "sm", icon: "fa-angle-double-right", onClick: goToLastPage, disabled: isLastPage || !hasPages || isLoading, "aria-label": "\u00DAltima p\u00E1gina" }) })] }));
 };

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

@@ -0,0 +1,62 @@
+import React from "react";
+export interface RadioOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+export interface RadioButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
+    /**
+     * Array de opciones para renderizar radios automáticamente
+     */
+    options: RadioOption[];
+    /**
+     * Valor seleccionado (controlado)
+     */
+    value?: string | number;
+    /**
+     * Callback cuando cambia la selección
+     * Puede recibir un valor directo o un evento (para compatibilidad con react-hook-form)
+     */
+    onChange?: ((value: string | number) => void) | React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Posición del label para todas las opciones
+     */
+    labelPosition?: "left" | "right";
+    /**
+     * Tamaño de los radio buttons
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Mensaje de error a mostrar
+     */
+    error?: string;
+    /**
+     * Dirección del layout: vertical (columna) o horizontal (fila)
+     */
+    direction?: "vertical" | "horizontal";
+    /**
+     * Espaciado entre opciones
+     */
+    gap?: "sm" | "md" | "lg";
+    /**
+     * Nombre del campo (para react-hook-form)
+     */
+    name?: string;
+    /**
+     * Estado deshabilitado
+     */
+    disabled?: boolean;
+    /**
+     * Callback cuando pierde el foco
+     * Puede recibir un evento (para compatibilidad con react-hook-form) o ser una función sin parámetros
+     */
+    onBlur?: (() => void) | React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Si es true, el radio group será de solo lectura. Las opciones no seleccionadas se verán deshabilitadas
+     * y la seleccionada se verá igual, pero no se podrá cambiar el valor.
+     * Por defecto es false.
+     */
+    readOnly?: boolean;
+}
+export declare const RadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=RadioButtonGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/RadioButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC3E;;OAEG;IACH,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EACL,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC,GAClC,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC/C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC;;OAEG;IACH,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAClE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,gGAmV5B,CAAC"}

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

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useFormContext } from "react-hook-form";
+export const RadioButtonGroup = React.forwardRef(({ options, value, onChange, labelPosition = "right", size = "md", error, direction = "vertical", gap = "md", className = "", name, disabled, onBlur, readOnly = false, ...props }, ref) => {
+    // useFormContext debe llamarse incondicionalmente (regla de hooks)
+    // Si no hay FormProvider, esto lanzará un error
+    // Para modo controlado sin FormProvider, necesitamos envolver los ejemplos
+    // en un FormProvider mínimo o usar una detección diferente
+    // Por ahora, llamamos useFormContext incondicionalmente
+    const formContext = useFormContext();
+    const setValue = formContext?.setValue;
+    // Detectar si estamos en modo register
+    // Modo register: formContext existe (hay FormProvider) Y name está definido
+    // Modo controlado: no hay formContext (no hay FormProvider) o no hay name
+    // Nota: Si no hay FormProvider, useFormContext lanzará error, pero esto es esperado
+    // cuando se usa register. Para modo controlado, el componente puede funcionar
+    // si simplemente no usamos el contexto cuando no está disponible
+    const isRegisterMode = React.useMemo(() => {
+        // Si no hay formContext, definitivamente es modo controlado
+        if (!formContext)
+            return false;
+        // Si hay formContext pero no hay name, es modo controlado
+        if (!name)
+            return false;
+        // Si hay formContext y name, es modo register
+        return true;
+    }, [formContext, name]);
+    // Usar el valor proporcionado solo en modo controlado (no register)
+    // En modo register, react-hook-form maneja el valor automáticamente
+    const currentValue = !isRegisterMode ? value : undefined;
+    // Input hidden para compatibilidad con react-hook-form
+    const hiddenInputRef = React.useRef(null);
+    // Combinar el ref del forwardRef (de register) con el ref interno del input hidden
+    const combinedRef = React.useCallback((node) => {
+        hiddenInputRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    // Obtener el valor actual desde react-hook-form en modo register
+    const watchValue = formContext?.watch(name || "");
+    const actualValue = isRegisterMode
+        ? watchValue !== undefined
+            ? watchValue
+            : currentValue
+        : currentValue;
+    const gapClasses = {
+        sm: "gap-2",
+        md: "gap-3",
+        lg: "gap-4",
+    };
+    const directionClasses = {
+        vertical: "flex-col",
+        horizontal: "flex-row flex-wrap",
+    };
+    const containerClasses = `
+      flex ${directionClasses[direction]} ${gapClasses[gap]}
+      ${className}
+    `;
+    const sizeClasses = {
+        sm: "w-4 h-4",
+        md: "w-5 h-5",
+        lg: "w-6 h-6",
+    };
+    const labelSizeClasses = {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+    };
+    const handleOptionClick = (optionValue) => {
+        if (disabled || readOnly)
+            return;
+        const valueString = String(optionValue);
+        if (isRegisterMode && name) {
+            // En modo register, actualizar el input hidden y usar setValue
+            if (hiddenInputRef.current) {
+                const nativeInput = hiddenInputRef.current;
+                const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+                if (nativeInputValueSetter) {
+                    nativeInputValueSetter.call(nativeInput, valueString);
+                }
+                else {
+                    nativeInput.value = valueString;
+                }
+                // Disparar evento change para react-hook-form
+                const changeEvent = {
+                    target: nativeInput,
+                    currentTarget: nativeInput,
+                };
+                if (onChange) {
+                    // En modo register, siempre usar formato de evento
+                    onChange(changeEvent);
+                }
+                // Disparar eventos nativos
+                const inputEvent = new Event("input", {
+                    bubbles: true,
+                    cancelable: true,
+                });
+                nativeInput.dispatchEvent(inputEvent);
+                const changeEventNative = new Event("change", {
+                    bubbles: true,
+                    cancelable: true,
+                });
+                nativeInput.dispatchEvent(changeEventNative);
+            }
+            // También usar setValue directamente como respaldo
+            if (setValue) {
+                setValue(name, optionValue, {
+                    shouldValidate: true,
+                    shouldDirty: true,
+                    shouldTouch: true,
+                });
+            }
+        }
+        else {
+            // Modo controlado - llamar onChange con valor directo
+            if (onChange) {
+                // Verificar si onChange es una función de valor directo o ChangeEventHandler
+                // Intentar primero como función de valor directo (modo controlado típico)
+                const onChangeAsValueFn = onChange;
+                // Si la función tiene la firma correcta, llamarla directamente
+                if (typeof onChangeAsValueFn === "function") {
+                    onChangeAsValueFn(optionValue);
+                }
+                else {
+                    // Si no, intentar como ChangeEventHandler (por compatibilidad)
+                    const syntheticEvent = {
+                        target: { value: String(optionValue) },
+                        currentTarget: { value: String(optionValue) },
+                    };
+                    onChange(syntheticEvent);
+                }
+            }
+        }
+    };
+    const handleBlur = (event) => {
+        if (onBlur) {
+            if (isRegisterMode && hiddenInputRef.current) {
+                // En modo register, crear un evento de blur para react-hook-form
+                const blurEvent = event ||
+                    {
+                        target: hiddenInputRef.current,
+                        currentTarget: hiddenInputRef.current,
+                    };
+                onBlur(blurEvent);
+            }
+            else {
+                // En modo controlado, llamar como función sin parámetros
+                onBlur();
+            }
+        }
+        // También disparar blur en el input hidden si existe
+        if (hiddenInputRef.current) {
+            hiddenInputRef.current.blur();
+        }
+    };
+    return (_jsxs("div", { className: "w-full", children: [_jsx("input", { ref: combinedRef, type: "hidden", name: name, value: actualValue !== undefined ? String(actualValue) : "", readOnly: true, tabIndex: -1, "aria-hidden": "true" }), _jsx("div", { className: containerClasses, role: "radiogroup", "aria-label": name, "aria-invalid": error ? "true" : "false", "aria-errormessage": error ? `${name}-error` : undefined, ...props, children: options.map((option, index) => {
+                    const optionValue = String(option.value);
+                    const isSelected = actualValue !== undefined && String(actualValue) === optionValue;
+                    // En modo readOnly, las opciones no seleccionadas se ven deshabilitadas
+                    const isDisabled = disabled || option.disabled || (readOnly && !isSelected);
+                    const radioId = `${name || "radio"}-${index}-${option.value}`;
+                    const radioClasses = `
+              ${sizeClasses[size]}
+              rounded-full border-2 transition-all duration-200
+              flex items-center justify-center
+              ${isSelected
+                        ? "border-[var(--color-primary)]"
+                        : "border-[var(--color-border-default)]"}
+              ${isSelected ? "bg-[var(--color-primary)]" : "bg-transparent"}
+              ${isDisabled
+                        ? "opacity-50 cursor-not-allowed"
+                        : "cursor-pointer hover:border-[var(--color-primary)]"}
+              focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-[var(--color-primary)]
+            `;
+                    const labelClasses = `
+              ${labelSizeClasses[size]}
+              font-[var(--font-default)] select-none
+              ${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+              text-[var(--color-text-primary)]
+            `;
+                    const optionContainerClasses = `
+              flex items-center
+              ${labelPosition === "left" ? "flex-row-reverse" : "flex-row"}
+              ${gapClasses[gap]}
+            `;
+                    return (_jsxs("div", { className: optionContainerClasses, onClick: () => !isDisabled && handleOptionClick(option.value), onBlur: index === options.length - 1
+                            ? () => {
+                                handleBlur();
+                            }
+                            : undefined, role: "radio", "aria-checked": isSelected, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, onKeyDown: (e) => {
+                            if (isDisabled || readOnly)
+                                return;
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                handleOptionClick(option.value);
+                            }
+                        }, children: [_jsx("div", { className: radioClasses, children: isSelected && (_jsx("div", { className: "rounded-full bg-white", style: {
+                                        width: size === "sm"
+                                            ? "8px"
+                                            : size === "md"
+                                                ? "10px"
+                                                : "12px",
+                                        height: size === "sm"
+                                            ? "8px"
+                                            : size === "md"
+                                                ? "10px"
+                                                : "12px",
+                                    } })) }), option.label && (_jsx("label", { htmlFor: radioId, className: labelClasses, onClick: (e) => {
+                                    e.preventDefault();
+                                    if (!isDisabled) {
+                                        handleOptionClick(option.value);
+                                    }
+                                }, children: option.label }))] }, radioId));
+                }) }), error && (_jsx("p", { id: name ? `${name}-error` : undefined, className: "mt-1 text-sm text-[var(--color-danger)] font-[var(--font-default)]", children: error }))] }));
+});
+RadioButtonGroup.displayName = "RadioButtonGroup";

package/dist/components/form-controls/SearchSelectInput-OLD.d.ts

@@ -0,0 +1,68 @@
+import React from "react";
+import type { InputProps } from "./Input";
+import type { PaginationInterface } from "./Pagination";
+export interface SearchSelectOption {
+    label: string;
+    value?: string;
+    description?: string | number;
+    icon?: string;
+}
+export interface SearchSelectInputProps<T = SearchSelectOption, K = string> extends Omit<InputProps, "onChange" | "value" | "ref"> {
+    /**
+     * Valor del input (controlado).
+     * Puede ser la opción completa (T), el valor extraído (K si hay getOptionValue), o un string (para compatibilidad con react-hook-form).
+     */
+    value?: T | K | string;
+    /**
+     * Callback cuando cambia el valor del input.
+     * Recibe la opción completa (T) si no hay getOptionValue, o el valor extraído (K) si hay getOptionValue.
+     * También es compatible con react-hook-form: acepta el onChange estándar de HTML.
+     */
+    onChange?: ((value: T | K) => void) | React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Función que realiza la búsqueda y devuelve un Promise con los resultados
+     */
+    onSearchPromiseFn: (text: string) => Promise<Array<T> | PaginationInterface<T>>;
+    /**
+     * Función que busca un elemento individual usando su valor (K).
+     * Se usa cuando hay un valor por defecto que no está presente en las opciones cargadas.
+     * Recibe el valor (K) y devuelve una Promise con el objeto completo (T) o undefined si no se encuentra.
+     */
+    onSingleSearchPromiseFn: (value: K) => Promise<T | undefined>;
+    /**
+     * Callback al seleccionar una opción. Devuelve el item completo (T) y el valor mapeado (K)
+     */
+    onSelectOption?: (option: T, value: K) => void;
+    /**
+     * Título del dialog de selección. Por defecto "Seleccione una opción"
+     */
+    dialogTitle?: string;
+    /**
+     * Posición del botón de búsqueda. Por defecto "right"
+     */
+    searchButtonPosition?: "left" | "right";
+    /**
+     * Texto a mostrar cuando no hay resultados
+     */
+    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 SearchSelectInput: <T = SearchSelectOption, K = string>(props: SearchSelectInputProps<T, K> & {
+    ref?: React.ForwardedRef<HTMLInputElement>;
+}) => React.ReactElement;
+//# sourceMappingURL=SearchSelectInput-OLD.d.ts.map

package/dist/components/form-controls/SearchSelectInput-OLD.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchSelectInput-OLD.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/SearchSelectInput-OLD.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGxD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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,GAAG,KAAK,CAAC;IACtD;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EACL,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GACxB,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC/C;;OAEG;IACH,iBAAiB,EAAE,CACjB,IAAI,EAAE,MAAM,KACT,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD;;;;OAIG;IACH,uBAAuB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAC9D;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxC;;OAEG;IACH,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;AA6sCD,eAAO,MAAM,iBAAiB,EAAiC,CAC7D,CAAC,GAAG,kBAAkB,EACtB,CAAC,GAAG,MAAM,EAEV,KAAK,EAAE,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IACpC,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;CAC5C,KACE,KAAK,CAAC,YAAY,CAAC"}