@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/HamburgerSection-KRh6nrp6.js

@@ -1,19 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("../index-CQ1tqJiQ.js"),n=require("lucide-react");require("react-router-dom");require("react-dom");const l=()=>{const[s,a]=t.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(r.HeroCard,{title:"Hamburger",description:`An animated hamburger menu button component, perfect for mobile
-          navigation menus.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-blue-600 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(n.Menu,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Closed State"}),e.jsx(r.Hamburger,{isOpen:!1,onClick:()=>a(!1)})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Open State"}),e.jsx(r.Hamburger,{isOpen:!0,onClick:()=>a(!0)})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Interactive Example"}),e.jsx(r.Hamburger,{isOpen:s,onClick:()=>a(!s)})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"With Different Variants"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(r.Hamburger,{variant:"solid",color:"primary"}),e.jsx(r.Hamburger,{variant:"ghost",color:"primary"}),e.jsx(r.Hamburger,{variant:"transparent"})]})]})]})})})}),e.jsx(r.PropPlayground,{componentName:"Hamburger",defaultValues:{isOpen:!1,color:"primary",size:"medium",variant:"solid"},excludeProps:["onClick","aria-label","aria-describedby","tooltip","tooltipArrow","tooltipColor","tooltipPlacement","isLoading","loaderSize","loaderVariant","fullWidth","disabled"],children:i=>e.jsx(r.Hamburger,{...i})}),e.jsx(r.AutoPropsTable,{componentName:"Hamburger"}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.CodeBlock,{language:"tsx",code:`import { Hamburger } from '@e-burgos/tucu-ui';
-import { useState } from 'react';
-
-function MyComponent() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <Hamburger
-      isOpen={isOpen}
-      onClick={() => setIsOpen(!isOpen)}
-    />
-  );
-}
-
-// With different variants
-<Hamburger variant="solid" color="primary" />
-<Hamburger variant="ghost" color="primary" />
-<Hamburger variant="transparent" />`})})})})]})};exports.default=l;

package/documentation/HookCategoriesSection-BMus_9Kv.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-CQ1tqJiQ.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const r=[{icon:e.jsx(o.Monitor,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Responsive & Layout",description:"Screen size detection and element measurement hooks",color:"from-blue-500 via-cyan-500 to-teal-500",hooks:[{name:"useBreakpoint",desc:"Returns current breakpoint (xs–4xl)"},{name:"useIsMobile",desc:"Returns { isMobile: boolean }"},{name:"useElementSize",desc:"Tracks element width/height via ResizeObserver"},{name:"useMeasure",desc:"Full bounds (x, y, width, height, top, right, bottom, left)"},{name:"useWindowScroll",desc:"Returns { x, y } scroll position"}]},{icon:e.jsx(o.MousePointer,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"User Interaction",description:"Click detection, clipboard, and event handling",color:"from-purple-500 via-violet-500 to-indigo-500",hooks:[{name:"useClickAway",desc:"Detects clicks outside a ref element"},{name:"useCopyToClipboard",desc:"Clipboard copy with state tracking"},{name:"useEventListener",desc:"Type-safe event listener with auto-cleanup"}]},{icon:e.jsx(o.Layout,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"UI State Management",description:"Global Zustand-based state for UI behavior",color:"from-green-500 via-emerald-500 to-teal-500",hooks:[{name:"useGridSwitcher",desc:"Toggle compact/normal grid layout"},{name:"useLockBodyScroll",desc:"Lock body scroll (preserves scrollbar)"},{name:"useToastStore",desc:"Global toast notifications (Zustand)"},{name:"useScrollableSlider",desc:"Horizontal slider with prev/next controls"}]},{icon:e.jsx(o.Wrench,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Utilities",description:"Lifecycle and navigation helpers",color:"from-orange-500 via-amber-500 to-yellow-500",hooks:[{name:"useIsMounted",desc:"Returns boolean for component mount state"},{name:"useAnchorScroll",desc:"Smooth scroll to anchor links automatically"}]}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Hook Categories",description:"14 hooks organized into 4 categories: Responsive & Layout, User Interaction, UI State Management, and Utilities.",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-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.FolderTree,{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:"Organized Collection"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Each hook category addresses a different development need"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:r.map((t,i)=>e.jsx(s.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 ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,children:t.icon}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:t.title}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400",children:t.description})]})]}),e.jsx("div",{className:"space-y-2",children:t.hooks.map((a,n)=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Badge,{className:"text-dark dark:text-white shrink-0",children:a.name}),e.jsx("span",{className:"text-xs text-gray-500 dark:text-gray-400",children:a.desc})]},n))})]})},i))})]})]})};exports.default=l;

package/documentation/HookCategoriesSection-dhCDwuXZ.js

@@ -1,119 +0,0 @@
-import { jsxs as t, Fragment as l, jsx as e } from "react/jsx-runtime";
-import { H as n, T as a, C as c, K as d } from "../index-BOVWnu1L.js";
-import { FolderTree as m, Monitor as h, MousePointer as p, Layout as u, Wrench as g } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const N = () => /* @__PURE__ */ t(l, { children: [
-  /* @__PURE__ */ e(
-    n,
-    {
-      title: "Hook Categories",
-      description: "14 hooks organized into 4 categories: Responsive & Layout, User Interaction, UI State Management, and Utilities.",
-      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ t("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Organized Collection" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Each hook category addresses a different development need"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
-      {
-        icon: /* @__PURE__ */ e(h, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-        title: "Responsive & Layout",
-        description: "Screen size detection and element measurement hooks",
-        color: "from-blue-500 via-cyan-500 to-teal-500",
-        hooks: [
-          { name: "useBreakpoint", desc: "Returns current breakpoint (xs–4xl)" },
-          { name: "useIsMobile", desc: "Returns { isMobile: boolean }" },
-          { name: "useElementSize", desc: "Tracks element width/height via ResizeObserver" },
-          { name: "useMeasure", desc: "Full bounds (x, y, width, height, top, right, bottom, left)" },
-          { name: "useWindowScroll", desc: "Returns { x, y } scroll position" }
-        ]
-      },
-      {
-        icon: /* @__PURE__ */ e(p, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-        title: "User Interaction",
-        description: "Click detection, clipboard, and event handling",
-        color: "from-purple-500 via-violet-500 to-indigo-500",
-        hooks: [
-          { name: "useClickAway", desc: "Detects clicks outside a ref element" },
-          { name: "useCopyToClipboard", desc: "Clipboard copy with state tracking" },
-          { name: "useEventListener", desc: "Type-safe event listener with auto-cleanup" }
-        ]
-      },
-      {
-        icon: /* @__PURE__ */ e(u, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-        title: "UI State Management",
-        description: "Global Zustand-based state for UI behavior",
-        color: "from-green-500 via-emerald-500 to-teal-500",
-        hooks: [
-          { name: "useGridSwitcher", desc: "Toggle compact/normal grid layout" },
-          { name: "useLockBodyScroll", desc: "Lock body scroll (preserves scrollbar)" },
-          { name: "useToastStore", desc: "Global toast notifications (Zustand)" },
-          { name: "useScrollableSlider", desc: "Horizontal slider with prev/next controls" }
-        ]
-      },
-      {
-        icon: /* @__PURE__ */ e(g, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
-        title: "Utilities",
-        description: "Lifecycle and navigation helpers",
-        color: "from-orange-500 via-amber-500 to-yellow-500",
-        hooks: [
-          { name: "useIsMounted", desc: "Returns boolean for component mount state" },
-          { name: "useAnchorScroll", desc: "Smooth scroll to anchor links automatically" }
-        ]
-      }
-    ].map((o, r) => /* @__PURE__ */ e(
-      c,
-      {
-        className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
-        children: /* @__PURE__ */ t("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
-          /* @__PURE__ */ t("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ e(
-              "div",
-              {
-                className: `p-3 rounded-xl bg-linear-to-br ${o.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,
-                children: o.icon
-              }
-            ),
-            /* @__PURE__ */ t("div", { children: [
-              /* @__PURE__ */ e(
-                a,
-                {
-                  tag: "h3",
-                  className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
-                  children: o.title
-                }
-              ),
-              /* @__PURE__ */ e(
-                a,
-                {
-                  tag: "p",
-                  className: "text-sm text-gray-500 dark:text-gray-400",
-                  children: o.description
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ e("div", { className: "space-y-2", children: o.hooks.map((s, i) => /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e(d, { className: "text-dark dark:text-white shrink-0", children: s.name }),
-            /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: s.desc })
-          ] }, i)) })
-        ] })
-      },
-      r
-    )) })
-  ] })
-] });
-export {
-  N as default
-};

package/documentation/HookDocumentationSection-BN0rEdw2.js

@@ -1,467 +0,0 @@
-import { jsxs as r, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { H as d, T as a, C as s, a as l, c as t } from "../index-BOVWnu1L.js";
-import { BookOpen as n } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const p = () => /* @__PURE__ */ r(o, { children: [
-  /* @__PURE__ */ e(
-    d,
-    {
-      title: "Hook Documentation",
-      description: "Complete API reference for all 14 hooks with signatures, parameters, return types, and usage examples.",
-      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-indigo-500 via-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ r("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ r("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Responsive & Layout Hooks" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Screen size detection and element measurement"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "useBreakpoint & useIsMobile", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__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: "Returns the current screen breakpoint name. Built on createBreakpoint from react-use."
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border 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: "Returns an object with isMobile boolean. True for xs, sm, md breakpoints (≤768px)."
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-          t,
-          {
-            language: "tsx",
-            noExpand: !0,
-            code: `const { isMobile } = useIsMobile();
-// Returns: { isMobile: boolean }
-
-// Usage
-if (isMobile) {
-  return <MobileLayout />;
-}
-return <DesktopLayout />;`
-          }
-        ) })
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "useElementSize & useMeasure", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__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: "useElementSize<T>()" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            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."
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-          t,
-          {
-            language: "tsx",
-            noExpand: !0,
-            code: `const [ref, { width, height }] = useElementSize<HTMLDivElement>();
-// ref: (node: T | null) => void — callback ref
-// Returns: [callbackRef, { width: number; height: number }]
-
-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<T>()" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-gray-600 dark:text-gray-400 mb-4",
-            children: "Advanced measurement with full bounds. Uses ResizeObserver internally (from react-use)."
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-          t,
-          {
-            language: "tsx",
-            noExpand: !0,
-            code: `const [ref, bounds] = useMeasure<HTMLDivElement>();
-// 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(l, { title: "useWindowScroll", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
-      /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useWindowScroll()" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          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."
-        }
-      ),
-      /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-        t,
-        {
-          language: "tsx",
-          noExpand: !0,
-          code: `const { x, y } = useWindowScroll();
-// Returns: { x: number; y: number }
-
-// Tracks scroll from window, document, and containers with overflow`
-        }
-      ) })
-    ] }) }) }) })
-  ] }),
-  /* @__PURE__ */ r("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ r("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "User Interaction Hooks" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Click detection, clipboard, and event handling"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(
-      l,
-      {
-        title: "useClickAway & useCopyToClipboard",
-        className: "mt-2 mb-2",
-        children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__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, events?)" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                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."
-              }
-            ),
-            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-              t,
-              {
-                language: "tsx",
-                noExpand: !0,
-                code: `const ref = useRef<HTMLDivElement>(null);
-useClickAway(ref, () => {
-  setIsOpen(false);
-});
-// Optional 3rd param: event names array
-// Default: ['mousedown', 'touchstart']`
-              }
-            ) })
-          ] }),
-          /* @__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: "Clipboard functionality with state tracking. Re-exported from react-use."
-              }
-            ),
-            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-              t,
-              {
-                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);`
-              }
-            ) })
-          ] })
-        ] }) })
-      }
-    ) }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "useEventListener", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
-      /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useEventListener(eventName, handler, element?, options?)" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          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."
-        }
-      ),
-      /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-        t,
-        {
-          language: "tsx",
-          noExpand: !0,
-          code: `// On window (default target)
-useEventListener('keydown', (event) => {
-  console.log(event.key);
-});
-
-// On a specific element
-const ref = useRef<HTMLDivElement>(null);
-useEventListener('click', (event) => {
-  console.log('Clicked!', event.clientX);
-}, ref);
-
-// Also exports useIsomorphicLayoutEffect`
-        }
-      ) })
-    ] }) }) }) })
-  ] }),
-  /* @__PURE__ */ r("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ r("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "UI State Management Hooks" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Zustand-powered global state for UI behaviors"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "useToastStore", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-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 with 5 variants and auto-dismiss."
-        }
-      ),
-      /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-        t,
-        {
-          language: "tsx",
-          noExpand: !0,
-          code: `const { addToast, dismissToast, toasts, setToasts } = useToastStore();
-
-addToast({
-  id: 'unique-id',       // required
-  message: 'Text',      // required
-  title: 'Title',       // optional
-  variant: 'success',   // 'default' | 'destructive' | 'success' | 'warning' | 'info'
-  timeout: 3000,        // optional, default 3000ms
-});
-
-dismissToast('unique-id');  // dismiss by id
-dismissToast();             // dismiss all`
-        }
-      ) })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(
-      l,
-      {
-        title: "useGridSwitcher & useLockBodyScroll",
-        className: "mt-2 mb-2",
-        children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__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: "useGridSwitcher()" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "p",
-                className: "text-gray-600 dark:text-gray-400 mb-4",
-                children: "Zustand store for global grid layout switching. Persists state across components."
-              }
-            ),
-            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-              t,
-              {
-                language: "tsx",
-                noExpand: !0,
-                code: `const { isGridCompact, setIsGridCompact } = useGridSwitcher();
-// isGridCompact: boolean (default: false)
-
-const toggleLayout = () => setIsGridCompact(!isGridCompact);`
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
-            /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useLockBodyScroll(isLocked)" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                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."
-              }
-            ),
-            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-              t,
-              {
-                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);`
-              }
-            ) })
-          ] })
-        ] }) })
-      }
-    ) }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "useScrollableSlider", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
-      /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useScrollableSlider(defaultActivePath?)" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          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."
-        }
-      ),
-      /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-        t,
-        {
-          language: "tsx",
-          noExpand: !0,
-          code: `const {
-  sliderEl,        // RefObject<HTMLDivElement> — container ref
-  sliderPrevBtn,   // RefObject<HTMLButtonElement> — prev button ref
-  sliderNextBtn,   // RefObject<HTMLButtonElement> — next button ref
-  scrollToTheRight,// () => void
-  scrollToTheLeft, // () => void
-} = useScrollableSlider('/');
-// Parameter: defaultActivePath (string, default '/')
-// Note: Uses useLocation() from react-router-dom internally`
-        }
-      ) })
-    ] }) }) }) })
-  ] }),
-  /* @__PURE__ */ r("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ r("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Utility Hooks" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Lifecycle and navigation helpers"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(
-      l,
-      {
-        title: "useIsMounted & useAnchorScroll",
-        className: "mt-2 mb-2",
-        children: /* @__PURE__ */ e("div", { className: "w-full space-y-6 p-4 sm:p-6", children: /* @__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: "useIsMounted()" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                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."
-              }
-            ),
-            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-              t,
-              {
-                language: "tsx",
-                noExpand: !0,
-                code: `const isMounted = useIsMounted();
-// Returns: boolean (true after mount, false before)
-
-useEffect(() => {
-  fetchData().then((data) => {
-    if (isMounted) {
-      setState(data); // safe — won't update unmounted component
-    }
-  });
-}, [isMounted]);`
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ r("div", { className: "p-6 border rounded-lg", children: [
-            /* @__PURE__ */ e(a, { tag: "h5", className: "font-medium mb-3", children: "useAnchorScroll()" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "p",
-                className: "text-gray-600 dark:text-gray-400 mb-4",
-                children: "Intercepts anchor link clicks and performs smooth scrolling to target elements."
-              }
-            ),
-            /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-              t,
-              {
-                language: "tsx",
-                noExpand: !0,
-                code: `useAnchorScroll();
-// Returns: null
-// Adds global click handler for <a href="#section"> links
-// Automatically smooth-scrolls to the target element
-
-// Usage: Just call in your root component
-function App() {
-  useAnchorScroll();
-  return <Layout />;
-}`
-              }
-            ) })
-          ] })
-        ] }) })
-      }
-    ) })
-  ] })
-] });
-export {
-  p as default
-};