@e-burgos/tucu-ui 2.6.0 → 2.7.0

package/documentation/LayoutTypesSection-dCUlT5Rx.js

@@ -1,450 +0,0 @@
-import { jsx as e, jsxs as a, Fragment as d } from "react/jsx-runtime";
-import { aB as i, H as m, T as t, C as p, K as h } from "../index-DoxeCFUJ.js";
-import { Layout as u, Menu as g, Minimize2 as v, Monitor as w, Sparkles as b, AppWindow as f, Layers as y, Gem as x, PanelTop as S, GalleryHorizontalEnd as N, LayoutGrid as k, Zap as O, CheckCircle as L, Star as T, Check as C, Code as A } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const B = () => {
-  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: i.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: i.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(v, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      color: "from-emerald-500 via-green-500 to-teal-500",
-      value: i.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(w, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      color: "from-gray-500 via-slate-500 to-zinc-500",
-      value: i.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: i.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: i.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(y, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      color: "from-slate-400 via-gray-400 to-zinc-400",
-      value: i.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(x, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      color: "from-purple-400 via-violet-400 to-indigo-400",
-      value: i.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"
-      }
-    },
-    {
-      name: "macOS Sonoma Navbar Layout",
-      description: "macOS Sonoma layout with horizontal top navigation bar instead of sidebar, providing a streamlined navigation experience.",
-      icon: /* @__PURE__ */ e(S, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      color: "from-gray-500 via-slate-400 to-zinc-500",
-      value: i.MACOS_NAVBAR,
-      useCases: [
-        "Content-focused macOS-style apps",
-        "Documentation sites with macOS aesthetics",
-        "Applications preferring horizontal navigation",
-        "Portfolio and showcase sites with Sonoma theme",
-        "Simple apps without sidebar complexity",
-        "Landing pages with macOS visual identity"
-      ],
-      features: [
-        "Top horizontal navigation bar",
-        "Sonoma visual styling and effects",
-        "No sidebar — navbar-only navigation",
-        "Responsive layout adapts to screen size",
-        "Background effects from Sonoma theme",
-        "Seamless transition to/from Sonoma layouts",
-        "AccentBundles support (9 color presets)"
-      ],
-      technical: {
-        component: 'MacOSNavbarLayout or MacOSLayout variant="sonoma-navbar"',
-        navbar: "Horizontal top navigation with Sonoma styling",
-        content: "Full-width content area without sidebar",
-        navigation: "Navbar items act as primary navigation"
-      }
-    },
-    {
-      name: "macOS Tahoe Navbar Layout",
-      description: "macOS Tahoe layout with horizontal top navigation bar combining Liquid Glass aesthetics with streamlined navigation.",
-      icon: /* @__PURE__ */ e(N, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-      color: "from-indigo-400 via-violet-500 to-purple-500",
-      value: i.MACOS_TAHOE_NAVBAR,
-      useCases: [
-        "Content-focused Tahoe-style apps",
-        "Modern desktop applications preferring horizontal nav",
-        "Portfolio and showcase sites",
-        "Applications with few top-level sections",
-        "Documentation and knowledge bases",
-        "Creative tools with immersive content areas"
-      ],
-      features: [
-        "Liquid Glass top navigation bar",
-        "Tahoe visual styling and effects",
-        "No sidebar or dock — navbar-only navigation",
-        "Dynamic mesh backgrounds",
-        "Full-width content area",
-        "Seamless transition to/from Tahoe layouts",
-        "Accent color bundles support"
-      ],
-      technical: {
-        component: 'MacOSTahoeNavbarLayout or MacOSLayout variant="tahoe-navbar"',
-        navbar: "Liquid Glass horizontal navigation bar",
-        content: "Full viewport content area without sidebar or dock",
-        navigation: "Navbar items act as primary navigation"
-      }
-    }
-  ];
-  return /* @__PURE__ */ a(d, { children: [
-    /* @__PURE__ */ e(
-      m,
-      {
-        title: "Layout Types",
-        description: "Ten 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(k, { 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: "Ten 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((o, 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 ${o.color} group-hover:scale-110 transition-all duration-300 shadow-lg shrink-0`,
-                children: o.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: o.name
-                  }
-                ),
-                /* @__PURE__ */ e(h, { variant: "outline", className: "text-xs", children: o.value })
-              ] }),
-              /* @__PURE__ */ e(
-                t,
-                {
-                  tag: "p",
-                  className: "text-gray-600 dark:text-gray-400 leading-relaxed",
-                  children: o.description
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e(O, { 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: o.useCases.map((n, s) => /* @__PURE__ */ a(
-              "div",
-              {
-                className: "flex items-start gap-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg",
-                children: [
-                  /* @__PURE__ */ e(L, { 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: n
-                    }
-                  )
-                ]
-              },
-              s
-            )) })
-          ] }),
-          /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e(T, { 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: o.features.map((n, s) => /* @__PURE__ */ a("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ e(C, { 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-border", children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e(A, { 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(o.technical).map(
-              ([n, 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: [
-                          n.replace(/([A-Z])/g, " $1").trim(),
-                          ":"
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ e(
-                      t,
-                      {
-                        tag: "span",
-                        className: "text-gray-600 dark:text-gray-400",
-                        children: s
-                      }
-                    )
-                  ]
-                },
-                c
-              )
-            ) })
-          ] })
-        ] })
-      },
-      l
-    )) })
-  ] });
-};
-export {
-  B as default
-};

package/documentation/LayoutTypesSection-qQ-9wgXe.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const s=[{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"}},{name:"macOS Sonoma Navbar Layout",description:"macOS Sonoma layout with horizontal top navigation bar instead of sidebar, providing a streamlined navigation experience.",icon:e.jsx(t.PanelTop,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-gray-500 via-slate-400 to-zinc-500",value:a.LAYOUT_OPTIONS.MACOS_NAVBAR,useCases:["Content-focused macOS-style apps","Documentation sites with macOS aesthetics","Applications preferring horizontal navigation","Portfolio and showcase sites with Sonoma theme","Simple apps without sidebar complexity","Landing pages with macOS visual identity"],features:["Top horizontal navigation bar","Sonoma visual styling and effects","No sidebar — navbar-only navigation","Responsive layout adapts to screen size","Background effects from Sonoma theme","Seamless transition to/from Sonoma layouts","AccentBundles support (9 color presets)"],technical:{component:'MacOSNavbarLayout or MacOSLayout variant="sonoma-navbar"',navbar:"Horizontal top navigation with Sonoma styling",content:"Full-width content area without sidebar",navigation:"Navbar items act as primary navigation"}},{name:"macOS Tahoe Navbar Layout",description:"macOS Tahoe layout with horizontal top navigation bar combining Liquid Glass aesthetics with streamlined navigation.",icon:e.jsx(t.GalleryHorizontalEnd,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-indigo-400 via-violet-500 to-purple-500",value:a.LAYOUT_OPTIONS.MACOS_TAHOE_NAVBAR,useCases:["Content-focused Tahoe-style apps","Modern desktop applications preferring horizontal nav","Portfolio and showcase sites","Applications with few top-level sections","Documentation and knowledge bases","Creative tools with immersive content areas"],features:["Liquid Glass top navigation bar","Tahoe visual styling and effects","No sidebar or dock — navbar-only navigation","Dynamic mesh backgrounds","Full-width content area","Seamless transition to/from Tahoe layouts","Accent color bundles support"],technical:{component:'MacOSTahoeNavbarLayout or MacOSLayout variant="tahoe-navbar"',navbar:"Liquid Glass horizontal navigation bar",content:"Full viewport content area without sidebar or dock",navigation:"Navbar items act as primary navigation"}}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Layout Types",description:"Ten 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:"Ten 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:s.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((o,n)=>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:o})]},n))})]}),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((o,n)=>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:o})]},n))})]}),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(([o,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:[o.replace(/([A-Z])/g," $1").trim(),":"]}),e.jsx(a.Typography,{tag:"span",className:"text-gray-600 dark:text-gray-400",children:n})]},l))})]})]})},r))})]})};exports.default=c;

package/documentation/LineChartSection-C-ssHn9r.js

@@ -1,130 +0,0 @@
-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-DoxeCFUJ.js";
-import "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const n = [
-  { 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 }
-], g = () => /* @__PURE__ */ r(m, { children: [
-  /* @__PURE__ */ r("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(i, { tag: "h2", className: "text-base md:text-base font-semibold", children: "LineChart" }),
-    /* @__PURE__ */ e(
-      i,
-      {
-        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."
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Basic Line Chart", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    t,
-    {
-      data: n,
-      series: [
-        { dataKey: "revenue", name: "Revenue" },
-        { dataKey: "expenses", name: "Expenses" }
-      ],
-      height: 300
-    }
-  ) }) }) }),
-  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Multiple Series with Dots", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    t,
-    {
-      data: n,
-      series: [
-        { dataKey: "revenue", name: "Revenue" },
-        { dataKey: "expenses", name: "Expenses" },
-        { dataKey: "profit", name: "Profit" }
-      ],
-      showDots: !0,
-      height: 300
-    }
-  ) }) }) }),
-  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Straight Lines (No Curve)", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    t,
-    {
-      data: n,
-      series: [
-        { dataKey: "revenue", name: "Revenue" },
-        { dataKey: "profit", name: "Profit" }
-      ],
-      curved: !1,
-      strokeWidth: 3,
-      height: 300
-    }
-  ) }) }) }),
-  /* @__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(
-    d,
-    {
-      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"
-    }
-  ) }) }) }),
-  /* @__PURE__ */ e(
-    l,
-    {
-      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: (o) => /* @__PURE__ */ e(
-        t,
-        {
-          data: n,
-          series: [
-            { dataKey: "revenue", name: "Revenue" },
-            { dataKey: "expenses", name: "Expenses" }
-          ],
-          ...o
-        }
-      )
-    }
-  ),
-  /* @__PURE__ */ e(p, { componentName: "LineChart" })
-] });
-export {
-  g as default
-};

package/documentation/LineChartSection-CVJV483A.js

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