@react-md/core 6.0.1 → 6.1.0

package/dist/tabs/_tabs.scss

@@ -5,6 +5,7 @@
 @use "sass:map";
 
 @use "../utils";
+@use "../spacing";
 @use "../theme/theme";
 @use "../transition/transition";
 @use "../typography/typography";
@@ -75,7 +76,7 @@ $typography: map.remove(typography.$button-styles, line-height) !default;
 
 /// The default gap between the `Tab` icon and children.
 /// @type Number
-$gap: icon.$spacing !default;
+$gap: spacing.get-var(sm) !default;
 
 /// The default `Tab` height.
 /// @type Number
@@ -87,11 +88,11 @@ $stacked-height: 4.5rem !default;
 
 /// The default `Tab` horizontal padding.
 /// @type Number
-$horizontal-padding: 1rem !default;
+$horizontal-padding: spacing.get-var(md) !default;
 
 /// The default `Tab` vertical padding while `stacked`.
 /// @type Number
-$vertical-padding: 0.75rem !default;
+$vertical-padding: calc(spacing.get-var(sm) * 1.5) !default;
 
 /// The `Tab` min width.
 /// @type Number
@@ -131,7 +132,9 @@ $transition-timing-function: transition.$linear-timing-function !default;
 
 /// The default padding for a `TabList` with the `padded` prop enabled.
 /// @type Number
-$tablist-scrollable-horizontal-padding: 3.25rem !default;
+$tablist-scrollable-horizontal-padding: calc(
+  spacing.get-var(xl) * 1.625
+) !default;
 
 /// The default z-index for a `TabList` scroll button.
 /// @type Number

package/dist/tabs/useTabs.d.ts

@@ -150,7 +150,7 @@ export interface TabsImplementation<TabValue extends string | number = number> {
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @see {@link https://react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */
 export declare function useTabs(): TabsImplementation & {
@@ -204,7 +204,7 @@ export declare function useTabs(): TabsImplementation & {
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @see {@link https://react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */
 export declare function useTabs<TabValue extends number>(options: TabsHookOptions<TabValue> & {
@@ -271,7 +271,7 @@ export declare function useTabs<TabValue extends number>(options: TabsHookOption
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @see {@link https://react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */
 export declare function useTabs<TabValue extends string>(options: TabsHookOptions<TabValue> & {
@@ -379,7 +379,7 @@ export declare function useTabs<TabValue extends string>(options: TabsHookOption
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @see {@link https://react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */
 export declare function useTabs<TabValue extends string>(options: TabsHookOptions<TabValue> & {

package/dist/tabs/useTabs.js

@@ -9,13 +9,14 @@ const PANEL_PREFIX = "panel-";
  * This hook can be uncontrolled/controlled and supports strongly typing the tab
  * values if needed. Check out the overloads for examples.
  *
- * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @see {@link https://react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */ export function useTabs(options = {}) {
     const { baseId: propBaseId, tabs = EMPTY_LIST, stacked, vertical, iconAfter, activeTab: propActiveTab, setActiveTab: propSetActiveTab, defaultActiveTab, disableScrollFix, disableTransition } = options;
     const baseId = useEnsuredId(propBaseId, "tab");
     const [direction, setDirection] = useState("forward");
     const [activeTab, setActiveTab] = useEnsuredState({
+        name: "activeTab",
         value: propActiveTab,
         setValue: propSetActiveTab,
         defaultValue: defaultActiveTab ?? 0

package/dist/tabs/useTabs.js.map

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

package/dist/theme/LocalStorageColorSchemeProvider.d.ts

@@ -88,8 +88,8 @@ export interface LocalStorageColorSchemeProviderProps {
  * );
  * ```
  *
- * @see {@link https://next.react-md.dev/components/color-scheme-provider | ColorSchemeProvider Demos}
- * @see {@link https://next.react-md.dev/customization/dark-mode|Dark Mode Setup}
+ * @see {@link https://react-md.dev/components/color-scheme-provider | ColorSchemeProvider Demos}
+ * @see {@link https://react-md.dev/customization/dark-mode|Dark Mode Setup}
  * @since 6.0.0
  */
 export declare function LocalStorageColorSchemeProvider(props: LocalStorageColorSchemeProviderProps): ReactElement;

package/dist/theme/LocalStorageColorSchemeProvider.js

@@ -65,8 +65,8 @@ import { useColorSchemeProvider } from "./useColorSchemeProvider.js";
  * );
  * ```
  *
- * @see {@link https://next.react-md.dev/components/color-scheme-provider | ColorSchemeProvider Demos}
- * @see {@link https://next.react-md.dev/customization/dark-mode|Dark Mode Setup}
+ * @see {@link https://react-md.dev/components/color-scheme-provider | ColorSchemeProvider Demos}
+ * @see {@link https://react-md.dev/customization/dark-mode|Dark Mode Setup}
  * @since 6.0.0
  */ export function LocalStorageColorSchemeProvider(props) {
     const { localStorageKey = "colorScheme", defaultColorScheme = "light", disableMetaTag, children } = props;

package/dist/theme/LocalStorageColorSchemeProvider.js.map

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

package/dist/theme/ThemeProvider.d.ts

@@ -121,7 +121,7 @@ export interface ThemeProviderProps {
  * );
  * ```
  *
- * @see {@link https://next.react-md.dev/components/theme-provider | ThemeProvider Demos}
+ * @see {@link https://react-md.dev/components/theme-provider | ThemeProvider Demos}
  * @since 6.0.0
  */
 export declare function ThemeProvider(props: ThemeProviderProps): ReactElement;

package/dist/theme/ThemeProvider.js

@@ -95,7 +95,7 @@ const { Provider } = context;
  * );
  * ```
  *
- * @see {@link https://next.react-md.dev/components/theme-provider | ThemeProvider Demos}
+ * @see {@link https://react-md.dev/components/theme-provider | ThemeProvider Demos}
  * @since 6.0.0
  */ export function ThemeProvider(props) {
     const { children, theme } = props;

package/dist/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME } from \"./constants.js\";\nimport { getDerivedTheme } from \"./getDerivedTheme.js\";\nimport { type ConfigurableThemeColors, type ThemeContext } from \"./types.js\";\nimport { useColorScheme } from \"./useColorScheme.js\";\n\nconst context = createContext<Readonly<ThemeContext> | undefined>(undefined);\ncontext.displayName = \"Theme\";\nconst { Provider } = context;\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/theme/ThemeProvider\";\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   * `currentColor` or `colorScheme` 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 `currentColor === \"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 { CoreProviders } from \"@react-md/core/CoreProviders\";\n * import {\n *   black,\n *   blue500,\n *   greenAccent700,\n *   orangeAccent200,\n *   orangeAccent400,\n *   red500,\n * } from \"@react-md/core/theme/colors\";\n * import { ThemeProvider } from \"@react-md/core/theme/ThemeProvider\";\n * import { type ConfigurableThemeColors } from \"@react-md/core/theme/types\";\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 { CoreProviders } from \"@react-md/core/CoreProviders\";\n * import { LocalStorageColorSchemeProvider } from \"@react-md/core/theme/LocalStorageColorSchemeProvider\";\n * import { ThemeProvider } from \"@react-md/core/theme/ThemeProvider\";\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 * @see {@link https://next.react-md.dev/components/theme-provider | ThemeProvider Demos}\n * @since 6.0.0\n */\nexport function ThemeProvider(props: ThemeProviderProps): ReactElement {\n  const { children, theme } = props;\n  const ssr = useSsr();\n  const { currentColor, colorScheme } = 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 currentColor === \"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, currentColor, colorScheme]);\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","DEFAULT_DARK_THEME","DEFAULT_LIGHT_THEME","getDerivedTheme","useColorScheme","context","undefined","displayName","Provider","useTheme","allowUndefined","theme","Error","ThemeProvider","props","children","ssr","currentColor","colorScheme","derivedTheme","setDerivedTheme","document","documentElement","derived","frame","window","requestAnimationFrame","cancelAnimationFrame","value","backgroundColor","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor"],"mappings":"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"}
+{"version":3,"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME } from \"./constants.js\";\nimport { getDerivedTheme } from \"./getDerivedTheme.js\";\nimport { type ConfigurableThemeColors, type ThemeContext } from \"./types.js\";\nimport { useColorScheme } from \"./useColorScheme.js\";\n\nconst context = createContext<Readonly<ThemeContext> | undefined>(undefined);\ncontext.displayName = \"Theme\";\nconst { Provider } = context;\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/theme/ThemeProvider\";\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   * `currentColor` or `colorScheme` 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 `currentColor === \"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 { CoreProviders } from \"@react-md/core/CoreProviders\";\n * import {\n *   black,\n *   blue500,\n *   greenAccent700,\n *   orangeAccent200,\n *   orangeAccent400,\n *   red500,\n * } from \"@react-md/core/theme/colors\";\n * import { ThemeProvider } from \"@react-md/core/theme/ThemeProvider\";\n * import { type ConfigurableThemeColors } from \"@react-md/core/theme/types\";\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 { CoreProviders } from \"@react-md/core/CoreProviders\";\n * import { LocalStorageColorSchemeProvider } from \"@react-md/core/theme/LocalStorageColorSchemeProvider\";\n * import { ThemeProvider } from \"@react-md/core/theme/ThemeProvider\";\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 * @see {@link https://react-md.dev/components/theme-provider | ThemeProvider Demos}\n * @since 6.0.0\n */\nexport function ThemeProvider(props: ThemeProviderProps): ReactElement {\n  const { children, theme } = props;\n  const ssr = useSsr();\n  const { currentColor, colorScheme } = 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 currentColor === \"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, currentColor, colorScheme]);\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","DEFAULT_DARK_THEME","DEFAULT_LIGHT_THEME","getDerivedTheme","useColorScheme","context","undefined","displayName","Provider","useTheme","allowUndefined","theme","Error","ThemeProvider","props","children","ssr","currentColor","colorScheme","derivedTheme","setDerivedTheme","document","documentElement","derived","frame","window","requestAnimationFrame","cancelAnimationFrame","value","backgroundColor","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor"],"mappings":"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"}

package/dist/theme/useColorSchemeProvider.js

@@ -6,6 +6,7 @@ import { usePrefersDarkTheme } from "./usePrefersDarkTheme.js";
 export function useColorSchemeProvider(options = {}) {
     const { disableMetaTag, colorScheme: propColorScheme, setColorScheme: propSetColorScheme, defaultColorScheme } = options;
     const [colorScheme, setColorScheme] = useEnsuredState({
+        name: "colorScheme",
         value: propColorScheme,
         setValue: propSetColorScheme,
         defaultValue: defaultColorScheme

package/dist/theme/useColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/useColorSchemeProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { type UseStateInitializer } from \"../types.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport {\n  type ColorScheme,\n  type ColorSchemeContext,\n  type ColorSchemeState,\n} from \"./types.js\";\nimport { useColorSchemeMetaTag } from \"./useColorSchemeMetaTag.js\";\nimport { usePrefersDarkTheme } from \"./usePrefersDarkTheme.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ColorSchemeProviderOptions extends Partial<ColorSchemeState> {\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   * The current color scheme that is being used by your app. This should\n   * match the `$color-scheme` SCSS variable.\n   *\n   * @defaultValue `\"light\"`\n   */\n  defaultColorScheme?: UseStateInitializer<ColorScheme>;\n}\n\n/**\n * @example\n * ```tsx\n * import { type ColorScheme } from \"@react-md/core/theme/types\";\n * import { ColorSchemeProvider } from \"@react-md/core/theme/useColorScheme\";\n * import { useColorSchemeProvider } from \"@reat-md/core/theme/useColorSchemeProvider\";\n * import { type PropsWithChildren, type ReactElement } from \"react\";\n * import Cookies from \"js-cookie\";\n *\n * function MyColorSchemeProvider(props: PropsWithChildren): ReactElement {\n *   const { children } = props;\n *\n *   const [colorScheme, setColorScheme] = useState<ColorScheme>(\n *     () => Cookies.get(\"colorScheme\") || \"system\"\n *   );\n *   const value = useColorSchemeProvider({\n *     colorScheme,\n *     setColorScheme(nextValue) {\n *       setColorScheme((prevValue) => {\n *         const value = typeof nextValue === \"function\"\n *           ? nextValue(prevValue)\n *           : nextValue;\n *\n *         Cookies.set(\"colorScheme\", value);\n *         return value;\n *       });\n *     }\n *   });\n *\n *   return <ColorSchemeProvider value={value}>{children}</ColorSchemeProvider>;\n * }\n * ```\n * @since 6.0.0\n */\nexport function useColorSchemeProvider(\n  options?: { [key in keyof ColorSchemeState]?: never } & {\n    disableMetaTag?: boolean;\n    defaultColorScheme?: UseStateInitializer<ColorScheme>;\n  }\n): ColorSchemeContext;\nexport function useColorSchemeProvider(\n  options: ColorSchemeState & {\n    disableMetaTag?: boolean;\n    defaultColorScheme?: never;\n  }\n): ColorSchemeContext;\nexport function useColorSchemeProvider(\n  options: ColorSchemeProviderOptions = {}\n): ColorSchemeContext {\n  const {\n    disableMetaTag,\n    colorScheme: propColorScheme,\n    setColorScheme: propSetColorScheme,\n    defaultColorScheme,\n  } = options;\n\n  const [colorScheme, setColorScheme] = useEnsuredState({\n    value: propColorScheme,\n    setValue: propSetColorScheme,\n    defaultValue: defaultColorScheme,\n  });\n  const prefersDarkTheme = usePrefersDarkTheme(colorScheme !== \"system\");\n  const derivedColorScheme = prefersDarkTheme ? \"dark\" : \"light\";\n  const currentColor =\n    colorScheme === \"system\" ? derivedColorScheme : colorScheme;\n\n  useColorSchemeMetaTag({\n    disabled: disableMetaTag,\n    colorScheme: currentColor,\n  });\n\n  return useMemo<ColorSchemeContext>(\n    () => ({\n      currentColor,\n      colorScheme,\n      setColorScheme,\n    }),\n    [currentColor, colorScheme, setColorScheme]\n  );\n}\n"],"names":["useMemo","useEnsuredState","useColorSchemeMetaTag","usePrefersDarkTheme","useColorSchemeProvider","options","disableMetaTag","colorScheme","propColorScheme","setColorScheme","propSetColorScheme","defaultColorScheme","value","setValue","defaultValue","prefersDarkTheme","derivedColorScheme","currentColor","disabled"],"mappings":"AAAA;AAEA,SAASA,OAAO,QAAQ,QAAQ;AAGhC,SAASC,eAAe,QAAQ,wBAAwB;AAMxD,SAASC,qBAAqB,QAAQ,6BAA6B;AACnE,SAASC,mBAAmB,QAAQ,2BAA2B;AAqE/D,OAAO,SAASC,uBACdC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,cAAc,EACdC,aAAaC,eAAe,EAC5BC,gBAAgBC,kBAAkB,EAClCC,kBAAkB,EACnB,GAAGN;IAEJ,MAAM,CAACE,aAAaE,eAAe,GAAGR,gBAAgB;QACpDW,OAAOJ;QACPK,UAAUH;QACVI,cAAcH;IAChB;IACA,MAAMI,mBAAmBZ,oBAAoBI,gBAAgB;IAC7D,MAAMS,qBAAqBD,mBAAmB,SAAS;IACvD,MAAME,eACJV,gBAAgB,WAAWS,qBAAqBT;IAElDL,sBAAsB;QACpBgB,UAAUZ;QACVC,aAAaU;IACf;IAEA,OAAOjB,QACL,IAAO,CAAA;YACLiB;YACAV;YACAE;QACF,CAAA,GACA;QAACQ;QAAcV;QAAaE;KAAe;AAE/C"}
+{"version":3,"sources":["../../src/theme/useColorSchemeProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { type UseStateInitializer } from \"../types.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport {\n  type ColorScheme,\n  type ColorSchemeContext,\n  type ColorSchemeState,\n} from \"./types.js\";\nimport { useColorSchemeMetaTag } from \"./useColorSchemeMetaTag.js\";\nimport { usePrefersDarkTheme } from \"./usePrefersDarkTheme.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ColorSchemeProviderOptions extends Partial<ColorSchemeState> {\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   * The current color scheme that is being used by your app. This should\n   * match the `$color-scheme` SCSS variable.\n   *\n   * @defaultValue `\"light\"`\n   */\n  defaultColorScheme?: UseStateInitializer<ColorScheme>;\n}\n\n/**\n * @example\n * ```tsx\n * import { type ColorScheme } from \"@react-md/core/theme/types\";\n * import { ColorSchemeProvider } from \"@react-md/core/theme/useColorScheme\";\n * import { useColorSchemeProvider } from \"@reat-md/core/theme/useColorSchemeProvider\";\n * import { type PropsWithChildren, type ReactElement } from \"react\";\n * import Cookies from \"js-cookie\";\n *\n * function MyColorSchemeProvider(props: PropsWithChildren): ReactElement {\n *   const { children } = props;\n *\n *   const [colorScheme, setColorScheme] = useState<ColorScheme>(\n *     () => Cookies.get(\"colorScheme\") || \"system\"\n *   );\n *   const value = useColorSchemeProvider({\n *     colorScheme,\n *     setColorScheme(nextValue) {\n *       setColorScheme((prevValue) => {\n *         const value = typeof nextValue === \"function\"\n *           ? nextValue(prevValue)\n *           : nextValue;\n *\n *         Cookies.set(\"colorScheme\", value);\n *         return value;\n *       });\n *     }\n *   });\n *\n *   return <ColorSchemeProvider value={value}>{children}</ColorSchemeProvider>;\n * }\n * ```\n * @since 6.0.0\n */\nexport function useColorSchemeProvider(\n  options?: { [key in keyof ColorSchemeState]?: never } & {\n    disableMetaTag?: boolean;\n    defaultColorScheme?: UseStateInitializer<ColorScheme>;\n  }\n): ColorSchemeContext;\nexport function useColorSchemeProvider(\n  options: ColorSchemeState & {\n    disableMetaTag?: boolean;\n    defaultColorScheme?: never;\n  }\n): ColorSchemeContext;\nexport function useColorSchemeProvider(\n  options: ColorSchemeProviderOptions = {}\n): ColorSchemeContext {\n  const {\n    disableMetaTag,\n    colorScheme: propColorScheme,\n    setColorScheme: propSetColorScheme,\n    defaultColorScheme,\n  } = options;\n\n  const [colorScheme, setColorScheme] = useEnsuredState({\n    name: \"colorScheme\",\n    value: propColorScheme,\n    setValue: propSetColorScheme,\n    defaultValue: defaultColorScheme,\n  });\n  const prefersDarkTheme = usePrefersDarkTheme(colorScheme !== \"system\");\n  const derivedColorScheme = prefersDarkTheme ? \"dark\" : \"light\";\n  const currentColor =\n    colorScheme === \"system\" ? derivedColorScheme : colorScheme;\n\n  useColorSchemeMetaTag({\n    disabled: disableMetaTag,\n    colorScheme: currentColor,\n  });\n\n  return useMemo<ColorSchemeContext>(\n    () => ({\n      currentColor,\n      colorScheme,\n      setColorScheme,\n    }),\n    [currentColor, colorScheme, setColorScheme]\n  );\n}\n"],"names":["useMemo","useEnsuredState","useColorSchemeMetaTag","usePrefersDarkTheme","useColorSchemeProvider","options","disableMetaTag","colorScheme","propColorScheme","setColorScheme","propSetColorScheme","defaultColorScheme","name","value","setValue","defaultValue","prefersDarkTheme","derivedColorScheme","currentColor","disabled"],"mappings":"AAAA;AAEA,SAASA,OAAO,QAAQ,QAAQ;AAGhC,SAASC,eAAe,QAAQ,wBAAwB;AAMxD,SAASC,qBAAqB,QAAQ,6BAA6B;AACnE,SAASC,mBAAmB,QAAQ,2BAA2B;AAqE/D,OAAO,SAASC,uBACdC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,cAAc,EACdC,aAAaC,eAAe,EAC5BC,gBAAgBC,kBAAkB,EAClCC,kBAAkB,EACnB,GAAGN;IAEJ,MAAM,CAACE,aAAaE,eAAe,GAAGR,gBAAgB;QACpDW,MAAM;QACNC,OAAOL;QACPM,UAAUJ;QACVK,cAAcJ;IAChB;IACA,MAAMK,mBAAmBb,oBAAoBI,gBAAgB;IAC7D,MAAMU,qBAAqBD,mBAAmB,SAAS;IACvD,MAAME,eACJX,gBAAgB,WAAWU,qBAAqBV;IAElDL,sBAAsB;QACpBiB,UAAUb;QACVC,aAAaW;IACf;IAEA,OAAOlB,QACL,IAAO,CAAA;YACLkB;YACAX;YACAE;QACF,CAAA,GACA;QAACS;QAAcX;QAAaE;KAAe;AAE/C"}

package/dist/theme/utils.js

@@ -1,4 +1,4 @@
-import { black, white } from "./colors.js";
+/* eslint-disable no-param-reassign */ import { black, white } from "./colors.js";
 const RGB_REGEX = /^rgb\(((\b([01]?\d\d?|2[0-4]\d|25[0-5])\b),?){3}\)$/;
 const SHORTHAND_REGEX = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
 const VERBOSE_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
@@ -25,7 +25,7 @@ const VERBOSE_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
 }
 export function getRGB(color) {
     // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`
-    // remove whitepsace to make it easy for supporting rgb or hex
+    // remove whitespace to make it easy for supporting rgb or hex
     color = color.replace(/\s/g, "");
     const rgbMatches = color.match(RGB_REGEX);
     if (rgbMatches) {

package/dist/theme/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/utils.ts"],"sourcesContent":["import { black, white } from \"./colors.js\";\n\nconst RGB_REGEX = /^rgb\\(((\\b([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\b),?){3}\\)$/;\nconst SHORTHAND_REGEX = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\nconst VERBOSE_REGEX = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n\nexport type RGB = readonly [red: number, green: number, blue: number];\n\n/**\n * Converts a hex string into an rgb value. This is useful for detecting color\n * contrast ratios and other stuff.\n *\n * @param hex - The hex string to convert\n * @returns an object containing the r, g, b values for the color.\n */\nexport function hexToRGB(hex: string): RGB {\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    !SHORTHAND_REGEX.test(hex) &&\n    !VERBOSE_REGEX.test(hex)\n  ) {\n    throw new TypeError(\"Invalid color string.\");\n  }\n\n  hex = hex.replace(\n    SHORTHAND_REGEX,\n    (_m, r, g, b) => `${r}${r}${g}${g}${b}${b}`\n  );\n\n  const result = hex.match(VERBOSE_REGEX) || [];\n  const r = parseInt(result[1] || \"\", 16) || 0;\n  const g = parseInt(result[2] || \"\", 16) || 0;\n  const b = parseInt(result[3] || \"\", 16) || 0;\n\n  return [r, g, b];\n}\n\nexport function getRGB(color: string): RGB {\n  // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`\n  // remove whitepsace to make it easy for supporting rgb or hex\n  color = color.replace(/\\s/g, \"\");\n  const rgbMatches = color.match(RGB_REGEX);\n  if (rgbMatches) {\n    const r = parseInt(rgbMatches[1] || \"\", 16) || 0;\n    const g = parseInt(rgbMatches[2] || \"\", 16) || 0;\n    const b = parseInt(rgbMatches[3] || \"\", 16) || 0;\n\n    return [r, g, b];\n  }\n\n  return hexToRGB(color);\n}\n\nconst RED_MULTIPLIER = 0.2126;\nconst GREEN_MULTIPLIER = 0.7152;\nconst BLUE_MULTIPLIER = 0.0722;\n\n/**\n * I really couldn't figure out how to name these \"magic\" numbers since the\n * formula doesn't really describe it much:\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nfunction get8BitColor(color: number): number {\n  color /= 255;\n\n  if (color <= 0.03928) {\n    return color / 12.92;\n  }\n\n  return ((color + 0.055) / 1.055) ** 2.4;\n}\n\n/**\n * A number closest to 0 should be closest to black while a number closest to 1\n * should be closest to white.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nexport function getLuminance(color: string): number {\n  const [r, g, b] = getRGB(color);\n\n  const red = get8BitColor(r) * RED_MULTIPLIER;\n  const green = get8BitColor(g) * GREEN_MULTIPLIER;\n  const blue = get8BitColor(b) * BLUE_MULTIPLIER;\n\n  return red + green + blue;\n}\n\n/**\n * Gets the contrast ratio between a background color and a foreground color.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n *\n * @param background - The background color\n * @param foreground - The foreground color. This is normally the `color` css\n * value.\n * @returns the contrast ratio between the background and foreground colors.\n */\nexport function getContrastRatio(\n  background: string,\n  foreground: string\n): number {\n  const backgroundLuminance = getLuminance(background) + 0.05;\n  const foregroundLuminance = getLuminance(foreground) + 0.05;\n\n  return (\n    Math.max(backgroundLuminance, foregroundLuminance) /\n    Math.min(backgroundLuminance, foregroundLuminance)\n  );\n}\n\n/**\n * The type of contrast ratio compliance to confirm to. The ratios in order are:\n * - 3:1 for large text (18pt normal or 14pt bold)\n * - 4.5:1 for normal text\n * - 7:1 for Level AAA requirements.\n *\n * @see https://www.w3.org/TR/WCAG20/#visual-audio-contrast\n * @see https://www.w3.org/TR/WCAG20/#larger-scaledef\n */\nexport type ContrastRatioCompliance = \"large\" | \"normal\" | \"AAA\";\n\n/**\n * The contrast ratio that can be used for large text where large text is\n * considered 18pt or 14pt bold.\n */\nexport const LARGE_TEXT_CONTRAST_RATIO = 3;\n\n/**\n * The contrast ratio that can be used for normal text.\n */\nexport const NORMAL_TEXT_CONTRAST_RATIO = 4.5;\n\n/**\n * The AAA contrast ratio for passing WGAC 2.0 color contrast ratios.\n */\nexport const AAA_CONTRAST_RATIO = 7;\n\n/**\n * Checks if there is an acceptable contrast ratio between the background and\n * foreground colors based on the provided compliance level.\n *\n * @param background - The background color to check against\n * @param foreground - The foreground color to check against\n * @param compliance - The compliance level to use or a custom number as a\n * ratio.\n * @returns true if there is enough contrast between the foreground and\n * background colors for the provided compliance level.\n */\nexport function isContrastCompliant(\n  background: string,\n  foreground: string,\n  compliance: ContrastRatioCompliance | number = \"normal\"\n): boolean {\n  let ratio: number;\n  switch (compliance) {\n    case \"large\":\n      ratio = LARGE_TEXT_CONTRAST_RATIO;\n      break;\n    case \"normal\":\n      ratio = NORMAL_TEXT_CONTRAST_RATIO;\n      break;\n    case \"AAA\":\n      ratio = AAA_CONTRAST_RATIO;\n      break;\n    default:\n      ratio = compliance;\n  }\n\n  return getContrastRatio(background, foreground) >= ratio;\n}\n\n/**\n * Returns the highest contrast color to the provided `backgroundColor`. This is\n * normally used to ensure that a new background color can use an accessible text\n * color of either `#000` or `#fff`.\n *\n * This is pretty much a javascript implementation as the `contrast-color` Sass\n * function.\n *\n * @since 6.0.0\n */\nexport function contrastColor(\n  backgroundColor: string,\n  lightColor = white,\n  darkColor = black\n): string {\n  const lightContrast = getContrastRatio(backgroundColor, lightColor);\n  const darkContrast = getContrastRatio(backgroundColor, darkColor);\n\n  return lightContrast > darkContrast ? lightColor : darkColor;\n}\n"],"names":["black","white","RGB_REGEX","SHORTHAND_REGEX","VERBOSE_REGEX","hexToRGB","hex","process","env","NODE_ENV","test","TypeError","replace","_m","r","g","b","result","match","parseInt","getRGB","color","rgbMatches","RED_MULTIPLIER","GREEN_MULTIPLIER","BLUE_MULTIPLIER","get8BitColor","getLuminance","red","green","blue","getContrastRatio","background","foreground","backgroundLuminance","foregroundLuminance","Math","max","min","LARGE_TEXT_CONTRAST_RATIO","NORMAL_TEXT_CONTRAST_RATIO","AAA_CONTRAST_RATIO","isContrastCompliant","compliance","ratio","contrastColor","backgroundColor","lightColor","darkColor","lightContrast","darkContrast"],"mappings":"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"}
+{"version":3,"sources":["../../src/theme/utils.ts"],"sourcesContent":["/* eslint-disable no-param-reassign */\nimport { black, white } from \"./colors.js\";\n\nconst RGB_REGEX = /^rgb\\(((\\b([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\b),?){3}\\)$/;\nconst SHORTHAND_REGEX = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\nconst VERBOSE_REGEX = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n\nexport type RGB = readonly [red: number, green: number, blue: number];\n\n/**\n * Converts a hex string into an rgb value. This is useful for detecting color\n * contrast ratios and other stuff.\n *\n * @param hex - The hex string to convert\n * @returns an object containing the r, g, b values for the color.\n */\nexport function hexToRGB(hex: string): RGB {\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    !SHORTHAND_REGEX.test(hex) &&\n    !VERBOSE_REGEX.test(hex)\n  ) {\n    throw new TypeError(\"Invalid color string.\");\n  }\n\n  hex = hex.replace(\n    SHORTHAND_REGEX,\n    (_m, r, g, b) => `${r}${r}${g}${g}${b}${b}`\n  );\n\n  const result = hex.match(VERBOSE_REGEX) || [];\n  const r = parseInt(result[1] || \"\", 16) || 0;\n  const g = parseInt(result[2] || \"\", 16) || 0;\n  const b = parseInt(result[3] || \"\", 16) || 0;\n\n  return [r, g, b];\n}\n\nexport function getRGB(color: string): RGB {\n  // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`\n  // remove whitespace to make it easy for supporting rgb or hex\n  color = color.replace(/\\s/g, \"\");\n  const rgbMatches = color.match(RGB_REGEX);\n  if (rgbMatches) {\n    const r = parseInt(rgbMatches[1] || \"\", 16) || 0;\n    const g = parseInt(rgbMatches[2] || \"\", 16) || 0;\n    const b = parseInt(rgbMatches[3] || \"\", 16) || 0;\n\n    return [r, g, b];\n  }\n\n  return hexToRGB(color);\n}\n\nconst RED_MULTIPLIER = 0.2126;\nconst GREEN_MULTIPLIER = 0.7152;\nconst BLUE_MULTIPLIER = 0.0722;\n\n/**\n * I really couldn't figure out how to name these \"magic\" numbers since the\n * formula doesn't really describe it much:\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nfunction get8BitColor(color: number): number {\n  color /= 255;\n\n  if (color <= 0.03928) {\n    return color / 12.92;\n  }\n\n  return ((color + 0.055) / 1.055) ** 2.4;\n}\n\n/**\n * A number closest to 0 should be closest to black while a number closest to 1\n * should be closest to white.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nexport function getLuminance(color: string): number {\n  const [r, g, b] = getRGB(color);\n\n  const red = get8BitColor(r) * RED_MULTIPLIER;\n  const green = get8BitColor(g) * GREEN_MULTIPLIER;\n  const blue = get8BitColor(b) * BLUE_MULTIPLIER;\n\n  return red + green + blue;\n}\n\n/**\n * Gets the contrast ratio between a background color and a foreground color.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n *\n * @param background - The background color\n * @param foreground - The foreground color. This is normally the `color` css\n * value.\n * @returns the contrast ratio between the background and foreground colors.\n */\nexport function getContrastRatio(\n  background: string,\n  foreground: string\n): number {\n  const backgroundLuminance = getLuminance(background) + 0.05;\n  const foregroundLuminance = getLuminance(foreground) + 0.05;\n\n  return (\n    Math.max(backgroundLuminance, foregroundLuminance) /\n    Math.min(backgroundLuminance, foregroundLuminance)\n  );\n}\n\n/**\n * The type of contrast ratio compliance to confirm to. The ratios in order are:\n * - 3:1 for large text (18pt normal or 14pt bold)\n * - 4.5:1 for normal text\n * - 7:1 for Level AAA requirements.\n *\n * @see https://www.w3.org/TR/WCAG20/#visual-audio-contrast\n * @see https://www.w3.org/TR/WCAG20/#larger-scaledef\n */\nexport type ContrastRatioCompliance = \"large\" | \"normal\" | \"AAA\";\n\n/**\n * The contrast ratio that can be used for large text where large text is\n * considered 18pt or 14pt bold.\n */\nexport const LARGE_TEXT_CONTRAST_RATIO = 3;\n\n/**\n * The contrast ratio that can be used for normal text.\n */\nexport const NORMAL_TEXT_CONTRAST_RATIO = 4.5;\n\n/**\n * The AAA contrast ratio for passing WGAC 2.0 color contrast ratios.\n */\nexport const AAA_CONTRAST_RATIO = 7;\n\n/**\n * Checks if there is an acceptable contrast ratio between the background and\n * foreground colors based on the provided compliance level.\n *\n * @param background - The background color to check against\n * @param foreground - The foreground color to check against\n * @param compliance - The compliance level to use or a custom number as a\n * ratio.\n * @returns true if there is enough contrast between the foreground and\n * background colors for the provided compliance level.\n */\nexport function isContrastCompliant(\n  background: string,\n  foreground: string,\n  compliance: ContrastRatioCompliance | number = \"normal\"\n): boolean {\n  let ratio: number;\n  switch (compliance) {\n    case \"large\":\n      ratio = LARGE_TEXT_CONTRAST_RATIO;\n      break;\n    case \"normal\":\n      ratio = NORMAL_TEXT_CONTRAST_RATIO;\n      break;\n    case \"AAA\":\n      ratio = AAA_CONTRAST_RATIO;\n      break;\n    default:\n      ratio = compliance;\n  }\n\n  return getContrastRatio(background, foreground) >= ratio;\n}\n\n/**\n * Returns the highest contrast color to the provided `backgroundColor`. This is\n * normally used to ensure that a new background color can use an accessible text\n * color of either `#000` or `#fff`.\n *\n * This is pretty much a javascript implementation as the `contrast-color` Sass\n * function.\n *\n * @since 6.0.0\n */\nexport function contrastColor(\n  backgroundColor: string,\n  lightColor = white,\n  darkColor = black\n): string {\n  const lightContrast = getContrastRatio(backgroundColor, lightColor);\n  const darkContrast = getContrastRatio(backgroundColor, darkColor);\n\n  return lightContrast > darkContrast ? lightColor : darkColor;\n}\n"],"names":["black","white","RGB_REGEX","SHORTHAND_REGEX","VERBOSE_REGEX","hexToRGB","hex","process","env","NODE_ENV","test","TypeError","replace","_m","r","g","b","result","match","parseInt","getRGB","color","rgbMatches","RED_MULTIPLIER","GREEN_MULTIPLIER","BLUE_MULTIPLIER","get8BitColor","getLuminance","red","green","blue","getContrastRatio","background","foreground","backgroundLuminance","foregroundLuminance","Math","max","min","LARGE_TEXT_CONTRAST_RATIO","NORMAL_TEXT_CONTRAST_RATIO","AAA_CONTRAST_RATIO","isContrastCompliant","compliance","ratio","contrastColor","backgroundColor","lightColor","darkColor","lightContrast","darkContrast"],"mappings":"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"}

package/dist/tooltip/Tooltip.d.ts

@@ -87,6 +87,6 @@ export interface TooltipProps extends HTMLAttributes<HTMLSpanElement>, CSSTransi
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/tooltip | Tooltip Demos}
+ * @see {@link https://react-md.dev/components/tooltip | Tooltip Demos}
  */
 export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/tooltip/Tooltip.js

@@ -34,7 +34,7 @@ import { tooltip } from "./styles.js";
  * }
  * ```
  *
- * @see {@link https://next.react-md.dev/components/tooltip | Tooltip Demos}
+ * @see {@link https://react-md.dev/components/tooltip | Tooltip Demos}
  */ export const Tooltip = /*#__PURE__*/ forwardRef(function Tooltip(props, nodeRef) {
     const { id: propId, dense, visible, children, appear, enter, exit, onEnter, onEntering, onEntered, onExit, onExiting, onExited, timeout = DEFAULT_TOOLTIP_TIMEOUT, classNames = DEFAULT_TOOLTIP_CLASSNAMES, className, position = DEFAULT_TOOLTIP_POSITION, temporary = true, exitedHidden = !temporary, textOverflow, disablePortal: propDisablePortal, ...remaining } = props;
     const id = useEnsuredId(propId, "tooltip");

package/dist/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type SimplePosition } from \"../positioning/types.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionComponentProps,\n  type SSRTransitionOptions,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  DEFAULT_TOOLTIP_CLASSNAMES,\n  DEFAULT_TOOLTIP_POSITION,\n  DEFAULT_TOOLTIP_TIMEOUT,\n} from \"./constants.js\";\nimport { tooltip } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tooltip-background-color\"?: string;\n    \"--rmd-tooltip-color\"?: string;\n    \"--rmd-tooltip-spacing\"?: string | number;\n  }\n}\n\n/**\n * The base props for the `Tooltip` component. This can be extended when\n * creating custom tooltip implementations.\n *\n * @since 2.8.0 Supports the `RenderConditionalPortalProps`\n * @since 6.0.0 The `id` prop is optional.\n * @since 6.0.0 Removed `lineWrap` for `textOverflow`\n * @since 6.0.0 No longer supports the `RenderConditionalPortalProps` other than\n * `portal` with the `disablePortal` prop.\n */\nexport interface TooltipProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    CSSTransitionComponentProps,\n    SSRTransitionOptions,\n    TransitionActions {\n  visible: boolean;\n\n  /**\n   * Set this to `true` to use a smaller font size and padding on the tooltip\n   * and a smaller gap between the tooltip and tooltipped element.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * @defaultValue `\"below\"`\n   */\n  position?: SimplePosition;\n\n  /**\n   * @see {@link CSSTransitionComponentProps.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * Set this to `\"nowrap\"` for tooltips that are positioned near the edge of\n   * the viewport that have a position of `\"above\"` or `\"below\"` so that the\n   * tooltip no longer aligns to the center of the tooltipped element.\n   *\n   * Set this to `\"ellipsis\"` if the tooltip should only show a single line of\n   * text and ellipsis once it has reached the max tooltip width.\n   *\n   * @defaultValue `\"allow\"`\n   */\n  textOverflow?: TextOverflow;\n\n  /**\n   * @see {@link CSSTransitionComponentProps.timeout}\n   * @defaultValue `DEFAULT_TOOLTIP_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link CSSTransitionComponentProps.classNames}\n   * @defaultValue `DEFAULT_TOOLTIP_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This is the base tooltip component that can only be used to render a tooltip\n * with an animation when the visibility changes. If this component is used, you\n * will need to manually add all the event listeners and triggers to change the\n * `visible` prop.\n *\n * @example Simple Usage\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Tooltip } from \"@react-md/core/tooltip/Tooltip\";\n * import { useTooltip } from \"@react-md/core/tooltip/useTooltip\";\n *\n * function Example() {\n *   const { elementProps, tooltipProps } = useTooltip();\n *\n *   return (\n *     <>\n *       <Button {...elementProps}>Button</Button>\n *       <Tooltip {...tooltipProps}>\n *         Tooltip Content\n *       </Tooltip>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/tooltip | Tooltip Demos}\n */\nexport const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(\n  function Tooltip(props, nodeRef) {\n    const {\n      id: propId,\n      dense,\n      visible,\n      children,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      timeout = DEFAULT_TOOLTIP_TIMEOUT,\n      classNames = DEFAULT_TOOLTIP_CLASSNAMES,\n      className,\n      position = DEFAULT_TOOLTIP_POSITION,\n      temporary = true,\n      exitedHidden = !temporary,\n      textOverflow,\n      disablePortal: propDisablePortal,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"tooltip\");\n\n    const { rendered, elementProps, disablePortal } = useCSSTransition({\n      nodeRef,\n      appear,\n      enter,\n      exit,\n      transitionIn: visible,\n      timeout,\n      classNames,\n      className: tooltip({\n        dense,\n        position,\n        className,\n        textOverflow,\n      }),\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n    });\n\n    return (\n      <Portal disabled={disablePortal}>\n        {rendered && (\n          <span {...remaining} {...elementProps} id={id} role=\"tooltip\">\n            {children}\n          </span>\n        )}\n      </Portal>\n    );\n  }\n);\n"],"names":["forwardRef","Portal","useCSSTransition","useEnsuredId","DEFAULT_TOOLTIP_CLASSNAMES","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_TIMEOUT","tooltip","Tooltip","props","nodeRef","id","propId","dense","visible","children","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","timeout","classNames","className","position","temporary","exitedHidden","textOverflow","disablePortal","propDisablePortal","remaining","rendered","elementProps","transitionIn","disabled","span","role"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,MAAM,QAAQ,sBAAsB;AAS7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,0BAA0B,EAC1BC,wBAAwB,EACxBC,uBAAuB,QAClB,iBAAiB;AACxB,SAASC,OAAO,QAAQ,cAAc;AAuEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,wBAAUR,WACrB,SAASQ,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,UAAUnB,uBAAuB,EACjCoB,aAAatB,0BAA0B,EACvCuB,SAAS,EACTC,WAAWvB,wBAAwB,EACnCwB,YAAY,IAAI,EAChBC,eAAe,CAACD,SAAS,EACzBE,YAAY,EACZC,eAAeC,iBAAiB,EAChC,GAAGC,WACJ,GAAGzB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,MAAM,EAAEuB,QAAQ,EAAEC,YAAY,EAAEJ,aAAa,EAAE,GAAG9B,iBAAiB;QACjEQ;QACAM;QACAC;QACAC;QACAmB,cAAcvB;QACdW;QACAC;QACAC,WAAWpB,QAAQ;YACjBM;YACAe;YACAD;YACAI;QACF;QACAZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAK;QACAC;QACAE,eAAeC;IACjB;IAEA,qBACE,KAAChC;QAAOqC,UAAUN;kBACfG,0BACC,KAACI;YAAM,GAAGL,SAAS;YAAG,GAAGE,YAAY;YAAEzB,IAAIA;YAAI6B,MAAK;sBACjDzB;;;AAKX,GACA"}
+{"version":3,"sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type SimplePosition } from \"../positioning/types.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionComponentProps,\n  type SSRTransitionOptions,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  DEFAULT_TOOLTIP_CLASSNAMES,\n  DEFAULT_TOOLTIP_POSITION,\n  DEFAULT_TOOLTIP_TIMEOUT,\n} from \"./constants.js\";\nimport { tooltip } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tooltip-background-color\"?: string;\n    \"--rmd-tooltip-color\"?: string;\n    \"--rmd-tooltip-spacing\"?: string | number;\n  }\n}\n\n/**\n * The base props for the `Tooltip` component. This can be extended when\n * creating custom tooltip implementations.\n *\n * @since 2.8.0 Supports the `RenderConditionalPortalProps`\n * @since 6.0.0 The `id` prop is optional.\n * @since 6.0.0 Removed `lineWrap` for `textOverflow`\n * @since 6.0.0 No longer supports the `RenderConditionalPortalProps` other than\n * `portal` with the `disablePortal` prop.\n */\nexport interface TooltipProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    CSSTransitionComponentProps,\n    SSRTransitionOptions,\n    TransitionActions {\n  visible: boolean;\n\n  /**\n   * Set this to `true` to use a smaller font size and padding on the tooltip\n   * and a smaller gap between the tooltip and tooltipped element.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * @defaultValue `\"below\"`\n   */\n  position?: SimplePosition;\n\n  /**\n   * @see {@link CSSTransitionComponentProps.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * Set this to `\"nowrap\"` for tooltips that are positioned near the edge of\n   * the viewport that have a position of `\"above\"` or `\"below\"` so that the\n   * tooltip no longer aligns to the center of the tooltipped element.\n   *\n   * Set this to `\"ellipsis\"` if the tooltip should only show a single line of\n   * text and ellipsis once it has reached the max tooltip width.\n   *\n   * @defaultValue `\"allow\"`\n   */\n  textOverflow?: TextOverflow;\n\n  /**\n   * @see {@link CSSTransitionComponentProps.timeout}\n   * @defaultValue `DEFAULT_TOOLTIP_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link CSSTransitionComponentProps.classNames}\n   * @defaultValue `DEFAULT_TOOLTIP_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This is the base tooltip component that can only be used to render a tooltip\n * with an animation when the visibility changes. If this component is used, you\n * will need to manually add all the event listeners and triggers to change the\n * `visible` prop.\n *\n * @example Simple Usage\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Tooltip } from \"@react-md/core/tooltip/Tooltip\";\n * import { useTooltip } from \"@react-md/core/tooltip/useTooltip\";\n *\n * function Example() {\n *   const { elementProps, tooltipProps } = useTooltip();\n *\n *   return (\n *     <>\n *       <Button {...elementProps}>Button</Button>\n *       <Tooltip {...tooltipProps}>\n *         Tooltip Content\n *       </Tooltip>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/tooltip | Tooltip Demos}\n */\nexport const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(\n  function Tooltip(props, nodeRef) {\n    const {\n      id: propId,\n      dense,\n      visible,\n      children,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      timeout = DEFAULT_TOOLTIP_TIMEOUT,\n      classNames = DEFAULT_TOOLTIP_CLASSNAMES,\n      className,\n      position = DEFAULT_TOOLTIP_POSITION,\n      temporary = true,\n      exitedHidden = !temporary,\n      textOverflow,\n      disablePortal: propDisablePortal,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"tooltip\");\n\n    const { rendered, elementProps, disablePortal } = useCSSTransition({\n      nodeRef,\n      appear,\n      enter,\n      exit,\n      transitionIn: visible,\n      timeout,\n      classNames,\n      className: tooltip({\n        dense,\n        position,\n        className,\n        textOverflow,\n      }),\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n    });\n\n    return (\n      <Portal disabled={disablePortal}>\n        {rendered && (\n          <span {...remaining} {...elementProps} id={id} role=\"tooltip\">\n            {children}\n          </span>\n        )}\n      </Portal>\n    );\n  }\n);\n"],"names":["forwardRef","Portal","useCSSTransition","useEnsuredId","DEFAULT_TOOLTIP_CLASSNAMES","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_TIMEOUT","tooltip","Tooltip","props","nodeRef","id","propId","dense","visible","children","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","timeout","classNames","className","position","temporary","exitedHidden","textOverflow","disablePortal","propDisablePortal","remaining","rendered","elementProps","transitionIn","disabled","span","role"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAGxD,SAASC,MAAM,QAAQ,sBAAsB;AAS7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SACEC,0BAA0B,EAC1BC,wBAAwB,EACxBC,uBAAuB,QAClB,iBAAiB;AACxB,SAASC,OAAO,QAAQ,cAAc;AAuEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,wBAAUR,WACrB,SAASQ,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,UAAUnB,uBAAuB,EACjCoB,aAAatB,0BAA0B,EACvCuB,SAAS,EACTC,WAAWvB,wBAAwB,EACnCwB,YAAY,IAAI,EAChBC,eAAe,CAACD,SAAS,EACzBE,YAAY,EACZC,eAAeC,iBAAiB,EAChC,GAAGC,WACJ,GAAGzB;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,MAAM,EAAEuB,QAAQ,EAAEC,YAAY,EAAEJ,aAAa,EAAE,GAAG9B,iBAAiB;QACjEQ;QACAM;QACAC;QACAC;QACAmB,cAAcvB;QACdW;QACAC;QACAC,WAAWpB,QAAQ;YACjBM;YACAe;YACAD;YACAI;QACF;QACAZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAK;QACAC;QACAE,eAAeC;IACjB;IAEA,qBACE,KAAChC;QAAOqC,UAAUN;kBACfG,0BACC,KAACI;YAAM,GAAGL,SAAS;YAAG,GAAGE,YAAY;YAAEzB,IAAIA;YAAI6B,MAAK;sBACjDzB;;;AAKX,GACA"}

package/dist/tooltip/TooltipHoverModeProvider.d.ts

@@ -53,7 +53,7 @@ export interface TooltipHoverModeProviderProps extends Partial<HoverModeConfigur
  * </TooltipHoverModeProvider>
  * ```
  *
- * @see {@link https://next.react-md.dev/components/tooltip | Tooltip Demos}
+ * @see {@link https://react-md.dev/components/tooltip | Tooltip Demos}
  * @since 6.0.0
  */
 export declare function TooltipHoverModeProvider(props: TooltipHoverModeProviderProps): ReactElement;

package/dist/tooltip/TooltipHoverModeProvider.js

@@ -40,7 +40,7 @@ const { Provider } = context;
  * </TooltipHoverModeProvider>
  * ```
  *
- * @see {@link https://next.react-md.dev/components/tooltip | Tooltip Demos}
+ * @see {@link https://react-md.dev/components/tooltip | Tooltip Demos}
  * @since 6.0.0
  */ export function TooltipHoverModeProvider(props) {
     const { hoverTimeout = DEFAULT_TOOLTIP_DELAY, leaveTimeout = 0, disableTimeout = DEFAULT_TOOLTIP_DELAY, defaultActiveId, children } = props;

package/dist/tooltip/TooltipHoverModeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tooltip/TooltipHoverModeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n} from \"react\";\n\nimport {\n  type HoverModeConfiguration,\n  type HoverModeContext,\n  createHoverModeContext,\n  useHoverModeProvider,\n} from \"../hoverMode/useHoverModeProvider.js\";\nimport { DEFAULT_TOOLTIP_DELAY } from \"./constants.js\";\n\n/** @since 6.0.0 */\nexport type TooltipHoverModeContext = HoverModeContext;\n\nconst context = createContext<TooltipHoverModeContext>(\n  createHoverModeContext({\n    hoverTimeout: DEFAULT_TOOLTIP_DELAY,\n    leaveTimeout: 0,\n  })\n);\ncontext.displayName = \"TooltipHoverMode\";\nconst { Provider } = context;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useTooltipHoverMode(): Readonly<TooltipHoverModeContext> {\n  return useContext(context);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TooltipHoverModeProviderProps\n  extends Partial<HoverModeConfiguration> {\n  children: ReactNode;\n\n  /**\n   * @see {@link HoverModeConfiguration.hoverTimeout}\n   * @defaultValue `1000`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * @see {@link HoverModeConfiguration.leaveTimeout}\n   * @defaultValue `0`\n   */\n  leaveTimeout?: number;\n\n  /**\n   * @see {@link HoverModeConfiguration.disableTimeout}\n   * @defaultValue `1000`\n   */\n  disableTimeout?: number;\n}\n\n/**\n * **Client Component**\n *\n * Updates all tooltips that are rendered as a child anywhere in the React tree\n * to immediately appear for a short duration once a tooltip has become visible.\n * You can also use this provider to configure all tooltips' visibility delay to\n * a new value.\n *\n * @example Configuration Example\n * ```tsx\n * <TooltipHoverModeProvider\n *   // wait 3 seconds before displaying any tooltips\n *   hoverTimeout={3000}\n *\n *   // wait 1 second before hiding any tooltips\n *   leaveTimeout={1000}\n *\n *   // disable the hover mode functionality only if another tooltip has not\n *   // been visible for 20 seconds\n *   disableTimeout={20000}\n * >\n *   <RestOfTheApp />\n * </TooltipHoverModeProvider>\n * ```\n *\n * @see {@link https://next.react-md.dev/components/tooltip | Tooltip Demos}\n * @since 6.0.0\n */\nexport function TooltipHoverModeProvider(\n  props: TooltipHoverModeProviderProps\n): ReactElement {\n  const {\n    hoverTimeout = DEFAULT_TOOLTIP_DELAY,\n    leaveTimeout = 0,\n    disableTimeout = DEFAULT_TOOLTIP_DELAY,\n    defaultActiveId,\n    children,\n  } = props;\n  const context = useHoverModeProvider({\n    hoverTimeout,\n    leaveTimeout,\n    disableTimeout,\n    defaultActiveId,\n  });\n\n  return <Provider value={context}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","createHoverModeContext","useHoverModeProvider","DEFAULT_TOOLTIP_DELAY","context","hoverTimeout","leaveTimeout","displayName","Provider","useTooltipHoverMode","TooltipHoverModeProvider","props","disableTimeout","defaultActiveId","children","value"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,QACL,QAAQ;AAEf,SAGEC,sBAAsB,EACtBC,oBAAoB,QACf,uCAAuC;AAC9C,SAASC,qBAAqB,QAAQ,iBAAiB;AAKvD,MAAMC,wBAAUL,cACdE,uBAAuB;IACrBI,cAAcF;IACdG,cAAc;AAChB;AAEFF,QAAQG,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;AAErB;;;CAGC,GACD,OAAO,SAASK;IACd,OAAOT,WAAWI;AACpB;AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASM,yBACdC,KAAoC;IAEpC,MAAM,EACJN,eAAeF,qBAAqB,EACpCG,eAAe,CAAC,EAChBM,iBAAiBT,qBAAqB,EACtCU,eAAe,EACfC,QAAQ,EACT,GAAGH;IACJ,MAAMP,UAAUF,qBAAqB;QACnCG;QACAC;QACAM;QACAC;IACF;IAEA,qBAAO,KAACL;QAASO,OAAOX;kBAAUU;;AACpC"}
+{"version":3,"sources":["../../src/tooltip/TooltipHoverModeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n} from \"react\";\n\nimport {\n  type HoverModeConfiguration,\n  type HoverModeContext,\n  createHoverModeContext,\n  useHoverModeProvider,\n} from \"../hoverMode/useHoverModeProvider.js\";\nimport { DEFAULT_TOOLTIP_DELAY } from \"./constants.js\";\n\n/** @since 6.0.0 */\nexport type TooltipHoverModeContext = HoverModeContext;\n\nconst context = createContext<TooltipHoverModeContext>(\n  createHoverModeContext({\n    hoverTimeout: DEFAULT_TOOLTIP_DELAY,\n    leaveTimeout: 0,\n  })\n);\ncontext.displayName = \"TooltipHoverMode\";\nconst { Provider } = context;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useTooltipHoverMode(): Readonly<TooltipHoverModeContext> {\n  return useContext(context);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TooltipHoverModeProviderProps\n  extends Partial<HoverModeConfiguration> {\n  children: ReactNode;\n\n  /**\n   * @see {@link HoverModeConfiguration.hoverTimeout}\n   * @defaultValue `1000`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * @see {@link HoverModeConfiguration.leaveTimeout}\n   * @defaultValue `0`\n   */\n  leaveTimeout?: number;\n\n  /**\n   * @see {@link HoverModeConfiguration.disableTimeout}\n   * @defaultValue `1000`\n   */\n  disableTimeout?: number;\n}\n\n/**\n * **Client Component**\n *\n * Updates all tooltips that are rendered as a child anywhere in the React tree\n * to immediately appear for a short duration once a tooltip has become visible.\n * You can also use this provider to configure all tooltips' visibility delay to\n * a new value.\n *\n * @example Configuration Example\n * ```tsx\n * <TooltipHoverModeProvider\n *   // wait 3 seconds before displaying any tooltips\n *   hoverTimeout={3000}\n *\n *   // wait 1 second before hiding any tooltips\n *   leaveTimeout={1000}\n *\n *   // disable the hover mode functionality only if another tooltip has not\n *   // been visible for 20 seconds\n *   disableTimeout={20000}\n * >\n *   <RestOfTheApp />\n * </TooltipHoverModeProvider>\n * ```\n *\n * @see {@link https://react-md.dev/components/tooltip | Tooltip Demos}\n * @since 6.0.0\n */\nexport function TooltipHoverModeProvider(\n  props: TooltipHoverModeProviderProps\n): ReactElement {\n  const {\n    hoverTimeout = DEFAULT_TOOLTIP_DELAY,\n    leaveTimeout = 0,\n    disableTimeout = DEFAULT_TOOLTIP_DELAY,\n    defaultActiveId,\n    children,\n  } = props;\n  const context = useHoverModeProvider({\n    hoverTimeout,\n    leaveTimeout,\n    disableTimeout,\n    defaultActiveId,\n  });\n\n  return <Provider value={context}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","createHoverModeContext","useHoverModeProvider","DEFAULT_TOOLTIP_DELAY","context","hoverTimeout","leaveTimeout","displayName","Provider","useTooltipHoverMode","TooltipHoverModeProvider","props","disableTimeout","defaultActiveId","children","value"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,QACL,QAAQ;AAEf,SAGEC,sBAAsB,EACtBC,oBAAoB,QACf,uCAAuC;AAC9C,SAASC,qBAAqB,QAAQ,iBAAiB;AAKvD,MAAMC,wBAAUL,cACdE,uBAAuB;IACrBI,cAAcF;IACdG,cAAc;AAChB;AAEFF,QAAQG,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;AAErB;;;CAGC,GACD,OAAO,SAASK;IACd,OAAOT,WAAWI;AACpB;AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASM,yBACdC,KAAoC;IAEpC,MAAM,EACJN,eAAeF,qBAAqB,EACpCG,eAAe,CAAC,EAChBM,iBAAiBT,qBAAqB,EACtCU,eAAe,EACfC,QAAQ,EACT,GAAGH;IACJ,MAAMP,UAAUF,qBAAqB;QACnCG;QACAC;QACAM;QACAC;IACF;IAEA,qBAAO,KAACL;QAASO,OAAOX;kBAAUU;;AACpC"}