{"version":3,"sources":["../../src/use-breakpoints/index.ts"],"sourcesContent":["import { useCreation } from '../use-creation'\nimport { useDeepCompareLayoutEffect } from '../use-deep-compare-layout-effect'\nimport { useLatest } from '../use-latest'\nimport { useMediaQuery } from '../use-media-query'\nimport { useSafeState } from '../use-safe-state'\nimport { useStableFn } from '../use-stable-fn'\nimport { increaseWithUnit, isNumber } from '../utils/basic'\n\n/**\n * A object that contains different breakpoints\n */\nexport type Breakpoints = Record\n\nexport interface UseBreakpointsOptions {\n /**\n * The query strategy to use for the generated shortcut methods like `.lg`\n *\n * 'min-width' - .lg will be true when the viewport is greater than or equal to the lg breakpoint (mobile-first)\n * 'max-width' - .lg will be true when the viewport is smaller than the xl breakpoint (desktop-first)\n *\n * @defaultValue \"min-width\"\n */\n strategy?: 'min-width' | 'max-width'\n}\n\nexport type UseBreakpointsReturns = Record & {\n /**\n * The current breakpoints states\n */\n breakpoints: Record\n /**\n * Check if the viewport is greater than the given breakpoint\n *\n * @param {K} k - `K`, the breakpoint key\n * @returns {boolean} `boolean`, whether the viewport is greater than the given breakpoint\n */\n isGreater: (k: K) => boolean\n /**\n * Check if the viewport is greater or equal to the given breakpoint\n *\n * @param {K} k - `K`, the breakpoint key\n * @returns {boolean} `boolean`, whether the viewport is greater or equal to the given breakpoint\n */\n isGreaterOrEqual: (k: K) => boolean\n /**\n * Check if the viewport is smaller than the given breakpoint\n *\n * @param {K} k - `K`, the breakpoint key\n * @returns {boolean} `boolean`, whether the viewport is smaller than the given breakpoint\n */\n isSmaller: (k: K) => boolean\n /**\n * Check if the viewport is smaller or equal to the given breakpoint\n *\n * @param {K} k - `K`, the breakpoint key\n * @returns {boolean} `boolean`, whether the viewport is smaller or equal to the given breakpoint\n */\n isSmallerOrEqual: (k: K) => boolean\n /**\n * Check if the viewport is between the given breakpoints\n *\n * @param {K} a - `K`, the breakpoint key\n * @param {K} b - `K`, the breakpoint key\n * @returns {boolean} `boolean`, whether the viewport is between the given breakpoints\n */\n isInBetween: (a: K, b: K) => boolean\n /**\n * The current matched breakpoints\n */\n currents: K[]\n}\n\n/**\n * five breakpoints by default, align with tailwindcss breakpoints\n *\n * @see {@link https://tailwindcss.com/docs/responsive-design | Tailwind CSS - Responsive Design}\n * */\nexport const defaultBreakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280, xxl: 1536 }\n\n/**\n * A React Hook that provides a simple API to interact with the viewport breakpoints.\n *\n * @param {Breakpoints} [breakpoints=defaultBreakpoints] - `Breakpoints`, the breakpoints to use, see {@link Breakpoints} and {@link defaultBreakpoints}\n * @param {UseBreakpointsOptions} [options={}] - `UseBreakpointsOptions`, options to configure the hook, see {@link UseBreakpointsOptions}\n * @returns {UseBreakpointsReturns} `UseBreakpointsReturns`, see {@link UseBreakpointsReturns}\n */\nexport function useBreakpoints(\n breakpoints: Breakpoints = defaultBreakpoints as Breakpoints,\n options: UseBreakpointsOptions = {},\n): UseBreakpointsReturns {\n const { strategy = 'min-width' } = options\n const latest = useLatest({ breakpoints, strategy, ...options })\n\n const calcValue = useStableFn((k: K, delta?: number) => {\n let v = latest.current.breakpoints[k]\n if (delta) v = increaseWithUnit(v, delta)\n if (isNumber(v)) v = `${v}px`\n return v\n })\n\n const transformQueries = useStableFn(() => {\n return Object.keys(latest.current.breakpoints).map((k) => {\n const isMinWidth = strategy === 'min-width'\n return [k, isMinWidth ? `(min-width: ${calcValue(k as K)})` : `(max-width: ${calcValue(k as K)})`] as [K, string]\n })\n })\n\n const [queries, setQueries] = useSafeState<[Key: K, Query: string][]>(transformQueries)\n\n const matches = useMediaQuery(queries.map((e) => e[1]))\n const match = useStableFn((query: string) => Boolean(window?.matchMedia(query).matches))\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: effect need to re-run when breakpoints changes\n useDeepCompareLayoutEffect(() => setQueries(transformQueries()), [breakpoints])\n\n const isGreater = useStableFn((k: K) => match(`(min-width: ${calcValue(k)})`))\n const isSmaller = useStableFn((k: K) => match(`(max-width: ${calcValue(k, -0.1)})`))\n const isGreaterOrEqual = useStableFn((k: K) => match(`(min-width: ${calcValue(k, 0.1)})`))\n const isSmallerOrEqual = useStableFn((k: K) => match(`(max-width: ${calcValue(k)})`))\n const isInBetween = useStableFn((a: K, b: K) =>\n match(`(min-width: ${calcValue(a)}) and (max-width: ${calcValue(b, -0.1)})`),\n )\n\n const { bps, currents } = useCreation(() => {\n const bps = Object.keys(breakpoints).reduce(\n (shortcuts, key) => {\n shortcuts[key as K] = matches[queries.findIndex(([k]) => k === key)] ?? false\n return shortcuts\n },\n {} as Record,\n )\n\n const currents = Object.entries(bps)\n .filter(([_, v]) => v)\n .map(([k]) => k as K)\n\n return { bps, currents }\n }, [breakpoints, matches])\n\n return {\n ...bps,\n breakpoints: bps,\n isGreater,\n isGreaterOrEqual,\n isSmaller,\n isSmallerOrEqual,\n isInBetween,\n currents,\n }\n}\n"],"names":["defaultBreakpoints","useBreakpoints","sm","md","lg","xl","xxl","breakpoints","options","strategy","latest","useLatest","calcValue","useStableFn","k","delta","v","current","increaseWithUnit","isNumber","transformQueries","Object","keys","map","isMinWidth","useSafeState","queries","setQueries","matches","useMediaQuery","e","match","query","window","Boolean","matchMedia","useDeepCompareLayoutEffect","isGreater","isSmaller","isGreaterOrEqual","isSmallerOrEqual","isInBetween","a","b","useCreation","bps","reduce","shortcuts","key","findIndex","currents","entries","filter","_"],"mappings":"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"}