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

package/dist/theme/useColorScheme.js

@@ -1,9 +1,9 @@
 "use client";
 import { createContext, useContext } from "react";
 const context = createContext({
+    currentColor: "light",
     colorScheme: "light",
-    colorSchemeMode: "light",
-    setColorSchemeMode () {
+    setColorScheme () {
         if (process.env.NODE_ENV !== "production") {
             throw new Error("The `ColorSchemeProvider` has not been initialized.");
         }
@@ -14,45 +14,47 @@ export const { Provider: ColorSchemeProvider } = context;
 /**
  * @example Lazy Load Configurable Themes
  * ```tsx
- * import type { ChangeEvent, ReactElement } from "react";
- * import { lazy } from "react";
- * import { createRoot } from "react-doc/client";
- * import { Checkbox, ColorSchemeProvider, useColorScheme } from "@react-md/core";
+ * import { Checkbox } from "@react-md/core/form/Checkbox";
+ * import { ColorSchemeProvider, useColorScheme } from "@react-md/core/theme/useColorScheme";
+ * import { type ChangeEvent, lazy, type ReactElement } from "react";
+ * import { createRoot } from "react-dom/client";
  *
- * const DarkTheme = lazy(() => import("./DarkTheme"));
- * const SystemTheme = lazy(() => import("./SystemTheme"));
+ * const DarkTheme = lazy(() => import("./DarkTheme.jsx"));
+ * const SystemTheme = lazy(() => import("./SystemTheme.jsx"));
  *
  * function App(): ReactElement {
- *   const { colorScheme, colorSchemeMode, setColorSchemeMode } =
+ *   const { currentColor, colorScheme, setColorScheme } =
  *     useColorScheme();
  *
  *   const onChange = (event: ChangeEvent<HTMLInputElement>): void => {
  *     const { value } = event.currentTarget;
  *     if (value === "light" || value === "dark" || value === "system") {
- *       setColorSchemeMode(value);
+ *       setColorScheme(value);
  *     }
  *   };
  *
  *   return (
  *     <>
- *       {colorSchemeMode === "dark" && <DarkTheme />}
- *       {colorSchemeMode === "system" && <SystemTheme />}
+ *       <NullSuspense>
+ *         {colorScheme === "dark" && <DarkTheme />}
+ *         {colorScheme === "system" && <SystemTheme />}
+ *       </NullSuspense>
  *       <Checkbox
  *         label="Light"
  *         value="light"
- *         checked={colorSchemeMode === "light"}
+ *         checked={colorScheme === "light"}
  *         onChange={onChange}
  *       />
  *       <Checkbox
  *         label="Dark"
  *         value="dark"
- *         checked={colorSchemeMode === "dark"}
+ *         checked={colorScheme === "dark"}
  *         onChange={onChange}
  *       />
  *       <Checkbox
  *         label="System"
  *         value="system"
- *         checked={colorSchemeMode === "system"}
+ *         checked={colorScheme === "system"}
  *         onChange={onChange}
  *       />
  *     </>

package/dist/theme/useColorScheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/useColorScheme.ts"],"sourcesContent":["\"use client\";\nimport { createContext, useContext } from \"react\";\nimport { type ColorSchemeContext } from \"./types.js\";\n\nconst context = createContext<ColorSchemeContext>({\n  colorScheme: \"light\",\n  colorSchemeMode: \"light\",\n  setColorSchemeMode() {\n    if (process.env.NODE_ENV !== \"production\") {\n      throw new Error(\"The `ColorSchemeProvider` has not been initialized.\");\n    }\n  },\n});\ncontext.displayName = \"ColorScheme\";\nexport const { Provider: ColorSchemeProvider } = context;\n\n/**\n * @example Lazy Load Configurable Themes\n * ```tsx\n * import type { ChangeEvent, ReactElement } from \"react\";\n * import { lazy } from \"react\";\n * import { createRoot } from \"react-doc/client\";\n * import { Checkbox, ColorSchemeProvider, useColorScheme } from \"@react-md/core\";\n *\n * const DarkTheme = lazy(() => import(\"./DarkTheme\"));\n * const SystemTheme = lazy(() => import(\"./SystemTheme\"));\n *\n * function App(): ReactElement {\n *   const { colorScheme, colorSchemeMode, setColorSchemeMode } =\n *     useColorScheme();\n *\n *   const onChange = (event: ChangeEvent<HTMLInputElement>): void => {\n *     const { value } = event.currentTarget;\n *     if (value === \"light\" || value === \"dark\" || value === \"system\") {\n *       setColorSchemeMode(value);\n *     }\n *   };\n *\n *   return (\n *     <>\n *       {colorSchemeMode === \"dark\" && <DarkTheme />}\n *       {colorSchemeMode === \"system\" && <SystemTheme />}\n *       <Checkbox\n *         label=\"Light\"\n *         value=\"light\"\n *         checked={colorSchemeMode === \"light\"}\n *         onChange={onChange}\n *       />\n *       <Checkbox\n *         label=\"Dark\"\n *         value=\"dark\"\n *         checked={colorSchemeMode === \"dark\"}\n *         onChange={onChange}\n *       />\n *       <Checkbox\n *         label=\"System\"\n *         value=\"system\"\n *         checked={colorSchemeMode === \"system\"}\n *         onChange={onChange}\n *       />\n *     </>\n *   );\n * }\n *\n *\n * const root = createRoot(document.getElementById(\"root\"));\n * root.render(\n *   <ColorSchemeProvider>\n *     <App />\n *   </ColorSchemeProvider>\n * );\n *\n * // DarkTheme.tsx\n * import { useHtmlClassName } from \"@react-md/core\";\n *\n * import styles from \"./DarkTheme.module.scss\";\n *\n * export default function DarkTheme(): null {\n *   useHtmlClassName(styles.theme);\n *   return null\n * }\n *\n * // DarkTheme.module.scss\n * @use \"@react-md/core\";\n *\n * .theme {\n *   @include core.use-dark-theme;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useColorScheme(): Readonly<ColorSchemeContext> {\n  return useContext(context);\n}\n"],"names":["createContext","useContext","context","colorScheme","colorSchemeMode","setColorSchemeMode","process","env","NODE_ENV","Error","displayName","Provider","ColorSchemeProvider","useColorScheme"],"mappings":"AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAGlD,MAAMC,UAAUF,cAAkC;IAChDG,aAAa;IACbC,iBAAiB;IACjBC;QACE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,MAAM,IAAIC,MAAM;QAClB;IACF;AACF;AACAP,QAAQQ,WAAW,GAAG;AACtB,OAAO,MAAM,EAAEC,UAAUC,mBAAmB,EAAE,GAAGV,QAAQ;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EC,GACD,OAAO,SAASW;IACd,OAAOZ,WAAWC;AACpB"}
+{"version":3,"sources":["../../src/theme/useColorScheme.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\nimport { type ColorSchemeContext } from \"./types.js\";\n\nconst context = createContext<ColorSchemeContext>({\n  currentColor: \"light\",\n  colorScheme: \"light\",\n  setColorScheme() {\n    if (process.env.NODE_ENV !== \"production\") {\n      throw new Error(\"The `ColorSchemeProvider` has not been initialized.\");\n    }\n  },\n});\ncontext.displayName = \"ColorScheme\";\nexport const { Provider: ColorSchemeProvider } = context;\n\n/**\n * @example Lazy Load Configurable Themes\n * ```tsx\n * import { Checkbox } from \"@react-md/core/form/Checkbox\";\n * import { ColorSchemeProvider, useColorScheme } from \"@react-md/core/theme/useColorScheme\";\n * import { type ChangeEvent, lazy, type ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * const DarkTheme = lazy(() => import(\"./DarkTheme.jsx\"));\n * const SystemTheme = lazy(() => import(\"./SystemTheme.jsx\"));\n *\n * function App(): ReactElement {\n *   const { currentColor, colorScheme, setColorScheme } =\n *     useColorScheme();\n *\n *   const onChange = (event: ChangeEvent<HTMLInputElement>): void => {\n *     const { value } = event.currentTarget;\n *     if (value === \"light\" || value === \"dark\" || value === \"system\") {\n *       setColorScheme(value);\n *     }\n *   };\n *\n *   return (\n *     <>\n *       <NullSuspense>\n *         {colorScheme === \"dark\" && <DarkTheme />}\n *         {colorScheme === \"system\" && <SystemTheme />}\n *       </NullSuspense>\n *       <Checkbox\n *         label=\"Light\"\n *         value=\"light\"\n *         checked={colorScheme === \"light\"}\n *         onChange={onChange}\n *       />\n *       <Checkbox\n *         label=\"Dark\"\n *         value=\"dark\"\n *         checked={colorScheme === \"dark\"}\n *         onChange={onChange}\n *       />\n *       <Checkbox\n *         label=\"System\"\n *         value=\"system\"\n *         checked={colorScheme === \"system\"}\n *         onChange={onChange}\n *       />\n *     </>\n *   );\n * }\n *\n *\n * const root = createRoot(document.getElementById(\"root\"));\n * root.render(\n *   <ColorSchemeProvider>\n *     <App />\n *   </ColorSchemeProvider>\n * );\n *\n * // DarkTheme.tsx\n * import { useHtmlClassName } from \"@react-md/core\";\n *\n * import styles from \"./DarkTheme.module.scss\";\n *\n * export default function DarkTheme(): null {\n *   useHtmlClassName(styles.theme);\n *   return null\n * }\n *\n * // DarkTheme.module.scss\n * @use \"@react-md/core\";\n *\n * .theme {\n *   @include core.use-dark-theme;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useColorScheme(): Readonly<ColorSchemeContext> {\n  return useContext(context);\n}\n"],"names":["createContext","useContext","context","currentColor","colorScheme","setColorScheme","process","env","NODE_ENV","Error","displayName","Provider","ColorSchemeProvider","useColorScheme"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAIlD,MAAMC,UAAUF,cAAkC;IAChDG,cAAc;IACdC,aAAa;IACbC;QACE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,MAAM,IAAIC,MAAM;QAClB;IACF;AACF;AACAP,QAAQQ,WAAW,GAAG;AACtB,OAAO,MAAM,EAAEC,UAAUC,mBAAmB,EAAE,GAAGV,QAAQ;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EC,GACD,OAAO,SAASW;IACd,OAAOZ,WAAWC;AACpB"}

package/dist/theme/useColorSchemeMetaTag.d.ts

@@ -1,4 +1,4 @@
-import { type ColorScheme } from "./types.js";
+import { type LightDarkColorScheme } from "./types.js";
 /**
  * @since 6.0.0
  */
@@ -7,7 +7,7 @@ export interface ColorSchemeMetaTagOptions {
      * @defaultValue `"false"`
      */
     disabled?: boolean;
-    colorScheme: ColorScheme;
+    colorScheme: LightDarkColorScheme;
 }
 /**
  * Adds a `<meta name="color-scheme" content="light">` or
@@ -15,6 +15,19 @@ export interface ColorSchemeMetaTagOptions {
  * should not be used if you are using the `useColorSchemeProvider` since it is
  * already built in.
  *
+ * @example
+ * ```tsx
+ * import { useColorScheme } from "@react-md/core/theme/useColorScheme";
+ * import { useColorSchemeMetaTag } from "@react-md/core/theme/useColorSchemeMetaTag";
+ *
+ * function Example() {
+ *   const { currentColor } = useColorScheme();
+ *   useColorSchemeMetaTag({ colorScheme: currentColor });
+ *
+ *   return null;
+ * }
+ * ```
+ *
  * @since 6.0.0
  */
 export declare function useColorSchemeMetaTag(options: ColorSchemeMetaTagOptions): void;

package/dist/theme/useColorSchemeMetaTag.js

@@ -6,6 +6,19 @@ import { useEffect } from "react";
  * should not be used if you are using the `useColorSchemeProvider` since it is
  * already built in.
  *
+ * @example
+ * ```tsx
+ * import { useColorScheme } from "@react-md/core/theme/useColorScheme";
+ * import { useColorSchemeMetaTag } from "@react-md/core/theme/useColorSchemeMetaTag";
+ *
+ * function Example() {
+ *   const { currentColor } = useColorScheme();
+ *   useColorSchemeMetaTag({ colorScheme: currentColor });
+ *
+ *   return null;
+ * }
+ * ```
+ *
  * @since 6.0.0
  */ export function useColorSchemeMetaTag(options) {
     const { disabled, colorScheme } = options;

package/dist/theme/useColorSchemeMetaTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/useColorSchemeMetaTag.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\nimport { type ColorScheme } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ColorSchemeMetaTagOptions {\n  /**\n   * @defaultValue `\"false\"`\n   */\n  disabled?: boolean;\n  colorScheme: ColorScheme;\n}\n\n/**\n * Adds a `<meta name=\"color-scheme\" content=\"light\">` or\n * `<meta name=\"color-scheme\" content=\"dark\">` into the head element. This\n * should not be used if you are using the `useColorSchemeProvider` since it is\n * already built in.\n *\n * @since 6.0.0\n */\nexport function useColorSchemeMetaTag(\n  options: ColorSchemeMetaTagOptions\n): void {\n  const { disabled, colorScheme } = options;\n\n  useEffect(() => {\n    if (disabled || document.querySelector('meta[name=\"color-scheme\"]')) {\n      return;\n    }\n\n    // Adding the meta tag allows the default browser styles for form inputs to\n    // be updated as well.\n    //\n    // Chrome and Firefox:\n    // - the input type=\"number\"'s spinner color will update from grey to white\n    // - native `<select>` background color updates from grey/white to a dark color\n    //\n    // Chrome:\n    // - the date/time/datetime icons will change from black to white\n    // - the date/time/datetime pickers will use a darker theme instead of white\n    const meta = document.createElement(\"meta\");\n    meta.name = \"color-scheme\";\n    meta.content = colorScheme;\n    document.head.appendChild(meta);\n\n    return () => {\n      document.head.removeChild(meta);\n    };\n  }, [disabled, colorScheme]);\n}\n"],"names":["useEffect","useColorSchemeMetaTag","options","disabled","colorScheme","document","querySelector","meta","createElement","name","content","head","appendChild","removeChild"],"mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAclC;;;;;;;CAOC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGF;IAElCF,UAAU;QACR,IAAIG,YAAYE,SAASC,aAAa,CAAC,8BAA8B;YACnE;QACF;QAEA,2EAA2E;QAC3E,sBAAsB;QACtB,EAAE;QACF,sBAAsB;QACtB,2EAA2E;QAC3E,+EAA+E;QAC/E,EAAE;QACF,UAAU;QACV,iEAAiE;QACjE,4EAA4E;QAC5E,MAAMC,OAAOF,SAASG,aAAa,CAAC;QACpCD,KAAKE,IAAI,GAAG;QACZF,KAAKG,OAAO,GAAGN;QACfC,SAASM,IAAI,CAACC,WAAW,CAACL;QAE1B,OAAO;YACLF,SAASM,IAAI,CAACE,WAAW,CAACN;QAC5B;IACF,GAAG;QAACJ;QAAUC;KAAY;AAC5B"}
+{"version":3,"sources":["../../src/theme/useColorSchemeMetaTag.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\n\nimport { type LightDarkColorScheme } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ColorSchemeMetaTagOptions {\n  /**\n   * @defaultValue `\"false\"`\n   */\n  disabled?: boolean;\n  colorScheme: LightDarkColorScheme;\n}\n\n/**\n * Adds a `<meta name=\"color-scheme\" content=\"light\">` or\n * `<meta name=\"color-scheme\" content=\"dark\">` into the head element. This\n * should not be used if you are using the `useColorSchemeProvider` since it is\n * already built in.\n *\n * @example\n * ```tsx\n * import { useColorScheme } from \"@react-md/core/theme/useColorScheme\";\n * import { useColorSchemeMetaTag } from \"@react-md/core/theme/useColorSchemeMetaTag\";\n *\n * function Example() {\n *   const { currentColor } = useColorScheme();\n *   useColorSchemeMetaTag({ colorScheme: currentColor });\n *\n *   return null;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useColorSchemeMetaTag(\n  options: ColorSchemeMetaTagOptions\n): void {\n  const { disabled, colorScheme } = options;\n\n  useEffect(() => {\n    if (disabled || document.querySelector('meta[name=\"color-scheme\"]')) {\n      return;\n    }\n\n    // Adding the meta tag allows the default browser styles for form inputs to\n    // be updated as well.\n    //\n    // Chrome and Firefox:\n    // - the input type=\"number\"'s spinner color will update from grey to white\n    // - native `<select>` background color updates from grey/white to a dark color\n    //\n    // Chrome:\n    // - the date/time/datetime icons will change from black to white\n    // - the date/time/datetime pickers will use a darker theme instead of white\n    const meta = document.createElement(\"meta\");\n    meta.name = \"color-scheme\";\n    meta.content = colorScheme;\n    document.head.appendChild(meta);\n\n    return () => {\n      document.head.removeChild(meta);\n    };\n  }, [disabled, colorScheme]);\n}\n"],"names":["useEffect","useColorSchemeMetaTag","options","disabled","colorScheme","document","querySelector","meta","createElement","name","content","head","appendChild","removeChild"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAQ;AAelC;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGF;IAElCF,UAAU;QACR,IAAIG,YAAYE,SAASC,aAAa,CAAC,8BAA8B;YACnE;QACF;QAEA,2EAA2E;QAC3E,sBAAsB;QACtB,EAAE;QACF,sBAAsB;QACtB,2EAA2E;QAC3E,+EAA+E;QAC/E,EAAE;QACF,UAAU;QACV,iEAAiE;QACjE,4EAA4E;QAC5E,MAAMC,OAAOF,SAASG,aAAa,CAAC;QACpCD,KAAKE,IAAI,GAAG;QACZF,KAAKG,OAAO,GAAGN;QACfC,SAASM,IAAI,CAACC,WAAW,CAACL;QAE1B,OAAO;YACLF,SAASM,IAAI,CAACE,WAAW,CAACN;QAC5B;IACF,GAAG;QAACJ;QAAUC;KAAY;AAC5B"}

package/dist/theme/useColorSchemeProvider.d.ts

@@ -1,9 +1,9 @@
 import { type UseStateInitializer } from "../types.js";
-import { type ColorSchemeContext, type ColorSchemeMode, type ColorSchemeModeBehavior } from "./types.js";
+import { type ColorScheme, type ColorSchemeContext, type ColorSchemeState } from "./types.js";
 /**
  * @since 6.0.0
  */
-export interface ColorSchemeProviderOptions extends Partial<ColorSchemeModeBehavior> {
+export interface ColorSchemeProviderOptions extends Partial<ColorSchemeState> {
     /**
      * Set this to `true` to prevent a `<meta name="color-scheme" content="{COLOR_SCHEME}">`
      * from being added to the `document.head`.
@@ -12,56 +12,54 @@ export interface ColorSchemeProviderOptions extends Partial<ColorSchemeModeBehav
      */
     disableMetaTag?: boolean;
     /**
-     * The current color scheme mode that is being used by your app. This should
+     * The current color scheme that is being used by your app. This should
      * match the `$color-scheme` SCSS variable.
      *
      * @defaultValue `"light"`
      */
-    defaultColorSchemeMode?: UseStateInitializer<ColorSchemeMode>;
+    defaultColorScheme?: UseStateInitializer<ColorScheme>;
 }
 /**
  * @example
  * ```tsx
- * import {
- *   ColorSchemeProvider,
- *   useColorSchemeProvider,
- *   type ColorSchemeMode,
- * } from "@react-md/core";
+ * import { type ColorScheme } from "@react-md/core/theme/types";
+ * import { ColorSchemeProvider } from "@react-md/core/theme/useColorScheme";
+ * import { useColorSchemeProvider } from "@reat-md/core/theme/useColorSchemeProvider";
  * import { type PropsWithChildren, type ReactElement } from "react";
  * import Cookies from "js-cookie";
  *
  * function MyColorSchemeProvider(props: PropsWithChildren): ReactElement {
  *   const { children } = props;
  *
- *   const [colorSchemeMode, setColorSchemeMode] = useState<ColorSchemeMode>(
- *     () => Cookies.get("colorSchemeMode") || "system"
+ *   const [colorScheme, setColorScheme] = useState<ColorScheme>(
+ *     () => Cookies.get("colorScheme") || "system"
  *   );
  *   const value = useColorSchemeProvider({
- *     colorSchemeMode,
- *     setColorSchemeMode(nextValue) {
- *       setColorSchemeMode((prevValue) => {
+ *     colorScheme,
+ *     setColorScheme(nextValue) {
+ *       setColorScheme((prevValue) => {
  *         const value = typeof nextValue === "function"
  *           ? nextValue(prevValue)
  *           : nextValue;
  *
- *         Cookies.set("colorSchemeMode", value);
+ *         Cookies.set("colorScheme", value);
  *         return value;
  *       });
  *     }
  *   });
  *
- *   return <ColorSchemeProvider value={value}>{children}</ColorSchemeProvider>
+ *   return <ColorSchemeProvider value={value}>{children}</ColorSchemeProvider>;
  * }
  * ```
  * @since 6.0.0
  */
 export declare function useColorSchemeProvider(options?: {
-    [key in keyof ColorSchemeModeBehavior]?: never;
+    [key in keyof ColorSchemeState]?: never;
 } & {
     disableMetaTag?: boolean;
-    defaultColorSchemeMode?: UseStateInitializer<ColorSchemeMode>;
+    defaultColorScheme?: UseStateInitializer<ColorScheme>;
 }): ColorSchemeContext;
-export declare function useColorSchemeProvider(options: ColorSchemeModeBehavior & {
+export declare function useColorSchemeProvider(options: ColorSchemeState & {
     disableMetaTag?: boolean;
-    defaultColorSchemeMode?: never;
+    defaultColorScheme?: never;
 }): ColorSchemeContext;

package/dist/theme/useColorSchemeProvider.js

@@ -2,29 +2,29 @@
 import { useMemo } from "react";
 import { useEnsuredState } from "../useEnsuredState.js";
 import { useColorSchemeMetaTag } from "./useColorSchemeMetaTag.js";
-import { usePrefersDarkTheme } from "./usePrefersDarkScheme.js";
+import { usePrefersDarkTheme } from "./usePrefersDarkTheme.js";
 export function useColorSchemeProvider(options = {}) {
-    const { disableMetaTag, colorSchemeMode: value, setColorSchemeMode: setValue, defaultColorSchemeMode } = options;
-    const [colorSchemeMode, setColorSchemeMode] = useEnsuredState({
-        value,
-        setValue,
-        defaultValue: defaultColorSchemeMode
+    const { disableMetaTag, colorScheme: propColorScheme, setColorScheme: propSetColorScheme, defaultColorScheme } = options;
+    const [colorScheme, setColorScheme] = useEnsuredState({
+        value: propColorScheme,
+        setValue: propSetColorScheme,
+        defaultValue: defaultColorScheme
     });
-    const prefersDarkTheme = usePrefersDarkTheme(colorSchemeMode !== "system");
+    const prefersDarkTheme = usePrefersDarkTheme(colorScheme !== "system");
     const derivedColorScheme = prefersDarkTheme ? "dark" : "light";
-    const colorScheme = colorSchemeMode === "system" ? derivedColorScheme : colorSchemeMode;
+    const currentColor = colorScheme === "system" ? derivedColorScheme : colorScheme;
     useColorSchemeMetaTag({
         disabled: disableMetaTag,
-        colorScheme
+        colorScheme: currentColor
     });
     return useMemo(()=>({
+            currentColor,
             colorScheme,
-            colorSchemeMode,
-            setColorSchemeMode
+            setColorScheme
         }), [
+        currentColor,
         colorScheme,
-        colorSchemeMode,
-        setColorSchemeMode
+        setColorScheme
     ]);
 }
 

package/dist/theme/useColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/useColorSchemeProvider.ts"],"sourcesContent":["\"use client\";\nimport { useMemo } from \"react\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport {\n  type ColorSchemeContext,\n  type ColorSchemeMode,\n  type ColorSchemeModeBehavior,\n} from \"./types.js\";\nimport { useColorSchemeMetaTag } from \"./useColorSchemeMetaTag.js\";\nimport { usePrefersDarkTheme } from \"./usePrefersDarkScheme.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ColorSchemeProviderOptions\n  extends Partial<ColorSchemeModeBehavior> {\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 mode that is being used by your app. This should\n   * match the `$color-scheme` SCSS variable.\n   *\n   * @defaultValue `\"light\"`\n   */\n  defaultColorSchemeMode?: UseStateInitializer<ColorSchemeMode>;\n}\n\n/**\n * @example\n * ```tsx\n * import {\n *   ColorSchemeProvider,\n *   useColorSchemeProvider,\n *   type ColorSchemeMode,\n * } from \"@react-md/core\";\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 [colorSchemeMode, setColorSchemeMode] = useState<ColorSchemeMode>(\n *     () => Cookies.get(\"colorSchemeMode\") || \"system\"\n *   );\n *   const value = useColorSchemeProvider({\n *     colorSchemeMode,\n *     setColorSchemeMode(nextValue) {\n *       setColorSchemeMode((prevValue) => {\n *         const value = typeof nextValue === \"function\"\n *           ? nextValue(prevValue)\n *           : nextValue;\n *\n *         Cookies.set(\"colorSchemeMode\", 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 ColorSchemeModeBehavior]?: never } & {\n    disableMetaTag?: boolean;\n    defaultColorSchemeMode?: UseStateInitializer<ColorSchemeMode>;\n  }\n): ColorSchemeContext;\nexport function useColorSchemeProvider(\n  options: ColorSchemeModeBehavior & {\n    disableMetaTag?: boolean;\n    defaultColorSchemeMode?: never;\n  }\n): ColorSchemeContext;\nexport function useColorSchemeProvider(\n  options: ColorSchemeProviderOptions = {}\n): ColorSchemeContext {\n  const {\n    disableMetaTag,\n    colorSchemeMode: value,\n    setColorSchemeMode: setValue,\n    defaultColorSchemeMode,\n  } = options;\n\n  const [colorSchemeMode, setColorSchemeMode] = useEnsuredState({\n    value,\n    setValue,\n    defaultValue: defaultColorSchemeMode,\n  });\n  const prefersDarkTheme = usePrefersDarkTheme(colorSchemeMode !== \"system\");\n  const derivedColorScheme = prefersDarkTheme ? \"dark\" : \"light\";\n  const colorScheme =\n    colorSchemeMode === \"system\" ? derivedColorScheme : colorSchemeMode;\n\n  useColorSchemeMetaTag({\n    disabled: disableMetaTag,\n    colorScheme,\n  });\n\n  return useMemo<ColorSchemeContext>(\n    () => ({\n      colorScheme,\n      colorSchemeMode,\n      setColorSchemeMode,\n    }),\n    [colorScheme, colorSchemeMode, setColorSchemeMode]\n  );\n}\n"],"names":["useMemo","useEnsuredState","useColorSchemeMetaTag","usePrefersDarkTheme","useColorSchemeProvider","options","disableMetaTag","colorSchemeMode","value","setColorSchemeMode","setValue","defaultColorSchemeMode","defaultValue","prefersDarkTheme","derivedColorScheme","colorScheme","disabled"],"mappings":"AAAA;AACA,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAASC,eAAe,QAAQ,wBAAwB;AAMxD,SAASC,qBAAqB,QAAQ,6BAA6B;AACnE,SAASC,mBAAmB,QAAQ,4BAA4B;AAwEhE,OAAO,SAASC,uBACdC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,cAAc,EACdC,iBAAiBC,KAAK,EACtBC,oBAAoBC,QAAQ,EAC5BC,sBAAsB,EACvB,GAAGN;IAEJ,MAAM,CAACE,iBAAiBE,mBAAmB,GAAGR,gBAAgB;QAC5DO;QACAE;QACAE,cAAcD;IAChB;IACA,MAAME,mBAAmBV,oBAAoBI,oBAAoB;IACjE,MAAMO,qBAAqBD,mBAAmB,SAAS;IACvD,MAAME,cACJR,oBAAoB,WAAWO,qBAAqBP;IAEtDL,sBAAsB;QACpBc,UAAUV;QACVS;IACF;IAEA,OAAOf,QACL,IAAO,CAAA;YACLe;YACAR;YACAE;QACF,CAAA,GACA;QAACM;QAAaR;QAAiBE;KAAmB;AAEtD"}
+{"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"}

package/dist/theme/{usePrefersDarkScheme.js → usePrefersDarkTheme.js}

@@ -9,4 +9,4 @@ import { useMediaQuery } from "../media-queries/useMediaQuery.js";
     return useMediaQuery("(prefers-color-scheme: dark)", disabled);
 }
 
-//# sourceMappingURL=usePrefersDarkScheme.js.map
+//# sourceMappingURL=usePrefersDarkTheme.js.map

package/dist/theme/usePrefersDarkTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/usePrefersDarkTheme.ts"],"sourcesContent":["\"use client\";\n\nimport { useMediaQuery } from \"../media-queries/useMediaQuery.js\";\n\n/**\n * A simple wrapper around the {@link useMediaQuery} hook with:\n * `\"(prefers-color-scheme: dark)\"`.\n *\n * @since 6.0.0\n */\nexport function usePrefersDarkTheme(disabled = false): boolean {\n  return useMediaQuery(\"(prefers-color-scheme: dark)\", disabled);\n}\n"],"names":["useMediaQuery","usePrefersDarkTheme","disabled"],"mappings":"AAAA;AAEA,SAASA,aAAa,QAAQ,oCAAoC;AAElE;;;;;CAKC,GACD,OAAO,SAASC,oBAAoBC,WAAW,KAAK;IAClD,OAAOF,cAAc,gCAAgCE;AACvD"}

package/dist/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\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 \"./tooltipStyles.js\";\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, useTooltip, Tooltip } from \"@react-md/core\";\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 */\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;;AACA,SAASA,UAAU,QAA6B,QAAQ;AAExD,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,qBAAqB;AA+D7C;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,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 \"./tooltipStyles.js\";\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, useTooltip, Tooltip } from \"@react-md/core\";\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 */\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,qBAAqB;AA+D7C;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tooltip/TooltipHoverModeProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport {\n  createHoverModeContext,\n  useHoverModeProvider,\n  type HoverModeConfiguration,\n  type HoverModeContext,\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 * @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;;AACA,SACEA,aAAa,EACbC,UAAU,QAGL,QAAQ;AACf,SACEC,sBAAsB,EACtBC,oBAAoB,QAGf,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;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,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 * @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;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,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"}

package/dist/tooltip/tooltipStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tooltip/tooltipStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type TextOverflow } from \"../cssUtils.js\";\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tooltip\");\n\n/**\n * @since 6.0.0\n */\nexport interface TooltipClassNameOptions {\n  className?: string;\n  dense?: boolean;\n  position: SimplePosition;\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tooltip(options: TooltipClassNameOptions): string {\n  const { dense, position, className, textOverflow } = options;\n\n  return cnb(\n    styles({\n      dense,\n      [position]: true,\n    }),\n    cssUtils({ textOverflow }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","tooltip","options","dense","position","className","textOverflow"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAA2B,iBAAiB;AAE7D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;CAEC,GACD,OAAO,SAASE,QAAQC,OAAgC;IACtD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IAErD,OAAOL,IACLG,OAAO;QACLG;QACA,CAACC,SAAS,EAAE;IACd,IACAN,SAAS;QAAEQ;IAAa,IACxBD;AAEJ"}
+{"version":3,"sources":["../../src/tooltip/tooltipStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { type TextOverflow, cssUtils } from \"../cssUtils.js\";\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tooltip\");\n\n/**\n * @since 6.0.0\n */\nexport interface TooltipClassNameOptions {\n  className?: string;\n  dense?: boolean;\n  position: SimplePosition;\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tooltip(options: TooltipClassNameOptions): string {\n  const { dense, position, className, textOverflow } = options;\n\n  return cnb(\n    styles({\n      dense,\n      [position]: true,\n    }),\n    cssUtils({ textOverflow }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","tooltip","options","dense","position","className","textOverflow"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAA4BC,QAAQ,QAAQ,iBAAiB;AAE7D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;CAEC,GACD,OAAO,SAASE,QAAQC,OAAgC;IACtD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IAErD,OAAOL,IACLG,OAAO;QACLG;QACA,CAACC,SAAS,EAAE;IACd,IACAN,SAAS;QAAEQ;IAAa,IACxBD;AAEJ"}

package/dist/tooltip/useTooltip.d.ts

@@ -109,8 +109,11 @@ export interface TooltipOptions<TooltippedElement extends HTMLElement = HTMLButt
      *
      * @example Real World Example
      * ```tsx
-     * import { Button, ButtonProps, Tooltip, useTooltip  } from "@react-md/core";
-     * import type { ReactElement, ReactNode } from "react";
+     * // This is _almost_ the source code for the `TooltippedButton` provided by react-md
+     * import { Button } from "@react-md/core/button/Button";
+     * import { Tooltip } from "@react-md/core/tooltip/Tooltip";
+     * import { useTooltip } from "@react-md/core/tooltip/useTooltip";
+     * import { type ReactElement, type ReactNode } from "react";
      *
      * export interface TooltippedButtonProps extends ButtonProps {
      *   tooltip?: ReactNode;

package/dist/tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tooltip/useTooltip.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  type CSSProperties,\n  type FocusEvent,\n  type MouseEvent,\n  type MutableRefObject,\n  type Ref,\n  type RefObject,\n  type TouchEvent,\n} from \"react\";\nimport {\n  useHoverMode,\n  type ControlledHoverModeImplementation,\n} from \"../hoverMode/useHoverMode.js\";\nimport {\n  useUserInteractionMode,\n  type UserInteractionMode,\n} from \"../interaction/UserInteractionModeProvider.js\";\nimport { type SimplePosition } from \"../positioning/types.js\";\nimport {\n  useFixedPositioning,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type FixedPositioningOptions,\n  type FixedPositioningTransitionCallbacks,\n} from \"../positioning/useFixedPositioning.js\";\nimport { type UseStateSetter } from \"../types.js\";\nimport { usePageInactive } from \"../usePageInactive.js\";\nimport { parseCssLengthUnit } from \"../utils/parseCssLengthUnit.js\";\nimport { useTooltipHoverMode } from \"./TooltipHoverModeProvider.js\";\nimport {\n  DEFAULT_TOOLTIP_DENSE_SPACING,\n  DEFAULT_TOOLTIP_MARGIN,\n  DEFAULT_TOOLTIP_POSITION,\n  DEFAULT_TOOLTIP_SPACING,\n  DEFAULT_TOOLTIP_THRESHOLD,\n  TOOLTIP_SPACING_VAR,\n} from \"./constants.js\";\nimport {\n  useTooltipPosition,\n  type TooltipPositionHookOptions,\n} from \"./useTooltipPosition.js\";\nimport { getAnchor } from \"./utils.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\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 2.8.0 */\nexport interface TooltipPositioningOptions {\n  style?: CSSProperties;\n\n  /**\n   * @see {@link FixedPositioningOptions.vwMargin}\n   * @defaultValue `16`\n   */\n  vwMargin?: number;\n\n  /**\n   * @see {@link FixedPositioningOptions.vhMargin}\n   * @defaultValue `16`\n   */\n  vhMargin?: number;\n\n  /**\n   * Set this to `true` to reduce the font size and padding on the tooltip and\n   * the amount of spacing between the tooltipped element and the tooltip.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * The amount of spacing to use between the tooltipped element and the tooltip\n   * when {@link disableAutoSpacing} is `false`.\n   *\n   * @defaultValue `\"1.5rem`\n   */\n  spacing?: number | string;\n\n  /**\n   * The amount of spacing to use between the tooltipped element and the tooltip\n   * when {@link disableAutoSpacing} is `false` and {@link dense} is `true`.\n   *\n   * @defaultValue `\"0.875rem`\n   */\n  denseSpacing?: number | string;\n\n  /**\n   * Set this to `true` to prevent the {@link defaultPosition} to swap to the\n   * other side of the tooltipped element when it is too close to the viewport\n   * edge. This will always be `true` if a {@link position} is provided.\n   *\n   * @defaultValue `false`\n   */\n  disableSwapping?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableAutoSpacing?: boolean;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Removed the `TooltipTouchEventHandlers` and\n * `TooltipKeyboardEventHandlers` types, removed the need for the `onKeyDown`\n * event.\n */\nexport interface TooltippedElementEventHandlers<\n  E extends HTMLElement = HTMLButtonElement,\n> {\n  onBlur?: (event: FocusEvent<E>) => void;\n  onFocus?: (event: FocusEvent<E>) => void;\n  onMouseEnter?: (event: MouseEvent<E>) => void;\n  onMouseLeave?: (event: MouseEvent<E>) => void;\n  onTouchStart?: (event: TouchEvent<E>) => void;\n  onTouchEnd?: (event: TouchEvent<E>) => void;\n  onContextMenu?: (event: MouseEvent<E>) => void;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Renamed from `TooltipHookProvidedElementProps`\n */\nexport interface ProvidedTooltippedElementProps<E extends HTMLElement>\n  extends Required<TooltippedElementEventHandlers<E>> {\n  \"aria-describedby\": string | undefined;\n  id: string;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 A major API change for the hover mode behavior and no longer\n * requires a `baseId`/`id` for the tooltip. Also renamed from\n * `TooltipHookOptions` to `TooltipOptions` to match other hook naming\n * conventions.\n */\nexport interface TooltipOptions<\n  TooltippedElement extends HTMLElement = HTMLButtonElement,\n> extends FixedPositioningTransitionCallbacks,\n    TooltippedElementEventHandlers<TooltippedElement>,\n    TooltipPositioningOptions,\n    TooltipPositionHookOptions {\n  /**\n   * @defaultValue `\"tooltip-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional override for the `aria-describedby`\n   */\n  describedBy?: string;\n\n  /**\n   * Any styles to be merged with the fixed positioning styles for the tooltip.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the event handlers should no longer attempt to show a tooltip. This\n   * should be set to `true` when your component might not have a tooltip associated\n   * with it.\n   *\n   * @example Real World Example\n   * ```tsx\n   * import { Button, ButtonProps, Tooltip, useTooltip  } from \"@react-md/core\";\n   * import type { ReactElement, ReactNode } from \"react\";\n   *\n   * export interface TooltippedButtonProps extends ButtonProps {\n   *   tooltip?: ReactNode;\n   * }\n   *\n   * export function TooltippedButton({\n   *   id,\n   *   tooltip,\n   *   children,\n   *   onBlur,\n   *   onFocus,\n   *   onMouseEnter,\n   *   onMouseLeave,\n   *   onTouchStart,\n   *   onTouchEnd,\n   *   onContextMenu,\n   *   ...props\n   * }: TooltippedButtonProps): ReactElement {\n   *   const { elementProps, tooltipProps } = useTooltip({\n   *     id,\n   *     disabled: !tooltip,\n   *     onBlur,\n   *     onFocus,\n   *     onMouseEnter,\n   *     onMouseLeave,\n   *     onTouchStart,\n   *     onTouchEnd,\n   *     onContextMenu,\n   *   });\n   *\n   *   return (\n   *     <>\n   *       <Button {...props} {...elementProps}>\n   *         {children}\n   *       </Button>\n   *       <Tooltip {...tooltipProps}>{tooltip}</Tooltip>\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `false`\n   * @since 5.1.0\n   */\n  disabled?: boolean;\n\n  /**\n   * The amount of time (in ms) to hover an element before the tooltip becomes\n   * visible.\n   *\n   * The default value is really the current hover timeout from the\n   * `TooltipHoverModeProvider`.\n   *\n   * @defaultValue `1000`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * The amount of time to wait before triggering the exit animation for the\n   * tooltip.\n   *\n   * The default value is really the current leaveTimeout timeout from the\n   * `TooltipHoverModeProvider`.\n   *\n   * @defaultValue `0`\n   */\n  leaveTimeout?: number;\n\n  /**\n   * Set this to `true` to only allow the tooltip to become visible when the\n   * `event .currentTarget` or `overflowRef` has text overflow.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  overflowOnly?: boolean;\n\n  /**\n   * @see {@link FixedPositioningOptions.disabled}\n   * @defaultValue `false`\n   */\n  disableFixedPositioning?: boolean;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 This was renamed from `TooltipHookProvidedTooltipProps`\n */\nexport interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>\n  extends Required<FixedPositioningTransitionCallbacks> {\n  id: string;\n  ref: Ref<E>;\n  dense: boolean;\n  style: CSSProperties | undefined;\n  visible: boolean;\n  position: SimplePosition;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 No longer returns any properties from the hover mode provider\n * because of the major API change to hover mode.. Also renamed from\n * `TooltipHookReturnValue` to `TooltipImplementation` to match other hook\n * naming conventions.\n */\nexport interface TooltipImplementation<\n  TooltippedElement extends HTMLElement = HTMLButtonElement,\n  TooltipElement extends HTMLElement = HTMLSpanElement,\n> extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n  animatedOnce: boolean;\n  initiatedBy: MutableRefObject<UserInteractionMode | null>;\n  elementProps: ProvidedTooltippedElementProps<TooltippedElement>;\n  tooltipProps: ProvidedTooltipProps<TooltipElement>;\n\n  /**\n   * This is a wrapper around the {@link setVisible} behavior that will also\n   * clear any pending timeouts.\n   */\n  hideTooltip: () => void;\n\n  /**\n   * @since 6.0.0\n   */\n  overflowRef: RefObject<HTMLElement>;\n}\n\n/**\n * @example Simple Usage\n * ```tsx\n * import { Button, useTooltip, Tooltip } from \"@react-md/core\";\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 * @example Overflow-only Tooltips\n * ```tsx\n * import {\n *   cssUtils,\n *   Link,\n *   Tooltip,\n *   useTooltip,\n *   type LinkProps,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function NavigationLink(props: LinkProps): ReactElement {\n *   const { children, ...remaining } = props;\n *\n *   // using the `overflowRef` is optional and will default to the\n *   // `event.currentTarget` when `null`\n *   const { overflowRef, elementProps, tooltipProps } = useOverflowTooltip({\n *     // just to pass any event handlers\n *     ...remaining,\n *     overflowOnly: true,\n *   });\n *\n *   return (\n *     <Link {...remaining} {...elementProps} style={{ width: \"100%\" }}>\n *       <span ref={overflowRef} className={cssUtils({ textOverflow: \"ellipsis\" })}>\n *         {children}\n *       </span>\n *       <Tooltip {...tooltipProps}>\n *         {children}\n *       </Tooltip>\n *     </Link>\n *   );\n * }\n *\n * function Example(): ReactElement {\n *   return (\n *     <div style={{ width: \"10rem\", overflow: \"auto\" }}>\n *       <NavigationLink href=\"/\">Home</NavigationLink>\n *       <NavigationLink href=\"/some-path\">\n *         Super long text that will be truncated with ellipsis and\n *         have a tooltip appear\n *       </NavigationLink>\n *     </div>\n *   );\n * }\n * ```\n *\n * ## Inspecting Tooltip Styles\n *\n * Since tooltips will disappear on blur, mouseleave, etc, it is a bit hard to\n * inspect the tooltip styles. In dev mode, you can manually set the visibility\n * to `true` through the dev tools.\n * - find your tooltip implementation\n * - expand the Tooltip hook\n * - expand the HoverMode hook\n * - set the first boolean state to `true`\n *\n * The tooltip will now remain visible allowing you to find it within the\n * \"Inspector\" tab in the dev tools.\n *\n * @since 2.8.0\n * @since 6.0.0 Uses a separate `TooltipHoverModeProvider`.\n *\n * TODO: I need to fix the tooltip for click events and history changes since\n * the mouseleave event will not be correctly bubbled if hovering a child\n * element when the click or history update happens. this causes the tooltip to\n * stay visible\n */\nexport function useTooltip<\n  TooltippedElement extends HTMLElement = HTMLButtonElement,\n  TooltipElement extends HTMLElement = HTMLSpanElement,\n>(\n  options: TooltipOptions<TooltippedElement> = {}\n): TooltipImplementation<TooltippedElement, TooltipElement> {\n  const {\n    id: propId,\n    style: propStyle,\n    disabled = false,\n    describedBy,\n    dense = false,\n    hoverTimeout,\n    leaveTimeout,\n    vwMargin = DEFAULT_TOOLTIP_MARGIN,\n    vhMargin = DEFAULT_TOOLTIP_MARGIN,\n    spacing = DEFAULT_TOOLTIP_SPACING,\n    denseSpacing = DEFAULT_TOOLTIP_DENSE_SPACING,\n    disableSwapping,\n    disableAutoSpacing,\n    position: determinedPosition,\n    defaultPosition = DEFAULT_TOOLTIP_POSITION,\n    threshold = DEFAULT_TOOLTIP_THRESHOLD,\n    onBlur = noop,\n    onFocus = noop,\n    onMouseEnter = noop,\n    onMouseLeave = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onContextMenu = noop,\n    onEnter = noop,\n    onEntering,\n    onEntered = noop,\n    onExited,\n    overflowOnly,\n    disableFixedPositioning,\n  } = options;\n\n  const fallbackId = useId();\n  const id = propId || fallbackId;\n  const tooltipId = `${id}-tooltip`;\n  const {\n    animatedOnceRef,\n    hoverTimeoutRef,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n  } = useTooltipHoverMode();\n  const {\n    visible,\n    setVisible,\n    startShowFlow,\n    startHideFlow,\n    clearVisibilityTimeout,\n  } = useHoverMode({\n    hoverTimeout,\n    hoverTimeoutRef,\n    leaveTimeout,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n  });\n  const [position, updatePosition] = useTooltipPosition({\n    position: determinedPosition,\n    defaultPosition,\n    threshold,\n  });\n\n  const mode = useUserInteractionMode();\n  const elementRef = useRef<HTMLElement | null>(null);\n  const tooltipRef = useRef<TooltipElement>(null);\n  const overflowRef = useRef<HTMLElement>(null);\n  const initiatedBy = useRef<UserInteractionMode | null>(null);\n  const { ref, style, callbacks } = useFixedPositioning({\n    nodeRef: tooltipRef,\n    style: propStyle,\n    fixedTo: elementRef,\n    anchor: getAnchor(position),\n    disableSwapping: disableSwapping ?? !!determinedPosition,\n    disabled: disableFixedPositioning,\n    getFixedPositionOptions() {\n      let tooltipSpacing = dense ? denseSpacing : spacing;\n      const tooltip = tooltipRef.current;\n      if (!disableAutoSpacing && tooltip) {\n        tooltipSpacing =\n          window\n            .getComputedStyle(tooltip)\n            .getPropertyValue(TOOLTIP_SPACING_VAR) || spacing;\n      }\n\n      const currentSpacing = parseCssLengthUnit({\n        value: tooltipSpacing,\n      });\n      const horizontal = position === \"left\" || position === \"right\";\n\n      return {\n        vwMargin,\n        vhMargin,\n        xMargin: horizontal ? currentSpacing : undefined,\n        yMargin: horizontal ? undefined : currentSpacing,\n      };\n    },\n    onEnter(appearing) {\n      onEnter(appearing);\n\n      // This allows you to inspect the tooltip styles through the element\n      // inspector without first hovering or focusing the tooltipped element\n      // beforehand by setting the `HoverMode` hook to `true`\n      if (process.env.NODE_ENV !== \"production\" && !elementRef.current) {\n        elementRef.current = document.getElementById(id);\n      }\n    },\n    onEntering,\n    onEntered(appearing) {\n      onEntered(appearing);\n\n      animatedOnceRef.current = true;\n    },\n    onExited,\n  });\n\n  const hideTooltip = useCallback(() => {\n    initiatedBy.current = null;\n    disableHoverMode();\n    clearVisibilityTimeout();\n    setVisible(false);\n  }, [clearVisibilityTimeout, disableHoverMode, setVisible]);\n\n  useEffect(() => {\n    if (!visible) {\n      return;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") {\n        hideTooltip();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    window.addEventListener(\"scroll\", hideTooltip, true);\n    window.addEventListener(\"touchend\", hideTooltip, true);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n      window.removeEventListener(\"scroll\", hideTooltip, true);\n      window.removeEventListener(\"touchend\", hideTooltip, true);\n    };\n  }, [hideTooltip, visible]);\n\n  const refocusFrame = useRef(0);\n  const pageInactive = useRef(false);\n  usePageInactive({\n    disabled,\n    onDisabledCleanup: hideTooltip,\n    onChange(active) {\n      if (active) {\n        refocusFrame.current = window.requestAnimationFrame(() => {\n          pageInactive.current = false;\n        });\n        return;\n      }\n\n      pageInactive.current = true;\n      hideTooltip();\n    },\n  });\n\n  const isNotOverflown = (currentTarget: HTMLElement): boolean => {\n    if (!overflowOnly) {\n      return false;\n    }\n\n    const element = overflowRef.current || currentTarget;\n    return !element || element.offsetWidth >= element.scrollWidth;\n  };\n\n  return {\n    visible,\n    setVisible,\n    hideTooltip,\n    animatedOnce: animatedOnceRef.current,\n    initiatedBy,\n    overflowRef,\n    startShowFlow,\n    startHideFlow,\n    clearVisibilityTimeout,\n    tooltipProps: {\n      id: tooltipId,\n      ref,\n      dense,\n      style,\n      visible,\n      position,\n      ...callbacks,\n    },\n    elementProps: {\n      \"aria-describedby\": cnb(visible && tooltipId, describedBy) || undefined,\n      id,\n      onMouseEnter(event) {\n        onMouseEnter(event);\n        if (\n          disabled ||\n          mode === \"touch\" ||\n          initiatedBy.current !== null ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          return;\n        }\n\n        initiatedBy.current = \"mouse\";\n        elementRef.current = event.currentTarget;\n        updatePosition(event.currentTarget);\n        startShowFlow(id);\n      },\n      onMouseLeave(event) {\n        onMouseLeave(event);\n        if (disabled || initiatedBy.current !== \"mouse\") {\n          return;\n        }\n\n        startHideFlow();\n        initiatedBy.current = null;\n      },\n      onBlur(event) {\n        onBlur(event);\n        if (disabled) {\n          return;\n        }\n\n        initiatedBy.current = null;\n        startHideFlow();\n      },\n      onFocus(event) {\n        onFocus(event);\n        // skip the focus events when the browser is re-focused if the user\n        // pressed alt-tab, minimized the browser, etc\n        if (\n          disabled ||\n          mode !== \"keyboard\" ||\n          initiatedBy.current !== null ||\n          pageInactive.current ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          pageInactive.current = false;\n          return;\n        }\n\n        initiatedBy.current = \"keyboard\";\n        elementRef.current = event.currentTarget;\n        updatePosition(event.currentTarget);\n        startShowFlow(id);\n      },\n      onTouchStart(event) {\n        onTouchStart(event);\n        if (\n          disabled ||\n          initiatedBy.current !== null ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          return;\n        }\n\n        initiatedBy.current = \"touch\";\n        elementRef.current = event.currentTarget;\n        updatePosition(event.currentTarget);\n        startShowFlow(id);\n      },\n      onTouchEnd(event) {\n        onTouchEnd(event);\n        if (disabled) {\n          return;\n        }\n\n        initiatedBy.current = null;\n        startHideFlow();\n      },\n      onContextMenu(event) {\n        onContextMenu(event);\n        if (\n          disabled ||\n          initiatedBy.current !== \"touch\" ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          return;\n        }\n\n        event.preventDefault();\n        const selection = window.getSelection();\n        const node = selection?.anchorNode?.parentElement;\n        if (node && event.currentTarget.contains(node)) {\n          selection.empty();\n        }\n      },\n    },\n  };\n}\n"],"names":["cnb","useCallback","useEffect","useId","useRef","useHoverMode","useUserInteractionMode","useFixedPositioning","usePageInactive","parseCssLengthUnit","useTooltipHoverMode","DEFAULT_TOOLTIP_DENSE_SPACING","DEFAULT_TOOLTIP_MARGIN","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_SPACING","DEFAULT_TOOLTIP_THRESHOLD","TOOLTIP_SPACING_VAR","useTooltipPosition","getAnchor","noop","useTooltip","options","id","propId","style","propStyle","disabled","describedBy","dense","hoverTimeout","leaveTimeout","vwMargin","vhMargin","spacing","denseSpacing","disableSwapping","disableAutoSpacing","position","determinedPosition","defaultPosition","threshold","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","onEnter","onEntering","onEntered","onExited","overflowOnly","disableFixedPositioning","fallbackId","tooltipId","animatedOnceRef","hoverTimeoutRef","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","visible","setVisible","startShowFlow","startHideFlow","clearVisibilityTimeout","updatePosition","mode","elementRef","tooltipRef","overflowRef","initiatedBy","ref","callbacks","nodeRef","fixedTo","anchor","getFixedPositionOptions","tooltipSpacing","tooltip","current","window","getComputedStyle","getPropertyValue","currentSpacing","value","horizontal","xMargin","undefined","yMargin","appearing","process","env","NODE_ENV","document","getElementById","hideTooltip","handleKeyDown","event","key","addEventListener","removeEventListener","refocusFrame","pageInactive","onDisabledCleanup","onChange","active","requestAnimationFrame","isNotOverflown","currentTarget","element","offsetWidth","scrollWidth","animatedOnce","tooltipProps","elementProps","preventDefault","selection","getSelection","node","anchorNode","parentElement","contains","empty"],"mappings":"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"}
+{"version":3,"sources":["../../src/tooltip/useTooltip.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type FocusEvent,\n  type MouseEvent,\n  type MutableRefObject,\n  type Ref,\n  type RefObject,\n  type TouchEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from \"react\";\n\nimport {\n  type ControlledHoverModeImplementation,\n  useHoverMode,\n} from \"../hoverMode/useHoverMode.js\";\nimport {\n  type UserInteractionMode,\n  useUserInteractionMode,\n} from \"../interaction/UserInteractionModeProvider.js\";\nimport { type SimplePosition } from \"../positioning/types.js\";\nimport {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type FixedPositioningOptions,\n  type FixedPositioningTransitionCallbacks,\n  useFixedPositioning,\n} from \"../positioning/useFixedPositioning.js\";\nimport { type UseStateSetter } from \"../types.js\";\nimport { usePageInactive } from \"../usePageInactive.js\";\nimport { parseCssLengthUnit } from \"../utils/parseCssLengthUnit.js\";\nimport { useTooltipHoverMode } from \"./TooltipHoverModeProvider.js\";\nimport {\n  DEFAULT_TOOLTIP_DENSE_SPACING,\n  DEFAULT_TOOLTIP_MARGIN,\n  DEFAULT_TOOLTIP_POSITION,\n  DEFAULT_TOOLTIP_SPACING,\n  DEFAULT_TOOLTIP_THRESHOLD,\n  TOOLTIP_SPACING_VAR,\n} from \"./constants.js\";\nimport {\n  type TooltipPositionHookOptions,\n  useTooltipPosition,\n} from \"./useTooltipPosition.js\";\nimport { getAnchor } from \"./utils.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\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 2.8.0 */\nexport interface TooltipPositioningOptions {\n  style?: CSSProperties;\n\n  /**\n   * @see {@link FixedPositioningOptions.vwMargin}\n   * @defaultValue `16`\n   */\n  vwMargin?: number;\n\n  /**\n   * @see {@link FixedPositioningOptions.vhMargin}\n   * @defaultValue `16`\n   */\n  vhMargin?: number;\n\n  /**\n   * Set this to `true` to reduce the font size and padding on the tooltip and\n   * the amount of spacing between the tooltipped element and the tooltip.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * The amount of spacing to use between the tooltipped element and the tooltip\n   * when {@link disableAutoSpacing} is `false`.\n   *\n   * @defaultValue `\"1.5rem`\n   */\n  spacing?: number | string;\n\n  /**\n   * The amount of spacing to use between the tooltipped element and the tooltip\n   * when {@link disableAutoSpacing} is `false` and {@link dense} is `true`.\n   *\n   * @defaultValue `\"0.875rem`\n   */\n  denseSpacing?: number | string;\n\n  /**\n   * Set this to `true` to prevent the {@link defaultPosition} to swap to the\n   * other side of the tooltipped element when it is too close to the viewport\n   * edge. This will always be `true` if a {@link position} is provided.\n   *\n   * @defaultValue `false`\n   */\n  disableSwapping?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableAutoSpacing?: boolean;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Removed the `TooltipTouchEventHandlers` and\n * `TooltipKeyboardEventHandlers` types, removed the need for the `onKeyDown`\n * event.\n */\nexport interface TooltippedElementEventHandlers<\n  E extends HTMLElement = HTMLButtonElement,\n> {\n  onBlur?: (event: FocusEvent<E>) => void;\n  onFocus?: (event: FocusEvent<E>) => void;\n  onMouseEnter?: (event: MouseEvent<E>) => void;\n  onMouseLeave?: (event: MouseEvent<E>) => void;\n  onTouchStart?: (event: TouchEvent<E>) => void;\n  onTouchEnd?: (event: TouchEvent<E>) => void;\n  onContextMenu?: (event: MouseEvent<E>) => void;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Renamed from `TooltipHookProvidedElementProps`\n */\nexport interface ProvidedTooltippedElementProps<E extends HTMLElement>\n  extends Required<TooltippedElementEventHandlers<E>> {\n  \"aria-describedby\": string | undefined;\n  id: string;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 A major API change for the hover mode behavior and no longer\n * requires a `baseId`/`id` for the tooltip. Also renamed from\n * `TooltipHookOptions` to `TooltipOptions` to match other hook naming\n * conventions.\n */\nexport interface TooltipOptions<\n  TooltippedElement extends HTMLElement = HTMLButtonElement,\n> extends FixedPositioningTransitionCallbacks,\n    TooltippedElementEventHandlers<TooltippedElement>,\n    TooltipPositioningOptions,\n    TooltipPositionHookOptions {\n  /**\n   * @defaultValue `\"tooltip-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional override for the `aria-describedby`\n   */\n  describedBy?: string;\n\n  /**\n   * Any styles to be merged with the fixed positioning styles for the tooltip.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the event handlers should no longer attempt to show a tooltip. This\n   * should be set to `true` when your component might not have a tooltip associated\n   * with it.\n   *\n   * @example Real World Example\n   * ```tsx\n   * // This is _almost_ the source code for the `TooltippedButton` provided by react-md\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   * import { type ReactElement, type ReactNode } from \"react\";\n   *\n   * export interface TooltippedButtonProps extends ButtonProps {\n   *   tooltip?: ReactNode;\n   * }\n   *\n   * export function TooltippedButton({\n   *   id,\n   *   tooltip,\n   *   children,\n   *   onBlur,\n   *   onFocus,\n   *   onMouseEnter,\n   *   onMouseLeave,\n   *   onTouchStart,\n   *   onTouchEnd,\n   *   onContextMenu,\n   *   ...props\n   * }: TooltippedButtonProps): ReactElement {\n   *   const { elementProps, tooltipProps } = useTooltip({\n   *     id,\n   *     disabled: !tooltip,\n   *     onBlur,\n   *     onFocus,\n   *     onMouseEnter,\n   *     onMouseLeave,\n   *     onTouchStart,\n   *     onTouchEnd,\n   *     onContextMenu,\n   *   });\n   *\n   *   return (\n   *     <>\n   *       <Button {...props} {...elementProps}>\n   *         {children}\n   *       </Button>\n   *       <Tooltip {...tooltipProps}>{tooltip}</Tooltip>\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `false`\n   * @since 5.1.0\n   */\n  disabled?: boolean;\n\n  /**\n   * The amount of time (in ms) to hover an element before the tooltip becomes\n   * visible.\n   *\n   * The default value is really the current hover timeout from the\n   * `TooltipHoverModeProvider`.\n   *\n   * @defaultValue `1000`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * The amount of time to wait before triggering the exit animation for the\n   * tooltip.\n   *\n   * The default value is really the current leaveTimeout timeout from the\n   * `TooltipHoverModeProvider`.\n   *\n   * @defaultValue `0`\n   */\n  leaveTimeout?: number;\n\n  /**\n   * Set this to `true` to only allow the tooltip to become visible when the\n   * `event .currentTarget` or `overflowRef` has text overflow.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  overflowOnly?: boolean;\n\n  /**\n   * @see {@link FixedPositioningOptions.disabled}\n   * @defaultValue `false`\n   */\n  disableFixedPositioning?: boolean;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 This was renamed from `TooltipHookProvidedTooltipProps`\n */\nexport interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>\n  extends Required<FixedPositioningTransitionCallbacks> {\n  id: string;\n  ref: Ref<E>;\n  dense: boolean;\n  style: CSSProperties | undefined;\n  visible: boolean;\n  position: SimplePosition;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 No longer returns any properties from the hover mode provider\n * because of the major API change to hover mode.. Also renamed from\n * `TooltipHookReturnValue` to `TooltipImplementation` to match other hook\n * naming conventions.\n */\nexport interface TooltipImplementation<\n  TooltippedElement extends HTMLElement = HTMLButtonElement,\n  TooltipElement extends HTMLElement = HTMLSpanElement,\n> extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n  animatedOnce: boolean;\n  initiatedBy: MutableRefObject<UserInteractionMode | null>;\n  elementProps: ProvidedTooltippedElementProps<TooltippedElement>;\n  tooltipProps: ProvidedTooltipProps<TooltipElement>;\n\n  /**\n   * This is a wrapper around the {@link setVisible} behavior that will also\n   * clear any pending timeouts.\n   */\n  hideTooltip: () => void;\n\n  /**\n   * @since 6.0.0\n   */\n  overflowRef: RefObject<HTMLElement>;\n}\n\n/**\n * @example Simple Usage\n * ```tsx\n * import { Button, useTooltip, Tooltip } from \"@react-md/core\";\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 * @example Overflow-only Tooltips\n * ```tsx\n * import {\n *   cssUtils,\n *   Link,\n *   Tooltip,\n *   useTooltip,\n *   type LinkProps,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function NavigationLink(props: LinkProps): ReactElement {\n *   const { children, ...remaining } = props;\n *\n *   // using the `overflowRef` is optional and will default to the\n *   // `event.currentTarget` when `null`\n *   const { overflowRef, elementProps, tooltipProps } = useOverflowTooltip({\n *     // just to pass any event handlers\n *     ...remaining,\n *     overflowOnly: true,\n *   });\n *\n *   return (\n *     <Link {...remaining} {...elementProps} style={{ width: \"100%\" }}>\n *       <span ref={overflowRef} className={cssUtils({ textOverflow: \"ellipsis\" })}>\n *         {children}\n *       </span>\n *       <Tooltip {...tooltipProps}>\n *         {children}\n *       </Tooltip>\n *     </Link>\n *   );\n * }\n *\n * function Example(): ReactElement {\n *   return (\n *     <div style={{ width: \"10rem\", overflow: \"auto\" }}>\n *       <NavigationLink href=\"/\">Home</NavigationLink>\n *       <NavigationLink href=\"/some-path\">\n *         Super long text that will be truncated with ellipsis and\n *         have a tooltip appear\n *       </NavigationLink>\n *     </div>\n *   );\n * }\n * ```\n *\n * ## Inspecting Tooltip Styles\n *\n * Since tooltips will disappear on blur, mouseleave, etc, it is a bit hard to\n * inspect the tooltip styles. In dev mode, you can manually set the visibility\n * to `true` through the dev tools.\n * - find your tooltip implementation\n * - expand the Tooltip hook\n * - expand the HoverMode hook\n * - set the first boolean state to `true`\n *\n * The tooltip will now remain visible allowing you to find it within the\n * \"Inspector\" tab in the dev tools.\n *\n * @since 2.8.0\n * @since 6.0.0 Uses a separate `TooltipHoverModeProvider`.\n *\n * TODO: I need to fix the tooltip for click events and history changes since\n * the mouseleave event will not be correctly bubbled if hovering a child\n * element when the click or history update happens. this causes the tooltip to\n * stay visible\n */\nexport function useTooltip<\n  TooltippedElement extends HTMLElement = HTMLButtonElement,\n  TooltipElement extends HTMLElement = HTMLSpanElement,\n>(\n  options: TooltipOptions<TooltippedElement> = {}\n): TooltipImplementation<TooltippedElement, TooltipElement> {\n  const {\n    id: propId,\n    style: propStyle,\n    disabled = false,\n    describedBy,\n    dense = false,\n    hoverTimeout,\n    leaveTimeout,\n    vwMargin = DEFAULT_TOOLTIP_MARGIN,\n    vhMargin = DEFAULT_TOOLTIP_MARGIN,\n    spacing = DEFAULT_TOOLTIP_SPACING,\n    denseSpacing = DEFAULT_TOOLTIP_DENSE_SPACING,\n    disableSwapping,\n    disableAutoSpacing,\n    position: determinedPosition,\n    defaultPosition = DEFAULT_TOOLTIP_POSITION,\n    threshold = DEFAULT_TOOLTIP_THRESHOLD,\n    onBlur = noop,\n    onFocus = noop,\n    onMouseEnter = noop,\n    onMouseLeave = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onContextMenu = noop,\n    onEnter = noop,\n    onEntering,\n    onEntered = noop,\n    onExited,\n    overflowOnly,\n    disableFixedPositioning,\n  } = options;\n\n  const fallbackId = useId();\n  const id = propId || fallbackId;\n  const tooltipId = `${id}-tooltip`;\n  const {\n    animatedOnceRef,\n    hoverTimeoutRef,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n  } = useTooltipHoverMode();\n  const {\n    visible,\n    setVisible,\n    startShowFlow,\n    startHideFlow,\n    clearVisibilityTimeout,\n  } = useHoverMode({\n    hoverTimeout,\n    hoverTimeoutRef,\n    leaveTimeout,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n  });\n  const [position, updatePosition] = useTooltipPosition({\n    position: determinedPosition,\n    defaultPosition,\n    threshold,\n  });\n\n  const mode = useUserInteractionMode();\n  const elementRef = useRef<HTMLElement | null>(null);\n  const tooltipRef = useRef<TooltipElement>(null);\n  const overflowRef = useRef<HTMLElement>(null);\n  const initiatedBy = useRef<UserInteractionMode | null>(null);\n  const { ref, style, callbacks } = useFixedPositioning({\n    nodeRef: tooltipRef,\n    style: propStyle,\n    fixedTo: elementRef,\n    anchor: getAnchor(position),\n    disableSwapping: disableSwapping ?? !!determinedPosition,\n    disabled: disableFixedPositioning,\n    getFixedPositionOptions() {\n      let tooltipSpacing = dense ? denseSpacing : spacing;\n      const tooltip = tooltipRef.current;\n      if (!disableAutoSpacing && tooltip) {\n        tooltipSpacing =\n          window\n            .getComputedStyle(tooltip)\n            .getPropertyValue(TOOLTIP_SPACING_VAR) || spacing;\n      }\n\n      const currentSpacing = parseCssLengthUnit({\n        value: tooltipSpacing,\n      });\n      const horizontal = position === \"left\" || position === \"right\";\n\n      return {\n        vwMargin,\n        vhMargin,\n        xMargin: horizontal ? currentSpacing : undefined,\n        yMargin: horizontal ? undefined : currentSpacing,\n      };\n    },\n    onEnter(appearing) {\n      onEnter(appearing);\n\n      // This allows you to inspect the tooltip styles through the element\n      // inspector without first hovering or focusing the tooltipped element\n      // beforehand by setting the `HoverMode` hook to `true`\n      if (process.env.NODE_ENV !== \"production\" && !elementRef.current) {\n        elementRef.current = document.getElementById(id);\n      }\n    },\n    onEntering,\n    onEntered(appearing) {\n      onEntered(appearing);\n\n      animatedOnceRef.current = true;\n    },\n    onExited,\n  });\n\n  const hideTooltip = useCallback(() => {\n    initiatedBy.current = null;\n    disableHoverMode();\n    clearVisibilityTimeout();\n    setVisible(false);\n  }, [clearVisibilityTimeout, disableHoverMode, setVisible]);\n\n  useEffect(() => {\n    if (!visible) {\n      return;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") {\n        hideTooltip();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    window.addEventListener(\"scroll\", hideTooltip, true);\n    window.addEventListener(\"touchend\", hideTooltip, true);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n      window.removeEventListener(\"scroll\", hideTooltip, true);\n      window.removeEventListener(\"touchend\", hideTooltip, true);\n    };\n  }, [hideTooltip, visible]);\n\n  const refocusFrame = useRef(0);\n  const pageInactive = useRef(false);\n  usePageInactive({\n    disabled,\n    onDisabledCleanup: hideTooltip,\n    onChange(active) {\n      if (active) {\n        refocusFrame.current = window.requestAnimationFrame(() => {\n          pageInactive.current = false;\n        });\n        return;\n      }\n\n      pageInactive.current = true;\n      hideTooltip();\n    },\n  });\n\n  const isNotOverflown = (currentTarget: HTMLElement): boolean => {\n    if (!overflowOnly) {\n      return false;\n    }\n\n    const element = overflowRef.current || currentTarget;\n    return !element || element.offsetWidth >= element.scrollWidth;\n  };\n\n  return {\n    visible,\n    setVisible,\n    hideTooltip,\n    animatedOnce: animatedOnceRef.current,\n    initiatedBy,\n    overflowRef,\n    startShowFlow,\n    startHideFlow,\n    clearVisibilityTimeout,\n    tooltipProps: {\n      id: tooltipId,\n      ref,\n      dense,\n      style,\n      visible,\n      position,\n      ...callbacks,\n    },\n    elementProps: {\n      \"aria-describedby\": cnb(visible && tooltipId, describedBy) || undefined,\n      id,\n      onMouseEnter(event) {\n        onMouseEnter(event);\n        if (\n          disabled ||\n          mode === \"touch\" ||\n          initiatedBy.current !== null ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          return;\n        }\n\n        initiatedBy.current = \"mouse\";\n        elementRef.current = event.currentTarget;\n        updatePosition(event.currentTarget);\n        startShowFlow(id);\n      },\n      onMouseLeave(event) {\n        onMouseLeave(event);\n        if (disabled || initiatedBy.current !== \"mouse\") {\n          return;\n        }\n\n        startHideFlow();\n        initiatedBy.current = null;\n      },\n      onBlur(event) {\n        onBlur(event);\n        if (disabled) {\n          return;\n        }\n\n        initiatedBy.current = null;\n        startHideFlow();\n      },\n      onFocus(event) {\n        onFocus(event);\n        // skip the focus events when the browser is re-focused if the user\n        // pressed alt-tab, minimized the browser, etc\n        if (\n          disabled ||\n          mode !== \"keyboard\" ||\n          initiatedBy.current !== null ||\n          pageInactive.current ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          pageInactive.current = false;\n          return;\n        }\n\n        initiatedBy.current = \"keyboard\";\n        elementRef.current = event.currentTarget;\n        updatePosition(event.currentTarget);\n        startShowFlow(id);\n      },\n      onTouchStart(event) {\n        onTouchStart(event);\n        if (\n          disabled ||\n          initiatedBy.current !== null ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          return;\n        }\n\n        initiatedBy.current = \"touch\";\n        elementRef.current = event.currentTarget;\n        updatePosition(event.currentTarget);\n        startShowFlow(id);\n      },\n      onTouchEnd(event) {\n        onTouchEnd(event);\n        if (disabled) {\n          return;\n        }\n\n        initiatedBy.current = null;\n        startHideFlow();\n      },\n      onContextMenu(event) {\n        onContextMenu(event);\n        if (\n          disabled ||\n          initiatedBy.current !== \"touch\" ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          return;\n        }\n\n        event.preventDefault();\n        const selection = window.getSelection();\n        const node = selection?.anchorNode?.parentElement;\n        if (node && event.currentTarget.contains(node)) {\n          selection.empty();\n        }\n      },\n    },\n  };\n}\n"],"names":["cnb","useCallback","useEffect","useId","useRef","useHoverMode","useUserInteractionMode","useFixedPositioning","usePageInactive","parseCssLengthUnit","useTooltipHoverMode","DEFAULT_TOOLTIP_DENSE_SPACING","DEFAULT_TOOLTIP_MARGIN","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_SPACING","DEFAULT_TOOLTIP_THRESHOLD","TOOLTIP_SPACING_VAR","useTooltipPosition","getAnchor","noop","useTooltip","options","id","propId","style","propStyle","disabled","describedBy","dense","hoverTimeout","leaveTimeout","vwMargin","vhMargin","spacing","denseSpacing","disableSwapping","disableAutoSpacing","position","determinedPosition","defaultPosition","threshold","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","onEnter","onEntering","onEntered","onExited","overflowOnly","disableFixedPositioning","fallbackId","tooltipId","animatedOnceRef","hoverTimeoutRef","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","visible","setVisible","startShowFlow","startHideFlow","clearVisibilityTimeout","updatePosition","mode","elementRef","tooltipRef","overflowRef","initiatedBy","ref","callbacks","nodeRef","fixedTo","anchor","getFixedPositionOptions","tooltipSpacing","tooltip","current","window","getComputedStyle","getPropertyValue","currentSpacing","value","horizontal","xMargin","undefined","yMargin","appearing","process","env","NODE_ENV","document","getElementById","hideTooltip","handleKeyDown","event","key","addEventListener","removeEventListener","refocusFrame","pageInactive","onDisabledCleanup","onChange","active","requestAnimationFrame","isNotOverflown","currentTarget","element","offsetWidth","scrollWidth","animatedOnce","tooltipProps","elementProps","preventDefault","selection","getSelection","node","anchorNode","parentElement","contains","empty"],"mappings":"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"}

package/dist/tooltip/useTooltipPosition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tooltip/useTooltipPosition.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport {\n  DEFAULT_TOOLTIP_POSITION,\n  DEFAULT_TOOLTIP_THRESHOLD,\n} from \"./constants.js\";\nimport { getPosition } from \"./utils.js\";\n\n/** @internal */\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.8.0\n */\nexport interface TooltipPositionHookOptions {\n  /**\n   * An optional controlled position to use that will disable the functionality\n   * to determine the \"best\" position to render the tooltip within the viewport.\n   */\n  position?: SimplePosition;\n\n  /**\n   * An optional position to use before the positioning calculation has\n   * occurred. This is also used to determine if the position should be\n   * horizontal vs vertical.\n   *\n   * Vertical - `\"below\"` or `\"above\"`\n   * Horizontal - `\"left\"` or `\"right\"`\n   *\n   * @defaultValue `\"below\"`\n   */\n  defaultPosition?: SimplePosition;\n\n  /**\n   * This value should be between 0 and 1 and will be multiplied by either the\n   * viewport height or viewport width to determine the best position to render\n   * the tooltip based on available space within the viewport.\n   *\n   * You _probably_ won't ever really need to update this value.\n   *\n   * @defaultValue `0.75`\n   */\n  threshold?: number;\n}\n\n/**\n * @internal\n * @since 2.8.0\n */\nexport type UpdateTooltipPosition = (container: HTMLElement) => void;\n\n/**\n * @internal\n * @since 2.8.0\n */\nexport type TooltipPositionHookReturnValue = [\n  SimplePosition,\n  UpdateTooltipPosition,\n];\n\n/**\n * A hook that's used to determine the \"best\" position to render the tooltip\n * within the viewport.\n *\n * @internal\n * @since 2.8.0\n */\nexport function useTooltipPosition(\n  options: TooltipPositionHookOptions\n): TooltipPositionHookReturnValue {\n  const {\n    position: determinedPosition,\n    threshold = DEFAULT_TOOLTIP_THRESHOLD,\n    defaultPosition = DEFAULT_TOOLTIP_POSITION,\n  } = options;\n\n  const [position, setPosition] = useState(defaultPosition);\n  const updatePosition = useCallback<UpdateTooltipPosition>(\n    (container) => {\n      setPosition(\n        getPosition({\n          container,\n          threshold,\n          defaultPosition,\n        })\n      );\n    },\n    [defaultPosition, threshold]\n  );\n\n  if (typeof determinedPosition !== \"undefined\") {\n    return [determinedPosition, noop];\n  }\n\n  return [position, updatePosition];\n}\n"],"names":["useCallback","useState","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_THRESHOLD","getPosition","noop","useTooltipPosition","options","position","determinedPosition","threshold","defaultPosition","setPosition","updatePosition","container"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,SACEC,wBAAwB,EACxBC,yBAAyB,QACpB,iBAAiB;AACxB,SAASC,WAAW,QAAQ,aAAa;AAEzC,cAAc,GACd,MAAMC,OAAO;AACX,aAAa;AACf;AAmDA;;;;;;CAMC,GACD,OAAO,SAASC,mBACdC,OAAmC;IAEnC,MAAM,EACJC,UAAUC,kBAAkB,EAC5BC,YAAYP,yBAAyB,EACrCQ,kBAAkBT,wBAAwB,EAC3C,GAAGK;IAEJ,MAAM,CAACC,UAAUI,YAAY,GAAGX,SAASU;IACzC,MAAME,iBAAiBb,YACrB,CAACc;QACCF,YACER,YAAY;YACVU;YACAJ;YACAC;QACF;IAEJ,GACA;QAACA;QAAiBD;KAAU;IAG9B,IAAI,OAAOD,uBAAuB,aAAa;QAC7C,OAAO;YAACA;YAAoBJ;SAAK;IACnC;IAEA,OAAO;QAACG;QAAUK;KAAe;AACnC"}
+{"version":3,"sources":["../../src/tooltip/useTooltipPosition.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useState } from \"react\";\n\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport {\n  DEFAULT_TOOLTIP_POSITION,\n  DEFAULT_TOOLTIP_THRESHOLD,\n} from \"./constants.js\";\nimport { getPosition } from \"./utils.js\";\n\n/** @internal */\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.8.0\n */\nexport interface TooltipPositionHookOptions {\n  /**\n   * An optional controlled position to use that will disable the functionality\n   * to determine the \"best\" position to render the tooltip within the viewport.\n   */\n  position?: SimplePosition;\n\n  /**\n   * An optional position to use before the positioning calculation has\n   * occurred. This is also used to determine if the position should be\n   * horizontal vs vertical.\n   *\n   * Vertical - `\"below\"` or `\"above\"`\n   * Horizontal - `\"left\"` or `\"right\"`\n   *\n   * @defaultValue `\"below\"`\n   */\n  defaultPosition?: SimplePosition;\n\n  /**\n   * This value should be between 0 and 1 and will be multiplied by either the\n   * viewport height or viewport width to determine the best position to render\n   * the tooltip based on available space within the viewport.\n   *\n   * You _probably_ won't ever really need to update this value.\n   *\n   * @defaultValue `0.75`\n   */\n  threshold?: number;\n}\n\n/**\n * @internal\n * @since 2.8.0\n */\nexport type UpdateTooltipPosition = (container: HTMLElement) => void;\n\n/**\n * @internal\n * @since 2.8.0\n */\nexport type TooltipPositionHookReturnValue = [\n  SimplePosition,\n  UpdateTooltipPosition,\n];\n\n/**\n * A hook that's used to determine the \"best\" position to render the tooltip\n * within the viewport.\n *\n * @internal\n * @since 2.8.0\n */\nexport function useTooltipPosition(\n  options: TooltipPositionHookOptions\n): TooltipPositionHookReturnValue {\n  const {\n    position: determinedPosition,\n    threshold = DEFAULT_TOOLTIP_THRESHOLD,\n    defaultPosition = DEFAULT_TOOLTIP_POSITION,\n  } = options;\n\n  const [position, setPosition] = useState(defaultPosition);\n  const updatePosition = useCallback<UpdateTooltipPosition>(\n    (container) => {\n      setPosition(\n        getPosition({\n          container,\n          threshold,\n          defaultPosition,\n        })\n      );\n    },\n    [defaultPosition, threshold]\n  );\n\n  if (typeof determinedPosition !== \"undefined\") {\n    return [determinedPosition, noop];\n  }\n\n  return [position, updatePosition];\n}\n"],"names":["useCallback","useState","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_THRESHOLD","getPosition","noop","useTooltipPosition","options","position","determinedPosition","threshold","defaultPosition","setPosition","updatePosition","container"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAG9C,SACEC,wBAAwB,EACxBC,yBAAyB,QACpB,iBAAiB;AACxB,SAASC,WAAW,QAAQ,aAAa;AAEzC,cAAc,GACd,MAAMC,OAAO;AACX,aAAa;AACf;AAmDA;;;;;;CAMC,GACD,OAAO,SAASC,mBACdC,OAAmC;IAEnC,MAAM,EACJC,UAAUC,kBAAkB,EAC5BC,YAAYP,yBAAyB,EACrCQ,kBAAkBT,wBAAwB,EAC3C,GAAGK;IAEJ,MAAM,CAACC,UAAUI,YAAY,GAAGX,SAASU;IACzC,MAAME,iBAAiBb,YACrB,CAACc;QACCF,YACER,YAAY;YACVU;YACAJ;YACAC;QACF;IAEJ,GACA;QAACA;QAAiBD;KAAU;IAG9B,IAAI,OAAOD,uBAAuB,aAAa;QAC7C,OAAO;YAACA;YAAoBJ;SAAK;IACnC;IAEA,OAAO;QAACG;QAAUK;KAAe;AACnC"}

package/dist/transition/CSSTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/CSSTransition.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { Children, cloneElement, type ReactElement } from \"react\";\nimport {\n  type CSSTransitionComponentImplementation,\n  type CSSTransitionHookOptions,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface CSSTransitionProps<E extends HTMLElement>\n  extends CSSTransitionHookOptions<E>,\n    CSSTransitionComponentImplementation<E> {}\n\n/**\n * **Client Component**\n *\n * This is a component implementation of the {@link useCSSTransition} hook that\n * implements the `temporary` behavior. Since this component uses the\n * `React.cloneElement` to inject the `ref` and `className` into the `children`,\n * it is recommended to use the hook instead.\n *\n * @example Simple Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, CSSTransition } from \"@react-md/core\":\n *\n * // pretend global styles:\n * //\n * // .opacity--enter {\n * //   opacity: 0;\n * //   transition: opacity .3s;\n * // }\n * //\n * // .opacity--enter-active {\n * //   opacity: 1;\n * // }\n * //\n * // .opacity--exit {\n * //   opacity: 1;\n * // }\n * //\n * // .opacity--exit-active {\n * //   opacity: 0;\n * //   transition: opacity .3s;\n * // }\n *\n * function Example(): ReactElement {\n *   const [transitionIn, setTransitionIn] = useState(false);\n *\n *   return (\n *     <>\n *       <Button onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       <CSSTransition\n *         timeout={300}\n *         className=\"opacity\"\n *         temporary\n *         transitionIn={transitionIn}\n *       >\n *         <div>\n *           This is some content that will animate!\n *         </div>\n *       </CSSTransition>\n *     </>\n *   );\n * }\n * ```\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function CSSTransition<E extends HTMLElement>(\n  props: CSSTransitionProps<E>\n): ReactElement | null {\n  const { children, className, ...options } = props;\n  const child = Children.only(children);\n  const { elementProps, rendered } = useCSSTransition({\n    ...options,\n    className: cnb(child.props.className, className),\n  });\n\n  return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCSSTransition","CSSTransition","props","children","className","options","child","only","elementProps","rendered"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAEC,YAAY,QAA2B,QAAQ;AAKlE,SAASC,gBAAgB,QAAQ,wBAAwB;AAWzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DC,GACD,OAAO,SAASC,cACdC,KAA4B;IAE5B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGH;IAC5C,MAAMI,QAAQR,SAASS,IAAI,CAACJ;IAC5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGT,iBAAiB;QAClD,GAAGK,OAAO;QACVD,WAAWP,IAAIS,MAAMJ,KAAK,CAACE,SAAS,EAAEA;IACxC;IAEA,qBAAO;kBAAGK,0BAAYV,aAAaI,UAAUK;;AAC/C"}
+{"version":3,"sources":["../../src/transition/CSSTransition.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { Children, type ReactElement, cloneElement } from \"react\";\n\nimport {\n  type CSSTransitionComponentImplementation,\n  type CSSTransitionHookOptions,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface CSSTransitionProps<E extends HTMLElement>\n  extends CSSTransitionHookOptions<E>,\n    CSSTransitionComponentImplementation<E> {}\n\n/**\n * **Client Component**\n *\n * This is a component implementation of the {@link useCSSTransition} hook that\n * implements the `temporary` behavior. Since this component uses the\n * `React.cloneElement` to inject the `ref` and `className` into the `children`,\n * it is recommended to use the hook instead.\n *\n * @example Simple Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, CSSTransition } from \"@react-md/core\":\n *\n * // pretend global styles:\n * //\n * // .opacity--enter {\n * //   opacity: 0;\n * //   transition: opacity .3s;\n * // }\n * //\n * // .opacity--enter-active {\n * //   opacity: 1;\n * // }\n * //\n * // .opacity--exit {\n * //   opacity: 1;\n * // }\n * //\n * // .opacity--exit-active {\n * //   opacity: 0;\n * //   transition: opacity .3s;\n * // }\n *\n * function Example(): ReactElement {\n *   const [transitionIn, setTransitionIn] = useState(false);\n *\n *   return (\n *     <>\n *       <Button onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       <CSSTransition\n *         timeout={300}\n *         className=\"opacity\"\n *         temporary\n *         transitionIn={transitionIn}\n *       >\n *         <div>\n *           This is some content that will animate!\n *         </div>\n *       </CSSTransition>\n *     </>\n *   );\n * }\n * ```\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function CSSTransition<E extends HTMLElement>(\n  props: CSSTransitionProps<E>\n): ReactElement | null {\n  const { children, className, ...options } = props;\n  const child = Children.only(children);\n  const { elementProps, rendered } = useCSSTransition({\n    ...options,\n    className: cnb(child.props.className, className),\n  });\n\n  return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCSSTransition","CSSTransition","props","children","className","options","child","only","elementProps","rendered"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAqBC,YAAY,QAAQ,QAAQ;AAMlE,SAASC,gBAAgB,QAAQ,wBAAwB;AAWzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DC,GACD,OAAO,SAASC,cACdC,KAA4B;IAE5B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGH;IAC5C,MAAMI,QAAQR,SAASS,IAAI,CAACJ;IAC5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGT,iBAAiB;QAClD,GAAGK,OAAO;QACVD,WAAWP,IAAIS,MAAMJ,KAAK,CAACE,SAAS,EAAEA;IACxC;IAEA,qBAAO;kBAAGK,0BAAYV,aAAaI,UAAUK;;AAC/C"}