@e-burgos/tucu-ui 2.5.0 → 2.6.0

package/documentation/ImplementationExamplesSection-DL4lxRDR.js

@@ -0,0 +1,429 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DWDUS-PU.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=[{title:"Admin Layout",description:"Traditional sidebar + header layout for dashboards and management apps.",icon:e.jsx(o.Layout,{className:"w-5 h-5 text-white"}),color:"from-blue-500 to-cyan-500",badge:"admin",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@e-burgos/tucu-ui';
+import { Dashboard } from './pages/Dashboard';
+import { Users } from './pages/Users';
+import { Settings } from './pages/Settings';
+
+const menuItems = [
+  {
+    name: 'Dashboard',
+    path: '/',
+    icon: <LucideIcons.Home />,
+    component: <Dashboard />,
+  },
+  {
+    name: 'Users',
+    path: '/users',
+    icon: <LucideIcons.Users />,
+    component: <Users />,
+  },
+  {
+    name: 'Settings',
+    path: '/settings',
+    icon: <LucideIcons.Settings />,
+    component: <Settings />,
+  },
+];
+
+function App() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      layout={LAYOUT_OPTIONS.ADMIN}
+      logo={{ path: '/', name: 'Admin Panel' }}
+      rightButton={<SettingsButton />}
+      fullWidth={false}
+      headerClassName="border-b border-border"
+      contentClassName="p-6"
+    />
+  );
+}`},{title:"Horizontal Layout",description:"Top navigation bar ideal for content-focused sites and marketing pages.",icon:e.jsx(o.Menu,{className:"w-5 h-5 text-white"}),color:"from-purple-500 to-indigo-500",badge:"horizontal",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@e-burgos/tucu-ui';
+import { Home } from './pages/Home';
+import { Blog } from './pages/Blog';
+import { About } from './pages/About';
+
+const menuItems = [
+  {
+    name: 'Home',
+    path: '/',
+    icon: <LucideIcons.Home />,
+    component: <Home />,
+  },
+  {
+    name: 'Blog',
+    path: '/blog',
+    icon: <LucideIcons.BookOpen />,
+    component: <Blog />,
+  },
+  {
+    name: 'About',
+    path: '/about',
+    icon: <LucideIcons.Info />,
+    component: <About />,
+  },
+];
+
+function App() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      layout={LAYOUT_OPTIONS.HORIZONTAL}
+      logo={{ path: '/', name: 'My Site' }}
+      rightButton={<ThemeToggle />}
+      fullWidth={true}
+    />
+  );
+}`},{title:"Clean Layout",description:"Minimal layout without navigation. Perfect for auth pages and landing pages.",icon:e.jsx(o.Minimize2,{className:"w-5 h-5 text-white"}),color:"from-emerald-500 to-teal-500",badge:"clean",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@e-burgos/tucu-ui';
+import { LoginPage } from './pages/LoginPage';
+import { SignUpPage } from './pages/SignUpPage';
+
+function App() {
+  return (
+    <ThemeProvider
+      menuItems={[]} // No menu needed
+      layout={LAYOUT_OPTIONS.CLEAN}
+      logo={{ path: '/', name: 'My App' }}
+      customRoutes={
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/signup" element={<SignUpPage />} />
+          <Route path="*" element={<LoginPage />} />
+        </Routes>
+      }
+    />
+  );
+}
+
+// Clean layout renders children without any chrome:
+// - No header, no sidebar, no navigation
+// - Full viewport height (100vh)
+// - Flex column layout for centering content`},{title:"macOS Sonoma Layout",description:"Desktop-style layout with frosted glass sidebar, toolbar, and window chrome.",icon:e.jsx(o.Monitor,{className:"w-5 h-5 text-white"}),color:"from-gray-500 to-slate-600",badge:"macos",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@e-burgos/tucu-ui';
+import { Overview } from './pages/Overview';
+import { Library } from './pages/Library';
+import { Preferences } from './pages/Preferences';
+
+const menuItems = [
+  {
+    name: 'Overview',
+    path: '/',
+    icon: <LucideIcons.LayoutDashboard />,
+    component: <Overview />,
+  },
+  {
+    name: 'Library',
+    path: '/library',
+    icon: <LucideIcons.Library />,
+    component: <Library />,
+  },
+  {
+    name: 'Preferences',
+    path: '/preferences',
+    icon: <LucideIcons.Settings />,
+    component: <Preferences />,
+  },
+];
+
+function App() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      layout={LAYOUT_OPTIONS.MACOS}
+      themeStyle="macos" // Activates Sonoma theme + accent bundles
+      logo={{ path: '/', name: 'Finder' }}
+      rightButton={<SearchButton />}
+    />
+  );
+}
+
+// Features:
+// - Frosted glass sidebar with translucent background
+// - Native-style toolbar with centered page title
+// - Responsive: drawer on mobile, sidebar on desktop
+// - 9 Sonoma Accent Bundles (Blue, Purple, Pink, etc.)
+// - Automatic ThemeBackground with 'sonoma' variant`},{title:"macOS Tahoe Layout",description:"macOS 26 Liquid Glass layout with translucent sidebar and refined toolbar.",icon:e.jsx(o.Sparkles,{className:"w-5 h-5 text-white"}),color:"from-indigo-500 to-purple-500",badge:"macos-tahoe",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@e-burgos/tucu-ui';
+import { Dashboard } from './pages/Dashboard';
+import { Projects } from './pages/Projects';
+import { Analytics } from './pages/Analytics';
+
+const menuItems = [
+  {
+    name: 'Dashboard',
+    path: '/',
+    icon: <LucideIcons.LayoutDashboard />,
+    component: <Dashboard />,
+  },
+  {
+    name: 'Projects',
+    path: '/projects',
+    icon: <LucideIcons.FolderKanban />,
+    component: <Projects />,
+  },
+  {
+    name: 'Analytics',
+    path: '/analytics',
+    icon: <LucideIcons.BarChart3 />,
+    component: <Analytics />,
+  },
+];
+
+function App() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      layout={LAYOUT_OPTIONS.MACOS_TAHOE}
+      themeStyle="macos-tahoe" // Activates Tahoe theme + Liquid Glass
+      logo={{ path: '/', name: 'Studio' }}
+      rightButton={<NotificationBell />}
+    />
+  );
+}
+
+// Features:
+// - Liquid Glass sidebar with backdrop-blur and vibrancy
+// - Refined toolbar with centered page title
+// - Dynamic mesh background (radial variant by default)
+// - 9 Tahoe Accent Bundles (Glass, Blue, Purple, Pink, etc.)
+// - Content area with rounded corners and glass surface
+// - Toast notifications with Tahoe styling`},{title:"macOS Tahoe Dock Layout",description:"Dock-based navigation with floating app dock and maximized content area.",icon:e.jsx(o.AppWindow,{className:"w-5 h-5 text-white"}),color:"from-violet-500 to-fuchsia-500",badge:"macos-tahoe-dock",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@e-burgos/tucu-ui';
+import { Player } from './pages/Player';
+import { Browse } from './pages/Browse';
+import { Playlists } from './pages/Playlists';
+
+const menuItems = [
+  {
+    name: 'Player',
+    path: '/',
+    icon: <LucideIcons.Play />,
+    component: <Player />,
+  },
+  {
+    name: 'Browse',
+    path: '/browse',
+    icon: <LucideIcons.Compass />,
+    component: <Browse />,
+  },
+  {
+    name: 'Playlists',
+    path: '/playlists',
+    icon: <LucideIcons.ListMusic />,
+    component: <Playlists />,
+  },
+];
+
+function App() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      layout={LAYOUT_OPTIONS.MACOS_TAHOE_DOCK}
+      themeStyle="macos-tahoe"
+      logo={{ path: '/', name: 'Music' }}
+    />
+  );
+}
+
+// Features:
+// - Floating dock at the bottom with glass effect
+// - Full-width content area (no sidebar)
+// - Toolbar with centered title and optional leading/trailing actions
+// - Dynamic background fills the viewport
+// - Ideal for media apps, full-screen experiences, and immersive UIs
+// - Content area has margin-bottom to accommodate dock height (56px)`},{title:"macOS Sonoma Clean Layout",description:"Minimal Sonoma layout with only background and content — no sidebar or toolbar.",icon:e.jsx(o.Layers,{className:"w-5 h-5 text-white"}),color:"from-slate-400 to-zinc-500",badge:"macos-clean",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@e-burgos/tucu-ui';
+import { LoginPage } from './pages/LoginPage';
+import { WelcomePage } from './pages/WelcomePage';
+
+function App() {
+  return (
+    <ThemeProvider
+      menuItems={[]} // No navigation needed
+      layout={LAYOUT_OPTIONS.MACOS_CLEAN}
+      themeStyle="macos" // Inherits Sonoma theme styling
+      logo={{ path: '/', name: 'My App' }}
+      customRoutes={
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="*" element={<WelcomePage />} />
+        </Routes>
+      }
+    />
+  );
+}
+
+// Features:
+// - Background only (ThemeBackground with 'sonoma' variant) + content slot
+// - No sidebar, toolbar, or navigation chrome
+// - Full viewport (100vh × 100vw) with overflow-auto
+// - Inherits Sonoma accent colors and dark/light mode
+// - Toast notifications still available (MacOSSonomaToast)
+// - Use cases: auth pages, standalone content, onboarding flows`},{title:"macOS Tahoe Clean Layout",description:"Minimal Tahoe layout with Liquid Glass background and content area only.",icon:e.jsx(o.Gem,{className:"w-5 h-5 text-white"}),color:"from-purple-400 to-indigo-500",badge:"macos-tahoe-clean",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@e-burgos/tucu-ui';
+import { AuthPage } from './pages/AuthPage';
+import { FullScreenView } from './pages/FullScreenView';
+
+function App() {
+  return (
+    <ThemeProvider
+      menuItems={[]} // No navigation needed
+      layout={LAYOUT_OPTIONS.MACOS_TAHOE_CLEAN}
+      themeStyle="macos-tahoe" // Inherits Tahoe Liquid Glass styling
+      logo={{ path: '/', name: 'My App' }}
+      customRoutes={
+        <Routes>
+          <Route path="/auth" element={<AuthPage />} />
+          <Route path="*" element={<FullScreenView />} />
+        </Routes>
+      }
+    />
+  );
+}
+
+// Features:
+// - Dynamic background (ThemeBackground with 'radial' variant) + content slot
+// - No sidebar, dock, toolbar, or navigation chrome
+// - Full viewport (100vh × 100vw) with overflow-auto
+// - Inherits Tahoe accent colors, Liquid Glass CSS vars, dark/light mode
+// - Toast notifications still available (MacOSTahoeToast)
+// - Use cases: auth within Tahoe theme, immersive views, splash screens`}],r=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Implementation Examples",description:"Practical code examples for all 8 layout types, routing patterns, and theme configuration.",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:"Complete code examples for all 8 layout types and common integration patterns"})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Layout Examples (All 8 Types)",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Each layout type has specific props and behavior. The"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"ThemeProvider"})," ","component handles routing, theming, and layout rendering. Use"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"LAYOUT_OPTIONS"})," ","enum for type-safe layout selection."]}),e.jsx("div",{className:"space-y-6",children:n.map((a,s)=>e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:`p-2 rounded-lg bg-linear-to-br ${a.color} shadow-md`,children:a.icon}),e.jsxs(t.Typography,{tag:"h4",className:"font-semibold",children:[s+1,". ",a.title]}),e.jsx(t.Badge,{variant:"outline",className:"text-xs",children:a.badge})]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 ml-11",children:a.description}),e.jsx(t.CodeBlock,{language:"tsx",code:a.code})]},s))})]})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Common Patterns",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-8 p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-amber-500 to-orange-500 shadow-md",children:e.jsx(o.Route,{className:"w-5 h-5 text-white"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"Custom Routing with customRoutes"})]}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 ml-11",children:["Override automatic routing with your own"," ",e.jsx("code",{children:"<Routes>"})," for complex scenarios (nested routes, guards, lazy loading)."]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@e-burgos/tucu-ui';
+import { lazy, Suspense } from 'react';
+
+const Home = lazy(() => import('./pages/Home'));
+const About = lazy(() => import('./pages/About'));
+const NotFound = lazy(() => import('./pages/NotFound'));
+
+const menuItems = [
+  { name: 'Home', path: '/', icon: <LucideIcons.Home /> },
+  { name: 'About', path: '/about', icon: <LucideIcons.Info /> },
+];
+
+function App() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      layout={LAYOUT_OPTIONS.HORIZONTAL}
+      logo={{ path: '/', name: 'My App' }}
+      customRoutes={
+        <Suspense fallback={<div>Loading...</div>}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/about" element={<About />} />
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </Suspense>
+      }
+    />
+  );
+}
+
+// Notes:
+// - BrowserRouter is already included in ThemeProvider
+// - customRoutes overrides automatic route generation from menuItems
+// - menuItems still power the navigation menu (sidebar/topnav)`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-pink-500 to-rose-500 shadow-md",children:e.jsx(o.Palette,{className:"w-5 h-5 text-white"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"Theme Style + Layout Constraints"})]}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 ml-11",children:["Each ",e.jsx("code",{children:"themeStyle"})," restricts which layouts are valid. Use ",e.jsx("code",{children:"THEME_STYLE_LAYOUTS"})," to check compatibility."]}),e.jsx(t.CodeBlock,{language:"tsx",code:`// Theme Style → Valid Layouts mapping:
+//
+// themeStyle="default"    → CLEAN, ADMIN, HORIZONTAL
+// themeStyle="macos"      → MACOS, MACOS_CLEAN
+// themeStyle="macos-tahoe"→ MACOS_TAHOE, MACOS_TAHOE_DOCK, MACOS_TAHOE_CLEAN
+
+import { ThemeProvider, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';
+
+// ✅ Correct: Tahoe layout with Tahoe theme
+<ThemeProvider
+  menuItems={menuItems}
+  layout={LAYOUT_OPTIONS.MACOS_TAHOE}
+  themeStyle="macos-tahoe"
+/>
+
+// ✅ Correct: Admin layout with default theme
+<ThemeProvider
+  menuItems={menuItems}
+  layout={LAYOUT_OPTIONS.ADMIN}
+  themeStyle="default"
+/>
+
+// ⚠️ Invalid: ADMIN layout is not valid for "macos-tahoe" theme
+// The layout will fallback to the theme's defaultLayout (MACOS_TAHOE)
+<ThemeProvider
+  menuItems={menuItems}
+  layout={LAYOUT_OPTIONS.ADMIN}
+  themeStyle="macos-tahoe" // Will use MACOS_TAHOE instead
+/>`})]}),e.jsxs("div",{className:"space-y-3",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 to-blue-500 shadow-md",children:e.jsx(o.SlidersHorizontal,{className:"w-5 h-5 text-white"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"Using Theme Hooks for Dynamic Layout"})]}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 ml-11",children:["Access and modify theme state from any child component using"," ",e.jsx("code",{children:"useTheme()"}),"."]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { useTheme, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';
+
+function LayoutSwitcher() {
+  const {
+    mode,
+    setMode,
+    layout,
+    setLayout,
+    colorScheme,        // 'default' | 'macos' | 'macos-tahoe'
+    backgroundVariant,  // 'none' | 'base' | 'sonoma' | 'radial' | 'aurora' | ...
+    setBackgroundVariant,
+    applyMacOSTahoeTheme,  // Switch to full Tahoe theme
+    applyMacOSTheme,       // Switch to full Sonoma theme
+    applyDefaultTheme,     // Switch to default theme
+    restoreDefaultColors,  // Reset colors (theme-aware)
+  } = useTheme();
+
+  return (
+    <div className="space-y-4">
+      {/* Toggle dark/light */}
+      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
+        Mode: {mode}
+      </button>
+
+      {/* Switch entire theme */}
+      <button onClick={applyMacOSTahoeTheme}>
+        Apply Tahoe Theme
+      </button>
+
+      {/* Change background within current theme */}
+      <select
+        value={backgroundVariant}
+        onChange={(e) => setBackgroundVariant(e.target.value)}
+      >
+        <option value="none">None</option>
+        <option value="radial">Radial</option>
+        <option value="aurora">Aurora</option>
+        <option value="sonoma">Sonoma</option>
+      </select>
+
+      {/* Layout only changes within valid options for current theme */}
+      <p>Current: {colorScheme} / {layout}</p>
+    </div>
+  );
+}`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-md",children:e.jsx(o.Paintbrush,{className:"w-5 h-5 text-white"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"Accent Color Bundles (macOS Themes)"})]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 ml-11",children:"macOS themes support 9 accent color bundles that match System Preferences."}),e.jsx(t.CodeBlock,{language:"tsx",code:`import {
+  useTheme,
+  TAHOE_ACCENT_BUNDLES,
+  SONOMA_ACCENT_BUNDLES,
+  buildTahoePresets,
+  buildSonomaPresets,
+} from '@e-burgos/tucu-ui';
+
+function AccentPicker() {
+  const { setPrimaryPreset, setAccentPreset, setDarkPrimaryPreset, setDarkAccentPreset } = useTheme();
+
+  // Apply a Tahoe accent bundle (e.g. "Blue")
+  const applyTahoeAccent = (bundleName: string) => {
+    const bundle = TAHOE_ACCENT_BUNDLES.find(b => b.name === bundleName);
+    if (!bundle) return;
+
+    const presets = buildTahoePresets(bundle);
+    setPrimaryPreset(presets.primaryPreset);
+    setAccentPreset(presets.accentPreset);
+    setDarkPrimaryPreset(presets.darkPrimaryPreset);
+    setDarkAccentPreset(presets.darkAccentPreset);
+  };
+
+  return (
+    <div className="flex gap-2">
+      {TAHOE_ACCENT_BUNDLES.map((bundle) => (
+        <button
+          key={bundle.name}
+          onClick={() => applyTahoeAccent(bundle.name)}
+          className="w-6 h-6 rounded-full border-2 border-white/50"
+          style={{ background: bundle.primary }}
+          title={bundle.name}
+        />
+      ))}
+    </div>
+  );
+}
+
+// Available bundles:
+// Tahoe:  Glass, Blue, Purple, Pink, Red, Orange, Yellow, Green, Graphite
+// Sonoma: Blue, Purple, Pink, Red, Orange, Yellow, Green, Graphite, Multicolor`})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"ThemeProvider Props Reference",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:[{key:"prop",label:"Prop",render:a=>e.jsx("code",{className:"font-mono text-xs",children:a})},{key:"type",label:"Type",render:a=>e.jsx("code",{className:"font-mono text-xs",children:a})},{key:"default",label:"Default",className:"text-gray-500"},{key:"description",label:"Description",className:"text-gray-600 dark:text-gray-400"}],data:[{prop:"menuItems",type:"IMenuItem[]",default:"[]",description:"Navigation items. Each with name, path, icon, and optional component."},{prop:"layout",type:"LAYOUT_OPTIONS",default:"horizontal",description:"Layout type. Must be valid for the current themeStyle."},{prop:"themeStyle",type:"'default' | 'macos' | 'macos-tahoe'",default:"default",description:"Theme style preset. Determines valid layouts and visual system."},{prop:"logo",type:"LogoPropTypes",default:"—",description:"Logo config: path (route), name (alt text), optional image."},{prop:"rightButton",type:"ReactNode",default:"—",description:"Element rendered in header/toolbar trailing area."},{prop:"customRoutes",type:"ReactNode",default:"—",description:"Custom Routes element. Overrides auto-generated routing."},{prop:"fullWidth",type:"boolean",default:"false",description:"Remove content max-width constraint for full-width layouts."},{prop:"className",type:"string",default:"—",description:"Root layout container class."},{prop:"headerClassName",type:"string",default:"—",description:"Header/toolbar container class for custom styling."},{prop:"contentClassName",type:"string",default:"—",description:"Content area class for padding/spacing overrides."}],resizable:!1})})})})]});exports.default=r;

package/documentation/ImplementationGuidelinesSection-DNJwGuZi.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-DoxeCFUJ.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-nkcQfH3s.js

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

package/documentation/ImplementationStatusSection-CtqaxsyY.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DWDUS-PU.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const r=[{icon:e.jsx(a.CheckCircle,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Fully Accessible",description:"Input, Checkbox, Modal, Alert, Button, Tabs, Drawer, Select — all with ARIA attributes and keyboard support.",iconBgClassName:"from-green-500 to-emerald-500"},{icon:e.jsx(a.Keyboard,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Keyboard Navigation",description:"Tab, Escape, Enter/Space, Arrow keys — all interactive components are fully operable without a mouse.",iconBgClassName:"from-blue-500 to-cyan-500"},{icon:e.jsx(a.Volume2,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Screen Reader Ready",description:"Semantic HTML, ARIA labels, live regions, role attributes, and aria-describedby connections throughout.",iconBgClassName:"from-purple-500 to-violet-500"},{icon:e.jsx(a.AlertTriangle,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Known Limitation",description:"Modal component lacks focus trapping (Tab can escape). Drawer has full focus trap — Modal improvement planned.",iconBgClassName:"from-amber-500 to-orange-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Implementation Status",description:"Current state of accessibility compliance across the tucu-ui component library. We follow WCAG 2.1 AA guidelines and are transparent about our progress.",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-amber-500 via-yellow-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.Activity,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Current State"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Overview of accessibility features across core components"})]}),e.jsx(t.Alert,{variant:"info",dismissible:!1,children:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Info,{className:"h-5 w-5 shrink-0"}),e.jsx(t.Typography,{tag:"p",className:"text-sm",children:"This library is actively working towards full accessibility compliance. Most interactive components include proper ARIA attributes, keyboard navigation, and screen reader support."})]})}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:r.map(s=>e.jsx(t.FeatureCard,{layout:"horizontal",...s},s.title))})]})]})};exports.default=i;

package/documentation/ImplementationStatusSection-lv5t0EIh.js

@@ -0,0 +1,62 @@
+import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { H as i, T as a, aj as o, ax as l } from "../index-DoxeCFUJ.js";
+import { Activity as n, Info as c, CheckCircle as m, Keyboard as d, Volume2 as p, AlertTriangle as h } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => /* @__PURE__ */ t(s, { children: [
+  /* @__PURE__ */ e(
+    i,
+    {
+      title: "Implementation Status",
+      description: "Current state of accessibility compliance across the tucu-ui component library. We follow WCAG 2.1 AA guidelines and are transparent about our progress.",
+      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-amber-500 via-yellow-500 to-orange-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("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Current State" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Overview of accessibility features across core components"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(o, { variant: "info", dismissible: !1, children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e(c, { className: "h-5 w-5 shrink-0" }),
+      /* @__PURE__ */ e(a, { tag: "p", className: "text-sm", children: "This library is actively working towards full accessibility compliance. Most interactive components include proper ARIA attributes, keyboard navigation, and screen reader support." })
+    ] }) }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: [
+      {
+        icon: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Fully Accessible",
+        description: "Input, Checkbox, Modal, Alert, Button, Tabs, Drawer, Select — all with ARIA attributes and keyboard support.",
+        iconBgClassName: "from-green-500 to-emerald-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Keyboard Navigation",
+        description: "Tab, Escape, Enter/Space, Arrow keys — all interactive components are fully operable without a mouse.",
+        iconBgClassName: "from-blue-500 to-cyan-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Screen Reader Ready",
+        description: "Semantic HTML, ARIA labels, live regions, role attributes, and aria-describedby connections throughout.",
+        iconBgClassName: "from-purple-500 to-violet-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Known Limitation",
+        description: "Modal component lacks focus trapping (Tab can escape). Drawer has full focus trap — Modal improvement planned.",
+        iconBgClassName: "from-amber-500 to-orange-500"
+      }
+    ].map((r) => /* @__PURE__ */ e(l, { layout: "horizontal", ...r }, r.title)) })
+  ] })
+] });
+export {
+  N as default
+};