flysoft-react-ui 0.3.2 → 0.4.0

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

@@ -1 +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"}
+{"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,CA2OhD,CAAC"}

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

@@ -120,7 +120,7 @@ export const DatePicker = ({ value, onChange, initialViewDate, startWeekOn = "su
         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) => {
+      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);

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

@@ -0,0 +1,16 @@
+import React from "react";
+export interface PaginationInterface<T> {
+    list: Array<T>;
+    limit: number;
+    page: number;
+    pages: number;
+    total: number;
+}
+export interface PaginationProps {
+    fieldName?: string;
+    page?: number;
+    pages?: number;
+    total?: number;
+}
+export declare const Pagination: React.FC<PaginationProps>;
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, 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, }) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const navigateToPage = (newPage) => {
+        if (newPage < 1 || newPage > pages || newPage === page) {
+            return;
+        }
+        const newSearchParams = new URLSearchParams(searchParams);
+        newSearchParams.set(fieldName, newPage.toString());
+        setSearchParams(newSearchParams, { replace: true });
+    };
+    const goToFirstPage = () => navigateToPage(1);
+    const goToPreviousPage = () => navigateToPage(page - 1);
+    const goToNextPage = () => navigateToPage(page + 1);
+    const goToLastPage = () => navigateToPage(pages);
+    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>
+    );
+};

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

@@ -3,9 +3,11 @@ export { Input } from "./Input";
 export { AutocompleteInput } from "./AutocompleteInput";
 export { DatePicker } from "./DatePicker";
 export { DateInput } from "./DateInput";
+export { Pagination } from "./Pagination";
 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";
+export type { PaginationProps, PaginationInterface, } from "./Pagination";
 //# 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,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"}
+{"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,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,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;AACnE,YAAY,EACV,eAAe,EACf,mBAAmB,GACpB,MAAM,cAAc,CAAC"}

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

@@ -3,3 +3,4 @@ export { Input } from "./Input";
 export { AutocompleteInput } from "./AutocompleteInput";
 export { DatePicker } from "./DatePicker";
 export { DateInput } from "./DateInput";
+export { Pagination } from "./Pagination";

package/dist/components/layout/TabPanel.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface TabPanelProps {
+    children?: React.ReactNode;
+    tabId: string | number;
+}
+export declare const TabPanel: React.FC<TabPanelProps>;
+//# sourceMappingURL=TabPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/layout/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgB5C,CAAC"}

package/dist/components/layout/TabPanel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useTabsContext } from "./TabsGroup";
+export const TabPanel = ({ children, tabId }) => {
+    const { activeTab } = useTabsContext();
+    const isActive = activeTab.toString() === tabId.toString();
+    if (!isActive) {
+        return null;
+    }
+    return (_jsx("div", { role: "tabpanel", className: "w-full font-[var(--font-default)]", children: children }));
+};

package/dist/components/layout/TabsGroup.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface Tab {
+    id: string | number;
+    label: string;
+}
+export interface TabsGroupProps {
+    children?: React.ReactNode;
+    tabs: Tab[];
+    paramName?: string;
+    headerNode?: React.ReactNode;
+    onChangeTab?: (selectedTab: string) => void;
+}
+interface TabsContextType {
+    activeTab: string | number;
+    setActiveTab: (tab: string | number) => void;
+}
+export declare const useTabsContext: () => TabsContextType;
+export declare const TabsGroup: React.FC<TabsGroupProps>;
+export {};
+//# sourceMappingURL=TabsGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsGroup.d.ts","sourceRoot":"","sources":["../../../src/components/layout/TabsGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAGvF,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,UAAU,eAAe;IACvB,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC9C;AAID,eAAO,MAAM,cAAc,uBAM1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA8F9C,CAAC"}

package/dist/components/layout/TabsGroup.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useMemo, createContext, useContext } from "react";
+import { useSearchParams } from "react-router-dom";
+const TabsContext = createContext(undefined);
+export const useTabsContext = () => {
+    const context = useContext(TabsContext);
+    if (!context) {
+        throw new Error("TabPanel must be used within TabsGroup");
+    }
+    return context;
+};
+export const TabsGroup = ({ children, tabs, paramName, headerNode, onChangeTab, }) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const defaultTab = tabs[0]?.id?.toString() || "";
+    // Obtener el tab activo desde URL params si paramName está definido, sino desde estado local
+    const urlTab = paramName ? searchParams.get(paramName) : null;
+    const initialTab = urlTab || defaultTab;
+    const [activeTab, setActiveTabState] = useState(initialTab);
+    // Sincronizar con URL params cuando cambian
+    useEffect(() => {
+        if (paramName && urlTab) {
+            setActiveTabState(urlTab);
+        }
+    }, [paramName, urlTab]);
+    const setActiveTab = (tab) => {
+        setActiveTabState(tab);
+        // Actualizar URL params si paramName está definido
+        if (paramName) {
+            const newSearchParams = new URLSearchParams(searchParams);
+            newSearchParams.set(paramName, tab.toString());
+            setSearchParams(newSearchParams, { replace: true });
+        }
+        // Llamar al callback si está definido
+        if (onChangeTab) {
+            onChangeTab(tab.toString());
+        }
+    };
+    const contextValue = useMemo(() => ({ activeTab, setActiveTab }), [activeTab]);
+    const handleTabClick = (tabId) => {
+        setActiveTab(tabId);
+    };
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsxs("div", { className: "w-full font-[var(--font-default)]", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-1", children: tabs.map((tab) => {
+                                const isActive = activeTab.toString() === tab.id.toString();
+                                return (_jsx("button", { onClick: () => handleTabClick(tab.id), className: `
+                    px-4 py-2 text-sm font-medium transition-colors cursor-pointer
+                    border-b-2 -mb-[1px]
+                    ${isActive
+                                        ? "text-[var(--color-primary)] border-[var(--color-primary)]"
+                                        : "text-[var(--color-text-secondary)] border-transparent hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-default)]"}
+                  `, "aria-selected": isActive, role: "tab", children: tab.label }, tab.id));
+                            }) }), headerNode && (_jsx("div", { className: "flex items-center", children: headerNode }))] }), _jsx("div", { className: "mt-4", children: children })] }) }));
+};

package/dist/components/layout/index.d.ts

@@ -6,4 +6,8 @@ export { Collection } from "./Collection";
 export type { CollectionProps } from "./Collection";
 export { DataField } from "./DataField";
 export type { DataFieldProps } from "./DataField";
+export { TabsGroup } from "./TabsGroup";
+export type { TabsGroupProps, Tab } from "./TabsGroup";
+export { TabPanel } from "./TabPanel";
+export type { TabPanelProps } from "./TabPanel";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/layout/index.js

@@ -2,3 +2,5 @@ export { Card } from "./Card";
 export { AppLayout } from "./AppLayout";
 export { Collection } from "./Collection";
 export { DataField } from "./DataField";
+export { TabsGroup } from "./TabsGroup";
+export { TabPanel } from "./TabPanel";

package/dist/components/utils/Dialog.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface DialogProps {
+    isOpen: boolean;
+    title: React.ReactNode;
+    dialogBody: React.ReactNode;
+    dialogActions: React.ReactNode;
+    onClose?: () => void;
+    closeOnOverlayClick?: boolean;
+}
+export declare const Dialog: React.FC<DialogProps>;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/components/utils/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiGxC,CAAC"}

package/dist/components/utils/Dialog.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+export const Dialog = ({ isOpen, title, dialogBody, dialogActions, onClose, closeOnOverlayClick = false, }) => {
+    // Prevenir scroll del body cuando el dialog está abierto
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "";
+        }
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [isOpen]);
+    // Manejar tecla Escape para cerrar
+    useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === "Escape" && isOpen && onClose) {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("keydown", handleEscape);
+        }
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [isOpen, onClose]);
+    if (!isOpen) {
+        return null;
+    }
+    const handleOverlayClick = () => {
+        if (closeOnOverlayClick && onClose) {
+            onClose();
+        }
+    };
+    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-title", children: [_jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: handleOverlayClick }), _jsxs("div", { className: "relative w-auto max-w-lg min-w-[400px] bg-[var(--color-bg-default)] rounded-lg shadow-[var(--shadow-xl)] border border-[var(--color-border-default)] font-[var(--font-default)] max-h-[90vh] flex flex-col", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-[var(--color-border-default)]", children: [_jsx("h2", { id: "dialog-title", className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title }), onClose && (_jsx("button", { onClick: onClose, className: "ml-4 p-1 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] transition-colors cursor-pointer", "aria-label": "Cerrar dialog", children: _jsx("i", { className: "fa fa-times" }) }))] }), _jsx("div", { className: "px-6 py-4 overflow-y-auto flex-1 text-[var(--color-text-primary)] min-w-0", children: dialogBody }), _jsx("div", { className: "px-6 py-4 border-t border-[var(--color-border-default)] flex items-center justify-end gap-2 flex-shrink-0 flex-wrap", children: dialogActions })] })] }));
+};

package/dist/components/utils/Loader.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface LoaderProps {
+    isLoading?: boolean;
+    text?: string;
+    children?: React.ReactNode;
+    keepContentWhileLoading?: boolean;
+    contentLoadingNode?: React.ReactNode;
+    overlayClassName?: string;
+}
+export declare const Loader: React.FC<LoaderProps>;
+//# sourceMappingURL=Loader.d.ts.map

package/dist/components/utils/Loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuHxC,CAAC"}

package/dist/components/utils/Loader.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { useTheme } from "../../contexts/ThemeContext";
+export const Loader = ({ isLoading = false, text, children, keepContentWhileLoading, contentLoadingNode, overlayClassName, }) => {
+    const { theme } = useTheme();
+    const displayText = text || "Cargando...";
+    // Clases por defecto del overlay (negro semitransparente con blur)
+    const defaultOverlayClasses = "bg-black/50 backdrop-blur-sm";
+    // Combinar clases por defecto con las personalizadas
+    const overlayClasses = overlayClassName
+        ? overlayClassName
+        : defaultOverlayClasses;
+    // Barra de progreso infinita
+    const ProgressBar = () => {
+        // Variable CSS para el gradiente del color primario
+        const gradientColor = `no-repeat linear-gradient(${theme.colors.primary} 0 0)`;
+        const bgSecondary = theme.colors.bgSecondary || theme.colors.gray100;
+        return (_jsxs("div", { className: "flex flex-col items-center gap-0.5 w-full", role: "status", "aria-live": "polite", children: [_jsx("div", { className: "h-1 w-full rounded", style: {
+                        "--c": gradientColor,
+                        background: `var(--c), var(--c), ${bgSecondary}`,
+                        backgroundSize: "60% 100%",
+                        animation: "l16 3s infinite",
+                    } }), displayText && (_jsx("span", { className: "text-xs text-[var(--color-text-secondary)] font-[var(--font-default)]", children: displayText }))] }));
+    };
+    // Si no está cargando, mostrar solo children (si existen)
+    if (!isLoading) {
+        return _jsx(_Fragment, { children: children });
+    }
+    // Variante 1: Con contentLoadingNode
+    if (contentLoadingNode) {
+        return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: keepContentWhileLoading ? "opacity-50 pointer-events-none" : "", children: contentLoadingNode }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center z-10 pointer-events-none px-4", children: _jsx("div", { className: "bg-[var(--color-bg-default)] rounded-lg p-6 shadow-lg border border-[var(--color-border-default)] pointer-events-auto w-full", children: _jsx(ProgressBar, {}) }) })] }));
+    }
+    // Variante 2: Con children pero sin contentLoadingNode
+    if (children) {
+        // Si keepContentWhileLoading es true, mostrar children con overlay
+        if (keepContentWhileLoading) {
+            return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "pointer-events-none select-none", children: children }), _jsx("div", { className: `absolute inset-0 flex items-center justify-center z-10 pointer-events-auto px-4 ${overlayClasses}`, children: _jsx("div", { className: "bg-[var(--color-bg-default)] rounded-lg p-6 shadow-lg border border-[var(--color-border-default)] w-full", children: _jsx(ProgressBar, {}) }) })] }));
+        }
+        // Si no tiene keepContentWhileLoading, ocultar children y mostrar solo loader básico
+        return (_jsx("div", { className: "flex items-center justify-center p-6 w-full", children: _jsx("div", { className: "w-full max-w-2xl", children: _jsx(ProgressBar, {}) }) }));
+    }
+    // Variante 3: Sin contentLoadingNode ni children - solo loader
+    return (_jsx("div", { className: "flex items-center justify-center p-6 w-full", children: _jsx("div", { className: "w-full max-w-2xl", children: _jsx(ProgressBar, {}) }) }));
+};

package/dist/components/utils/index.d.ts

@@ -1,3 +1,7 @@
 export { Badge } from "./Badge";
 export type { BadgeProps } from "./Badge";
+export { Dialog } from "./Dialog";
+export type { DialogProps } from "./Dialog";
+export { Loader } from "./Loader";
+export type { LoaderProps } from "./Loader";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/utils/index.js

@@ -1 +1,3 @@
 export { Badge } from "./Badge";
+export { Dialog } from "./Dialog";
+export { Loader } from "./Loader";

package/dist/docs/DialogDocs.d.ts

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

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

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

package/dist/docs/DialogDocs.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Card, Dialog, Button, Input, Badge } from "../index";
+const DialogDocs = () => {
+    const [isOpenBasic, setIsOpenBasic] = useState(false);
+    const [isOpenForm, setIsOpenForm] = useState(false);
+    const [isOpenConfirm, setIsOpenConfirm] = useState(false);
+    const [isOpenNoOverlay, setIsOpenNoOverlay] = useState(false);
+    const [isOpenCustom, setIsOpenCustom] = useState(false);
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Dialog - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente Dialog muestra un modal centrado con overlay. Se controla mediante la prop ", _jsx("code", { children: "isOpen" }), " y se cierra con", " ", _jsx("code", { children: "onClose" }), "."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-window-maximize", onClick: () => setIsOpenBasic(true), children: "Abrir Dialog B\u00E1sico" }), _jsx(Dialog, { isOpen: isOpenBasic, title: "Dialog B\u00E1sico", dialogBody: _jsxs("div", { className: "space-y-3", children: [_jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este es un ejemplo de dialog b\u00E1sico. Puedes incluir cualquier contenido en el ", _jsx("code", { children: "dialogBody" }), "."] }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "El dialog se puede cerrar haciendo clic en el overlay, en el bot\u00F3n de cerrar (X), o presionando la tecla Escape." })] }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenBasic(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", onClick: () => setIsOpenBasic(false), children: "Aceptar" })] }), onClose: () => setIsOpenBasic(false) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog con formulario" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de dialog que contiene un formulario completo con campos de entrada." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-edit", onClick: () => setIsOpenForm(true), children: "Abrir Dialog con Formulario" }), _jsx(Dialog, { isOpen: isOpenForm, title: "Editar Usuario", dialogBody: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa el nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "usuario@ejemplo.com", icon: "fa-envelope" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" })] }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", icon: "fa-times", onClick: () => setIsOpenForm(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-save", onClick: () => setIsOpenForm(false), children: "Guardar Cambios" })] }), onClose: () => setIsOpenForm(false) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog de confirmaci\u00F3n" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de dialog usado para confirmar una acci\u00F3n importante." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-trash", onClick: () => setIsOpenConfirm(true), children: "Eliminar Item" }), _jsx(Dialog, { isOpen: isOpenConfirm, title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fa fa-exclamation-triangle text-[var(--color-danger)]" }), _jsx("span", { children: "Confirmar Eliminaci\u00F3n" })] }), dialogBody: _jsxs("div", { className: "space-y-3", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "\u00BFEst\u00E1s seguro de que deseas eliminar este elemento? Esta acci\u00F3n no se puede deshacer." }), _jsx("div", { className: "flex gap-2", children: _jsx(Badge, { variant: "danger", icon: "fa-exclamation-circle", children: "Acci\u00F3n irreversible" }) })] }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", icon: "fa-times", onClick: () => setIsOpenConfirm(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-trash", onClick: () => setIsOpenConfirm(false), children: "Eliminar" })] }), onClose: () => setIsOpenConfirm(false) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog sin cerrar al hacer clic en overlay" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando ", _jsxs("code", { children: ["closeOnOverlayClick=", false] }), " el dialog solo se puede cerrar mediante el bot\u00F3n de cerrar, los botones de acci\u00F3n, o la tecla Escape."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-lock", onClick: () => setIsOpenNoOverlay(true), children: "Abrir Dialog (sin cerrar en overlay)" }), _jsx(Dialog, { isOpen: isOpenNoOverlay, title: "Dialog Protegido", dialogBody: _jsxs("div", { className: "space-y-3", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este dialog no se cierra al hacer clic en el overlay. Debes usar el bot\u00F3n de cerrar o los botones de acci\u00F3n." }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "\u00DAtil para formularios importantes donde no quieres que el usuario cierre accidentalmente el dialog." })] }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenNoOverlay(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", onClick: () => setIsOpenNoOverlay(false), children: "Continuar" })] }), onClose: () => setIsOpenNoOverlay(false), closeOnOverlayClick: false })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog con t\u00EDtulo personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El prop ", _jsx("code", { children: "title" }), " acepta un ReactNode, permitiendo incluir iconos, badges u otros componentes."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-star", onClick: () => setIsOpenCustom(true), children: "Abrir Dialog Personalizado" }), _jsx(Dialog, { isOpen: isOpenCustom, title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fa fa-info-circle text-[var(--color-primary)]" }), _jsx("span", { children: "Informaci\u00F3n Importante" }), _jsx(Badge, { variant: "info", size: "sm", children: "Nuevo" })] }), dialogBody: _jsxs("div", { className: "space-y-3", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este dialog muestra c\u00F3mo puedes personalizar el t\u00EDtulo usando ReactNode, incluyendo iconos y badges." }), _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("i", { className: "fa fa-lightbulb mr-2" }), "Puedes usar cualquier componente React en el t\u00EDtulo, body y acciones."] }) })] }), dialogActions: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-bookmark", onClick: () => setIsOpenCustom(false), children: "Guardar para despu\u00E9s" }), _jsx(Button, { variant: "primary", icon: "fa-check", onClick: () => setIsOpenCustom(false), children: "Entendido" })] }), onClose: () => setIsOpenCustom(false) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Overlay con blur:" }), " El overlay tiene un efecto de desenfoque (backdrop-blur) para mejor enfoque visual"] }), _jsxs("li", { children: [_jsx("strong", { children: "Cierre m\u00FAltiple:" }), " Se puede cerrar haciendo clic en el overlay, en el bot\u00F3n X, en los botones de acci\u00F3n, o presionando Escape"] }), _jsxs("li", { children: [_jsx("strong", { children: "Prevenci\u00F3n de scroll:" }), " Cuando el dialog est\u00E1 abierto, se previene el scroll del body"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " El dialog se adapta a diferentes tama\u00F1os de pantalla con padding adecuado"] }), _jsxs("li", { children: [_jsx("strong", { children: "Accesibilidad:" }), " Incluye atributos ARIA para mejor accesibilidad"] }), _jsxs("li", { children: [_jsx("strong", { children: "Contenido flexible:" }), " El body tiene scroll autom\u00E1tico si el contenido es muy largo"] })] }) }) })] })] }) }) }));
+};
+export default DialogDocs;

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

@@ -1 +1 @@
-{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAqCpB,CAAC"}
+{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAiDpB,CAAC"}

package/dist/docs/DocsMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Link } from "react-router-dom";
 export const DocsMenu = () => {
-    return (_jsx(_Fragment, { children: _jsxs("ul", { children: [_jsx("li", { children: _jsx(Link, { to: "/docs/button", children: "Button" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/badge", children: "Badge" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/card", children: "Card" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/input", children: "Input" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/autocomplete-input", children: "AutocompleteInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datepicker", children: "DatePicker" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dateinput", children: "DateInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/theme", children: "ThemeSwitcher" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datafield", children: "DataField" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/auth", children: "AuthContext" }) })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("ul", { children: [_jsx("li", { children: _jsx(Link, { to: "/docs/button", children: "Button" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/badge", children: "Badge" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/card", children: "Card" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/input", children: "Input" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/autocomplete-input", children: "AutocompleteInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datepicker", children: "DatePicker" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dateinput", children: "DateInput" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/theme", children: "ThemeSwitcher" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/datafield", children: "DataField" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/tabsgroup", children: "TabsGroup" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/dialog", children: "Dialog" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/pagination", children: "Pagination" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/loader", children: "Loader" }) }), _jsx("li", { children: _jsx(Link, { to: "/docs/auth", children: "AuthContext" }) })] }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAgB9B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAoB9B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/DocsRouter.js

@@ -10,8 +10,12 @@ import DataFieldDocs from "./DataFieldDocs";
 import AutocompleteInputDocs from "./AutocompleteInputDocs";
 import DatePickerDocs from "./DatePickerDocs";
 import DateInputDocs from "./DateInputDocs";
+import TabsGroupDocs from "./TabsGroupDocs";
+import DialogDocs from "./DialogDocs";
+import PaginationDocs from "./PaginationDocs";
+import LoaderDocs from "./LoaderDocs";
 import { AuthDocs } from "./AuthDocs.tsx/AuthDocs";
 export const DocsRouter = () => {
-    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "autocomplete-input", element: _jsx(AutocompleteInputDocs, {}) }), _jsx(Route, { path: "datepicker", element: _jsx(DatePickerDocs, {}) }), _jsx(Route, { path: "dateinput", element: _jsx(DateInputDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) })] }));
+    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "autocomplete-input", element: _jsx(AutocompleteInputDocs, {}) }), _jsx(Route, { path: "datepicker", element: _jsx(DatePickerDocs, {}) }), _jsx(Route, { path: "dateinput", element: _jsx(DateInputDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) }), _jsx(Route, { path: "tabsgroup", element: _jsx(TabsGroupDocs, {}) }), _jsx(Route, { path: "dialog", element: _jsx(DialogDocs, {}) }), _jsx(Route, { path: "pagination", element: _jsx(PaginationDocs, {}) }), _jsx(Route, { path: "loader", element: _jsx(LoaderDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) })] }));
 };
 export default DocsRouter;

package/dist/docs/LoaderDocs.d.ts

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

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

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

package/dist/docs/LoaderDocs.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Card, Loader, Button, Input } from "../index";
+const LoaderDocs = () => {
+    const [isLoading1, setIsLoading1] = useState(false);
+    const [isLoading2, setIsLoading2] = useState(false);
+    const [isLoading3, setIsLoading3] = useState(false);
+    const [isLoading4, setIsLoading4] = useState(false);
+    const [isLoading5, setIsLoading5] = useState(false);
+    const [isLoading6, setIsLoading6] = useState(false);
+    // Componente Skeleton para el ejemplo
+    const SkeletonCard = () => (_jsx(Card, { title: "Cargando contenido...", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-4 bg-[var(--color-bg-secondary)] rounded animate-pulse w-3/4" }), _jsx("div", { className: "h-4 bg-[var(--color-bg-secondary)] rounded animate-pulse w-full" }), _jsx("div", { className: "h-4 bg-[var(--color-bg-secondary)] rounded animate-pulse w-5/6" })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx("div", { className: "h-20 bg-[var(--color-bg-secondary)] rounded animate-pulse" }), _jsx("div", { className: "h-20 bg-[var(--color-bg-secondary)] rounded animate-pulse" }), _jsx("div", { className: "h-20 bg-[var(--color-bg-secondary)] rounded animate-pulse" })] }), _jsx("div", { className: "h-10 bg-[var(--color-bg-secondary)] rounded animate-pulse w-1/3" })] }) }));
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Loader - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader b\u00E1sico, sin children" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Cuando no hay children ni contentLoadingNode, el Loader muestra \u00FAnicamente la barra de progreso y el texto. Ideal para pantallas de carga completas." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-spinner", onClick: () => {
+                                            setIsLoading1(true);
+                                            setTimeout(() => setIsLoading1(false), 3000);
+                                        }, children: "Mostrar Loader B\u00E1sico" }), _jsx(Loader, { isLoading: isLoading1 })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader b\u00E1sico con texto personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el texto que se muestra debajo de la barra de progreso usando la prop ", _jsx("code", { children: "text" }), "."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-file-upload", onClick: () => {
+                                            setIsLoading2(true);
+                                            setTimeout(() => setIsLoading2(false), 3000);
+                                        }, children: "Mostrar Loader con Texto Personalizado" }), _jsx(Loader, { isLoading: isLoading2, text: "Subiendo archivo... Por favor espera." })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children pero sin contentLoadingNode ni keepContentWhileLoading" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Cuando hay children pero no contentLoadingNode, el Loader muestra los children con un overlay semitransparente y la barra de progreso centrada. Los eventos del mouse y teclado se deshabilitan en los children." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-layer-group", onClick: () => {
+                                            setIsLoading3(true);
+                                            setTimeout(() => setIsLoading3(false), 3000);
+                                        }, children: "Mostrar Loader con Overlay" }), _jsx(Loader, { isLoading: isLoading3, children: _jsx(Card, { title: "Contenido con Loader", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "usuario@ejemplo.com", icon: "fa-envelope" }), _jsx(Button, { variant: "primary", icon: "fa-save", children: "Guardar" })] }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children y keepContentWhileLoading" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando ", _jsx("code", { children: "keepContentWhileLoading" }), " los children mantienen su opacidad normal pero siguen deshabilitados para interacci\u00F3n."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-eye", onClick: () => {
+                                            setIsLoading4(true);
+                                            setTimeout(() => setIsLoading4(false), 3000);
+                                        }, children: "Mostrar Loader (mantener contenido visible)" }), _jsx(Loader, { isLoading: isLoading4, keepContentWhileLoading: true, children: _jsx(Card, { title: "Contenido Visible Durante Carga", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "B\u00FAsqueda", placeholder: "Buscar productos...", icon: "fa-search" }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Producto 1" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Producto 2" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Producto 3" }) })] })] }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children y contentLoadingNode (skeleton)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando se proporciona ", _jsx("code", { children: "contentLoadingNode" }), ", los children se ocultan y se muestra el nodo personalizado con el loader centrado encima. En este ejemplo usamos un skeleton para mostrar el contenido que se est\u00E1 cargando."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-image", onClick: () => {
+                                            setIsLoading5(true);
+                                            setTimeout(() => setIsLoading5(false), 3000);
+                                        }, children: "Mostrar Loader con Skeleton" }), _jsx(Loader, { isLoading: isLoading5, contentLoadingNode: _jsx(SkeletonCard, {}), children: _jsx(Card, { title: "Contenido Real (oculto durante carga)", children: _jsxs("div", { className: "space-y-4", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este es el contenido real que se mostrar\u00E1 cuando termine la carga." }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Item 1" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Item 2" }) }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx("p", { className: "text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Item 3" }) })] })] }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Loader con children y keepContentWhileLoading pero cambiando el color del overlay" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el overlay usando la prop", " ", _jsx("code", { children: "overlayClassName" }), " con clases de Tailwind. \u00DAtil para adaptar el loader a diferentes fondos de interfaz, cambiar el border radius, padding, color, etc. En este ejemplo usamos un overlay blanco semitransparente con border radius personalizado."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-palette", onClick: () => {
+                                            setIsLoading6(true);
+                                            setTimeout(() => setIsLoading6(false), 3000);
+                                        }, children: "Mostrar Loader (Overlay Blanco)" }), _jsx("div", { className: "p-4 bg-[var(--color-bg-secondary)] rounded", children: _jsx(Loader, { isLoading: isLoading6, keepContentWhileLoading: true, overlayClassName: "bg-white/50 backdrop-blur-sm rounded-lg", children: _jsx(Card, { title: "Contenido con Overlay Personalizado", children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Campo 1", placeholder: "Ejemplo...", icon: "fa-edit" }), _jsx(Input, { label: "Campo 2", placeholder: "Ejemplo...", icon: "fa-edit" }), _jsx(Button, { variant: "primary", icon: "fa-save", children: "Guardar" })] }) }) }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Barra de progreso infinita:" }), " Animaci\u00F3n continua usando el color primario del tema"] }), _jsxs("li", { children: [_jsx("strong", { children: "Tres variantes de uso:" }), " Solo loader, con overlay sobre children, o con nodo personalizado"] }), _jsxs("li", { children: [_jsx("strong", { children: "Deshabilitaci\u00F3n de eventos:" }), " Cuando est\u00E1 cargando, deshabilita todos los eventos del mouse y teclado en los children"] }), _jsxs("li", { children: [_jsx("strong", { children: "Overlay semitransparente:" }), " Similar al Dialog, con efecto blur para mejor enfoque visual"] }), _jsxs("li", { children: [_jsx("strong", { children: "Texto personalizable:" }), " Puedes cambiar el texto que se muestra debajo de la barra de progreso"] }), _jsxs("li", { children: [_jsx("strong", { children: "Integraci\u00F3n con tema:" }), " Usa el color primario del tema actual autom\u00E1ticamente"] }), _jsxs("li", { children: [_jsx("strong", { children: "Contenido condicional:" }), " Con keepContentWhileLoading puedes mantener el contenido visible pero deshabilitado"] }), _jsxs("li", { children: [_jsx("strong", { children: "Overlay personalizable:" }), " Puedes personalizar completamente el overlay usando overlayClassName con clases de Tailwind para cambiar color, border radius, padding, etc."] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Default" }), _jsx("th", { className: "text-left p-3 font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "isLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsx("td", { className: "p-3 text-sm", children: "false" }), _jsx("td", { className: "p-3 text-sm", children: "Controla si el loader est\u00E1 visible" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "text" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "\"Cargando...\"" }), _jsx("td", { className: "p-3 text-sm", children: "Texto que se muestra debajo de la barra de progreso" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "children" }) }), _jsx("td", { className: "p-3 text-sm", children: "ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "-" }), _jsx("td", { className: "p-3 text-sm", children: "Contenido que se mostrar\u00E1 con overlay cuando isLoading es true" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "keepContentWhileLoading" }) }), _jsx("td", { className: "p-3 text-sm", children: "boolean" }), _jsx("td", { className: "p-3 text-sm", children: "false" }), _jsx("td", { className: "p-3 text-sm", children: "Si es true, mantiene el contenido visible (sin reducir opacidad) pero deshabilitado" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "contentLoadingNode" }) }), _jsx("td", { className: "p-3 text-sm", children: "ReactNode" }), _jsx("td", { className: "p-3 text-sm", children: "-" }), _jsx("td", { className: "p-3 text-sm", children: "Nodo personalizado que se muestra en lugar de children cuando isLoading es true" })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "p-3", children: _jsx("code", { className: "text-sm text-[var(--color-primary)]", children: "overlayClassName" }) }), _jsx("td", { className: "p-3 text-sm", children: "string" }), _jsx("td", { className: "p-3 text-sm", children: "\"bg-black/50 backdrop-blur-sm\"" }), _jsx("td", { className: "p-3 text-sm", children: "Clases de Tailwind para personalizar el overlay (ej: \"bg-white/50 backdrop-blur-sm rounded-lg\" para overlay blanco con border radius)" })] })] })] }) })] })] }) }) }));
+};
+export default LoaderDocs;

package/dist/docs/PaginationDocs.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationDocs.d.ts","sourceRoot":"","sources":["../../src/docs/PaginationDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EA+O3B,CAAC;AAEF,eAAe,cAAc,CAAC"}