@react-md/core 1.0.0-next.15 → 1.0.0-next.17

package/dist/tabs/useTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/useTabs.ts"],"sourcesContent":["\"use client\";\nimport type { Dispatch, Ref, RefObject } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { SlideDirection } from \"../transition/SlideContainer.js\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredState } from \"../useEnsuredState.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 `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   * 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\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabProps {\n  \"aria-controls\": string;\n  id: string;\n  active: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabListProps {\n  activeIndex: number;\n  setActiveIndex: Dispatch<number>;\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>(): ProvidedTabPanelsProps<E>;\n}\n\n/**\n * @example Super Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\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<number> & {\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 * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { 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 * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\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 { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\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 * import {\n *   RippleContainer,\n *   Tab,\n *   TabList,\n *   useElementInteraction,\n *   useEnsuredId,\n *   useHigherContrastChildren,\n *   useKeyboardMovementContext,\n *   useTabs,\n * } from \"@react-md/core\";\n * import type { LinkProps } from \"next/link\";\n * import Link from \"next/link\";\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import { usePathname } from \"next/navigation\";\n *\n * interface TabLinkProps extends LinkProps {\n *   active: boolean;\n * }\n *\n * function TabLink(props: LinkProps): ReactElement {\n *   const {\n *     id: propId,\n *     children: propChildren,\n *     active,\n *     className,\n *     ...remaining,\n *   } = props;\n *\n *   const id = useEnsuredId(propId, \"tab\");\n *   const { activeDescendantId } = useKeyboardMovementContext();\n *   const { handlers, ripples } = useElementInteraction(props);\n *   const children = useHigherContrastChildren(propChildren);\n *\n *   return (\n *     <Link\n *       {...props}\n *       {...handlers}\n *       id={id}\n *       aria-selected={active}\n *       role=\"tab\"\n *       tabIndex={id === activeDescendantId ? 0 : -1}\n *       className={tab({\n *         className,\n *         active,\n *         // stacked,\n *         // reversed,\n *       })}\n *     >\n *       {children}\n *       {ripples}\n *     </Link>\n *   );\n * }\n *\n * const noop = (): void => {\n *  // do nothing\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 *         <TabLink {...getTabProps(\"/\")} href=\"/\">Home</TabLink>\n *         <TabLink {...getTabProps(\"/page-1\")} href=\"/page-1\">Page 1</TabLink>\n *         <TabLink {...getTabProps(\"/page-2\")} href=\"/page-2\">Page 2</TabLink>\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    disableScrollFix,\n    tabs = EMPTY_LIST,\n    activeTab: propActiveTab,\n    setActiveTab: propSetActiveTab,\n    defaultActiveTab,\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      };\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      };\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<E>() {\n      return {\n        ref: tabPanelsRef as RefObject<E>,\n        direction,\n      };\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","useEnsuredId","useEnsuredState","EMPTY_LIST","PANEL_PREFIX","useTabs","options","baseId","propBaseId","disableScrollFix","tabs","activeTab","propActiveTab","setActiveTab","propSetActiveTab","defaultActiveTab","direction","setDirection","value","setValue","defaultValue","getTabIndex","tabValue","length","indexOf","getTabId","prefix","activeIndex","tabPanelsRef","container","current","scrollTop","getTabProps","id","active","getTabListProps","setActiveIndex","nextActiveIndex","getTabPanelProps","role","getTabPanelsProps","ref"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGpD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,eAAe,QAAQ,wBAAwB;AAExD,MAAMC,aAAa,EAAE;AACrB,MAAMC,eAAe;AA0YrB;;;;;CAKC,GACD,OAAO,SAASC,QACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,gBAAgB,EAChBC,OAAOP,UAAU,EACjBQ,WAAWC,aAAa,EACxBC,cAAcC,gBAAgB,EAC9BC,gBAAgB,EACjB,GAAGT;IAEJ,MAAMC,SAASN,aAAaO,YAAY;IACxC,MAAM,CAACQ,WAAWC,aAAa,GAAGjB,SAAyB;IAE3D,MAAM,CAACW,WAAWE,aAAa,GAAGX,gBAAgB;QAChDgB,OAAON;QACPO,UAAUL;QACVM,cAAcL,oBAAqB;IACrC;IAEA,MAAMM,cAAc,CAACC,WACnB,OAAOA,aAAa,YAAYZ,KAAKa,MAAM,GAAG,IAC1Cb,KAAKc,OAAO,CAACF,YACbA;IACN,MAAMG,WAAW,CAACH,UAAoBI,SAAS,EAAE,GAC/C,CAAC,EAAEnB,OAAO,CAAC,EAAEmB,OAAO,EAAEL,YAAYC,YAAY,EAAE,CAAC;IAEnD,MAAMK,cAAcN,YAAYV;IAChC,MAAMiB,eAAe7B,OAAoB;IACzCD,UAAU;QACR,MAAM+B,YAAYD,aAAaE,OAAO;QACtC,IAAI,CAACD,aAAapB,kBAAkB;YAClC;QACF;QAEAoB,UAAUE,SAAS,GAAG;IACxB,GAAG;QAACtB;QAAkBE;KAAU;IAEhC,OAAO;QACLA;QACAE;QACAG;QACAC;QACAe,aAAYV,QAAQ;YAClB,OAAO;gBACL,iBAAiBG,SAASH,UAAUlB;gBACpC6B,IAAIR,SAASH;gBACbY,QAAQZ,aAAaX;YACvB;QACF;QACAwB;YACE,OAAO;gBACLR;gBACAS,gBAAgB,CAACC;oBACfpB,aAAaU,cAAcU,kBAAkB,SAAS;oBACtD,IAAI,OAAO1B,cAAc,YAAYD,KAAKa,MAAM,GAAG,GAAG;wBACpDV,aAAaH,IAAI,CAAC2B,gBAAgB;oBACpC,OAAO;wBACLxB,aAAawB;oBACf;gBACF;YACF;QACF;QACAC,kBAAiBhB,QAAQ;YACvB,OAAO;gBACL,mBAAmBG,SAASH;gBAC5BW,IAAIR,SAASH,UAAUlB;gBACvBmC,MAAM;gBACNL,QAAQZ,aAAaX;YACvB;QACF;QACA6B;YACE,OAAO;gBACLC,KAAKb;gBACLZ;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/tabs/useTabs.ts"],"sourcesContent":["\"use client\";\nimport {\n  type Dispatch,\n  type Ref,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\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\";\n\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>() => ProvidedTabPanelsProps<E>;\n}\n\n/**\n * @example Super Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\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 * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { 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 * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\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 { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\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 * import {\n *   RippleContainer,\n *   Tab,\n *   TabList,\n *   useElementInteraction,\n *   useEnsuredId,\n *   useHigherContrastChildren,\n *   useKeyboardMovementContext,\n *   useTabs,\n * } from \"@react-md/core\";\n * import type { LinkProps } from \"next/link\";\n * import Link from \"next/link\";\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import { usePathname } from \"next/navigation\";\n *\n * interface TabLinkProps extends LinkProps {\n *   active: boolean;\n * }\n *\n * function TabLink(props: LinkProps): ReactElement {\n *   const {\n *     id: propId,\n *     children: propChildren,\n *     active,\n *     className,\n *     ...remaining,\n *   } = props;\n *\n *   const id = useEnsuredId(propId, \"tab\");\n *   const { activeDescendantId } = useKeyboardMovementContext();\n *   const { handlers, ripples } = useElementInteraction(props);\n *   const children = useHigherContrastChildren(propChildren);\n *\n *   return (\n *     <Link\n *       {...props}\n *       {...handlers}\n *       id={id}\n *       aria-selected={active}\n *       role=\"tab\"\n *       tabIndex={id === activeDescendantId ? 0 : -1}\n *       className={tab({\n *         className,\n *         active,\n *         // stacked,\n *         // reversed,\n *       })}\n *     >\n *       {children}\n *       {ripples}\n *     </Link>\n *   );\n * }\n *\n * const noop = (): void => {\n *  // do nothing\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 *         <TabLink {...getTabProps(\"/\")} href=\"/\">Home</TabLink>\n *         <TabLink {...getTabProps(\"/page-1\")} href=\"/page-1\">Page 1</TabLink>\n *         <TabLink {...getTabProps(\"/page-2\")} href=\"/page-2\">Page 2</TabLink>\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<E>() {\n      return {\n        ref: tabPanelsRef as RefObject<E>,\n        direction,\n      };\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","useEnsuredId","useEnsuredState","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"],"mappings":"AAAA;AACA,SAIEA,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,eAAe,QAAQ,wBAAwB;AAOxD,MAAMC,aAAa,EAAE;AACrB,MAAMC,eAAe;AAoarB;;;;;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,SAASN,aAAaO,YAAY;IACxC,MAAM,CAACY,WAAWC,aAAa,GAAGrB,SAAyB;IAE3D,MAAM,CAACa,WAAWE,aAAa,GAAGb,gBAAgB;QAChDoB,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,eAAejC,OAAoB;IACzCD,UAAU;QACR,MAAMmC,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;YACE,OAAO;gBACLC,KAAKf;gBACLZ;YACF;QACF;IACF;AACF"}

package/dist/tabs/utils.d.ts

@@ -14,22 +14,4 @@ interface ScrollOptions {
  * @internal
  */
 export declare const scrollTabIntoView: (options: ScrollOptions) => void;
-/**
- * @since 6.0.0
- */
-export interface TabListScrollToOptions {
-    isRTL: boolean;
-    animate: boolean;
-    vertical: boolean;
-    increment: boolean;
-    container: HTMLElement;
-}
-/**
- * @since 6.0.0
- */
-export type GetTabListScrollToOptions = (options: TabListScrollToOptions) => ScrollToOptions | undefined;
-/**
- * @since 6.0.0
- */
-export declare const getTabListScrollToOptions: GetTabListScrollToOptions;
 export {};

package/dist/tabs/utils.js

@@ -30,20 +30,5 @@
         container[scrollAttribute] = elementStart - firstOffset;
     }
 };
-/**
- * @since 6.0.0
- */ export const getTabListScrollToOptions = (options)=>{
-    const { isRTL, animate, vertical, increment, container } = options;
-    const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;
-    const currentScroll = vertical ? scrollTop : scrollLeft;
-    const scrollDistance = vertical ? scrollHeight : scrollWidth;
-    const amount = scrollDistance / 10 * (increment ? 1 : -1);
-    const distance = currentScroll + amount * (vertical || !isRTL ? 1 : -1);
-    return {
-        left: vertical ? undefined : distance,
-        top: vertical ? distance : undefined,
-        behavior: animate ? "smooth" : "auto"
-    };
-};
 
 //# sourceMappingURL=utils.js.map

package/dist/tabs/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/utils.ts"],"sourcesContent":["/**\n * @internal\n */\nexport const getTabRoleOnly = (container: Element): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLElement>('[role=\"tab\"]'),\n];\n\n/** @internal */\ninterface ScrollOptions {\n  container: HTMLElement | null;\n  forward: HTMLElement | null;\n  backward: HTMLElement | null;\n  vertical: boolean;\n  activeIndex: number;\n}\n\n/**\n * @internal\n */\nexport const scrollTabIntoView = (options: ScrollOptions): void => {\n  const { container, vertical, forward, backward, activeIndex } = options;\n  if (!container) {\n    return;\n  }\n\n  const activeTab = getTabRoleOnly(container)[activeIndex];\n  if (!activeTab) {\n    return;\n  }\n\n  const sizeAttribute = vertical ? \"offsetHeight\" : \"offsetWidth\";\n  const offsetAttribute = vertical ? \"offsetTop\" : \"offsetLeft\";\n  const scrollAttribute = vertical ? \"scrollTop\" : \"scrollLeft\";\n  const firstOffset = backward?.[sizeAttribute] || 0;\n  const lastOffset = forward?.[sizeAttribute] || 0;\n  const elementStart = activeTab[offsetAttribute];\n  const elementEnd = elementStart + activeTab[sizeAttribute];\n  const containerStart = container[scrollAttribute];\n  const containerEnd = containerStart + container[sizeAttribute] - lastOffset;\n  if (elementEnd > containerEnd) {\n    const containerSize = container[sizeAttribute] - lastOffset;\n    container[scrollAttribute] = elementEnd - containerSize;\n  } else if (elementStart < containerStart + firstOffset) {\n    container[scrollAttribute] = elementStart - firstOffset;\n  }\n};\n\n/**\n * @since 6.0.0\n */\nexport interface TabListScrollToOptions {\n  isRTL: boolean;\n  animate: boolean;\n  vertical: boolean;\n  increment: boolean;\n  container: HTMLElement;\n}\n\n/**\n * @since 6.0.0\n */\nexport type GetTabListScrollToOptions = (\n  options: TabListScrollToOptions\n) => ScrollToOptions | undefined;\n\n/**\n * @since 6.0.0\n */\nexport const getTabListScrollToOptions: GetTabListScrollToOptions = (\n  options\n) => {\n  const { isRTL, animate, vertical, increment, container } = options;\n  const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;\n  const currentScroll = vertical ? scrollTop : scrollLeft;\n  const scrollDistance = vertical ? scrollHeight : scrollWidth;\n  const amount = (scrollDistance / 10) * (increment ? 1 : -1);\n  const distance = currentScroll + amount * (vertical || !isRTL ? 1 : -1);\n\n  return {\n    left: vertical ? undefined : distance,\n    top: vertical ? distance : undefined,\n    behavior: animate ? \"smooth\" : \"auto\",\n  };\n};\n"],"names":["getTabRoleOnly","container","querySelectorAll","scrollTabIntoView","options","vertical","forward","backward","activeIndex","activeTab","sizeAttribute","offsetAttribute","scrollAttribute","firstOffset","lastOffset","elementStart","elementEnd","containerStart","containerEnd","containerSize","getTabListScrollToOptions","isRTL","animate","increment","scrollLeft","scrollTop","scrollWidth","scrollHeight","currentScroll","scrollDistance","amount","distance","left","undefined","top","behavior"],"mappings":"AAAA;;CAEC,GACD,OAAO,MAAMA,iBAAiB,CAACC,YAA+C;WACzEA,UAAUC,gBAAgB,CAAc;KAC5C,CAAC;AAWF;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC;IAChC,MAAM,EAAEH,SAAS,EAAEI,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGJ;IAChE,IAAI,CAACH,WAAW;QACd;IACF;IAEA,MAAMQ,YAAYT,eAAeC,UAAU,CAACO,YAAY;IACxD,IAAI,CAACC,WAAW;QACd;IACF;IAEA,MAAMC,gBAAgBL,WAAW,iBAAiB;IAClD,MAAMM,kBAAkBN,WAAW,cAAc;IACjD,MAAMO,kBAAkBP,WAAW,cAAc;IACjD,MAAMQ,cAAcN,UAAU,CAACG,cAAc,IAAI;IACjD,MAAMI,aAAaR,SAAS,CAACI,cAAc,IAAI;IAC/C,MAAMK,eAAeN,SAAS,CAACE,gBAAgB;IAC/C,MAAMK,aAAaD,eAAeN,SAAS,CAACC,cAAc;IAC1D,MAAMO,iBAAiBhB,SAAS,CAACW,gBAAgB;IACjD,MAAMM,eAAeD,iBAAiBhB,SAAS,CAACS,cAAc,GAAGI;IACjE,IAAIE,aAAaE,cAAc;QAC7B,MAAMC,gBAAgBlB,SAAS,CAACS,cAAc,GAAGI;QACjDb,SAAS,CAACW,gBAAgB,GAAGI,aAAaG;IAC5C,OAAO,IAAIJ,eAAeE,iBAAiBJ,aAAa;QACtDZ,SAAS,CAACW,gBAAgB,GAAGG,eAAeF;IAC9C;AACF,EAAE;AAoBF;;CAEC,GACD,OAAO,MAAMO,4BAAuD,CAClEhB;IAEA,MAAM,EAAEiB,KAAK,EAAEC,OAAO,EAAEjB,QAAQ,EAAEkB,SAAS,EAAEtB,SAAS,EAAE,GAAGG;IAC3D,MAAM,EAAEoB,UAAU,EAAEC,SAAS,EAAEC,WAAW,EAAEC,YAAY,EAAE,GAAG1B;IAC7D,MAAM2B,gBAAgBvB,WAAWoB,YAAYD;IAC7C,MAAMK,iBAAiBxB,WAAWsB,eAAeD;IACjD,MAAMI,SAAS,AAACD,iBAAiB,KAAON,CAAAA,YAAY,IAAI,CAAC,CAAA;IACzD,MAAMQ,WAAWH,gBAAgBE,SAAUzB,CAAAA,YAAY,CAACgB,QAAQ,IAAI,CAAC,CAAA;IAErE,OAAO;QACLW,MAAM3B,WAAW4B,YAAYF;QAC7BG,KAAK7B,WAAW0B,WAAWE;QAC3BE,UAAUb,UAAU,WAAW;IACjC;AACF,EAAE"}
+{"version":3,"sources":["../../src/tabs/utils.ts"],"sourcesContent":["/**\n * @internal\n */\nexport const getTabRoleOnly = (container: Element): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLElement>('[role=\"tab\"]'),\n];\n\n/** @internal */\ninterface ScrollOptions {\n  container: HTMLElement | null;\n  forward: HTMLElement | null;\n  backward: HTMLElement | null;\n  vertical: boolean;\n  activeIndex: number;\n}\n\n/**\n * @internal\n */\nexport const scrollTabIntoView = (options: ScrollOptions): void => {\n  const { container, vertical, forward, backward, activeIndex } = options;\n  if (!container) {\n    return;\n  }\n\n  const activeTab = getTabRoleOnly(container)[activeIndex];\n  if (!activeTab) {\n    return;\n  }\n\n  const sizeAttribute = vertical ? \"offsetHeight\" : \"offsetWidth\";\n  const offsetAttribute = vertical ? \"offsetTop\" : \"offsetLeft\";\n  const scrollAttribute = vertical ? \"scrollTop\" : \"scrollLeft\";\n  const firstOffset = backward?.[sizeAttribute] || 0;\n  const lastOffset = forward?.[sizeAttribute] || 0;\n  const elementStart = activeTab[offsetAttribute];\n  const elementEnd = elementStart + activeTab[sizeAttribute];\n  const containerStart = container[scrollAttribute];\n  const containerEnd = containerStart + container[sizeAttribute] - lastOffset;\n  if (elementEnd > containerEnd) {\n    const containerSize = container[sizeAttribute] - lastOffset;\n    container[scrollAttribute] = elementEnd - containerSize;\n  } else if (elementStart < containerStart + firstOffset) {\n    container[scrollAttribute] = elementStart - firstOffset;\n  }\n};\n"],"names":["getTabRoleOnly","container","querySelectorAll","scrollTabIntoView","options","vertical","forward","backward","activeIndex","activeTab","sizeAttribute","offsetAttribute","scrollAttribute","firstOffset","lastOffset","elementStart","elementEnd","containerStart","containerEnd","containerSize"],"mappings":"AAAA;;CAEC,GACD,OAAO,MAAMA,iBAAiB,CAACC,YAA+C;WACzEA,UAAUC,gBAAgB,CAAc;KAC5C,CAAC;AAWF;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC;IAChC,MAAM,EAAEH,SAAS,EAAEI,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGJ;IAChE,IAAI,CAACH,WAAW;QACd;IACF;IAEA,MAAMQ,YAAYT,eAAeC,UAAU,CAACO,YAAY;IACxD,IAAI,CAACC,WAAW;QACd;IACF;IAEA,MAAMC,gBAAgBL,WAAW,iBAAiB;IAClD,MAAMM,kBAAkBN,WAAW,cAAc;IACjD,MAAMO,kBAAkBP,WAAW,cAAc;IACjD,MAAMQ,cAAcN,UAAU,CAACG,cAAc,IAAI;IACjD,MAAMI,aAAaR,SAAS,CAACI,cAAc,IAAI;IAC/C,MAAMK,eAAeN,SAAS,CAACE,gBAAgB;IAC/C,MAAMK,aAAaD,eAAeN,SAAS,CAACC,cAAc;IAC1D,MAAMO,iBAAiBhB,SAAS,CAACW,gBAAgB;IACjD,MAAMM,eAAeD,iBAAiBhB,SAAS,CAACS,cAAc,GAAGI;IACjE,IAAIE,aAAaE,cAAc;QAC7B,MAAMC,gBAAgBlB,SAAS,CAACS,cAAc,GAAGI;QACjDb,SAAS,CAACW,gBAAgB,GAAGI,aAAaG;IAC5C,OAAO,IAAIJ,eAAeE,iBAAiBJ,aAAa;QACtDZ,SAAS,CAACW,gBAAgB,GAAGG,eAAeF;IAC9C;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test-utils/IntersectionObserver.ts"],"sourcesContent":["export class IntersectionObserverMock implements IntersectionObserver {\n  root: Document | Element | null;\n  rootMargin: string;\n  thresholds: readonly number[];\n\n  elements: Set<Element>;\n\n  constructor(\n    public callback: IntersectionObserverCallback,\n    options: IntersectionObserverInit = {}\n  ) {\n    this.root = options.root || null;\n    this.rootMargin = options.rootMargin || \"\";\n    this.thresholds =\n      typeof options.threshold === \"number\"\n        ? [options.threshold]\n        : options.threshold ?? [];\n\n    this.elements = new Set();\n  }\n\n  observe(target: Element): void {\n    this.elements.add(target);\n\n    this.callback(this.takeRecords(), this);\n  }\n\n  unobserve(target: Element): void {\n    this.elements.delete(target);\n  }\n\n  takeRecords(): IntersectionObserverEntry[] {\n    return [...this.elements].map<IntersectionObserverEntry>((target) => ({\n      time: Date.now(),\n      target,\n      boundingClientRect: target.getBoundingClientRect(),\n      intersectionRatio: 0,\n      intersectionRect: target.getBoundingClientRect(),\n      isIntersecting: false,\n      rootBounds:\n        this.root && \"getBoundingClientRect\" in this.root\n          ? this.root.getBoundingClientRect()\n          : null,\n    }));\n  }\n\n  disconnect(): void {\n    this.elements.clear();\n  }\n}\n"],"names":["IntersectionObserverMock","observe","target","elements","add","callback","takeRecords","unobserve","delete","map","time","Date","now","boundingClientRect","getBoundingClientRect","intersectionRatio","intersectionRect","isIntersecting","rootBounds","root","disconnect","clear","constructor","options","rootMargin","thresholds","threshold","Set"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,MAAMA;IAqBXC,QAAQC,MAAe,EAAQ;QAC7B,IAAI,CAACC,QAAQ,CAACC,GAAG,CAACF;QAElB,IAAI,CAACG,QAAQ,CAAC,IAAI,CAACC,WAAW,IAAI,IAAI;IACxC;IAEAC,UAAUL,MAAe,EAAQ;QAC/B,IAAI,CAACC,QAAQ,CAACK,MAAM,CAACN;IACvB;IAEAI,cAA2C;QACzC,OAAO;eAAI,IAAI,CAACH,QAAQ;SAAC,CAACM,GAAG,CAA4B,CAACP,SAAY,CAAA;gBACpEQ,MAAMC,KAAKC,GAAG;gBACdV;gBACAW,oBAAoBX,OAAOY,qBAAqB;gBAChDC,mBAAmB;gBACnBC,kBAAkBd,OAAOY,qBAAqB;gBAC9CG,gBAAgB;gBAChBC,YACE,IAAI,CAACC,IAAI,IAAI,2BAA2B,IAAI,CAACA,IAAI,GAC7C,IAAI,CAACA,IAAI,CAACL,qBAAqB,KAC/B;YACR,CAAA;IACF;IAEAM,aAAmB;QACjB,IAAI,CAACjB,QAAQ,CAACkB,KAAK;IACrB;IAzCAC,YACE,AAAOjB,QAAsC,EAC7CkB,UAAoC,CAAC,CAAC,CACtC;;QATFJ,uBAAAA,QAAAA,KAAAA;QACAK,uBAAAA,cAAAA,KAAAA;QACAC,uBAAAA,cAAAA,KAAAA;QAEAtB,uBAAAA,YAAAA,KAAAA;aAGSE,WAAAA;QAGP,IAAI,CAACc,IAAI,GAAGI,QAAQJ,IAAI,IAAI;QAC5B,IAAI,CAACK,UAAU,GAAGD,QAAQC,UAAU,IAAI;QACxC,IAAI,CAACC,UAAU,GACb,OAAOF,QAAQG,SAAS,KAAK,WACzB;YAACH,QAAQG,SAAS;SAAC,GACnBH,QAAQG,SAAS,IAAI,EAAE;QAE7B,IAAI,CAACvB,QAAQ,GAAG,IAAIwB;IACtB;AA8BF"}
+{"version":3,"sources":["../../src/test-utils/IntersectionObserver.ts"],"sourcesContent":["export class IntersectionObserverMock implements IntersectionObserver {\n  root: Document | Element | null;\n  rootMargin: string;\n  thresholds: readonly number[];\n\n  elements: Set<Element>;\n\n  constructor(\n    public callback: IntersectionObserverCallback,\n    options: IntersectionObserverInit = {}\n  ) {\n    this.root = options.root || null;\n    this.rootMargin = options.rootMargin || \"\";\n    this.thresholds =\n      typeof options.threshold === \"number\"\n        ? [options.threshold]\n        : (options.threshold ?? []);\n\n    this.elements = new Set();\n  }\n\n  observe(target: Element): void {\n    this.elements.add(target);\n\n    this.callback(this.takeRecords(), this);\n  }\n\n  unobserve(target: Element): void {\n    this.elements.delete(target);\n  }\n\n  takeRecords(): IntersectionObserverEntry[] {\n    return [...this.elements].map<IntersectionObserverEntry>((target) => ({\n      time: Date.now(),\n      target,\n      boundingClientRect: target.getBoundingClientRect(),\n      intersectionRatio: 0,\n      intersectionRect: target.getBoundingClientRect(),\n      isIntersecting: false,\n      rootBounds:\n        this.root && \"getBoundingClientRect\" in this.root\n          ? this.root.getBoundingClientRect()\n          : null,\n    }));\n  }\n\n  disconnect(): void {\n    this.elements.clear();\n  }\n}\n"],"names":["IntersectionObserverMock","observe","target","elements","add","callback","takeRecords","unobserve","delete","map","time","Date","now","boundingClientRect","getBoundingClientRect","intersectionRatio","intersectionRect","isIntersecting","rootBounds","root","disconnect","clear","constructor","options","rootMargin","thresholds","threshold","Set"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,MAAMA;IAqBXC,QAAQC,MAAe,EAAQ;QAC7B,IAAI,CAACC,QAAQ,CAACC,GAAG,CAACF;QAElB,IAAI,CAACG,QAAQ,CAAC,IAAI,CAACC,WAAW,IAAI,IAAI;IACxC;IAEAC,UAAUL,MAAe,EAAQ;QAC/B,IAAI,CAACC,QAAQ,CAACK,MAAM,CAACN;IACvB;IAEAI,cAA2C;QACzC,OAAO;eAAI,IAAI,CAACH,QAAQ;SAAC,CAACM,GAAG,CAA4B,CAACP,SAAY,CAAA;gBACpEQ,MAAMC,KAAKC,GAAG;gBACdV;gBACAW,oBAAoBX,OAAOY,qBAAqB;gBAChDC,mBAAmB;gBACnBC,kBAAkBd,OAAOY,qBAAqB;gBAC9CG,gBAAgB;gBAChBC,YACE,IAAI,CAACC,IAAI,IAAI,2BAA2B,IAAI,CAACA,IAAI,GAC7C,IAAI,CAACA,IAAI,CAACL,qBAAqB,KAC/B;YACR,CAAA;IACF;IAEAM,aAAmB;QACjB,IAAI,CAACjB,QAAQ,CAACkB,KAAK;IACrB;IAzCAC,YACE,AAAOjB,QAAsC,EAC7CkB,UAAoC,CAAC,CAAC,CACtC;;QATFJ,uBAAAA,QAAAA,KAAAA;QACAK,uBAAAA,cAAAA,KAAAA;QACAC,uBAAAA,cAAAA,KAAAA;QAEAtB,uBAAAA,YAAAA,KAAAA;aAGSE,WAAAA;QAGP,IAAI,CAACc,IAAI,GAAGI,QAAQJ,IAAI,IAAI;QAC5B,IAAI,CAACK,UAAU,GAAGD,QAAQC,UAAU,IAAI;QACxC,IAAI,CAACC,UAAU,GACb,OAAOF,QAAQG,SAAS,KAAK,WACzB;YAACH,QAAQG,SAAS;SAAC,GAClBH,QAAQG,SAAS,IAAI,EAAE;QAE9B,IAAI,CAACvB,QAAQ,GAAG,IAAIwB;IACtB;AA8BF"}

package/dist/test-utils/data-testid.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare module "react" {
     interface HTMLAttributes<T> extends React.AriaAttributes, React.DOMAttributes<T> {
         "data-testid"?: string | number;

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

@@ -66,7 +66,7 @@ export type MatchMediaSpiedFunction = jest.SpiedFunction<typeof window.matchMedi
      * // expect phone results
      * ```
      */
-    changeViewport(matcher: MatchMediaMatcher, disableAct?: boolean): void;
+    changeViewport: (matcher: MatchMediaMatcher, disableAct?: boolean) => void;
 };
 /**
  * @example Default Behavior

package/dist/test-utils/matchMedia.js

@@ -22,22 +22,22 @@ const noop = ()=>{
  * @see {@link spyOnMatchMedia} for usage
  * @since 6.0.0
  * @returns `true` for phone media queries
- */ export const matchPhone = (query)=>query.includes(`${DEFAULT_PHONE_MAX_WIDTH}`);
+ */ export const matchPhone = (query)=>query.includes(DEFAULT_PHONE_MAX_WIDTH);
 /**
  * @see {@link spyOnMatchMedia} for usage
  * @since 6.0.0
  * @returns `true` for tablet media queries
- */ export const matchTablet = (query)=>query.includes(`${DEFAULT_TABLET_MIN_WIDTH}`);
+ */ export const matchTablet = (query)=>query.includes(DEFAULT_TABLET_MIN_WIDTH);
 /**
  * @see {@link spyOnMatchMedia} for usage
  * @since 6.0.0
  * @returns `true` for desktop media queries
- */ export const matchDesktop = (query)=>query.includes(`${DEFAULT_DESKTOP_MIN_WIDTH}`);
+ */ export const matchDesktop = (query)=>query.includes(DEFAULT_DESKTOP_MIN_WIDTH);
 /**
  * @see {@link spyOnMatchMedia} for usage
  * @since 6.0.0
  * @returns `true` for large desktop media queries
- */ export const matchLargeDesktop = (query)=>query.includes(`${DEFAULT_DESKTOP_LARGE_MIN_WIDTH}`);
+ */ export const matchLargeDesktop = (query)=>query.includes(DEFAULT_DESKTOP_LARGE_MIN_WIDTH);
 /**
  * @see {@link spyOnMatchMedia} for usage
  * @since 6.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test-utils/matchMedia.ts"],"sourcesContent":["import { jest } from \"@jest/globals\";\nimport { act } from \"@testing-library/react\";\nimport {\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 * @see {@link spyOnMatchMedia} instead\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 * @see {@link spyOnMatchMedia} for usage\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 * @see {@link spyOnMatchMedia} for usage\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 * @see {@link spyOnMatchMedia} for usage\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 * @see {@link spyOnMatchMedia} for usage\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 * @see {@link spyOnMatchMedia} for usage\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\n/**\n * @since 6.0.0\n */\nexport type MatchMediaSpiedFunction = jest.SpiedFunction<\n  typeof window.matchMedia\n> & {\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\n/**\n * @example Default Behavior\n * ```tsx\n * import { matchPhone, render, spyOnMatchMedia } from \"@react-md/test-utils\";\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, spyOnMatchMedia } from \"@react-md/test-utils\";\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): MatchMediaSpiedFunction {\n  type Listener = (event: MediaQueryListEvent) => void;\n\n  const listeners = new Map<string, Listener>();\n  const matchMedia = jest\n    .spyOn(window, \"matchMedia\")\n    .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 MatchMediaSpiedFunction;\n  mock.changeViewport = changeViewport;\n\n  return mock;\n}\n"],"names":["jest","act","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","spyOnMatchMedia","defaultMatch","listeners","Map","matchMedia","spyOn","window","mockImplementation","type","listener","set","delete","changeViewport","matcher","disableAct","update","Event","event","forEach","mock"],"mappings":"AAAA,SAASA,IAAI,QAAQ,gBAAgB;AACrC,SAASC,GAAG,QAAQ,yBAAyB;AAC7C,SACEC,+BAA+B,EAC/BC,yBAAyB,EACzBC,uBAAuB,EACvBC,wBAAwB,QACnB,8BAA8B;AAErC,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;CAIC,GACD,OAAO,MAAMC,wBAAwC;IACnDC,OAAO;IACPC,SAAS;IACTC,UAAUJ;IACVK,aAAaL;IACbM,kBAAkBN;IAClBO,qBAAqBP;IACrBQ,gBAAgBR;IAChBS,eAAe,IAAM;AACvB,EAAE;AAKF;;;;CAIC,GACD,OAAO,MAAMC,aAAgC,CAACC,QAC5CA,MAAMC,QAAQ,CAAC,CAAC,EAAEd,wBAAwB,CAAC,EAAE;AAE/C;;;;CAIC,GACD,OAAO,MAAMe,cAAiC,CAACF,QAC7CA,MAAMC,QAAQ,CAAC,CAAC,EAAEb,yBAAyB,CAAC,EAAE;AAEhD;;;;CAIC,GACD,OAAO,MAAMe,eAAkC,CAACH,QAC9CA,MAAMC,QAAQ,CAAC,CAAC,EAAEf,0BAA0B,CAAC,EAAE;AAEjD;;;;CAIC,GACD,OAAO,MAAMkB,oBAAuC,CAACJ,QACnDA,MAAMC,QAAQ,CAAC,CAAC,EAAEhB,gCAAgC,CAAC,EAAE;AAEvD;;;;CAIC,GACD,OAAO,MAAMoB,kBAAqC,CAACL,QACjDG,aAAaH,UAAUI,kBAAkBJ,OAAO;AAoClD;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,SAASM,gBACdC,eAAkCJ,YAAY;IAI9C,MAAMK,YAAY,IAAIC;IACtB,MAAMC,aAAa3B,KAChB4B,KAAK,CAACC,QAAQ,cACdC,kBAAkB,CAAC,CAACb,QAAW,CAAA;YAC9B,GAAGV,qBAAqB;YACxBK,kBAAiBmB,IAAY,EAAEC,QAAwC;gBACrE,mBAAmB,GACnB,IAAI,OAAOA,aAAa,cAAcD,SAAS,UAAU;oBACvD;gBACF;gBACA,kBAAkB,GAElBN,UAAUQ,GAAG,CAAChB,OAAOe;YACvB;YACAnB,qBACEkB,IAAY,EACZC,QAAwC;gBAExC,mBAAmB,GACnB,IAAI,OAAOA,aAAa,cAAcD,SAAS,UAAU;oBACvD;gBACF;gBACA,kBAAkB,GAElBN,UAAUS,MAAM,CAACjB;YACnB;YACAR,SAASe,aAAaP;QACxB,CAAA;IAEF,MAAMkB,iBAAiB,CACrBC,SACAC,aAAa,KAAK;QAElB,MAAMC,SAAS;YACbT,OAAOd,aAAa,CAAC,IAAIwB,MAAM;YAE/B,MAAMC,QAAQ,IAAID,MAAM;YACxBd,UAAUgB,OAAO,CAAC,CAACT,UAAUf;gBAC3Be,SAAS;oBACP,GAAGQ,KAAK;oBACRhC,OAAO;oBACPC,SAAS2B,QAAQnB;gBACnB;YACF;QACF;QACA,IAAIoB,YAAY;YACdC;QACF,OAAO;YACLrC,IAAIqC;QACN;IACF;IAEA,MAAMI,OAAOf;IACbe,KAAKP,cAAc,GAAGA;IAEtB,OAAOO;AACT"}
+{"version":3,"sources":["../../src/test-utils/matchMedia.ts"],"sourcesContent":["import { jest } from \"@jest/globals\";\nimport { act } from \"@testing-library/react\";\nimport {\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 * @see {@link spyOnMatchMedia} instead\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 * @see {@link spyOnMatchMedia} for usage\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 * @see {@link spyOnMatchMedia} for usage\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 * @see {@link spyOnMatchMedia} for usage\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 * @see {@link spyOnMatchMedia} for usage\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 * @see {@link spyOnMatchMedia} for usage\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\n/**\n * @since 6.0.0\n */\nexport type MatchMediaSpiedFunction = jest.SpiedFunction<\n  typeof window.matchMedia\n> & {\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\n/**\n * @example Default Behavior\n * ```tsx\n * import { matchPhone, render, spyOnMatchMedia } from \"@react-md/test-utils\";\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, spyOnMatchMedia } from \"@react-md/test-utils\";\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): MatchMediaSpiedFunction {\n  type Listener = (event: MediaQueryListEvent) => void;\n\n  const listeners = new Map<string, Listener>();\n  const matchMedia = jest\n    .spyOn(window, \"matchMedia\")\n    .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 MatchMediaSpiedFunction;\n  mock.changeViewport = changeViewport;\n\n  return mock;\n}\n"],"names":["jest","act","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","spyOnMatchMedia","defaultMatch","listeners","Map","matchMedia","spyOn","window","mockImplementation","type","listener","set","delete","changeViewport","matcher","disableAct","update","Event","event","forEach","mock"],"mappings":"AAAA,SAASA,IAAI,QAAQ,gBAAgB;AACrC,SAASC,GAAG,QAAQ,yBAAyB;AAC7C,SACEC,+BAA+B,EAC/BC,yBAAyB,EACzBC,uBAAuB,EACvBC,wBAAwB,QACnB,8BAA8B;AAErC,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;CAIC,GACD,OAAO,MAAMC,wBAAwC;IACnDC,OAAO;IACPC,SAAS;IACTC,UAAUJ;IACVK,aAAaL;IACbM,kBAAkBN;IAClBO,qBAAqBP;IACrBQ,gBAAgBR;IAChBS,eAAe,IAAM;AACvB,EAAE;AAKF;;;;CAIC,GACD,OAAO,MAAMC,aAAgC,CAACC,QAC5CA,MAAMC,QAAQ,CAACd,yBAAyB;AAE1C;;;;CAIC,GACD,OAAO,MAAMe,cAAiC,CAACF,QAC7CA,MAAMC,QAAQ,CAACb,0BAA0B;AAE3C;;;;CAIC,GACD,OAAO,MAAMe,eAAkC,CAACH,QAC9CA,MAAMC,QAAQ,CAACf,2BAA2B;AAE5C;;;;CAIC,GACD,OAAO,MAAMkB,oBAAuC,CAACJ,QACnDA,MAAMC,QAAQ,CAAChB,iCAAiC;AAElD;;;;CAIC,GACD,OAAO,MAAMoB,kBAAqC,CAACL,QACjDG,aAAaH,UAAUI,kBAAkBJ,OAAO;AAoClD;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,SAASM,gBACdC,eAAkCJ,YAAY;IAI9C,MAAMK,YAAY,IAAIC;IACtB,MAAMC,aAAa3B,KAChB4B,KAAK,CAACC,QAAQ,cACdC,kBAAkB,CAAC,CAACb,QAAW,CAAA;YAC9B,GAAGV,qBAAqB;YACxBK,kBAAiBmB,IAAY,EAAEC,QAAwC;gBACrE,mBAAmB,GACnB,IAAI,OAAOA,aAAa,cAAcD,SAAS,UAAU;oBACvD;gBACF;gBACA,kBAAkB,GAElBN,UAAUQ,GAAG,CAAChB,OAAOe;YACvB;YACAnB,qBACEkB,IAAY,EACZC,QAAwC;gBAExC,mBAAmB,GACnB,IAAI,OAAOA,aAAa,cAAcD,SAAS,UAAU;oBACvD;gBACF;gBACA,kBAAkB,GAElBN,UAAUS,MAAM,CAACjB;YACnB;YACAR,SAASe,aAAaP;QACxB,CAAA;IAEF,MAAMkB,iBAAiB,CACrBC,SACAC,aAAa,KAAK;QAElB,MAAMC,SAAS;YACbT,OAAOd,aAAa,CAAC,IAAIwB,MAAM;YAE/B,MAAMC,QAAQ,IAAID,MAAM;YACxBd,UAAUgB,OAAO,CAAC,CAACT,UAAUf;gBAC3Be,SAAS;oBACP,GAAGQ,KAAK;oBACRhC,OAAO;oBACPC,SAAS2B,QAAQnB;gBACnB;YACF;QACF;QACA,IAAIoB,YAAY;YACdC;QACF,OAAO;YACLrC,IAAIqC;QACN;IACF;IAEA,MAAMI,OAAOf;IACbe,KAAKP,cAAc,GAAGA;IAEtB,OAAOO;AACT"}

package/dist/test-utils/polyfills/TextDecoder.js

@@ -1,6 +1,5 @@
 import { TextDecoder } from "node:util";
 if (typeof global.TextDecoder === "undefined") {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error browser TextDecoder does not support `null` while `node:util` does
     global.TextDecoder = TextDecoder;
 }

package/dist/test-utils/polyfills/TextDecoder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/polyfills/TextDecoder.ts"],"sourcesContent":["import { TextDecoder } from \"node:util\";\n\nif (typeof global.TextDecoder === \"undefined\") {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error browser TextDecoder does not support `null` while `node:util` does\n  global.TextDecoder = TextDecoder;\n}\n"],"names":["TextDecoder","global"],"mappings":"AAAA,SAASA,WAAW,QAAQ,YAAY;AAExC,IAAI,OAAOC,OAAOD,WAAW,KAAK,aAAa;IAC7C,6DAA6D;IAC7D,sFAAsF;IACtFC,OAAOD,WAAW,GAAGA;AACvB"}
+{"version":3,"sources":["../../../src/test-utils/polyfills/TextDecoder.ts"],"sourcesContent":["import { TextDecoder } from \"node:util\";\n\nif (typeof global.TextDecoder === \"undefined\") {\n  // @ts-expect-error browser TextDecoder does not support `null` while `node:util` does\n  global.TextDecoder = TextDecoder;\n}\n"],"names":["TextDecoder","global"],"mappings":"AAAA,SAASA,WAAW,QAAQ,YAAY;AAExC,IAAI,OAAOC,OAAOD,WAAW,KAAK,aAAa;IAC7C,sFAAsF;IACtFC,OAAOD,WAAW,GAAGA;AACvB"}

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

@@ -1,12 +1,16 @@
 import { jest } from "@jest/globals";
+/**
+ * @since 6.0.0
+ */
+export type RafSpy = jest.SpiedFunction<typeof requestAnimationFrame>;
 /**
  * @example
  * ```ts
- * import { useImmediateRaf } from "@react-md/core/test-utils";
+ * import { testImmediateRaf } from "@react-md/core/test-utils";
  *
  * describe("some test suite", () => {
  *   it("should test something with requestAnimationFrame", () => {
- *     const raf = useImmediateRaf();
+ *     const raf = testImmediateRaf();
  *
  *     // do some testing with requestAnimationFrame
  *
@@ -18,7 +22,7 @@ import { jest } from "@jest/globals";
  *
  * @example Automatic Cleanup
  * ```ts
- * import { useImmediateRaf } from "@react-md/core/test-utils";
+ * import { testImmediateRaf } from "@react-md/core/test-utils";
  *
  * afterEach(() => {
  *   jest.restoreAllMocks();
@@ -26,7 +30,7 @@ import { jest } from "@jest/globals";
  *
  * describe("some test suite", () => {
  *   it("should test something with requestAnimationFrame", () => {
- *     const raf = useImmediateRaf();
+ *     const raf = testImmediateRaf();
  *
  *     // do some testing with requestAnimationFrame
  *   });
@@ -35,4 +39,4 @@ import { jest } from "@jest/globals";
  *
  * @since 6.0.0
  */
-export declare const useImmediateRaf: () => jest.SpiedFunction<typeof requestAnimationFrame>;
+export declare const testImmediateRaf: () => RafSpy;

package/dist/test-utils/timers.js

@@ -2,11 +2,11 @@ import { jest } from "@jest/globals";
 /**
  * @example
  * ```ts
- * import { useImmediateRaf } from "@react-md/core/test-utils";
+ * import { testImmediateRaf } from "@react-md/core/test-utils";
  *
  * describe("some test suite", () => {
  *   it("should test something with requestAnimationFrame", () => {
- *     const raf = useImmediateRaf();
+ *     const raf = testImmediateRaf();
  *
  *     // do some testing with requestAnimationFrame
  *
@@ -18,7 +18,7 @@ import { jest } from "@jest/globals";
  *
  * @example Automatic Cleanup
  * ```ts
- * import { useImmediateRaf } from "@react-md/core/test-utils";
+ * import { testImmediateRaf } from "@react-md/core/test-utils";
  *
  * afterEach(() => {
  *   jest.restoreAllMocks();
@@ -26,7 +26,7 @@ import { jest } from "@jest/globals";
  *
  * describe("some test suite", () => {
  *   it("should test something with requestAnimationFrame", () => {
- *     const raf = useImmediateRaf();
+ *     const raf = testImmediateRaf();
  *
  *     // do some testing with requestAnimationFrame
  *   });
@@ -34,7 +34,7 @@ import { jest } from "@jest/globals";
  * ```
  *
  * @since 6.0.0
- */ export const useImmediateRaf = ()=>jest.spyOn(window, "requestAnimationFrame").mockImplementation((cb)=>{
+ */ export const testImmediateRaf = ()=>jest.spyOn(window, "requestAnimationFrame").mockImplementation((cb)=>{
         cb(0);
         return 0;
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test-utils/timers.ts"],"sourcesContent":["import { jest } from \"@jest/globals\";\n\n/**\n * @example\n * ```ts\n * import { useImmediateRaf } from \"@react-md/core/test-utils\";\n *\n * describe(\"some test suite\", () => {\n *   it(\"should test something with requestAnimationFrame\", () => {\n *     const raf = useImmediateRaf();\n *\n *     // do some testing with requestAnimationFrame\n *\n *     // reset to original at the end of the test\n *     raf.mockRestore()\n *   });\n * });\n * ```\n *\n * @example Automatic Cleanup\n * ```ts\n * import { useImmediateRaf } from \"@react-md/core/test-utils\";\n *\n * afterEach(() => {\n *   jest.restoreAllMocks();\n * });\n *\n * describe(\"some test suite\", () => {\n *   it(\"should test something with requestAnimationFrame\", () => {\n *     const raf = useImmediateRaf();\n *\n *     // do some testing with requestAnimationFrame\n *   });\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport const useImmediateRaf = (): jest.SpiedFunction<\n  typeof requestAnimationFrame\n> =>\n  jest.spyOn(window, \"requestAnimationFrame\").mockImplementation((cb) => {\n    cb(0);\n    return 0;\n  });\n"],"names":["jest","useImmediateRaf","spyOn","window","mockImplementation","cb"],"mappings":"AAAA,SAASA,IAAI,QAAQ,gBAAgB;AAErC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,MAAMC,kBAAkB,IAG7BD,KAAKE,KAAK,CAACC,QAAQ,yBAAyBC,kBAAkB,CAAC,CAACC;QAC9DA,GAAG;QACH,OAAO;IACT,GAAG"}
+{"version":3,"sources":["../../src/test-utils/timers.ts"],"sourcesContent":["import { jest } from \"@jest/globals\";\n\n/**\n * @since 6.0.0\n */\nexport type RafSpy = jest.SpiedFunction<typeof requestAnimationFrame>;\n\n/**\n * @example\n * ```ts\n * import { testImmediateRaf } from \"@react-md/core/test-utils\";\n *\n * describe(\"some test suite\", () => {\n *   it(\"should test something with requestAnimationFrame\", () => {\n *     const raf = testImmediateRaf();\n *\n *     // do some testing with requestAnimationFrame\n *\n *     // reset to original at the end of the test\n *     raf.mockRestore()\n *   });\n * });\n * ```\n *\n * @example Automatic Cleanup\n * ```ts\n * import { testImmediateRaf } from \"@react-md/core/test-utils\";\n *\n * afterEach(() => {\n *   jest.restoreAllMocks();\n * });\n *\n * describe(\"some test suite\", () => {\n *   it(\"should test something with requestAnimationFrame\", () => {\n *     const raf = testImmediateRaf();\n *\n *     // do some testing with requestAnimationFrame\n *   });\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport const testImmediateRaf = (): RafSpy =>\n  jest.spyOn(window, \"requestAnimationFrame\").mockImplementation((cb) => {\n    cb(0);\n    return 0;\n  });\n"],"names":["jest","testImmediateRaf","spyOn","window","mockImplementation","cb"],"mappings":"AAAA,SAASA,IAAI,QAAQ,gBAAgB;AAOrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,MAAMC,mBAAmB,IAC9BD,KAAKE,KAAK,CAACC,QAAQ,yBAAyBC,kBAAkB,CAAC,CAACC;QAC9DA,GAAG;QACH,OAAO;IACT,GAAG"}

package/dist/theme/LocalStorageColorSchemeProvider.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement, type ReactNode } from "react";
-import { type ColorSchemeMode } from "./useColorScheme.js";
+import { type ColorSchemeMode } from "./types.js";
 /**
  * @since 6.0.0
  */

package/dist/theme/LocalStorageColorSchemeProvider.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useLocalStorage } from "../useLocalStorage.js";
 import { ColorSchemeProvider } from "./useColorScheme.js";
 import { useColorSchemeProvider } from "./useColorSchemeProvider.js";
+import { isColorSchemeMode } from "./isColorScheme.js";
 /**
  * An optional implementation of the {@link ColorSchemeProvider} that supports
  * storing the value in local storage if the
@@ -72,7 +73,7 @@ import { useColorSchemeProvider } from "./useColorSchemeProvider.js";
     const { value: colorSchemeMode, setValue: setColorSchemeMode } = useLocalStorage({
         key: localStorageKey,
         defaultValue: defaultColorSchemeMode,
-        deserializer: (item)=>item === "light" || item === "dark" || item === "system" ? item : defaultColorSchemeMode
+        deserializer: (item)=>isColorSchemeMode(item) ? item : defaultColorSchemeMode
     });
     const value = useColorSchemeProvider({
         disableMetaTag,

package/dist/theme/LocalStorageColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/LocalStorageColorSchemeProvider.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { useLocalStorage } from \"../useLocalStorage.js\";\nimport { ColorSchemeProvider, type ColorSchemeMode } 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 a string like `\"colorScheme\"` if you want to store the user's\n   * color scheme preference in local storage.\n   *\n   * @defaultValue `\"\"`\n   */\n  localStorageKey?: string;\n\n  /**\n   * The current color scheme mode that is being used by your app. This should\n   * match the `$color-scheme` SCSS variable.\n   *\n   * @defaultValue `\"light\"`\n   */\n  defaultColorSchemeMode?: ColorSchemeMode;\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 { colorScheme, colorSchemeMode, setColorSchemeMode } = useColorScheme();\n *   // colorScheme: \"light\" | \"dark\"\n *   // colorSchemeMode: \"light\" | \"dark\" | \"system\"\n *\n *   return (\n *     <>\n *       The current color scheme is {colorScheme}\n *       <SegmentedButtonContainer>\n *         <SegmentedButton\n *           selected={colorSchemeMode === \"light\"}\n *           onClick={() => {\n *             setColorSchemeMode(\"light\")\n *           }}\n *         >\n *           Light\n *         </SegmentedButton>\n *         <SegmentedButton\n *           selected={colorSchemeMode === \"dark\"}\n *           onClick={() => {\n *             setColorSchemeMode(\"dark\")\n *           }}\n *         >\n *           Dark\n *         </SegmentedButton>\n *         <SegmentedButton\n *           selected={colorSchemeMode === \"system\"}\n *           onClick={() => {\n *             setColorSchemeMode(\"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 defaultColorSchemeMode=\"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 = \"\",\n    defaultColorSchemeMode = \"light\",\n    disableMetaTag,\n    children,\n  } = props;\n\n  const { value: colorSchemeMode, setValue: setColorSchemeMode } =\n    useLocalStorage({\n      key: localStorageKey,\n      defaultValue: defaultColorSchemeMode,\n      deserializer: (item) =>\n        item === \"light\" || item === \"dark\" || item === \"system\"\n          ? item\n          : defaultColorSchemeMode,\n    });\n\n  const value = useColorSchemeProvider({\n    disableMetaTag,\n    colorSchemeMode,\n    setColorSchemeMode,\n  });\n\n  return <ColorSchemeProvider value={value}>{children}</ColorSchemeProvider>;\n}\n"],"names":["useLocalStorage","ColorSchemeProvider","useColorSchemeProvider","LocalStorageColorSchemeProvider","props","localStorageKey","defaultColorSchemeMode","disableMetaTag","children","value","colorSchemeMode","setValue","setColorSchemeMode","key","defaultValue","deserializer","item"],"mappings":"AAAA;;AAEA,SAASA,eAAe,QAAQ,wBAAwB;AACxD,SAASC,mBAAmB,QAA8B,sBAAsB;AAChF,SAASC,sBAAsB,QAAQ,8BAA8B;AAiCrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,SAASC,gCACdC,KAA2C;IAE3C,MAAM,EACJC,kBAAkB,EAAE,EACpBC,yBAAyB,OAAO,EAChCC,cAAc,EACdC,QAAQ,EACT,GAAGJ;IAEJ,MAAM,EAAEK,OAAOC,eAAe,EAAEC,UAAUC,kBAAkB,EAAE,GAC5DZ,gBAAgB;QACda,KAAKR;QACLS,cAAcR;QACdS,cAAc,CAACC,OACbA,SAAS,WAAWA,SAAS,UAAUA,SAAS,WAC5CA,OACAV;IACR;IAEF,MAAMG,QAAQP,uBAAuB;QACnCK;QACAG;QACAE;IACF;IAEA,qBAAO,KAACX;QAAoBQ,OAAOA;kBAAQD;;AAC7C"}
+{"version":3,"sources":["../../src/theme/LocalStorageColorSchemeProvider.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { useLocalStorage } from \"../useLocalStorage.js\";\nimport { type ColorSchemeMode } from \"./types.js\";\nimport { ColorSchemeProvider } from \"./useColorScheme.js\";\nimport { useColorSchemeProvider } from \"./useColorSchemeProvider.js\";\nimport { isColorSchemeMode } from \"./isColorScheme.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 a string like `\"colorScheme\"` if you want to store the user's\n   * color scheme preference in local storage.\n   *\n   * @defaultValue `\"\"`\n   */\n  localStorageKey?: string;\n\n  /**\n   * The current color scheme mode that is being used by your app. This should\n   * match the `$color-scheme` SCSS variable.\n   *\n   * @defaultValue `\"light\"`\n   */\n  defaultColorSchemeMode?: ColorSchemeMode;\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 { colorScheme, colorSchemeMode, setColorSchemeMode } = useColorScheme();\n *   // colorScheme: \"light\" | \"dark\"\n *   // colorSchemeMode: \"light\" | \"dark\" | \"system\"\n *\n *   return (\n *     <>\n *       The current color scheme is {colorScheme}\n *       <SegmentedButtonContainer>\n *         <SegmentedButton\n *           selected={colorSchemeMode === \"light\"}\n *           onClick={() => {\n *             setColorSchemeMode(\"light\")\n *           }}\n *         >\n *           Light\n *         </SegmentedButton>\n *         <SegmentedButton\n *           selected={colorSchemeMode === \"dark\"}\n *           onClick={() => {\n *             setColorSchemeMode(\"dark\")\n *           }}\n *         >\n *           Dark\n *         </SegmentedButton>\n *         <SegmentedButton\n *           selected={colorSchemeMode === \"system\"}\n *           onClick={() => {\n *             setColorSchemeMode(\"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 defaultColorSchemeMode=\"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 = \"\",\n    defaultColorSchemeMode = \"light\",\n    disableMetaTag,\n    children,\n  } = props;\n\n  const { value: colorSchemeMode, setValue: setColorSchemeMode } =\n    useLocalStorage({\n      key: localStorageKey,\n      defaultValue: defaultColorSchemeMode,\n      deserializer: (item) =>\n        isColorSchemeMode(item) ? item : defaultColorSchemeMode,\n    });\n\n  const value = useColorSchemeProvider({\n    disableMetaTag,\n    colorSchemeMode,\n    setColorSchemeMode,\n  });\n\n  return <ColorSchemeProvider value={value}>{children}</ColorSchemeProvider>;\n}\n"],"names":["useLocalStorage","ColorSchemeProvider","useColorSchemeProvider","isColorSchemeMode","LocalStorageColorSchemeProvider","props","localStorageKey","defaultColorSchemeMode","disableMetaTag","children","value","colorSchemeMode","setValue","setColorSchemeMode","key","defaultValue","deserializer","item"],"mappings":"AAAA;;AAEA,SAASA,eAAe,QAAQ,wBAAwB;AAExD,SAASC,mBAAmB,QAAQ,sBAAsB;AAC1D,SAASC,sBAAsB,QAAQ,8BAA8B;AACrE,SAASC,iBAAiB,QAAQ,qBAAqB;AAiCvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,SAASC,gCACdC,KAA2C;IAE3C,MAAM,EACJC,kBAAkB,EAAE,EACpBC,yBAAyB,OAAO,EAChCC,cAAc,EACdC,QAAQ,EACT,GAAGJ;IAEJ,MAAM,EAAEK,OAAOC,eAAe,EAAEC,UAAUC,kBAAkB,EAAE,GAC5Db,gBAAgB;QACdc,KAAKR;QACLS,cAAcR;QACdS,cAAc,CAACC,OACbd,kBAAkBc,QAAQA,OAAOV;IACrC;IAEF,MAAMG,QAAQR,uBAAuB;QACnCM;QACAG;QACAE;IACF;IAEA,qBAAO,KAACZ;QAAoBS,OAAOA;kBAAQD;;AAC7C"}

package/dist/theme/ThemeProvider.js

@@ -186,7 +186,9 @@ const { Provider } = context;
         // NOTE: This will not be correct the first time a new theme is lazy-loaded
         // and applied. It might be good to have a way to manually force this flow
         // again?
-        const frame = window.requestAnimationFrame(()=>setDerivedTheme(getDerivedTheme(document.documentElement)));
+        const frame = window.requestAnimationFrame(()=>{
+            setDerivedTheme(getDerivedTheme(document.documentElement));
+        });
         return ()=>{
             window.cancelAnimationFrame(frame);
         };

package/dist/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport { type UseStateSetter } from \"../types.js\";\nimport {\n  black,\n  blue500,\n  greenAccent700,\n  orangeAccent200,\n  orangeAccent400,\n  red500,\n} from \"./colors.js\";\nimport {\n  backgroundColorVar,\n  errorColorVar,\n  onErrorColorVar,\n  onPrimaryColorVar,\n  onSecondaryColorVar,\n  onSuccessColorVar,\n  onWarningColorVar,\n  primaryColorVar,\n  secondaryColorVar,\n  successColorVar,\n  textDisabledColorVar,\n  textHintColorVar,\n  textPrimaryColorVar,\n  textSecondaryColorVar,\n  warningColorVar,\n} from \"./cssVars.js\";\nimport { useColorScheme } from \"./useColorScheme.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-background-color\"?: string;\n    \"--rmd-on-background-color\"?: string;\n    \"--rmd-surface-color\"?: string;\n    \"--rmd-primary-color\"?: string;\n    \"--rmd-on-primary-color\"?: string;\n    \"--rmd-secondary-color\"?: string;\n    \"--rmd-on-secondary-color\"?: string;\n    \"--rmd-warning-color\"?: string;\n    \"--rmd-on-warning-color\"?: string;\n    \"--rmd-error-color\"?: string;\n    \"--rmd-on-error-color\"?: string;\n    \"--rmd-success-color\"?: string;\n    \"--rmd-on-success-color\"?: string;\n    \"--rmd-text-primary-color\"?: string;\n    \"--rmd-text-secondary-color\"?: string;\n    \"--rmd-text-hint-color\"?: string;\n    \"--rmd-text-disabled-color\"?: string;\n\n    \"--rmd-outline-width\"?: string | number;\n    \"--rmd-outline-color\"?: string;\n    \"--rmd-outline-grey-color\"?: string;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface ThemeColors {\n  primaryColor: string;\n  onPrimaryColor: string;\n  secondaryColor: string;\n  onSecondaryColor: string;\n  warningColor: string;\n  onWarningColor: string;\n  errorColor: string;\n  onErrorColor: string;\n  successColor: string;\n  onSuccessColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeTextColors {\n  textPrimaryColor: string;\n  textSecondaryColor: string;\n  textHintColor: string;\n  textDisabledColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ConfigurableThemeColors extends ThemeColors, ThemeTextColors {\n  backgroundColor: string;\n}\n\n/** @since 6.0.0 */\nexport type ConfigurableThemeColorsName = keyof ConfigurableThemeColors;\n\n/** @since 6.0.0 */\nexport interface ThemeContext extends ConfigurableThemeColors {\n  /**\n   * This will be `true` if a `theme` was not provided to the {@link ThemeProvider}\n   */\n  derived: boolean;\n\n  /**\n   * @example Simple Example\n   * ```tsx\n   * import { getDerivedTheme, useHtmlClassName, useTheme } from \"@react-md/core\";\n   * import { useEffect } from \"react\";\n   *\n   * import styles from \"./LightTheme.module.scss\";\n   *\n   * let loadedOnce = false;\n   *\n   * export default function LightTheme(): null {\n   *   useHtmlClassName(styles.container);\n   *   const { setDerivedTheme } = useTheme();\n   *   useEffect(() => {\n   *     if (loadedOnce) {\n   *       return;\n   *     }\n   *\n   *     loadedOnce = true;\n   *     setDerivedTheme(getDerivedTheme());\n   *   }, [setDerivedTheme]);\n   *   return null;\n   * }\n   * ```\n   */\n  setDerivedTheme: UseStateSetter<Readonly<ConfigurableThemeColors>>;\n}\n\n/** @since 6.0.0 */\nexport const DEFAULT_THEME_COLORS: Readonly<ThemeColors> = {\n  primaryColor: blue500,\n  onPrimaryColor: black,\n  secondaryColor: orangeAccent400,\n  onSecondaryColor: black,\n  warningColor: orangeAccent200,\n  onWarningColor: black,\n  errorColor: red500,\n  onErrorColor: black,\n  successColor: greenAccent700,\n  onSuccessColor: black,\n};\n\n/** @since 6.0.0 */\nexport const DEFAULT_LIGHT_THEME: Readonly<ConfigurableThemeColors> = {\n  ...DEFAULT_THEME_COLORS,\n  backgroundColor: \"#fafafa\",\n  textPrimaryColor: \"#212121\",\n  textSecondaryColor: \"#757575\",\n  textHintColor: \"#a8a8a8\",\n  textDisabledColor: \"#9e9e9e\",\n};\n\n/** @since 6.0.0 */\nexport const DEFAULT_DARK_THEME: Readonly<ConfigurableThemeColors> = {\n  ...DEFAULT_THEME_COLORS,\n  backgroundColor: \"#121212\",\n  textPrimaryColor: \"#d9d9d9\",\n  textSecondaryColor: \"#b3b3b3\",\n  textHintColor: \"gray\", // #808080\n  textDisabledColor: \"gray\", // #808080\n};\n\nconst context = createContext<Readonly<ThemeContext> | undefined>(undefined);\ncontext.displayName = \"Theme\";\nconst { Provider } = context;\n\n/** @since 6.0.0 */\nexport const getDerivedTheme = (\n  container: Element = document.documentElement\n): Readonly<ConfigurableThemeColors> => {\n  const rootStyles = window.getComputedStyle(container);\n  const backgroundColor = rootStyles.getPropertyValue(backgroundColorVar);\n  const primaryColor = rootStyles.getPropertyValue(primaryColorVar);\n  const onPrimaryColor = rootStyles.getPropertyValue(onPrimaryColorVar);\n  const secondaryColor = rootStyles.getPropertyValue(secondaryColorVar);\n  const onSecondaryColor = rootStyles.getPropertyValue(onSecondaryColorVar);\n  const warningColor = rootStyles.getPropertyValue(warningColorVar);\n  const onWarningColor = rootStyles.getPropertyValue(onWarningColorVar);\n  const errorColor = rootStyles.getPropertyValue(errorColorVar);\n  const onErrorColor = rootStyles.getPropertyValue(onErrorColorVar);\n  const successColor = rootStyles.getPropertyValue(successColorVar);\n  const onSuccessColor = rootStyles.getPropertyValue(onSuccessColorVar);\n  const textPrimaryColor = rootStyles.getPropertyValue(textPrimaryColorVar);\n  const textSecondaryColor = rootStyles.getPropertyValue(textSecondaryColorVar);\n  const textHintColor = rootStyles.getPropertyValue(textHintColorVar);\n  const textDisabledColor = rootStyles.getPropertyValue(textDisabledColorVar);\n\n  return {\n    backgroundColor,\n    primaryColor,\n    onPrimaryColor,\n    secondaryColor,\n    onSecondaryColor,\n    warningColor,\n    onWarningColor,\n    errorColor,\n    onErrorColor,\n    successColor,\n    onSuccessColor,\n    textPrimaryColor,\n    textSecondaryColor,\n    textHintColor,\n    textDisabledColor,\n  };\n};\n\n/**\n * This hook can be used to access the current theme set by the\n * {@link ThemeProvider}.\n *\n * @example Simple Example\n * ```tsx\n * import { useTheme } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const theme = useTheme();\n *\n *   return <pre><code>{JSON.stringify(theme, null, 2)}</code></pre>;\n * }\n * ```\n *\n * @since 6.0.0\n * @throws \"The `ThemeProvider` has not been initialized.\"\n */\nexport function useTheme(): Readonly<ThemeContext>;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useTheme(\n  allowUndefined: true\n): Readonly<ThemeContext> | undefined;\n\n/**\n * @internal\n * @since 6.0.0\n * @throws \"The `ThemeProvider` has not been initialized.\"\n */\nexport function useTheme(\n  allowUndefined?: boolean\n): Readonly<ThemeContext> | undefined {\n  const theme = useContext(context);\n  if (!theme && !allowUndefined) {\n    throw new Error(\"The `ThemeProvider` has not been initialized.\");\n  }\n\n  return theme;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeProviderProps {\n  /**\n   * When this is `undefined`, the theme will be derived by computing the\n   * `document.documentElement`'s styles for all the `react-md` theme custom\n   * properties. The theme will also automatically update whenever the\n   * `colorScheme` or `colorSchemeMode` change.\n   *\n   * It is recommended to manually provide your theme if you know it beforehand.\n   * Deriving the theme is really only useful if you allow your user to\n   * customize all these theme values themselves and persist through local\n   * storage/cookies.\n   *\n   * @see {@link DEFAULT_DARK_THEME}\n   * @see {@link DEFAULT_LIGHT_THEME}\n   * @defaultValue `colorScheme === \"dark\" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME`\n   */\n  theme?: Readonly<ConfigurableThemeColors>;\n\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * The `ThemeProvider` should be added to the root of your app but as a child of\n * the `CoreProviders`.\n *\n * @example\n * ```tsx\n * import {\n *   black,\n *   blue500,\n *   greenAccent700,\n *   orangeAccent200,\n *   orangeAccent400,\n *   red500,\n *   CoreProviders,\n *   ThemeProvider,\n * } from \"@react-md/core\";\n * import type { ConfigurableThemeColors } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * import App from \"./App\";\n *\n * const theme: Readonly<ConfigurableThemeColors> = {\n *   primaryColor: blue500,\n *   onPrimaryColor: black,\n *   secondaryColor: orangeAccent400,\n *   onSecondaryColor: black,\n *   warningColor: orangeAccent200,\n *   onWarningColor: black,\n *   errorColor: red500,\n *   onErrorColor: black,\n *   successColor: greenAccent700,\n *   onSuccessColor: black,\n *   backgroundColor: \"#121212\",\n *   textPrimaryColor: \"#d9d9d9\",\n *   textSecondaryColor: \"#b3b3b3\",\n *   textHintColor: \"gray\", // #808080\n *   textDisabledColor: \"gray\", // #808080\n * };\n *\n * const container = document.getElementById(\"app\");\n * const root = createRoot(container);\n * root.render(\n *   <CoreProviders>\n *     <ThemeProvider theme={theme}>\n *       <App />\n *     </ThemeProvider>\n *   </CoreProviders>\n * );\n * ```\n *\n * @example Automatically Deriving the Theme\n * ```tsx\n * import {\n *   CoreProviders,\n *   LocalStorageColorSchemeProvider,\n *   ThemeProvider,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * import App from \"./App\";\n *\n * const container = document.getElementById(\"app\");\n * const root = createRoot(container);\n * root.render(\n *   <CoreProviders>\n *     <LocalStorageColorSchemeProvider>\n *       <ThemeProvider>\n *         <App />\n *       </ThemeProvider>\n *     </LocalStorageColorSchemeProvider>\n *   </CoreProviders>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function ThemeProvider(props: ThemeProviderProps): ReactElement {\n  const { children, theme } = props;\n  const ssr = useSsr();\n  const { colorScheme, colorSchemeMode } = useColorScheme();\n  const [derivedTheme, setDerivedTheme] = useState<ConfigurableThemeColors>(\n    () => {\n      if (theme) {\n        return theme;\n      }\n\n      if (!ssr && typeof document !== \"undefined\") {\n        return getDerivedTheme(document.documentElement);\n      }\n\n      return colorScheme === \"dark\" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME;\n    }\n  );\n\n  const derived = !theme;\n  useEffect(() => {\n    if (theme) {\n      return;\n    }\n\n    // This has to be recalculated after an animation to ensure the new theme\n    // styles have been applied. It will use the previous theme styles without\n    // this frame.\n    //\n    // NOTE: This will not be correct the first time a new theme is lazy-loaded\n    // and applied. It might be good to have a way to manually force this flow\n    // again?\n    const frame = window.requestAnimationFrame(() =>\n      setDerivedTheme(getDerivedTheme(document.documentElement))\n    );\n\n    return () => {\n      window.cancelAnimationFrame(frame);\n    };\n  }, [theme, colorScheme, colorSchemeMode]);\n\n  const value = useMemo<ThemeContext>(() => {\n    const backgroundColor =\n      theme?.backgroundColor ?? derivedTheme.backgroundColor;\n    const primaryColor = theme?.primaryColor ?? derivedTheme.primaryColor;\n    const onPrimaryColor = theme?.onPrimaryColor ?? derivedTheme.onPrimaryColor;\n    const secondaryColor = theme?.secondaryColor ?? derivedTheme.secondaryColor;\n    const onSecondaryColor =\n      theme?.onSecondaryColor ?? derivedTheme.onSecondaryColor;\n    const warningColor = theme?.warningColor ?? derivedTheme.warningColor;\n    const onWarningColor = theme?.onWarningColor ?? derivedTheme.onWarningColor;\n    const errorColor = theme?.errorColor ?? derivedTheme.errorColor;\n    const onErrorColor = theme?.onErrorColor ?? derivedTheme.onErrorColor;\n    const successColor = theme?.successColor ?? derivedTheme.successColor;\n    const onSuccessColor = theme?.onSuccessColor ?? derivedTheme.onSuccessColor;\n    const textPrimaryColor =\n      theme?.textPrimaryColor ?? derivedTheme.textPrimaryColor;\n    const textSecondaryColor =\n      theme?.textSecondaryColor ?? derivedTheme.textSecondaryColor;\n    const textHintColor = theme?.textHintColor ?? derivedTheme.textHintColor;\n    const textDisabledColor =\n      theme?.textDisabledColor ?? derivedTheme.textDisabledColor;\n\n    return {\n      derived,\n      backgroundColor,\n      primaryColor,\n      onPrimaryColor,\n      secondaryColor,\n      onSecondaryColor,\n      warningColor,\n      onWarningColor,\n      errorColor,\n      onErrorColor,\n      successColor,\n      onSuccessColor,\n      textPrimaryColor,\n      textSecondaryColor,\n      textHintColor,\n      textDisabledColor,\n      setDerivedTheme,\n    };\n  }, [\n    derived,\n    derivedTheme.backgroundColor,\n    derivedTheme.errorColor,\n    derivedTheme.onErrorColor,\n    derivedTheme.onPrimaryColor,\n    derivedTheme.onSecondaryColor,\n    derivedTheme.onSuccessColor,\n    derivedTheme.onWarningColor,\n    derivedTheme.primaryColor,\n    derivedTheme.secondaryColor,\n    derivedTheme.successColor,\n    derivedTheme.textDisabledColor,\n    derivedTheme.textHintColor,\n    derivedTheme.textPrimaryColor,\n    derivedTheme.textSecondaryColor,\n    derivedTheme.warningColor,\n    theme?.backgroundColor,\n    theme?.errorColor,\n    theme?.onErrorColor,\n    theme?.onPrimaryColor,\n    theme?.onSecondaryColor,\n    theme?.onSuccessColor,\n    theme?.onWarningColor,\n    theme?.primaryColor,\n    theme?.secondaryColor,\n    theme?.successColor,\n    theme?.textDisabledColor,\n    theme?.textHintColor,\n    theme?.textPrimaryColor,\n    theme?.textSecondaryColor,\n    theme?.warningColor,\n  ]);\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useMemo","useState","useSsr","black","blue500","greenAccent700","orangeAccent200","orangeAccent400","red500","backgroundColorVar","errorColorVar","onErrorColorVar","onPrimaryColorVar","onSecondaryColorVar","onSuccessColorVar","onWarningColorVar","primaryColorVar","secondaryColorVar","successColorVar","textDisabledColorVar","textHintColorVar","textPrimaryColorVar","textSecondaryColorVar","warningColorVar","useColorScheme","DEFAULT_THEME_COLORS","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","DEFAULT_LIGHT_THEME","backgroundColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor","DEFAULT_DARK_THEME","context","undefined","displayName","Provider","getDerivedTheme","container","document","documentElement","rootStyles","window","getComputedStyle","getPropertyValue","useTheme","allowUndefined","theme","Error","ThemeProvider","props","children","ssr","colorScheme","colorSchemeMode","derivedTheme","setDerivedTheme","derived","frame","requestAnimationFrame","cancelAnimationFrame","value"],"mappings":"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"}
+{"version":3,"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport { type UseStateSetter } from \"../types.js\";\nimport {\n  black,\n  blue500,\n  greenAccent700,\n  orangeAccent200,\n  orangeAccent400,\n  red500,\n} from \"./colors.js\";\nimport {\n  backgroundColorVar,\n  errorColorVar,\n  onErrorColorVar,\n  onPrimaryColorVar,\n  onSecondaryColorVar,\n  onSuccessColorVar,\n  onWarningColorVar,\n  primaryColorVar,\n  secondaryColorVar,\n  successColorVar,\n  textDisabledColorVar,\n  textHintColorVar,\n  textPrimaryColorVar,\n  textSecondaryColorVar,\n  warningColorVar,\n} from \"./cssVars.js\";\nimport { useColorScheme } from \"./useColorScheme.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-background-color\"?: string;\n    \"--rmd-on-background-color\"?: string;\n    \"--rmd-surface-color\"?: string;\n    \"--rmd-primary-color\"?: string;\n    \"--rmd-on-primary-color\"?: string;\n    \"--rmd-secondary-color\"?: string;\n    \"--rmd-on-secondary-color\"?: string;\n    \"--rmd-warning-color\"?: string;\n    \"--rmd-on-warning-color\"?: string;\n    \"--rmd-error-color\"?: string;\n    \"--rmd-on-error-color\"?: string;\n    \"--rmd-success-color\"?: string;\n    \"--rmd-on-success-color\"?: string;\n    \"--rmd-text-primary-color\"?: string;\n    \"--rmd-text-secondary-color\"?: string;\n    \"--rmd-text-hint-color\"?: string;\n    \"--rmd-text-disabled-color\"?: string;\n\n    \"--rmd-outline-width\"?: string | number;\n    \"--rmd-outline-color\"?: string;\n    \"--rmd-outline-grey-color\"?: string;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface ThemeColors {\n  primaryColor: string;\n  onPrimaryColor: string;\n  secondaryColor: string;\n  onSecondaryColor: string;\n  warningColor: string;\n  onWarningColor: string;\n  errorColor: string;\n  onErrorColor: string;\n  successColor: string;\n  onSuccessColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeTextColors {\n  textPrimaryColor: string;\n  textSecondaryColor: string;\n  textHintColor: string;\n  textDisabledColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ConfigurableThemeColors extends ThemeColors, ThemeTextColors {\n  backgroundColor: string;\n}\n\n/** @since 6.0.0 */\nexport type ConfigurableThemeColorsName = keyof ConfigurableThemeColors;\n\n/** @since 6.0.0 */\nexport interface ThemeContext extends ConfigurableThemeColors {\n  /**\n   * This will be `true` if a `theme` was not provided to the {@link ThemeProvider}\n   */\n  derived: boolean;\n\n  /**\n   * @example Simple Example\n   * ```tsx\n   * import { getDerivedTheme, useHtmlClassName, useTheme } from \"@react-md/core\";\n   * import { useEffect } from \"react\";\n   *\n   * import styles from \"./LightTheme.module.scss\";\n   *\n   * let loadedOnce = false;\n   *\n   * export default function LightTheme(): null {\n   *   useHtmlClassName(styles.container);\n   *   const { setDerivedTheme } = useTheme();\n   *   useEffect(() => {\n   *     if (loadedOnce) {\n   *       return;\n   *     }\n   *\n   *     loadedOnce = true;\n   *     setDerivedTheme(getDerivedTheme());\n   *   }, [setDerivedTheme]);\n   *   return null;\n   * }\n   * ```\n   */\n  setDerivedTheme: UseStateSetter<Readonly<ConfigurableThemeColors>>;\n}\n\n/** @since 6.0.0 */\nexport const DEFAULT_THEME_COLORS: Readonly<ThemeColors> = {\n  primaryColor: blue500,\n  onPrimaryColor: black,\n  secondaryColor: orangeAccent400,\n  onSecondaryColor: black,\n  warningColor: orangeAccent200,\n  onWarningColor: black,\n  errorColor: red500,\n  onErrorColor: black,\n  successColor: greenAccent700,\n  onSuccessColor: black,\n};\n\n/** @since 6.0.0 */\nexport const DEFAULT_LIGHT_THEME: Readonly<ConfigurableThemeColors> = {\n  ...DEFAULT_THEME_COLORS,\n  backgroundColor: \"#fafafa\",\n  textPrimaryColor: \"#212121\",\n  textSecondaryColor: \"#757575\",\n  textHintColor: \"#a8a8a8\",\n  textDisabledColor: \"#9e9e9e\",\n};\n\n/** @since 6.0.0 */\nexport const DEFAULT_DARK_THEME: Readonly<ConfigurableThemeColors> = {\n  ...DEFAULT_THEME_COLORS,\n  backgroundColor: \"#121212\",\n  textPrimaryColor: \"#d9d9d9\",\n  textSecondaryColor: \"#b3b3b3\",\n  textHintColor: \"gray\", // #808080\n  textDisabledColor: \"gray\", // #808080\n};\n\nconst context = createContext<Readonly<ThemeContext> | undefined>(undefined);\ncontext.displayName = \"Theme\";\nconst { Provider } = context;\n\n/** @since 6.0.0 */\nexport const getDerivedTheme = (\n  container: Element = document.documentElement\n): Readonly<ConfigurableThemeColors> => {\n  const rootStyles = window.getComputedStyle(container);\n  const backgroundColor = rootStyles.getPropertyValue(backgroundColorVar);\n  const primaryColor = rootStyles.getPropertyValue(primaryColorVar);\n  const onPrimaryColor = rootStyles.getPropertyValue(onPrimaryColorVar);\n  const secondaryColor = rootStyles.getPropertyValue(secondaryColorVar);\n  const onSecondaryColor = rootStyles.getPropertyValue(onSecondaryColorVar);\n  const warningColor = rootStyles.getPropertyValue(warningColorVar);\n  const onWarningColor = rootStyles.getPropertyValue(onWarningColorVar);\n  const errorColor = rootStyles.getPropertyValue(errorColorVar);\n  const onErrorColor = rootStyles.getPropertyValue(onErrorColorVar);\n  const successColor = rootStyles.getPropertyValue(successColorVar);\n  const onSuccessColor = rootStyles.getPropertyValue(onSuccessColorVar);\n  const textPrimaryColor = rootStyles.getPropertyValue(textPrimaryColorVar);\n  const textSecondaryColor = rootStyles.getPropertyValue(textSecondaryColorVar);\n  const textHintColor = rootStyles.getPropertyValue(textHintColorVar);\n  const textDisabledColor = rootStyles.getPropertyValue(textDisabledColorVar);\n\n  return {\n    backgroundColor,\n    primaryColor,\n    onPrimaryColor,\n    secondaryColor,\n    onSecondaryColor,\n    warningColor,\n    onWarningColor,\n    errorColor,\n    onErrorColor,\n    successColor,\n    onSuccessColor,\n    textPrimaryColor,\n    textSecondaryColor,\n    textHintColor,\n    textDisabledColor,\n  };\n};\n\n/**\n * This hook can be used to access the current theme set by the\n * {@link ThemeProvider}.\n *\n * @example Simple Example\n * ```tsx\n * import { useTheme } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const theme = useTheme();\n *\n *   return <pre><code>{JSON.stringify(theme, null, 2)}</code></pre>;\n * }\n * ```\n *\n * @since 6.0.0\n * @throws \"The `ThemeProvider` has not been initialized.\"\n */\nexport function useTheme(): Readonly<ThemeContext>;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useTheme(\n  allowUndefined: true\n): Readonly<ThemeContext> | undefined;\n\n/**\n * @internal\n * @since 6.0.0\n * @throws \"The `ThemeProvider` has not been initialized.\"\n */\nexport function useTheme(\n  allowUndefined?: boolean\n): Readonly<ThemeContext> | undefined {\n  const theme = useContext(context);\n  if (!theme && !allowUndefined) {\n    throw new Error(\"The `ThemeProvider` has not been initialized.\");\n  }\n\n  return theme;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeProviderProps {\n  /**\n   * When this is `undefined`, the theme will be derived by computing the\n   * `document.documentElement`'s styles for all the `react-md` theme custom\n   * properties. The theme will also automatically update whenever the\n   * `colorScheme` or `colorSchemeMode` change.\n   *\n   * It is recommended to manually provide your theme if you know it beforehand.\n   * Deriving the theme is really only useful if you allow your user to\n   * customize all these theme values themselves and persist through local\n   * storage/cookies.\n   *\n   * @see {@link DEFAULT_DARK_THEME}\n   * @see {@link DEFAULT_LIGHT_THEME}\n   * @defaultValue `colorScheme === \"dark\" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME`\n   */\n  theme?: Readonly<ConfigurableThemeColors>;\n\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * The `ThemeProvider` should be added to the root of your app but as a child of\n * the `CoreProviders`.\n *\n * @example\n * ```tsx\n * import {\n *   black,\n *   blue500,\n *   greenAccent700,\n *   orangeAccent200,\n *   orangeAccent400,\n *   red500,\n *   CoreProviders,\n *   ThemeProvider,\n * } from \"@react-md/core\";\n * import type { ConfigurableThemeColors } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * import App from \"./App\";\n *\n * const theme: Readonly<ConfigurableThemeColors> = {\n *   primaryColor: blue500,\n *   onPrimaryColor: black,\n *   secondaryColor: orangeAccent400,\n *   onSecondaryColor: black,\n *   warningColor: orangeAccent200,\n *   onWarningColor: black,\n *   errorColor: red500,\n *   onErrorColor: black,\n *   successColor: greenAccent700,\n *   onSuccessColor: black,\n *   backgroundColor: \"#121212\",\n *   textPrimaryColor: \"#d9d9d9\",\n *   textSecondaryColor: \"#b3b3b3\",\n *   textHintColor: \"gray\", // #808080\n *   textDisabledColor: \"gray\", // #808080\n * };\n *\n * const container = document.getElementById(\"app\");\n * const root = createRoot(container);\n * root.render(\n *   <CoreProviders>\n *     <ThemeProvider theme={theme}>\n *       <App />\n *     </ThemeProvider>\n *   </CoreProviders>\n * );\n * ```\n *\n * @example Automatically Deriving the Theme\n * ```tsx\n * import {\n *   CoreProviders,\n *   LocalStorageColorSchemeProvider,\n *   ThemeProvider,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * import App from \"./App\";\n *\n * const container = document.getElementById(\"app\");\n * const root = createRoot(container);\n * root.render(\n *   <CoreProviders>\n *     <LocalStorageColorSchemeProvider>\n *       <ThemeProvider>\n *         <App />\n *       </ThemeProvider>\n *     </LocalStorageColorSchemeProvider>\n *   </CoreProviders>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function ThemeProvider(props: ThemeProviderProps): ReactElement {\n  const { children, theme } = props;\n  const ssr = useSsr();\n  const { colorScheme, colorSchemeMode } = useColorScheme();\n  const [derivedTheme, setDerivedTheme] = useState<ConfigurableThemeColors>(\n    () => {\n      if (theme) {\n        return theme;\n      }\n\n      if (!ssr && typeof document !== \"undefined\") {\n        return getDerivedTheme(document.documentElement);\n      }\n\n      return colorScheme === \"dark\" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME;\n    }\n  );\n\n  const derived = !theme;\n  useEffect(() => {\n    if (theme) {\n      return;\n    }\n\n    // This has to be recalculated after an animation to ensure the new theme\n    // styles have been applied. It will use the previous theme styles without\n    // this frame.\n    //\n    // NOTE: This will not be correct the first time a new theme is lazy-loaded\n    // and applied. It might be good to have a way to manually force this flow\n    // again?\n    const frame = window.requestAnimationFrame(() => {\n      setDerivedTheme(getDerivedTheme(document.documentElement));\n    });\n\n    return () => {\n      window.cancelAnimationFrame(frame);\n    };\n  }, [theme, colorScheme, colorSchemeMode]);\n\n  const value = useMemo<ThemeContext>(() => {\n    const backgroundColor =\n      theme?.backgroundColor ?? derivedTheme.backgroundColor;\n    const primaryColor = theme?.primaryColor ?? derivedTheme.primaryColor;\n    const onPrimaryColor = theme?.onPrimaryColor ?? derivedTheme.onPrimaryColor;\n    const secondaryColor = theme?.secondaryColor ?? derivedTheme.secondaryColor;\n    const onSecondaryColor =\n      theme?.onSecondaryColor ?? derivedTheme.onSecondaryColor;\n    const warningColor = theme?.warningColor ?? derivedTheme.warningColor;\n    const onWarningColor = theme?.onWarningColor ?? derivedTheme.onWarningColor;\n    const errorColor = theme?.errorColor ?? derivedTheme.errorColor;\n    const onErrorColor = theme?.onErrorColor ?? derivedTheme.onErrorColor;\n    const successColor = theme?.successColor ?? derivedTheme.successColor;\n    const onSuccessColor = theme?.onSuccessColor ?? derivedTheme.onSuccessColor;\n    const textPrimaryColor =\n      theme?.textPrimaryColor ?? derivedTheme.textPrimaryColor;\n    const textSecondaryColor =\n      theme?.textSecondaryColor ?? derivedTheme.textSecondaryColor;\n    const textHintColor = theme?.textHintColor ?? derivedTheme.textHintColor;\n    const textDisabledColor =\n      theme?.textDisabledColor ?? derivedTheme.textDisabledColor;\n\n    return {\n      derived,\n      backgroundColor,\n      primaryColor,\n      onPrimaryColor,\n      secondaryColor,\n      onSecondaryColor,\n      warningColor,\n      onWarningColor,\n      errorColor,\n      onErrorColor,\n      successColor,\n      onSuccessColor,\n      textPrimaryColor,\n      textSecondaryColor,\n      textHintColor,\n      textDisabledColor,\n      setDerivedTheme,\n    };\n  }, [\n    derived,\n    derivedTheme.backgroundColor,\n    derivedTheme.errorColor,\n    derivedTheme.onErrorColor,\n    derivedTheme.onPrimaryColor,\n    derivedTheme.onSecondaryColor,\n    derivedTheme.onSuccessColor,\n    derivedTheme.onWarningColor,\n    derivedTheme.primaryColor,\n    derivedTheme.secondaryColor,\n    derivedTheme.successColor,\n    derivedTheme.textDisabledColor,\n    derivedTheme.textHintColor,\n    derivedTheme.textPrimaryColor,\n    derivedTheme.textSecondaryColor,\n    derivedTheme.warningColor,\n    theme?.backgroundColor,\n    theme?.errorColor,\n    theme?.onErrorColor,\n    theme?.onPrimaryColor,\n    theme?.onSecondaryColor,\n    theme?.onSuccessColor,\n    theme?.onWarningColor,\n    theme?.primaryColor,\n    theme?.secondaryColor,\n    theme?.successColor,\n    theme?.textDisabledColor,\n    theme?.textHintColor,\n    theme?.textPrimaryColor,\n    theme?.textSecondaryColor,\n    theme?.warningColor,\n  ]);\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useMemo","useState","useSsr","black","blue500","greenAccent700","orangeAccent200","orangeAccent400","red500","backgroundColorVar","errorColorVar","onErrorColorVar","onPrimaryColorVar","onSecondaryColorVar","onSuccessColorVar","onWarningColorVar","primaryColorVar","secondaryColorVar","successColorVar","textDisabledColorVar","textHintColorVar","textPrimaryColorVar","textSecondaryColorVar","warningColorVar","useColorScheme","DEFAULT_THEME_COLORS","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","DEFAULT_LIGHT_THEME","backgroundColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor","DEFAULT_DARK_THEME","context","undefined","displayName","Provider","getDerivedTheme","container","document","documentElement","rootStyles","window","getComputedStyle","getPropertyValue","useTheme","allowUndefined","theme","Error","ThemeProvider","props","children","ssr","colorScheme","colorSchemeMode","derivedTheme","setDerivedTheme","derived","frame","requestAnimationFrame","cancelAnimationFrame","value"],"mappings":"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"}