@cnc-ti/layout-basic 8.2.1 → 8.2.2

package/dist/index.mjs

@@ -8217,35 +8217,48 @@ function getInitials(fullName) {
   const lastNameInitial = nameParts[nameParts.length - 1][0].toUpperCase();
   return `${firstNameInitial}${lastNameInitial}`;
 }
-var Header = ({
-  className,
-  ...props
-}) => {
+function Header({ variant = "default", className, ...props }) {
   return /* @__PURE__ */ jsx18(
     "header",
     {
+      "data-header-type": variant,
       className: cn(
-        "cnc-h-[60px] cnc-flex cnc-items-center cnc-justify-end cnc-gap-4 cnc-px-4 cnc-w-full cnc-shadow-md cnc-bg-white",
+        "cnc-header cnc-h-[60px] cnc-flex cnc-items-center cnc-justify-end cnc-gap-4 cnc-px-4 lg:cnc-px-0 cnc-w-full cnc-shadow-md",
+        variant === "primary" ? "cnc-bg-primary-800" : "cnc-bg-white",
         className
       ),
       ...props
     }
   );
-};
+}
 var HeaderContainer = ({
   className,
   isOpen,
   onOpenMenu,
+  hasSidebar = true,
+  container = false,
+  logo,
+  logoLink,
   children,
   ...props
 }) => {
+  const renderLogo = () => {
+    if (!hasSidebar && logo) {
+      return logoLink ? /* @__PURE__ */ jsx18("a", { href: logoLink, children: /* @__PURE__ */ jsx18("img", { src: logo, alt: "Logotipo", className: "cnc-h-8" }) }) : /* @__PURE__ */ jsx18("img", { src: logo, alt: "Logotipo", className: "cnc-h-8" });
+    }
+    return null;
+  };
   return /* @__PURE__ */ jsxs3(
     "div",
     {
-      className: cn("cnc-flex cnc-flex-1 cnc-justify-between cnc-items-center"),
+      className: cn(
+        "cnc-flex cnc-flex-1 cnc-justify-between cnc-items-center",
+        container && "cnc-container cnc-mx-auto",
+        className
+      ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx18("div", { children: onOpenMenu && !isOpen && /* @__PURE__ */ jsx18("button", { onClick: onOpenMenu, className: "hover:cnc-brightness-75 cnc-sidebar-child-hidden cnc-cursor-pointer", children: /* @__PURE__ */ jsx18("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 512 512", className: "cnc-size-6 cnc-text-brand-blue-900", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18("path", { fill: "none", strokeLinecap: "round", strokeMiterlimit: "10", strokeWidth: "48", d: "M88 152h336M88 256h336M88 360h336" }) }) }) }),
+        /* @__PURE__ */ jsx18("div", { className: "cnc-flex cnc-items-center", children: onOpenMenu && !isOpen && hasSidebar ? /* @__PURE__ */ jsx18("button", { onClick: onOpenMenu, className: "hover:cnc-brightness-75 cnc-sidebar-child-hidden cnc-cursor-pointer", children: /* @__PURE__ */ jsx18("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 512 512", className: "cnc-size-6 cnc-text-brand-blue-900 cnc-header-item", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18("path", { fill: "none", strokeLinecap: "round", strokeMiterlimit: "10", strokeWidth: "48", d: "M88 152h336M88 256h336M88 360h336" }) }) }) : !hasSidebar && renderLogo() }),
         /* @__PURE__ */ jsx18("div", { className: "cnc-flex", children })
       ]
     }
@@ -8262,13 +8275,13 @@ var HeaderProfileHeader = ({
       "div",
       {
         id: "cnc-border-lateral",
-        className: "cnc-border-solid cnc-border-l-2 cnc-border-brand-blue-60",
-        children: /* @__PURE__ */ jsxs3("div", { className: "cnc-flex cnc-flex-row cnc-gap-2 cnc-items-center cnc-justify-center hover:cnc-bg-gray-100 cnc-transition cnc-duration-300 cnc-ease-in-out cnc-cursor-pointer cnc-px-4 cnc-py-2 cnc-rounded-lg cnc-ml-8", children: [
+        className: "cnc-border-solid cnc-border-l-2 cnc-border-brand-blue-60 cnc-header-item",
+        children: /* @__PURE__ */ jsxs3("div", { className: "cnc-flex cnc-flex-row cnc-gap-2 cnc-items-center cnc-justify-center hover:cnc-bg-gray-100 cnc-transition cnc-duration-300 cnc-ease-in-out cnc-cursor-pointer cnc-px-4 cnc-py-2 cnc-rounded-lg cnc-ml-8 cnc-header-item", children: [
           /* @__PURE__ */ jsxs3("div", { className: "cnc-flex cnc-flex-col cnc-justify-end cnc-text-end", children: [
-            /* @__PURE__ */ jsx18("p", { className: "cnc-text-xs cnc-font-extrabold cnc-text-brand-blue-900", children: entityName }),
-            /* @__PURE__ */ jsx18("p", { className: "cnc-text-xs cnc-font-normal cnc-text-brand-gray-700", children: userName })
+            /* @__PURE__ */ jsx18("p", { className: "cnc-text-xs cnc-font-extrabold cnc-text-brand-blue-900 cnc-header-item", children: entityName }),
+            /* @__PURE__ */ jsx18("p", { className: "cnc-text-xs cnc-font-normal cnc-text-brand-gray-700 cnc-header-item/50", children: userName })
           ] }),
-          /* @__PURE__ */ jsx18("div", { children: /* @__PURE__ */ jsx18("div", { className: "cnc-flex cnc-items-center cnc-justify-center cnc-w-10 cnc-h-10 cnc-rounded-full cnc-bg-brand-white cnc-text-brand-blue-900 cnc-text-sm cnc-font-normal cnc-border-solid cnc-border-2", children: initials }) })
+          /* @__PURE__ */ jsx18("div", { children: /* @__PURE__ */ jsx18("div", { className: "cnc-flex cnc-items-center cnc-justify-center cnc-w-10 cnc-h-10 cnc-rounded-full cnc-bg-brand-white cnc-text-brand-blue-900 cnc-text-sm cnc-font-normal cnc-border-solid cnc-border-2 cnc-header-item", children: initials }) })
         ] })
       }
     ) }),
@@ -8287,19 +8300,18 @@ var HeaderProfileItem = ({
 };
 var AplicationsHeader = ({ children }) => {
   return /* @__PURE__ */ jsx18(Fragment5, { children: /* @__PURE__ */ jsxs3(DropdownMenu2, { children: [
-    /* @__PURE__ */ jsx18(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx18("div", { className: "cnc-flex cnc-flex-row cnc-gap-2 cnc-items-center cnc-justify-center hover:cnc-bg-gray-100 cnc-transition cnc-duration-300 cnc-ease-in-out cnc-cursor-pointer cnc-px-4 cnc-py-2 cnc-rounded-lg", children: /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx18(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx18("div", { className: "cnc-flex cnc-flex-row cnc-gap-2 cnc-items-center cnc-justify-center hover:cnc-bg-gray-100 cnc-transition cnc-duration-300 cnc-ease-in-out cnc-cursor-pointer cnc-px-4 cnc-py-2 cnc-rounded-lg cnc-header-item", children: /* @__PURE__ */ jsx18(
       "svg",
       {
         width: "18",
         height: "18",
         viewBox: "0 0 16 16",
-        fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
+        className: "cnc-header-item",
         children: /* @__PURE__ */ jsx18(
           "path",
           {
-            d: "M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16ZM2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16ZM2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10ZM8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10ZM12 2C12 3.1 12.9 4 14 4C15.1 4 16 3.1 16 2C16 0.9 15.1 0 14 0C12.9 0 12 0.9 12 2ZM8 4C9.1 4 10 3.1 10 2C10 0.9 9.1 0 8 0C6.9 0 6 0.9 6 2C6 3.1 6.9 4 8 4ZM14 10C15.1 10 16 9.1 16 8C16 6.9 15.1 6 14 6C12.9 6 12 6.9 12 8C12 9.1 12.9 10 14 10ZM14 16C15.1 16 16 15.1 16 14C16 12.9 15.1 12 14 12C12.9 12 12 12.9 12 14C12 15.1 12.9 16 14 16Z",
-            fill: "black"
+            d: "M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16ZM2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16ZM2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10ZM8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10ZM12 2C12 3.1 12.9 4 14 4C15.1 4 16 3.1 16 2C16 0.9 15.1 0 14 0C12.9 0 12 0.9 12 2ZM8 4C9.1 4 10 3.1 10 2C10 0.9 9.1 0 8 0C6.9 0 6 0.9 6 2C6 3.1 6.9 4 8 4ZM14 10C15.1 10 16 9.1 16 8C16 6.9 15.1 6 14 6C12.9 6 12 6.9 12 8C12 9.1 12.9 10 14 10ZM14 16C15.1 16 16 15.1 16 14C16 12.9 15.1 12 14 12C12.9 12 12 12.9 12 14C12 15.1 12.9 16 14 16Z"
           }
         )
       }