@e-burgos/tucu-ui 2.0.9 → 2.0.11

package/documentation/{HookDocumentationSection-Dm5vp60W.js → HookDocumentationSection-Baawctkv.js}

@@ -1,16 +1,16 @@
-"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 r=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Hook Documentation",description:"Complete API reference for all 14 hooks with signatures, parameters, return types, and usage examples.",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-indigo-500 via-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.BookOpen,{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:"Responsive & Layout Hooks"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Screen size detection and element measurement"})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useBreakpoint & useIsMobile",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children: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:"Returns the current screen breakpoint name. Built on createBreakpoint from react-use."}),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();
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Hook Documentation",description:"Complete API reference for all 14 hooks with signatures, parameters, return types, and usage examples.",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-indigo-500 via-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.BookOpen,{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:"Responsive & Layout Hooks"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Screen size detection and element measurement"})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useBreakpoint & useIsMobile",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children: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:"Returns the current screen breakpoint name. Built on createBreakpoint from react-use."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border 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:"Returns an object with isMobile boolean. True for xs, sm, md breakpoints (≤768px)."}),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();
+// 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:"Returns an object with isMobile boolean. True for xs, sm, md breakpoints (≤768px)."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const { isMobile } = useIsMobile();
 // Returns: { isMobile: boolean }
 
 // Usage
 if (isMobile) {
   return <MobileLayout />;
 }
-return <DesktopLayout />;`})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useElementSize & useMeasure",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children: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:"useElementSize<T>()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Tracks element dimensions. Returns a callback ref setter (not a RefObject) and size object."}),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<HTMLDivElement>();
+return <DesktopLayout />;`})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useElementSize & useMeasure",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children: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:"useElementSize<T>()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Tracks element dimensions. Returns a callback ref setter (not a RefObject) and size object."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const [ref, { width, height }] = useElementSize<HTMLDivElement>();
 // ref: (node: T | null) => void — callback ref
 // Returns: [callbackRef, { width: number; height: number }]
 
@@ -18,7 +18,7 @@ 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<T>()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Advanced measurement with full bounds. Uses ResizeObserver internally (from react-use)."}),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<HTMLDivElement>();
+);`})})]}),e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useMeasure<T>()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Advanced measurement with full bounds. Uses ResizeObserver internally (from react-use)."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const [ref, bounds] = useMeasure<HTMLDivElement>();
 // bounds: { x, y, width, height, top, right, bottom, left }
 
 return (
@@ -26,22 +26,22 @@ return (
     Position: ({bounds.x}, {bounds.y})
     Size: {bounds.width} × {bounds.height}
   </div>
-);`})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useWindowScroll",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children:e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useWindowScroll()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Returns current scroll position. Custom implementation that detects scroll on window, document, and overflow containers."}),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 { x, y } = useWindowScroll();
+);`})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useWindowScroll",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children:e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useWindowScroll()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Returns current scroll position. Custom implementation that detects scroll on window, document, and overflow containers."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const { x, y } = useWindowScroll();
 // Returns: { x: number; y: number }
 
-// Tracks scroll from window, document, and containers with overflow`})})]})})})})]}),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:"User Interaction Hooks"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Click detection, clipboard, and event handling"})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useClickAway & useCopyToClipboard",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children: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, events?)"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Detects clicks outside a ref element. Re-exported from react-use. Defaults to mousedown + touchstart."}),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<HTMLDivElement>(null);
+// Tracks scroll from window, document, and containers with overflow`})})]})})})})]}),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:"User Interaction Hooks"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Click detection, clipboard, and event handling"})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useClickAway & useCopyToClipboard",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children: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, events?)"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Detects clicks outside a ref element. Re-exported from react-use. Defaults to mousedown + touchstart."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const ref = useRef<HTMLDivElement>(null);
 useClickAway(ref, () => {
   setIsOpen(false);
 });
 // Optional 3rd param: event names array
-// Default: ['mousedown', 'touchstart']`})})]}),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:"Clipboard functionality with state tracking. Re-exported from react-use."}),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 [state, copyToClipboard] = useCopyToClipboard();
+// Default: ['mousedown', 'touchstart']`})})]}),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:"Clipboard functionality with state tracking. Re-exported from react-use."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const [state, copyToClipboard] = useCopyToClipboard();
 // state: { value?: string; error?: Error; noUserInteraction: boolean }
 
 copyToClipboard('Text to copy');
 
 // Check result:
 if (state.value) console.log('Copied:', state.value);
-if (state.error) console.error('Failed:', state.error);`})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useEventListener",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children:e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useEventListener(eventName, handler, element?, options?)"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Type-safe event listener with automatic cleanup. Custom implementation with overloads for window, document, HTMLElement, and MediaQueryList."}),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:`// On window (default target)
+if (state.error) console.error('Failed:', state.error);`})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useEventListener",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children:e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useEventListener(eventName, handler, element?, options?)"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Type-safe event listener with automatic cleanup. Custom implementation with overloads for window, document, HTMLElement, and MediaQueryList."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`// On window (default target)
 useEventListener('keydown', (event) => {
   console.log(event.key);
 });
@@ -52,7 +52,7 @@ useEventListener('click', (event) => {
   console.log('Clicked!', event.clientX);
 }, ref);
 
-// Also exports useIsomorphicLayoutEffect`})})]})})})})]}),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:"UI State Management Hooks"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Zustand-powered global state for UI behaviors"})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useToastStore",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-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 with 5 variants and auto-dismiss."}),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, setToasts } = useToastStore();
+// Also exports useIsomorphicLayoutEffect`})})]})})})})]}),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:"UI State Management Hooks"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Zustand-powered global state for UI behaviors"})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useToastStore",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-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 with 5 variants and auto-dismiss."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const { addToast, dismissToast, toasts, setToasts } = useToastStore();
 
 addToast({
   id: 'unique-id',       // required
@@ -63,15 +63,15 @@ addToast({
 });
 
 dismissToast('unique-id');  // dismiss by id
-dismissToast();             // dismiss all`})})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useGridSwitcher & useLockBodyScroll",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children: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:"useGridSwitcher()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Zustand store for global grid layout switching. Persists state across components."}),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();
+dismissToast();             // dismiss all`})})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useGridSwitcher & useLockBodyScroll",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children: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:"useGridSwitcher()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Zustand store for global grid layout switching. Persists state across components."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const { isGridCompact, setIsGridCompact } = useGridSwitcher();
 // isGridCompact: boolean (default: false)
 
-const toggleLayout = () => setIsGridCompact(!isGridCompact);`})})]}),e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useLockBodyScroll(isLocked)"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Locks body scroll when active. Automatically preserves scrollbar width to prevent layout shift."}),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:`useLockBodyScroll(isModalOpen);
+const toggleLayout = () => setIsGridCompact(!isGridCompact);`})})]}),e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useLockBodyScroll(isLocked)"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Locks body scroll when active. Automatically preserves scrollbar width to prevent layout shift."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`useLockBodyScroll(isModalOpen);
 // Pass true to lock, false to unlock
 // Automatically adds padding-right to compensate scrollbar
 
 const [isOpen, setIsOpen] = useState(false);
-useLockBodyScroll(isOpen);`})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useScrollableSlider",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children:e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useScrollableSlider(defaultActivePath?)"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Horizontal scrollable slider with navigation buttons. Uses react-router-dom internally for active path 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 {
+useLockBodyScroll(isOpen);`})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useScrollableSlider",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children:e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useScrollableSlider(defaultActivePath?)"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Horizontal scrollable slider with navigation buttons. Uses react-router-dom internally for active path detection."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const {
   sliderEl,        // RefObject<HTMLDivElement> — container ref
   sliderPrevBtn,   // RefObject<HTMLButtonElement> — prev button ref
   sliderNextBtn,   // RefObject<HTMLButtonElement> — next button ref
@@ -79,7 +79,7 @@ useLockBodyScroll(isOpen);`})})]})]})})})}),e.jsx(s.CardContainer,{className:"ov
   scrollToTheLeft, // () => void
 } = useScrollableSlider('/');
 // Parameter: defaultActivePath (string, default '/')
-// Note: Uses useLocation() from react-router-dom internally`})})]})})})})]}),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:"Utility Hooks"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Lifecycle and navigation helpers"})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useIsMounted & useAnchorScroll",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children: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:"useIsMounted()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Returns a boolean indicating component mount state. Useful to prevent memory leaks in async operations."}),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 isMounted = useIsMounted();
+// Note: Uses useLocation() from react-router-dom internally`})})]})})})})]}),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:"Utility Hooks"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Lifecycle and navigation helpers"})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"useIsMounted & useAnchorScroll",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-6 p-4 sm:p-6",children: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:"useIsMounted()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Returns a boolean indicating component mount state. Useful to prevent memory leaks in async operations."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const isMounted = useIsMounted();
 // Returns: boolean (true after mount, false before)
 
 useEffect(() => {
@@ -88,7 +88,7 @@ useEffect(() => {
       setState(data); // safe — won't update unmounted component
     }
   });
-}, [isMounted]);`})})]}),e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useAnchorScroll()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Intercepts anchor link clicks and performs smooth scrolling to target elements."}),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:`useAnchorScroll();
+}, [isMounted]);`})})]}),e.jsxs("div",{className:"p-6 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useAnchorScroll()"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"Intercepts anchor link clicks and performs smooth scrolling to target elements."}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`useAnchorScroll();
 // Returns: null
 // Adds global click handler for <a href="#section"> links
 // Automatically smooth-scrolls to the target element
@@ -97,4 +97,4 @@ useEffect(() => {
 function App() {
   useAnchorScroll();
   return <Layout />;
-}`})})]})]})})})})]})]});exports.default=r;
+}`})})]})]})})})})]})]});exports.default=a;

package/documentation/{HookFeaturesSection-XWh6oPJo.js → HookFeaturesSection-C30Q6_Md.js}

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.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/{HookFeaturesSection-C_CfuHPq.js → HookFeaturesSection-CvoRWckR.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
-import { H as i, T as o, ax as r } from "../index-lfg6LZ1p.js";
+import { H as i, T as o, ax as r } from "../index-4GONhZIF.js";
 import { Sparkles as l, Zap as n, Code as m, Package as c, Eye as d, Database as p, Layers as h } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{IconArchitectureSection-2pqGfRWh.js → IconArchitectureSection-DJaQZCiw.js}

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

package/documentation/{IconArchitectureSection-Cyft-9ck.js → IconArchitectureSection-DSKUvUAF.js}

@@ -1,5 +1,5 @@
 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 { H as h, T as a, ax as p, c as u, C as g } from "../index-4GONhZIF.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";

package/documentation/{IconSizingGuideSection-D0WIGnpi.js → IconSizingGuideSection-DR-890fr.js}

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

@@ -1,5 +1,5 @@
 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 { H as d, T as l, C as t } from "../index-4GONhZIF.js";
 import { Ruler as n, Star as r } from "lucide-react";
 import "react-router-dom";
 import "react";
@@ -63,7 +63,7 @@ const b = () => {
         {
           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__ */ e("div", { className: "p-4 rounded-xl bg-gray-100 dark:bg-gray-800/50 border border-border 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 }),

package/documentation/{IconSystemAPISection-BafhVMj8.js → IconSystemAPISection-BWnG2nl0.js}

@@ -1,5 +1,5 @@
 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 { H as d, T as r, C as i, y as a } from "../index-4GONhZIF.js";
 import { Terminal as p } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{IconSystemAPISection-BykSbNfn.js → IconSystemAPISection-Dsg2l2Pe.js}

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.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 → IconSystemBenefitsSection-Drm0OXrA.js}

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.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 → IconSystemBenefitsSection-Dwe4wlPF.js}

@@ -1,5 +1,5 @@
 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 { H as r, T as a, ax as n, C as l } from "../index-4GONhZIF.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";

package/documentation/ImageSection-BSsfirP2.js

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

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

@@ -1,5 +1,5 @@
 import { jsxs as l, Fragment as d, jsx as a } from "react/jsx-runtime";
-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 { 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-4GONhZIF.js";
 import { ImageIcon as g } from "lucide-react";
 import "react-router-dom";
 import "react";
@@ -79,7 +79,7 @@ const y = () => /* @__PURE__ */ l(d, { children: [
           width: 300,
           height: 200,
           objectFit: "cover",
-          className: "rounded-lg border-2 border-gray-200 dark:border-gray-700"
+          className: "rounded-lg border-2 border-border"
         }
       )
     ] }),
@@ -124,7 +124,7 @@ const y = () => /* @__PURE__ */ l(d, { children: [
           width: 300,
           height: 200,
           objectFit: "fill",
-          className: "rounded-lg border-2 border-gray-200 dark:border-gray-700"
+          className: "rounded-lg border-2 border-border"
         }
       )
     ] })