@zauru-sdk/components 6.9.0 → 6.10.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.9.0",
+  "version": "6.10.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": "a3c1f2af46acb59cf9fcb78ecb18d904e33c61e5"
 }

package/src/NavBar/NavBar.tsx

@@ -15,7 +15,12 @@ import type {
 import { Link, useNavigate, useLocation } from "@remix-run/react";
 import { useAppSelector } from "@zauru-sdk/redux";
 
-const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
+const OptionsDropDownButton = ({
+  color,
+  options,
+  name,
+  ariaLabel,
+}: EntityProps & { ariaLabel?: string }) => {
   const [showOptionsMenu, setShowOptionsMenu] = useState(true);
 
   return (
@@ -23,8 +28,14 @@ const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
       <div className="flex justify-center">
         <div className="relative inline-block">
           <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:ring-opacity-40 focus:outline-none`}
+            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`}
           >
             {name ?? <OpcionButtonSvgIcon />}
             <DropDownArrowSvgIcon />
@@ -128,6 +139,7 @@ export const NavBar = ({
   selectedColor,
   version,
   reloadCatalogsOption,
+  settingsOption,
   showDarkModeToggle = false,
 }: NavBarProps) => {
   const color: ColorInterface = COLORS[selectedColor];
@@ -191,7 +203,35 @@ export const NavBar = ({
           {loggedIn && (
             <OptionsDropDownButton
               color={color}
+              ariaLabel="Menú de usuario"
               options={[
+                settingsOption && (
+                  <Link
+                    key="configuracion"
+                    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"
+                  >
+                    <div className="mx-auto pt-2">
+                      <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"
+                      >
+                        <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" />
+                        <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" />
+                      </svg>
+                      <span>Configuración</span>
+                    </div>
+                  </Link>
+                ),
                 reloadCatalogsOption && (
                   <Link
                     key="recargar-catalogos"
@@ -247,7 +287,7 @@ export const NavBar = ({
         </ul>
       </>
     );
-  }, [items, loggedIn, hiddenItemsChange, showDarkModeToggle, isDarkMode]);
+  }, [items, loggedIn, hiddenItemsChange, reloadCatalogsOption, settingsOption, showDarkModeToggle, isDarkMode]);
 
   return (
     <nav className={`py-3 ${color.bg600}`}>

package/src/NavBar/NavBar.types.ts

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

package/src/Tab/WebappSettingsChrome.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import { MainContainer } from "../Containers/MainContainer.js";
+import { SubContainer } from "../Containers/SubContainer.js";
+import { RouteTabNav } from "./RouteTabNav.js";
+
+type Props = {
+  children: ReactNode;
+  showEmployees?: boolean;
+  showRoles?: boolean;
+  showPermissions?: boolean;
+  basePath?: string;
+  title?: string;
+  description?: string;
+};
+
+export const WebappSettingsChrome = ({
+  children,
+  showEmployees = true,
+  showRoles = true,
+  showPermissions = true,
+  basePath = "/configuracion",
+  title = "Configuración",
+  description = "Roles, empleados y permisos de esta aplicación.",
+}: Props) => {
+  const base = basePath.replace(/\/$/, "");
+  return (
+    <MainContainer>
+      <SubContainer title={title} description={description}>
+        <RouteTabNav
+          ariaLabel="Secciones de configuración 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}
+      </SubContainer>
+    </MainContainer>
+  );
+};

package/src/Tab/index.ts

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