@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/UsageExamplesSection-BwcRgeyU.js

@@ -0,0 +1,150 @@
+import { jsxs as s, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { H as n, T as o, C as t, c as r } from "../index-19KsCnyX.js";
+import { Code as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ s(i, { children: [
+  /* @__PURE__ */ e(
+    n,
+    {
+      title: "Usage Examples",
+      description: "Practical code examples for using both icon systems. Covers imports, sizing, dynamic rendering, and accessibility 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(m, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ s("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ s("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Code Patterns" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Common icon usage patterns with full code examples"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "space-y-6", children: [
+      {
+        title: "Lucide Icons (Namespace)",
+        description: "Access 1500+ icons via LucideIcons.* dot notation. Supports className, size, color, and strokeWidth props.",
+        code: `import { LucideIcons } from '@e-burgos/tucu-ui';
+
+function MyComponent() {
+  return (
+    <div className="flex gap-4">
+      {/* Sizing via className (Tailwind) */}
+      <LucideIcons.Home className="w-6 h-6 text-gray-600" />
+
+      {/* Sizing via size prop (Lucide-specific) */}
+      <LucideIcons.User size={24} color="currentColor" />
+
+      {/* Custom stroke width */}
+      <LucideIcons.ChevronDown strokeWidth={1.5} />
+
+      {/* Color via Tailwind class */}
+      <LucideIcons.Search className="w-4 h-4 text-blue-500" />
+    </div>
+  );
+}`
+      },
+      {
+        title: "Custom Tucu Icons (Named Exports)",
+        description: "Import 96 custom icons as named exports. Use className with Tailwind utilities for sizing and color.",
+        code: `import {
+  Tucu,
+  HomeIcon,
+  SearchIcon,
+  Bitcoin,
+  Ethereum,
+  Github,
+  Twitter,
+  ClassicLayoutIcon,
+  Sun,
+  Moon,
+} from '@e-burgos/tucu-ui';
+
+function MyApp() {
+  return (
+    <div className="flex gap-4">
+      {/* Brand icon */}
+      <Tucu className="w-8 h-8 text-brand" />
+
+      {/* UI icons — sized via className */}
+      <HomeIcon className="w-6 h-6" />
+      <SearchIcon className="w-5 h-5 text-gray-500" />
+
+      {/* Theme toggle icons */}
+      <Sun className="w-6 h-6" />
+      <Moon className="w-6 h-6" />
+
+      {/* Blockchain icons */}
+      <Bitcoin className="w-6 h-6" />
+      <Ethereum className="w-6 h-6" />
+
+      {/* Social icons */}
+      <Github className="w-5 h-5" />
+      <Twitter className="w-5 h-5" />
+    </div>
+  );
+}`
+      },
+      {
+        title: "Dynamic Icon Rendering",
+        description: "Render icons dynamically from string names using the LucideIcons namespace as a lookup object.",
+        code: `import { LucideIcons } from '@e-burgos/tucu-ui';
+
+// Dynamic icon rendering from string name
+function DynamicIcon({ name, className }: { name: string; className?: string }) {
+  const IconComponent = LucideIcons[name as keyof typeof LucideIcons];
+  
+  if (!IconComponent || typeof IconComponent !== 'function') {
+    return null;
+  }
+
+  return <IconComponent className={className || "w-5 h-5"} />;
+}
+
+// Usage
+<DynamicIcon name="Home" className="w-6 h-6 text-brand" />
+<DynamicIcon name="Settings" className="w-5 h-5" />`
+      },
+      {
+        title: "Accessibility Patterns",
+        description: "Always use aria-hidden for decorative icons and aria-label for interactive standalone icons.",
+        code: `import { LucideIcons } from '@e-burgos/tucu-ui';
+
+// Decorative icons (hidden from screen readers)
+<LucideIcons.Home className="w-6 h-6" aria-hidden="true" />
+
+// Standalone interactive icons (need aria-label)
+<button aria-label="Open settings">
+  <LucideIcons.Settings className="w-5 h-5" />
+</button>
+
+// Icons with visible text (icon is decorative)
+<button>
+  <LucideIcons.Download className="w-4 h-4 mr-2" aria-hidden="true" />
+  Download
+</button>`
+      }
+    ].map((c, a) => /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-4", children: [
+      /* @__PURE__ */ s("div", { children: [
+        /* @__PURE__ */ e(o, { tag: "h3", className: "font-semibold text-lg mb-1", children: c.title }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            tag: "p",
+            className: "text-sm text-gray-500 dark:text-gray-400",
+            children: c.description
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(r, { language: "tsx", code: c.code })
+    ] }) }, a)) })
+  ] })
+] });
+export {
+  x as default
+};

package/documentation/UsageExamplesSection-CRg9RYfR.js

@@ -0,0 +1,84 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const o=[{title:"Lucide Icons (Namespace)",description:"Access 1500+ icons via LucideIcons.* dot notation. Supports className, size, color, and strokeWidth props.",code:`import { LucideIcons } from '@e-burgos/tucu-ui';
+
+function MyComponent() {
+  return (
+    <div className="flex gap-4">
+      {/* Sizing via className (Tailwind) */}
+      <LucideIcons.Home className="w-6 h-6 text-gray-600" />
+
+      {/* Sizing via size prop (Lucide-specific) */}
+      <LucideIcons.User size={24} color="currentColor" />
+
+      {/* Custom stroke width */}
+      <LucideIcons.ChevronDown strokeWidth={1.5} />
+
+      {/* Color via Tailwind class */}
+      <LucideIcons.Search className="w-4 h-4 text-blue-500" />
+    </div>
+  );
+}`},{title:"Custom Tucu Icons (Named Exports)",description:"Import 96 custom icons as named exports. Use className with Tailwind utilities for sizing and color.",code:`import {
+  Tucu,
+  HomeIcon,
+  SearchIcon,
+  Bitcoin,
+  Ethereum,
+  Github,
+  Twitter,
+  ClassicLayoutIcon,
+  Sun,
+  Moon,
+} from '@e-burgos/tucu-ui';
+
+function MyApp() {
+  return (
+    <div className="flex gap-4">
+      {/* Brand icon */}
+      <Tucu className="w-8 h-8 text-brand" />
+
+      {/* UI icons — sized via className */}
+      <HomeIcon className="w-6 h-6" />
+      <SearchIcon className="w-5 h-5 text-gray-500" />
+
+      {/* Theme toggle icons */}
+      <Sun className="w-6 h-6" />
+      <Moon className="w-6 h-6" />
+
+      {/* Blockchain icons */}
+      <Bitcoin className="w-6 h-6" />
+      <Ethereum className="w-6 h-6" />
+
+      {/* Social icons */}
+      <Github className="w-5 h-5" />
+      <Twitter className="w-5 h-5" />
+    </div>
+  );
+}`},{title:"Dynamic Icon Rendering",description:"Render icons dynamically from string names using the LucideIcons namespace as a lookup object.",code:`import { LucideIcons } from '@e-burgos/tucu-ui';
+
+// Dynamic icon rendering from string name
+function DynamicIcon({ name, className }: { name: string; className?: string }) {
+  const IconComponent = LucideIcons[name as keyof typeof LucideIcons];
+  
+  if (!IconComponent || typeof IconComponent !== 'function') {
+    return null;
+  }
+
+  return <IconComponent className={className || "w-5 h-5"} />;
+}
+
+// Usage
+<DynamicIcon name="Home" className="w-6 h-6 text-brand" />
+<DynamicIcon name="Settings" className="w-5 h-5" />`},{title:"Accessibility Patterns",description:"Always use aria-hidden for decorative icons and aria-label for interactive standalone icons.",code:`import { LucideIcons } from '@e-burgos/tucu-ui';
+
+// Decorative icons (hidden from screen readers)
+<LucideIcons.Home className="w-6 h-6" aria-hidden="true" />
+
+// Standalone interactive icons (need aria-label)
+<button aria-label="Open settings">
+  <LucideIcons.Settings className="w-5 h-5" />
+</button>
+
+// Icons with visible text (icon is decorative)
+<button>
+  <LucideIcons.Download className="w-4 h-4 mr-2" aria-hidden="true" />
+  Download
+</button>`}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Usage Examples",description:"Practical code examples for using both icon systems. Covers imports, sizing, dynamic rendering, and accessibility 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(a.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("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Code Patterns"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Common icon usage patterns with full code examples"})]}),e.jsx("div",{className:"space-y-6",children:o.map((c,i)=>e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-lg mb-1",children:c.title}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400",children:c.description})]}),e.jsx(s.CodeBlock,{language:"tsx",code:c.code})]})},i))})]})]})};exports.default=n;

package/documentation/UsingThemeSystemSection-DB_ErOba.js

@@ -0,0 +1,106 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.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:"Using the Theme System",description:"Setup examples for ThemeProvider and the useTheme hook — everything you need to integrate theming in your application.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(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("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"ThemeProvider Setup"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Wrap your application with ThemeProvider to enable theming"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Basic Configuration",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';
+
+function App() {
+  const menuItems = [
+    { label: 'Home', path: '/', icon: HomeIcon },
+    { label: 'Dashboard', path: '/dashboard', icon: DashboardIcon },
+  ];
+
+  return (
+    <ThemeProvider
+      // Theme Style (constrains available layouts)
+      themeStyle="default" // 'default' | 'macos' | 'macos-tahoe'
+
+      // Layout Configuration
+      layout={LAYOUT_OPTIONS.HORIZONTAL} // CLEAN | ADMIN | HORIZONTAL
+      menuItems={menuItems}
+      logo={{ path: '/', name: 'MyApp' }}
+
+      // Color Configuration
+      brandColor="Blue"
+      customPaletteColor={{
+        primary: '#0052ff',
+        darkPrimary: '#578bfa',
+        secondary: '#f3f4f6',
+        darkSecondary: '#172131',
+        accent: '#f7d21a',
+        darkAccent: '#936000',
+        muted: '#4a5565',
+        darkMuted: '#828a99',
+        darkBg: '#030712',
+        lightBg: '#ffffff',
+        lightDark: '#f9fafb',
+        darkLightDark: '#0a101d',
+      }}
+
+      // Theme Settings
+      mode="dark"                    // 'light' | 'dark' (default: 'dark')
+      showSettings={true}
+
+      // Additional Features
+      headerClassName="custom-header"
+      contentClassName="custom-content"
+      fullWidth={false}
+      rightButton={<UserMenu />}
+    >
+      {/* Routes handled automatically by ThemeProvider */}
+    </ThemeProvider>
+  );
+}`})})})]}),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:"useTheme Hook Usage"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Access and control theme state from any component"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Theme Controls Example",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { useTheme, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';
+
+function ThemeControls() {
+  const {
+    // State
+    mode, layout, direction, colorScheme,
+    primaryPreset, secondaryPreset, accentPreset,
+    isSettingsOpen,
+
+    // Setters
+    setMode, setLayout, setDirection,
+    setPrimaryPreset, setSecondaryPreset,
+    setIsSettingsOpen,
+
+    // Actions
+    restoreDefaultColors,
+    applyMacOSTheme,
+    applyMacOSTahoeTheme,
+    applyThemeStyle,
+  } = useTheme();
+
+  return (
+    <div>
+      {/* Mode Toggle */}
+      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
+        Toggle {mode === 'light' ? 'Dark' : 'Light'} Mode
+      </button>
+
+      {/* Layout (only valid options for current theme style) */}
+      <select
+        value={layout}
+        onChange={(e) => setLayout(e.target.value as LAYOUT_OPTIONS)}
+      >
+        <option value={LAYOUT_OPTIONS.CLEAN}>Clean</option>
+        <option value={LAYOUT_OPTIONS.ADMIN}>Admin</option>
+        <option value={LAYOUT_OPTIONS.HORIZONTAL}>Horizontal</option>
+      </select>
+
+      {/* Theme Style Actions */}
+      <button onClick={applyMacOSTheme}>Apply macOS Sonoma</button>
+      <button onClick={applyMacOSTahoeTheme}>Apply macOS Tahoe</button>
+      <button onClick={() => applyThemeStyle('default')}>Reset to Default</button>
+
+      {/* Color Controls */}
+      <button onClick={() => setPrimaryPreset({ label: 'Blue', value: '#105eff' })}>
+        Set Primary: Blue
+      </button>
+
+      {/* Settings Panel */}
+      <button onClick={() => setIsSettingsOpen(!isSettingsOpen)}>
+        {isSettingsOpen ? 'Close' : 'Open'} Settings
+      </button>
+
+      {/* Restore Defaults */}
+      <button onClick={restoreDefaultColors}>Restore Default Colors</button>
+    </div>
+  );
+}`})})})]})]});exports.default=a;

package/documentation/UsingThemeSystemSection-DYUkPUnX.js

@@ -0,0 +1,164 @@
+import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { H as l, T as o, C as a, a as r, c as n } from "../index-19KsCnyX.js";
+import { Code as i } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const g = () => /* @__PURE__ */ t(s, { children: [
+  /* @__PURE__ */ e(
+    l,
+    {
+      title: "Using the Theme System",
+      description: "Setup examples for ThemeProvider and the useTheme hook — everything you need to integrate theming in your application.",
+      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(i, { 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(o, { tag: "h2", className: "mb-2", children: "ThemeProvider Setup" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Wrap your application with ThemeProvider to enable theming"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(r, { title: "Basic Configuration", children: /* @__PURE__ */ e(
+      n,
+      {
+        language: "tsx",
+        code: `import { ThemeProvider, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';
+
+function App() {
+  const menuItems = [
+    { label: 'Home', path: '/', icon: HomeIcon },
+    { label: 'Dashboard', path: '/dashboard', icon: DashboardIcon },
+  ];
+
+  return (
+    <ThemeProvider
+      // Theme Style (constrains available layouts)
+      themeStyle="default" // 'default' | 'macos' | 'macos-tahoe'
+
+      // Layout Configuration
+      layout={LAYOUT_OPTIONS.HORIZONTAL} // CLEAN | ADMIN | HORIZONTAL
+      menuItems={menuItems}
+      logo={{ path: '/', name: 'MyApp' }}
+
+      // Color Configuration
+      brandColor="Blue"
+      customPaletteColor={{
+        primary: '#0052ff',
+        darkPrimary: '#578bfa',
+        secondary: '#f3f4f6',
+        darkSecondary: '#172131',
+        accent: '#f7d21a',
+        darkAccent: '#936000',
+        muted: '#4a5565',
+        darkMuted: '#828a99',
+        darkBg: '#030712',
+        lightBg: '#ffffff',
+        lightDark: '#f9fafb',
+        darkLightDark: '#0a101d',
+      }}
+
+      // Theme Settings
+      mode="dark"                    // 'light' | 'dark' (default: 'dark')
+      showSettings={true}
+
+      // Additional Features
+      headerClassName="custom-header"
+      contentClassName="custom-content"
+      fullWidth={false}
+      rightButton={<UserMenu />}
+    >
+      {/* Routes handled automatically by ThemeProvider */}
+    </ThemeProvider>
+  );
+}`
+      }
+    ) }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "useTheme Hook Usage" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Access and control theme state from any component"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(r, { title: "Theme Controls Example", children: /* @__PURE__ */ e(
+      n,
+      {
+        language: "tsx",
+        code: `import { useTheme, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';
+
+function ThemeControls() {
+  const {
+    // State
+    mode, layout, direction, colorScheme,
+    primaryPreset, secondaryPreset, accentPreset,
+    isSettingsOpen,
+
+    // Setters
+    setMode, setLayout, setDirection,
+    setPrimaryPreset, setSecondaryPreset,
+    setIsSettingsOpen,
+
+    // Actions
+    restoreDefaultColors,
+    applyMacOSTheme,
+    applyMacOSTahoeTheme,
+    applyThemeStyle,
+  } = useTheme();
+
+  return (
+    <div>
+      {/* Mode Toggle */}
+      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
+        Toggle {mode === 'light' ? 'Dark' : 'Light'} Mode
+      </button>
+
+      {/* Layout (only valid options for current theme style) */}
+      <select
+        value={layout}
+        onChange={(e) => setLayout(e.target.value as LAYOUT_OPTIONS)}
+      >
+        <option value={LAYOUT_OPTIONS.CLEAN}>Clean</option>
+        <option value={LAYOUT_OPTIONS.ADMIN}>Admin</option>
+        <option value={LAYOUT_OPTIONS.HORIZONTAL}>Horizontal</option>
+      </select>
+
+      {/* Theme Style Actions */}
+      <button onClick={applyMacOSTheme}>Apply macOS Sonoma</button>
+      <button onClick={applyMacOSTahoeTheme}>Apply macOS Tahoe</button>
+      <button onClick={() => applyThemeStyle('default')}>Reset to Default</button>
+
+      {/* Color Controls */}
+      <button onClick={() => setPrimaryPreset({ label: 'Blue', value: '#105eff' })}>
+        Set Primary: Blue
+      </button>
+
+      {/* Settings Panel */}
+      <button onClick={() => setIsSettingsOpen(!isSettingsOpen)}>
+        {isSettingsOpen ? 'Close' : 'Open'} Settings
+      </button>
+
+      {/* Restore Defaults */}
+      <button onClick={restoreDefaultColors}>Restore Default Colors</button>
+    </div>
+  );
+}`
+      }
+    ) }) })
+  ] })
+] });
+export {
+  g as default
+};