@zauru-sdk/components 6.2.28 → 6.3.0

package/.ladle/components.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { Provider as ReduxProvider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+import { MemoryRouter } from "react-router-dom";
+import "../src/tailwind.css";
+
+const playgroundStore = configureStore({
+  reducer: {
+    formValidation: (
+      state = { formValidations: {} as Record<string, unknown> }
+    ) => state,
+  },
+});
+
+export const Provider = ({ children }: { children: ReactNode }) => {
+  const methods = useForm({ mode: "onChange" });
+
+  return (
+    <ReduxProvider store={playgroundStore}>
+      <FormProvider {...methods}>
+        <MemoryRouter>
+          <div className="min-h-screen bg-gray-50 p-6 text-gray-900">
+            {children}
+          </div>
+        </MemoryRouter>
+      </FormProvider>
+    </ReduxProvider>
+  );
+};

package/.ladle/config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  stories: "stories/**/*.stories.{js,jsx,ts,tsx}",
+  port: 61000,
+  viteConfig: ".ladle/vite.config.ts",
+  addons: {
+    a11y: { enabled: true },
+  },
+};

package/.ladle/vite.config.ts

@@ -0,0 +1,23 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+
+const ladleDir = fileURLToPath(new URL(".", import.meta.url));
+const webapp = path.resolve(ladleDir, "../..");
+
+export default defineConfig({
+  resolve: {
+    dedupe: ["react", "react-dom"],
+    alias: {
+      "@zauru-sdk/icons": path.resolve(webapp, "icons/src/index.ts"),
+      "@zauru-sdk/common": path.resolve(webapp, "common/src/index.ts"),
+      "@zauru-sdk/types": path.resolve(webapp, "types/src/index.ts"),
+      "@zauru-sdk/redux": path.resolve(webapp, "redux/src/index.ts"),
+      "@zauru-sdk/hooks": path.resolve(webapp, "hooks/src/index.ts"),
+      "@zauru-sdk/utils": path.resolve(webapp, "utils/src/index.ts"),
+      "@zauru-sdk/graphql": path.resolve(webapp, "graphql/src/index.ts"),
+      "@zauru-sdk/services": path.resolve(webapp, "services/src/index.ts"),
+      "@zauru-sdk/config": path.resolve(webapp, "config/src/index.ts"),
+    },
+  },
+});

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.3.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.2.28...@zauru-sdk/components@6.3.0) (2026-09-14)
+
+
+### Features
+
+* agregar ActionList y SearchFiltersSummary genéricos ([775d986](https://github.com/intuitiva/zauru-typescript-sdk/commit/775d986cf06aeefd7a4269947ab96280ea167314))
+* agregar playground Ladle para los componentes webapp ([a616a77](https://github.com/intuitiva/zauru-typescript-sdk/commit/a616a77484f02ef71f5b6ff96ad6d6e98f789cb5))
+* mostrar títulos de tabla completos y scroll interno al expandir ([b62a253](https://github.com/intuitiva/zauru-typescript-sdk/commit/b62a253a3a5d8879572f9db00b2a86737b8886cc))
+* unificar componentes webapp con las copias remix-* ([714274a](https://github.com/intuitiva/zauru-typescript-sdk/commit/714274abd5ccc5e77affa3da41787b381c47de5f))
+
+
+
+
+
 ## [6.2.28](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.2.27...@zauru-sdk/components@6.2.28) (2026-09-14)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/PLAYGROUND.md

@@ -0,0 +1,59 @@
+# Playground de `@zauru-sdk/components`
+
+Taller visual de los componentes Remix/Tailwind de Zauru. Usa [Ladle](https://www.ladle.dev) (Vite + formato CSF) en lugar de Storybook: arranque más liviano para verificar UI en aislamiento. Las stories se pueden reusar si más adelante se pasa a Storybook.
+
+## Requisitos
+
+- Node >= 18
+- pnpm >= 9
+- Dependencias del monorepo instaladas (`pnpm install` en la raíz de `zauru-typescript-sdk`)
+
+## Arrancar
+
+Desde la raíz del SDK:
+
+```bash
+pnpm components:play
+```
+
+O desde este paquete:
+
+```bash
+pnpm --filter @zauru-sdk/components play
+```
+
+Abre [http://localhost:61000](http://localhost:61000). El menú a la izquierda lista las stories.
+
+## Qué cubre
+
+Stories en `stories/`:
+
+- Button (colores, loading, disabled, dropdown)
+- Container (header, colapsable)
+- Form (TextField, SelectField, Checkbox, DatePicker, FileUpload, FormLayout, RadioButtonGroup)
+- Tooltip / WithTooltip
+- ProgressModal
+- GenericDynamicTable y ZauruTable
+- Títulos, StaticAlert, Card, Tabs
+
+Los componentes atados a sesión Zauru (`HomeLayout`, `Zendesk`, `ValidateEmployeeAccess`) no tienen story: requieren la webapp host.
+
+El playground envuelve cada story con:
+
+- `react-hook-form` (`FormProvider`)
+- Redux (store mínimo para `useAppSelector`)
+- `MemoryRouter` de React Router 6 (el mismo que usa Remix 2) para `Link`, `Form` y `useSearchParams`
+
+## Build estático
+
+```bash
+pnpm --filter @zauru-sdk/components play:build
+```
+
+Sale a `build/` (no se publica en npm). Para previsualizar: `pnpm --filter @zauru-sdk/components exec ladle preview`.
+
+## Notas
+
+- Tailwind se procesa solo para este playground (`tailwind.config.cjs` + `postcss.config.cjs`). Las webapps siguen usando su propio Tailwind.
+- Las stories viven fuera de `src/` para que `tsc` no las compile al `dist` del paquete.
+- Vite alias `@zauru-sdk/*` a los `src` de los paquetes hermanos (el `dist` ESM del monorepo no exporta named ESM que Vite pueda resolver).

package/dist/Alerts/StaticAlert.d.ts

@@ -4,7 +4,7 @@ type Props = {
     description: any;
     showCloseButton?: boolean;
     onClose?: () => void;
-    type?: "success" | "info";
+    type?: "success" | "info" | "warning";
     loading?: boolean;
 };
 export declare const StaticAlert: (props: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/Buttons/ActionList.d.ts

@@ -0,0 +1,17 @@
+export type ActionListItem = {
+    key: string;
+    label: string;
+    loadingLabel?: string;
+    loading?: boolean;
+    badge?: string;
+    badgeClassName?: string;
+    disabled?: boolean;
+    onClick: () => void;
+};
+type ActionListProps = {
+    items: ActionListItem[];
+    disabled?: boolean;
+    className?: string;
+};
+export declare const ActionList: ({ items, disabled, className, }: ActionListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Buttons/Button.d.ts

@@ -1,4 +1,4 @@
-type DropdownOption = {
+export type DropdownOption = {
     label: string;
     value: string;
     onClick: () => void;

package/dist/Buttons/index.d.ts

@@ -1 +1,2 @@
 export * from "./Button.js";
+export * from "./ActionList.js";

package/dist/Containers/ButtonSectionContainer.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 type Props = {
     children: React.ReactNode;
     className?: string;
+    /** Fondo gris de pie de formulario. El nombre `whitBg` se conserva por compatibilidad con las webapps. */
+    whitBg?: boolean;
 };
 export declare const ButtonSectionContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Containers/Container.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
 type Props = {
-    title?: string;
+    title?: React.ReactNode;
     description?: string;
     children: React.ReactNode;
     className?: string;
     rightContent?: React.ReactNode;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
 };
 export declare const Container: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/DynamicTable/GenericDynamicTable.d.ts

@@ -40,6 +40,8 @@ type Props = {
      * es decir, sin permitir ningún tipo de interacción de edición o eliminación.
      */
     readOnly?: boolean;
+    /** Contenido extra debajo de cada fila (p. ej. un resumen). */
+    rowSummary?: (rowData: RowDataType) => React.ReactNode;
 };
 /**
  *

package/dist/Form/FileUpload/index.d.ts

@@ -17,6 +17,7 @@ type Props = {
     zauruBaseURL?: string;
     setProcessing?: (processing: boolean) => void;
     signature?: boolean;
+    capture?: "user" | "environment";
 };
 export declare const FileUploadField: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/FormLayout/index.d.ts

@@ -0,0 +1,11 @@
+import { type FormMethod } from "@remix-run/react";
+import { type ReactNode } from "react";
+type Props = {
+    formId: string;
+    title?: string;
+    children: ReactNode;
+    buttons?: ReactNode;
+    method?: FormMethod;
+};
+export declare const FormLayout: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/RadioButtonGroup/index.d.ts

@@ -0,0 +1 @@
+export { RadioButton as RadioButtonGroup, RadioButton as RadioButtonGroupWithoutValidation, } from "../RadioButton/index.js";

package/dist/Form/SelectField/index.d.ts

@@ -6,7 +6,10 @@ type Props = {
     defaultValue?: SelectFieldOption;
     defaultValueMulti?: SelectFieldOption[];
     helpText?: string;
-    options: Array<SelectFieldOption>;
+    options: Array<SelectFieldOption & {
+        disabled?: boolean;
+        disabledLabel?: string;
+    }>;
     onChange?: (value: SelectFieldOption | null) => void;
     onChangeMulti?: (value: SelectFieldOption[]) => void;
     onInputChange?: (newValue: string) => void;

package/dist/Form/index.d.ts

@@ -5,6 +5,7 @@ export * from "./DynamicBaculoForm/index.js";
 export * from "./FieldContainer/index.js";
 export * from "./FileUpload/index.js";
 export * from "./FormButtons/index.js";
+export * from "./FormLayout/index.js";
 export * from "./SelectField/index.js";
 export * from "./TextArea/index.js";
 export * from "./TextField/index.js";
@@ -12,3 +13,4 @@ export * from "./TimePicker/index.js";
 export * from "./YesNo/index.js";
 export * from "./ReactZodForm/index.js";
 export * from "./RadioButton/index.js";
+export * from "./RadioButtonGroup/index.js";

package/dist/Labels/SearchFiltersSummary.d.ts

@@ -0,0 +1,12 @@
+export type SearchFilterItem = {
+    key: string;
+    label: string;
+    value: string;
+};
+type Props = {
+    items?: SearchFilterItem[];
+    emptyText?: string;
+    className?: string;
+};
+export declare const SearchFiltersSummary: ({ items, emptyText, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Labels/index.d.ts

@@ -1 +1,2 @@
 export * from "./InfoLabel/index.js";
+export * from "./SearchFiltersSummary.js";

package/dist/Layouts/errorLayout/index.d.ts

@@ -1,5 +1,8 @@
-export declare const ErrorLayout: ({ from, isRootLevel, error: parentError, }: {
+export declare const ErrorLayout: ({ from, isRootLevel, error: parentError, onError, }: {
     from?: string;
     isRootLevel?: boolean;
     error?: Error;
+    onError?: (error: Error, meta: {
+        from?: string;
+    }) => void;
 }) => import("react/jsx-runtime").JSX.Element | null;

package/dist/NavBar/NavBar.d.ts

@@ -1,2 +1,2 @@
 import type { NavBarProps } from "./NavBar.types.js";
-export declare const NavBar: ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, }: NavBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavBar: ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, showDarkModeToggle, }: NavBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/NavBar/NavBar.types.d.ts

@@ -17,6 +17,7 @@ export type NavBarProps = {
     LinkComponent?: any;
     version?: string;
     reloadCatalogsOption?: boolean;
+    showDarkModeToggle?: boolean;
 };
 export type NavBarStateProps = {
     NavBarOpen: boolean;

package/dist/Table/ZauruTable.d.ts

@@ -1,4 +1,5 @@
 import type { TableProps } from "react-data-table-component";
+import { ExpandableRowsComponent } from "react-data-table-component/dist/DataTable/types.js";
 type Props = TableProps<any> & {
     columns: any;
     conditionalRowStyles?: any;
@@ -13,6 +14,10 @@ type Props = TableProps<any> & {
     search?: {
         placeholderSearch?: string;
     };
+    expandable?: {
+        expandableRowExpanded?: (row: any) => boolean;
+        expandableRowsComponent?: ExpandableRowsComponent<any>;
+    };
     theme?: "solarized" | "subTable";
     className?: string;
 };

package/dist/Tooltip/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+    text: string;
+};
+export declare const Tooltip: ({ children, text }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tooltip.js";

package/dist/WithTooltip/WithTooltip.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type Props = {
+    children: React.ReactNode;
+    text: string;
+};
+export declare const WithTooltip: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/WithTooltip/index.d.ts

@@ -0,0 +1 @@
+export * from "./WithTooltip.js";

package/dist/esm/Alerts/StaticAlert.js

@@ -13,6 +13,12 @@ const getConfig = (type) => {
                 buttonClassName: "rounded-md focus:outline-none focus:ring-2 focus:ring-green-500",
                 path: (_jsx("path", { d: "M8.445 12.6675A.9.9 0 0 0 7.1424 13.91l2.5726 2.7448c.3679.3856.9884.3689 1.335-.036l5.591-7.0366a.9.9 0 0 0-1.3674-1.1705l-4.6548 5.9132a.4.4 0 0 1-.607.0252l-1.567-1.6826zM1.9995 12c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10-10-4.5-10-10z" })),
             };
+        case "warning":
+            return {
+                containerClassName: "text-yellow-900 bg-yellow-100 border border-yellow-200 rounded-md",
+                buttonClassName: "rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500",
+                path: (_jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm.93 14.93h-1.86c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h1.86c.41 0 .75.34.75.75s-.34.75-.75.75zm.57-4.42l-.57 2.36h-1.86l-.57-2.36c-.13-.54.21-1.08.76-1.08h1.48c.55 0 .88.54.76 1.08zm0-2.36h-2.58c-.55 0-.88-.54-.76-1.08l.57-2.36h1.86l.57 2.36c.12.54-.21 1.08-.76 1.08z" })),
+            };
         default:
             return {
                 containerClassName: "text-blue-900 bg-blue-100 border border-blue-200 rounded-md",

package/dist/esm/BlockUI/BlockUI.js

@@ -4,5 +4,5 @@ export const BlockUI = (props) => {
     if (!active) {
         return _jsx(_Fragment, { children: children });
     }
-    return (_jsx("div", { children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute bg-gray-100 bg-opacity-80 z-10 h-full w-full flex items-center justify-center", children: _jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "text-3xl mr-4", children: loadingText }), _jsxs("svg", { className: "animate-spin h-36 w-36 text-gray-600", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })] }) }), children] }) }));
+    return (_jsx("div", { children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute bg-gray-100 bg-opacity-80 z-10 h-full w-full flex items-center justify-center", children: _jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "text-3xl mr-4", children: loadingText }), _jsxs("svg", { className: "animate-spin h-5 w-5 text-gray-600", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })] }) }), children] }) }));
 };

package/dist/esm/Buttons/ActionList.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ActionList = ({ items, disabled = false, className = "", }) => {
+    return (_jsx("div", { className: `flex flex-col gap-1 ${className}`, children: items.map((item) => {
+            const itemBusy = Boolean(item.loading);
+            const itemDisabled = disabled || item.disabled || itemBusy;
+            return (_jsxs("button", { type: "button", disabled: itemDisabled, onClick: item.onClick, className: "flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 disabled:cursor-progress disabled:opacity-60", children: [item.badge ? (_jsx("span", { className: `inline-flex min-w-[2.25rem] justify-center rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${item.badgeClassName ?? "bg-gray-100 text-gray-700"}`, children: item.badge })) : null, _jsx("span", { children: itemBusy ? (item.loadingLabel ?? item.label) : item.label })] }, item.key));
+        }) }));
+};

package/dist/esm/Buttons/Button.js

@@ -80,19 +80,19 @@ export const Button = (props) => {
     if (!hasDropdown) {
         const buttonContent = (_jsx("button", { type: type, name: "action", value: name, disabled: isButtonDisabled, onClick: onClickSave, className: `${isButtonDisabled ? " bg-opacity-25 " : ""} ${loading
                 ? " cursor-progress"
-                : `${isButtonDisabled ? "" : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? children ?? loadingText : children ?? title }));
+                : `${isButtonDisabled ? " cursor-not-allowed" : `cursor-pointer hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? children ?? loadingText : children ?? title }));
         return (_jsxs(_Fragment, { children: [(enableFormErrorsValidation && formHasErrors && errorMessage) ||
                     (enableFormErrorsDescriptions && errorMessage) ? (_jsx("div", { className: "flex flex-col items-end mb-2", children: _jsx("div", { className: "p-2 bg-red-100 border border-red-400 text-red-700 rounded-md shadow-sm", children: _jsx("p", { className: "text-sm", children: errorMessage }) }) })) : null, buttonContent] }));
     }
     // Comportamiento con dropdown
-    const dropdownContent = (_jsxs("div", { className: "relative inline-block text-left", ref: dropdownRef, children: [_jsx("div", { children: _jsxs("button", { type: "button", disabled: isButtonDisabled, onClick: () => setIsDropdownOpen(!isDropdownOpen), className: `${isButtonDisabled ? " bg-opacity-25 " : ""} ${loading
+    const dropdownContent = (_jsxs("div", { className: "relative inline-block text-left", ref: dropdownRef, children: [_jsx("div", { children: _jsxs("button", { type: "button", disabled: isButtonDisabled, "aria-haspopup": "menu", "aria-expanded": isDropdownOpen, onClick: () => setIsDropdownOpen(!isDropdownOpen), className: `${isButtonDisabled ? " bg-opacity-25 " : ""} ${loading
                         ? " cursor-progress"
-                        : `${isButtonDisabled ? "" : `hover:${color.bg700}`}`} inline-flex justify-center items-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: [loading
+                        : `${isButtonDisabled ? " cursor-not-allowed" : `cursor-pointer hover:${color.bg700}`}`} inline-flex justify-center items-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: [loading
                             ? children ?? loadingText
-                            : children ?? dropdownTitle ?? title, _jsx("svg", { className: `ml-2 -mr-1 h-4 w-4 transition-transform ${isDropdownOpen ? "rotate-180" : ""}`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })] }) }), isDropdownOpen && (_jsx("div", { className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none", children: _jsx("div", { className: "py-1", children: dropdownOptions.map((option, index) => (_jsx("button", { type: "button", onClick: () => {
+                            : children ?? dropdownTitle ?? title, _jsx("svg", { className: `ml-2 -mr-1 h-4 w-4 transition-transform ${isDropdownOpen ? "rotate-180" : ""}`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) })] }) }), isDropdownOpen && !isButtonDisabled ? (_jsx("div", { role: "menu", className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none", children: _jsx("div", { className: "py-1", children: dropdownOptions.map((option) => (_jsx("button", { type: "button", role: "menuitem", onClick: () => {
                             option.onClick();
                             setIsDropdownOpen(false);
-                        }, className: "block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 text-left", children: option.label }, index))) }) }))] }));
+                        }, className: "block w-full cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 text-left", children: option.label }, option.value))) }) })) : null] }));
     return (_jsxs(_Fragment, { children: [(enableFormErrorsValidation && formHasErrors && errorMessage) ||
                 (enableFormErrorsDescriptions && errorMessage) ? (_jsx("div", { className: "flex flex-col items-end mb-2", children: _jsx("div", { className: "p-2 bg-red-100 border border-red-400 text-red-700 rounded-md shadow-sm", children: _jsx("p", { className: "text-sm", children: errorMessage }) }) })) : null, dropdownContent] }));
 };

package/dist/esm/Buttons/index.js

@@ -1 +1,2 @@
 export * from "./Button.js";
+export * from "./ActionList.js";

package/dist/esm/Containers/ButtonSectionContainer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ButtonSectionContainer = (props) => {
-    const { children, className } = props;
-    return (_jsx("div", { className: `mt-5 flex flex-col md:flex-row md:justify-end md:items-center space-x-0 space-y-4 md:space-y-0 md:space-x-4 ${className}`, children: children }));
+    const { children, className, whitBg = false } = props;
+    return (_jsx("div", { className: `${whitBg ? "bg-gray-50 px-4 py-3 sm:px-6" : ""} mt-5 flex flex-col md:flex-row md:justify-end md:items-center space-x-0 space-y-4 md:space-y-0 md:space-x-4 ${className}`, children: children }));
 };

package/dist/esm/Containers/Container.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const Container = (props) => {
-    const { title, description, children, className = "", rightContent } = props;
+    const { title, description, children, className = "", rightContent, collapsible = false, defaultOpen = true, } = props;
     const titleInfo = (_jsxs(_Fragment, { children: [title && (_jsx("h3", { className: "text-3xl font-bold leading-8 text-gray-900", children: title })), description && (_jsx("p", { className: "mt-1 text-md text-gray-600", children: description }))] }));
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: `mx-2 ${className}`, children: [rightContent && (_jsxs("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4", children: [_jsx("div", { className: "max-w-3xl", children: titleInfo }), _jsx("div", { className: "flex-shrink-0", children: rightContent })] })), !rightContent && titleInfo, _jsx("div", { className: "mt-5 space-y-5", children: children })] }) }));
+    const header = rightContent ? (_jsxs("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4", children: [_jsx("div", { className: "max-w-3xl", children: titleInfo }), _jsx("div", { className: "flex-shrink-0", children: rightContent })] })) : (titleInfo);
+    const body = _jsx("div", { className: "mt-5 space-y-5", children: children });
+    if (collapsible) {
+        return (_jsx("div", { className: `mx-2 ${className}`, children: _jsxs("details", { className: "group", ...(defaultOpen ? { open: true } : {}), children: [_jsxs("summary", { className: "flex cursor-pointer list-none items-start gap-3 rounded-md py-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 [&::-webkit-details-marker]:hidden", children: [_jsx("span", { "aria-hidden": "true", className: "mt-2 inline-block h-0 w-0 shrink-0 border-y-[5px] border-l-[7px] border-y-transparent border-l-gray-700 transition-transform group-open:rotate-90" }), _jsx("div", { className: "min-w-0 flex-1", children: header })] }), body] }) }));
+    }
+    return (_jsxs("div", { className: `mx-2 ${className}`, children: [header, body] }));
 };

package/dist/esm/Containers/OutletContainer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const OutletContainer = (props) => {
     const { children } = props;
-    return (_jsx("div", { className: "flex-1 overflow-x-auto", suppressHydrationWarning: true, children: children }));
+    return (_jsx("div", { className: "min-w-0 flex-1 overflow-x-auto", suppressHydrationWarning: true, children: children }));
 };

package/dist/esm/DynamicTable/GenericDynamicTable.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { SelectField } from "../Form/SelectField/index.js";
 import { TextField } from "../Form/TextField/index.js";
 import { CheckBox } from "../Form/Checkbox/index.js";
@@ -97,7 +97,7 @@ const GenericDynamicTableErrorComponent = ({ name }) => {
  */
 export const GenericDynamicTable = (props) => {
     const { columns, onChange, className, footerRow, defaultValue = [], thCSSProperties, thElementsClassName = "", editable = true, readOnly = false, // Nuevo prop
-    searcheables = [], loading = false, paginated = true, defaultItemsPerPage = 10, itemsPerPageOptions = [10, 50, 100], name, withoutBg = false, orientation = "horizontal", maxRows, confirmDelete = true, addRowButtonHandler, } = props;
+    searcheables = [], loading = false, paginated = true, defaultItemsPerPage = 10, itemsPerPageOptions = [10, 50, 100], name, withoutBg = false, orientation = "horizontal", maxRows, confirmDelete = true, addRowButtonHandler, rowSummary, } = props;
     /**
      * Definimos una variable interna para saber si los campos son
      * efectivamente editables: solo si `editable` es true y `readOnly` es false.
@@ -185,7 +185,10 @@ export const GenericDynamicTable = (props) => {
         const renderRow = (rowData, index) => {
             const rendereableColumns = columns.filter((column) => column.type !== "hidden");
             if (orientation === "horizontal") {
-                return (_jsxs("tr", { className: index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "", children: [rendereableColumns.map((column) => renderCell(rowData, column)), isEditable && renderDeleteButton(rowData)] }, rowData.id));
+                const rowClassName = index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "";
+                const summaryColSpan = rendereableColumns.length + (isEditable ? 1 : 0);
+                const summaryContent = rowSummary?.(rowData);
+                return (_jsxs(React.Fragment, { children: [_jsxs("tr", { className: rowClassName, children: [rendereableColumns.map((column) => renderCell(rowData, column)), isEditable && renderDeleteButton(rowData)] }), summaryContent ? (_jsx("tr", { className: rowClassName, children: _jsxs("td", { colSpan: summaryColSpan, className: "px-2 pb-3 pt-0 text-sm text-gray-700 border-b border-gray-300", children: [_jsx("span", { className: "font-medium text-gray-500", children: "Resumen: " }), summaryContent] }) })) : null] }, rowData.id));
             }
             else {
                 // Orientación vertical

package/dist/esm/Footer/Footer.js

@@ -13,5 +13,5 @@ const COLORS = {
 };
 export const Footer = ({ href, selectedColor, showConnection = false, version = "2.0.5", }) => {
     const color = COLORS[selectedColor];
-    return (_jsx("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: _jsxs("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: [_jsxs("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", _jsx("a", { href: href, children: "Zauru" }), " ", `con ❤️ v.${version}`] }), showConnection && (_jsx("div", { className: "ml-5", children: _jsx(ConnectionState, {}) }))] }) }));
+    return (_jsx("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: _jsxs("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: [_jsxs("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", _jsx("a", { href: href, children: "Zauru" }), " ", `con ❤️ ${new Date().getFullYear()} v.${version}`] }), showConnection && (_jsx("div", { className: "ml-5", children: _jsx(ConnectionState, {}) }))] }) }));
 };

package/dist/esm/Form/FileUpload/index.js

@@ -4,7 +4,7 @@ import { useState, useEffect, useRef } from "react";
 import { useFormContext } from "react-hook-form";
 import { Button } from "../../Buttons/index.js";
 export const FileUploadField = (props) => {
-    const { id, name, title, helpText, hint, onChange, readOnly = false, fileTypes = [], showAvailableTypes = false, className, defaultValue, download = false, required = false, optimizeImages = true, zauruBaseURL = "https://zauru.herokuapp.com", setProcessing, signature = false, } = props;
+    const { id, name, title, helpText, hint, onChange, readOnly = false, fileTypes = [], showAvailableTypes = false, className, defaultValue, download = false, required = false, optimizeImages = true, zauruBaseURL = "https://zauru.herokuapp.com", setProcessing, signature = false, capture, } = props;
     const { register: tempRegister, setValue, formState: { errors }, } = useFormContext() || { formState: {} };
     const error = errors ? errors[name] : undefined;
     const register = tempRegister ? tempRegister(name, { required }) : undefined;
@@ -285,5 +285,5 @@ export const FileUploadField = (props) => {
                         }, className: "cursor-pointer border border-gray-300 h-48 w-48 flex items-center justify-center", children: previewSrc || (typeof defaultValue === "string" && defaultValue) ? (_jsx("img", { src: previewSrc ??
                                 (typeof defaultValue === "string" && defaultValue
                                     ? defaultValue
-                                    : undefined), alt: name, className: "h-48 w-48", style: { objectFit: "contain" } })) : (_jsx("span", { className: "text-gray-400", children: "No image" })) }), (previewSrc || (typeof defaultValue === "string" && defaultValue)) && (_jsx("button", { type: "button", onClick: deleteFile, className: "ml-2 text-red-600 underline text-sm", children: "Eliminar archivo" }))] }), _jsxs("div", { className: "flex relative items-center", children: [_jsx("input", { type: "file", id: id ?? name, accept: fileTypes.map((ft) => `.${ft}`).join(", "), className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, ...(register ?? {}), ref: fileInputRef, name: name, onChange: handleInputChange }), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), _jsx("div", { className: "mt-2 min-h-[60px] flex items-center justify-center border border-dashed border-gray-200 rounded", children: optimizing || uploading ? (_jsxs(_Fragment, { children: [optimizing && (_jsxs("div", { className: "w-full", children: [_jsx("progress", { value: optimizationProgress, max: "100", className: "w-full" }), _jsxs("p", { className: "text-sm text-blue-600 mt-1 text-center", children: ["Optimizando imagen a webp: ", optimizationProgress, "%"] })] })), uploading && (_jsxs("div", { className: "w-full", children: [_jsx("progress", { value: uploadProgress, max: "100", className: "w-full" }), _jsxs("p", { className: "text-sm text-blue-600 mt-1 text-center", children: ["Subiendo archivo: ", uploadProgress, "%"] })] }))] })) : (_jsx("span", { className: "text-sm text-gray-500", children: "Informaci\u00F3n de progreso" })) }), error && (_jsxs("p", { className: "mt-2 text-sm text-red-600", children: [_jsx("span", { className: "font-medium", children: "\u00A1Oops!" }), " ", error.message?.toString()] })), !error && hintMessage && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
+                                    : undefined), alt: name, className: "h-48 w-48", style: { objectFit: "contain" } })) : (_jsx("span", { className: "text-gray-400", children: "No image" })) }), (previewSrc || (typeof defaultValue === "string" && defaultValue)) && (_jsx("button", { type: "button", onClick: deleteFile, className: "ml-2 text-red-600 underline text-sm", children: "Eliminar archivo" }))] }), _jsxs("div", { className: "flex relative items-center", children: [_jsx("input", { type: "file", id: id ?? name, accept: fileTypes.map((ft) => `.${ft}`).join(", "), capture: capture, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, ...(register ?? {}), ref: fileInputRef, name: name, onChange: handleInputChange }), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), _jsx("div", { className: "mt-2 min-h-[60px] flex items-center justify-center border border-dashed border-gray-200 rounded", children: optimizing || uploading ? (_jsxs(_Fragment, { children: [optimizing && (_jsxs("div", { className: "w-full", children: [_jsx("progress", { value: optimizationProgress, max: "100", className: "w-full" }), _jsxs("p", { className: "text-sm text-blue-600 mt-1 text-center", children: ["Optimizando imagen a webp: ", optimizationProgress, "%"] })] })), uploading && (_jsxs("div", { className: "w-full", children: [_jsx("progress", { value: uploadProgress, max: "100", className: "w-full" }), _jsxs("p", { className: "text-sm text-blue-600 mt-1 text-center", children: ["Subiendo archivo: ", uploadProgress, "%"] })] }))] })) : (_jsx("span", { className: "text-sm text-gray-500", children: "Informaci\u00F3n de progreso" })) }), error && (_jsxs("p", { className: "mt-2 text-sm text-red-600", children: [_jsx("span", { className: "font-medium", children: "\u00A1Oops!" }), " ", error.message?.toString()] })), !error && hintMessage && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
 };

package/dist/esm/Form/FormLayout/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Form } from "@remix-run/react";
+import { ButtonSectionContainer } from "../../Containers/index.js";
+export const FormLayout = (props) => {
+    const { title, children, buttons, method, formId } = props;
+    return (_jsxs(Form, { id: formId, name: formId, method: method ?? "post", children: [title && (_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-3", children: title })), _jsxs("div", { className: "shadow sm:overflow-hidden sm:rounded-md", children: [_jsx("div", { className: "space-y-6 bg-white px-4 py-5 sm:p-6", children: children }), buttons && (_jsx(ButtonSectionContainer, { whitBg: true, children: buttons }))] })] }, formId));
+};

package/dist/esm/Form/RadioButtonGroup/index.js

@@ -0,0 +1 @@
+export { RadioButton as RadioButtonGroup, RadioButton as RadioButtonGroupWithoutValidation, } from "../RadioButton/index.js";

package/dist/esm/Form/SelectField/index.js

@@ -137,6 +137,9 @@ export const SelectField = (props) => {
         setFilteredOptions(options.filter((option) => option.label.toLowerCase().includes(newValue.toLowerCase())));
     }, [register, options]);
     const handleOptionClick = useCallback((option) => {
+        if (option.disabled) {
+            return;
+        }
         if (isMulti) {
             handleAddMultiValue(option);
         }
@@ -241,11 +244,18 @@ export const SelectField = (props) => {
                     ? "text-red-700 dark:text-red-500"
                     : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex items-center", children: [_jsx("input", { type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm pr-10`, placeholder: isMulti ? "Select options..." : "Select an option...", autoComplete: "off", onChange: handleInputChange, onBlur: handleBlur, required: required }), isClearable && (value || valueMulti.length > 0) && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), _jsx("input", { type: "hidden", ...(register ?? {}), name: name, value: isMulti
                             ? valueMulti.map((v) => v.value).join(",")
-                            : value?.value || "" }), isOpen && !isReadOnly && (_jsx("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => (_jsx("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
+                            : value?.value || "" }), isOpen && !isReadOnly && (_jsx("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => {
+                            const isDisabled = Boolean(option.disabled);
+                            const disabledLabel = option.disabledLabel;
+                            const isSelected = isMulti
                                 ? valueMulti.some((v) => v.value === option.value)
-                                : value?.value === option.value)
-                                ? "text-white bg-indigo-600"
-                                : index === highlightedIndex
-                                    ? "text-black bg-sky-200"
-                                    : "text-gray-900"}`, onClick: () => handleOptionClick(option), onMouseEnter: () => setHighlightedIndex(index), onMouseLeave: () => setHighlightedIndex(-1), children: option.label }, `${option.value}-${index}`))) }))] }), isMulti && valueMulti.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: valueMulti.map((option, index) => (_jsxs("span", { className: "bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded", children: [option.label, _jsx("button", { type: "button", onClick: () => handleRemoveMultiValue(option), className: "ml-1 text-blue-600 hover:text-blue-800", children: "\u00D7" })] }, `${option.value}-${index}`))) })), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error?.message?.toString() || "Error desconocido"] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+                                : value?.value === option.value;
+                            return (_jsxs("li", { className: `select-none relative py-2 pl-3 pr-9 ${isDisabled
+                                    ? "cursor-not-allowed text-gray-400 bg-gray-50"
+                                    : isSelected
+                                        ? "cursor-pointer text-white bg-indigo-600"
+                                        : index === highlightedIndex
+                                            ? "cursor-pointer text-black bg-sky-200"
+                                            : "cursor-pointer text-gray-900"}`, onClick: () => !isDisabled && handleOptionClick(option), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), onMouseLeave: () => setHighlightedIndex(-1), children: [option.label, isDisabled && disabledLabel && (_jsxs("span", { className: "ml-2 text-xs text-gray-400", children: ["(", disabledLabel, ")"] }))] }, `${option.value}-${index}`));
+                        }) }))] }), isMulti && valueMulti.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: valueMulti.map((option, index) => (_jsxs("span", { className: "bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded", children: [option.label, _jsx("button", { type: "button", onClick: () => handleRemoveMultiValue(option), className: "ml-1 text-blue-600 hover:text-blue-800", children: "\u00D7" })] }, `${option.value}-${index}`))) })), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error?.message?.toString() || "Error desconocido"] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };