{"version":3,"file":"use-breakpoint.cjs","names":[],"sources":["../../src/hooks/use-breakpoint.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n/**\n * Breakpoint keys exposed by the SDK. Values mirror the CSS tokens\n * `--tempest-bp-xs|sm|md|lg|xl|2xl` defined in `styles/colors.css`.\n */\nexport type Breakpoint = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\n/** Pixel value paired with each breakpoint key. */\nexport const BREAKPOINTS: Record<Breakpoint, number> = {\n    xs: 480,\n    sm: 640,\n    md: 768,\n    lg: 1024,\n    xl: 1280,\n    \"2xl\": 1536,\n};\n\nconst ORDER: readonly Breakpoint[] = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\"] as const;\n\nfunction resolveCurrent(width: number): Breakpoint {\n    let current: Breakpoint = \"xs\";\n    for (const key of ORDER) {\n        if (width >= BREAKPOINTS[key]) {\n            current = key;\n        }\n    }\n    return current;\n}\n\nexport interface BreakpointHelpers {\n    /** Current breakpoint key (the largest one whose min-width is matched). */\n    current: Breakpoint;\n    /** Window width in pixels at last update. `0` when SSR. */\n    width: number;\n    /** True when viewport width is `>=` the given breakpoint. */\n    above: (bp: Breakpoint) => boolean;\n    /** True when viewport width is `<` the given breakpoint. */\n    below: (bp: Breakpoint) => boolean;\n    /** Convenience flags mapping to typical device shapes. */\n    isMobile: boolean;\n    isTablet: boolean;\n    isDesktop: boolean;\n}\n\n/**\n * Reactive viewport-breakpoint hook.\n *\n * Returns the current breakpoint key plus `above` / `below` helpers and\n * `isMobile` / `isTablet` / `isDesktop` flags. SSR-safe — returns `xs` /\n * `width: 0` on the server, then updates after mount.\n */\nexport function useBreakpoint(): BreakpointHelpers {\n    const [width, setWidth] = useState<number>(() =>\n        typeof window === \"undefined\" ? 0 : window.innerWidth,\n    );\n\n    useEffect(() => {\n        if (typeof window === \"undefined\") return;\n        const onResize = (): void => setWidth(window.innerWidth);\n        onResize();\n        window.addEventListener(\"resize\", onResize, { passive: true });\n        return () => window.removeEventListener(\"resize\", onResize);\n    }, []);\n\n    const current = resolveCurrent(width);\n    const above = (bp: Breakpoint): boolean => width >= BREAKPOINTS[bp];\n    const below = (bp: Breakpoint): boolean => width < BREAKPOINTS[bp];\n\n    return {\n        current,\n        width,\n        above,\n        below,\n        isMobile: below(\"md\"),\n        isTablet: above(\"md\") && below(\"lg\"),\n        isDesktop: above(\"lg\"),\n    };\n}\n"],"mappings":"uBASA,IAAa,EAA0C,CACnD,GAAI,IACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACJ,GAAI,KACJ,MAAO,IACX,EAEM,EAA+B,CAAC,KAAM,KAAM,KAAM,KAAM,KAAM,KAAK,EAEzE,SAAS,EAAe,EAA2B,CAC/C,IAAI,EAAsB,KAC1B,IAAK,IAAM,KAAO,EACV,GAAS,EAAY,KACrB,EAAU,GAGlB,OAAO,CACX,CAwBA,SAAgB,GAAmC,CAC/C,GAAM,CAAC,EAAO,IAAA,EAAY,EAAA,SAAA,KACtB,OAAO,OAAW,IAAc,EAAI,OAAO,UAC/C,GAEA,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,OAAO,OAAW,IAAa,OACnC,IAAM,MAAuB,EAAS,OAAO,UAAU,EAGvD,OAFA,EAAS,EACT,OAAO,iBAAiB,SAAU,EAAU,CAAE,QAAS,EAAK,CAAC,MAChD,OAAO,oBAAoB,SAAU,CAAQ,CAC9D,EAAG,CAAC,CAAC,EAEL,IAAM,EAAU,EAAe,CAAK,EAC9B,EAAS,GAA4B,GAAS,EAAY,GAC1D,EAAS,GAA4B,EAAQ,EAAY,GAE/D,MAAO,CACH,UACA,QACA,QACA,QACA,SAAU,EAAM,IAAI,EACpB,SAAU,EAAM,IAAI,GAAK,EAAM,IAAI,EACnC,UAAW,EAAM,IAAI,CACzB,CACJ"}