@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/HookCategoriesSection-GgKNpxrq.js

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

@@ -0,0 +1,467 @@
+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-19KsCnyX.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
+};

package/documentation/HookDocumentationSection-DC-uDZ1A.js

@@ -0,0 +1,100 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.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-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-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 }]
+
+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-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 (
+  <div ref={ref}>
+    Position: ({bounds.x}, {bounds.y})
+    Size: {bounds.width} × {bounds.height}
+  </div>
+);`})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"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-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-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-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);
+});
+
+// On a specific element
+const ref = useRef<HTMLDivElement>(null);
+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-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
+  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`})})]})})})}),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-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-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
+  scrollToTheRight,// () => void
+  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-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(() => {
+  fetchData().then((data) => {
+    if (isMounted) {
+      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-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
+
+// Usage: Just call in your root component
+function App() {
+  useAnchorScroll();
+  return <Layout />;
+}`})})]})]})})})})]})]});exports.default=a;

package/documentation/HookFeaturesSection-C46s1I46.js

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