{"version":3,"sources":["../../src/MatchMedia/index.ts"],"names":["useMatchMedia_default"],"mappings":";;;;;AA4DA,IAAM,UAAA,GAAa,CACjB,KACG,KAAA;AACH,EAAM,MAAA,EAAE,KAAO,EAAA,MAAA,EAAW,GAAA,KAAA;AAE1B,EAAO,OAAA,MAAA,GACH,OAAO,KAAS,IAAA,QAAA,GACd,OAAO,GAAG,KAAA,CAAM,GAAI,CAAAA,uCAAa,CAAC,CAAA,GAClC,OAAOA,uCAAc,CAAA,KAAK,CAAC,CAC5B,GAAA,CAAAA,uCAAA,CAAc,KAA0B,CACpC,GAAA,KAAA,CAAgB,QAChB,GAAA,KAAA,CAAgB,SAAc,KAAA,IAAA;AACzC,CAAA;AAEA,IAAO,kBAAQ,GAAA","file":"chunk-Q4BPUUX5.cjs","sourcesContent":["import { PropsWithChildren, ReactNode } from \"react\";\nimport useMatchMedia from \"../useMatchMedia\";\n\ntype Props = PropsWithChildren<{\n  /**\n   * The content to render if the media query does not match (optional).\n   */\n  otherwise?: ReactNode;\n}>;\n\nexport type MatchMediaProps<T extends string | string[] = string> = {\n  /**\n   * The media query to evaluate.\n   */\n  query: T;\n} & (\n  | (T extends string ? Props : never)\n  | {\n      render(\n        ...isMatched: T extends string | [string]\n          ? [boolean]\n          : { [key in keyof T]: boolean }\n      ): ReactNode;\n    }\n);\n\n/**\n * Component that conditionally renders content based on a media query.\n *\n * Evaluates the provided media query and renders its `children` if the media query matches. Optionally, you can also provide an `otherwise` prop to specify the content to render if the media query does not match. Alternatively, you can provide a `render` prop to conditionally render content based on the media query evaluation.\n *\n * > It uses {@link useMatchMedia} under the hood\n *\n * @example\n * ```jsx\n * // Usage in a React component\n * <MatchMedia query=\"(max-width: 768px)\">\n *   <MobileLayout />\n * </MatchMedia>\n * ```\n *\n * @example\n * ```jsx\n * // Usage with an \"otherwise\" prop\n * <MatchMedia query=\"(max-width: 768px)\" otherwise={<DesktopLayout />}>\n *   <MobileLayout />\n * </MatchMedia>\n * ```\n *\n * @example\n * ```jsx\n * // Usage with an \"render\" prop\n * <MatchMedia\n *    query={[\"(width < 576px)\", \"(width > 1024px)\"]}\n *    render={(isMobile, isDesktop) =>\n *      isMobile ? \"mobile\" : isDesktop ? \"desktop\" : \"tablet\"\n *    }\n * />\n * ```\n */\nconst MatchMedia = <const T extends string | string[]>(\n  props: MatchMediaProps<T>\n) => {\n  const { query, render } = props as MatchMediaProps<string[]>;\n\n  return render\n    ? typeof query != \"string\"\n      ? render(...query.map(useMatchMedia))\n      : render(useMatchMedia(query))\n    : (useMatchMedia(query as unknown as string)\n        ? (props as Props).children\n        : (props as Props).otherwise) || null;\n};\n\nexport default MatchMedia;\n"]}