flysoft-react-ui 0.5.0 → 0.5.3

package/dist/components/utils/Badge.js

@@ -1,46 +1,151 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-export const Badge = ({ children, variant = "primary", size = "md", rounded = false, className = "", icon, iconPosition = "left", iconLabel, }) => {
+import { normalizeIconClass } from "./iconUtils";
+// Función helper para convertir nombres de colores comunes a valores CSS válidos
+const getColorValue = (color) => {
+    if (!color)
+        return undefined;
+    // Si ya es un valor CSS válido (hex, rgb, rgba, hsl, etc.), retornarlo
+    if (color.startsWith("#") ||
+        color.startsWith("rgb") ||
+        color.startsWith("hsl")) {
+        return color;
+    }
+    // Mapeo de nombres de colores comunes
+    const colorMap = {
+        white: "#ffffff",
+        black: "#000000",
+        "gray-800": "#1f2937",
+        "gray-700": "#374151",
+        "gray-600": "#4b5563",
+        "gray-500": "#6b7280",
+        "gray-400": "#9ca3af",
+        "gray-300": "#d1d5db",
+        "gray-200": "#e5e7eb",
+        "gray-100": "#f3f4f6",
+        "gray-50": "#f9fafb",
+    };
+    return colorMap[color.toLowerCase()] || color;
+};
+export const Badge = ({ children, variant = "primary", size = "md", rounded = false, className = "", icon, iconPosition = "left", iconLabel, bg, textColor, onClick, }) => {
     const baseClasses = "inline-flex items-center font-medium font-[var(--font-default)]";
     const variantClasses = {
-        primary: `
-      bg-[var(--color-primary-light)] text-[var(--color-primary-dark)]
-      hover:bg-[var(--color-primary)] hover:text-[var(--color-primary-contrast)]
+        primary: `
+      bg-[var(--color-primary-light)] text-gray-800
     `,
-        secondary: `
-      bg-[var(--color-secondary-light)] text-[var(--color-secondary-dark)]
-      hover:bg-[var(--color-secondary)] hover:text-[var(--color-secondary-contrast)]
+        secondary: `
+      bg-[var(--color-secondary-light)] text-gray-800
     `,
-        success: `
-      bg-[var(--color-success-light)] text-[var(--color-success-dark)]
-      hover:bg-[var(--color-success)] hover:text-[var(--color-success-contrast)]
+        success: `
+      bg-[var(--color-success-light)] text-gray-800
     `,
-        warning: `
-      bg-[var(--color-warning-light)] text-[var(--color-warning-dark)]
-      hover:bg-[var(--color-warning)] hover:text-[var(--color-warning-contrast)]
+        warning: `
+      bg-[var(--color-warning-light)] text-gray-800
     `,
-        danger: `
-      bg-[var(--color-danger-light)] text-[var(--color-danger-dark)]
-      hover:bg-[var(--color-danger)] hover:text-[var(--color-danger-contrast)]
+        danger: `
+      bg-[var(--color-danger-light)] text-gray-800
     `,
-        info: `
-      bg-[var(--color-info-light)] text-[var(--color-info-dark)]
-      hover:bg-[var(--color-info)] hover:text-[var(--color-info-contrast)]
+        info: `
+      bg-[var(--color-info-light)] text-gray-800
     `,
     };
     const sizeClasses = {
-        sm: "px-2 py-0.5 text-xs",
-        md: "px-2.5 py-0.5 text-sm",
-        lg: "px-3 py-1 text-base",
+        sm: "py-0.5 text-xs",
+        md: "py-0.5 text-sm",
+        lg: "py-1 text-base",
     };
+    // Padding horizontal: si hay icono, el badge no tiene padding, se aplica a los elementos internos
+    const horizontalPaddingClasses = icon
+        ? "" // Sin padding horizontal en el badge cuando hay icono
+        : size === "sm"
+            ? "px-2"
+            : size === "md"
+                ? "px-2.5"
+                : "px-3";
+    // Padding para el texto: flex-1 para ocupar el espacio, padding solo en el lado opuesto al icono
+    const textPaddingClasses = icon
+        ? iconPosition === "left"
+            ? size === "sm"
+                ? "flex-1 pr-2"
+                : size === "md"
+                    ? "flex-1 pr-2.5"
+                    : "flex-1 pr-3"
+            : size === "sm"
+                ? "flex-1 pl-2"
+                : size === "md"
+                    ? "flex-1 pl-2.5"
+                    : "flex-1 pl-3"
+        : "";
+    // Padding para el icono: solo en el lado del borde
+    const iconPaddingClasses = icon
+        ? iconPosition === "left"
+            ? size === "sm"
+                ? "pl-2"
+                : size === "md"
+                    ? "pl-2.5"
+                    : "pl-3"
+            : size === "sm"
+                ? "pr-2"
+                : size === "md"
+                    ? "pr-2.5"
+                    : "pr-3"
+        : "";
     const roundedClasses = rounded ? "rounded-full" : "rounded-md";
-    const gapClasses = icon ? "gap-2" : "";
+    const gapClasses = icon ? "gap-2" : ""; // Gap entre icono y texto cuando hay icono
     const iconSizeClasses = size === "sm" ? "text-xs" : size === "md" ? "text-sm" : "text-base";
-    const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${roundedClasses} ${gapClasses} ${className}`;
+    // Si se proporciona bg personalizado, usar estilos inline; si no, usar las clases de variante
+    const backgroundClasses = bg ? "" : variantClasses[variant];
+    // Estilos inline para colores personalizados
+    const inlineStyles = bg
+        ? {
+            backgroundColor: getColorValue(bg) || bg,
+            color: getColorValue(textColor) || textColor || "#1f2937", // gray-800 por defecto
+        }
+        : {};
+    // Si hay onClick y no hay iconos, agregar cursor-pointer al badge completo
+    const cursorClasses = onClick && !icon ? "cursor-pointer" : "";
+    const classes = `${baseClasses} ${backgroundClasses} ${sizeClasses[size]} ${horizontalPaddingClasses} ${roundedClasses} ${gapClasses} ${cursorClasses} ${className}`;
     const renderIcon = () => {
         if (!icon)
             return null;
-        return (_jsx("i", { className: `fa ${icon} ${iconSizeClasses}`, "aria-hidden": !iconLabel, "aria-label": iconLabel }));
+        // Si hay onClick y hay iconos, el onClick se aplica solo a los iconos
+        const iconClasses = onClick
+            ? `${normalizeIconClass(icon)} ${iconSizeClasses} cursor-pointer`
+            : `${normalizeIconClass(icon)} ${iconSizeClasses}`;
+        return (_jsx("span", { className: iconPaddingClasses, children: _jsx("i", { className: iconClasses, "aria-hidden": !iconLabel, "aria-label": iconLabel, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
+                    ? (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            // Crear un evento sintético compatible con MouseEvent
+                            const syntheticEvent = {
+                                ...e,
+                                currentTarget: e.currentTarget,
+                                target: e.target,
+                            };
+                            onClick(syntheticEvent);
+                        }
+                    }
+                    : undefined }) }));
     };
-    return (_jsxs("span", { className: classes, children: [icon && iconPosition === "left" && renderIcon(), _jsx("span", { children: children }), icon && iconPosition === "right" && renderIcon()] }));
+    // Si hay onClick y no hay iconos, aplicar onClick al badge completo
+    const badgeProps = onClick && !icon
+        ? {
+            onClick,
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    // Crear un evento sintético compatible con MouseEvent
+                    const syntheticEvent = {
+                        ...e,
+                        currentTarget: e.currentTarget,
+                        target: e.target,
+                    };
+                    onClick(syntheticEvent);
+                }
+            },
+        }
+        : {};
+    return (_jsxs("span", { className: classes, style: inlineStyles, ...badgeProps, children: [icon && iconPosition === "left" && renderIcon(), _jsx("span", { className: textPaddingClasses, children: children }), icon && iconPosition === "right" && renderIcon()] }));
 };

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

@@ -1 +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"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC,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,CAyGxC,CAAC"}

package/dist/components/utils/Dialog.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from "react";
+import { normalizeIconClass } from "./iconUtils";
 export const Dialog = ({ isOpen, title, dialogBody, dialogActions, onClose, closeOnOverlayClick = false, }) => {
     // Prevenir scroll del body cuando el dialog está abierto
     useEffect(() => {
@@ -35,5 +36,9 @@ export const Dialog = ({ isOpen, title, dialogBody, dialogActions, onClose, clos
             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 })] })] }));
+    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(), style: { overflow: "visible" }, children: [_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-[var(--color-border-default)] flex-shrink-0", 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: normalizeIconClass("fa-times") }) }))] }), _jsx("div", { className: "px-6 py-4 flex-1 text-[var(--color-text-primary)] min-w-0", style: {
+                            overflowY: "auto",
+                            overflowX: "visible",
+                            maxHeight: "calc(90vh - 200px)"
+                        }, 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/Filter.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import type { AutocompleteOption } from "../form-controls/AutocompleteInput";
+import type { SearchSelectOption } from "../form-controls/SearchSelectInput";
+import type { PaginationInterface } from "../form-controls/Pagination";
+export interface StaticOption {
+    text: string;
+    value: string;
+}
+interface BaseFilterProps {
+    paramName?: string;
+    label?: string;
+    staticOptions?: StaticOption[];
+    inputWidth?: string;
+    value?: string;
+    onChange?: (value: string | undefined) => void;
+    /**
+     * Si es true, el componente solo se renderiza si tiene un valor o existe el queryParam asociado con un valor.
+     * Por defecto es false.
+     */
+    hideEmpty?: boolean;
+}
+export interface TextFilterProps extends BaseFilterProps {
+    filterType?: "text";
+}
+export interface NumberFilterProps extends BaseFilterProps {
+    filterType: "number";
+    min?: number;
+    max?: number;
+}
+export interface DateFilterProps extends BaseFilterProps {
+    filterType: "date";
+}
+export interface AutocompleteFilterProps<T = AutocompleteOption, K = string> extends BaseFilterProps {
+    filterType: "autocomplete";
+    options: T[];
+    getOptionLabel?: (item: T) => string;
+    getOptionValue?: (item: T) => K;
+    renderOption?: (item: T) => React.ReactNode;
+    noResultsText?: string;
+}
+export interface SearchFilterProps extends BaseFilterProps {
+    filterType: "search";
+}
+export interface SearchSelectFilterProps<T = SearchSelectOption, K = string> extends BaseFilterProps {
+    filterType: "searchSelect";
+    onSearchPromiseFn: (text: string) => Promise<Array<T> | PaginationInterface<T>>;
+    onSingleSearchPromiseFn: (value: K) => Promise<T | undefined>;
+    getOptionLabel?: (item: T) => string;
+    getOptionValue?: (item: T) => K;
+    renderOption?: (item: T) => React.ReactNode;
+    dialogTitle?: string;
+    noResultsText?: string;
+}
+export type FilterProps = TextFilterProps | NumberFilterProps | DateFilterProps | AutocompleteFilterProps | SearchFilterProps | SearchSelectFilterProps;
+export declare const Filter: React.FC<FilterProps>;
+export {};
+//# sourceMappingURL=Filter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Filter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAE7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAIvE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAGD,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,UAAU,EAAE,QAAQ,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,kBAAkB,EAAE,CAAC,GAAG,MAAM,CACzE,SAAQ,eAAe;IACvB,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,UAAU,EAAE,QAAQ,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,kBAAkB,EAAE,CAAC,GAAG,MAAM,CACzE,SAAQ,eAAe;IACvB,UAAU,EAAE,cAAc,CAAC;IAC3B,iBAAiB,EAAE,CACjB,IAAI,EAAE,MAAM,KACT,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD,uBAAuB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAC9D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,MAAM,MAAM,WAAW,GACnB,eAAe,GACf,iBAAiB,GACjB,eAAe,GACf,uBAAuB,GACvB,iBAAiB,GACjB,uBAAuB,CAAC;AAE5B,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA68BxC,CAAC"}