@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/MacOSWindowSection-DqJp_sYV.js

@@ -0,0 +1,237 @@
+import { jsxs as r, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { H as h, C as i, a as t, br as a, x as o, P as m, A as g, c as f } from "../index-19KsCnyX.js";
+import { AppWindow as p } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+function u(l) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "relative rounded-xl bg-gray-100 dark:bg-gray-800/50 p-8",
+      style: { minHeight: 220 },
+      children: /* @__PURE__ */ e(a, { ...l, defaultWidth: l.defaultWidth ?? 380, children: /* @__PURE__ */ e("div", { className: "p-4 text-sm text-gray-700 dark:text-gray-300", children: "Interactive window — adjust props above." }) })
+    }
+  );
+}
+const W = () => {
+  const [l, n] = c(!0);
+  return /* @__PURE__ */ r(d, { children: [
+    /* @__PURE__ */ e(
+      h,
+      {
+        title: "Window",
+        description: "A macOS-style window container with vibrancy title bar, traffic-light buttons, drag & resize support, maximize/minimize states, and optional action slots.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-blue-500/50", children: /* @__PURE__ */ e(p, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+      t,
+      {
+        title: "Interactive — Drag, Resize, Maximize",
+        className: "mt-2 mb-2",
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: "relative w-full overflow-hidden",
+            style: { height: 400 },
+            children: /* @__PURE__ */ e(
+              a,
+              {
+                title: "Drag & Resize Me",
+                defaultWidth: 420,
+                defaultHeight: 220,
+                children: /* @__PURE__ */ r("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: [
+                  /* @__PURE__ */ e("p", { className: "mb-2 font-medium", children: "Try these interactions:" }),
+                  /* @__PURE__ */ r("ul", { className: "list-disc pl-5 space-y-1 text-[12px]", children: [
+                    /* @__PURE__ */ e("li", { children: "Drag the title bar to move the window" }),
+                    /* @__PURE__ */ e("li", { children: "Drag any edge or corner to resize" }),
+                    /* @__PURE__ */ e("li", { children: "Double-click the title bar to maximize" }),
+                    /* @__PURE__ */ e("li", { children: "Click the green traffic light to maximize/restore" }),
+                    /* @__PURE__ */ e("li", { children: "Click the yellow traffic light to restore default size" })
+                  ] })
+                ] })
+              }
+            )
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+      t,
+      {
+        title: "Traffic Lights — Left (default)",
+        className: "mt-2 mb-2",
+        children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+          a,
+          {
+            title: "My Application",
+            draggable: !1,
+            resizable: !1,
+            onClose: () => alert("close"),
+            children: /* @__PURE__ */ e("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: "Window content goes here. The title bar uses vibrancy material and the traffic lights appear on hover." })
+          }
+        ) })
+      }
+    ) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Traffic Lights — Right", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      a,
+      {
+        title: "Settings",
+        trafficLightsPosition: "right",
+        draggable: !1,
+        resizable: !1,
+        children: /* @__PURE__ */ e("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: "Traffic lights positioned on the right side of the title bar." })
+      }
+    ) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+      t,
+      {
+        title: "Without Traffic Lights + Custom Actions",
+        className: "mt-2 mb-2",
+        children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+          a,
+          {
+            title: "Document",
+            showTrafficLights: !1,
+            draggable: !1,
+            resizable: !1,
+            actions: /* @__PURE__ */ e(o, { size: "mini", shape: "rounded", color: "info", children: "Save" }),
+            children: /* @__PURE__ */ e("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: "Traffic lights hidden. A custom action button appears in the trailing slot." })
+          }
+        ) })
+      }
+    ) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Toggle Visibility", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full p-4 sm:p-6 space-y-4", children: [
+      /* @__PURE__ */ e(o, { onClick: () => n((s) => !s), children: l ? "Hide Window" : "Show Window" }),
+      l && /* @__PURE__ */ e(
+        a,
+        {
+          title: "Toggled Window",
+          draggable: !1,
+          resizable: !1,
+          onClose: () => n(!1),
+          children: /* @__PURE__ */ e("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: "Click the red traffic light or the button above to close." })
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ e(
+      m,
+      {
+        componentName: "MacOSWindow",
+        defaultValues: {
+          title: "My Window",
+          draggable: !0,
+          resizable: !0,
+          showTrafficLights: !0,
+          trafficLightsPosition: "left",
+          defaultWidth: 380,
+          defaultHeight: 200,
+          minWidth: 200,
+          minHeight: 120
+        },
+        controlOverrides: [
+          {
+            name: "title",
+            type: "text",
+            description: "Window title displayed in the title bar"
+          },
+          {
+            name: "draggable",
+            type: "boolean",
+            description: "Allow drag-moving by the title bar"
+          },
+          {
+            name: "resizable",
+            type: "boolean",
+            description: "Allow resizing from edges/corners"
+          },
+          {
+            name: "showTrafficLights",
+            type: "boolean",
+            description: "Show close/minimize/maximize buttons"
+          },
+          {
+            name: "trafficLightsPosition",
+            type: "select",
+            options: ["left", "right"],
+            description: "Position of traffic light buttons"
+          },
+          {
+            name: "defaultWidth",
+            type: "text",
+            description: "Initial width (px or CSS value)"
+          },
+          {
+            name: "defaultHeight",
+            type: "text",
+            description: "Initial height (px or CSS value)"
+          },
+          {
+            name: "minWidth",
+            type: "text",
+            description: "Minimum width in pixels"
+          },
+          {
+            name: "minHeight",
+            type: "text",
+            description: "Minimum height in pixels"
+          }
+        ],
+        includeProps: [
+          "title",
+          "draggable",
+          "resizable",
+          "showTrafficLights",
+          "trafficLightsPosition",
+          "defaultWidth",
+          "defaultHeight",
+          "minWidth",
+          "minHeight"
+        ],
+        excludeProps: [
+          "className",
+          "titleBarClassName",
+          "actions",
+          "onClose",
+          "onMinimize",
+          "onMaximize"
+        ],
+        children: (s) => /* @__PURE__ */ e(u, { ...s })
+      }
+    ),
+    /* @__PURE__ */ e(g, { componentName: "MacOSWindow" }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      f,
+      {
+        language: "tsx",
+        code: `import { MacOSWindow } from '@e-burgos/tucu-ui';
+
+// Interactive window — drag, resize, maximize
+<MacOSWindow
+  title="My Application"
+  defaultWidth={500}
+  defaultHeight={300}
+  minWidth={200}
+  minHeight={120}
+>
+  <div className="p-6">Drag, resize, or double-click title bar</div>
+</MacOSWindow>
+
+// Static window (no drag/resize)
+<MacOSWindow title="Static" draggable={false} resizable={false}>
+  <div className="p-6">Content</div>
+</MacOSWindow>
+
+// Traffic lights on the right
+<MacOSWindow title="Settings" trafficLightsPosition="right">
+  <div className="p-6">Content</div>
+</MacOSWindow>`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  W as MacOSWindowSection,
+  W as default
+};

package/documentation/{MenuItemsGuideSection-D8eRUuUw.js → MenuItemsGuideSection-B7BCFEzC.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-VrMogvDN.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>{const s=[{key:"property",label:"Property"},{key:"type",label:"Type"},{key:"required",label:"Required"},{key:"description",label:"Description"}],o=[{property:"name",type:"string",required:"Yes",description:"Display name of the menu item"},{property:"path",type:"string",required:"Yes",description:e.jsxs(e.Fragment,{children:[e.jsx("strong",{children:"Internal route path"})," for React Router navigation (e.g., ",e.jsx("code",{children:"/dashboard"}),"). Used for routing and active state detection."]})},{property:"href",type:"string?",required:"No",description:e.jsxs(e.Fragment,{children:[e.jsx("strong",{children:"External URL"})," for redirection (e.g.,"," ",e.jsx("code",{children:"https://example.com"}),"). If provided, clicking will redirect to this URL instead of using React Router. Falls back to"," ",e.jsx("code",{children:"path"})," if not provided."]})},{property:"component",type:"JSX.Element?",required:"No",description:e.jsxs(e.Fragment,{children:["React component to render when this route is active. Required for automatic routing. Not needed if using ",e.jsx("code",{children:"customRoutes"}),"."]})},{property:"icon",type:"React.ReactNode?",required:"No",description:"Icon element to display next to the menu item name (typically a Lucide icon)"},{property:"dropdownItems",type:"DropdownItemProps[]?",required:"No",description:"Array of sub-menu items for nested navigation. Creates a dropdown menu when provided."},{property:"isActive",type:"boolean?",required:"No",description:"Manually set active state. Usually handled automatically by matching the current pathname."},{property:"hide",type:"boolean?",required:"No",description:"Hide this menu item from navigation (useful for conditional rendering)"},{property:"onClick",type:"() => void?",required:"No",description:"Callback function executed when the menu item is clicked"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"MenuItems Guide"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Complete guide to configuring menu items for navigation and routing"})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"MenuItem Properties",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsx(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Each menu item is an object with the following properties:"}),e.jsx(t.BasicTable,{columns:s.map(i=>({...i,render:(n,c)=>i.key==="property"?e.jsx("code",{className:"text-xs text-brand",children:String(n??"")}):i.key==="type"?e.jsx("code",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(n??"")}):i.key==="required"?e.jsx(t.Badge,{variant:"outline",className:`text-xs ${n==="Yes"?"":"bg-gray-200"}`,children:String(n??"")}):i.key==="description"?e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:n}):String(n??"")})),data:o,containerClassName:"mb-4"}),e.jsx(t.Alert,{variant:"info",children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[e.jsx(a.Info,{className:"h-4 w-4"}),"Important: path vs href"]}),e.jsxs("div",{className:"text-sm mt-1",children:[e.jsx("strong",{children:"path"})," is used for internal React Router navigation and active state detection. ",e.jsx("strong",{children:"href"})," ","is for external URLs (starts with ",e.jsx("code",{children:"http://"})," or"," ",e.jsx("code",{children:"https://"}),"). If both are provided,"," ",e.jsx("code",{children:"href"})," takes precedence for navigation, but"," ",e.jsx("code",{children:"path"})," is still used for active state matching."]})]})})]})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"MenuItems Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"1. Simple Menu Item"}),e.jsx(t.CodeBlock,{language:"tsx",code:`const menuItems = [
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>{const s=[{key:"property",label:"Property"},{key:"type",label:"Type"},{key:"required",label:"Required"},{key:"description",label:"Description"}],r=[{property:"name",type:"string",required:"Yes",description:"Display name of the menu item"},{property:"path",type:"string",required:"Yes",description:e.jsxs(e.Fragment,{children:[e.jsx("strong",{children:"Internal route path"})," for React Router navigation (e.g., ",e.jsx("code",{children:"/dashboard"}),"). Used for routing and active state detection."]})},{property:"href",type:"string?",required:"No",description:e.jsxs(e.Fragment,{children:[e.jsx("strong",{children:"External URL"})," for redirection (e.g.,"," ",e.jsx("code",{children:"https://example.com"}),"). If provided, clicking will redirect to this URL instead of using React Router. Falls back to"," ",e.jsx("code",{children:"path"})," if not provided."]})},{property:"component",type:"JSX.Element?",required:"No",description:e.jsxs(e.Fragment,{children:["React component to render when this route is active. Required for automatic routing. Not needed if using ",e.jsx("code",{children:"customRoutes"}),"."]})},{property:"icon",type:"React.ReactNode?",required:"No",description:"Icon element to display next to the menu item name (typically a Lucide icon)"},{property:"dropdownItems",type:"DropdownItemProps[]?",required:"No",description:"Array of sub-menu items for nested navigation. Creates a dropdown menu when provided."},{property:"isActive",type:"boolean?",required:"No",description:"Manually set active state. Usually handled automatically by matching the current pathname."},{property:"hide",type:"boolean?",required:"No",description:"Hide this menu item from navigation (useful for conditional rendering)"},{property:"onClick",type:"() => void?",required:"No",description:"Callback function executed when the menu item is clicked"},{property:"isPublic",type:"boolean?",required:"No",description:e.jsx(e.Fragment,{children:"Marks the route as publicly accessible (no authentication required). Only used in standalone routing mode."})},{property:"enableNestedRoutes",type:"boolean?",required:"No",description:e.jsxs(e.Fragment,{children:["When ",e.jsx("code",{children:"true"}),", appends ",e.jsx("code",{children:"/*"})," to the route path so the page can handle internal sub-routes. Only used in standalone routing mode."]})}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"MenuItems Guide",description:"Complete guide to configuring menu items for navigation and routing in your application.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Menu,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"MenuItems Guide"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Complete guide to configuring menu items for navigation and routing"})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"MenuItem Properties",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsx(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Each menu item is an object with the following properties:"}),e.jsx(t.BasicTable,{columns:s.map(i=>({...i,render:(n,d)=>i.key==="property"?e.jsx("code",{className:"text-xs text-brand",children:String(n??"")}):i.key==="type"?e.jsx("code",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(n??"")}):i.key==="required"?e.jsx(t.Badge,{variant:"outline",className:`text-xs ${n==="Yes"?"":"bg-gray-200"}`,children:String(n??"")}):i.key==="description"?e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:n}):String(n??"")})),data:r,containerClassName:"mb-4"}),e.jsx(t.Alert,{variant:"info",children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[e.jsx(o.Info,{className:"h-4 w-4"}),"Important: path vs href"]}),e.jsxs("div",{className:"text-sm mt-1",children:[e.jsx("strong",{children:"path"})," is used for internal React Router navigation and active state detection. ",e.jsx("strong",{children:"href"})," ","is for external URLs (starts with ",e.jsx("code",{children:"http://"})," or"," ",e.jsx("code",{children:"https://"}),"). If both are provided,"," ",e.jsx("code",{children:"href"})," takes precedence for navigation, but"," ",e.jsx("code",{children:"path"})," is still used for active state matching."]})]})})]})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"MenuItems Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"1. Simple Menu Item"}),e.jsx(t.CodeBlock,{language:"tsx",code:`const menuItems = [
   {
     name: 'Dashboard',
     path: '/dashboard',
@@ -123,4 +123,4 @@ function App() {
   return (
     <ThemeProvider menuItems={menuItems} layout={LAYOUT_OPTIONS.ADMIN} />
   );
-}`})]})]})})})})]})};exports.default=r;
+}`})]})]})})})})]})};exports.default=a;

package/documentation/{MenuItemsGuideSection-ChPa1HVx.js → MenuItemsGuideSection-DGwGu1eO.js}

@@ -1,11 +1,11 @@
-import { jsxs as t, Fragment as r, jsx as e } from "react/jsx-runtime";
-import { T as n, C as s, a as c, q as l, J as p, ag as h, c as a } from "../index-D3gBsvbO.js";
-import { Info as u } from "lucide-react";
+import { jsxs as t, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { H as l, T as n, C as s, a as d, y as p, K as h, aj as u, c as r } from "../index-19KsCnyX.js";
+import { Menu as g, Info as y } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const v = () => {
-  const d = [
+const k = () => {
+  const c = [
     { key: "property", label: "Property" },
     { key: "type", label: "Type" },
     { key: "required", label: "Required" },
@@ -21,7 +21,7 @@ const v = () => {
       property: "path",
       type: "string",
       required: "Yes",
-      description: /* @__PURE__ */ t(r, { children: [
+      description: /* @__PURE__ */ t(o, { children: [
         /* @__PURE__ */ e("strong", { children: "Internal route path" }),
         " for React Router navigation (e.g., ",
         /* @__PURE__ */ e("code", { children: "/dashboard" }),
@@ -32,7 +32,7 @@ const v = () => {
       property: "href",
       type: "string?",
       required: "No",
-      description: /* @__PURE__ */ t(r, { children: [
+      description: /* @__PURE__ */ t(o, { children: [
         /* @__PURE__ */ e("strong", { children: "External URL" }),
         " for redirection (e.g.,",
         " ",
@@ -47,7 +47,7 @@ const v = () => {
       property: "component",
       type: "JSX.Element?",
       required: "No",
-      description: /* @__PURE__ */ t(r, { children: [
+      description: /* @__PURE__ */ t(o, { children: [
         "React component to render when this route is active. Required for automatic routing. Not needed if using ",
         /* @__PURE__ */ e("code", { children: "customRoutes" }),
         "."
@@ -82,43 +82,69 @@ const v = () => {
       type: "() => void?",
       required: "No",
       description: "Callback function executed when the menu item is clicked"
+    },
+    {
+      property: "isPublic",
+      type: "boolean?",
+      required: "No",
+      description: /* @__PURE__ */ e(o, { children: "Marks the route as publicly accessible (no authentication required). Only used in standalone routing mode." })
+    },
+    {
+      property: "enableNestedRoutes",
+      type: "boolean?",
+      required: "No",
+      description: /* @__PURE__ */ t(o, { children: [
+        "When ",
+        /* @__PURE__ */ e("code", { children: "true" }),
+        ", appends ",
+        /* @__PURE__ */ e("code", { children: "/*" }),
+        " to the route path so the page can handle internal sub-routes. Only used in standalone routing mode."
+      ] })
     }
   ];
-  return /* @__PURE__ */ t(r, { children: [
-    /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(n, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "MenuItems Guide" }),
+  return /* @__PURE__ */ t(o, { children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        title: "MenuItems Guide",
+        description: "Complete guide to configuring menu items for navigation and routing in your application.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(g, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(n, { tag: "h2", className: "mb-2", children: "MenuItems Guide" }),
       /* @__PURE__ */ e(
         n,
         {
           tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
           children: "Complete guide to configuring menu items for navigation and routing"
         }
       )
     ] }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "MenuItem Properties", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "MenuItem Properties", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
       /* @__PURE__ */ e(n, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Each menu item is an object with the following properties:" }),
       /* @__PURE__ */ e(
-        l,
+        p,
         {
-          columns: d.map((o) => ({
-            ...o,
-            render: (i, g) => o.key === "property" ? /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i ?? "") }) : o.key === "type" ? /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(i ?? "") }) : o.key === "required" ? /* @__PURE__ */ e(
-              p,
+          columns: c.map((a) => ({
+            ...a,
+            render: (i, f) => a.key === "property" ? /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i ?? "") }) : a.key === "type" ? /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(i ?? "") }) : a.key === "required" ? /* @__PURE__ */ e(
+              h,
               {
                 variant: "outline",
                 className: `text-xs ${i === "Yes" ? "" : "bg-gray-200"}`,
                 children: String(i ?? "")
               }
-            ) : o.key === "description" ? /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: i }) : String(i ?? "")
+            ) : a.key === "description" ? /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: i }) : String(i ?? "")
           })),
           data: m,
           containerClassName: "mb-4"
         }
       ),
-      /* @__PURE__ */ e(h, { variant: "info", children: /* @__PURE__ */ t("div", { children: [
+      /* @__PURE__ */ e(u, { variant: "info", children: /* @__PURE__ */ t("div", { children: [
         /* @__PURE__ */ t("div", { className: "flex items-center gap-2 font-semibold", children: [
-          /* @__PURE__ */ e(u, { className: "h-4 w-4" }),
+          /* @__PURE__ */ e(y, { className: "h-4 w-4" }),
           "Important: path vs href"
         ] }),
         /* @__PURE__ */ t("div", { className: "text-sm mt-1", children: [
@@ -141,11 +167,11 @@ const v = () => {
         ] })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "MenuItems Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "MenuItems Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-6", children: [
       /* @__PURE__ */ t("div", { className: "space-y-3", children: [
         /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "1. Simple Menu Item" }),
         /* @__PURE__ */ e(
-          a,
+          r,
           {
             language: "tsx",
             code: `const menuItems = [
@@ -162,7 +188,7 @@ const v = () => {
       /* @__PURE__ */ t("div", { className: "space-y-3", children: [
         /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "2. Menu Item with External Link" }),
         /* @__PURE__ */ e(
-          a,
+          r,
           {
             language: "tsx",
             code: `const menuItems = [
@@ -180,7 +206,7 @@ const v = () => {
       /* @__PURE__ */ t("div", { className: "space-y-3", children: [
         /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "3. Menu Item with Dropdown" }),
         /* @__PURE__ */ e(
-          a,
+          r,
           {
             language: "tsx",
             code: `const menuItems = [
@@ -211,7 +237,7 @@ const v = () => {
       /* @__PURE__ */ t("div", { className: "space-y-3", children: [
         /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "4. Complete Example with All Features" }),
         /* @__PURE__ */ e(
-          a,
+          r,
           {
             language: "tsx",
             code: `import { LucideIcons } from '@ui/tucu-ui';
@@ -279,7 +305,7 @@ function App() {
       /* @__PURE__ */ t("div", { className: "space-y-3", children: [
         /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "5. Conditional Menu Items" }),
         /* @__PURE__ */ e(
-          a,
+          r,
           {
             language: "tsx",
             code: `import { useAuth } from './hooks/useAuth';
@@ -321,5 +347,5 @@ function App() {
   ] });
 };
 export {
-  v as default
+  k as default
 };

package/documentation/ModalSection-BAl0KIk0.js

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),t=require("../index-DMs_SmPq.js"),c=require("lucide-react");require("react-router-dom");require("react-dom");const m=()=>{const[a,n]=s.useState(!1),[l,o]=s.useState(!1),[i,r]=s.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Modal",description:`A modal dialog component for displaying content in an overlay with
+          customizable buttons and close functionality.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-amber-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(c.Maximize2,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Basic Modal"}),e.jsx(t.Button,{onClick:()=>n(!0),children:"Open Modal"}),e.jsx(t.Modal,{isOpen:a,setIsOpen:n,text:{title:"Modal Title",content:"This is the modal content.",button:"Confirm"}})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Modal with Custom Content"}),e.jsx(t.Button,{onClick:()=>o(!0),children:"Open Custom Modal"}),e.jsx(t.Modal,{isOpen:l,setIsOpen:o,text:{title:"Custom Modal"},children:e.jsx(t.Typography,{tag:"p",children:"Custom content goes here"})})]})]})})})}),e.jsx(t.PropPlayground,{componentName:"Modal",defaultValues:{isOpen:i,setIsOpen:r,closeable:!0,hideButtons:!1},excludeProps:["setIsOpen","onBack","onClose","onSubmit"],children:d=>e.jsx(t.Modal,{...d,text:{title:"Modal Preview",content:"This is a preview of the modal component."},children:e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Modal body content"})})}),e.jsx(t.AutoPropsTable,{componentName:"Modal"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { Modal, Button } from '@e-burgos/tucu-ui';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+      <Modal
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        text={{
+          title: 'Modal Title',
+          content: 'This is the modal content.',
+          button: 'Confirm',
+        }}
+      />
+    </>
+  );
+}
+
+// With custom content
+<Modal isOpen={isOpen} setIsOpen={setIsOpen} text={{ title: 'Custom Modal' }}>
+  <div>Custom content here</div>
+</Modal>
+
+// Non-closeable
+<Modal isOpen={isOpen} setIsOpen={setIsOpen} closeable={false} />`})})})})]})};exports.default=m;

package/documentation/{ModalSection-Df8_-5Mu.js → ModalSection-BVVp2SX8.js}

@@ -1,32 +1,30 @@
-import { jsxs as o, Fragment as r, jsx as e } from "react/jsx-runtime";
-import { useState as m } from "react";
-import { T as a, C as s, a as i, y as c, a2 as l, P as p, A as u, c as h } from "../index-D3gBsvbO.js";
-import "lucide-react";
+import { jsxs as t, Fragment as f, jsx as e } from "react/jsx-runtime";
+import { useState as o } from "react";
+import { H as O, C as s, a as d, T as n, x as r, a3 as a, P as M, A as C, c as x } from "../index-19KsCnyX.js";
+import { Maximize2 as b } from "lucide-react";
 import "react-router-dom";
 import "react-dom";
-const N = () => {
-  const [n, t] = m(!1);
-  return /* @__PURE__ */ o(r, { children: [
-    /* @__PURE__ */ o("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Modal" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "A modal dialog component for displaying content in an overlay with customizable buttons and close functionality."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ o(s, { className: "p-4", children: [
-        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Basic Modal" }),
-        /* @__PURE__ */ e(c, { onClick: () => t(!0), children: "Open Modal" }),
+const B = () => {
+  const [c, l] = o(!1), [m, i] = o(!1), [p, h] = o(!1);
+  return /* @__PURE__ */ t(f, { children: [
+    /* @__PURE__ */ e(
+      O,
+      {
+        title: "Modal",
+        description: `A modal dialog component for displaying content in an overlay with
+          customizable buttons and close functionality.`,
+        icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-amber-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(b, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ t(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Basic Modal" }),
+        /* @__PURE__ */ e(r, { onClick: () => l(!0), children: "Open Modal" }),
         /* @__PURE__ */ e(
-          l,
+          a,
           {
-            isOpen: n,
-            setIsOpen: t,
+            isOpen: c,
+            setIsOpen: l,
             text: {
               title: "Modal Title",
               content: "This is the modal content.",
@@ -35,35 +33,35 @@ const N = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ o(s, { className: "p-4", children: [
-        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Modal with Custom Content" }),
-        /* @__PURE__ */ e(c, { onClick: () => t(!0), children: "Open Custom Modal" }),
+      /* @__PURE__ */ t(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Modal with Custom Content" }),
+        /* @__PURE__ */ e(r, { onClick: () => i(!0), children: "Open Custom Modal" }),
         /* @__PURE__ */ e(
-          l,
+          a,
           {
-            isOpen: n,
-            setIsOpen: t,
+            isOpen: m,
+            setIsOpen: i,
             text: { title: "Custom Modal" },
-            children: /* @__PURE__ */ e(a, { tag: "p", children: "Custom content goes here" })
+            children: /* @__PURE__ */ e(n, { tag: "p", children: "Custom content goes here" })
           }
         )
       ] })
     ] }) }) }) }),
     /* @__PURE__ */ e(
-      p,
+      M,
       {
         componentName: "Modal",
         defaultValues: {
-          isOpen: n,
-          setIsOpen: t,
+          isOpen: p,
+          setIsOpen: h,
           closeable: !0,
           hideButtons: !1
         },
         excludeProps: ["setIsOpen", "onBack", "onClose", "onSubmit"],
-        children: (d) => /* @__PURE__ */ e(
-          l,
+        children: (u) => /* @__PURE__ */ e(
+          a,
           {
-            ...d,
+            ...u,
             text: {
               title: "Modal Preview",
               content: "This is a preview of the modal component."
@@ -73,9 +71,9 @@ const N = () => {
         )
       }
     ),
-    /* @__PURE__ */ e(u, { componentName: "Modal" }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      h,
+    /* @__PURE__ */ e(C, { componentName: "Modal" }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      x,
       {
         language: "tsx",
         code: `import { Modal, Button } from '@e-burgos/tucu-ui';
@@ -112,5 +110,5 @@ function MyComponent() {
   ] });
 };
 export {
-  N as default
+  B as default
 };