{"version":3,"file":"use-media-query.cjs","names":[],"sources":["../../src/hooks/use-media-query.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/** --------------------------------------------------------------------------\n * * ***React hook for tracking CSS media query matches.***\n * --------------------------------------------------------------------------\n *\n * - ***Primary purpose:***\n *    - Observes a CSS media query using `window.matchMedia`.\n *    - Reactively updates when the media query match state changes.\n *\n * - ***Return behavior:***\n *    - `true`  ➔ media query **matches**\n *    - `false` ➔ media query **does not match**\n *    - `null`  ➔ state not yet evaluated (initial / disabled)\n *\n * - ⚠️ ***Important behavior:***\n *    - This hook is **client-only** (`\"use client\"`).\n *    - The initial value is **`null`** to avoid:\n *        - SSR hydration mismatches\n *        - Accessing `window` during render\n *\n * ---\n *\n * - ***Disabled mode:***\n *    - When `disabled === true`:\n *        - No `matchMedia` listener is registered.\n *        - No state updates occur.\n *        - The hook always returns `null`.\n *\n * ---\n *\n * - ***Designed for:***\n *    - Responsive UI logic.\n *    - Conditional rendering based on viewport size.\n *    - Feature toggles tied to media queries.\n *\n * - ❌ **Not intended for:**\n *    - Server Components.\n *    - Layout decisions that must be static during SSR.\n *\n * @param query - A valid CSS media query string.\n * @param disabled - Disables the media query listener when `true`.\n *\n * @returns\n * - `boolean` ➔ when the query has been evaluated.\n * - `null` ➔ before first evaluation or when disabled.\n *\n * @example\n * **Basic usage.**\n * ```tsx\n * const isDesktop = useMediaQuery(\"(min-width: 1024px)\");\n *\n * if (isDesktop === null) return null;\n *\n * return <div>{isDesktop ? \"Desktop\" : \"Mobile\"}</div>;\n * ```\n *\n * @example\n * **Conditional logic with null guard.**\n * ```tsx\n * const isDark = useMediaQuery(\"(prefers-color-scheme: dark)\");\n *\n * useEffect(() => {\n *   if (isDark === true) enableDarkMode();\n *   if (isDark === false) enableLightMode();\n * }, [isDark]);\n * ```\n *\n * @example\n * **Disabled dynamically.**\n * ```tsx\n * const isMobile = useMediaQuery(\n *   \"(max-width: 640px)\",\n *   isPreviewMode\n * );\n * ```\n */\nexport function useMediaQuery(query: string, disabled = false): boolean | null {\n  const [isMatch, setMatch] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (disabled) return;\n    const mediaQueryList = window.matchMedia(query);\n\n    const handleChange = () => {\n      setMatch(mediaQueryList.matches);\n    };\n    handleChange();\n    mediaQueryList.addEventListener(\"change\", handleChange);\n    return () => {\n      mediaQueryList.removeEventListener(\"change\", handleChange);\n    };\n  }, [disabled, query]);\n\n  return isMatch;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA,SAAgB,cAAc,OAAe,WAAW,OAAuB;CAC7E,MAAM,CAAC,SAAS,gCAAqC,IAAI;CAEzD,2BAAgB;EACd,IAAI,UAAU;EACd,MAAM,iBAAiB,OAAO,WAAW,KAAK;EAE9C,MAAM,qBAAqB;GACzB,SAAS,eAAe,OAAO;EACjC;EACA,aAAa;EACb,eAAe,iBAAiB,UAAU,YAAY;EACtD,aAAa;GACX,eAAe,oBAAoB,UAAU,YAAY;EAC3D;CACF,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,OAAO;AACT"}