@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/KeyboardNavigationSection-BcQUUxeW.js

@@ -0,0 +1,130 @@
+import { jsxs as t, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { H as c, T as a, C as l, c as d } from "../index-lfg6LZ1p.js";
+import { Keyboard as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const k = () => /* @__PURE__ */ t(i, { children: [
+  /* @__PURE__ */ e(
+    c,
+    {
+      title: "Keyboard Navigation",
+      description: "Every interactive component supports full keyboard operation. Users can navigate, activate, and dismiss elements without a mouse.",
+      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-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { 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("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Keyboard Shortcuts" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Keyboard mappings for each component category"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
+      {
+        category: "General",
+        items: [
+          { key: "Tab", action: "Move focus to next interactive element" },
+          { key: "Shift + Tab", action: "Move focus to previous element" },
+          { key: "Enter / Space", action: "Activate focused button or link" },
+          { key: "Escape", action: "Close Modal, Drawer, Select dropdown" }
+        ]
+      },
+      {
+        category: "Tabs Component",
+        items: [
+          { key: "ArrowRight", action: "Focus next tab" },
+          { key: "ArrowLeft", action: "Focus previous tab" },
+          { key: "Home", action: "Focus first tab" },
+          { key: "End", action: "Focus last tab" }
+        ]
+      },
+      {
+        category: "Select / Dropdown",
+        items: [
+          { key: "ArrowDown", action: "Open dropdown / highlight next option" },
+          { key: "ArrowUp", action: "Highlight previous option" },
+          { key: "Enter / Space", action: "Select highlighted option" },
+          { key: "Escape", action: "Close dropdown, restore focus to trigger" }
+        ]
+      },
+      {
+        category: "Modal & Drawer",
+        items: [
+          { key: "Escape", action: "Close the dialog" },
+          { key: "Tab (Drawer)", action: "Cycles within focus trap" },
+          { key: "Shift+Tab (Drawer)", action: "Reverse cycle within trap" },
+          { key: "Tab (Modal)", action: "Standard focus movement (no trap)" }
+        ]
+      }
+    ].map((o, s) => /* @__PURE__ */ e(l, { children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
+      /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold text-lg", children: o.category }),
+      /* @__PURE__ */ e("div", { className: "space-y-2", children: o.items.map((r, n) => /* @__PURE__ */ t(
+        "div",
+        {
+          className: "flex items-center justify-between gap-2 py-1 border-b border-gray-100 dark:border-gray-800 last:border-0",
+          children: [
+            /* @__PURE__ */ e("code", { className: "text-xs sm:text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded font-mono whitespace-nowrap", children: r.key }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                tag: "span",
+                className: "text-sm text-gray-600 dark:text-gray-400 text-right",
+                children: r.action
+              }
+            )
+          ]
+        },
+        n
+      )) })
+    ] }) }, s)) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Usage Examples" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Components that respond to keyboard interactions"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(d, { language: "tsx", code: `// Button keyboard interaction
+<Button onClick={handleAction} aria-label="Submit form">
+  Submit
+</Button>
+// Enter or Space activates, Tab navigates
+
+// Select keyboard interaction
+<Select
+  options={options}
+  value={selected}
+  onSelect={handleSelect}
+  label="Choose option"
+/>
+// ArrowDown opens, Arrow keys navigate, Enter selects, Escape closes
+
+// Tabs keyboard interaction
+<TabGroup defaultIndex={0}>
+  <TabList>
+    <TabItem>Tab 1</TabItem>
+    <TabItem>Tab 2</TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Content 1</TabPanel>
+    <TabPanel>Content 2</TabPanel>
+  </TabPanels>
+</TabGroup>
+// ArrowRight/Left cycles tabs, Home/End jumps to first/last` })
+  ] })
+] });
+export {
+  k as default
+};

package/documentation/KeyboardNavigationSection-BgP2RBJx.js

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const s=[{category:"General",items:[{key:"Tab",action:"Move focus to next interactive element"},{key:"Shift + Tab",action:"Move focus to previous element"},{key:"Enter / Space",action:"Activate focused button or link"},{key:"Escape",action:"Close Modal, Drawer, Select dropdown"}]},{category:"Tabs Component",items:[{key:"ArrowRight",action:"Focus next tab"},{key:"ArrowLeft",action:"Focus previous tab"},{key:"Home",action:"Focus first tab"},{key:"End",action:"Focus last tab"}]},{category:"Select / Dropdown",items:[{key:"ArrowDown",action:"Open dropdown / highlight next option"},{key:"ArrowUp",action:"Highlight previous option"},{key:"Enter / Space",action:"Select highlighted option"},{key:"Escape",action:"Close dropdown, restore focus to trigger"}]},{category:"Modal & Drawer",items:[{key:"Escape",action:"Close the dialog"},{key:"Tab (Drawer)",action:"Cycles within focus trap"},{key:"Shift+Tab (Drawer)",action:"Reverse cycle within trap"},{key:"Tab (Modal)",action:"Standard focus movement (no trap)"}]}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Keyboard Navigation",description:"Every interactive component supports full keyboard operation. Users can navigate, activate, and dismiss elements without a mouse.",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-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(i.Keyboard,{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("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Keyboard Shortcuts"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Keyboard mappings for each component category"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:s.map((a,r)=>e.jsx(t.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg",children:a.category}),e.jsx("div",{className:"space-y-2",children:a.items.map((o,n)=>e.jsxs("div",{className:"flex items-center justify-between gap-2 py-1 border-b border-gray-100 dark:border-gray-800 last:border-0",children:[e.jsx("code",{className:"text-xs sm:text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded font-mono whitespace-nowrap",children:o.key}),e.jsx(t.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400 text-right",children:o.action})]},n))})]})},r))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Usage Examples"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Components that respond to keyboard interactions"})]}),e.jsx(t.CodeBlock,{language:"tsx",code:`// Button keyboard interaction
+<Button onClick={handleAction} aria-label="Submit form">
+  Submit
+</Button>
+// Enter or Space activates, Tab navigates
+
+// Select keyboard interaction
+<Select
+  options={options}
+  value={selected}
+  onSelect={handleSelect}
+  label="Choose option"
+/>
+// ArrowDown opens, Arrow keys navigate, Enter selects, Escape closes
+
+// Tabs keyboard interaction
+<TabGroup defaultIndex={0}>
+  <TabList>
+    <TabItem>Tab 1</TabItem>
+    <TabItem>Tab 2</TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Content 1</TabPanel>
+    <TabPanel>Content 2</TabPanel>
+  </TabPanels>
+</TabGroup>
+// ArrowRight/Left cycles tabs, Home/End jumps to first/last`})]})]})};exports.default=c;

package/documentation/LayoutPrinciplesSection-CZE5j4TD.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const l=[{name:"xs",value:"480px",description:"Extra small devices"},{name:"sm",value:"640px",description:"Small devices (landscape phones)"},{name:"md",value:"768px",description:"Medium devices (tablets)"},{name:"lg",value:"1024px",description:"Large devices (desktops)"},{name:"xl",value:"1280px",description:"Extra large devices"},{name:"2xl",value:"1440px",description:"2X large screens"},{name:"3xl",value:"1780px",description:"3X large screens"},{name:"4xl",value:"2160px",description:"4X large screens (4K UHD)"}],d=[{name:"Base",value:"0",description:"Default layer for most elements"},{name:"Dropdown",value:"10",description:"Dropdown menus and popovers"},{name:"Sticky",value:"20",description:"Sticky positioned elements"},{name:"Fixed",value:"30",description:"Fixed positioned elements"},{name:"Modal Backdrop",value:"40",description:"Modal overlay backgrounds"},{name:"Modal",value:"50",description:"Modal dialogs and drawers"},{name:"Popover",value:"60",description:"Tooltips and popovers"},{name:"Toast",value:"70",description:"Toast notifications"},{name:"Tooltip",value:"80",description:"Tooltips (highest priority)"}];return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(s.HeroCard,{title:"Layout Principles",description:"Responsive design patterns and layout guidelines for consistent experiences.",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-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(i.Layout,{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:"space-y-8",children:[e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Responsive Breakpoints",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-indigo-500 via-purple-500 to-violet-500 shadow-md",children:e.jsx(i.Layout,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Responsive Breakpoints"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:l.map(a=>e.jsx("div",{className:"space-y-3 p-4 bg-muted/20 rounded-lg border border-gray-200 dark:border-gray-700",children:e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Badge,{variant:"outline",className:"font-mono",children:a.name}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:a.description})]}),e.jsx("div",{className:"space-y-1",children:e.jsxs(s.Typography,{tag:"h4",className:"text-muted text-sm font-semibold",children:["Min-width: ",a.value]})})]})},a.name))})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Z-Index Scale",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-cyan-500 via-teal-500 to-blue-500 shadow-md",children:e.jsx(i.Layers3,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Z-Index Scale"})]}),e.jsx("div",{className:"space-y-2",children:d.map(a=>e.jsx("div",{className:"flex items-center justify-between p-3 bg-muted/20 rounded",children:e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(s.Badge,{variant:"outline",className:"font-mono w-12 justify-center",children:a.value}),e.jsxs("div",{children:[e.jsx("div",{className:"font-semibold",children:a.name}),e.jsx("div",{className:"text-sm text-muted-foreground",children:a.description})]})]})},a.name))})]})})})]})]})};exports.default=n;

package/documentation/LayoutPrinciplesSection-DZgjhU-5.js

@@ -0,0 +1,148 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { H as c, C as l, a as d, T as i, K as n } from "../index-lfg6LZ1p.js";
+import { Layout as t, Layers3 as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const f = () => {
+  const r = [
+    {
+      name: "xs",
+      value: "480px",
+      description: "Extra small devices"
+    },
+    {
+      name: "sm",
+      value: "640px",
+      description: "Small devices (landscape phones)"
+    },
+    {
+      name: "md",
+      value: "768px",
+      description: "Medium devices (tablets)"
+    },
+    {
+      name: "lg",
+      value: "1024px",
+      description: "Large devices (desktops)"
+    },
+    {
+      name: "xl",
+      value: "1280px",
+      description: "Extra large devices"
+    },
+    {
+      name: "2xl",
+      value: "1440px",
+      description: "2X large screens"
+    },
+    {
+      name: "3xl",
+      value: "1780px",
+      description: "3X large screens"
+    },
+    {
+      name: "4xl",
+      value: "2160px",
+      description: "4X large screens (4K UHD)"
+    }
+  ], o = [
+    {
+      name: "Base",
+      value: "0",
+      description: "Default layer for most elements"
+    },
+    {
+      name: "Dropdown",
+      value: "10",
+      description: "Dropdown menus and popovers"
+    },
+    { name: "Sticky", value: "20", description: "Sticky positioned elements" },
+    { name: "Fixed", value: "30", description: "Fixed positioned elements" },
+    {
+      name: "Modal Backdrop",
+      value: "40",
+      description: "Modal overlay backgrounds"
+    },
+    { name: "Modal", value: "50", description: "Modal dialogs and drawers" },
+    { name: "Popover", value: "60", description: "Tooltips and popovers" },
+    { name: "Toast", value: "70", description: "Toast notifications" },
+    {
+      name: "Tooltip",
+      value: "80",
+      description: "Tooltips (highest priority)"
+    }
+  ];
+  return /* @__PURE__ */ a("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
+    /* @__PURE__ */ e(
+      c,
+      {
+        title: "Layout Principles",
+        description: "Responsive design patterns and layout guidelines for consistent experiences.",
+        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-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(t, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Responsive Breakpoints", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-indigo-500 via-purple-500 to-violet-500 shadow-md", children: /* @__PURE__ */ e(t, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(i, { tag: "h3", className: "text-base font-semibold", children: "Responsive Breakpoints" })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: r.map((s) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: "space-y-3 p-4 bg-muted/20 rounded-lg border border-gray-200 dark:border-gray-700",
+            children: /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(n, { variant: "outline", className: "font-mono", children: s.name }),
+                /* @__PURE__ */ e(i, { tag: "h3", className: "font-semibold", children: s.description })
+              ] }),
+              /* @__PURE__ */ e("div", { className: "space-y-1", children: /* @__PURE__ */ a(
+                i,
+                {
+                  tag: "h4",
+                  className: "text-muted text-sm font-semibold",
+                  children: [
+                    "Min-width: ",
+                    s.value
+                  ]
+                }
+              ) })
+            ] })
+          },
+          s.name
+        )) })
+      ] }) }) }),
+      /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Z-Index Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-cyan-500 via-teal-500 to-blue-500 shadow-md", children: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(i, { tag: "h3", className: "text-base font-semibold", children: "Z-Index Scale" })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "space-y-2", children: o.map((s) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: "flex items-center justify-between p-3 bg-muted/20 rounded",
+            children: /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ e(
+                n,
+                {
+                  variant: "outline",
+                  className: "font-mono w-12 justify-center",
+                  children: s.value
+                }
+              ),
+              /* @__PURE__ */ a("div", { children: [
+                /* @__PURE__ */ e("div", { className: "font-semibold", children: s.name }),
+                /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: s.description })
+              ] })
+            ] })
+          },
+          s.name
+        )) })
+      ] }) }) })
+    ] })
+  ] });
+};
+export {
+  f as default
+};

package/documentation/{LayoutTypesSection-Bf6A4n7o.js → LayoutTypesSection-847E1FZA.js}

@@ -1,15 +1,15 @@
-import { jsx as e, jsxs as a, Fragment as d } from "react/jsx-runtime";
-import { av as r, T as t, C as m, J as p } from "../index-D3gBsvbO.js";
-import { Layout as h, Menu as g, Minimize2 as u, Zap as x, CheckCircle as v, Star as b, Check as f, Code as N } from "lucide-react";
+import { jsx as e, jsxs as a, Fragment as c } from "react/jsx-runtime";
+import { az as r, H as m, T as t, C as p, K as h } from "../index-lfg6LZ1p.js";
+import { Layout as g, Menu as u, Minimize2 as x, LayoutGrid as v, Zap as f, CheckCircle as b, Star as w, Check as y, Code as N } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const L = () => {
+const M = () => {
   const o = [
     {
       name: "Admin Layout",
       description: "Traditional admin layout with expandable sidebar and fixed header. Designed for complex applications with hierarchical navigation and multiple sections.",
-      icon: /* @__PURE__ */ e(h, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      icon: /* @__PURE__ */ e(g, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
       color: "from-blue-500 via-cyan-500 to-teal-500",
       value: r.ADMIN,
       useCases: [
@@ -27,19 +27,19 @@ const L = () => {
         "RTL/LTR direction support",
         "Full-width content option available",
         "Sidebar padding: 96px (xl) / 112px (2xl)",
-        "Content padding: 16px (mobile) / 24px (sm) / 32px (lg) / 40px (3xl)"
+        "Content padding: 16px (mobile) / 24px (sm) / 32px (lg) / 40px (min-[1780px])"
       ],
       technical: {
         sidebar: "ExpandableSidebar component (hidden on mobile, visible xl+)",
         header: "AdminHeader component with menu toggle",
         drawer: "Drawer component for mobile navigation",
-        breakpoint: "Sidebar visible from xl breakpoint (1024px)"
+        breakpoint: "Sidebar visible from xl breakpoint (1280px)"
       }
     },
     {
       name: "Horizontal Layout",
       description: "Modern horizontal navigation layout with top menu bar. Ideal for content-focused sites, marketing pages, and applications with simple navigation.",
-      icon: /* @__PURE__ */ e(g, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      icon: /* @__PURE__ */ e(u, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
       color: "from-purple-500 via-violet-500 to-indigo-500",
       value: r.HORIZONTAL,
       useCases: [
@@ -56,7 +56,7 @@ const L = () => {
         "Mobile hamburger menu with drawer",
         "Backdrop blur effects on header",
         "Full-width content option available",
-        "Content padding: 8px (mobile) / 24px (sm) / 32px (lg) / 40px (3xl)",
+        "Content padding: 8px (mobile) / 24px (sm) / 32px (lg) / 40px (min-[1780px])",
         "Minimal vertical space usage"
       ],
       technical: {
@@ -69,7 +69,7 @@ const L = () => {
     {
       name: "Clean Layout",
       description: "Minimal layout without navigation elements. Perfect for authentication pages, standalone content, and full-screen experiences.",
-      icon: /* @__PURE__ */ e(u, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      icon: /* @__PURE__ */ e(x, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
       color: "from-emerald-500 via-green-500 to-teal-500",
       value: r.CLEAN,
       useCases: [
@@ -97,20 +97,28 @@ const L = () => {
       }
     }
   ];
-  return /* @__PURE__ */ a(d, { children: [
-    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Layout Types" }),
+  return /* @__PURE__ */ a(c, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        title: "Layout Types",
+        description: "Three distinct layout patterns for various application types and navigation needs.",
+        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-cyan-500 via-teal-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(v, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Layout Types" }),
       /* @__PURE__ */ e(
         t,
         {
           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: "Three distinct layout patterns for various application types. Choose the right layout based on your application's navigation needs and structure."
         }
       )
     ] }),
     /* @__PURE__ */ e("div", { className: "space-y-8", children: o.map((i, l) => /* @__PURE__ */ e(
-      m,
+      p,
       {
         className: "group hover:shadow-large transition-all duration-300 overflow-hidden",
         children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
@@ -118,7 +126,7 @@ const L = () => {
             /* @__PURE__ */ e(
               "div",
               {
-                className: `p-3 rounded-xl bg-gradient-to-br ${i.color} group-hover:scale-110 transition-all duration-300 shadow-lg shrink-0`,
+                className: `p-3 rounded-xl bg-linear-to-br ${i.color} group-hover:scale-110 transition-all duration-300 shadow-lg shrink-0`,
                 children: i.icon
               }
             ),
@@ -128,11 +136,11 @@ const L = () => {
                   t,
                   {
                     tag: "h3",
-                    className: "font-semibold text-xl group-hover:text-primary transition-colors duration-300",
+                    className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
                     children: i.name
                   }
                 ),
-                /* @__PURE__ */ e(p, { variant: "outline", className: "text-xs", children: i.value })
+                /* @__PURE__ */ e(h, { variant: "outline", className: "text-xs", children: i.value })
               ] }),
               /* @__PURE__ */ e(
                 t,
@@ -146,7 +154,7 @@ const L = () => {
           ] }),
           /* @__PURE__ */ a("div", { className: "space-y-3", children: [
             /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e(x, { className: "w-5 h-5 text-primary" }),
+              /* @__PURE__ */ e(f, { className: "w-5 h-5 text-primary" }),
               /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold text-base", children: "When to Use" })
             ] }),
             /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2", children: i.useCases.map((n, s) => /* @__PURE__ */ a(
@@ -154,7 +162,7 @@ const L = () => {
               {
                 className: "flex items-start gap-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg",
                 children: [
-                  /* @__PURE__ */ e(v, { className: "w-3 h-3 text-primary mt-1 shrink-0" }),
+                  /* @__PURE__ */ e(b, { className: "w-3 h-3 text-primary mt-1 shrink-0" }),
                   /* @__PURE__ */ e(
                     t,
                     {
@@ -170,27 +178,20 @@ const L = () => {
           ] }),
           /* @__PURE__ */ a("div", { className: "space-y-3", children: [
             /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e(b, { className: "w-5 h-5 text-primary" }),
+              /* @__PURE__ */ e(w, { className: "w-5 h-5 text-primary" }),
               /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold text-base", children: "Features" })
             ] }),
-            /* @__PURE__ */ e("div", { className: "space-y-2", children: i.features.map((n, s) => /* @__PURE__ */ a(
-              "div",
-              {
-                className: "flex items-start gap-2",
-                children: [
-                  /* @__PURE__ */ e(f, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-                  /* @__PURE__ */ e(
-                    t,
-                    {
-                      tag: "span",
-                      className: "text-sm text-gray-600 dark:text-gray-400",
-                      children: n
-                    }
-                  )
-                ]
-              },
-              s
-            )) })
+            /* @__PURE__ */ e("div", { className: "space-y-2", children: i.features.map((n, s) => /* @__PURE__ */ a("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ e(y, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
+              /* @__PURE__ */ e(
+                t,
+                {
+                  tag: "span",
+                  className: "text-sm text-gray-600 dark:text-gray-400",
+                  children: n
+                }
+              )
+            ] }, s)) })
           ] }),
           /* @__PURE__ */ a("div", { className: "space-y-3 pt-3 border-t border-gray-200 dark:border-gray-700", children: [
             /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
@@ -198,7 +199,7 @@ const L = () => {
               /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold text-base", children: "Technical Details" })
             ] }),
             /* @__PURE__ */ e("div", { className: "space-y-2", children: Object.entries(i.technical).map(
-              ([n, s], c) => /* @__PURE__ */ a(
+              ([n, s], d) => /* @__PURE__ */ a(
                 "div",
                 {
                   className: "flex items-start gap-2 text-sm",
@@ -207,7 +208,7 @@ const L = () => {
                       t,
                       {
                         tag: "span",
-                        className: "font-medium text-gray-700 dark:text-gray-300 capitalize min-w-[100px]",
+                        className: "font-medium text-gray-700 dark:text-gray-300 capitalize min-w-25",
                         children: [
                           n.replace(/([A-Z])/g, " $1").trim(),
                           ":"
@@ -224,7 +225,7 @@ const L = () => {
                     )
                   ]
                 },
-                c
+                d
               )
             ) })
           ] })
@@ -235,5 +236,5 @@ const L = () => {
   ] });
 };
 export {
-  L as default
+  M as default
 };

package/documentation/LayoutTypesSection-hnxHeuA2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const d=()=>{const r=[{name:"Admin Layout",description:"Traditional admin layout with expandable sidebar and fixed header. Designed for complex applications with hierarchical navigation and multiple sections.",icon:e.jsx(s.Layout,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-blue-500 via-cyan-500 to-teal-500",value:a.LAYOUT_OPTIONS.ADMIN,useCases:["Dashboard applications","Admin panels and management systems","Complex applications with many navigation items","Applications requiring hierarchical menu structure","Enterprise software and internal tools","Applications with multiple sections and subsections"],features:["Expandable sidebar navigation (visible on xl screens)","Fixed header with logo and action buttons","Responsive drawer menu for mobile devices","RTL/LTR direction support","Full-width content option available","Sidebar padding: 96px (xl) / 112px (2xl)","Content padding: 16px (mobile) / 24px (sm) / 32px (lg) / 40px (min-[1780px])"],technical:{sidebar:"ExpandableSidebar component (hidden on mobile, visible xl+)",header:"AdminHeader component with menu toggle",drawer:"Drawer component for mobile navigation",breakpoint:"Sidebar visible from xl breakpoint (1280px)"}},{name:"Horizontal Layout",description:"Modern horizontal navigation layout with top menu bar. Ideal for content-focused sites, marketing pages, and applications with simple navigation.",icon:e.jsx(s.Menu,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-purple-500 via-violet-500 to-indigo-500",value:a.LAYOUT_OPTIONS.HORIZONTAL,useCases:["Content-focused websites","Marketing and landing pages","Simple applications with few navigation items","Portfolio and showcase sites","Blog and content management systems","Public-facing applications"],features:["Horizontal top navigation menu","Sticky header with logo and action buttons","Mobile hamburger menu with drawer","Backdrop blur effects on header","Full-width content option available","Content padding: 8px (mobile) / 24px (sm) / 32px (lg) / 40px (min-[1780px])","Minimal vertical space usage"],technical:{header:"HorizontalHeader component with horizontal menu",menu:"HorizontalNavMenu component",drawer:"Drawer component for mobile navigation",breakpoint:"Horizontal menu visible on all screen sizes"}},{name:"Clean Layout",description:"Minimal layout without navigation elements. Perfect for authentication pages, standalone content, and full-screen experiences.",icon:e.jsx(s.Minimize2,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-emerald-500 via-green-500 to-teal-500",value:a.LAYOUT_OPTIONS.CLEAN,useCases:["Authentication pages (login, signup, password reset)","Landing pages and marketing sites","Standalone content pages","Full-screen applications","Modal and overlay content","Embedded widgets and components"],features:["No navigation elements or headers","Full viewport height (100vh)","Flex column layout","Perfect for centered content","Minimal overhead and dependencies","No menu items required","Customizable via className prop"],technical:{structure:"Simple flex container with full height",dependencies:"No header, sidebar, or menu components",customization:"Full control via className prop",useWhen:"No navigation needed, standalone content"}}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Layout Types",description:"Three distinct layout patterns for various application types and navigation needs.",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-cyan-500 via-teal-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.LayoutGrid,{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(a.Typography,{tag:"h2",className:"mb-2",children:"Layout Types"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Three distinct layout patterns for various application types. Choose the right layout based on your application's navigation needs and structure."})]}),e.jsx("div",{className:"space-y-8",children:r.map((t,o)=>e.jsx(a.CardContainer,{className:"group hover:shadow-large transition-all duration-300 overflow-hidden",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx("div",{className:`p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg shrink-0`,children:t.icon}),e.jsxs("div",{className:"flex-1",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-2",children:[e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:t.name}),e.jsx(a.Badge,{variant:"outline",className:"text-xs",children:t.value})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:t.description})]})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Zap,{className:"w-5 h-5 text-primary"}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold text-base",children:"When to Use"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-2",children:t.useCases.map((i,n)=>e.jsxs("div",{className:"flex items-start gap-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg",children:[e.jsx(s.CheckCircle,{className:"w-3 h-3 text-primary mt-1 shrink-0"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-700 dark:text-gray-300",children:i})]},n))})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Star,{className:"w-5 h-5 text-primary"}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold text-base",children:"Features"})]}),e.jsx("div",{className:"space-y-2",children:t.features.map((i,n)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:i})]},n))})]}),e.jsxs("div",{className:"space-y-3 pt-3 border-t border-gray-200 dark:border-gray-700",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Code,{className:"w-5 h-5 text-primary"}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold text-base",children:"Technical Details"})]}),e.jsx("div",{className:"space-y-2",children:Object.entries(t.technical).map(([i,n],l)=>e.jsxs("div",{className:"flex items-start gap-2 text-sm",children:[e.jsxs(a.Typography,{tag:"span",className:"font-medium text-gray-700 dark:text-gray-300 capitalize min-w-25",children:[i.replace(/([A-Z])/g," $1").trim(),":"]}),e.jsx(a.Typography,{tag:"span",className:"text-gray-600 dark:text-gray-400",children:n})]},l))})]})]})},o))})]})};exports.default=d;

package/documentation/LineChartSection-BFVXYiK4.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=[{name:"Jan",revenue:4e3,expenses:2400,profit:1600},{name:"Feb",revenue:3e3,expenses:1398,profit:1602},{name:"Mar",revenue:5e3,expenses:3200,profit:1800},{name:"Apr",revenue:4780,expenses:2908,profit:1872},{name:"May",revenue:5890,expenses:4800,profit:1090},{name:"Jun",revenue:6390,expenses:3800,profit:2590},{name:"Jul",revenue:7490,expenses:4300,profit:3190}],n=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"LineChart"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Line chart component for displaying trends and time-series data with multiple series, custom curves, and theme integration."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Line Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.LineChart,{data:s,series:[{dataKey:"revenue",name:"Revenue"},{dataKey:"expenses",name:"Expenses"}],height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Multiple Series with Dots",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.LineChart,{data:s,series:[{dataKey:"revenue",name:"Revenue"},{dataKey:"expenses",name:"Expenses"},{dataKey:"profit",name:"Profit"}],showDots:!0,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Straight Lines (No Curve)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.LineChart,{data:s,series:[{dataKey:"revenue",name:"Revenue"},{dataKey:"profit",name:"Profit"}],curved:!1,strokeWidth:3,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{code:`import { LineChart } from '@e-burgos/tucu-ui';
+
+const data = [
+  { name: 'Jan', revenue: 4000, expenses: 2400 },
+  { name: 'Feb', revenue: 3000, expenses: 1398 },
+  { name: 'Mar', revenue: 5000, expenses: 3200 },
+];
+
+<LineChart
+  data={data}
+  series={[
+    { dataKey: 'revenue', name: 'Revenue' },
+    { dataKey: 'expenses', name: 'Expenses' },
+  ]}
+  height={300}
+  curved
+  showDots
+  showGrid
+  showTooltip
+  showLegend
+/>`,language:"tsx"})})})}),e.jsx(a.PropPlayground,{componentName:"LineChart",defaultValues:{height:300,curved:!0,showDots:!1,strokeWidth:2,showGrid:!0,showTooltip:!0,showLegend:!0,animate:!0},excludeProps:["data","series","colors","className","xAxisKey","emptyMessage"],children:t=>e.jsx(a.LineChart,{data:s,series:[{dataKey:"revenue",name:"Revenue"},{dataKey:"expenses",name:"Expenses"}],...t})}),e.jsx(a.AutoPropsTable,{componentName:"LineChart"})]});exports.default=n;

package/documentation/{LineChartSection-BsupR4NA.js → LineChartSection-CLKCstC7.js}

@@ -1,5 +1,5 @@
-import { jsxs as r, Fragment as l, jsx as e } from "react/jsx-runtime";
-import { T as i, C as a, a as s, k as t, c as m, P as d, A as p } from "../index-D3gBsvbO.js";
+import { jsxs as r, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { T as i, C as a, a as s, k as t, c as d, P as l, A as p } from "../index-lfg6LZ1p.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";
@@ -12,14 +12,14 @@ const n = [
   { name: "May", revenue: 5890, expenses: 4800, profit: 1090 },
   { name: "Jun", revenue: 6390, expenses: 3800, profit: 2590 },
   { name: "Jul", revenue: 7490, expenses: 4300, profit: 3190 }
-], g = () => /* @__PURE__ */ r(l, { children: [
+], g = () => /* @__PURE__ */ r(m, { children: [
   /* @__PURE__ */ r("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(i, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "LineChart" }),
+    /* @__PURE__ */ e(i, { tag: "h2", className: "text-base md:text-base font-semibold", children: "LineChart" }),
     /* @__PURE__ */ e(
       i,
       {
         tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        className: "text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
         children: "Line chart component for displaying trends and time-series data with multiple series, custom curves, and theme integration."
       }
     )
@@ -62,7 +62,7 @@ const n = [
     }
   ) }) }) }),
   /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    m,
+    d,
     {
       code: `import { LineChart } from '@e-burgos/tucu-ui';
 
@@ -89,7 +89,7 @@ const data = [
     }
   ) }) }) }),
   /* @__PURE__ */ e(
-    d,
+    l,
     {
       componentName: "LineChart",
       defaultValues: {