@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/HookDocumentationSection-CkH1P0yQ.mjs

@@ -0,0 +1,272 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { T as a, C as s, a as d, c as t } from "./index-Hq6IUBmn.mjs";
+import { Monitor as o, MousePointer as i, Database as l } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const p = () => /* @__PURE__ */ r("div", { className: "space-y-8", children: [
+  /* @__PURE__ */ r("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Hook Documentation" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Comprehensive guide to all available hooks and their usage"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ r("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Responsive & Layout Hooks", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 via-cyan-500 to-teal-500 shadow-lg", children: /* @__PURE__ */ e(o, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+        /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl font-semibold", children: "Screen Size Detection & Element Measurement" })
+      ] }),
+      /* @__PURE__ */ r("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+        /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useBreakpoint()" }),
+          /* @__PURE__ */ e(
+            a,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400 mb-4",
+              children: "Detects the current screen breakpoint with support for ultra-wide displays."
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            t,
+            {
+              language: "tsx",
+              noExpand: !0,
+              code: `const breakpoint = useBreakpoint();
+// Returns: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
+
+// Breakpoint sizes:
+// xs: 480px, sm: 640px, md: 768px, lg: 1024px
+// xl: 1280px, 2xl: 1440px, 3xl: 1780px, 4xl: 2160px`
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useIsMobile()" }),
+          /* @__PURE__ */ e(
+            a,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400 mb-4",
+              children: "Simplified mobile detection based on breakpoints (xs, sm, md)."
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            t,
+            {
+              language: "tsx",
+              noExpand: !0,
+              code: `const { isMobile } = useIsMobile();
+// Returns: { isMobile: boolean }
+
+// Usage
+return (
+  <div>
+    {isMobile ? <MobileLayout /> : <DesktopLayout />}
+  </div>
+);`
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useElementSize(ref)" }),
+          /* @__PURE__ */ e(
+            a,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400 mb-4",
+              children: "Tracks the dimensions of a DOM element with automatic resize detection."
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            t,
+            {
+              language: "tsx",
+              noExpand: !0,
+              code: `
+const [ref, { width, height }] = useElementSize();
+
+return (
+  <div ref={ref} className="resizable">
+    Size: {width} × {height}px
+  </div>
+);`
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useMeasure(ref)" }),
+          /* @__PURE__ */ e(
+            a,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400 mb-4",
+              children: "Advanced element measurement with ResizeObserver support."
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            t,
+            {
+              language: "tsx",
+              noExpand: !0,
+              code: `const [ref, bounds] = useMeasure();
+// bounds: { x, y, width, height, top, right, bottom, left }
+
+return (
+  <div ref={ref}>
+    Position: ({bounds.x}, {bounds.y})
+    Size: {bounds.width} × {bounds.height}
+  </div>
+);`
+            }
+          ) })
+        ] })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "User Interaction Hooks", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 shadow-lg", children: /* @__PURE__ */ e(i, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+        /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl font-semibold", children: "Click Detection & Clipboard Operations" })
+      ] }),
+      /* @__PURE__ */ r("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+        /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useClickAway(ref, handler)" }),
+          /* @__PURE__ */ e(
+            a,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400 mb-4",
+              children: "Detects clicks outside of a specified element."
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            t,
+            {
+              language: "tsx",
+              noExpand: !0,
+              code: `const ref = useRef(null);
+useClickAway(ref, () => {
+  setIsOpen(false);
+});
+
+return (
+  <div ref={ref}>
+    <button onClick={() => setIsOpen(!isOpen)}>
+      Toggle Menu
+    </button>
+    {isOpen && <Menu />}
+  </div>
+);`
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useCopyToClipboard()" }),
+          /* @__PURE__ */ e(
+            a,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400 mb-4",
+              children: "Provides clipboard functionality with state tracking."
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            t,
+            {
+              language: "tsx",
+              noExpand: !0,
+              code: `const [copiedText, copyToClipboard] = useCopyToClipboard();
+
+const handleCopy = () => {
+  copyToClipboard('Text to copy');
+};
+
+return (
+  <button onClick={handleCopy}>
+    {copiedText ? 'Copied!' : 'Copy'}
+  </button>
+);`
+            }
+          ) })
+        ] })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "UI State Management Hooks", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+        /* @__PURE__ */ e(a, { tag: "h3", className: "text-xl font-semibold", children: "Global State & UI Behavior Management" })
+      ] }),
+      /* @__PURE__ */ r("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useToastStore()" }),
+          /* @__PURE__ */ e(
+            a,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400 mb-4",
+              children: "Zustand-based global toast notification system."
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            t,
+            {
+              language: "tsx",
+              noExpand: !0,
+              code: `const { addToast, dismissToast, toasts } = useToastStore();
+
+const showToast = () => {
+  addToast({
+    id: Date.now().toString(),
+    title: 'Success!',
+    message: 'Operation completed',
+    variant: 'success',
+    timeout: 3000,
+  });
+};
+
+// Toast variants: 'default' | 'destructive' | 'success' | 'warning' | 'info'`
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
+          /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useGridSwitcher()" }),
+          /* @__PURE__ */ e(
+            a,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400 mb-4",
+              children: "Global state management for grid layout switching."
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+            t,
+            {
+              language: "tsx",
+              noExpand: !0,
+              code: `const { isGridCompact, setIsGridCompact } = useGridSwitcher();
+
+const toggleLayout = () => {
+  setIsGridCompact(!isGridCompact);
+};
+
+return (
+  <div className={\`grid \${isGridCompact ? 'grid-cols-4' : 'grid-cols-2'}\`}>
+    {/* Grid items */}
+  </div>
+);`
+            }
+          ) })
+        ] })
+      ] })
+    ] }) }) })
+  ] })
+] });
+export {
+  p as default
+};

package/HookDocumentationSection-b60lRPki.js

@@ -0,0 +1,73 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-CjRk4ezu.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Hook Documentation"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Comprehensive guide to all available hooks and their usage"})]}),e.jsxs("div",{className:"space-y-8",children:[e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Responsive & Layout Hooks",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 via-cyan-500 to-teal-500 shadow-lg",children:e.jsx(a.Monitor,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Screen Size Detection & Element Measurement"})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useBreakpoint()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Detects the current screen breakpoint with support for ultra-wide displays."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const breakpoint = useBreakpoint();
+// Returns: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
+
+// Breakpoint sizes:
+// xs: 480px, sm: 640px, md: 768px, lg: 1024px
+// xl: 1280px, 2xl: 1440px, 3xl: 1780px, 4xl: 2160px`})})]}),e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useIsMobile()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Simplified mobile detection based on breakpoints (xs, sm, md)."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const { isMobile } = useIsMobile();
+// Returns: { isMobile: boolean }
+
+// Usage
+return (
+  <div>
+    {isMobile ? <MobileLayout /> : <DesktopLayout />}
+  </div>
+);`})})]}),e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useElementSize(ref)"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Tracks the dimensions of a DOM element with automatic resize detection."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`
+const [ref, { width, height }] = useElementSize();
+
+return (
+  <div ref={ref} className="resizable">
+    Size: {width} × {height}px
+  </div>
+);`})})]}),e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useMeasure(ref)"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Advanced element measurement with ResizeObserver support."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const [ref, bounds] = useMeasure();
+// bounds: { x, y, width, height, top, right, bottom, left }
+
+return (
+  <div ref={ref}>
+    Position: ({bounds.x}, {bounds.y})
+    Size: {bounds.width} × {bounds.height}
+  </div>
+);`})})]})]})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"User Interaction Hooks",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 shadow-lg",children:e.jsx(a.MousePointer,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Click Detection & Clipboard Operations"})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useClickAway(ref, handler)"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Detects clicks outside of a specified element."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const ref = useRef(null);
+useClickAway(ref, () => {
+  setIsOpen(false);
+});
+
+return (
+  <div ref={ref}>
+    <button onClick={() => setIsOpen(!isOpen)}>
+      Toggle Menu
+    </button>
+    {isOpen && <Menu />}
+  </div>
+);`})})]}),e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useCopyToClipboard()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Provides clipboard functionality with state tracking."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const [copiedText, copyToClipboard] = useCopyToClipboard();
+
+const handleCopy = () => {
+  copyToClipboard('Text to copy');
+};
+
+return (
+  <button onClick={handleCopy}>
+    {copiedText ? 'Copied!' : 'Copy'}
+  </button>
+);`})})]})]})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"UI State Management Hooks",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-lg",children:e.jsx(a.Database,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Global State & UI Behavior Management"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useToastStore()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Zustand-based global toast notification system."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const { addToast, dismissToast, toasts } = useToastStore();
+
+const showToast = () => {
+  addToast({
+    id: Date.now().toString(),
+    title: 'Success!',
+    message: 'Operation completed',
+    variant: 'success',
+    timeout: 3000,
+  });
+};
+
+// Toast variants: 'default' | 'destructive' | 'success' | 'warning' | 'info'`})})]}),e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useGridSwitcher()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Global state management for grid layout switching."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const { isGridCompact, setIsGridCompact } = useGridSwitcher();
+
+const toggleLayout = () => {
+  setIsGridCompact(!isGridCompact);
+};
+
+return (
+  <div className={\`grid \${isGridCompact ? 'grid-cols-4' : 'grid-cols-2'}\`}>
+    {/* Grid items */}
+  </div>
+);`})})]})]})]})})})]})]});exports.default=r;

package/HookFeaturesSection-CFQ-th28.mjs

@@ -0,0 +1,81 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { T as r, C as o } from "./index-Hq6IUBmn.mjs";
+import { Zap as s, Code as l, Package as c, Eye as d } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const y = () => /* @__PURE__ */ i("div", { className: "space-y-8", children: [
+  /* @__PURE__ */ i("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Why Choose Our Hooks?" }),
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Built with modern React patterns and optimized for performance"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6", children: [
+    {
+      title: "Performance Optimized",
+      description: "Built with React best practices and minimal re-renders",
+      icon: /* @__PURE__ */ e(s, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-yellow-500 via-amber-500 to-orange-500"
+    },
+    {
+      title: "TypeScript First",
+      description: "Full TypeScript support with comprehensive type definitions",
+      icon: /* @__PURE__ */ e(l, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-blue-500 via-cyan-500 to-sky-500"
+    },
+    {
+      title: "Tree Shaking",
+      description: "Optimized bundle size with automatic tree shaking",
+      icon: /* @__PURE__ */ e(c, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-green-500 via-emerald-500 to-teal-500"
+    },
+    {
+      title: "Accessibility Ready",
+      description: "Built with accessibility best practices in mind",
+      icon: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-purple-500 via-violet-500 to-indigo-500"
+    }
+  ].map((t, a) => /* @__PURE__ */ e(
+    o,
+    {
+      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
+      children: /* @__PURE__ */ i("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: `p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg hover:shadow-xl`,
+              children: t.icon
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              tag: "h3",
+              className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
+              children: t.title
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 leading-relaxed",
+            children: t.description
+          }
+        )
+      ] })
+    },
+    a
+  )) })
+] });
+export {
+  y as default
+};

package/HookFeaturesSection-CM3rSPy7.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const s=[{title:"Performance Optimized",description:"Built with React best practices and minimal re-renders",icon:e.jsx(r.Zap,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),color:"from-yellow-500 via-amber-500 to-orange-500"},{title:"TypeScript First",description:"Full TypeScript support with comprehensive type definitions",icon:e.jsx(r.Code,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),color:"from-blue-500 via-cyan-500 to-sky-500"},{title:"Tree Shaking",description:"Optimized bundle size with automatic tree shaking",icon:e.jsx(r.Package,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),color:"from-green-500 via-emerald-500 to-teal-500"},{title:"Accessibility Ready",description:"Built with accessibility best practices in mind",icon:e.jsx(r.Eye,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),color:"from-purple-500 via-violet-500 to-indigo-500"}];return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Why Choose Our Hooks?"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 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-4 gap-4 sm:gap-6",children:s.map((i,a)=>e.jsx(t.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:`p-3 rounded-xl bg-linear-to-br ${i.color} group-hover:scale-110 transition-all duration-300 shadow-lg hover:shadow-xl`,children:i.icon}),e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:i.title})]}),e.jsx(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:i.description})]})},a))})]})};exports.default=o;

package/IconArchitectureSection-B44gXgNP.mjs

@@ -0,0 +1,108 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { T as a, C as c } from "./index-Hq6IUBmn.mjs";
+import { Check as n, Sparkles as l, Palette as d, Layers as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const w = () => /* @__PURE__ */ i("div", { className: "space-y-8", children: [
+  /* @__PURE__ */ i("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Icon Architecture" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Dual icon system combining custom design with extensive Lucide React library"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: [
+    {
+      title: "Lucide React Integration",
+      description: "Access to 5000+ high-quality icons through the LucideIcons namespace with full TypeScript support and tree-shaking optimization.",
+      icon: /* @__PURE__ */ e(l, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-blue-500 via-indigo-500 to-purple-500",
+      features: [
+        "Complete Lucide React library (5000+ icons)",
+        "Single namespace import (LucideIcons)",
+        "Automatic tree-shaking for optimal bundle size",
+        "Full TypeScript support with autocomplete",
+        "Consistent styling with currentColor"
+      ]
+    },
+    {
+      title: "Custom Tucu Icons",
+      description: "98+ carefully crafted SVG icons designed specifically for Tucu UI, including blockchain, layout controls, social brands, and specialized UI elements.",
+      icon: /* @__PURE__ */ e(d, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-purple-500 via-pink-500 to-rose-500",
+      features: [
+        "98+ custom-designed icons",
+        "Blockchain & crypto icons",
+        "Layout control icons",
+        "Social media brand icons",
+        "Theme-aware variants",
+        "Optimized SVG format"
+      ]
+    },
+    {
+      title: "Dual Icon System",
+      description: "Seamless integration of custom and Lucide icons in one unified system with consistent API and styling.",
+      icon: /* @__PURE__ */ e(m, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-indigo-500 via-purple-500 to-pink-500",
+      features: [
+        "Unified import pattern",
+        "Consistent styling API",
+        "Easy migration between icon sets",
+        "Performance optimized",
+        "TypeScript support for both"
+      ]
+    }
+  ].map((t, s) => /* @__PURE__ */ e(
+    c,
+    {
+      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
+      children: /* @__PURE__ */ i("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: `p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg hover:shadow-xl`,
+              children: t.icon
+            }
+          ),
+          /* @__PURE__ */ e(
+            a,
+            {
+              tag: "h3",
+              className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
+              children: t.title
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 leading-relaxed",
+            children: t.description
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "space-y-2", children: t.features.map((o, r) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e(n, { className: "w-4 h-4 text-green-500 shrink-0" }),
+          /* @__PURE__ */ e(
+            a,
+            {
+              tag: "span",
+              className: "text-sm text-gray-600 dark:text-gray-400",
+              children: o
+            }
+          )
+        ] }, r)) })
+      ] })
+    },
+    s
+  )) })
+] });
+export {
+  w as default
+};

package/IconArchitectureSection-DNcAfKY5.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const a=[{title:"Lucide React Integration",description:"Access to 5000+ high-quality icons through the LucideIcons namespace with full TypeScript support and tree-shaking optimization.",icon:e.jsx(s.Sparkles,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-blue-500 via-indigo-500 to-purple-500",features:["Complete Lucide React library (5000+ icons)","Single namespace import (LucideIcons)","Automatic tree-shaking for optimal bundle size","Full TypeScript support with autocomplete","Consistent styling with currentColor"]},{title:"Custom Tucu Icons",description:"98+ carefully crafted SVG icons designed specifically for Tucu UI, including blockchain, layout controls, social brands, and specialized UI elements.",icon:e.jsx(s.Palette,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-purple-500 via-pink-500 to-rose-500",features:["98+ custom-designed icons","Blockchain & crypto icons","Layout control icons","Social media brand icons","Theme-aware variants","Optimized SVG format"]},{title:"Dual Icon System",description:"Seamless integration of custom and Lucide icons in one unified system with consistent API and styling.",icon:e.jsx(s.Layers,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-indigo-500 via-purple-500 to-pink-500",features:["Unified import pattern","Consistent styling API","Easy migration between icon sets","Performance optimized","TypeScript support for both"]}];return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Icon Architecture"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Dual icon system combining custom design with extensive Lucide React library"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:a.map((i,r)=>e.jsx(t.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"w-full space-y-4 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:`p-3 rounded-xl bg-linear-to-br ${i.color} group-hover:scale-110 transition-all duration-300 shadow-lg hover:shadow-xl`,children:i.icon}),e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:i.title})]}),e.jsx(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:i.description}),e.jsx("div",{className:"space-y-2",children:i.features.map((o,c)=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0"}),e.jsx(t.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:o})]},c))})]})},r))})]})};exports.default=n;

package/IconSizingGuideSection-CIOX5rAk.mjs

@@ -0,0 +1,69 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { C as l, a as r, T as i, D as n } from "./index-Hq6IUBmn.mjs";
+import { Ruler as c, Star as d } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Icon Sizing Guide", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+  /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+    /* @__PURE__ */ e(i, { tag: "h3", className: "text-xl font-semibold", children: "Standard Icon Sizes" })
+  ] }),
+  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-6", children: [
+    {
+      name: "XS",
+      size: "w-3 h-3",
+      pixels: "12px",
+      use: "Inline text"
+    },
+    {
+      name: "SM",
+      size: "w-4 h-4",
+      pixels: "16px",
+      use: "Small buttons"
+    },
+    {
+      name: "MD",
+      size: "w-6 h-6",
+      pixels: "24px",
+      use: "Default size"
+    },
+    {
+      name: "LG",
+      size: "w-8 h-8",
+      pixels: "32px",
+      use: "Large buttons"
+    },
+    {
+      name: "XL",
+      size: "w-12 h-12",
+      pixels: "48px",
+      use: "Feature icons"
+    }
+  ].map((s, t) => /* @__PURE__ */ a("div", { className: "text-center space-y-3", children: [
+    /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(d, { className: `${s.size} text-brand` }) }),
+    /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e(i, { tag: "h4", className: "font-semibold text-sm", children: s.name }),
+      /* @__PURE__ */ e(
+        i,
+        {
+          tag: "p",
+          className: "text-xs text-gray-500 dark:text-gray-400",
+          children: s.pixels
+        }
+      ),
+      /* @__PURE__ */ e(
+        i,
+        {
+          tag: "p",
+          className: "text-xs text-gray-600 dark:text-gray-400",
+          children: s.use
+        }
+      ),
+      /* @__PURE__ */ e(n, { variant: "outline", className: "text-xs font-mono", children: s.size })
+    ] })
+  ] }, t)) })
+] }) }) }) });
+export {
+  N as default
+};

package/IconSizingGuideSection-u_m129SM.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-CjRk4ezu.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>{const t=[{name:"XS",size:"w-3 h-3",pixels:"12px",use:"Inline text"},{name:"SM",size:"w-4 h-4",pixels:"16px",use:"Small buttons"},{name:"MD",size:"w-6 h-6",pixels:"24px",use:"Default size"},{name:"LG",size:"w-8 h-8",pixels:"32px",use:"Large buttons"},{name:"XL",size:"w-12 h-12",pixels:"48px",use:"Feature icons"}];return e.jsx("div",{className:"space-y-8",children:e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Icon Sizing Guide",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 shadow-lg",children:e.jsx(i.Ruler,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Standard Icon Sizes"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-6",children:t.map((a,l)=>e.jsxs("div",{className:"text-center space-y-3",children:[e.jsx("div",{className:"flex justify-center",children:e.jsx(i.Star,{className:`${a.size} text-brand`})}),e.jsxs("div",{className:"space-y-1",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold text-sm",children:a.name}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-500 dark:text-gray-400",children:a.pixels}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400",children:a.use}),e.jsx(s.Badge,{variant:"outline",className:"text-xs font-mono",children:a.size})]})]},l))})]})})})})};exports.default=r;

package/IconSystemAPISection-BTFd0SEj.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const s=[{prop:"LucideIcons",type:"Namespace",default:"-",description:"Access to 5000+ Lucide React icons through dot notation (e.g., LucideIcons.Home)"},{prop:"Custom Icons",type:"Named Exports",default:"-",description:'98+ custom icons available as named exports (e.g., import { Bitcoin, HomeIcon } from "@e-burgos/tucu-ui")'},{prop:"className",type:"string",default:"-",description:"Tailwind CSS classes for styling (size, color, etc.). Use w-* h-* for sizing."},{prop:"fill",type:"string",default:"currentColor",description:"SVG fill color. Defaults to currentColor for theme integration."},{prop:"stroke",type:"string",default:"currentColor",description:"SVG stroke color for Lucide icons. Defaults to currentColor."}],o=[{key:"prop",label:"Prop",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"default",label:"Default",render:r=>r==="-"?e.jsx("span",{className:"text-gray-400",children:"-"}):e.jsx("code",{className:"text-xs",children:String(r)})},{key:"description",label:"Description"}];return e.jsx("div",{className:"space-y-8",children:e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Icon System API",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:o,data:s})})})})})};exports.default=i;