@e-burgos/tucu-ui 2.0.7 → 2.0.9

package/documentation/ImageSection-C1nOKmH2.js

@@ -0,0 +1,82 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-BaGqriuz.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"Image",description:`A powerful image component inspired by Next.js Image, featuring lazy
+          loading, blur placeholders, error handling, and automatic
+          optimization.`,icon:a.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-sky-600 to-blue-500 rounded-full flex items-center justify-center shadow-lg",children:a.jsx(r.ImageIcon,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Basic Usage",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Standard Image"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Basic usage with width and height."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=400&h=300&fit=crop",alt:"Mountain landscape",width:400,height:300,className:"rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Lazy Loading"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatic lazy loading with smooth fade-in."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop",alt:"Mountain peaks",width:400,height:300,loading:"lazy",className:"rounded-lg"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Object Fit Modes",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Cover (Default)"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Fills container, may crop image."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=300&h=200&fit=crop",alt:"Nature landscape cover",width:300,height:200,objectFit:"cover",className:"rounded-lg border-2 border-gray-200 dark:border-gray-700"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Contain"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Fits entirely, may have empty space."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=300&h=200&fit=crop",alt:"Nature landscape contain",width:300,height:200,objectFit:"contain",containerClassName:"bg-gray-100 dark:bg-gray-800",className:"rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Fill"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Stretches to fill container."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=300&h=200&fit=crop",alt:"Nature landscape fill",width:300,height:200,objectFit:"fill",className:"rounded-lg border-2 border-gray-200 dark:border-gray-700"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Aspect Ratios",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"16:9 (Video)"}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=400&h=300&fit=crop",alt:"Beach sunset 16:9",aspectRatio:"16/9",fill:!0,containerClassName:"w-full rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"4:3 (Classic)"}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=400&h=300&fit=crop",alt:"Forest path 4:3",aspectRatio:"4/3",fill:!0,containerClassName:"w-full rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"1:1 (Square)"}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1511884642898-4c92249e20b6?w=300&h=300&fit=crop",alt:"City skyline 1:1",aspectRatio:"1/1",fill:!0,containerClassName:"w-full rounded-lg"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Placeholder Types",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Blur Placeholder"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Shows animated blur effect while loading."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=400&h=300&fit=crop",alt:"Mountain with blur placeholder",width:400,height:300,placeholder:"blur",className:"rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Empty Placeholder"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Shows spinner while loading."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop",alt:"Mountains with empty placeholder",width:400,height:300,placeholder:"empty",className:"rounded-lg"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Error Handling",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Invalid Image (Fallback)"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatically shows fallback on error."}),a.jsx(e.Image,{src:"https://invalid-url-that-will-fail.com/image.jpg",alt:"Image with fallback",width:400,height:300,className:"rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Custom Fallback"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Provide your own fallback image."}),a.jsx(e.Image,{src:"https://invalid-url.com/image.jpg",alt:"Custom fallback",width:400,height:300,fallbackSrc:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop",className:"rounded-lg"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Responsive Images",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Full Width Responsive"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Image fills container width with maintained aspect ratio."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop",alt:"Responsive landscape",aspectRatio:"21/9",fill:!0,containerClassName:"w-full rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Grid Responsive Images"}),a.jsx("div",{className:"grid grid-cols-2 md:grid-cols-4 gap-4",children:["photo-1682687220742-aba13b6e50ba","photo-1506905925346-21bda4d32df4","photo-1501594907352-04cda38ebc29","photo-1472214103451-9374bd1c798e"].map((s,l)=>a.jsx(e.Image,{src:`https://images.unsplash.com/${s}?w=300&h=300&fit=crop`,alt:`Gallery image ${l+1}`,aspectRatio:"1/1",fill:!0,containerClassName:"w-full rounded-lg"},s))})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Key Features",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"rocket",children:"🚀"})," ","Lazy Loading"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Native browser lazy loading for better performance and faster page loads."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"sparkles",children:"✨"})," ","Smooth Transitions"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Beautiful fade-in animations and blur effects for a polished loading experience."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"shield",children:"🛡️"})," ","Error Handling"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Automatic fallback images and error states with user-friendly messaging."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"art",children:"🎨"})," ","Aspect Ratios"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"CSS aspect-ratio support for consistent layouts without layout shift."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"mobile",children:"📱"})," ","Responsive"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Fully responsive with flexible sizing options and fill mode support."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"accessibility",children:"♿"})," ","Accessible"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Required alt text and proper ARIA labels for screen readers."})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"Image",defaultValues:{src:"https://picsum.photos/400/300",alt:"Sample image",objectFit:"cover",loading:"lazy",placeholder:"empty",fill:!1,priority:"auto",width:"400",height:"300",aspectRatio:"16/9"},excludeProps:[],children:s=>a.jsx(e.Image,{...s})}),a.jsx(e.AutoPropsTable,{componentName:"Image"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import { Image } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Image
+  src="/path/to/image.jpg"
+  alt="Description"
+  width={400}
+  height={300}
+/>
+
+// With lazy loading and blur placeholder
+<Image
+  src="/landscape.jpg"
+  alt="Mountain landscape"
+  width={800}
+  height={600}
+  loading="lazy"
+  placeholder="blur"
+  className="rounded-lg"
+/>
+
+// Responsive with aspect ratio
+<Image
+  src="/hero.jpg"
+  alt="Hero image"
+  aspectRatio="16/9"
+  fill
+  containerClassName="w-full rounded-xl"
+/>
+
+// Different object-fit modes
+<Image src={src} alt="Cover" objectFit="cover" />
+<Image src={src} alt="Contain" objectFit="contain" />
+<Image src={src} alt="Fill" objectFit="fill" />
+
+// With error handling
+<Image
+  src="/image.jpg"
+  alt="Image with fallback"
+  width={400}
+  height={300}
+  fallbackSrc="/fallback.jpg"
+  onError={() => console.log('Failed to load')}
+  onLoad={() => console.log('Loaded successfully')}
+/>
+
+// Fill parent container (like Next.js)
+<div className="relative w-full h-64">
+  <Image
+    src="/banner.jpg"
+    alt="Banner"
+    fill
+    objectFit="cover"
+  />
+</div>
+
+// With priority loading (above the fold)
+<Image
+  src="/hero.jpg"
+  alt="Hero"
+  width={1200}
+  height={600}
+  loading="eager"
+  priority="high"
+  placeholder="blur"
+/>
+
+// Grid of images
+<div className="grid grid-cols-3 gap-4">
+  {images.map((img) => (
+    <Image
+      key={img.id}
+      src={img.url}
+      alt={img.alt}
+      aspectRatio="1/1"
+      fill
+      containerClassName="w-full rounded-lg"
+    />
+  ))}
+</div>`})})})})]});exports.default=t;

package/documentation/ImplementationExamplesSection-Cxl08TTf.js

@@ -0,0 +1,305 @@
+import { jsxs as t, Fragment as r, jsx as e } from "react/jsx-runtime";
+import { H as s, T as o, C as i, a as m, c as a } from "../index-lfg6LZ1p.js";
+import { Code as n } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const g = () => /* @__PURE__ */ t(r, { children: [
+  /* @__PURE__ */ e(
+    s,
+    {
+      title: "Implementation Examples",
+      description: "Practical code examples for common layout system configurations and patterns.",
+      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-orange-500 via-amber-500 to-yellow-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__ */ t("div", { className: "text-center", children: [
+    /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Implementation Examples" }),
+    /* @__PURE__ */ e(
+      o,
+      {
+        tag: "p",
+        className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Practical code examples for common layout system configurations and patterns"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(m, { title: "Implementation Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
+    /* @__PURE__ */ t("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(n, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+      /* @__PURE__ */ e(o, { tag: "h3", className: "text-base font-semibold", children: "Basic Usage" })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "1. Automatic Routing with menuItems" }),
+        /* @__PURE__ */ t(
+          o,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: [
+              "ThemeProvider automatically generates routes from menuItems. Each menu item with a ",
+              /* @__PURE__ */ e("code", { children: "component" }),
+              " prop becomes a route."
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          a,
+          {
+            language: "tsx",
+            code: `import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@ui/tucu-ui';
+import { Dashboard } from './pages/Dashboard';
+import { Settings } from './pages/Settings';
+import { Profile } from './pages/Profile';
+
+// Menu items with components - routes are generated automatically
+// Note: Use 'path' for internal routing, 'href' for external links
+const menuItems = [
+  {
+    name: 'Dashboard',
+    path: '/', // Internal route path
+    icon: <LucideIcons.Home />,
+    component: <Dashboard />, // This becomes a route
+  },
+  {
+    name: 'Settings',
+    path: '/settings', // Internal route path
+    icon: <LucideIcons.Settings />,
+    component: <Settings />, // This becomes a route
+  },
+  {
+    name: 'Profile',
+    path: '/profile', // Internal route path
+    icon: <LucideIcons.User />,
+    component: <Profile />, // This becomes a route
+  },
+];
+
+function App() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      layout={LAYOUT_OPTIONS.ADMIN}
+      logo={{ path: '/', name: 'My App' }}
+    />
+    {/* No children needed - routing is handled automatically */}
+  );
+}
+
+// Routes are automatically created:
+// / -> Dashboard component
+// /settings -> Settings component
+// /profile -> Profile component`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "2. Landing Page (No Routing)" }),
+        /* @__PURE__ */ t(
+          o,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: [
+              "For landing pages or single-page applications without routing, use ",
+              /* @__PURE__ */ e("code", { children: "customRoutes" }),
+              " with a single route."
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          a,
+          {
+            language: "tsx",
+            code: `import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@ui/tucu-ui';
+import { LandingPage } from './pages/LandingPage';
+
+function App() {
+  return (
+    <ThemeProvider
+      menuItems={[]} // Empty - no navigation needed for landing page
+      layout={LAYOUT_OPTIONS.CLEAN} // Clean layout for landing pages
+      logo={{ path: '/', name: 'My Brand' }}
+      customRoutes={
+        <Routes>
+          <Route path="*" element={<LandingPage />} />
+        </Routes>
+      }
+    />
+  );
+}
+
+// The customRoutes prop overrides automatic routing
+// BrowserRouter is already included in ThemeProvider
+// No need to import or wrap with BrowserRouter`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "3. Custom Routing with customRoutes" }),
+        /* @__PURE__ */ t(
+          o,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: [
+              "For complex routing scenarios, provide your own",
+              " ",
+              /* @__PURE__ */ e("code", { children: "<Routes>" }),
+              " component via",
+              " ",
+              /* @__PURE__ */ e("code", { children: "customRoutes" }),
+              " prop."
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          a,
+          {
+            language: "tsx",
+            code: `import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@ui/tucu-ui';
+import { BrowserRouter } from 'react-router-dom'; // Already included in ThemeProvider
+import { Home } from './pages/Home';
+import { About } from './pages/About';
+import { Contact } from './pages/Contact';
+import { NotFound } from './pages/NotFound';
+
+function App() {
+  // Menu items for navigation (optional - can be empty if using customRoutes)
+  // Note: 'path' is used for internal routing, 'href' would be for external links
+  const menuItems = [
+    {
+      name: 'Home',
+      path: '/', // Internal route path
+      icon: <LucideIcons.Home />,
+    },
+    {
+      name: 'About',
+      path: '/about', // Internal route path
+      icon: <LucideIcons.Info />,
+    },
+    {
+      name: 'Contact',
+      path: '/contact', // Internal route path
+      icon: <LucideIcons.Mail />,
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      menuItems={menuItems} // For navigation menu
+      layout={LAYOUT_OPTIONS.HORIZONTAL}
+      logo={{ path: '/', name: 'My App' }}
+      customRoutes={
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/contact" element={<Contact />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      }
+    />
+  );
+}
+
+// Note: BrowserRouter is already included in ThemeProvider,
+// so you don't need to wrap it again`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "4. Using Theme Hooks" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            language: "tsx",
+            code: `import { useTheme, LAYOUT_OPTIONS } from '@ui/tucu-ui';
+
+function ThemeControls() {
+  const { 
+    mode, 
+    setMode, 
+    layout, 
+    setLayout,
+    primaryPreset,
+    setPrimaryPreset 
+  } = useTheme();
+  
+  return (
+    <div className="space-y-4">
+      <button 
+        onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
+      >
+        Toggle Theme: {mode}
+      </button>
+      
+      <select 
+        value={layout} 
+        onChange={(e) => setLayout(e.target.value as any)}
+      >
+        <option value={LAYOUT_OPTIONS.CLEAN}>Clean</option>
+        <option value={LAYOUT_OPTIONS.ADMIN}>Admin</option>
+        <option value={LAYOUT_OPTIONS.HORIZONTAL}>Horizontal</option>
+      </select>
+      
+      <div>
+        Current Primary Color: {primaryPreset?.label}
+      </div>
+    </div>
+  );
+}
+
+// Usage with ThemeProvider
+function App() {
+  const menuItems = [
+    { 
+      name: 'Theme Controls', 
+      path: '/theme-controls',
+      component: <ThemeControls />
+    }
+  ];
+
+  return <ThemeProvider menuItems={menuItems} />;
+}`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "5. Layout-Specific Configuration" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            language: "tsx",
+            code: `import { ThemeProvider, LAYOUT_OPTIONS } from '@ui/tucu-ui';
+
+function App() {
+  const menuItems = [
+    { name: 'Home', path: '/', icon: <LucideIcons.Home />, component: <Home /> },
+    { name: 'About', path: '/about', icon: <LucideIcons.Info />, component: <About /> },
+  ];
+
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      layout={LAYOUT_OPTIONS.ADMIN}
+      logo={{ path: '/', name: 'My App' }}
+      rightButton={<SettingsButton />}
+      fullWidth={false} // Set to true for full-width content
+      className="custom-layout-class"
+      headerClassName="custom-header-class"
+      contentClassName="custom-content-class"
+    >
+      <YourAppContent />
+    </ThemeProvider>
+  );
+}`
+          }
+        )
+      ] })
+    ] })
+  ] }) }) })
+] });
+export {
+  g as default
+};

package/documentation/{ImplementationExamplesSection-H0mF5teZ.js → ImplementationExamplesSection-mHJwxbf_.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../index-COj1N7FC.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsx(e.Fragment,{children:e.jsx(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.CardTitle,{title:"Implementation Examples",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-gradient-to-br from-indigo-500 via-purple-500 to-violet-500 shadow-md",children:e.jsx(t.Code,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(o.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Basic Usage"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx(o.Typography,{tag:"h4",className:"font-semibold",children:"1. Automatic Routing with menuItems"}),e.jsxs(o.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["ThemeProvider automatically generates routes from menuItems. Each menu item with a ",e.jsx("code",{children:"component"})," prop becomes a route."]}),e.jsx(o.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@ui/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Implementation Examples",description:"Practical code examples for common layout system configurations and patterns.",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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Code,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Implementation Examples"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Practical code examples for common layout system configurations and patterns"})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Implementation Examples",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(o.Code,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h3",className:"text-base font-semibold",children:"Basic Usage"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"1. Automatic Routing with menuItems"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["ThemeProvider automatically generates routes from menuItems. Each menu item with a ",e.jsx("code",{children:"component"})," prop becomes a route."]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@ui/tucu-ui';
 import { Dashboard } from './pages/Dashboard';
 import { Settings } from './pages/Settings';
 import { Profile } from './pages/Profile';
@@ -40,7 +40,7 @@ function App() {
 // Routes are automatically created:
 // / -> Dashboard component
 // /settings -> Settings component
-// /profile -> Profile component`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(o.Typography,{tag:"h4",className:"font-semibold",children:"2. Landing Page (No Routing)"}),e.jsxs(o.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["For landing pages or single-page applications without routing, use ",e.jsx("code",{children:"customRoutes"})," with a single route."]}),e.jsx(o.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@ui/tucu-ui';
+// /profile -> Profile component`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"2. Landing Page (No Routing)"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["For landing pages or single-page applications without routing, use ",e.jsx("code",{children:"customRoutes"})," with a single route."]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@ui/tucu-ui';
 import { LandingPage } from './pages/LandingPage';
 
 function App() {
@@ -60,7 +60,7 @@ function App() {
 
 // The customRoutes prop overrides automatic routing
 // BrowserRouter is already included in ThemeProvider
-// No need to import or wrap with BrowserRouter`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(o.Typography,{tag:"h4",className:"font-semibold",children:"3. Custom Routing with customRoutes"}),e.jsxs(o.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["For complex routing scenarios, provide your own"," ",e.jsx("code",{children:"<Routes>"})," component via"," ",e.jsx("code",{children:"customRoutes"})," prop."]}),e.jsx(o.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@ui/tucu-ui';
+// No need to import or wrap with BrowserRouter`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"3. Custom Routing with customRoutes"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["For complex routing scenarios, provide your own"," ",e.jsx("code",{children:"<Routes>"})," component via"," ",e.jsx("code",{children:"customRoutes"})," prop."]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@ui/tucu-ui';
 import { BrowserRouter } from 'react-router-dom'; // Already included in ThemeProvider
 import { Home } from './pages/Home';
 import { About } from './pages/About';
@@ -106,7 +106,7 @@ function App() {
 }
 
 // Note: BrowserRouter is already included in ThemeProvider,
-// so you don't need to wrap it again`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(o.Typography,{tag:"h4",className:"font-semibold",children:"4. Using Theme Hooks"}),e.jsx(o.CodeBlock,{language:"tsx",code:`import { useTheme, LAYOUT_OPTIONS } from '@ui/tucu-ui';
+// so you don't need to wrap it again`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"4. Using Theme Hooks"}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { useTheme, LAYOUT_OPTIONS } from '@ui/tucu-ui';
 
 function ThemeControls() {
   const { 
@@ -147,18 +147,18 @@ function App() {
   const menuItems = [
     { 
       name: 'Theme Controls', 
-      href: '/theme-controls',
+      path: '/theme-controls',
       component: <ThemeControls />
     }
   ];
 
   return <ThemeProvider menuItems={menuItems} />;
-}`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(o.Typography,{tag:"h4",className:"font-semibold",children:"5. Layout-Specific Configuration"}),e.jsx(o.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS } from '@ui/tucu-ui';
+}`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"5. Layout-Specific Configuration"}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS } from '@ui/tucu-ui';
 
 function App() {
   const menuItems = [
-    { name: 'Home', href: '/', icon: <LucideIcons.Home /> },
-    { name: 'About', href: '/about', icon: <LucideIcons.Info /> },
+    { name: 'Home', path: '/', icon: <LucideIcons.Home />, component: <Home /> },
+    { name: 'About', path: '/about', icon: <LucideIcons.Info />, component: <About /> },
   ];
 
   return (
@@ -175,4 +175,4 @@ function App() {
       <YourAppContent />
     </ThemeProvider>
   );
-}`})]})]})]})})})});exports.default=a;
+}`})]})]})]})})})]});exports.default=a;

package/documentation/ImplementationGuidelinesSection-Bmt5UnLA.js

@@ -0,0 +1,144 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { H as r, T as a, ax as t } from "../index-lfg6LZ1p.js";
+import { BookCheck as l, Code as c, Tag as m, Eye as d, Monitor as g, Zap as p, FileText as h, AlertTriangle as N, Palette as f, Smartphone as w, Ban as v, EyeOff as y, XCircle as u } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const A = () => {
+  const o = [
+    {
+      title: "Semantic HTML",
+      description: "Use semantic HTML elements for better accessibility and SEO.",
+      icon: /* @__PURE__ */ e(c, { className: "h-6 w-6" }),
+      iconBgClassName: "from-green-500 via-emerald-500 to-teal-500"
+    },
+    {
+      title: "Consistent Naming",
+      description: "Follow consistent naming conventions across your codebase.",
+      icon: /* @__PURE__ */ e(m, { className: "h-6 w-6" }),
+      iconBgClassName: "from-blue-500 via-cyan-500 to-sky-500"
+    },
+    {
+      title: "ARIA Attributes",
+      description: "Implement proper ARIA attributes for screen reader support.",
+      icon: /* @__PURE__ */ e(d, { className: "h-6 w-6" }),
+      iconBgClassName: "from-purple-500 via-violet-500 to-indigo-500"
+    },
+    {
+      title: "Cross-Device Testing",
+      description: "Test across different devices and screen sizes.",
+      icon: /* @__PURE__ */ e(g, { className: "h-6 w-6" }),
+      iconBgClassName: "from-orange-500 via-amber-500 to-yellow-500"
+    },
+    {
+      title: "Performance Optimization",
+      description: "Optimize for performance with lazy loading and code splitting.",
+      icon: /* @__PURE__ */ e(p, { className: "h-6 w-6" }),
+      iconBgClassName: "from-pink-500 via-rose-500 to-red-500"
+    },
+    {
+      title: "Document Usage",
+      description: "Document component usage with clear examples and props tables.",
+      icon: /* @__PURE__ */ e(h, { className: "h-6 w-6" }),
+      iconBgClassName: "from-teal-500 via-cyan-500 to-blue-500"
+    }
+  ], n = [
+    {
+      title: "Inconsistent Spacing",
+      description: "Mixing arbitrary values instead of using design tokens.",
+      icon: /* @__PURE__ */ e(N, { className: "h-6 w-6" }),
+      iconBgClassName: "from-red-500 via-rose-500 to-pink-500"
+    },
+    {
+      title: "Mixed Color Systems",
+      description: "Using raw hex values instead of semantic color tokens.",
+      icon: /* @__PURE__ */ e(f, { className: "h-6 w-6" }),
+      iconBgClassName: "from-red-500 via-rose-500 to-pink-500"
+    },
+    {
+      title: "Ignoring Responsive",
+      description: "Not testing across breakpoints and device sizes.",
+      icon: /* @__PURE__ */ e(w, { className: "h-6 w-6" }),
+      iconBgClassName: "from-red-500 via-rose-500 to-pink-500"
+    },
+    {
+      title: "Overriding Styles",
+      description: "Overriding component styles instead of using variants.",
+      icon: /* @__PURE__ */ e(v, { className: "h-6 w-6" }),
+      iconBgClassName: "from-red-500 via-rose-500 to-pink-500"
+    },
+    {
+      title: "Missing Accessibility",
+      description: "Forgetting focus states, labels, and keyboard navigation.",
+      icon: /* @__PURE__ */ e(y, { className: "h-6 w-6" }),
+      iconBgClassName: "from-red-500 via-rose-500 to-pink-500"
+    },
+    {
+      title: "Ignoring Design Tokens",
+      description: "Not following the established token hierarchy.",
+      icon: /* @__PURE__ */ e(u, { className: "h-6 w-6" }),
+      iconBgClassName: "from-red-500 via-rose-500 to-pink-500"
+    }
+  ];
+  return /* @__PURE__ */ s("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(
+      r,
+      {
+        title: "Implementation Guidelines",
+        description: "Best practices and common pitfalls when implementing the design system.",
+        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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ s("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Best Practices" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Follow these guidelines for a consistent and maintainable implementation"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: o.map((i) => /* @__PURE__ */ e(
+        t,
+        {
+          layout: "horizontal",
+          title: i.title,
+          description: i.description,
+          icon: i.icon,
+          iconBgClassName: i.iconBgClassName
+        },
+        i.title
+      )) })
+    ] }),
+    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ s("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Common Pitfalls" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Avoid these common mistakes when working with the design system"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: n.map((i) => /* @__PURE__ */ e(
+        t,
+        {
+          layout: "horizontal",
+          title: i.title,
+          description: i.description,
+          icon: i.icon,
+          iconBgClassName: i.iconBgClassName
+        },
+        i.title
+      )) })
+    ] })
+  ] });
+};
+export {
+  A as default
+};

package/documentation/ImplementationGuidelinesSection-C0DtOFA3.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 n=()=>{const t=[{title:"Semantic HTML",description:"Use semantic HTML elements for better accessibility and SEO.",icon:e.jsx(s.Code,{className:"h-6 w-6"}),iconBgClassName:"from-green-500 via-emerald-500 to-teal-500"},{title:"Consistent Naming",description:"Follow consistent naming conventions across your codebase.",icon:e.jsx(s.Tag,{className:"h-6 w-6"}),iconBgClassName:"from-blue-500 via-cyan-500 to-sky-500"},{title:"ARIA Attributes",description:"Implement proper ARIA attributes for screen reader support.",icon:e.jsx(s.Eye,{className:"h-6 w-6"}),iconBgClassName:"from-purple-500 via-violet-500 to-indigo-500"},{title:"Cross-Device Testing",description:"Test across different devices and screen sizes.",icon:e.jsx(s.Monitor,{className:"h-6 w-6"}),iconBgClassName:"from-orange-500 via-amber-500 to-yellow-500"},{title:"Performance Optimization",description:"Optimize for performance with lazy loading and code splitting.",icon:e.jsx(s.Zap,{className:"h-6 w-6"}),iconBgClassName:"from-pink-500 via-rose-500 to-red-500"},{title:"Document Usage",description:"Document component usage with clear examples and props tables.",icon:e.jsx(s.FileText,{className:"h-6 w-6"}),iconBgClassName:"from-teal-500 via-cyan-500 to-blue-500"}],o=[{title:"Inconsistent Spacing",description:"Mixing arbitrary values instead of using design tokens.",icon:e.jsx(s.AlertTriangle,{className:"h-6 w-6"}),iconBgClassName:"from-red-500 via-rose-500 to-pink-500"},{title:"Mixed Color Systems",description:"Using raw hex values instead of semantic color tokens.",icon:e.jsx(s.Palette,{className:"h-6 w-6"}),iconBgClassName:"from-red-500 via-rose-500 to-pink-500"},{title:"Ignoring Responsive",description:"Not testing across breakpoints and device sizes.",icon:e.jsx(s.Smartphone,{className:"h-6 w-6"}),iconBgClassName:"from-red-500 via-rose-500 to-pink-500"},{title:"Overriding Styles",description:"Overriding component styles instead of using variants.",icon:e.jsx(s.Ban,{className:"h-6 w-6"}),iconBgClassName:"from-red-500 via-rose-500 to-pink-500"},{title:"Missing Accessibility",description:"Forgetting focus states, labels, and keyboard navigation.",icon:e.jsx(s.EyeOff,{className:"h-6 w-6"}),iconBgClassName:"from-red-500 via-rose-500 to-pink-500"},{title:"Ignoring Design Tokens",description:"Not following the established token hierarchy.",icon:e.jsx(s.XCircle,{className:"h-6 w-6"}),iconBgClassName:"from-red-500 via-rose-500 to-pink-500"}];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(a.HeroCard,{title:"Implementation Guidelines",description:"Best practices and common pitfalls when implementing the design system.",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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.BookCheck,{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(a.Typography,{tag:"h2",className:"mb-2",children:"Best Practices"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Follow these guidelines for a consistent and maintainable implementation"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:t.map(i=>e.jsx(a.FeatureCard,{layout:"horizontal",title:i.title,description:i.description,icon:i.icon,iconBgClassName:i.iconBgClassName},i.title))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Common Pitfalls"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Avoid these common mistakes when working with the design system"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:o.map(i=>e.jsx(a.FeatureCard,{layout:"horizontal",title:i.title,description:i.description,icon:i.icon,iconBgClassName:i.iconBgClassName},i.title))})]})]})};exports.default=n;