{"version":3,"file":"Responsive.cjs","names":[],"sources":["../../../src/components/Responsive/Responsive.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useBreakpoint, type Breakpoint } from \"@/hooks/use-breakpoint\";\n\nexport interface ShowProps {\n    /** Render children only when viewport width is `>=` this breakpoint. */\n    above?: Breakpoint;\n    /** Render children only when viewport width is `<` this breakpoint. */\n    below?: Breakpoint;\n    /** Render only on specific breakpoints. Wins over `above`/`below` when set. */\n    only?: Breakpoint | Breakpoint[];\n    children: ReactNode;\n}\n\nfunction shouldRender(\n    current: Breakpoint,\n    above: Breakpoint | undefined,\n    below: Breakpoint | undefined,\n    only: Breakpoint | Breakpoint[] | undefined,\n    helpers: { above: (bp: Breakpoint) => boolean; below: (bp: Breakpoint) => boolean },\n): boolean {\n    if (only) {\n        const list = Array.isArray(only) ? only : [only];\n        return list.includes(current);\n    }\n    if (above && !helpers.above(above)) return false;\n    if (below && !helpers.below(below)) return false;\n    return true;\n}\n\n/**\n * Conditionally render children based on the viewport breakpoint.\n *\n * - `above` — render when viewport width is `>=` the given breakpoint.\n * - `below` — render when viewport width is `<` the given breakpoint.\n * - `only` — render only on the listed breakpoint(s).\n *\n * SSR-safe: first render uses `xs` (renders mobile content first); the\n * component re-renders once `useBreakpoint` has the real viewport width.\n */\nexport function Show({ above, below, only, children }: ShowProps): ReactNode {\n    const bp = useBreakpoint();\n    if (!shouldRender(bp.current, above, below, only, bp)) return null;\n    return children;\n}\n\nexport interface HideProps {\n    /** Hide children when viewport width is `>=` this breakpoint. */\n    above?: Breakpoint;\n    /** Hide children when viewport width is `<` this breakpoint. */\n    below?: Breakpoint;\n    /** Hide on specific breakpoints. */\n    only?: Breakpoint | Breakpoint[];\n    children: ReactNode;\n}\n\n/** Inverse of `<Show>` — hides children when the condition matches. */\nexport function Hide({ above, below, only, children }: HideProps): ReactNode {\n    const bp = useBreakpoint();\n    if (shouldRender(bp.current, above, below, only, bp)) return null;\n    return children;\n}\n"],"mappings":"kDAaA,SAAS,EACL,EACA,EACA,EACA,EACA,EACO,CAOP,OANI,GACa,MAAM,QAAQ,CAAI,EAAI,EAAO,CAAC,CAAI,EAAA,CACnC,SAAS,CAAO,EAGhC,EADI,GAAS,CAAC,EAAQ,MAAM,CAAK,GAC7B,GAAS,CAAC,EAAQ,MAAM,CAAK,EAErC,CAYA,SAAgB,EAAK,CAAE,QAAO,QAAO,OAAM,YAAkC,CACzE,IAAM,EAAK,EAAA,cAAc,EAEzB,OADK,EAAa,EAAG,QAAS,EAAO,EAAO,EAAM,CAAE,EAC7C,EADuD,IAElE,CAaA,SAAgB,EAAK,CAAE,QAAO,QAAO,OAAM,YAAkC,CACzE,IAAM,EAAK,EAAA,cAAc,EAEzB,OADI,EAAa,EAAG,QAAS,EAAO,EAAO,EAAM,CAAE,EAAU,KACtD,CACX"}