@zauru-sdk/components 6.9.0 → 6.11.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.11.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.10.0...@zauru-sdk/components@6.11.0) (2026-10-05)
+
+
+### Bug Fixes
+
+* asociar etiquetas del selector con su campo ([1626bbd](https://github.com/intuitiva/zauru-typescript-sdk/commit/1626bbdd58971c353bf03b07533a171a05ec8571))
+* identificar controles de la matriz de permisos ([472c956](https://github.com/intuitiva/zauru-typescript-sdk/commit/472c9565f2dc167e8566706f58c27ca55c6c9d09))
+* limitar altura de selecciones múltiples ([b0e578d](https://github.com/intuitiva/zauru-typescript-sdk/commit/b0e578df1d7ec2198abfd57515b6dc8409227c4d))
+
+
+### Features
+
+* exportar gestión de acceso de empleados ([df97155](https://github.com/intuitiva/zauru-typescript-sdk/commit/df97155d1370cdb624cc3ceb3905111a42edf65f))
+* exportar gestión de roles ([f0ee633](https://github.com/intuitiva/zauru-typescript-sdk/commit/f0ee63301583591b72faba93b8eab2d7ec8e735f))
+
+
+
+
+
+# [6.10.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.9.0...@zauru-sdk/components@6.10.0) (2026-10-05)
+
+
+### Features
+
+* menú Configuración genérico y extras de asignación fuera del SDK ([2691957](https://github.com/intuitiva/zauru-typescript-sdk/commit/2691957c9dba23226a4b8d371fee26b221e126f0))
+
+
+
+
+
 # [6.9.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.8.3...@zauru-sdk/components@6.9.0) (2026-10-05)
 
 

package/dist/AccessControl/WebappEmployeeAccess.d.ts

@@ -0,0 +1,36 @@
+import type { EmployeeGraphQL, WebAppRowGraphQL, WebappEmployeeRole, WebappRole } from "@zauru-sdk/types";
+import { type ReactNode } from "react";
+export type WebappEmployeeAssignmentChange<TAssignment extends WebappEmployeeRole> = {
+    employee: EmployeeGraphQL;
+    assignment?: WebAppRowGraphQL<TAssignment>;
+    roleId: number | null;
+};
+export type WebappEmployeeAssignmentDetails<TAssignment extends WebappEmployeeRole> = {
+    employee: EmployeeGraphQL;
+    assignment?: WebAppRowGraphQL<TAssignment>;
+    disabled: boolean;
+};
+type Props<TAssignment extends WebappEmployeeRole> = {
+    employees: EmployeeGraphQL[];
+    roles: WebAppRowGraphQL<WebappRole>[];
+    assignments: WebAppRowGraphQL<TAssignment>[];
+    canAssign?: boolean;
+    loading?: boolean;
+    description?: string;
+    superAdminLabel?: string;
+    addEmployeeTitle?: string;
+    addEmployeeDescription?: string;
+    noEmployeesToAddText?: string;
+    noRolesText?: string;
+    assignmentDetailsColumn?: {
+        name: string;
+        minWidth?: string;
+        grow?: number;
+    };
+    renderAssignmentDetails?: (details: WebappEmployeeAssignmentDetails<TAssignment>) => ReactNode;
+    superAdminEmailSuffixes?: readonly string[];
+    onAssignRole: (change: WebappEmployeeAssignmentChange<TAssignment>) => void;
+    onAddEmployee: (employeeId: number, roleId: number) => void;
+};
+export declare function WebappEmployeeAccess<TAssignment extends WebappEmployeeRole = WebappEmployeeRole>({ employees, roles, assignments, canAssign, loading, description, superAdminLabel, addEmployeeTitle, addEmployeeDescription, noEmployeesToAddText, noRolesText, assignmentDetailsColumn, renderAssignmentDetails, superAdminEmailSuffixes, onAssignRole, onAddEmployee, }: Props<TAssignment>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AccessControl/WebappRoleManagement.d.ts

@@ -0,0 +1,22 @@
+import type { WebAppRowGraphQL, WebappRole } from "@zauru-sdk/types";
+export type WebappRoleValues = {
+    name: string;
+    description: string;
+};
+type Props = {
+    roles: WebAppRowGraphQL<WebappRole>[];
+    canCreate?: boolean;
+    canEdit?: boolean;
+    canDelete?: boolean;
+    loading?: boolean;
+    createTitle?: string;
+    createButtonLabel?: string;
+    editTitle?: string;
+    deleteTitle?: string;
+    deleteDescription?: string;
+    onCreate: (values: WebappRoleValues) => void;
+    onUpdate: (roleId: number, values: WebappRoleValues) => void;
+    onDelete: (roleId: number) => void;
+};
+export declare function WebappRoleManagement({ roles, canCreate, canEdit, canDelete, loading, createTitle, createButtonLabel, editTitle, deleteTitle, deleteDescription, onCreate, onUpdate, onDelete, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/AccessControl/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./WebappEmployeeAccess.js";
+export * from "./WebappRoleManagement.js";

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, showDarkModeToggle, }: NavBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavBar: ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, settingsOption, 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;
+    settingsOption?: boolean;
     showDarkModeToggle?: boolean;
 };
 export type NavBarStateProps = {

package/dist/Tab/WebappSettingsChrome.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    showEmployees?: boolean;
+    showRoles?: boolean;
+    showPermissions?: boolean;
+    basePath?: string;
+    title?: string;
+    description?: string;
+};
+export declare const WebappSettingsChrome: ({ children, showEmployees, showRoles, showPermissions, basePath, title, description, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Tab/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./Tab.js";
 export * from "./RouteTabNav.js";
 export * from "./PermissionMatrix.js";
+export * from "./WebappSettingsChrome.js";

package/dist/esm/AccessControl/WebappEmployeeAccess.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isSuperAdminEmail } from "@zauru-sdk/utils";
+import { useMemo } from "react";
+import { z } from "zod";
+import { Button } from "../Buttons/Button.js";
+import { ButtonSectionContainer } from "../Containers/ButtonSectionContainer.js";
+import { DoubleFieldContainer } from "../Form/FieldContainer/DoubleFieldContainer.js";
+import { ReactZodForm } from "../Form/ReactZodForm/index.js";
+import { SelectField } from "../Form/SelectField/index.js";
+import { ZauruTable } from "../Table/ZauruTable.js";
+const addEmployeeSchema = z.object({
+    employee_id: z.coerce.number().min(1, "El empleado es requerido"),
+    role_id: z.coerce.number().min(1, "El rol es requerido"),
+});
+export function WebappEmployeeAccess({ employees, roles, assignments, canAssign = false, loading = false, description = "Solo aparecen quienes ya tienen acceso: rol asignado o super admin. Quitar el rol los saca de la lista.", superAdminLabel = "Super admin (todos los permisos)", addEmployeeTitle = "Agregar empleado", addEmployeeDescription = "Busca entre quienes aún no están en la lista y asígnales un rol.", noEmployeesToAddText = "No quedan empleados activos por agregar.", noRolesText = "Crea al menos un rol antes de agregar empleados.", assignmentDetailsColumn, renderAssignmentDetails, superAdminEmailSuffixes, onAssignRole, onAddEmployee, }) {
+    const roleOptions = useMemo(() => [
+        { value: "", label: "Sin rol" },
+        ...roles.map((role) => ({
+            value: String(role.id),
+            label: role.data.name,
+        })),
+    ], [roles]);
+    const addRoleOptions = useMemo(() => roles.map((role) => ({
+        value: String(role.id),
+        label: role.data.name,
+    })), [roles]);
+    const assignmentByEmployee = useMemo(() => {
+        const map = new Map();
+        for (const row of assignments) {
+            map.set(Number(row.data.employee_id), row);
+        }
+        return map;
+    }, [assignments]);
+    const listedEmployees = useMemo(() => employees
+        .filter((employee) => isSuperAdminEmail(employee.email, superAdminEmailSuffixes) ||
+        assignmentByEmployee.has(employee.id))
+        .sort((a, b) => a.name.localeCompare(b.name)), [assignmentByEmployee, employees, superAdminEmailSuffixes]);
+    const addEmployeeOptions = useMemo(() => {
+        const listedIds = new Set(listedEmployees.map((employee) => employee.id));
+        return employees
+            .filter((employee) => !listedIds.has(employee.id))
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map((employee) => ({
+            value: employee.id,
+            label: employee.email
+                ? `${employee.name} (${employee.email})`
+                : employee.name,
+        }));
+    }, [employees, listedEmployees]);
+    const columns = [
+        {
+            name: "Empleado",
+            sortable: true,
+            grow: 1,
+            minWidth: "12rem",
+            selector: (employee) => employee.name,
+        },
+        {
+            name: "Email",
+            sortable: true,
+            grow: 1,
+            minWidth: "14rem",
+            selector: (employee) => employee.email || "—",
+        },
+        {
+            name: "Rol",
+            minWidth: "14rem",
+            cell: (employee) => {
+                const assignment = assignmentByEmployee.get(employee.id);
+                const superAdmin = isSuperAdminEmail(employee.email, superAdminEmailSuffixes);
+                const currentRole = assignment
+                    ? String(assignment.data.role_id)
+                    : "";
+                return (_jsx("div", { className: "w-56 py-2", children: superAdmin ? (_jsx("p", { className: "text-sm text-gray-600", children: superAdminLabel })) : (_jsx(SelectField, { name: `role_${employee.id}`, options: roleOptions, defaultValue: roleOptions.find((option) => option.value === currentRole) ?? roleOptions[0], disabled: !canAssign || loading, onChange: (option) => {
+                            const value = option?.value?.toString() ?? "";
+                            onAssignRole({
+                                employee,
+                                assignment,
+                                roleId: value ? Number(value) : null,
+                            });
+                        } })) }));
+            },
+        },
+        ...(assignmentDetailsColumn && renderAssignmentDetails
+            ? [
+                {
+                    name: assignmentDetailsColumn.name,
+                    minWidth: assignmentDetailsColumn.minWidth ?? "16rem",
+                    grow: assignmentDetailsColumn.grow ?? 1,
+                    cell: (employee) => {
+                        const assignment = assignmentByEmployee.get(employee.id);
+                        return renderAssignmentDetails({
+                            employee,
+                            assignment,
+                            disabled: !canAssign || !assignment || loading,
+                        });
+                    },
+                },
+            ]
+            : []),
+    ];
+    return (_jsxs("div", { className: "mt-4 space-y-6", children: [_jsx("p", { className: "text-sm text-gray-600", children: description }), _jsx(ZauruTable, { columns: columns, data: listedEmployees, loading: loading, offlineSearch: ["name", "email"] }), canAssign ? (roles.length === 0 ? (_jsx("p", { className: "text-sm text-gray-600", role: "status", children: noRolesText })) : addEmployeeOptions.length > 0 ? (_jsx("div", { className: "rounded-md border border-gray-200 bg-white p-4", children: _jsxs(ReactZodForm, { schema: addEmployeeSchema, onSubmit: (values) => onAddEmployee(Number(values.employee_id), Number(values.role_id)), children: [_jsx("h2", { className: "text-base font-semibold text-gray-900", children: addEmployeeTitle }), _jsx("p", { className: "mb-4 mt-1 text-sm text-gray-600", children: addEmployeeDescription }), _jsxs(DoubleFieldContainer, { alignCenter: false, children: [_jsx(SelectField, { name: "employee_id", title: "Empleado", hint: "Escribe para filtrar por nombre o correo", options: addEmployeeOptions, required: true }), _jsx(SelectField, { name: "role_id", title: "Rol", options: addRoleOptions, required: true })] }), _jsx(ButtonSectionContainer, { children: _jsx(Button, { loading: loading, title: "Agregar" }) })] }) })) : (_jsx("p", { className: "text-sm text-gray-600", role: "status", children: noEmployeesToAddText }))) : null] }));
+}

package/dist/esm/AccessControl/WebappRoleManagement.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { PencilSvg, TrashSvg } from "@zauru-sdk/icons";
+import { useSyncExternalStore } from "react";
+import { z } from "zod";
+import { Button } from "../Buttons/Button.js";
+import { ButtonSectionContainer } from "../Containers/ButtonSectionContainer.js";
+import { ReactZodForm } from "../Form/ReactZodForm/index.js";
+import { TextField } from "../Form/TextField/index.js";
+import { createModal } from "../Modal/Modal.js";
+import { ZauruTable } from "../Table/ZauruTable.js";
+const roleSchema = z.object({
+    name: z.string().min(1, "El nombre es requerido"),
+    description: z.string().optional(),
+});
+const subscribeToBrowser = () => () => undefined;
+const getBrowserSnapshot = () => true;
+const getServerSnapshot = () => false;
+export function WebappRoleManagement({ roles, canCreate = false, canEdit = false, canDelete = false, loading = false, createTitle = "Crear rol", createButtonLabel = "Crear rol", editTitle = "Editar rol", deleteTitle = "¿Eliminar este rol?", deleteDescription = "No se puede eliminar si hay empleados asignados.", onCreate, onUpdate, onDelete, }) {
+    const isClient = useSyncExternalStore(subscribeToBrowser, getBrowserSnapshot, getServerSnapshot);
+    const editRole = async (role) => {
+        let name = role.data.name;
+        let description = role.data.description ?? "";
+        const response = await createModal({
+            title: editTitle,
+            okButtonText: "Guardar",
+            description: (_jsxs(_Fragment, { children: [_jsx(TextField, { title: "Nombre", name: "name", defaultValue: name, onChange: (value) => {
+                            name = value;
+                        } }), _jsx(TextField, { className: "mt-4", title: "Descripci\u00F3n", name: "description", defaultValue: description, onChange: (value) => {
+                            description = value;
+                        } })] })),
+        });
+        if (response === "OK") {
+            onUpdate(role.id, { name, description });
+        }
+    };
+    const confirmDelete = async (roleId) => {
+        const response = await createModal({
+            title: deleteTitle,
+            description: deleteDescription,
+        });
+        if (response === "OK") {
+            onDelete(roleId);
+        }
+    };
+    const columns = [
+        {
+            name: "Nombre",
+            sortable: true,
+            grow: 1,
+            selector: (role) => role.data.name,
+        },
+        {
+            name: "Descripción",
+            grow: 2,
+            selector: (role) => role.data.description || "—",
+        },
+        {
+            name: "Permisos",
+            width: "8%",
+            selector: (role) => role.data.permission_keys?.length ?? 0,
+        },
+        {
+            name: "",
+            grow: 0,
+            minWidth: "90px",
+            maxWidth: "90px",
+            cell: (role) => (_jsxs("div", { className: "flex gap-2", children: [canDelete ? (_jsx("button", { type: "button", title: "Eliminar", "aria-label": `Eliminar rol ${role.data.name}`, disabled: loading, className: "cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", onClick: () => void confirmDelete(role.id), children: _jsx(TrashSvg, {}) })) : null, canEdit ? (_jsx("button", { type: "button", title: "Editar", "aria-label": `Editar rol ${role.data.name}`, disabled: loading, className: "cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", onClick: () => void editRole(role), children: _jsx(PencilSvg, {}) })) : null] })),
+        },
+    ];
+    if (!isClient) {
+        return null;
+    }
+    return (_jsxs("div", { className: "mt-4 space-y-6", children: [_jsx(ZauruTable, { columns: columns, data: [...roles].sort((a, b) => a.data.name.localeCompare(b.data.name)), loading: loading, offlineSearch: ["data.name", "data.description"] }), canCreate ? (_jsx("div", { className: "rounded-md border border-gray-200 bg-white p-4", children: _jsxs(ReactZodForm, { schema: roleSchema, onSubmit: (values) => onCreate({
+                        name: String(values.name ?? ""),
+                        description: String(values.description ?? ""),
+                    }), children: [_jsx("h2", { className: "mb-4 text-base font-semibold text-gray-900", children: createTitle }), _jsx(TextField, { name: "name", title: "Nombre del rol", required: true }), _jsx(TextField, { className: "mt-4", name: "description", title: "Descripci\u00F3n" }), _jsx(ButtonSectionContainer, { children: _jsx(Button, { loading: loading, title: createButtonLabel }) })] }) })) : null] }));
+}

package/dist/esm/AccessControl/index.js

@@ -0,0 +1,2 @@
+export * from "./WebappEmployeeAccess.js";
+export * from "./WebappRoleManagement.js";

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { IdeaIconSVG } from "@zauru-sdk/icons";
-import { useEffect, useState, useRef, useCallback, } from "react";
+import { useEffect, useState, useRef, useId, useCallback, } from "react";
 import { LoadingInputSkeleton } from "../../Skeletons/index.js";
 import { useFormContext } from "react-hook-form";
 // Simple comparison helper to check if two SelectFieldOption arrays contain the
@@ -30,6 +30,10 @@ export const SelectField = (props) => {
     const lastSyncedDefaultValues = useRef(defaultValueMulti.map((option) => option.value));
     const [isTabPressed, setIsTabPressed] = useState(false);
     const [isSearching, setIsSearching] = useState(false);
+    const generatedInputId = useId();
+    const inputId = id ?? (name ? `${name}-input` : generatedInputId);
+    const errorId = `${inputId}-error`;
+    const hintId = `${inputId}-hint`;
     // Use refs to store stable references to callbacks
     const onChangeRef = useRef(onChange);
     const onChangeMultiRef = useRef(onChangeMulti);
@@ -275,11 +279,13 @@ export const SelectField = (props) => {
         options,
     ]);
     if (loading) {
-        return (_jsxs(_Fragment, { children: [title && (_jsx("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), _jsx(LoadingInputSkeleton, {}), helpText && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: helpText }))] }));
+        return (_jsxs(_Fragment, { children: [title && (_jsx("span", { className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), _jsx(LoadingInputSkeleton, {}), helpText && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: helpText }))] }));
     }
-    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${color === "red"
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && (_jsxs("label", { htmlFor: inputId, className: `block text-sm font-medium ${color === "red"
                     ? "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
+                    : "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: inputId, 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, "aria-invalid": Boolean(error), "aria-describedby": error ? errorId : hint ? hintId : undefined }), isClearable && (value || valueMulti.length > 0) && (_jsx("button", { type: "button", onClick: handleClear, "aria-label": isMulti
+                                    ? "Limpiar todas las opciones seleccionadas"
+                                    : "Limpiar la opción seleccionada", className: "absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-600 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2", children: _jsx("span", { "aria-hidden": "true", 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) => {
                             const isDisabled = Boolean(option.disabled);
@@ -294,5 +300,5 @@ export const SelectField = (props) => {
                                         : 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 }))] }));
+                        }) }))] }), isMulti && valueMulti.length > 0 && (_jsx("ul", { className: "mt-2 flex max-h-20 flex-wrap gap-1.5 overflow-auto overscroll-contain rounded-md border border-blue-100 bg-blue-50/40 p-1.5", "aria-label": "Opciones seleccionadas", children: valueMulti.map((option, index) => (_jsxs("li", { className: "inline-flex max-w-full shrink-0 items-center rounded bg-blue-100 py-0.5 pl-2.5 pr-0.5 text-xs font-semibold text-blue-800", children: [_jsx("span", { className: "whitespace-nowrap", children: option.label }), _jsx("button", { type: "button", onClick: () => handleRemoveMultiValue(option), "aria-label": `Quitar ${option.label}`, className: "ml-1 inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded text-blue-700 hover:bg-blue-200 hover:text-blue-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1", children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })] }, `${option.value}-${index}`))) })), error && (_jsxs("p", { id: errorId, 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", { id: hintId, className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };

package/dist/esm/NavBar/NavBar.js

@@ -4,9 +4,9 @@ import { DropDownArrowSvgIcon, LogoutDropDownSvgIcon, MenuAlt4Svg, OpcionButtonS
 import { COLORS } from "./NavBar.utils.js";
 import { Link, useNavigate, useLocation } from "@remix-run/react";
 import { useAppSelector } from "@zauru-sdk/redux";
-const OptionsDropDownButton = ({ color, options, name }) => {
+const OptionsDropDownButton = ({ color, options, name, ariaLabel, }) => {
     const [showOptionsMenu, setShowOptionsMenu] = useState(true);
-    return (_jsx("div", { className: "nav-item ml-auto", children: _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative inline-block", children: [_jsxs("button", { onClick: () => setShowOptionsMenu(!showOptionsMenu), className: `relative flex cursor-pointer items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`, children: [name ?? _jsx(OpcionButtonSvgIcon, {}), _jsx(DropDownArrowSvgIcon, {})] }), _jsx("div", { className: "absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800", hidden: showOptionsMenu, onMouseLeave: () => setShowOptionsMenu(true), children: options.map((option, index) => (_jsx(React.Fragment, { children: option }, index))) })] }) }) }));
+    return (_jsx("div", { className: "nav-item ml-auto", children: _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative inline-block", children: [_jsxs("button", { type: "button", "aria-label": ariaLabel ?? (typeof name === "string" ? name : "Menú"), "aria-haspopup": "menu", "aria-expanded": !showOptionsMenu, onClick: () => setShowOptionsMenu(!showOptionsMenu), className: `relative flex cursor-pointer items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2`, children: [name ?? _jsx(OpcionButtonSvgIcon, {}), _jsx(DropDownArrowSvgIcon, {})] }), _jsx("div", { className: "absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800", hidden: showOptionsMenu, onMouseLeave: () => setShowOptionsMenu(true), children: options.map((option, index) => (_jsx(React.Fragment, { children: option }, index))) })] }) }) }));
 };
 const NavItem = ({ name, link, icon, selectedColor, childrens = [], reduxNotificationBadge, }) => {
     const location = useLocation();
@@ -30,7 +30,7 @@ const NavItem = ({ name, link, icon, selectedColor, childrens = [], reduxNotific
             // De lo contrario, usamos el color normal (bg700)
             className: `${isActive ? specialColor.bg900 : specialColor.bg700} container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150`, children: _jsxs(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75 relative", to: link, children: [_jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }), notificationBadge !== undefined && (_jsx("span", { className: "absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center w-5 h-5", children: notificationBadge }))] }) }) }));
 };
-export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, showDarkModeToggle = false, }) => {
+export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, settingsOption, showDarkModeToggle = false, }) => {
     const color = COLORS[selectedColor];
     const [NavBarOpen, setNavBarOpen] = useState(false);
     const [currentVersion, setCurrentVersion] = useState(version);
@@ -56,11 +56,12 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadC
     const options = useMemo(() => {
         return (_jsxs(_Fragment, { children: [_jsx("ul", { className: "w-full lg:flex lg:items-center", children: renderNavItems(items
                         .filter((item) => item.loggedIn === loggedIn)
-                        .filter((item) => item.hide !== true)) }), _jsx("ul", { className: "sm:flex sm:flex-col lg:flex-row ml-auto", children: loggedIn && (_jsx(OptionsDropDownButton, { color: color, options: [
+                        .filter((item) => item.hide !== true)) }), _jsx("ul", { className: "sm:flex sm:flex-col lg:flex-row ml-auto", children: loggedIn && (_jsx(OptionsDropDownButton, { color: color, ariaLabel: "Men\u00FA de usuario", options: [
+                            settingsOption && (_jsx(Link, { className: "block cursor-pointer px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white", to: "/configuracion", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsxs("svg", { className: "h-5 w-5 mr-1", width: "24", height: "24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [_jsx("path", { d: "M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" }), _jsx("path", { d: "M19.4 13a7.7 7.7 0 0 0 .06-2l2.1-1.64-2-3.46-2.55 1a7.7 7.7 0 0 0-1.73-1L14.7 2H9.3l-.58 2.9a7.7 7.7 0 0 0-1.73 1l-2.55-1-2 3.46L4.54 11a7.7 7.7 0 0 0 0 2l-2.1 1.64 2 3.46 2.55-1a7.7 7.7 0 0 0 1.73 1L9.3 22h5.4l.58-2.9a7.7 7.7 0 0 0 1.73-1l2.55 1 2-3.46Z" })] }), _jsx("span", { children: "Configuraci\u00F3n" })] }) }, "configuracion")),
                             reloadCatalogsOption && (_jsx(Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`, to: "/reload-catalogs", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsxs("svg", { className: `h-5 w-5 mr-1`, width: "24", height: "24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M20.5 8c-1.392-3.179-4.823-5-8.522-5C7.299 3 3.453 6.552 3 11.1" }), _jsx("path", { d: "M16.489 8.4h3.97A.54.54 0 0 0 21 7.86V3.9M3.5 16c1.392 3.179 4.823 5 8.522 5 4.679 0 8.525-3.552 8.978-8.1" }), _jsx("path", { d: "M7.511 15.6h-3.97a.54.54 0 0 0-.541.54v3.96" })] }), _jsx("span", { children: "Recargar cat\u00E1logos" })] }) }, "recargar-catalogos")),
                             showDarkModeToggle && (_jsx("button", { type: "button", className: "block w-full cursor-pointer text-left px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white", onClick: () => setIsDarkMode((value) => !value), children: _jsx("div", { className: "mx-auto pt-2", children: _jsx("span", { children: isDarkMode ? "Modo claro" : "Modo oscuro" }) }) }, "dark-mode-toggle")),
                             _jsx(Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`, to: "/logout", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsx(LogoutDropDownSvgIcon, {}), _jsx("span", { children: "Cerrar sesi\u00F3n" })] }) }, "cerrar-sesion"),
                         ] })) })] }));
-    }, [items, loggedIn, hiddenItemsChange, showDarkModeToggle, isDarkMode]);
+    }, [items, loggedIn, hiddenItemsChange, reloadCatalogsOption, settingsOption, showDarkModeToggle, isDarkMode]);
     return (_jsx("nav", { className: `py-3 ${color.bg600}`, children: _jsxs("div", { className: "flex items-center justify-between ml-5 mr-5", children: [_jsxs("div", { className: "flex justify-between items-center w-full lg:w-auto", children: [_jsxs(Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", children: [_jsx("div", { className: "inline-block mr-2 mb-2 align-middle", children: _jsx("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }), version !== currentVersion && (_jsx("button", { className: `ml-2 px-2 py-1 text-xs text-white ${color.bg700} rounded-full hover:${color.bg900} transition-colors duration-200`, onClick: refreshPage, children: "\uD83D\uDD04 Actualizar versi\u00F3n" })), _jsx("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: _jsx(MenuAlt4Svg, { open: NavBarOpen }) })] }), _jsx("div", { className: `lg:hidden fixed top-0 left-0 z-50 w-64 h-full ${color.bg700} dark:bg-gray-900 shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out overflow-y-auto`, children: _jsx("div", { className: "p-4", children: options }) }), _jsx("div", { className: "hidden lg:flex lg:items-center w-full lg:w-auto", children: options })] }) }));
 };

package/dist/esm/Tab/PermissionMatrix.js

@@ -22,7 +22,7 @@ function GroupRows({ group, roles, sectionKeys, disabled, pendingCells, onToggle
                         const granted = role.permissionKeys.includes(action.key);
                         const cellKey = permissionMatrixCellKey(role.id, action.key);
                         const pending = pendingCells?.has(cellKey) ?? false;
-                        return (_jsx("td", { className: "border-b border-l border-gray-100 px-3 py-2 text-center", children: _jsx("input", { type: "checkbox", className: checkboxClass, checked: granted, disabled: disabled || pending, "aria-label": `${role.name}: ${action.label}`, onChange: () => onToggle(role.id, action.key, !granted) }) }, role.id));
+                        return (_jsx("td", { className: "border-b border-l border-gray-100 px-3 py-2 text-center", children: _jsx("input", { type: "checkbox", id: `permission-${role.id}-${action.key}`, name: `permission-${role.id}-${action.key}`, className: checkboxClass, checked: granted, disabled: disabled || pending, "aria-label": `${role.name}: ${action.label}`, onChange: () => onToggle(role.id, action.key, !granted) }) }, role.id));
                     })] }, action.key))), onBulkSection ? (_jsxs("tr", { children: [_jsx("td", { className: "sticky left-0 z-10 border-b border-gray-200 bg-white px-3 py-1 text-xs text-gray-500", children: "Secci\u00F3n" }), roles.map((role) => {
                         const sectionGranted = sectionKeys.every((key) => role.permissionKeys.includes(key));
                         return (_jsx("td", { className: "border-b border-l border-gray-200 px-3 py-1 text-center", children: _jsx("button", { type: "button", className: "cursor-pointer text-xs font-medium text-indigo-700 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded disabled:cursor-not-allowed disabled:opacity-50", disabled: disabled, onClick: () => onBulkSection(role.id, group.id, sectionGranted ? "remove" : "add"), children: sectionGranted ? "Quitar sección" : "Marcar sección" }) }, role.id));

package/dist/esm/Tab/WebappSettingsChrome.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MainContainer } from "../Containers/MainContainer.js";
+import { SubContainer } from "../Containers/SubContainer.js";
+import { RouteTabNav } from "./RouteTabNav.js";
+export const WebappSettingsChrome = ({ children, showEmployees = true, showRoles = true, showPermissions = true, basePath = "/configuracion", title = "Configuración", description = "Roles, empleados y permisos de esta aplicación.", }) => {
+    const base = basePath.replace(/\/$/, "");
+    return (_jsx(MainContainer, { children: _jsxs(SubContainer, { title: title, description: description, children: [_jsx(RouteTabNav, { ariaLabel: "Secciones de configuraci\u00F3n de accesos", selectedColor: "indigo", items: [
+                        {
+                            to: `${base}/empleados`,
+                            label: "Empleados",
+                            hide: !showEmployees,
+                        },
+                        {
+                            to: `${base}/roles`,
+                            label: "Roles",
+                            hide: !showRoles,
+                        },
+                        {
+                            to: `${base}/permisos`,
+                            label: "Permisos",
+                            hide: !showPermissions,
+                        },
+                    ] }), children] }) }));
+};

package/dist/esm/Tab/index.js

@@ -1,3 +1,4 @@
 export * from "./Tab.js";
 export * from "./RouteTabNav.js";
 export * from "./PermissionMatrix.js";
+export * from "./WebappSettingsChrome.js";

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export * from "./Alerts/index.js";
+export * from "./AccessControl/index.js";
 export * from "./BlockUI/index.js";
 export * from "./Buttons/index.js";
 export * from "./Card/index.js";

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./Alerts/index.js";
+export * from "./AccessControl/index.js";
 export * from "./BlockUI/index.js";
 export * from "./Buttons/index.js";
 export * from "./Card/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.9.0",
+  "version": "6.11.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -44,12 +44,12 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^6.8.4",
-    "@zauru-sdk/hooks": "^6.3.17",
+    "@zauru-sdk/common": "^6.8.5",
+    "@zauru-sdk/hooks": "^6.3.18",
     "@zauru-sdk/icons": "^6.1.0",
-    "@zauru-sdk/redux": "^6.5.15",
-    "@zauru-sdk/types": "^6.22.0",
-    "@zauru-sdk/utils": "^6.21.0",
+    "@zauru-sdk/redux": "^6.5.16",
+    "@zauru-sdk/types": "^6.23.0",
+    "@zauru-sdk/utils": "^6.22.0",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "800600a8cdb22f1c49293fbc3a48d26aa03771c9"
+  "gitHead": "885c1d44afb4c5717ae823664b37ac48b30283db"
 }