@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/LayoutPrinciplesSection-Dtv-aHj6.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-19KsCnyX.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-border",
+            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/LayoutPrinciplesSection-TN7sNEHN.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.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-border",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/LayoutTypesSection-DtAUqzLt.js

@@ -0,0 +1,390 @@
+import { jsx as e, jsxs as a, Fragment as d } from "react/jsx-runtime";
+import { aB as n, H as m, T as t, C as p, K as h } from "../index-19KsCnyX.js";
+import { Layout as u, Menu as g, Minimize2 as w, Monitor as v, Sparkles as b, AppWindow as f, Layers as x, Gem as y, LayoutGrid as N, Zap as S, CheckCircle as k, Star as L, Check as O, Code as C } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const q = () => {
+  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: /* @__PURE__ */ e(u, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-blue-500 via-cyan-500 to-teal-500",
+      value: n.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: /* @__PURE__ */ e(g, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-purple-500 via-violet-500 to-indigo-500",
+      value: n.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: /* @__PURE__ */ e(w, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-emerald-500 via-green-500 to-teal-500",
+      value: n.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"
+      }
+    },
+    {
+      name: "macOS Sonoma Layout",
+      description: "macOS Sonoma desktop-style layout with frosted sidebar, toolbar, and window chrome. Ideal for desktop-like applications with macOS-inspired aesthetics.",
+      icon: /* @__PURE__ */ e(v, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-gray-500 via-slate-500 to-zinc-500",
+      value: n.MACOS,
+      useCases: [
+        "Desktop-like applications",
+        "macOS-inspired user interfaces",
+        "Content apps with sidebar navigation",
+        "Media and file management apps",
+        "Developer tools and IDEs",
+        "Applications requiring native-feel chrome"
+      ],
+      features: [
+        "Frosted glass sidebar with blur effects",
+        "Native toolbar with window controls",
+        "Window chrome styling and rounded corners",
+        "Responsive layout adapts to screen size",
+        "Smooth animations and transitions",
+        "AccentBundles support (9 color presets)",
+        "Integrates with ThemeBackground (sonoma variant)"
+      ],
+      technical: {
+        component: 'MacOSSonomaLayout or MacOSLayout variant="sonoma"',
+        sidebar: "Frosted sidebar with backdrop-blur",
+        toolbar: "Native-style toolbar with actions",
+        accents: "9 Sonoma AccentBundles (built via buildSonomaPresets)"
+      }
+    },
+    {
+      name: "macOS Tahoe Layout",
+      description: "macOS Tahoe (macOS 26) layout with Liquid Glass aesthetics, translucent sidebar and refined toolbar. The most modern desktop-inspired layout.",
+      icon: /* @__PURE__ */ e(b, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-indigo-500 via-purple-500 to-pink-500",
+      value: n.MACOS_TAHOE,
+      useCases: [
+        "Modern desktop applications",
+        "Liquid Glass UI experiences",
+        "Immersive content experiences",
+        "Creative and design tools",
+        "Applications requiring premium aesthetics",
+        "Next-generation web experiences"
+      ],
+      features: [
+        "Liquid Glass sidebar with translucent effects",
+        "Refined toolbar with modern controls",
+        "Dynamic mesh backgrounds",
+        "Frosted glass surfaces throughout",
+        "Accent color bundles (9 Tahoe presets)",
+        "Smooth spring-based animations",
+        "Integrates with ThemeBackground (radial variant)"
+      ],
+      technical: {
+        component: 'MacOSTahoeLayout or MacOSLayout variant="tahoe"',
+        sidebar: "Liquid Glass translucent sidebar",
+        toolbar: "Refined toolbar with glass effects",
+        accents: "9 Tahoe AccentBundles (Glass, Blue, Purple, Pink, Red, Orange, Yellow, Green, Graphite)"
+      }
+    },
+    {
+      name: "macOS Tahoe Dock Layout",
+      description: "macOS Tahoe dock-based layout with floating app dock at the bottom and maximized content area. Best for full-screen and immersive experiences.",
+      icon: /* @__PURE__ */ e(f, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-violet-500 via-fuchsia-500 to-pink-500",
+      value: n.MACOS_TAHOE_DOCK,
+      useCases: [
+        "Full-screen applications",
+        "Media and entertainment apps",
+        "Dock-based navigation patterns",
+        "Immersive gaming or creative experiences",
+        "Applications with few top-level sections",
+        "Presentation and showcase apps"
+      ],
+      features: [
+        "Floating dock with Liquid Glass effect",
+        "Full-width maximized content area",
+        "Dynamic mesh backgrounds",
+        "No sidebar — dock-only navigation",
+        "Hover-to-expand dock items",
+        "Accent color bundles support",
+        "Pairs with ThemeBackground (radial variant)"
+      ],
+      technical: {
+        component: 'MacOSTahoeDockLayout or MacOSLayout variant="tahoe-dock"',
+        dock: "Floating bottom dock with glass effect and magnification",
+        content: "Full viewport content area without sidebar",
+        navigation: "Dock items act as primary navigation"
+      }
+    },
+    {
+      name: "macOS Sonoma Clean Layout",
+      description: "Minimal Sonoma layout with only background and content, no sidebar or toolbar. Inherits Sonoma visual styling without navigation chrome.",
+      icon: /* @__PURE__ */ e(x, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-slate-400 via-gray-400 to-zinc-400",
+      value: n.MACOS_CLEAN,
+      useCases: [
+        "Authentication pages within Sonoma theme",
+        "Landing pages with macOS aesthetics",
+        "Standalone content pages",
+        "Full-screen experiences within macOS theme",
+        "Onboarding flows",
+        "Embedded views that inherit theme"
+      ],
+      features: [
+        "Background only + content slot",
+        "Inherits Sonoma theme styling",
+        "No navigation chrome (no sidebar, toolbar)",
+        "Full viewport content area",
+        "Seamless transition to/from Sonoma layout",
+        "Minimal overhead",
+        "Customizable via className prop"
+      ],
+      technical: {
+        component: 'MacOSSonomaCleanLayout or MacOSLayout variant="sonoma-clean"',
+        structure: "Background wrapper + content container",
+        dependencies: "No navigation components required",
+        useWhen: "Auth pages, standalone content within Sonoma theme"
+      }
+    },
+    {
+      name: "macOS Tahoe Clean Layout",
+      description: "Minimal Tahoe layout with only Liquid Glass background and content area. Perfect for standalone views that need Tahoe visual identity without navigation.",
+      icon: /* @__PURE__ */ e(y, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-purple-400 via-violet-400 to-indigo-400",
+      value: n.MACOS_TAHOE_CLEAN,
+      useCases: [
+        "Authentication pages within Tahoe theme",
+        "Full-screen content experiences",
+        "Standalone views with Liquid Glass aesthetic",
+        "Onboarding and setup wizards",
+        "Modal-like full-page overlays",
+        "Embedded views that inherit Tahoe theme"
+      ],
+      features: [
+        "Dynamic Liquid Glass background only",
+        "Content slot without chrome",
+        "Tahoe visual identity (mesh gradients)",
+        "No sidebar, toolbar, or dock",
+        "Seamless transition to/from Tahoe layouts",
+        "Minimal dependencies",
+        "Full viewport height"
+      ],
+      technical: {
+        component: 'MacOSTahoeCleanLayout or MacOSLayout variant="macos-tahoe-clean"',
+        structure: "Liquid Glass background + content container",
+        dependencies: "No navigation components required",
+        useWhen: "Auth pages, standalone content within Tahoe theme"
+      }
+    }
+  ];
+  return /* @__PURE__ */ a(d, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        title: "Layout Types",
+        description: "Eight layout patterns spanning classic admin panels, modern horizontal menus, and macOS-inspired desktop experiences with Sonoma and Tahoe aesthetics.",
+        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(N, { 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-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Eight layout patterns for every use case — from classic admin panels to macOS-inspired desktop experiences with Liquid Glass aesthetics."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "space-y-8", children: r.map((i, l) => /* @__PURE__ */ e(
+      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: [
+          /* @__PURE__ */ a("div", { className: "flex items-start gap-4", children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                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
+              }
+            ),
+            /* @__PURE__ */ a("div", { className: "flex-1", children: [
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-3 mb-2", children: [
+                /* @__PURE__ */ e(
+                  t,
+                  {
+                    tag: "h3",
+                    className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
+                    children: i.name
+                  }
+                ),
+                /* @__PURE__ */ e(h, { variant: "outline", className: "text-xs", children: i.value })
+              ] }),
+              /* @__PURE__ */ e(
+                t,
+                {
+                  tag: "p",
+                  className: "text-gray-600 dark:text-gray-400 leading-relaxed",
+                  children: i.description
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(S, { 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((o, s) => /* @__PURE__ */ a(
+              "div",
+              {
+                className: "flex items-start gap-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg",
+                children: [
+                  /* @__PURE__ */ e(k, { className: "w-3 h-3 text-primary mt-1 shrink-0" }),
+                  /* @__PURE__ */ e(
+                    t,
+                    {
+                      tag: "span",
+                      className: "text-sm text-gray-700 dark:text-gray-300",
+                      children: o
+                    }
+                  )
+                ]
+              },
+              s
+            )) })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(L, { 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((o, s) => /* @__PURE__ */ a("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ e(O, { 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: o
+                }
+              )
+            ] }, s)) })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "space-y-3 pt-3 border-t border-border", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(C, { className: "w-5 h-5 text-primary" }),
+              /* @__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(
+              ([o, s], c) => /* @__PURE__ */ a(
+                "div",
+                {
+                  className: "flex items-start gap-2 text-sm",
+                  children: [
+                    /* @__PURE__ */ a(
+                      t,
+                      {
+                        tag: "span",
+                        className: "font-medium text-gray-700 dark:text-gray-300 capitalize min-w-25",
+                        children: [
+                          o.replace(/([A-Z])/g, " $1").trim(),
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      t,
+                      {
+                        tag: "span",
+                        className: "text-gray-600 dark:text-gray-400",
+                        children: s
+                      }
+                    )
+                  ]
+                },
+                c
+              )
+            ) })
+          ] })
+        ] })
+      },
+      l
+    )) })
+  ] });
+};
+export {
+  q as default
+};

package/documentation/LayoutTypesSection-prvabVsZ.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{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:e.jsx(t.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(t.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(t.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"}},{name:"macOS Sonoma Layout",description:"macOS Sonoma desktop-style layout with frosted sidebar, toolbar, and window chrome. Ideal for desktop-like applications with macOS-inspired aesthetics.",icon:e.jsx(t.Monitor,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-gray-500 via-slate-500 to-zinc-500",value:a.LAYOUT_OPTIONS.MACOS,useCases:["Desktop-like applications","macOS-inspired user interfaces","Content apps with sidebar navigation","Media and file management apps","Developer tools and IDEs","Applications requiring native-feel chrome"],features:["Frosted glass sidebar with blur effects","Native toolbar with window controls","Window chrome styling and rounded corners","Responsive layout adapts to screen size","Smooth animations and transitions","AccentBundles support (9 color presets)","Integrates with ThemeBackground (sonoma variant)"],technical:{component:'MacOSSonomaLayout or MacOSLayout variant="sonoma"',sidebar:"Frosted sidebar with backdrop-blur",toolbar:"Native-style toolbar with actions",accents:"9 Sonoma AccentBundles (built via buildSonomaPresets)"}},{name:"macOS Tahoe Layout",description:"macOS Tahoe (macOS 26) layout with Liquid Glass aesthetics, translucent sidebar and refined toolbar. The most modern desktop-inspired layout.",icon:e.jsx(t.Sparkles,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-indigo-500 via-purple-500 to-pink-500",value:a.LAYOUT_OPTIONS.MACOS_TAHOE,useCases:["Modern desktop applications","Liquid Glass UI experiences","Immersive content experiences","Creative and design tools","Applications requiring premium aesthetics","Next-generation web experiences"],features:["Liquid Glass sidebar with translucent effects","Refined toolbar with modern controls","Dynamic mesh backgrounds","Frosted glass surfaces throughout","Accent color bundles (9 Tahoe presets)","Smooth spring-based animations","Integrates with ThemeBackground (radial variant)"],technical:{component:'MacOSTahoeLayout or MacOSLayout variant="tahoe"',sidebar:"Liquid Glass translucent sidebar",toolbar:"Refined toolbar with glass effects",accents:"9 Tahoe AccentBundles (Glass, Blue, Purple, Pink, Red, Orange, Yellow, Green, Graphite)"}},{name:"macOS Tahoe Dock Layout",description:"macOS Tahoe dock-based layout with floating app dock at the bottom and maximized content area. Best for full-screen and immersive experiences.",icon:e.jsx(t.AppWindow,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-violet-500 via-fuchsia-500 to-pink-500",value:a.LAYOUT_OPTIONS.MACOS_TAHOE_DOCK,useCases:["Full-screen applications","Media and entertainment apps","Dock-based navigation patterns","Immersive gaming or creative experiences","Applications with few top-level sections","Presentation and showcase apps"],features:["Floating dock with Liquid Glass effect","Full-width maximized content area","Dynamic mesh backgrounds","No sidebar — dock-only navigation","Hover-to-expand dock items","Accent color bundles support","Pairs with ThemeBackground (radial variant)"],technical:{component:'MacOSTahoeDockLayout or MacOSLayout variant="tahoe-dock"',dock:"Floating bottom dock with glass effect and magnification",content:"Full viewport content area without sidebar",navigation:"Dock items act as primary navigation"}},{name:"macOS Sonoma Clean Layout",description:"Minimal Sonoma layout with only background and content, no sidebar or toolbar. Inherits Sonoma visual styling without navigation chrome.",icon:e.jsx(t.Layers,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-slate-400 via-gray-400 to-zinc-400",value:a.LAYOUT_OPTIONS.MACOS_CLEAN,useCases:["Authentication pages within Sonoma theme","Landing pages with macOS aesthetics","Standalone content pages","Full-screen experiences within macOS theme","Onboarding flows","Embedded views that inherit theme"],features:["Background only + content slot","Inherits Sonoma theme styling","No navigation chrome (no sidebar, toolbar)","Full viewport content area","Seamless transition to/from Sonoma layout","Minimal overhead","Customizable via className prop"],technical:{component:'MacOSSonomaCleanLayout or MacOSLayout variant="sonoma-clean"',structure:"Background wrapper + content container",dependencies:"No navigation components required",useWhen:"Auth pages, standalone content within Sonoma theme"}},{name:"macOS Tahoe Clean Layout",description:"Minimal Tahoe layout with only Liquid Glass background and content area. Perfect for standalone views that need Tahoe visual identity without navigation.",icon:e.jsx(t.Gem,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-purple-400 via-violet-400 to-indigo-400",value:a.LAYOUT_OPTIONS.MACOS_TAHOE_CLEAN,useCases:["Authentication pages within Tahoe theme","Full-screen content experiences","Standalone views with Liquid Glass aesthetic","Onboarding and setup wizards","Modal-like full-page overlays","Embedded views that inherit Tahoe theme"],features:["Dynamic Liquid Glass background only","Content slot without chrome","Tahoe visual identity (mesh gradients)","No sidebar, toolbar, or dock","Seamless transition to/from Tahoe layouts","Minimal dependencies","Full viewport height"],technical:{component:'MacOSTahoeCleanLayout or MacOSLayout variant="macos-tahoe-clean"',structure:"Liquid Glass background + content container",dependencies:"No navigation components required",useWhen:"Auth pages, standalone content within Tahoe theme"}}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Layout Types",description:"Eight layout patterns spanning classic admin panels, modern horizontal menus, and macOS-inspired desktop experiences with Sonoma and Tahoe aesthetics.",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(t.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:"Eight layout patterns for every use case — from classic admin panels to macOS-inspired desktop experiences with Liquid Glass aesthetics."})]}),e.jsx("div",{className:"space-y-8",children:o.map((i,r)=>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 ${i.color} group-hover:scale-110 transition-all duration-300 shadow-lg shrink-0`,children:i.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:i.name}),e.jsx(a.Badge,{variant:"outline",className:"text-xs",children:i.value})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:i.description})]})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t.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:i.useCases.map((n,s)=>e.jsxs("div",{className:"flex items-start gap-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg",children:[e.jsx(t.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:n})]},s))})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t.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:i.features.map((n,s)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(t.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:n})]},s))})]}),e.jsxs("div",{className:"space-y-3 pt-3 border-t border-border",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t.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(i.technical).map(([n,s],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:[n.replace(/([A-Z])/g," $1").trim(),":"]}),e.jsx(a.Typography,{tag:"span",className:"text-gray-600 dark:text-gray-400",children:s})]},l))})]})]})},r))})]})};exports.default=c;

package/documentation/{LineChartSection-BsupR4NA.js → LineChartSection-CzARfWf9.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-19KsCnyX.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: {

package/documentation/LineChartSection-HJuiXWwE.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.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;