@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/dist/tabs/useTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/useTabs.ts"],"sourcesContent":["\"use client\";\n\nimport { type Dispatch, type Ref, useEffect, useRef, useState } from \"react\";\n\nimport { type SlideDirection } from \"../transition/SlideContainer.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport { applyRef } from \"../utils/applyRef.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabProps } from \"./Tab.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabListProps } from \"./TabList.js\";\n\nconst EMPTY_LIST = [] as const;\nconst PANEL_PREFIX = \"panel-\";\n\n/**\n * @since 6.0.0\n */\nexport interface TabsHookOptions<TabValue extends string | number = number> {\n  /**\n   * This can be used to generate the ids for the different components within\n   * the tab widget.\n   *\n   * @defaultValue `\"tab-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to an **ordered** list of tab values when:\n   * - using a `string` tab value\n   * - using a `number` tab value does not represent a tab index\n   *\n   * See the examples on the {@link useTabs} for usage.\n   */\n  tabs?: readonly TabValue[];\n\n  /**\n   * Provide this value and {@link setActiveTab} to control the active tab\n   * behavior.\n   */\n  activeTab?: TabValue;\n\n  /** @see {@link activeTab} */\n  setActiveTab?: Dispatch<TabValue>;\n\n  /**\n   * Set this to the default tab index when not controlling the active tab value\n   * through {@link activeTab} and {@link setActiveTab}.\n   *\n   * @defaultValue `0`\n   */\n  defaultActiveTab?: UseStateInitializer<TabValue>;\n\n  /** Convenience pass-through prop to {@link TabProps.stacked} */\n  stacked?: boolean;\n  /** Convenience pass-through prop to {@link TabProps.iconAfter} */\n  iconAfter?: boolean;\n\n  /** Convenience pass-through props to {@link TabListProps.vertical} */\n  vertical?: boolean;\n\n  /**\n   * Set this to `true` if changing active tabs should no longer attempt to\n   * scroll to the top of the tab panels container when using the\n   * {@link TabsImplementation.getTabPanelsProps}.\n   *\n   * @defaultValue `false`\n   */\n  disableScrollFix?: boolean;\n\n  /**\n   * Convenience prop to disable all transitions for the\n   * {@link TabsImplementation.getTabProps} and\n   * {@link TabsImplementation.getTabListProps}.\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabProps {\n  \"aria-controls\": string;\n  id: string;\n  active: boolean;\n\n  /** Convenience pass-through prop from {@link TabsHookOptions.stacked} */\n  stacked?: boolean;\n  /** Convenience pass-through prop from {@link TabsHookOptions.iconAfter} */\n  iconAfter?: boolean;\n  /** Convenience pass-through prop from {@link TabsHookOptions.disableTransition} */\n  activeIndicator?: boolean;\n  /** Convenience pass-through prop from {@link TabsHookOptions.vertical} and {@link TabsHookOptions.disableTransition} */\n  verticalActiveIndicator?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabListProps {\n  activeIndex: number;\n  setActiveIndex: Dispatch<number>;\n  vertical?: boolean;\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabPanelProps {\n  \"aria-labelledby\": string;\n  id: string;\n  role: \"tabpanel\";\n  active: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabPanelsProps<E extends HTMLElement> {\n  ref: Ref<E>;\n  direction: SlideDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabsImplementation<TabValue extends string | number = number> {\n  direction: SlideDirection;\n  setDirection: UseStateSetter<SlideDirection>;\n  activeTab?: TabValue;\n  setActiveTab?: (nextActiveTab: TabValue) => void;\n  getTabProps: (tabValue: TabValue) => ProvidedTabProps;\n  getTabListProps: () => ProvidedTabListProps;\n  getTabPanelProps: (tabValue: TabValue) => ProvidedTabPanelProps;\n  getTabPanelsProps: <E extends HTMLElement>(\n    ref?: Ref<E>\n  ) => ProvidedTabPanelsProps<E>;\n}\n\n/**\n * @example Super Simple\n * ```tsx\n * \"use client\";\n *\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\n * import { useTabs } from \"@react-md/core/tabs/useTabs\";\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs();\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(0)}>Tab 1</Tab>\n *         <Tab {...getTabProps(1)}>Tab 2</Tab>\n *         <Tab {...getTabProps(2)}>Tab 3</Tab>\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTabs(): TabsImplementation & {\n  activeTab: number;\n  setActiveTab: number;\n};\n/**\n * The tab behavior can be controlled by providing the `activeTab` and\n * `setActiveTab` options.\n *\n * @example Controlled\n * ```tsx\n * \"use client\";\n *\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\n * import { useTabs } from \"@react-md/core/tabs/useTabs\";\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import { type ReactElement, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(1);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     activeTab,\n *     setActiveTab,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(0)}>Tab 1</Tab>\n *         <Tab {...getTabProps(1)}>Tab 2</Tab>\n *         <Tab {...getTabProps(2)}>Tab 3</Tab>\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example String Value Simple\n * ```tsx\n * \"use client\";\n *\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\n * import { useTabs } from \"@react-md/core/tabs/useTabs\";\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import { type ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"];\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({ tabs });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example String Controlled Simple\n * ```tsx\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\n * import { useTabs } from \"@react-md/core/tabs/useTabs\";\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import { type ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"] as const;\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(tabs[0]);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     tabs,\n *     activeTab,\n *     setActiveTab,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Navigation Tabs\n * ```tsx\n * \"use client\";\n *\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\n * import { useTabs } from \"@react-md/core/tabs/useTabs\";\n * import Link from \"next/link.js\";\n * import { usePathname } from \"next/navigation.js\";\n * import {\n *   type AnchorHTMLAttributes,\n *   type ReactElement,\n *   forwardRef,\n *   useEffect,\n *   useState,\n * } from \"react\";\n *\n * // this just fixes the `href` type definition causing errors\n * const SimpleLink = forwardRef<\n *   HTMLAnchorElement,\n *   AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n * >(function SimpleLink(props, ref) {\n *   return <Link {...props} ref={ref} />;\n * });\n *\n * const PATHNAME_TABS = [\"/\", \"/page-1\", \"/page-2\"];\n *\n * function Layout({ children }: PropsWithChildren) {\n *   const pathname = usePathname();\n *   const { getTabListProps, getTabProps } = useTabs({\n *     tabs: PATHNAME_TABS,\n *     activeTab: pathname,\n *     setActiveTab: noop,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(\"/\")} href=\"/\" as={SimpleLink}>Home</Tab>\n *         <Tab {...getTabProps(\"/page-1\")} href=\"/page-1\" as={SimpleLink}>Page 1</Tab>\n *         <Tab {...getTabProps(\"/page-2\")} href=\"/page-2\" as={SimpleLink}>Page 2</Tab>\n *       </TabList>\n *       <main>{children}</main>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\n/**\n * This hook can be uncontrolled/controlled and supports strongly typing the tab\n * values if needed. Check out the overloads for examples.\n *\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string | number>(\n  options: TabsHookOptions<TabValue> = {}\n): TabsImplementation<TabValue> {\n  const {\n    baseId: propBaseId,\n    tabs = EMPTY_LIST,\n    stacked,\n    vertical,\n    iconAfter,\n    activeTab: propActiveTab,\n    setActiveTab: propSetActiveTab,\n    defaultActiveTab,\n    disableScrollFix,\n    disableTransition,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"tab\");\n  const [direction, setDirection] = useState<SlideDirection>(\"left\");\n\n  const [activeTab, setActiveTab] = useEnsuredState({\n    value: propActiveTab,\n    setValue: propSetActiveTab,\n    defaultValue: defaultActiveTab ?? (0 as TabValue),\n  });\n\n  const getTabIndex = (tabValue: TabValue): number =>\n    typeof tabValue === \"string\" || tabs.length > 0\n      ? tabs.indexOf(tabValue)\n      : tabValue;\n  const getTabId = (tabValue: TabValue, prefix = \"\"): string =>\n    `${baseId}-${prefix}${getTabIndex(tabValue) + 1}`;\n\n  const activeIndex = getTabIndex(activeTab);\n  const tabPanelsRef = useRef<HTMLElement>(null);\n  useEffect(() => {\n    const container = tabPanelsRef.current;\n    if (!container || disableScrollFix) {\n      return;\n    }\n\n    container.scrollTop = 0;\n  }, [disableScrollFix, activeTab]);\n\n  return {\n    activeTab,\n    setActiveTab,\n    direction,\n    setDirection,\n    getTabProps(tabValue) {\n      return {\n        \"aria-controls\": getTabId(tabValue, PANEL_PREFIX),\n        id: getTabId(tabValue),\n        active: tabValue === activeTab,\n        stacked,\n        iconAfter,\n        activeIndicator: disableTransition,\n        verticalActiveIndicator: vertical && disableTransition,\n      };\n    },\n    getTabListProps() {\n      return {\n        activeIndex,\n        setActiveIndex: (nextActiveIndex) => {\n          setDirection(activeIndex < nextActiveIndex ? \"left\" : \"right\");\n          if (typeof activeTab === \"string\" || tabs.length > 0) {\n            setActiveTab(tabs[nextActiveIndex]);\n          } else {\n            setActiveTab(nextActiveIndex as TabValue);\n          }\n        },\n        vertical,\n        disableTransition,\n      };\n    },\n    getTabPanelProps(tabValue) {\n      return {\n        \"aria-labelledby\": getTabId(tabValue),\n        id: getTabId(tabValue, PANEL_PREFIX),\n        role: \"tabpanel\",\n        active: tabValue === activeTab,\n      };\n    },\n    getTabPanelsProps(ref) {\n      return {\n        ref: (instance) => {\n          applyRef(instance, ref);\n          applyRef(instance, tabPanelsRef);\n        },\n        direction,\n      };\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","useEnsuredId","useEnsuredState","applyRef","EMPTY_LIST","PANEL_PREFIX","useTabs","options","baseId","propBaseId","tabs","stacked","vertical","iconAfter","activeTab","propActiveTab","setActiveTab","propSetActiveTab","defaultActiveTab","disableScrollFix","disableTransition","direction","setDirection","value","setValue","defaultValue","getTabIndex","tabValue","length","indexOf","getTabId","prefix","activeIndex","tabPanelsRef","container","current","scrollTop","getTabProps","id","active","activeIndicator","verticalActiveIndicator","getTabListProps","setActiveIndex","nextActiveIndex","getTabPanelProps","role","getTabPanelsProps","ref","instance"],"mappings":"AAAA;AAEA,SAAkCA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAI7E,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,eAAe,QAAQ,wBAAwB;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAMhD,MAAMC,aAAa,EAAE;AACrB,MAAMC,eAAe;AAuZrB;;;;;CAKC,GACD,OAAO,SAASC,QACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,OAAON,UAAU,EACjBO,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,WAAWC,aAAa,EACxBC,cAAcC,gBAAgB,EAC9BC,gBAAgB,EAChBC,gBAAgB,EAChBC,iBAAiB,EAClB,GAAGb;IAEJ,MAAMC,SAASP,aAAaQ,YAAY;IACxC,MAAM,CAACY,WAAWC,aAAa,GAAGtB,SAAyB;IAE3D,MAAM,CAACc,WAAWE,aAAa,GAAGd,gBAAgB;QAChDqB,OAAOR;QACPS,UAAUP;QACVQ,cAAcP,oBAAqB;IACrC;IAEA,MAAMQ,cAAc,CAACC,WACnB,OAAOA,aAAa,YAAYjB,KAAKkB,MAAM,GAAG,IAC1ClB,KAAKmB,OAAO,CAACF,YACbA;IACN,MAAMG,WAAW,CAACH,UAAoBI,SAAS,EAAE,GAC/C,GAAGvB,OAAO,CAAC,EAAEuB,SAASL,YAAYC,YAAY,GAAG;IAEnD,MAAMK,cAAcN,YAAYZ;IAChC,MAAMmB,eAAelC,OAAoB;IACzCD,UAAU;QACR,MAAMoC,YAAYD,aAAaE,OAAO;QACtC,IAAI,CAACD,aAAaf,kBAAkB;YAClC;QACF;QAEAe,UAAUE,SAAS,GAAG;IACxB,GAAG;QAACjB;QAAkBL;KAAU;IAEhC,OAAO;QACLA;QACAE;QACAK;QACAC;QACAe,aAAYV,QAAQ;YAClB,OAAO;gBACL,iBAAiBG,SAASH,UAAUtB;gBACpCiC,IAAIR,SAASH;gBACbY,QAAQZ,aAAab;gBACrBH;gBACAE;gBACA2B,iBAAiBpB;gBACjBqB,yBAAyB7B,YAAYQ;YACvC;QACF;QACAsB;YACE,OAAO;gBACLV;gBACAW,gBAAgB,CAACC;oBACftB,aAAaU,cAAcY,kBAAkB,SAAS;oBACtD,IAAI,OAAO9B,cAAc,YAAYJ,KAAKkB,MAAM,GAAG,GAAG;wBACpDZ,aAAaN,IAAI,CAACkC,gBAAgB;oBACpC,OAAO;wBACL5B,aAAa4B;oBACf;gBACF;gBACAhC;gBACAQ;YACF;QACF;QACAyB,kBAAiBlB,QAAQ;YACvB,OAAO;gBACL,mBAAmBG,SAASH;gBAC5BW,IAAIR,SAASH,UAAUtB;gBACvByC,MAAM;gBACNP,QAAQZ,aAAab;YACvB;QACF;QACAiC,mBAAkBC,GAAG;YACnB,OAAO;gBACLA,KAAK,CAACC;oBACJ9C,SAAS8C,UAAUD;oBACnB7C,SAAS8C,UAAUhB;gBACrB;gBACAZ;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/tabs/useTabs.ts"],"sourcesContent":["\"use client\";\n\nimport { type Dispatch, type Ref, useEffect, useRef, useState } from \"react\";\n\nimport { type SlideDirection } from \"../transition/SlideContainer.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport { applyRef } from \"../utils/applyRef.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabProps } from \"./Tab.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabListProps } from \"./TabList.js\";\n\nconst EMPTY_LIST = [] as const;\nconst PANEL_PREFIX = \"panel-\";\n\n/**\n * @since 6.0.0\n */\nexport interface TabsHookOptions<TabValue extends string | number = number> {\n  /**\n   * This can be used to generate the ids for the different components within\n   * the tab widget.\n   *\n   * @defaultValue `\"tab-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to an **ordered** list of tab values when:\n   * - using a `string` tab value\n   * - using a `number` tab value does not represent a tab index\n   *\n   * See the examples on the {@link useTabs} for usage.\n   */\n  tabs?: readonly TabValue[];\n\n  /**\n   * Provide this value and {@link setActiveTab} to control the active tab\n   * behavior.\n   */\n  activeTab?: TabValue;\n\n  /** @see {@link activeTab} */\n  setActiveTab?: Dispatch<TabValue>;\n\n  /**\n   * Set this to the default tab index when not controlling the active tab value\n   * through {@link activeTab} and {@link setActiveTab}.\n   *\n   * @defaultValue `0`\n   */\n  defaultActiveTab?: UseStateInitializer<TabValue>;\n\n  /** Convenience pass-through prop to {@link TabProps.stacked} */\n  stacked?: boolean;\n  /** Convenience pass-through prop to {@link TabProps.iconAfter} */\n  iconAfter?: boolean;\n\n  /** Convenience pass-through props to {@link TabListProps.vertical} */\n  vertical?: boolean;\n\n  /**\n   * Set this to `true` if changing active tabs should no longer attempt to\n   * scroll to the top of the tab panels container when using the\n   * {@link TabsImplementation.getTabPanelsProps}.\n   *\n   * @defaultValue `false`\n   */\n  disableScrollFix?: boolean;\n\n  /**\n   * Convenience prop to disable all transitions for the\n   * {@link TabsImplementation.getTabProps} and\n   * {@link TabsImplementation.getTabListProps}.\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabProps {\n  \"aria-controls\": string;\n  id: string;\n  active: boolean;\n\n  /** Convenience pass-through prop from {@link TabsHookOptions.stacked} */\n  stacked?: boolean;\n  /** Convenience pass-through prop from {@link TabsHookOptions.iconAfter} */\n  iconAfter?: boolean;\n  /** Convenience pass-through prop from {@link TabsHookOptions.disableTransition} */\n  activeIndicator?: boolean;\n  /** Convenience pass-through prop from {@link TabsHookOptions.vertical} and {@link TabsHookOptions.disableTransition} */\n  verticalActiveIndicator?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabListProps {\n  activeIndex: number;\n  setActiveIndex: Dispatch<number>;\n  vertical?: boolean;\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabPanelProps {\n  \"aria-labelledby\": string;\n  id: string;\n  role: \"tabpanel\";\n  active: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabPanelsProps<E extends HTMLElement> {\n  ref: Ref<E>;\n  direction: SlideDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabsImplementation<TabValue extends string | number = number> {\n  direction: SlideDirection;\n  setDirection: UseStateSetter<SlideDirection>;\n  activeTab?: TabValue;\n  setActiveTab?: (nextActiveTab: TabValue) => void;\n  getTabProps: (tabValue: TabValue) => ProvidedTabProps;\n  getTabListProps: () => ProvidedTabListProps;\n  getTabPanelProps: (tabValue: TabValue) => ProvidedTabPanelProps;\n  getTabPanelsProps: <E extends HTMLElement>(\n    ref?: Ref<E>\n  ) => ProvidedTabPanelsProps<E>;\n}\n\n/**\n * @example Super Simple\n * ```tsx\n * \"use client\";\n *\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\n * import { useTabs } from \"@react-md/core/tabs/useTabs\";\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs();\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(0)}>Tab 1</Tab>\n *         <Tab {...getTabProps(1)}>Tab 2</Tab>\n *         <Tab {...getTabProps(2)}>Tab 3</Tab>\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @since 6.0.0\n */\nexport function useTabs(): TabsImplementation & {\n  activeTab: number;\n  setActiveTab: number;\n};\n/**\n * The tab behavior can be controlled by providing the `activeTab` and\n * `setActiveTab` options.\n *\n * @example Controlled\n * ```tsx\n * \"use client\";\n *\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\n * import { useTabs } from \"@react-md/core/tabs/useTabs\";\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import { type ReactElement, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(1);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     activeTab,\n *     setActiveTab,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(0)}>Tab 1</Tab>\n *         <Tab {...getTabProps(1)}>Tab 2</Tab>\n *         <Tab {...getTabProps(2)}>Tab 3</Tab>\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example String Value Simple\n * ```tsx\n * \"use client\";\n *\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\n * import { useTabs } from \"@react-md/core/tabs/useTabs\";\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import { type ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"];\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({ tabs });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example String Controlled Simple\n * ```tsx\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\n * import { useTabs } from \"@react-md/core/tabs/useTabs\";\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import { type ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"] as const;\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(tabs[0]);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     tabs,\n *     activeTab,\n *     setActiveTab,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Navigation Tabs\n * ```tsx\n * \"use client\";\n *\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\n * import { useTabs } from \"@react-md/core/tabs/useTabs\";\n * import Link from \"next/link.js\";\n * import { usePathname } from \"next/navigation.js\";\n * import {\n *   type AnchorHTMLAttributes,\n *   type ReactElement,\n *   forwardRef,\n *   useEffect,\n *   useState,\n * } from \"react\";\n *\n * // this just fixes the `href` type definition causing errors\n * const SimpleLink = forwardRef<\n *   HTMLAnchorElement,\n *   AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n * >(function SimpleLink(props, ref) {\n *   return <Link {...props} ref={ref} />;\n * });\n *\n * const PATHNAME_TABS = [\"/\", \"/page-1\", \"/page-2\"];\n *\n * function Layout({ children }: PropsWithChildren) {\n *   const pathname = usePathname();\n *   const { getTabListProps, getTabProps } = useTabs({\n *     tabs: PATHNAME_TABS,\n *     activeTab: pathname,\n *     setActiveTab: noop,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(\"/\")} href=\"/\" as={SimpleLink}>Home</Tab>\n *         <Tab {...getTabProps(\"/page-1\")} href=\"/page-1\" as={SimpleLink}>Page 1</Tab>\n *         <Tab {...getTabProps(\"/page-2\")} href=\"/page-2\" as={SimpleLink}>Page 2</Tab>\n *       </TabList>\n *       <main>{children}</main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\n/**\n * This hook can be uncontrolled/controlled and supports strongly typing the tab\n * values if needed. Check out the overloads for examples.\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string | number>(\n  options: TabsHookOptions<TabValue> = {}\n): TabsImplementation<TabValue> {\n  const {\n    baseId: propBaseId,\n    tabs = EMPTY_LIST,\n    stacked,\n    vertical,\n    iconAfter,\n    activeTab: propActiveTab,\n    setActiveTab: propSetActiveTab,\n    defaultActiveTab,\n    disableScrollFix,\n    disableTransition,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"tab\");\n  const [direction, setDirection] = useState<SlideDirection>(\"forward\");\n\n  const [activeTab, setActiveTab] = useEnsuredState({\n    value: propActiveTab,\n    setValue: propSetActiveTab,\n    defaultValue: defaultActiveTab ?? (0 as TabValue),\n  });\n\n  const getTabIndex = (tabValue: TabValue): number =>\n    typeof tabValue === \"string\" || tabs.length > 0\n      ? tabs.indexOf(tabValue)\n      : tabValue;\n  const getTabId = (tabValue: TabValue, prefix = \"\"): string =>\n    `${baseId}-${prefix}${getTabIndex(tabValue) + 1}`;\n\n  const activeIndex = getTabIndex(activeTab);\n  const tabPanelsRef = useRef<HTMLElement>(null);\n  useEffect(() => {\n    const container = tabPanelsRef.current;\n    if (!container || disableScrollFix) {\n      return;\n    }\n\n    container.scrollTop = 0;\n  }, [disableScrollFix, activeTab]);\n\n  return {\n    activeTab,\n    setActiveTab,\n    direction,\n    setDirection,\n    getTabProps(tabValue) {\n      return {\n        \"aria-controls\": getTabId(tabValue, PANEL_PREFIX),\n        id: getTabId(tabValue),\n        active: tabValue === activeTab,\n        stacked,\n        iconAfter,\n        activeIndicator: disableTransition,\n        verticalActiveIndicator: vertical && disableTransition,\n      };\n    },\n    getTabListProps() {\n      return {\n        activeIndex,\n        setActiveIndex: (nextActiveIndex) => {\n          setDirection(activeIndex < nextActiveIndex ? \"forward\" : \"backward\");\n          if (typeof activeTab === \"string\" || tabs.length > 0) {\n            setActiveTab(tabs[nextActiveIndex]);\n          } else {\n            setActiveTab(nextActiveIndex as TabValue);\n          }\n        },\n        vertical,\n        disableTransition,\n      };\n    },\n    getTabPanelProps(tabValue) {\n      return {\n        \"aria-labelledby\": getTabId(tabValue),\n        id: getTabId(tabValue, PANEL_PREFIX),\n        role: \"tabpanel\",\n        active: tabValue === activeTab,\n      };\n    },\n    getTabPanelsProps(ref) {\n      return {\n        ref: (instance) => {\n          applyRef(instance, ref);\n          applyRef(instance, tabPanelsRef);\n        },\n        direction,\n      };\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","useEnsuredId","useEnsuredState","applyRef","EMPTY_LIST","PANEL_PREFIX","useTabs","options","baseId","propBaseId","tabs","stacked","vertical","iconAfter","activeTab","propActiveTab","setActiveTab","propSetActiveTab","defaultActiveTab","disableScrollFix","disableTransition","direction","setDirection","value","setValue","defaultValue","getTabIndex","tabValue","length","indexOf","getTabId","prefix","activeIndex","tabPanelsRef","container","current","scrollTop","getTabProps","id","active","activeIndicator","verticalActiveIndicator","getTabListProps","setActiveIndex","nextActiveIndex","getTabPanelProps","role","getTabPanelsProps","ref","instance"],"mappings":"AAAA;AAEA,SAAkCA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAI7E,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,eAAe,QAAQ,wBAAwB;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAMhD,MAAMC,aAAa,EAAE;AACrB,MAAMC,eAAe;AA2ZrB;;;;;;CAMC,GACD,OAAO,SAASC,QACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,OAAON,UAAU,EACjBO,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,WAAWC,aAAa,EACxBC,cAAcC,gBAAgB,EAC9BC,gBAAgB,EAChBC,gBAAgB,EAChBC,iBAAiB,EAClB,GAAGb;IAEJ,MAAMC,SAASP,aAAaQ,YAAY;IACxC,MAAM,CAACY,WAAWC,aAAa,GAAGtB,SAAyB;IAE3D,MAAM,CAACc,WAAWE,aAAa,GAAGd,gBAAgB;QAChDqB,OAAOR;QACPS,UAAUP;QACVQ,cAAcP,oBAAqB;IACrC;IAEA,MAAMQ,cAAc,CAACC,WACnB,OAAOA,aAAa,YAAYjB,KAAKkB,MAAM,GAAG,IAC1ClB,KAAKmB,OAAO,CAACF,YACbA;IACN,MAAMG,WAAW,CAACH,UAAoBI,SAAS,EAAE,GAC/C,GAAGvB,OAAO,CAAC,EAAEuB,SAASL,YAAYC,YAAY,GAAG;IAEnD,MAAMK,cAAcN,YAAYZ;IAChC,MAAMmB,eAAelC,OAAoB;IACzCD,UAAU;QACR,MAAMoC,YAAYD,aAAaE,OAAO;QACtC,IAAI,CAACD,aAAaf,kBAAkB;YAClC;QACF;QAEAe,UAAUE,SAAS,GAAG;IACxB,GAAG;QAACjB;QAAkBL;KAAU;IAEhC,OAAO;QACLA;QACAE;QACAK;QACAC;QACAe,aAAYV,QAAQ;YAClB,OAAO;gBACL,iBAAiBG,SAASH,UAAUtB;gBACpCiC,IAAIR,SAASH;gBACbY,QAAQZ,aAAab;gBACrBH;gBACAE;gBACA2B,iBAAiBpB;gBACjBqB,yBAAyB7B,YAAYQ;YACvC;QACF;QACAsB;YACE,OAAO;gBACLV;gBACAW,gBAAgB,CAACC;oBACftB,aAAaU,cAAcY,kBAAkB,YAAY;oBACzD,IAAI,OAAO9B,cAAc,YAAYJ,KAAKkB,MAAM,GAAG,GAAG;wBACpDZ,aAAaN,IAAI,CAACkC,gBAAgB;oBACpC,OAAO;wBACL5B,aAAa4B;oBACf;gBACF;gBACAhC;gBACAQ;YACF;QACF;QACAyB,kBAAiBlB,QAAQ;YACvB,OAAO;gBACL,mBAAmBG,SAASH;gBAC5BW,IAAIR,SAASH,UAAUtB;gBACvByC,MAAM;gBACNP,QAAQZ,aAAab;YACvB;QACF;QACAiC,mBAAkBC,GAAG;YACnB,OAAO;gBACLA,KAAK,CAACC;oBACJ9C,SAAS8C,UAAUD;oBACnB7C,SAAS8C,UAAUhB;gBACrB;gBACAZ;YACF;QACF;IACF;AACF"}

package/dist/test-utils/jest-globals/match-media.d.ts

@@ -1,6 +1,5 @@
 import { jest } from "@jest/globals";
-import { type MatchMediaChangeViewport } from "../mocks/match-media-implementation.js";
-import { type MatchMediaMatcher } from "../mocks/match-media.js";
+import { type MatchMediaChangeViewport, type MatchMediaMatcher } from "../mocks/match-media.js";
 /**
  * @example Default Behavior
  * ```tsx

package/dist/test-utils/jest-globals/match-media.js

@@ -1,6 +1,6 @@
 import { jest } from "@jest/globals";
-import { createMatchMediaSpy } from "../mocks/match-media-implementation.js";
 import { matchDesktop } from "../mocks/match-media.js";
+import { createMatchMediaSpy } from "../utils/createMatchMediaSpy.js";
 /**
  * @example Default Behavior
  * ```tsx

package/dist/test-utils/jest-globals/match-media.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/jest-globals/match-media.ts"],"sourcesContent":["import { jest } from \"@jest/globals\";\n\nimport {\n  type MatchMediaChangeViewport,\n  createMatchMediaSpy,\n} from \"../mocks/match-media-implementation.js\";\nimport { type MatchMediaMatcher, matchDesktop } from \"../mocks/match-media.js\";\n\n/**\n * @example Default Behavior\n * ```tsx\n * import { matchPhone, render } from \"@react-md/core/test-utils\";\n * import { spyOnMatchMedia } from \"@react-md/core/test-utils/jest-globals\";\n *\n * const matchMedia = spyOnMatchMedia();\n * render(<Test />);\n *\n * // expect desktop results\n *\n * matchMedia.changeViewport(matchPhone);\n * // expect phone results\n * ```\n *\n * @example Set Default Media\n * ```tsx\n * import { matchPhone, render } from \"@react-md/core/test-utils\";\n * import { spyOnMatchMedia } from \"@react-md/core/test-utils/jest-globals\";\n *\n * const matchMedia = spyOnMatchMedia(matchPhone);\n * render(<Test />);\n *\n * // expect phone results\n * ```\n *\n * @since 6.0.0\n */\nexport function spyOnMatchMedia(\n  defaultMatch: MatchMediaMatcher = matchDesktop\n): jest.SpiedFunction<typeof window.matchMedia> & MatchMediaChangeViewport {\n  return createMatchMediaSpy(jest.spyOn(window, \"matchMedia\"), defaultMatch);\n}\n"],"names":["jest","createMatchMediaSpy","matchDesktop","spyOnMatchMedia","defaultMatch","spyOn","window"],"mappings":"AAAA,SAASA,IAAI,QAAQ,gBAAgB;AAErC,SAEEC,mBAAmB,QACd,yCAAyC;AAChD,SAAiCC,YAAY,QAAQ,0BAA0B;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC,gBACdC,eAAkCF,YAAY;IAE9C,OAAOD,oBAAoBD,KAAKK,KAAK,CAACC,QAAQ,eAAeF;AAC/D"}
+{"version":3,"sources":["../../../src/test-utils/jest-globals/match-media.ts"],"sourcesContent":["import { jest } from \"@jest/globals\";\n\nimport {\n  type MatchMediaChangeViewport,\n  type MatchMediaMatcher,\n  matchDesktop,\n} from \"../mocks/match-media.js\";\nimport { createMatchMediaSpy } from \"../utils/createMatchMediaSpy.js\";\n\n/**\n * @example Default Behavior\n * ```tsx\n * import { matchPhone, render } from \"@react-md/core/test-utils\";\n * import { spyOnMatchMedia } from \"@react-md/core/test-utils/jest-globals\";\n *\n * const matchMedia = spyOnMatchMedia();\n * render(<Test />);\n *\n * // expect desktop results\n *\n * matchMedia.changeViewport(matchPhone);\n * // expect phone results\n * ```\n *\n * @example Set Default Media\n * ```tsx\n * import { matchPhone, render } from \"@react-md/core/test-utils\";\n * import { spyOnMatchMedia } from \"@react-md/core/test-utils/jest-globals\";\n *\n * const matchMedia = spyOnMatchMedia(matchPhone);\n * render(<Test />);\n *\n * // expect phone results\n * ```\n *\n * @since 6.0.0\n */\nexport function spyOnMatchMedia(\n  defaultMatch: MatchMediaMatcher = matchDesktop\n): jest.SpiedFunction<typeof window.matchMedia> & MatchMediaChangeViewport {\n  return createMatchMediaSpy(jest.spyOn(window, \"matchMedia\"), defaultMatch);\n}\n"],"names":["jest","matchDesktop","createMatchMediaSpy","spyOnMatchMedia","defaultMatch","spyOn","window"],"mappings":"AAAA,SAASA,IAAI,QAAQ,gBAAgB;AAErC,SAGEC,YAAY,QACP,0BAA0B;AACjC,SAASC,mBAAmB,QAAQ,kCAAkC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC,gBACdC,eAAkCH,YAAY;IAE9C,OAAOC,oBAAoBF,KAAKK,KAAK,CAACC,QAAQ,eAAeF;AAC/D"}

package/dist/test-utils/jest-globals/resize-observer.js

@@ -1,10 +1,10 @@
 import { afterEach, jest } from "@jest/globals";
-import { cleanupResizeObserverAfterEach as cleanup } from "../mocks/ResizeObserver.js";
+import { cleanupRO } from "../mocks/ResizeObserver.js";
 /**
  * @param restoreAllMocks - Set to `false` to prevent `jest.restoreAllMocks()` from being
  * called.
  */ export function cleanupResizeObserverAfterEach(restoreAllMocks = true) {
-    cleanup(afterEach, restoreAllMocks ? jest.restoreAllMocks : undefined);
+    cleanupRO(afterEach, restoreAllMocks ? jest.restoreAllMocks : undefined);
 }
 
 //# sourceMappingURL=resize-observer.js.map

package/dist/test-utils/jest-globals/resize-observer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/jest-globals/resize-observer.ts"],"sourcesContent":["import { afterEach, jest } from \"@jest/globals\";\n\nimport { cleanupResizeObserverAfterEach as cleanup } from \"../mocks/ResizeObserver.js\";\n\n/**\n * @param restoreAllMocks - Set to `false` to prevent `jest.restoreAllMocks()` from being\n * called.\n */\nexport function cleanupResizeObserverAfterEach(restoreAllMocks = true): void {\n  cleanup(afterEach, restoreAllMocks ? jest.restoreAllMocks : undefined);\n}\n"],"names":["afterEach","jest","cleanupResizeObserverAfterEach","cleanup","restoreAllMocks","undefined"],"mappings":"AAAA,SAASA,SAAS,EAAEC,IAAI,QAAQ,gBAAgB;AAEhD,SAASC,kCAAkCC,OAAO,QAAQ,6BAA6B;AAEvF;;;CAGC,GACD,OAAO,SAASD,+BAA+BE,kBAAkB,IAAI;IACnED,QAAQH,WAAWI,kBAAkBH,KAAKG,eAAe,GAAGC;AAC9D"}
+{"version":3,"sources":["../../../src/test-utils/jest-globals/resize-observer.ts"],"sourcesContent":["import { afterEach, jest } from \"@jest/globals\";\n\nimport { cleanupRO } from \"../mocks/ResizeObserver.js\";\n\n/**\n * @param restoreAllMocks - Set to `false` to prevent `jest.restoreAllMocks()` from being\n * called.\n */\nexport function cleanupResizeObserverAfterEach(restoreAllMocks = true): void {\n  cleanupRO(afterEach, restoreAllMocks ? jest.restoreAllMocks : undefined);\n}\n"],"names":["afterEach","jest","cleanupRO","cleanupResizeObserverAfterEach","restoreAllMocks","undefined"],"mappings":"AAAA,SAASA,SAAS,EAAEC,IAAI,QAAQ,gBAAgB;AAEhD,SAASC,SAAS,QAAQ,6BAA6B;AAEvD;;;CAGC,GACD,OAAO,SAASC,+BAA+BC,kBAAkB,IAAI;IACnEF,UAAUF,WAAWI,kBAAkBH,KAAKG,eAAe,GAAGC;AAChE"}

package/dist/test-utils/mocks/ResizeObserver.d.ts

@@ -21,18 +21,17 @@ export declare class ResizeObserverMock implements ResizeObserver {
      * @example Main Usage
      * ```tsx
      * import {
-     *   cleanupResizeObserverAfterEach,
      *   setupResizeObserverMock,
      * } from "@react-md/core/test-utils";
-     * import { useResizeObserver } from "@react-md/core";
+     * import { useResizeObserver } from "@react-md/core/useResizeObserver";
      * import { ExampleComponent } from "../ExampleComponent.js";
      *
      * // choose your test framework
-     * import { afterEach, jest } from "@jest/globals";
-     * cleanupResizeObserverAfterEach(afterEach, jest.restoreAllMocks);
+     * import { afterEach, cleanupResizeObserverAfterEach, jest } from "@jest/globals";
+     * cleanupResizeObserverAfterEach();
      *
-     * import { afterEach, vitest } from "vitest";
-     * cleanupResizeObserverAfterEach(afterEach, vitest.restoreAllMocks);
+     * import { afterEach, cleanupResizeObserverAfterEach, vitest } from "vitest";
+     * cleanupResizeObserverAfterEach();
      *
      * describe("ExampleComponent", () => {
      *   it("should do stuff", () => {
@@ -200,5 +199,6 @@ export declare function setupResizeObserverMock(options?: SetupResizeObserverMoc
 /**
  * @see {@link setupResizeObserverMock}
  * @since 6.0.0
+ * @internal
  */
-export declare function cleanupResizeObserverAfterEach(afterEach: (callback: () => void) => void, restoreAllMocks?: () => void): void;
+export declare function cleanupRO(afterEach: (callback: () => void) => void, restoreAllMocks?: () => void): void;

package/dist/test-utils/mocks/ResizeObserver.js

@@ -33,18 +33,17 @@ import { createResizeObserverEntry } from "../utils/createResizeObserverEntry.js
    * @example Main Usage
    * ```tsx
    * import {
-   *   cleanupResizeObserverAfterEach,
    *   setupResizeObserverMock,
    * } from "@react-md/core/test-utils";
-   * import { useResizeObserver } from "@react-md/core";
+   * import { useResizeObserver } from "@react-md/core/useResizeObserver";
    * import { ExampleComponent } from "../ExampleComponent.js";
    *
    * // choose your test framework
-   * import { afterEach, jest } from "@jest/globals";
-   * cleanupResizeObserverAfterEach(afterEach, jest.restoreAllMocks);
+   * import { afterEach, cleanupResizeObserverAfterEach, jest } from "@jest/globals";
+   * cleanupResizeObserverAfterEach();
    *
-   * import { afterEach, vitest } from "vitest";
-   * cleanupResizeObserverAfterEach(afterEach, vitest.restoreAllMocks);
+   * import { afterEach, cleanupResizeObserverAfterEach, vitest } from "vitest";
+   * cleanupResizeObserverAfterEach();
    *
    * describe("ExampleComponent", () => {
    *   it("should do stuff", () => {
@@ -236,7 +235,8 @@ import { createResizeObserverEntry } from "../utils/createResizeObserverEntry.js
 /**
  * @see {@link setupResizeObserverMock}
  * @since 6.0.0
- */ export function cleanupResizeObserverAfterEach(afterEach, restoreAllMocks = ()=>{}) {
+ * @internal
+ */ export function cleanupRO(afterEach, restoreAllMocks = ()=>{}) {
     afterEach(()=>{
         resizeObserverManager.frame = 0;
         resizeObserverManager.subscriptions = new Map();

package/dist/test-utils/mocks/ResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/mocks/ResizeObserver.ts"],"sourcesContent":["import {\n  type ResizeObserverManager,\n  resizeObserverManager,\n} from \"../../useResizeObserver.js\";\nimport {\n  type GetResizeObserverEntryMock,\n  type ResizeObserverEntrySize,\n  createResizeObserverEntry,\n} from \"../utils/createResizeObserverEntry.js\";\n\n/**\n * This is the default ResizeObserver implementation if it does not already\n * exist in jsdom. You normally should not use this directly and instead use the\n * {@link setupResizeObserverMock} instead.\n *\n * @since 6.0.0\n */\nexport class ResizeObserverMock implements ResizeObserver {\n  elements: Set<Element>;\n\n  constructor(public callback: ResizeObserverCallback) {\n    this.elements = new Set();\n  }\n\n  observe = (target: Element): void => {\n    this.elements.add(target);\n    this.resizeAllElements(createResizeObserverEntry);\n  };\n\n  unobserve = (target: Element): void => {\n    this.elements.delete(target);\n  };\n\n  disconnect = (): void => {\n    this.elements.clear();\n  };\n\n  /**\n   * Triggers the resize event for a specific element. This must be wrapped in\n   * `act`.\n   *\n   * @example Main Usage\n   * ```tsx\n   * import {\n   *   cleanupResizeObserverAfterEach,\n   *   setupResizeObserverMock,\n   * } from \"@react-md/core/test-utils\";\n   * import { useResizeObserver } from \"@react-md/core\";\n   * import { ExampleComponent } from \"../ExampleComponent.js\";\n   *\n   * // choose your test framework\n   * import { afterEach, jest } from \"@jest/globals\";\n   * cleanupResizeObserverAfterEach(afterEach, jest.restoreAllMocks);\n   *\n   * import { afterEach, vitest } from \"vitest\";\n   * cleanupResizeObserverAfterEach(afterEach, vitest.restoreAllMocks);\n   *\n   * describe(\"ExampleComponent\", () => {\n   *   it(\"should do stuff\", () => {\n   *     const observer = setupResizeObserverMock();\n   *     render(<ExampleComponent />)\n   *\n   *     const resizeTarget = screen.getByTestId(\"resize-target\")\n   *\n   *     // you can trigger with a custom change\n   *     act(() => {\n   *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });\n   *     });\n   *     // expect resize changes\n   *   });\n   * })\n   * ```\n   */\n  resizeElement = (\n    target: Element,\n    changesOrGetEntry:\n      | GetResizeObserverEntryMock\n      | ResizeObserverEntrySize\n      | ResizeObserverEntry = createResizeObserverEntry\n  ): void => {\n    if (!this.elements.has(target)) {\n      throw new Error(\n        \"The `ResizeObserverMock` is not watching the target element and cannot be resized\"\n      );\n    }\n\n    let entry: ResizeObserverEntry;\n    if (typeof changesOrGetEntry === \"function\") {\n      entry = changesOrGetEntry(target);\n    } else if (!(\"contentRect\" in changesOrGetEntry)) {\n      entry = createResizeObserverEntry(target, changesOrGetEntry);\n    } else {\n      entry = changesOrGetEntry;\n    }\n\n    this.callback([entry], this);\n  };\n\n  /**\n   * You'll normally want to use {@link resizeElement} instead, but this can be\n   * used to resize all the watched elements at once.\n   *\n   * @example\n   * ```tsx\n   * import {\n   *   act,\n   *   createResizeObserverEntry,\n   *   render,\n   *   screen,\n   *   setupResizeObserverMock,\n   * } from \"@react-md/core/test-utils\";\n   *\n   * const observer = setupResizeObserverMock();\n   * const { container } = render(<Test />)\n   * expect(container).toMatchSnapshot()\n   *\n   * const target1 = screen.getByTestId('target-1');\n   * const target2 = screen.getByTestId('target-2');\n   * const target3 = screen.getByTestId('target-3');\n   *\n   * act(() => {\n   *   observer.resizeAllElements((element) => {\n   *     let height: number | undefined;\n   *     let width: number | undefined;\n   *     switch (element) {\n   *       case target1:\n   *         height = 400;\n   *         width = 250;\n   *         break;\n   *       case target2:\n   *         height = 100;\n   *         width = 380;\n   *         break;\n   *       case target3:\n   *         height = 24;\n   *         width = 24;\n   *         break;\n   *     }\n   *\n   *     return createResizeObserverEntry(element, { height, width });\n   *   });\n   * });\n   * expect(container).toMatchSnapshot()\n   * ```\n   */\n  resizeAllElements = (getEntry = createResizeObserverEntry): void => {\n    const entries = [...this.elements].map((element) => getEntry(element));\n    this.callback(entries, this);\n  };\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SetupResizeObserverMockOptions {\n  /**\n   * Set this to `true` to mimic the real `ResizeObserver` behavior where the\n   * updates occur after an animation frame instead of invoking immediately.\n   *\n   * Keeping this as `false` is recommended since this option was only added to\n   * make testing this function itself easier.\n   *\n   * @defaultValue `false`\n   */\n  raf?: boolean;\n\n  /**\n   * Keeping this as the `resizeObserverManager` is recommended since this\n   * option was only added to make testing this function easier itself.\n   *\n   * @defaultValue `resizeObserverManager`\n   */\n  manager?: ResizeObserverManager;\n}\n\n/**\n * Initializes the `ResizeObserverMock` to be used for tests.\n *\n * @example Main Usage\n * ```tsx\n * import {\n *   cleanupResizeObserverAfterEach,\n *   render,\n *   screen,\n *   setupResizeObserverMock,\n * } from \"@react-md/core/test-utils\";\n * import { useResizeObserver } from \"@react-md/core/useResizeObserver\";\n * import { useCallback, useState } from \"react\";\n *\n * // choose your test framework\n * import { afterEach, jest } from \"@jest/globals\";\n * cleanupResizeObserverAfterEach(afterEach, jest.restoreAllMocks);\n *\n * import { afterEach, vitest } from \"vitest\";\n * cleanupResizeObserverAfterEach(afterEach, vitest.restoreAllMocks);\n *\n * function ExampleComponent() {\n *   const [size, setSize] = useState({ height: 0, width: 0 });\n *   const ref = useResizeObserver({\n *     onUpdate: useCallback((entry) => {\n *       setSize({\n *         height: entry.contentRect.height,\n *         width: entry.contentRect.width,\n *       });\n *     }, []),\n *   });\n *\n *   return (\n *     <>\n *       <div data-testid=\"size\">{JSON.stringify(size)}</div>\n *       <div data-testid=\"resize-target\" ref={ref} />\n *     </>\n *   );\n * }\n *\n * describe(\"ExampleComponent\", () => {\n *   it(\"should do stuff\", () => {\n *     const observer = setupResizeObserverMock();\n *     render(<ExampleComponent />);\n *\n *     const size = screen.getByTestId(\"size\");\n *     const resizeTarget = screen.getByTestId(\"resize-target\");\n *\n *     // jsdom sets all element sizes to 0 by default\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 0, width: 0 }));\n *\n *     // you can trigger with a custom change\n *     act(() => {\n *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });\n *     });\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 100, width: 100 }));\n *\n *     // or you can mock the `getBoundingClientRect` result\n *     jest.spyOn(resizeTarget, \"getBoundingClientRect\").mockReturnValue({\n *       ...document.body.getBoundingClientRect(),\n *       height: 200,\n *       width: 200,\n *     });\n *\n *     act(() => {\n *       observer.resizeElement(resizeTarget);\n *     });\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 200, width: 200 }));\n *   });\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport function setupResizeObserverMock(\n  options: SetupResizeObserverMockOptions = {}\n): ResizeObserverMock {\n  const { raf, manager = resizeObserverManager } = options;\n\n  const resizeObserver = new ResizeObserverMock((entries) => {\n    if (raf) {\n      window.cancelAnimationFrame(manager.frame);\n      manager.frame = window.requestAnimationFrame(() => {\n        manager.handleResizeEntries(entries);\n      });\n    } else {\n      manager.handleResizeEntries(entries);\n    }\n  });\n  manager.sharedObserver = resizeObserver;\n  return resizeObserver;\n}\n\n/**\n * @see {@link setupResizeObserverMock}\n * @since 6.0.0\n */\nexport function cleanupResizeObserverAfterEach(\n  afterEach: (callback: () => void) => void,\n  restoreAllMocks: () => void = () => {}\n): void {\n  afterEach(() => {\n    resizeObserverManager.frame = 0;\n    resizeObserverManager.subscriptions = new Map();\n    resizeObserverManager.sharedObserver = undefined;\n    restoreAllMocks();\n  });\n}\n"],"names":["resizeObserverManager","createResizeObserverEntry","ResizeObserverMock","constructor","callback","elements","observe","unobserve","disconnect","resizeElement","resizeAllElements","target","add","delete","clear","changesOrGetEntry","has","Error","entry","getEntry","entries","map","element","Set","setupResizeObserverMock","options","raf","manager","resizeObserver","window","cancelAnimationFrame","frame","requestAnimationFrame","handleResizeEntries","sharedObserver","cleanupResizeObserverAfterEach","afterEach","restoreAllMocks","subscriptions","Map","undefined"],"mappings":";;;;;;;;;;;;;AAAA,SAEEA,qBAAqB,QAChB,6BAA6B;AACpC,SAGEC,yBAAyB,QACpB,wCAAwC;AAE/C;;;;;;CAMC,GACD,OAAO,MAAMC;IAGXC,YAAY,AAAOC,QAAgC,CAAE;;QAFrDC,uBAAAA,YAAAA,KAAAA;QAMAC,uBAAAA,WAAAA,KAAAA;QAKAC,uBAAAA,aAAAA,KAAAA;QAIAC,uBAAAA,cAAAA,KAAAA;QAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCC,GACDC,uBAAAA,iBAAAA,KAAAA;QAyBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CC,GACDC,uBAAAA,qBAAAA,KAAAA;aA7HmBN,WAAAA;aAInBE,UAAU,CAACK;YACT,IAAI,CAACN,QAAQ,CAACO,GAAG,CAACD;YAClB,IAAI,CAACD,iBAAiB,CAACT;QACzB;aAEAM,YAAY,CAACI;YACX,IAAI,CAACN,QAAQ,CAACQ,MAAM,CAACF;QACvB;aAEAH,aAAa;YACX,IAAI,CAACH,QAAQ,CAACS,KAAK;QACrB;aAsCAL,gBAAgB,CACdE,QACAI,oBAG0Bd,yBAAyB;YAEnD,IAAI,CAAC,IAAI,CAACI,QAAQ,CAACW,GAAG,CAACL,SAAS;gBAC9B,MAAM,IAAIM,MACR;YAEJ;YAEA,IAAIC;YACJ,IAAI,OAAOH,sBAAsB,YAAY;gBAC3CG,QAAQH,kBAAkBJ;YAC5B,OAAO,IAAI,CAAE,CAAA,iBAAiBI,iBAAgB,GAAI;gBAChDG,QAAQjB,0BAA0BU,QAAQI;YAC5C,OAAO;gBACLG,QAAQH;YACV;YAEA,IAAI,CAACX,QAAQ,CAAC;gBAACc;aAAM,EAAE,IAAI;QAC7B;aAiDAR,oBAAoB,CAACS,WAAWlB,yBAAyB;YACvD,MAAMmB,UAAU;mBAAI,IAAI,CAACf,QAAQ;aAAC,CAACgB,GAAG,CAAC,CAACC,UAAYH,SAASG;YAC7D,IAAI,CAAClB,QAAQ,CAACgB,SAAS,IAAI;QAC7B;QA/HE,IAAI,CAACf,QAAQ,GAAG,IAAIkB;IACtB;AA+HF;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEC,GACD,OAAO,SAASC,wBACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,GAAG,EAAEC,UAAU3B,qBAAqB,EAAE,GAAGyB;IAEjD,MAAMG,iBAAiB,IAAI1B,mBAAmB,CAACkB;QAC7C,IAAIM,KAAK;YACPG,OAAOC,oBAAoB,CAACH,QAAQI,KAAK;YACzCJ,QAAQI,KAAK,GAAGF,OAAOG,qBAAqB,CAAC;gBAC3CL,QAAQM,mBAAmB,CAACb;YAC9B;QACF,OAAO;YACLO,QAAQM,mBAAmB,CAACb;QAC9B;IACF;IACAO,QAAQO,cAAc,GAAGN;IACzB,OAAOA;AACT;AAEA;;;CAGC,GACD,OAAO,SAASO,+BACdC,SAAyC,EACzCC,kBAA8B,KAAO,CAAC;IAEtCD,UAAU;QACRpC,sBAAsB+B,KAAK,GAAG;QAC9B/B,sBAAsBsC,aAAa,GAAG,IAAIC;QAC1CvC,sBAAsBkC,cAAc,GAAGM;QACvCH;IACF;AACF"}
+{"version":3,"sources":["../../../src/test-utils/mocks/ResizeObserver.ts"],"sourcesContent":["import {\n  type ResizeObserverManager,\n  resizeObserverManager,\n} from \"../../useResizeObserver.js\";\nimport {\n  type GetResizeObserverEntryMock,\n  type ResizeObserverEntrySize,\n  createResizeObserverEntry,\n} from \"../utils/createResizeObserverEntry.js\";\n\n/**\n * This is the default ResizeObserver implementation if it does not already\n * exist in jsdom. You normally should not use this directly and instead use the\n * {@link setupResizeObserverMock} instead.\n *\n * @since 6.0.0\n */\nexport class ResizeObserverMock implements ResizeObserver {\n  elements: Set<Element>;\n\n  constructor(public callback: ResizeObserverCallback) {\n    this.elements = new Set();\n  }\n\n  observe = (target: Element): void => {\n    this.elements.add(target);\n    this.resizeAllElements(createResizeObserverEntry);\n  };\n\n  unobserve = (target: Element): void => {\n    this.elements.delete(target);\n  };\n\n  disconnect = (): void => {\n    this.elements.clear();\n  };\n\n  /**\n   * Triggers the resize event for a specific element. This must be wrapped in\n   * `act`.\n   *\n   * @example Main Usage\n   * ```tsx\n   * import {\n   *   setupResizeObserverMock,\n   * } from \"@react-md/core/test-utils\";\n   * import { useResizeObserver } from \"@react-md/core/useResizeObserver\";\n   * import { ExampleComponent } from \"../ExampleComponent.js\";\n   *\n   * // choose your test framework\n   * import { afterEach, cleanupResizeObserverAfterEach, jest } from \"@jest/globals\";\n   * cleanupResizeObserverAfterEach();\n   *\n   * import { afterEach, cleanupResizeObserverAfterEach, vitest } from \"vitest\";\n   * cleanupResizeObserverAfterEach();\n   *\n   * describe(\"ExampleComponent\", () => {\n   *   it(\"should do stuff\", () => {\n   *     const observer = setupResizeObserverMock();\n   *     render(<ExampleComponent />)\n   *\n   *     const resizeTarget = screen.getByTestId(\"resize-target\")\n   *\n   *     // you can trigger with a custom change\n   *     act(() => {\n   *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });\n   *     });\n   *     // expect resize changes\n   *   });\n   * })\n   * ```\n   */\n  resizeElement = (\n    target: Element,\n    changesOrGetEntry:\n      | GetResizeObserverEntryMock\n      | ResizeObserverEntrySize\n      | ResizeObserverEntry = createResizeObserverEntry\n  ): void => {\n    if (!this.elements.has(target)) {\n      throw new Error(\n        \"The `ResizeObserverMock` is not watching the target element and cannot be resized\"\n      );\n    }\n\n    let entry: ResizeObserverEntry;\n    if (typeof changesOrGetEntry === \"function\") {\n      entry = changesOrGetEntry(target);\n    } else if (!(\"contentRect\" in changesOrGetEntry)) {\n      entry = createResizeObserverEntry(target, changesOrGetEntry);\n    } else {\n      entry = changesOrGetEntry;\n    }\n\n    this.callback([entry], this);\n  };\n\n  /**\n   * You'll normally want to use {@link resizeElement} instead, but this can be\n   * used to resize all the watched elements at once.\n   *\n   * @example\n   * ```tsx\n   * import {\n   *   act,\n   *   createResizeObserverEntry,\n   *   render,\n   *   screen,\n   *   setupResizeObserverMock,\n   * } from \"@react-md/core/test-utils\";\n   *\n   * const observer = setupResizeObserverMock();\n   * const { container } = render(<Test />)\n   * expect(container).toMatchSnapshot()\n   *\n   * const target1 = screen.getByTestId('target-1');\n   * const target2 = screen.getByTestId('target-2');\n   * const target3 = screen.getByTestId('target-3');\n   *\n   * act(() => {\n   *   observer.resizeAllElements((element) => {\n   *     let height: number | undefined;\n   *     let width: number | undefined;\n   *     switch (element) {\n   *       case target1:\n   *         height = 400;\n   *         width = 250;\n   *         break;\n   *       case target2:\n   *         height = 100;\n   *         width = 380;\n   *         break;\n   *       case target3:\n   *         height = 24;\n   *         width = 24;\n   *         break;\n   *     }\n   *\n   *     return createResizeObserverEntry(element, { height, width });\n   *   });\n   * });\n   * expect(container).toMatchSnapshot()\n   * ```\n   */\n  resizeAllElements = (getEntry = createResizeObserverEntry): void => {\n    const entries = [...this.elements].map((element) => getEntry(element));\n    this.callback(entries, this);\n  };\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SetupResizeObserverMockOptions {\n  /**\n   * Set this to `true` to mimic the real `ResizeObserver` behavior where the\n   * updates occur after an animation frame instead of invoking immediately.\n   *\n   * Keeping this as `false` is recommended since this option was only added to\n   * make testing this function itself easier.\n   *\n   * @defaultValue `false`\n   */\n  raf?: boolean;\n\n  /**\n   * Keeping this as the `resizeObserverManager` is recommended since this\n   * option was only added to make testing this function easier itself.\n   *\n   * @defaultValue `resizeObserverManager`\n   */\n  manager?: ResizeObserverManager;\n}\n\n/**\n * Initializes the `ResizeObserverMock` to be used for tests.\n *\n * @example Main Usage\n * ```tsx\n * import {\n *   cleanupResizeObserverAfterEach,\n *   render,\n *   screen,\n *   setupResizeObserverMock,\n * } from \"@react-md/core/test-utils\";\n * import { useResizeObserver } from \"@react-md/core/useResizeObserver\";\n * import { useCallback, useState } from \"react\";\n *\n * // choose your test framework\n * import { afterEach, jest } from \"@jest/globals\";\n * cleanupResizeObserverAfterEach(afterEach, jest.restoreAllMocks);\n *\n * import { afterEach, vitest } from \"vitest\";\n * cleanupResizeObserverAfterEach(afterEach, vitest.restoreAllMocks);\n *\n * function ExampleComponent() {\n *   const [size, setSize] = useState({ height: 0, width: 0 });\n *   const ref = useResizeObserver({\n *     onUpdate: useCallback((entry) => {\n *       setSize({\n *         height: entry.contentRect.height,\n *         width: entry.contentRect.width,\n *       });\n *     }, []),\n *   });\n *\n *   return (\n *     <>\n *       <div data-testid=\"size\">{JSON.stringify(size)}</div>\n *       <div data-testid=\"resize-target\" ref={ref} />\n *     </>\n *   );\n * }\n *\n * describe(\"ExampleComponent\", () => {\n *   it(\"should do stuff\", () => {\n *     const observer = setupResizeObserverMock();\n *     render(<ExampleComponent />);\n *\n *     const size = screen.getByTestId(\"size\");\n *     const resizeTarget = screen.getByTestId(\"resize-target\");\n *\n *     // jsdom sets all element sizes to 0 by default\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 0, width: 0 }));\n *\n *     // you can trigger with a custom change\n *     act(() => {\n *       observer.resizeElement(resizeTarget, { height: 100, width: 100 });\n *     });\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 100, width: 100 }));\n *\n *     // or you can mock the `getBoundingClientRect` result\n *     jest.spyOn(resizeTarget, \"getBoundingClientRect\").mockReturnValue({\n *       ...document.body.getBoundingClientRect(),\n *       height: 200,\n *       width: 200,\n *     });\n *\n *     act(() => {\n *       observer.resizeElement(resizeTarget);\n *     });\n *     expect(size).toHaveTextContent(JSON.stringify({ height: 200, width: 200 }));\n *   });\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport function setupResizeObserverMock(\n  options: SetupResizeObserverMockOptions = {}\n): ResizeObserverMock {\n  const { raf, manager = resizeObserverManager } = options;\n\n  const resizeObserver = new ResizeObserverMock((entries) => {\n    if (raf) {\n      window.cancelAnimationFrame(manager.frame);\n      manager.frame = window.requestAnimationFrame(() => {\n        manager.handleResizeEntries(entries);\n      });\n    } else {\n      manager.handleResizeEntries(entries);\n    }\n  });\n  manager.sharedObserver = resizeObserver;\n  return resizeObserver;\n}\n\n/**\n * @see {@link setupResizeObserverMock}\n * @since 6.0.0\n * @internal\n */\nexport function cleanupRO(\n  afterEach: (callback: () => void) => void,\n  restoreAllMocks: () => void = () => {}\n): void {\n  afterEach(() => {\n    resizeObserverManager.frame = 0;\n    resizeObserverManager.subscriptions = new Map();\n    resizeObserverManager.sharedObserver = undefined;\n    restoreAllMocks();\n  });\n}\n"],"names":["resizeObserverManager","createResizeObserverEntry","ResizeObserverMock","constructor","callback","elements","observe","unobserve","disconnect","resizeElement","resizeAllElements","target","add","delete","clear","changesOrGetEntry","has","Error","entry","getEntry","entries","map","element","Set","setupResizeObserverMock","options","raf","manager","resizeObserver","window","cancelAnimationFrame","frame","requestAnimationFrame","handleResizeEntries","sharedObserver","cleanupRO","afterEach","restoreAllMocks","subscriptions","Map","undefined"],"mappings":";;;;;;;;;;;;;AAAA,SAEEA,qBAAqB,QAChB,6BAA6B;AACpC,SAGEC,yBAAyB,QACpB,wCAAwC;AAE/C;;;;;;CAMC,GACD,OAAO,MAAMC;IAGXC,YAAY,AAAOC,QAAgC,CAAE;;QAFrDC,uBAAAA,YAAAA,KAAAA;QAMAC,uBAAAA,WAAAA,KAAAA;QAKAC,uBAAAA,aAAAA,KAAAA;QAIAC,uBAAAA,cAAAA,KAAAA;QAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCC,GACDC,uBAAAA,iBAAAA,KAAAA;QAyBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CC,GACDC,uBAAAA,qBAAAA,KAAAA;aA5HmBN,WAAAA;aAInBE,UAAU,CAACK;YACT,IAAI,CAACN,QAAQ,CAACO,GAAG,CAACD;YAClB,IAAI,CAACD,iBAAiB,CAACT;QACzB;aAEAM,YAAY,CAACI;YACX,IAAI,CAACN,QAAQ,CAACQ,MAAM,CAACF;QACvB;aAEAH,aAAa;YACX,IAAI,CAACH,QAAQ,CAACS,KAAK;QACrB;aAqCAL,gBAAgB,CACdE,QACAI,oBAG0Bd,yBAAyB;YAEnD,IAAI,CAAC,IAAI,CAACI,QAAQ,CAACW,GAAG,CAACL,SAAS;gBAC9B,MAAM,IAAIM,MACR;YAEJ;YAEA,IAAIC;YACJ,IAAI,OAAOH,sBAAsB,YAAY;gBAC3CG,QAAQH,kBAAkBJ;YAC5B,OAAO,IAAI,CAAE,CAAA,iBAAiBI,iBAAgB,GAAI;gBAChDG,QAAQjB,0BAA0BU,QAAQI;YAC5C,OAAO;gBACLG,QAAQH;YACV;YAEA,IAAI,CAACX,QAAQ,CAAC;gBAACc;aAAM,EAAE,IAAI;QAC7B;aAiDAR,oBAAoB,CAACS,WAAWlB,yBAAyB;YACvD,MAAMmB,UAAU;mBAAI,IAAI,CAACf,QAAQ;aAAC,CAACgB,GAAG,CAAC,CAACC,UAAYH,SAASG;YAC7D,IAAI,CAAClB,QAAQ,CAACgB,SAAS,IAAI;QAC7B;QA9HE,IAAI,CAACf,QAAQ,GAAG,IAAIkB;IACtB;AA8HF;AA0BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEC,GACD,OAAO,SAASC,wBACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,GAAG,EAAEC,UAAU3B,qBAAqB,EAAE,GAAGyB;IAEjD,MAAMG,iBAAiB,IAAI1B,mBAAmB,CAACkB;QAC7C,IAAIM,KAAK;YACPG,OAAOC,oBAAoB,CAACH,QAAQI,KAAK;YACzCJ,QAAQI,KAAK,GAAGF,OAAOG,qBAAqB,CAAC;gBAC3CL,QAAQM,mBAAmB,CAACb;YAC9B;QACF,OAAO;YACLO,QAAQM,mBAAmB,CAACb;QAC9B;IACF;IACAO,QAAQO,cAAc,GAAGN;IACzB,OAAOA;AACT;AAEA;;;;CAIC,GACD,OAAO,SAASO,UACdC,SAAyC,EACzCC,kBAA8B,KAAO,CAAC;IAEtCD,UAAU;QACRpC,sBAAsB+B,KAAK,GAAG;QAC9B/B,sBAAsBsC,aAAa,GAAG,IAAIC;QAC1CvC,sBAAsBkC,cAAc,GAAGM;QACvCH;IACF;AACF"}

package/dist/test-utils/mocks/match-media.d.ts

@@ -1,3 +1,34 @@
+/**
+ * @since 6.0.0
+ */
+export interface MatchMediaChangeViewport {
+    /**
+     * @example Default Behavior
+     * ```tsx
+     * const matchMedia = spyOnMatchMedia();
+     * render(<Test />);
+     *
+     * // expect desktop results
+     *
+     * matchMedia.changeViewport(matchPhone);
+     * // expect phone results
+     * ```
+     *
+     * @example Custom Act Behavior
+     * ```tsx
+     * const matchMedia = spyOnMatchMedia();
+     * const { rerender } = render(<Test />);
+     *
+     * // expect desktop results
+     *
+     * matchMedia.changeViewport(matchPhone, false);
+     * rerender(<Test key="new-key" />);
+     *
+     * // expect phone results
+     * ```
+     */
+    changeViewport: (matcher: MatchMediaMatcher, disableAct?: boolean) => void;
+}
 /**
  * @internal
  * @since 6.0.0

package/dist/test-utils/mocks/match-media.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/mocks/match-media.ts"],"sourcesContent":["import {\n  DEFAULT_DESKTOP_LARGE_MIN_WIDTH,\n  DEFAULT_DESKTOP_MIN_WIDTH,\n  DEFAULT_PHONE_MAX_WIDTH,\n  DEFAULT_TABLET_MIN_WIDTH,\n} from \"../../media-queries/appSize.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport const BASE_MEDIA_QUERY_LIST: MediaQueryList = {\n  media: \"\",\n  matches: false,\n  onchange: noop,\n  addListener: noop,\n  addEventListener: noop,\n  removeEventListener: noop,\n  removeListener: noop,\n  dispatchEvent: () => false,\n};\n\n/** @since 6.0.0 */\nexport type MatchMediaMatcher = (query: string) => boolean;\n\n/**\n * @since 6.0.0\n * @returns `true` for phone media queries\n */\nexport const matchPhone: MatchMediaMatcher = (query) =>\n  query.includes(DEFAULT_PHONE_MAX_WIDTH);\n\n/**\n * @since 6.0.0\n * @returns `true` for tablet media queries\n */\nexport const matchTablet: MatchMediaMatcher = (query) =>\n  query.includes(DEFAULT_TABLET_MIN_WIDTH);\n\n/**\n * @since 6.0.0\n * @returns `true` for desktop media queries\n */\nexport const matchDesktop: MatchMediaMatcher = (query) =>\n  query.includes(DEFAULT_DESKTOP_MIN_WIDTH);\n\n/**\n * @since 6.0.0\n * @returns `true` for large desktop media queries\n */\nexport const matchLargeDesktop: MatchMediaMatcher = (query) =>\n  query.includes(DEFAULT_DESKTOP_LARGE_MIN_WIDTH);\n\n/**\n * @since 6.0.0\n * @returns `true` for both desktop and large desktop media queries\n */\nexport const matchAnyDesktop: MatchMediaMatcher = (query) =>\n  matchDesktop(query) || matchLargeDesktop(query);\n"],"names":["DEFAULT_DESKTOP_LARGE_MIN_WIDTH","DEFAULT_DESKTOP_MIN_WIDTH","DEFAULT_PHONE_MAX_WIDTH","DEFAULT_TABLET_MIN_WIDTH","noop","BASE_MEDIA_QUERY_LIST","media","matches","onchange","addListener","addEventListener","removeEventListener","removeListener","dispatchEvent","matchPhone","query","includes","matchTablet","matchDesktop","matchLargeDesktop","matchAnyDesktop"],"mappings":"AAAA,SACEA,+BAA+B,EAC/BC,yBAAyB,EACzBC,uBAAuB,EACvBC,wBAAwB,QACnB,iCAAiC;AAExC,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;CAGC,GACD,OAAO,MAAMC,wBAAwC;IACnDC,OAAO;IACPC,SAAS;IACTC,UAAUJ;IACVK,aAAaL;IACbM,kBAAkBN;IAClBO,qBAAqBP;IACrBQ,gBAAgBR;IAChBS,eAAe,IAAM;AACvB,EAAE;AAKF;;;CAGC,GACD,OAAO,MAAMC,aAAgC,CAACC,QAC5CA,MAAMC,QAAQ,CAACd,yBAAyB;AAE1C;;;CAGC,GACD,OAAO,MAAMe,cAAiC,CAACF,QAC7CA,MAAMC,QAAQ,CAACb,0BAA0B;AAE3C;;;CAGC,GACD,OAAO,MAAMe,eAAkC,CAACH,QAC9CA,MAAMC,QAAQ,CAACf,2BAA2B;AAE5C;;;CAGC,GACD,OAAO,MAAMkB,oBAAuC,CAACJ,QACnDA,MAAMC,QAAQ,CAAChB,iCAAiC;AAElD;;;CAGC,GACD,OAAO,MAAMoB,kBAAqC,CAACL,QACjDG,aAAaH,UAAUI,kBAAkBJ,OAAO"}
+{"version":3,"sources":["../../../src/test-utils/mocks/match-media.ts"],"sourcesContent":["import {\n  DEFAULT_DESKTOP_LARGE_MIN_WIDTH,\n  DEFAULT_DESKTOP_MIN_WIDTH,\n  DEFAULT_PHONE_MAX_WIDTH,\n  DEFAULT_TABLET_MIN_WIDTH,\n} from \"../../media-queries/appSize.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MatchMediaChangeViewport {\n  /**\n   * @example Default Behavior\n   * ```tsx\n   * const matchMedia = spyOnMatchMedia();\n   * render(<Test />);\n   *\n   * // expect desktop results\n   *\n   * matchMedia.changeViewport(matchPhone);\n   * // expect phone results\n   * ```\n   *\n   * @example Custom Act Behavior\n   * ```tsx\n   * const matchMedia = spyOnMatchMedia();\n   * const { rerender } = render(<Test />);\n   *\n   * // expect desktop results\n   *\n   * matchMedia.changeViewport(matchPhone, false);\n   * rerender(<Test key=\"new-key\" />);\n   *\n   * // expect phone results\n   * ```\n   */\n  changeViewport: (matcher: MatchMediaMatcher, disableAct?: boolean) => void;\n}\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport const BASE_MEDIA_QUERY_LIST: MediaQueryList = {\n  media: \"\",\n  matches: false,\n  onchange: noop,\n  addListener: noop,\n  addEventListener: noop,\n  removeEventListener: noop,\n  removeListener: noop,\n  dispatchEvent: () => false,\n};\n\n/** @since 6.0.0 */\nexport type MatchMediaMatcher = (query: string) => boolean;\n\n/**\n * @since 6.0.0\n * @returns `true` for phone media queries\n */\nexport const matchPhone: MatchMediaMatcher = (query) =>\n  query.includes(DEFAULT_PHONE_MAX_WIDTH);\n\n/**\n * @since 6.0.0\n * @returns `true` for tablet media queries\n */\nexport const matchTablet: MatchMediaMatcher = (query) =>\n  query.includes(DEFAULT_TABLET_MIN_WIDTH);\n\n/**\n * @since 6.0.0\n * @returns `true` for desktop media queries\n */\nexport const matchDesktop: MatchMediaMatcher = (query) =>\n  query.includes(DEFAULT_DESKTOP_MIN_WIDTH);\n\n/**\n * @since 6.0.0\n * @returns `true` for large desktop media queries\n */\nexport const matchLargeDesktop: MatchMediaMatcher = (query) =>\n  query.includes(DEFAULT_DESKTOP_LARGE_MIN_WIDTH);\n\n/**\n * @since 6.0.0\n * @returns `true` for both desktop and large desktop media queries\n */\nexport const matchAnyDesktop: MatchMediaMatcher = (query) =>\n  matchDesktop(query) || matchLargeDesktop(query);\n"],"names":["DEFAULT_DESKTOP_LARGE_MIN_WIDTH","DEFAULT_DESKTOP_MIN_WIDTH","DEFAULT_PHONE_MAX_WIDTH","DEFAULT_TABLET_MIN_WIDTH","noop","BASE_MEDIA_QUERY_LIST","media","matches","onchange","addListener","addEventListener","removeEventListener","removeListener","dispatchEvent","matchPhone","query","includes","matchTablet","matchDesktop","matchLargeDesktop","matchAnyDesktop"],"mappings":"AAAA,SACEA,+BAA+B,EAC/BC,yBAAyB,EACzBC,uBAAuB,EACvBC,wBAAwB,QACnB,iCAAiC;AAkCxC,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;CAGC,GACD,OAAO,MAAMC,wBAAwC;IACnDC,OAAO;IACPC,SAAS;IACTC,UAAUJ;IACVK,aAAaL;IACbM,kBAAkBN;IAClBO,qBAAqBP;IACrBQ,gBAAgBR;IAChBS,eAAe,IAAM;AACvB,EAAE;AAKF;;;CAGC,GACD,OAAO,MAAMC,aAAgC,CAACC,QAC5CA,MAAMC,QAAQ,CAACd,yBAAyB;AAE1C;;;CAGC,GACD,OAAO,MAAMe,cAAiC,CAACF,QAC7CA,MAAMC,QAAQ,CAACb,0BAA0B;AAE3C;;;CAGC,GACD,OAAO,MAAMe,eAAkC,CAACH,QAC9CA,MAAMC,QAAQ,CAACf,2BAA2B;AAE5C;;;CAGC,GACD,OAAO,MAAMkB,oBAAuC,CAACJ,QACnDA,MAAMC,QAAQ,CAAChB,iCAAiC;AAElD;;;CAGC,GACD,OAAO,MAAMoB,kBAAqC,CAACL,QACjDG,aAAaH,UAAUI,kBAAkBJ,OAAO"}

package/dist/test-utils/utils/createMatchMediaSpy.d.ts

@@ -0,0 +1,40 @@
+import { type MatchMediaChangeViewport, type MatchMediaMatcher } from "../mocks/match-media.js";
+/**
+ * @since 6.0.0
+ */
+export interface MatchMediaMockFunction {
+    mockImplementation(fn: typeof window.matchMedia): this;
+}
+/**
+ * Used to create a `spyOn(window, "matchMedia")` without knowing the test
+ * framework.
+ *
+ * @example Setup Test Framework
+ * ```tsx
+ * export function spyOnMatchMedia(
+ *   defaultMatch: MatchMediaMatcher = matchDesktop
+ * ): jest.SpiedFunction<typeof window.matchMedia> & MatchMediaChangeViewport {
+ *   return createMatchMediaSpy(jest.spyOn(window, "matchMedia"), defaultMatch);
+ * }
+ * ```
+ *
+ * NOTE: The `spyOnMatchMedia` function **must** not call the `.spyOn`
+ * immediately to work correctly. The spy needs to be invoked whenever this is
+ * called instead. For example, this is bad and will fail:
+ *
+ * @example Bad Example
+ * ```tsx
+ * export const spyOnMatchMedia = createMatchMediaSpy.bind(null, jest.spy(window, "matchMedia"));
+ * ```
+ *
+ * This is mostly a reminder to myself since I wanted something like the
+ * following code, but failed:
+ *
+ * ```ts
+ * export const spyOnMatchMedia = createMatchMediaSpy(jest.spyOn(window, "matchMedia"));
+ * ```
+ *
+ * @since 6.0.0
+ * @internal
+ */
+export declare function createMatchMediaSpy<SpyFunction extends MatchMediaMockFunction>(matchMediaSpy: SpyFunction, defaultMatch?: MatchMediaMatcher): SpyFunction & MatchMediaChangeViewport;

package/dist/test-utils/{mocks/match-media-implementation.js → utils/createMatchMediaSpy.js}

@@ -1,8 +1,37 @@
 import { act } from "@testing-library/react";
-import { BASE_MEDIA_QUERY_LIST, matchDesktop } from "./match-media.js";
+import { BASE_MEDIA_QUERY_LIST, matchDesktop } from "../mocks/match-media.js";
 /**
+ * Used to create a `spyOn(window, "matchMedia")` without knowing the test
+ * framework.
+ *
+ * @example Setup Test Framework
+ * ```tsx
+ * export function spyOnMatchMedia(
+ *   defaultMatch: MatchMediaMatcher = matchDesktop
+ * ): jest.SpiedFunction<typeof window.matchMedia> & MatchMediaChangeViewport {
+ *   return createMatchMediaSpy(jest.spyOn(window, "matchMedia"), defaultMatch);
+ * }
+ * ```
+ *
+ * NOTE: The `spyOnMatchMedia` function **must** not call the `.spyOn`
+ * immediately to work correctly. The spy needs to be invoked whenever this is
+ * called instead. For example, this is bad and will fail:
+ *
+ * @example Bad Example
+ * ```tsx
+ * export const spyOnMatchMedia = createMatchMediaSpy.bind(null, jest.spy(window, "matchMedia"));
+ * ```
+ *
+ * This is mostly a reminder to myself since I wanted something like the
+ * following code, but failed:
+ *
+ * ```ts
+ * export const spyOnMatchMedia = createMatchMediaSpy(jest.spyOn(window, "matchMedia"));
+ * ```
+ *
  * @since 6.0.0
- */ export const createMatchMediaSpy = (matchMediaSpy, defaultMatch = matchDesktop)=>{
+ * @internal
+ */ export function createMatchMediaSpy(matchMediaSpy, defaultMatch = matchDesktop) {
     const listeners = new Map();
     const matchMedia = matchMediaSpy.mockImplementation((query)=>({
             ...BASE_MEDIA_QUERY_LIST,
@@ -41,6 +70,6 @@ import { BASE_MEDIA_QUERY_LIST, matchDesktop } from "./match-media.js";
     const mock = matchMedia;
     mock.changeViewport = changeViewport;
     return mock;
-};
+}
 
-//# sourceMappingURL=match-media-implementation.js.map
+//# sourceMappingURL=createMatchMediaSpy.js.map

package/dist/test-utils/utils/createMatchMediaSpy.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/test-utils/utils/createMatchMediaSpy.ts"],"sourcesContent":["import { act } from \"@testing-library/react\";\n\nimport {\n  BASE_MEDIA_QUERY_LIST,\n  type MatchMediaChangeViewport,\n  type MatchMediaMatcher,\n  matchDesktop,\n} from \"../mocks/match-media.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MatchMediaMockFunction {\n  mockImplementation(fn: typeof window.matchMedia): this;\n}\n\n/**\n * Used to create a `spyOn(window, \"matchMedia\")` without knowing the test\n * framework.\n *\n * @example Setup Test Framework\n * ```tsx\n * export function spyOnMatchMedia(\n *   defaultMatch: MatchMediaMatcher = matchDesktop\n * ): jest.SpiedFunction<typeof window.matchMedia> & MatchMediaChangeViewport {\n *   return createMatchMediaSpy(jest.spyOn(window, \"matchMedia\"), defaultMatch);\n * }\n * ```\n *\n * NOTE: The `spyOnMatchMedia` function **must** not call the `.spyOn`\n * immediately to work correctly. The spy needs to be invoked whenever this is\n * called instead. For example, this is bad and will fail:\n *\n * @example Bad Example\n * ```tsx\n * export const spyOnMatchMedia = createMatchMediaSpy.bind(null, jest.spy(window, \"matchMedia\"));\n * ```\n *\n * This is mostly a reminder to myself since I wanted something like the\n * following code, but failed:\n *\n * ```ts\n * export const spyOnMatchMedia = createMatchMediaSpy(jest.spyOn(window, \"matchMedia\"));\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport function createMatchMediaSpy<SpyFunction extends MatchMediaMockFunction>(\n  matchMediaSpy: SpyFunction,\n  defaultMatch: MatchMediaMatcher = matchDesktop\n): SpyFunction & MatchMediaChangeViewport {\n  type Listener = (event: MediaQueryListEvent) => void;\n\n  const listeners = new Map<string, Listener>();\n  const matchMedia = matchMediaSpy.mockImplementation((query) => ({\n    ...BASE_MEDIA_QUERY_LIST,\n    addEventListener(type: string, listener: Listener | EventListenerObject) {\n      /* c8 ignore start */\n      if (typeof listener !== \"function\" || type !== \"change\") {\n        return;\n      }\n      /* c8 ignore stop */\n\n      listeners.set(query, listener);\n    },\n    removeEventListener(\n      type: string,\n      listener: Listener | EventListenerObject\n    ) {\n      /* c8 ignore start */\n      if (typeof listener !== \"function\" || type !== \"change\") {\n        return;\n      }\n      /* c8 ignore stop */\n\n      listeners.delete(query);\n    },\n    matches: defaultMatch(query),\n  }));\n\n  const changeViewport = (\n    matcher: MatchMediaMatcher,\n    disableAct = false\n  ): void => {\n    const update = (): void => {\n      window.dispatchEvent(new Event(\"resize\"));\n\n      const event = new Event(\"change\");\n      listeners.forEach((listener, query) => {\n        listener({\n          ...event,\n          media: \"\",\n          matches: matcher(query),\n        });\n      });\n    };\n    if (disableAct) {\n      update();\n    } else {\n      act(update);\n    }\n  };\n\n  const mock = matchMedia as SpyFunction & MatchMediaChangeViewport;\n  mock.changeViewport = changeViewport;\n\n  return mock;\n}\n"],"names":["act","BASE_MEDIA_QUERY_LIST","matchDesktop","createMatchMediaSpy","matchMediaSpy","defaultMatch","listeners","Map","matchMedia","mockImplementation","query","addEventListener","type","listener","set","removeEventListener","delete","matches","changeViewport","matcher","disableAct","update","window","dispatchEvent","Event","event","forEach","media","mock"],"mappings":"AAAA,SAASA,GAAG,QAAQ,yBAAyB;AAE7C,SACEC,qBAAqB,EAGrBC,YAAY,QACP,0BAA0B;AASjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BC,GACD,OAAO,SAASC,oBACdC,aAA0B,EAC1BC,eAAkCH,YAAY;IAI9C,MAAMI,YAAY,IAAIC;IACtB,MAAMC,aAAaJ,cAAcK,kBAAkB,CAAC,CAACC,QAAW,CAAA;YAC9D,GAAGT,qBAAqB;YACxBU,kBAAiBC,IAAY,EAAEC,QAAwC;gBACrE,mBAAmB,GACnB,IAAI,OAAOA,aAAa,cAAcD,SAAS,UAAU;oBACvD;gBACF;gBACA,kBAAkB,GAElBN,UAAUQ,GAAG,CAACJ,OAAOG;YACvB;YACAE,qBACEH,IAAY,EACZC,QAAwC;gBAExC,mBAAmB,GACnB,IAAI,OAAOA,aAAa,cAAcD,SAAS,UAAU;oBACvD;gBACF;gBACA,kBAAkB,GAElBN,UAAUU,MAAM,CAACN;YACnB;YACAO,SAASZ,aAAaK;QACxB,CAAA;IAEA,MAAMQ,iBAAiB,CACrBC,SACAC,aAAa,KAAK;QAElB,MAAMC,SAAS;YACbC,OAAOC,aAAa,CAAC,IAAIC,MAAM;YAE/B,MAAMC,QAAQ,IAAID,MAAM;YACxBlB,UAAUoB,OAAO,CAAC,CAACb,UAAUH;gBAC3BG,SAAS;oBACP,GAAGY,KAAK;oBACRE,OAAO;oBACPV,SAASE,QAAQT;gBACnB;YACF;QACF;QACA,IAAIU,YAAY;YACdC;QACF,OAAO;YACLrB,IAAIqB;QACN;IACF;IAEA,MAAMO,OAAOpB;IACboB,KAAKV,cAAc,GAAGA;IAEtB,OAAOU;AACT"}

package/dist/test-utils/vitest/match-media.d.ts

@@ -1,6 +1,5 @@
 import { type MockInstance } from "vitest";
-import { type MatchMediaChangeViewport } from "../mocks/match-media-implementation.js";
-import { type MatchMediaMatcher } from "../mocks/match-media.js";
+import { type MatchMediaChangeViewport, type MatchMediaMatcher } from "../mocks/match-media.js";
 /**
  * @example Default Behavior
  * ```tsx

package/dist/test-utils/vitest/match-media.js

@@ -1,6 +1,6 @@
 import { vi } from "vitest";
-import { createMatchMediaSpy } from "../mocks/match-media-implementation.js";
 import { matchDesktop } from "../mocks/match-media.js";
+import { createMatchMediaSpy } from "../utils/createMatchMediaSpy.js";
 /**
  * @example Default Behavior
  * ```tsx

package/dist/test-utils/vitest/match-media.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/vitest/match-media.ts"],"sourcesContent":["import { type MockInstance, vi } from \"vitest\";\n\nimport {\n  type MatchMediaChangeViewport,\n  createMatchMediaSpy,\n} from \"../mocks/match-media-implementation.js\";\nimport { type MatchMediaMatcher, matchDesktop } from \"../mocks/match-media.js\";\n\n/**\n * @example Default Behavior\n * ```tsx\n * import { matchPhone, render } from \"@react-md/core/test-utils\";\n * import { spyOnMatchMedia } from \"@react-md/core/test-utils/vitest\";\n *\n * const matchMedia = spyOnMatchMedia();\n * render(<Test />);\n *\n * // expect desktop results\n *\n * matchMedia.changeViewport(matchPhone);\n * // expect phone results\n * ```\n *\n * @example Set Default Media\n * ```tsx\n * import { matchPhone, render } from \"@react-md/core/test-utils\";\n * import { spyOnMatchMedia } from \"@react-md/core/test-utils/vitest\";\n *\n * const matchMedia = spyOnMatchMedia(matchPhone);\n * render(<Test />);\n *\n * // expect phone results\n * ```\n *\n * @since 6.0.0\n */\nexport function spyOnMatchMedia(\n  defaultMatch: MatchMediaMatcher = matchDesktop\n): MockInstance<typeof window.matchMedia> & MatchMediaChangeViewport {\n  return createMatchMediaSpy(vi.spyOn(window, \"matchMedia\"), defaultMatch);\n}\n"],"names":["vi","createMatchMediaSpy","matchDesktop","spyOnMatchMedia","defaultMatch","spyOn","window"],"mappings":"AAAA,SAA4BA,EAAE,QAAQ,SAAS;AAE/C,SAEEC,mBAAmB,QACd,yCAAyC;AAChD,SAAiCC,YAAY,QAAQ,0BAA0B;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC,gBACdC,eAAkCF,YAAY;IAE9C,OAAOD,oBAAoBD,GAAGK,KAAK,CAACC,QAAQ,eAAeF;AAC7D"}
+{"version":3,"sources":["../../../src/test-utils/vitest/match-media.ts"],"sourcesContent":["import { type MockInstance, vi } from \"vitest\";\n\nimport {\n  type MatchMediaChangeViewport,\n  type MatchMediaMatcher,\n  matchDesktop,\n} from \"../mocks/match-media.js\";\nimport { createMatchMediaSpy } from \"../utils/createMatchMediaSpy.js\";\n\n/**\n * @example Default Behavior\n * ```tsx\n * import { matchPhone, render } from \"@react-md/core/test-utils\";\n * import { spyOnMatchMedia } from \"@react-md/core/test-utils/vitest\";\n *\n * const matchMedia = spyOnMatchMedia();\n * render(<Test />);\n *\n * // expect desktop results\n *\n * matchMedia.changeViewport(matchPhone);\n * // expect phone results\n * ```\n *\n * @example Set Default Media\n * ```tsx\n * import { matchPhone, render } from \"@react-md/core/test-utils\";\n * import { spyOnMatchMedia } from \"@react-md/core/test-utils/vitest\";\n *\n * const matchMedia = spyOnMatchMedia(matchPhone);\n * render(<Test />);\n *\n * // expect phone results\n * ```\n *\n * @since 6.0.0\n */\nexport function spyOnMatchMedia(\n  defaultMatch: MatchMediaMatcher = matchDesktop\n): MockInstance<typeof window.matchMedia> & MatchMediaChangeViewport {\n  return createMatchMediaSpy(vi.spyOn(window, \"matchMedia\"), defaultMatch);\n}\n"],"names":["vi","matchDesktop","createMatchMediaSpy","spyOnMatchMedia","defaultMatch","spyOn","window"],"mappings":"AAAA,SAA4BA,EAAE,QAAQ,SAAS;AAE/C,SAGEC,YAAY,QACP,0BAA0B;AACjC,SAASC,mBAAmB,QAAQ,kCAAkC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC,gBACdC,eAAkCH,YAAY;IAE9C,OAAOC,oBAAoBF,GAAGK,KAAK,CAACC,QAAQ,eAAeF;AAC7D"}

package/dist/test-utils/vitest/resize-observer.js

@@ -1,10 +1,10 @@
 import { afterEach, vi } from "vitest";
-import { cleanupResizeObserverAfterEach as cleanup } from "../mocks/ResizeObserver.js";
+import { cleanupRO } from "../mocks/ResizeObserver.js";
 /**
  * @param restoreAllMocks - Set to `false` to prevent `vi.restoreAllMocks()` from being
  * called.
  */ export function cleanupResizeObserverAfterEach(restoreAllMocks = true) {
-    cleanup(afterEach, restoreAllMocks ? vi.restoreAllMocks : undefined);
+    cleanupRO(afterEach, restoreAllMocks ? vi.restoreAllMocks : undefined);
 }
 
 //# sourceMappingURL=resize-observer.js.map

package/dist/test-utils/vitest/resize-observer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/vitest/resize-observer.ts"],"sourcesContent":["import { afterEach, vi } from \"vitest\";\n\nimport { cleanupResizeObserverAfterEach as cleanup } from \"../mocks/ResizeObserver.js\";\n\n/**\n * @param restoreAllMocks - Set to `false` to prevent `vi.restoreAllMocks()` from being\n * called.\n */\nexport function cleanupResizeObserverAfterEach(restoreAllMocks = true): void {\n  cleanup(afterEach, restoreAllMocks ? vi.restoreAllMocks : undefined);\n}\n"],"names":["afterEach","vi","cleanupResizeObserverAfterEach","cleanup","restoreAllMocks","undefined"],"mappings":"AAAA,SAASA,SAAS,EAAEC,EAAE,QAAQ,SAAS;AAEvC,SAASC,kCAAkCC,OAAO,QAAQ,6BAA6B;AAEvF;;;CAGC,GACD,OAAO,SAASD,+BAA+BE,kBAAkB,IAAI;IACnED,QAAQH,WAAWI,kBAAkBH,GAAGG,eAAe,GAAGC;AAC5D"}
+{"version":3,"sources":["../../../src/test-utils/vitest/resize-observer.ts"],"sourcesContent":["import { afterEach, vi } from \"vitest\";\n\nimport { cleanupRO } from \"../mocks/ResizeObserver.js\";\n\n/**\n * @param restoreAllMocks - Set to `false` to prevent `vi.restoreAllMocks()` from being\n * called.\n */\nexport function cleanupResizeObserverAfterEach(restoreAllMocks = true): void {\n  cleanupRO(afterEach, restoreAllMocks ? vi.restoreAllMocks : undefined);\n}\n"],"names":["afterEach","vi","cleanupRO","cleanupResizeObserverAfterEach","restoreAllMocks","undefined"],"mappings":"AAAA,SAASA,SAAS,EAAEC,EAAE,QAAQ,SAAS;AAEvC,SAASC,SAAS,QAAQ,6BAA6B;AAEvD;;;CAGC,GACD,OAAO,SAASC,+BAA+BC,kBAAkB,IAAI;IACnEF,UAAUF,WAAWI,kBAAkBH,GAAGG,eAAe,GAAGC;AAC9D"}

package/dist/theme/LocalStorageColorSchemeProvider.d.ts

@@ -34,12 +34,10 @@ export interface LocalStorageColorSchemeProviderProps {
  *
  * @example
  * ```tsx
- * import {
- *   LocalStorageColorSchemeProvider,
- *   SegmentedButtonContainer,
- *   SegmentedButton,
- *   useColorScheme,
- * } from "@react-md/core";
+ * import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
+ * import { SegmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
+ * import { LocalStorageColorSchemeProvider } from "@react-md/core/theme/LocalStorageColorSchemeProvider";
+ * import { useColorScheme } from "@react-md/core/theme/useColorScheme";
  * import { createRoot } from "react-dom/client";
  *
  * function MyComponent(): ReactElement {
@@ -90,6 +88,8 @@ export interface LocalStorageColorSchemeProviderProps {
  * );
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/color-scheme-provider | ColorSchemeProvider Demos}
+ * @see {@link https://next.react-md.dev/customization/dark-mode|Dark Mode Setup}
  * @since 6.0.0
  */
 export declare function LocalStorageColorSchemeProvider(props: LocalStorageColorSchemeProviderProps): ReactElement;

package/dist/theme/LocalStorageColorSchemeProvider.js

@@ -11,12 +11,10 @@ import { useColorSchemeProvider } from "./useColorSchemeProvider.js";
  *
  * @example
  * ```tsx
- * import {
- *   LocalStorageColorSchemeProvider,
- *   SegmentedButtonContainer,
- *   SegmentedButton,
- *   useColorScheme,
- * } from "@react-md/core";
+ * import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
+ * import { SegmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
+ * import { LocalStorageColorSchemeProvider } from "@react-md/core/theme/LocalStorageColorSchemeProvider";
+ * import { useColorScheme } from "@react-md/core/theme/useColorScheme";
  * import { createRoot } from "react-dom/client";
  *
  * function MyComponent(): ReactElement {
@@ -67,6 +65,8 @@ import { useColorSchemeProvider } from "./useColorSchemeProvider.js";
  * );
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/color-scheme-provider | ColorSchemeProvider Demos}
+ * @see {@link https://next.react-md.dev/customization/dark-mode|Dark Mode Setup}
  * @since 6.0.0
  */ export function LocalStorageColorSchemeProvider(props) {
     const { localStorageKey = "colorScheme", defaultColorScheme = "light", disableMetaTag, children } = props;

package/dist/theme/LocalStorageColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/LocalStorageColorSchemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\n\nimport { useStorage } from \"../storage/useStorage.js\";\nimport { isColorScheme } from \"./isColorScheme.js\";\nimport { type ColorScheme } from \"./types.js\";\nimport { ColorSchemeProvider } from \"./useColorScheme.js\";\nimport { useColorSchemeProvider } from \"./useColorSchemeProvider.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LocalStorageColorSchemeProviderProps {\n  /**\n   * Set this to `true` to prevent a `<meta name=\"color-scheme\" content=\"{COLOR_SCHEME}\">`\n   * from being added to the `document.head`.\n   *\n   * @defaultValue `false`\n   */\n  disableMetaTag?: boolean;\n\n  /**\n   * Set this to an empty string to disable the local storage behavior. Otherwise,\n   * this can be used to customize the name.\n   *\n   * @defaultValue `\"colorScheme\"`\n   */\n  localStorageKey?: string;\n\n  /**\n   * The current color scheme that is being used by your app. This should\n   * match the `$color-scheme` SCSS variable.\n   *\n   * @defaultValue `\"light\"`\n   */\n  defaultColorScheme?: ColorScheme;\n\n  children: ReactNode;\n}\n\n/**\n * An optional implementation of the {@link ColorSchemeProvider} that supports\n * storing the value in local storage if the\n * {@link LocalStorageColorSchemeProviderProps.localStorageKey} is provided.\n *\n * @example\n * ```tsx\n * import {\n *   LocalStorageColorSchemeProvider,\n *   SegmentedButtonContainer,\n *   SegmentedButton,\n *   useColorScheme,\n * } from \"@react-md/core\";\n * import { createRoot } from \"react-dom/client\";\n *\n * function MyComponent(): ReactElement {\n *   const { currentColor, colorScheme, setColorScheme } = useColorScheme();\n *   // currentColor: \"light\" | \"dark\"\n *   // colorScheme: \"light\" | \"dark\" | \"system\"\n *\n *   return (\n *     <>\n *       The current color scheme is {currentColor}\n *       <SegmentedButtonContainer>\n *         <SegmentedButton\n *           selected={colorScheme === \"light\"}\n *           onClick={() => {\n *             setColorScheme(\"light\")\n *           }}\n *         >\n *           Light\n *         </SegmentedButton>\n *         <SegmentedButton\n *           selected={colorScheme === \"dark\"}\n *           onClick={() => {\n *             setColorScheme(\"dark\")\n *           }}\n *         >\n *           Dark\n *         </SegmentedButton>\n *         <SegmentedButton\n *           selected={colorScheme === \"system\"}\n *           onClick={() => {\n *             setColorScheme(\"system\")\n *           }}\n *         >\n *           System\n *         </SegmentedButton>\n *       </SegmentedButtonContainer>\n *     </>\n *   )l\n * }\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <LocalStorageColorSchemeProvider defaultColorScheme=\"system\">\n *     <MyComponent />\n *   </LocalStorageColorSchemeProvider>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function LocalStorageColorSchemeProvider(\n  props: LocalStorageColorSchemeProviderProps\n): ReactElement {\n  const {\n    localStorageKey = \"colorScheme\",\n    defaultColorScheme = \"light\",\n    disableMetaTag,\n    children,\n  } = props;\n\n  const { value: colorScheme, setValue: setColorScheme } = useStorage({\n    key: localStorageKey,\n    defaultValue: defaultColorScheme,\n    deserializer: (item) => (isColorScheme(item) ? item : defaultColorScheme),\n  });\n\n  const value = useColorSchemeProvider({\n    disableMetaTag,\n    colorScheme,\n    setColorScheme,\n  });\n\n  return <ColorSchemeProvider value={value}>{children}</ColorSchemeProvider>;\n}\n"],"names":["useStorage","isColorScheme","ColorSchemeProvider","useColorSchemeProvider","LocalStorageColorSchemeProvider","props","localStorageKey","defaultColorScheme","disableMetaTag","children","value","colorScheme","setValue","setColorScheme","key","defaultValue","deserializer","item"],"mappings":"AAAA;;AAIA,SAASA,UAAU,QAAQ,2BAA2B;AACtD,SAASC,aAAa,QAAQ,qBAAqB;AAEnD,SAASC,mBAAmB,QAAQ,sBAAsB;AAC1D,SAASC,sBAAsB,QAAQ,8BAA8B;AAiCrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,SAASC,gCACdC,KAA2C;IAE3C,MAAM,EACJC,kBAAkB,aAAa,EAC/BC,qBAAqB,OAAO,EAC5BC,cAAc,EACdC,QAAQ,EACT,GAAGJ;IAEJ,MAAM,EAAEK,OAAOC,WAAW,EAAEC,UAAUC,cAAc,EAAE,GAAGb,WAAW;QAClEc,KAAKR;QACLS,cAAcR;QACdS,cAAc,CAACC,OAAUhB,cAAcgB,QAAQA,OAAOV;IACxD;IAEA,MAAMG,QAAQP,uBAAuB;QACnCK;QACAG;QACAE;IACF;IAEA,qBAAO,KAACX;QAAoBQ,OAAOA;kBAAQD;;AAC7C"}
+{"version":3,"sources":["../../src/theme/LocalStorageColorSchemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\n\nimport { useStorage } from \"../storage/useStorage.js\";\nimport { isColorScheme } from \"./isColorScheme.js\";\nimport { type ColorScheme } from \"./types.js\";\nimport { ColorSchemeProvider } from \"./useColorScheme.js\";\nimport { useColorSchemeProvider } from \"./useColorSchemeProvider.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LocalStorageColorSchemeProviderProps {\n  /**\n   * Set this to `true` to prevent a `<meta name=\"color-scheme\" content=\"{COLOR_SCHEME}\">`\n   * from being added to the `document.head`.\n   *\n   * @defaultValue `false`\n   */\n  disableMetaTag?: boolean;\n\n  /**\n   * Set this to an empty string to disable the local storage behavior. Otherwise,\n   * this can be used to customize the name.\n   *\n   * @defaultValue `\"colorScheme\"`\n   */\n  localStorageKey?: string;\n\n  /**\n   * The current color scheme that is being used by your app. This should\n   * match the `$color-scheme` SCSS variable.\n   *\n   * @defaultValue `\"light\"`\n   */\n  defaultColorScheme?: ColorScheme;\n\n  children: ReactNode;\n}\n\n/**\n * An optional implementation of the {@link ColorSchemeProvider} that supports\n * storing the value in local storage if the\n * {@link LocalStorageColorSchemeProviderProps.localStorageKey} is provided.\n *\n * @example\n * ```tsx\n * import { SegmentedButton } from \"@react-md/core/segmented-button/SegmentedButton\";\n * import { SegmentedButtonContainer } from \"@react-md/core/segmented-button/SegmentedButtonContainer\";\n * import { LocalStorageColorSchemeProvider } from \"@react-md/core/theme/LocalStorageColorSchemeProvider\";\n * import { useColorScheme } from \"@react-md/core/theme/useColorScheme\";\n * import { createRoot } from \"react-dom/client\";\n *\n * function MyComponent(): ReactElement {\n *   const { currentColor, colorScheme, setColorScheme } = useColorScheme();\n *   // currentColor: \"light\" | \"dark\"\n *   // colorScheme: \"light\" | \"dark\" | \"system\"\n *\n *   return (\n *     <>\n *       The current color scheme is {currentColor}\n *       <SegmentedButtonContainer>\n *         <SegmentedButton\n *           selected={colorScheme === \"light\"}\n *           onClick={() => {\n *             setColorScheme(\"light\")\n *           }}\n *         >\n *           Light\n *         </SegmentedButton>\n *         <SegmentedButton\n *           selected={colorScheme === \"dark\"}\n *           onClick={() => {\n *             setColorScheme(\"dark\")\n *           }}\n *         >\n *           Dark\n *         </SegmentedButton>\n *         <SegmentedButton\n *           selected={colorScheme === \"system\"}\n *           onClick={() => {\n *             setColorScheme(\"system\")\n *           }}\n *         >\n *           System\n *         </SegmentedButton>\n *       </SegmentedButtonContainer>\n *     </>\n *   )l\n * }\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <LocalStorageColorSchemeProvider defaultColorScheme=\"system\">\n *     <MyComponent />\n *   </LocalStorageColorSchemeProvider>\n * );\n * ```\n *\n * @see {@link https://next.react-md.dev/components/color-scheme-provider | ColorSchemeProvider Demos}\n * @see {@link https://next.react-md.dev/customization/dark-mode|Dark Mode Setup}\n * @since 6.0.0\n */\nexport function LocalStorageColorSchemeProvider(\n  props: LocalStorageColorSchemeProviderProps\n): ReactElement {\n  const {\n    localStorageKey = \"colorScheme\",\n    defaultColorScheme = \"light\",\n    disableMetaTag,\n    children,\n  } = props;\n\n  const { value: colorScheme, setValue: setColorScheme } = useStorage({\n    key: localStorageKey,\n    defaultValue: defaultColorScheme,\n    deserializer: (item) => (isColorScheme(item) ? item : defaultColorScheme),\n  });\n\n  const value = useColorSchemeProvider({\n    disableMetaTag,\n    colorScheme,\n    setColorScheme,\n  });\n\n  return <ColorSchemeProvider value={value}>{children}</ColorSchemeProvider>;\n}\n"],"names":["useStorage","isColorScheme","ColorSchemeProvider","useColorSchemeProvider","LocalStorageColorSchemeProvider","props","localStorageKey","defaultColorScheme","disableMetaTag","children","value","colorScheme","setValue","setColorScheme","key","defaultValue","deserializer","item"],"mappings":"AAAA;;AAIA,SAASA,UAAU,QAAQ,2BAA2B;AACtD,SAASC,aAAa,QAAQ,qBAAqB;AAEnD,SAASC,mBAAmB,QAAQ,sBAAsB;AAC1D,SAASC,sBAAsB,QAAQ,8BAA8B;AAiCrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,SAASC,gCACdC,KAA2C;IAE3C,MAAM,EACJC,kBAAkB,aAAa,EAC/BC,qBAAqB,OAAO,EAC5BC,cAAc,EACdC,QAAQ,EACT,GAAGJ;IAEJ,MAAM,EAAEK,OAAOC,WAAW,EAAEC,UAAUC,cAAc,EAAE,GAAGb,WAAW;QAClEc,KAAKR;QACLS,cAAcR;QACdS,cAAc,CAACC,OAAUhB,cAAcgB,QAAQA,OAAOV;IACxD;IAEA,MAAMG,QAAQP,uBAAuB;QACnCK;QACAG;QACAE;IACF;IAEA,qBAAO,KAACX;QAAoBQ,OAAOA;kBAAQD;;AAC7C"}