@cnc-ti/layout-basic 8.2.0 → 8.2.2

package/dist/index.js

@@ -8293,35 +8293,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__ */ (0, import_jsx_runtime18.jsx)(
     "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__ */ (0, import_jsx_runtime18.jsx)("a", { href: logoLink, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src: logo, alt: "Logotipo", className: "cnc-h-8" }) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src: logo, alt: "Logotipo", className: "cnc-h-8" });
+    }
+    return null;
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "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__ */ (0, import_jsx_runtime18.jsx)("div", { children: onOpenMenu && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { onClick: onOpenMenu, className: "hover:cnc-brightness-75 cnc-sidebar-child-hidden cnc-cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("path", { fill: "none", strokeLinecap: "round", strokeMiterlimit: "10", strokeWidth: "48", d: "M88 152h336M88 256h336M88 360h336" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cnc-flex cnc-items-center", children: onOpenMenu && !isOpen && hasSidebar ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { onClick: onOpenMenu, className: "hover:cnc-brightness-75 cnc-sidebar-child-hidden cnc-cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("path", { fill: "none", strokeLinecap: "round", strokeMiterlimit: "10", strokeWidth: "48", d: "M88 152h336M88 256h336M88 360h336" }) }) }) : !hasSidebar && renderLogo() }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cnc-flex", children })
       ]
     }
@@ -8338,13 +8351,13 @@ var HeaderProfileHeader = ({
       "div",
       {
         id: "cnc-border-lateral",
-        className: "cnc-border-solid cnc-border-l-2 cnc-border-brand-blue-60",
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("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__ */ (0, import_jsx_runtime18.jsxs)("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__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "cnc-flex cnc-flex-col cnc-justify-end cnc-text-end", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "cnc-text-xs cnc-font-extrabold cnc-text-brand-blue-900", children: entityName }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "cnc-text-xs cnc-font-normal cnc-text-brand-gray-700", children: userName })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "cnc-text-xs cnc-font-extrabold cnc-text-brand-blue-900 cnc-header-item", children: entityName }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "cnc-text-xs cnc-font-normal cnc-text-brand-gray-700 cnc-header-item/50", children: userName })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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 }) })
         ] })
       }
     ) }),
@@ -8363,19 +8376,18 @@ var HeaderProfileItem = ({
 };
 var AplicationsHeader = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownMenu2, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)(
       "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__ */ (0, import_jsx_runtime18.jsx)(
           "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"
           }
         )
       }
@@ -8715,14 +8727,14 @@ var DialogContent2 = React37.forwardRef(({ className, children, ...props }, ref)
     {
       ref,
       className: cn(
-        "cnc-fixed cnc-left-[50%] cnc-top-[50%] cnc-z-50 cnc-grid cnc-w-full cnc-max-w-lg cnc-translate-x-[-50%] cnc-translate-y-[-50%] cnc-gap-4 cnc-border cnc-bg-background cnc-p-6 cnc-shadow-lg cnc-duration-200 data-[state=open]:cnc-animate-in data-[state=closed]:cnc-animate-out data-[state=closed]:cnc-fade-out-0 data-[state=open]:cnc-fade-in-0 data-[state=closed]:cnc-zoom-out-95 data-[state=open]:cnc-zoom-in-95 data-[state=closed]:cnc-slide-out-to-left-1/2 data-[state=closed]:cnc-slide-out-to-top-[48%] data-[state=open]:cnc-slide-in-from-left-1/2 data-[state=open]:cnc-slide-in-from-top-[48%] cnc-sm:rounded-lg",
+        "cnc-fixed cnc-left-[50%] cnc-top-[50%] cnc-z-50 cnc-grid cnc-w-full cnc-max-w-[42rem] cnc-translate-x-[-50%] cnc-translate-y-[-50%] cnc-gap-4 cnc-border cnc-bg-background cnc-p-6 cnc-pt-4 cnc-shadow-lg cnc-duration-200 data-[state=open]:cnc-animate-in data-[state=closed]:cnc-animate-out data-[state=closed]:cnc-fade-out-0 data-[state=open]:cnc-fade-in-0 data-[state=closed]:cnc-zoom-out-95 data-[state=open]:cnc-zoom-in-95 data-[state=closed]:cnc-slide-out-to-left-1/2 data-[state=closed]:cnc-slide-out-to-top-[48%] data-[state=open]:cnc-slide-in-from-left-1/2 data-[state=open]:cnc-slide-in-from-top-[48%] cnc-sm:rounded-lg",
         className
       ),
       ...props,
       children: [
         children,
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Close, { className: "cnc-absolute cnc-right-4 cnc-top-4 cnc-rounded-sm cnc-opacity-70 cnc-ring-offset-background cnc-transition-opacity hover:cnc-opacity-100 focus:cnc-outline-none focus:cnc-ring-2 focus:cnc-ring-ring focus:cnc-ring-offset-2 disabled:cnc-pointer-events-none data-[state=open]:cnc-bg-accent data-[state=open]:cnc-text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(X, { className: "cnc-h-4 cnc-w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(X, { className: "cnc-h-4 cnc-w-4 cnc-mt-2" }),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "cnc-sr-only", children: "Close" })
         ] })
       ]
@@ -8763,7 +8775,7 @@ var DialogTitle2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "cnc-text-lg cnc-leading-none cnc-tracking-tight cnc-text-red-500",
+      "cnc-text-lg cnc-font-semibold cnc-leading-none cnc-tracking-tight",
       className
     ),
     ...props
@@ -8790,9 +8802,9 @@ var Modal = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Dialog2, { open: visibleModal, onOpenChange: onClose, children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogOverlay2, { className: "cnc-inset-0 cnc-bg-blackA6= data-[state=open]:cnc-animate-overlayShow" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogContent2, { className: "  cnc-max-h-[85vh] cnc-w-[90vw] cnc-max-w-[40.625rem] cnc-p-0 cnc-rounded-sm cnc-bg-white  cnc-focus:outline-none data-[state=open]:cnc-animate-contentShow", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogHeader, { className: "cnc-text-sm cnc-h-14 cnc-text-gray-500 cnc-font-thin cnc-border-b cnc-w-full cnc-px-6 cnc-py-3 cnc-leading-10", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "cnc-flex cnc-flex-col cnc-mb-10 cnc-ml-20 cnc-align-middle cnc-items-left  cnc-justify-center", children: content })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogContent2, { className: "cnc-max-h-[100vh]  cnc-p-0 cnc-rounded-sm cnc-bg-white  cnc-focus:outline-none data-[state=open]:cnc-animate-contentShow", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogHeader, { className: "cnc-text-sm cnc-h-14 cnc-text-black cnc-font- cnc-border-b cnc-w-full  cnc-leading-10", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "cnc-flex cnc-flex-col cnc-mb-16 cnc-mx-20 cnc-align-middle cnc-items-left  cnc-justify-center", children: content })
     ] })
   ] });
 };