@e-burgos/tucu-ui 2.0.7 → 2.0.9

package/documentation/HookFeaturesSection-XWh6oPJo.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const a=[{icon:e.jsx(t.Zap,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Performance Optimized",description:"Minimal re-renders using useRef patterns, ResizeObserver, and event delegation for maximum efficiency.",iconBgClassName:"from-yellow-500 to-amber-500"},{icon:e.jsx(t.Code,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"TypeScript First",description:"Full generic support (e.g. useElementSize<HTMLCanvasElement>) with comprehensive type definitions and IntelliSense.",iconBgClassName:"from-blue-500 to-cyan-500"},{icon:e.jsx(t.Package,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Tree Shaking",description:"Import only the hooks you need — each hook is independently exportable for optimal bundle size.",iconBgClassName:"from-green-500 to-emerald-500"},{icon:e.jsx(t.Eye,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Accessibility Ready",description:"Hooks like useLockBodyScroll preserve scrollbar width to prevent layout shifts, and useEventListener supports keyboard navigation.",iconBgClassName:"from-purple-500 to-violet-500"},{icon:e.jsx(t.Database,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Zustand-Powered State",description:"Global state hooks (useToastStore, useGridSwitcher) are built on Zustand for predictable, minimal-boilerplate state management.",iconBgClassName:"from-orange-500 to-red-500"},{icon:e.jsx(t.Layers,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"14 Hooks Available",description:"From responsive detection to clipboard operations, element measurement, scroll control, and event handling — all in one library.",iconBgClassName:"from-teal-500 to-cyan-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Why Choose Our Hooks?",description:"A battle-tested collection of 14 React hooks covering responsive design, user interactions, state management, and utilities — all with full TypeScript support and tree-shaking.",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-cyan-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Sparkles,{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:"Key Advantages"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Built with modern React patterns and optimized for performance"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:a.map(i=>e.jsx(s.FeatureCard,{layout:"vertical",...i},i.title))})]})]})};exports.default=o;

package/documentation/IconArchitectureSection-2pqGfRWh.js

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const d=()=>{const c=[{icon:e.jsx(t.Sparkles,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Lucide React (1500+ icons)",description:"Full Lucide React library accessible via LucideIcons namespace. Tree-shakeable when consumed as ES modules since lucide-react is marked as external.",iconBgClassName:"from-blue-500 to-indigo-500"},{icon:e.jsx(t.Palette,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Custom Tucu Icons (96)",description:"96 hand-crafted SVG icons: blockchain/crypto, layout controls, social brands, and UI elements. Direct named imports from the library.",iconBgClassName:"from-purple-500 to-pink-500"},{icon:e.jsx(t.Layers,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Unified Import",description:"Both systems accessible from a single package. LucideIcons via namespace, custom icons via named exports.",iconBgClassName:"from-indigo-500 to-violet-500"}],i=`// Two import patterns — one package
+import { LucideIcons } from '@e-burgos/tucu-ui';
+import { Bitcoin, HomeIcon, Github } from '@e-burgos/tucu-ui';
+
+// Lucide: namespace dot notation (1500+ icons)
+<LucideIcons.Home className="w-6 h-6" />
+<LucideIcons.Settings size={24} strokeWidth={1.5} />
+
+// Custom: direct named imports (96 icons)
+<Bitcoin className="w-6 h-6" />
+<HomeIcon className="w-6 h-6" />`,r=[{title:"Lucide Icons",items:["Imported via LucideIcons.* namespace","Props: className, size, color, strokeWidth, fill, stroke","Stroke-based SVGs (outline style)","External dependency — tree-shakeable by consumer bundler","~1500+ icons available"],color:"from-blue-500 to-cyan-500"},{title:"Custom Tucu Icons",items:["Imported as named exports directly","Props: className + all SVGAttributes","Mix of fill and stroke-based SVGs","Bundled inside tucu-ui (always included)","96 specialized icons (crypto, layouts, brands)"],color:"from-purple-500 to-pink-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Icon Architecture",description:"Dual icon system combining 1500+ Lucide React icons with 96 custom-designed icons, all accessible from a single package with TypeScript support.",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(t.Layers,{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:"Two Systems, One Package"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"A unified approach to icons for every use case"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:c.map(a=>e.jsx(s.FeatureCard,{layout:"horizontal",...a},a.title))})]}),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:"Import Patterns"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How to access both icon systems"})]}),e.jsx(s.CodeBlock,{language:"tsx",code:i})]}),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:"Key Differences"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Understanding when to use each icon system"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:r.map((a,o)=>e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-4",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-lg`,children:e.jsx(t.Package,{className:"w-5 h-5 text-white"})}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-lg",children:a.title})]}),e.jsx("div",{className:"space-y-2",children:a.items.map((l,n)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(t.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:l})]},n))})]})},o))})]})]})};exports.default=d;

package/documentation/IconArchitectureSection-Cyft-9ck.js

@@ -0,0 +1,145 @@
+import { jsxs as s, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { H as h, T as a, ax as p, c as u, C as g } from "../index-lfg6LZ1p.js";
+import { Layers as c, Package as x, Check as w, Sparkles as y, Palette as f } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const L = () => {
+  const i = [
+    {
+      icon: /* @__PURE__ */ e(y, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      title: "Lucide React (1500+ icons)",
+      description: "Full Lucide React library accessible via LucideIcons namespace. Tree-shakeable when consumed as ES modules since lucide-react is marked as external.",
+      iconBgClassName: "from-blue-500 to-indigo-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(f, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      title: "Custom Tucu Icons (96)",
+      description: "96 hand-crafted SVG icons: blockchain/crypto, layout controls, social brands, and UI elements. Direct named imports from the library.",
+      iconBgClassName: "from-purple-500 to-pink-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(c, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      title: "Unified Import",
+      description: "Both systems accessible from a single package. LucideIcons via namespace, custom icons via named exports.",
+      iconBgClassName: "from-indigo-500 to-violet-500"
+    }
+  ], o = `// Two import patterns — one package
+import { LucideIcons } from '@e-burgos/tucu-ui';
+import { Bitcoin, HomeIcon, Github } from '@e-burgos/tucu-ui';
+
+// Lucide: namespace dot notation (1500+ icons)
+<LucideIcons.Home className="w-6 h-6" />
+<LucideIcons.Settings size={24} strokeWidth={1.5} />
+
+// Custom: direct named imports (96 icons)
+<Bitcoin className="w-6 h-6" />
+<HomeIcon className="w-6 h-6" />`, r = [
+    {
+      title: "Lucide Icons",
+      items: [
+        "Imported via LucideIcons.* namespace",
+        "Props: className, size, color, strokeWidth, fill, stroke",
+        "Stroke-based SVGs (outline style)",
+        "External dependency — tree-shakeable by consumer bundler",
+        "~1500+ icons available"
+      ],
+      color: "from-blue-500 to-cyan-500"
+    },
+    {
+      title: "Custom Tucu Icons",
+      items: [
+        "Imported as named exports directly",
+        "Props: className + all SVGAttributes",
+        "Mix of fill and stroke-based SVGs",
+        "Bundled inside tucu-ui (always included)",
+        "96 specialized icons (crypto, layouts, brands)"
+      ],
+      color: "from-purple-500 to-pink-500"
+    }
+  ];
+  return /* @__PURE__ */ s(m, { children: [
+    /* @__PURE__ */ e(
+      h,
+      {
+        title: "Icon Architecture",
+        description: "Dual icon system combining 1500+ Lucide React icons with 96 custom-designed icons, all accessible from a single package with TypeScript support.",
+        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(c, { 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: "Two Systems, One Package" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "A unified approach to icons for every use case"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: i.map((t) => /* @__PURE__ */ e(p, { layout: "horizontal", ...t }, t.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: "Import Patterns" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "How to access both icon systems"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(u, { language: "tsx", code: o })
+    ] }),
+    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ s("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Key Differences" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Understanding when to use each icon system"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: r.map((t, l) => /* @__PURE__ */ e(
+        g,
+        {
+          className: "group hover:shadow-large transition-all duration-300",
+          children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-4", children: [
+            /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: `p-2 rounded-lg bg-linear-to-br ${t.color} shadow-lg`,
+                  children: /* @__PURE__ */ e(x, { className: "w-5 h-5 text-white" })
+                }
+              ),
+              /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold text-lg", children: t.title })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "space-y-2", children: t.items.map((n, d) => /* @__PURE__ */ s("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ e(w, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
+              /* @__PURE__ */ e(
+                a,
+                {
+                  tag: "span",
+                  className: "text-sm text-gray-600 dark:text-gray-400",
+                  children: n
+                }
+              )
+            ] }, d)) })
+          ] })
+        },
+        l
+      )) })
+    ] })
+  ] });
+};
+export {
+  L as default
+};

package/documentation/IconSizingGuideSection-D0WIGnpi.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>{const i=[{label:"XS",tailwind:"w-3 h-3",pixels:"12px",usage:"Inline text, badges, micro indicators"},{label:"SM",tailwind:"w-4 h-4",pixels:"16px",usage:"Input icons, small buttons, list markers"},{label:"MD",tailwind:"w-5 h-5",pixels:"20px",usage:"Default button icons, navigation items"},{label:"LG",tailwind:"w-6 h-6",pixels:"24px",usage:"Card headers, standalone icons, large buttons"},{label:"XL",tailwind:"w-8 h-8",pixels:"32px",usage:"Feature highlights, empty states, hero sections"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Icon Sizing Guide",description:"Consistent sizing scale for icons across different UI contexts. Use Tailwind width/height classes for predictable sizing.",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-violet-500 via-purple-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(l.Ruler,{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:"Size Scale"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Visual comparison of icon sizes with recommended use cases"})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-5 gap-4 sm:gap-6",children:i.map(s=>e.jsxs("div",{className:"flex flex-col items-center text-center space-y-3",children:[e.jsx("div",{className:"p-4 rounded-xl bg-gray-100 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 flex items-center justify-center min-h-[80px]",children:e.jsx(l.Star,{className:s.tailwind})}),e.jsxs("div",{className:"space-y-1",children:[e.jsx(a.Typography,{tag:"h3",className:"font-bold text-lg",children:s.label}),e.jsx("code",{className:"text-xs text-brand block",children:s.tailwind}),e.jsx(a.Typography,{tag:"span",className:"text-xs text-gray-500 dark:text-gray-400 block",children:s.pixels})]})]},s.label))})})})]}),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:"When to Use Each Size"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Recommended contexts for each icon size"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",children:i.map(s=>e.jsx(a.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-5 flex items-start gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-gray-100 dark:bg-gray-800",children:e.jsx(l.Star,{className:s.tailwind})}),e.jsxs("div",{className:"flex-1",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-1",children:[e.jsx(a.Typography,{tag:"h3",className:"font-semibold",children:s.label}),e.jsx("code",{className:"text-xs text-gray-500",children:s.tailwind})]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:s.usage})]})]})},s.label))})]})]})};exports.default=t;

package/documentation/IconSizingGuideSection-DWP8TfCJ.js

@@ -0,0 +1,118 @@
+import { jsxs as s, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { H as d, T as l, C as t } from "../index-lfg6LZ1p.js";
+import { Ruler as n, Star as r } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const b = () => {
+  const i = [
+    {
+      label: "XS",
+      tailwind: "w-3 h-3",
+      pixels: "12px",
+      usage: "Inline text, badges, micro indicators"
+    },
+    {
+      label: "SM",
+      tailwind: "w-4 h-4",
+      pixels: "16px",
+      usage: "Input icons, small buttons, list markers"
+    },
+    {
+      label: "MD",
+      tailwind: "w-5 h-5",
+      pixels: "20px",
+      usage: "Default button icons, navigation items"
+    },
+    {
+      label: "LG",
+      tailwind: "w-6 h-6",
+      pixels: "24px",
+      usage: "Card headers, standalone icons, large buttons"
+    },
+    {
+      label: "XL",
+      tailwind: "w-8 h-8",
+      pixels: "32px",
+      usage: "Feature highlights, empty states, hero sections"
+    }
+  ];
+  return /* @__PURE__ */ s(c, { children: [
+    /* @__PURE__ */ e(
+      d,
+      {
+        title: "Icon Sizing Guide",
+        description: "Consistent sizing scale for icons across different UI contexts. Use Tailwind width/height classes for predictable sizing.",
+        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-violet-500 via-purple-500 to-indigo-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__ */ s("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ s("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(l, { tag: "h2", className: "mb-2", children: "Size Scale" }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Visual comparison of icon sizes with recommended use cases"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-5 gap-4 sm:gap-6", children: i.map((a) => /* @__PURE__ */ s(
+        "div",
+        {
+          className: "flex flex-col items-center text-center space-y-3",
+          children: [
+            /* @__PURE__ */ e("div", { className: "p-4 rounded-xl bg-gray-100 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 flex items-center justify-center min-h-[80px]", children: /* @__PURE__ */ e(r, { className: a.tailwind }) }),
+            /* @__PURE__ */ s("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ e(l, { tag: "h3", className: "font-bold text-lg", children: a.label }),
+              /* @__PURE__ */ e("code", { className: "text-xs text-brand block", children: a.tailwind }),
+              /* @__PURE__ */ e(
+                l,
+                {
+                  tag: "span",
+                  className: "text-xs text-gray-500 dark:text-gray-400 block",
+                  children: a.pixels
+                }
+              )
+            ] })
+          ]
+        },
+        a.label
+      )) }) }) })
+    ] }),
+    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ s("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(l, { tag: "h2", className: "mb-2", children: "When to Use Each Size" }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Recommended contexts for each icon size"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: i.map((a) => /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-5 flex items-start gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-gray-100 dark:bg-gray-800", children: /* @__PURE__ */ e(r, { className: a.tailwind }) }),
+        /* @__PURE__ */ s("div", { className: "flex-1", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-1", children: [
+            /* @__PURE__ */ e(l, { tag: "h3", className: "font-semibold", children: a.label }),
+            /* @__PURE__ */ e("code", { className: "text-xs text-gray-500", children: a.tailwind })
+          ] }),
+          /* @__PURE__ */ e(
+            l,
+            {
+              tag: "p",
+              className: "text-sm text-gray-600 dark:text-gray-400",
+              children: a.usage
+            }
+          )
+        ] })
+      ] }) }, a.label)) })
+    ] })
+  ] });
+};
+export {
+  b as default
+};

package/documentation/IconSystemAPISection-BafhVMj8.js

@@ -0,0 +1,138 @@
+import { jsxs as s, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { H as d, T as r, C as i, y as a } from "../index-lfg6LZ1p.js";
+import { Terminal as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const b = () => {
+  const n = [
+    {
+      prop: "className",
+      type: "string",
+      default: "—",
+      description: "Tailwind CSS classes for styling. Use w-*/h-* for sizing, text-* for color."
+    },
+    {
+      prop: "size",
+      type: "number | string",
+      default: "24",
+      description: "Icon size in pixels. Sets both width and height. Alternative to className sizing."
+    },
+    {
+      prop: "color",
+      type: "string",
+      default: "currentColor",
+      description: "SVG stroke color. Inherits from parent text color by default."
+    },
+    {
+      prop: "strokeWidth",
+      type: "number",
+      default: "2",
+      description: "Width of SVG strokes. Use 1.5 for thinner lines, 2.5 for bolder."
+    },
+    {
+      prop: "fill",
+      type: "string",
+      default: "none",
+      description: 'SVG fill color. Most Lucide icons are stroke-based (fill="none").'
+    },
+    {
+      prop: "absoluteStrokeWidth",
+      type: "boolean",
+      default: "false",
+      description: "When true, strokeWidth stays constant regardless of icon size."
+    }
+  ], l = [
+    {
+      prop: "className",
+      type: "string",
+      default: "—",
+      description: "Tailwind CSS classes for sizing (w-*/h-*) and color (text-*)."
+    },
+    {
+      prop: "width / height",
+      type: "number | string",
+      default: "—",
+      description: "SVG width and height attributes. className sizing is preferred."
+    },
+    {
+      prop: "fill",
+      type: "string",
+      default: "varies",
+      description: "SVG fill. Some icons use currentColor, others have hardcoded brand colors."
+    },
+    {
+      prop: "stroke",
+      type: "string",
+      default: "varies",
+      description: "SVG stroke color. Depends on icon type (fill-based vs stroke-based)."
+    },
+    {
+      prop: "...SVGAttributes",
+      type: "SVGAttributes<SVGElement>",
+      default: "—",
+      description: "All standard SVG attributes: opacity, style, onClick, aria-*, etc."
+    }
+  ], o = [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(t) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(t) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (t) => t === "—" ? /* @__PURE__ */ e("span", { className: "text-gray-400", children: "—" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: String(t) })
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ];
+  return /* @__PURE__ */ s(c, { children: [
+    /* @__PURE__ */ e(
+      d,
+      {
+        title: "Icon System API",
+        description: "Complete props reference for both Lucide namespace icons and custom Tucu icons. Each system has a slightly different API surface.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-cyan-500 via-blue-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { 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(r, { tag: "h2", className: "mb-2", children: "Lucide Icons Props" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Props available on LucideIcons.* components"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(a, { columns: o, data: n }) }) })
+    ] }),
+    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ s("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Custom Tucu Icons Props" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Props available on named custom icon exports"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(a, { columns: o, data: l }) }) })
+    ] })
+  ] });
+};
+export {
+  b as default
+};

package/documentation/IconSystemAPISection-BykSbNfn.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const i=[{prop:"className",type:"string",default:"—",description:"Tailwind CSS classes for styling. Use w-*/h-* for sizing, text-* for color."},{prop:"size",type:"number | string",default:"24",description:"Icon size in pixels. Sets both width and height. Alternative to className sizing."},{prop:"color",type:"string",default:"currentColor",description:"SVG stroke color. Inherits from parent text color by default."},{prop:"strokeWidth",type:"number",default:"2",description:"Width of SVG strokes. Use 1.5 for thinner lines, 2.5 for bolder."},{prop:"fill",type:"string",default:"none",description:'SVG fill color. Most Lucide icons are stroke-based (fill="none").'},{prop:"absoluteStrokeWidth",type:"boolean",default:"false",description:"When true, strokeWidth stays constant regardless of icon size."}],o=[{prop:"className",type:"string",default:"—",description:"Tailwind CSS classes for sizing (w-*/h-*) and color (text-*)."},{prop:"width / height",type:"number | string",default:"—",description:"SVG width and height attributes. className sizing is preferred."},{prop:"fill",type:"string",default:"varies",description:"SVG fill. Some icons use currentColor, others have hardcoded brand colors."},{prop:"stroke",type:"string",default:"varies",description:"SVG stroke color. Depends on icon type (fill-based vs stroke-based)."},{prop:"...SVGAttributes",type:"SVGAttributes<SVGElement>",default:"—",description:"All standard SVG attributes: opacity, style, onClick, aria-*, etc."}],r=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>t==="—"?e.jsx("span",{className:"text-gray-400",children:"—"}):e.jsx("code",{className:"text-xs",children:String(t)})},{key:"description",label:"Description"}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Icon System API",description:"Complete props reference for both Lucide namespace icons and custom Tucu icons. Each system has a slightly different API surface.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-cyan-500 via-blue-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.Terminal,{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:"Lucide Icons Props"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Props available on LucideIcons.* components"})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:r,data:i})})})]}),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:"Custom Tucu Icons Props"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Props available on named custom icon exports"})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:r,data:o})})})]})]})};exports.default=n;

package/documentation/IconSystemBenefitsSection-D-Z8n3yK.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const i=[{title:"1500+ Lucide Icons",description:"Full access to the Lucide React library through a single namespace. Covers virtually every UI need without searching for third-party packs.",icon:e.jsx(a.Library,{className:"w-6 h-6"})},{title:"96 Custom Domain Icons",description:"Hand-crafted SVG icons for crypto, layouts, brands, and UI patterns not available in Lucide.",icon:e.jsx(a.Palette,{className:"w-6 h-6"})},{title:"Tree-Shakeable Lucide",description:"lucide-react is marked as external — your bundler only includes the icons you actually reference, keeping bundle size minimal.",icon:e.jsx(a.TreeDeciduous,{className:"w-6 h-6"})},{title:"Tailwind Native",description:"Size with w-*/h-*, color with text-*, opacity, transitions — icons behave like any Tailwind element.",icon:e.jsx(a.Paintbrush,{className:"w-6 h-6"})},{title:"Dark Mode Ready",description:"Icons inherit color via currentColor. Use dark: variants on the parent and icons adapt automatically.",icon:e.jsx(a.Moon,{className:"w-6 h-6"})},{title:"TypeScript Support",description:"Full type inference for both icon systems. LucideIcons namespace provides autocomplete for all icon names.",icon:e.jsx(a.Code2,{className:"w-6 h-6"})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"System Benefits",description:"Why the tucu-ui icon system gives you a great developer experience — performance, flexibility, and consistency in one package.",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.Zap,{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:"Key Benefits"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"What makes the tucu-ui icon system stand out"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:i.map((t,r)=>e.jsx(s.FeatureCard,{title:t.title,description:t.description,icon:t.icon},r))})]}),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:"Summary"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"The icon system at a glance"})]}),e.jsx(s.CardContainer,{children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-3 gap-6 text-center",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Typography,{tag:"h3",className:"text-3xl font-bold text-brand",children:"1500+"}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Lucide icons via namespace"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Typography,{tag:"h3",className:"text-3xl font-bold text-brand",children:"96"}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Custom domain icons"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Typography,{tag:"h3",className:"text-3xl font-bold text-brand",children:"0kb"}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Unused Lucide icons in bundle"})]})]})})})]})]})};exports.default=c;

package/documentation/IconSystemBenefitsSection-DnPy73uB.js

@@ -0,0 +1,120 @@
+import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { H as r, T as a, ax as n, C as l } from "../index-lfg6LZ1p.js";
+import { Zap as o, Library as d, Palette as m, TreeDeciduous as h, Paintbrush as p, Moon as u, Code2 as y } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const k = () => /* @__PURE__ */ t(c, { children: [
+  /* @__PURE__ */ e(
+    r,
+    {
+      title: "System Benefits",
+      description: "Why the tucu-ui icon system gives you a great developer experience — performance, flexibility, and consistency in one package.",
+      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(o, { 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: "Key Benefits" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "What makes the tucu-ui icon system stand out"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: [
+      {
+        title: "1500+ Lucide Icons",
+        description: "Full access to the Lucide React library through a single namespace. Covers virtually every UI need without searching for third-party packs.",
+        icon: /* @__PURE__ */ e(d, { className: "w-6 h-6" })
+      },
+      {
+        title: "96 Custom Domain Icons",
+        description: "Hand-crafted SVG icons for crypto, layouts, brands, and UI patterns not available in Lucide.",
+        icon: /* @__PURE__ */ e(m, { className: "w-6 h-6" })
+      },
+      {
+        title: "Tree-Shakeable Lucide",
+        description: "lucide-react is marked as external — your bundler only includes the icons you actually reference, keeping bundle size minimal.",
+        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6" })
+      },
+      {
+        title: "Tailwind Native",
+        description: "Size with w-*/h-*, color with text-*, opacity, transitions — icons behave like any Tailwind element.",
+        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6" })
+      },
+      {
+        title: "Dark Mode Ready",
+        description: "Icons inherit color via currentColor. Use dark: variants on the parent and icons adapt automatically.",
+        icon: /* @__PURE__ */ e(u, { className: "w-6 h-6" })
+      },
+      {
+        title: "TypeScript Support",
+        description: "Full type inference for both icon systems. LucideIcons namespace provides autocomplete for all icon names.",
+        icon: /* @__PURE__ */ e(y, { className: "w-6 h-6" })
+      }
+    ].map((i, s) => /* @__PURE__ */ e(
+      n,
+      {
+        title: i.title,
+        description: i.description,
+        icon: i.icon
+      },
+      s
+    )) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Summary" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "The icon system at a glance"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-6 text-center", children: [
+      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(a, { tag: "h3", className: "text-3xl font-bold text-brand", children: "1500+" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Lucide icons via namespace"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(a, { tag: "h3", className: "text-3xl font-bold text-brand", children: "96" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Custom domain icons"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(a, { tag: "h3", className: "text-3xl font-bold text-brand", children: "0kb" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Unused Lucide icons in bundle"
+          }
+        )
+      ] })
+    ] }) }) })
+  ] })
+] });
+export {
+  k as default
+};

package/documentation/{ImageSection-CioWvJ8h.js → ImageSection-BDC-XBOn.js}

@@ -1,21 +1,20 @@
 import { jsxs as l, Fragment as d, jsx as a } from "react/jsx-runtime";
-import { T as e, C as s, a as i, at as t, P as o, A as m, c as n } from "../index-B919yoKU.js";
-import "lucide-react";
+import { H as o, C as s, a as i, T as e, aw as t, P as m, A as n, c as h } from "../index-lfg6LZ1p.js";
+import { ImageIcon as g } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const f = () => /* @__PURE__ */ l(d, { children: [
-  /* @__PURE__ */ l("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ a(e, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Image" }),
-    /* @__PURE__ */ a(
-      e,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "A powerful image component inspired by Next.js Image, featuring lazy loading, blur placeholders, error handling, and automatic optimization."
-      }
-    )
-  ] }),
+const y = () => /* @__PURE__ */ l(d, { children: [
+  /* @__PURE__ */ a(
+    o,
+    {
+      title: "Image",
+      description: `A powerful image component inspired by Next.js Image, featuring lazy
+          loading, blur placeholders, error handling, and automatic
+          optimization.`,
+      icon: /* @__PURE__ */ a("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: /* @__PURE__ */ a(g, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+    }
+  ),
   /* @__PURE__ */ a(s, { className: "overflow-hidden", children: /* @__PURE__ */ a(i, { title: "Basic Usage", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
     /* @__PURE__ */ l("div", { children: [
       /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Standard Image" }),
@@ -397,7 +396,7 @@ const f = () => /* @__PURE__ */ l(d, { children: [
     ] })
   ] }) }) }) }),
   /* @__PURE__ */ a(
-    o,
+    m,
     {
       componentName: "Image",
       defaultValues: {
@@ -416,9 +415,9 @@ const f = () => /* @__PURE__ */ l(d, { children: [
       children: (r) => /* @__PURE__ */ a(t, { ...r })
     }
   ),
-  /* @__PURE__ */ a(m, { componentName: "Image" }),
+  /* @__PURE__ */ a(n, { componentName: "Image" }),
   /* @__PURE__ */ a(s, { className: "overflow-hidden", children: /* @__PURE__ */ a(i, { title: "Code Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
-    n,
+    h,
     {
       language: "tsx",
       code: `import { Image } from '@e-burgos/tucu-ui';
@@ -505,5 +504,5 @@ const f = () => /* @__PURE__ */ l(d, { children: [
   ) }) }) })
 ] });
 export {
-  f as default
+  y as default
 };