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-sdOMz8GW.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
};
