@cerberus-design/react 0.13.1-next-8c8a5ee → 0.13.1-next-b2ca1e0

package/build/modern/_tsup-dts-rollup.d.ts

@@ -2097,6 +2097,23 @@ export { RadioRecipe as RadioRecipe_alias_1 }
 
 export { rectIntersection }
 
+/**
+ * This module provides a hook to get Cerberus colors from the document root.
+ * @module useRootColors
+ */
+declare interface RootColorsResult {
+    /**
+     * A record of Cerberus colors where the key is the token name provided and the value is the color hex.
+     */
+    colors: Record<string, string>;
+    /**
+     * A function to refetch the Cerberus colors from the document root. Useful when you need the latest colors after a theme/mode change.
+     */
+    refetch: () => Promise<void>;
+}
+export { RootColorsResult }
+export { RootColorsResult as RootColorsResult_alias_1 }
+
 export { ScreenReaderInstructions }
 
 /**
@@ -3010,6 +3027,17 @@ declare function usePromptModal(): PromptModalValue;
 export { usePromptModal }
 export { usePromptModal as usePromptModal_alias_1 }
 
+/**
+ * This hook returns a record of Cerberus colors from the document root.
+ * This is useful when you are working with a component that uses the `<canvas>`
+ * element.
+ * @param colors - An array of Cerberus tokens to get from the document root (i.e. `['dataViz.diverging.50', 'dataViz.diverging.200']`).
+ * @returns A record of Cerberus colors where the key is the token name provided and the value is the color hex.
+ */
+declare function useRootColors(colors?: string[]): RootColorsResult;
+export { useRootColors }
+export { useRootColors as useRootColors_alias_1 }
+
 export { useSensor }
 
 export { useSensors }

package/build/modern/{chunk-5KHGTLFM.js → chunk-B3LRHIEG.js}

@@ -1,3 +1,6 @@
+import {
+  NotificationHeading
+} from "./chunk-SXIXDXG3.js";
 import {
   Portal
 } from "./chunk-K2PSHGS7.js";
@@ -8,14 +11,11 @@ import {
   NotificationDescription
 } from "./chunk-XEW6TJJ4.js";
 import {
-  NotificationHeading
-} from "./chunk-SXIXDXG3.js";
+  Button
+} from "./chunk-EXGKZGML.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
-import {
-  Button
-} from "./chunk-EXGKZGML.js";
 
 // src/context/notification-center.tsx
 import {
@@ -159,4 +159,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-5KHGTLFM.js.map
+//# sourceMappingURL=chunk-B3LRHIEG.js.map

package/build/modern/{chunk-4D6VIGNQ.js → chunk-FHS7VVGN.js}

@@ -1,6 +1,9 @@
 import {
   Portal
 } from "./chunk-K2PSHGS7.js";
+import {
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
 } from "./chunk-XY6WL55R.js";
@@ -11,8 +14,8 @@ import {
   Modal
 } from "./chunk-BE4EOU2P.js";
 import {
-  ModalDescription
-} from "./chunk-Q7BRMIBR.js";
+  Button
+} from "./chunk-EXGKZGML.js";
 import {
   useModal
 } from "./chunk-KGQG5JGW.js";
@@ -22,9 +25,6 @@ import {
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
-import {
-  Button
-} from "./chunk-EXGKZGML.js";
 import {
   trapFocus
 } from "./chunk-JIZQFTW6.js";
@@ -170,4 +170,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-4D6VIGNQ.js.map
+//# sourceMappingURL=chunk-FHS7VVGN.js.map

package/build/modern/chunk-RMVJK26W.js

@@ -0,0 +1,39 @@
+// src/hooks/useRootColors.ts
+import { useCallback, useEffect, useMemo, useReducer } from "react";
+function useRootColors(colors = []) {
+  const [state, dispatch] = useReducer(rootColorsReducer, {});
+  const handleRefetch = useCallback(() => {
+    return new Promise((resolve) => {
+      dispatch(formatColors(colors));
+      resolve();
+    });
+  }, []);
+  useEffect(() => {
+    if (Object.keys(state).length === colors.length) return;
+    dispatch(formatColors(colors));
+    console.log("updating colors in root hook");
+  }, [colors]);
+  return useMemo(
+    () => ({ colors: state, refetch: handleRefetch }),
+    [state, handleRefetch]
+  );
+}
+function formatColors(colors) {
+  const rootStyles = getComputedStyle(document.body);
+  return colors.reduce(
+    (acc, color) => {
+      const formattedColor = color.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase().replaceAll(".", "-");
+      acc[color] = rootStyles.getPropertyValue(`--cerberus-colors-${formattedColor}`).trim();
+      return acc;
+    },
+    {}
+  );
+}
+function rootColorsReducer(state, action) {
+  return { ...state, ...action };
+}
+
+export {
+  useRootColors
+};
+//# sourceMappingURL=chunk-RMVJK26W.js.map

package/build/modern/chunk-RMVJK26W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useRootColors.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useEffect, useMemo, useReducer } from 'react'\n\n/**\n * This module provides a hook to get Cerberus colors from the document root.\n * @module useRootColors\n */\n\nexport interface RootColorsResult {\n  /**\n   * A record of Cerberus colors where the key is the token name provided and the value is the color hex.\n   */\n  colors: Record<string, string>\n  /**\n   * A function to refetch the Cerberus colors from the document root. Useful when you need the latest colors after a theme/mode change.\n   */\n  refetch: () => Promise<void>\n}\n\n/**\n * This hook returns a record of Cerberus colors from the document root.\n * This is useful when you are working with a component that uses the `<canvas>`\n * element.\n * @param colors - An array of Cerberus tokens to get from the document root (i.e. `['dataViz.diverging.50', 'dataViz.diverging.200']`).\n * @returns A record of Cerberus colors where the key is the token name provided and the value is the color hex.\n */\nexport function useRootColors(colors: string[] = []): RootColorsResult {\n  const [state, dispatch] = useReducer(rootColorsReducer, {})\n\n  const handleRefetch = useCallback(() => {\n    return new Promise<void>((resolve) => {\n      dispatch(formatColors(colors))\n      resolve()\n    })\n  }, [])\n\n  useEffect(() => {\n    if (Object.keys(state).length === colors.length) return\n    dispatch(formatColors(colors))\n    console.log('updating colors in root hook')\n  }, [colors])\n\n  // reducer is already memoized\n  return useMemo(\n    () => ({ colors: state, refetch: handleRefetch }),\n    [state, handleRefetch],\n  )\n}\n\nfunction formatColors(colors: string[]): Record<string, string> {\n  const rootStyles = getComputedStyle(document.body)\n  return colors.reduce(\n    (acc, color) => {\n      const formattedColor = color\n        .replace(/([a-z])([A-Z])/g, '$1-$2')\n        .toLowerCase()\n        .replaceAll('.', '-')\n      acc[color] = rootStyles\n        .getPropertyValue(`--cerberus-colors-${formattedColor}`)\n        .trim()\n      return acc\n    },\n    {} as Record<string, string>,\n  )\n}\n\nfunction rootColorsReducer(\n  state: Record<string, string>,\n  action: Record<string, string>,\n): Record<string, string> {\n  return { ...state, ...action }\n}\n"],"mappings":";AAEA,SAAS,aAAa,WAAW,SAAS,kBAAkB;AAyBrD,SAAS,cAAc,SAAmB,CAAC,GAAqB;AACrE,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,mBAAmB,CAAC,CAAC;AAE1D,QAAM,gBAAgB,YAAY,MAAM;AACtC,WAAO,IAAI,QAAc,CAAC,YAAY;AACpC,eAAS,aAAa,MAAM,CAAC;AAC7B,cAAQ;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,OAAO,KAAK,KAAK,EAAE,WAAW,OAAO,OAAQ;AACjD,aAAS,aAAa,MAAM,CAAC;AAC7B,YAAQ,IAAI,8BAA8B;AAAA,EAC5C,GAAG,CAAC,MAAM,CAAC;AAGX,SAAO;AAAA,IACL,OAAO,EAAE,QAAQ,OAAO,SAAS,cAAc;AAAA,IAC/C,CAAC,OAAO,aAAa;AAAA,EACvB;AACF;AAEA,SAAS,aAAa,QAA0C;AAC9D,QAAM,aAAa,iBAAiB,SAAS,IAAI;AACjD,SAAO,OAAO;AAAA,IACZ,CAAC,KAAK,UAAU;AACd,YAAM,iBAAiB,MACpB,QAAQ,mBAAmB,OAAO,EAClC,YAAY,EACZ,WAAW,KAAK,GAAG;AACtB,UAAI,KAAK,IAAI,WACV,iBAAiB,qBAAqB,cAAc,EAAE,EACtD,KAAK;AACR,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;AAEA,SAAS,kBACP,OACA,QACwB;AACxB,SAAO,EAAE,GAAG,OAAO,GAAG,OAAO;AAC/B;","names":[]}

package/build/modern/{chunk-MMHCX2RG.js → chunk-S6JWPDB4.js}

@@ -1,6 +1,9 @@
 import {
   Portal
 } from "./chunk-K2PSHGS7.js";
+import {
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
 } from "./chunk-XY6WL55R.js";
@@ -17,8 +20,8 @@ import {
   Modal
 } from "./chunk-BE4EOU2P.js";
 import {
-  ModalDescription
-} from "./chunk-Q7BRMIBR.js";
+  Button
+} from "./chunk-EXGKZGML.js";
 import {
   Field
 } from "./chunk-UZDVOIW5.js";
@@ -31,9 +34,6 @@ import {
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
-import {
-  Button
-} from "./chunk-EXGKZGML.js";
 import {
   trapFocus
 } from "./chunk-JIZQFTW6.js";
@@ -240,4 +240,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-MMHCX2RG.js.map
+//# sourceMappingURL=chunk-S6JWPDB4.js.map

package/build/modern/{chunk-MXMVC3ZQ.js → chunk-SRPSJGNI.js}

@@ -1,21 +1,24 @@
 import {
   Portal
 } from "./chunk-K2PSHGS7.js";
+import {
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
 } from "./chunk-XY6WL55R.js";
 import {
   ModalHeading
 } from "./chunk-2UXE5PDG.js";
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
 import {
   Modal
 } from "./chunk-BE4EOU2P.js";
 import {
-  ModalDescription
-} from "./chunk-Q7BRMIBR.js";
-import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
+  Button
+} from "./chunk-EXGKZGML.js";
 import {
   useModal
 } from "./chunk-KGQG5JGW.js";
@@ -25,9 +28,6 @@ import {
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
-import {
-  Button
-} from "./chunk-EXGKZGML.js";
 import {
   trapFocus
 } from "./chunk-JIZQFTW6.js";
@@ -152,4 +152,4 @@ export {
   CTAModal,
   useCTAModal
 };
-//# sourceMappingURL=chunk-MXMVC3ZQ.js.map
+//# sourceMappingURL=chunk-SRPSJGNI.js.map

package/build/modern/context/confirm-modal.js

@@ -2,16 +2,16 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-4D6VIGNQ.js";
+} from "../chunk-FHS7VVGN.js";
 import "../chunk-K2PSHGS7.js";
+import "../chunk-Q7BRMIBR.js";
 import "../chunk-XY6WL55R.js";
 import "../chunk-2UXE5PDG.js";
 import "../chunk-BE4EOU2P.js";
-import "../chunk-Q7BRMIBR.js";
+import "../chunk-EXGKZGML.js";
 import "../chunk-KGQG5JGW.js";
 import "../chunk-SPZYPRZ6.js";
 import "../chunk-BUVVRQLZ.js";
-import "../chunk-EXGKZGML.js";
 import "../chunk-JIZQFTW6.js";
 import "../chunk-VERRHMW4.js";
 import "../chunk-F27AAKQ3.js";

package/build/modern/context/cta-modal.js

@@ -2,17 +2,17 @@
 import {
   CTAModal,
   useCTAModal
-} from "../chunk-MXMVC3ZQ.js";
+} from "../chunk-SRPSJGNI.js";
 import "../chunk-K2PSHGS7.js";
+import "../chunk-Q7BRMIBR.js";
 import "../chunk-XY6WL55R.js";
 import "../chunk-2UXE5PDG.js";
-import "../chunk-BE4EOU2P.js";
-import "../chunk-Q7BRMIBR.js";
 import "../chunk-APD6IX5R.js";
+import "../chunk-BE4EOU2P.js";
+import "../chunk-EXGKZGML.js";
 import "../chunk-KGQG5JGW.js";
 import "../chunk-SPZYPRZ6.js";
 import "../chunk-BUVVRQLZ.js";
-import "../chunk-EXGKZGML.js";
 import "../chunk-JIZQFTW6.js";
 import "../chunk-VERRHMW4.js";
 import "../chunk-F27AAKQ3.js";

package/build/modern/context/notification-center.js

@@ -2,13 +2,13 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-5KHGTLFM.js";
+} from "../chunk-B3LRHIEG.js";
+import "../chunk-SXIXDXG3.js";
 import "../chunk-K2PSHGS7.js";
 import "../chunk-7SGPJM66.js";
 import "../chunk-XEW6TJJ4.js";
-import "../chunk-SXIXDXG3.js";
-import "../chunk-BUVVRQLZ.js";
 import "../chunk-EXGKZGML.js";
+import "../chunk-BUVVRQLZ.js";
 import "../chunk-JIZQFTW6.js";
 import "../chunk-VERRHMW4.js";
 import "../chunk-F27AAKQ3.js";

package/build/modern/context/prompt-modal.js

@@ -2,19 +2,19 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-MMHCX2RG.js";
+} from "../chunk-S6JWPDB4.js";
 import "../chunk-K2PSHGS7.js";
+import "../chunk-Q7BRMIBR.js";
 import "../chunk-XY6WL55R.js";
 import "../chunk-2UXE5PDG.js";
 import "../chunk-NKM6PISB.js";
 import "../chunk-NMF2HYWO.js";
 import "../chunk-BE4EOU2P.js";
-import "../chunk-Q7BRMIBR.js";
+import "../chunk-EXGKZGML.js";
 import "../chunk-UZDVOIW5.js";
 import "../chunk-KGQG5JGW.js";
 import "../chunk-SPZYPRZ6.js";
 import "../chunk-BUVVRQLZ.js";
-import "../chunk-EXGKZGML.js";
 import "../chunk-JIZQFTW6.js";
 import "../chunk-VERRHMW4.js";
 import "../chunk-F27AAKQ3.js";

package/build/modern/hooks/useRootColors.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  useRootColors
+} from "../chunk-RMVJK26W.js";
+export {
+  useRootColors
+};
+//# sourceMappingURL=useRootColors.js.map

package/build/modern/hooks/useRootColors.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/index.js

@@ -1,11 +1,18 @@
+import {
+  NotificationCenter,
+  useNotificationCenter
+} from "./chunk-B3LRHIEG.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-MMHCX2RG.js";
+} from "./chunk-S6JWPDB4.js";
 import {
   ThemeProvider,
   useThemeContext
 } from "./chunk-EB37HRCN.js";
+import {
+  Thead
+} from "./chunk-Y6QQCRQV.js";
 import {
   Toggle
 } from "./chunk-NMNONSHU.js";
@@ -15,15 +22,14 @@ import {
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-4D6VIGNQ.js";
+} from "./chunk-FHS7VVGN.js";
 import {
   CTAModal,
   useCTAModal
-} from "./chunk-MXMVC3ZQ.js";
+} from "./chunk-SRPSJGNI.js";
 import {
-  NotificationCenter,
-  useNotificationCenter
-} from "./chunk-5KHGTLFM.js";
+  TabList
+} from "./chunk-UKPF7JOB.js";
 import {
   TabPanel
 } from "./chunk-AYIRV5CL.js";
@@ -47,8 +53,8 @@ import {
   Th
 } from "./chunk-SGKHA4EB.js";
 import {
-  Thead
-} from "./chunk-Y6QQCRQV.js";
+  NotificationHeading
+} from "./chunk-SXIXDXG3.js";
 import {
   Portal
 } from "./chunk-K2PSHGS7.js";
@@ -66,8 +72,8 @@ import {
   Tab
 } from "./chunk-SLF6SIPB.js";
 import {
-  TabList
-} from "./chunk-UKPF7JOB.js";
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
 } from "./chunk-XY6WL55R.js";
@@ -95,11 +101,18 @@ import {
   NotificationDescription
 } from "./chunk-XEW6TJJ4.js";
 import {
-  NotificationHeading
-} from "./chunk-SXIXDXG3.js";
+  FileStatus,
+  processStatus
+} from "./chunk-7MM5KYEX.js";
+import {
+  ProgressBar
+} from "./chunk-KCANMM64.js";
 import {
   FileUploader
 } from "./chunk-W4DXACNV.js";
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
 import {
   Input
 } from "./chunk-NKM6PISB.js";
@@ -122,8 +135,8 @@ import {
   Modal
 } from "./chunk-BE4EOU2P.js";
 import {
-  ModalDescription
-} from "./chunk-Q7BRMIBR.js";
+  Button
+} from "./chunk-EXGKZGML.js";
 import {
   Checkbox
 } from "./chunk-NB6DV4VA.js";
@@ -140,32 +153,25 @@ import {
   FeatureFlags,
   useFeatureFlags
 } from "./chunk-CJFW36DZ.js";
-import {
-  Fieldset
-} from "./chunk-3ZDFQO25.js";
-import {
-  FieldsetLabel
-} from "./chunk-PZAZKQMO.js";
-import {
-  FileStatus,
-  processStatus
-} from "./chunk-7MM5KYEX.js";
-import {
-  ProgressBar
-} from "./chunk-KCANMM64.js";
-import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
 import {
   FieldMessage
 } from "./chunk-JWIJHSI6.js";
+import {
+  Fieldset
+} from "./chunk-3ZDFQO25.js";
 import {
   Field,
   useFieldContext
 } from "./chunk-UZDVOIW5.js";
+import {
+  FieldsetLabel
+} from "./chunk-PZAZKQMO.js";
 import {
   useModal
 } from "./chunk-KGQG5JGW.js";
+import {
+  useRootColors
+} from "./chunk-RMVJK26W.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -188,9 +194,6 @@ import {
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
-import {
-  Button
-} from "./chunk-EXGKZGML.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -309,6 +312,7 @@ export {
   useNavMenuContext,
   useNotificationCenter,
   usePromptModal,
+  useRootColors,
   useTabsContext,
   useTabsKeyboardNavigation,
   useTheme,

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.13.1-next-8c8a5ee",
+  "version": "0.13.1-next-b2ca1e0",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -27,7 +27,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.13.1-next-8c8a5ee"
+    "@cerberus-design/styled-system": "0.13.1-next-b2ca1e0"
   },
   "publishConfig": {
     "access": "public"

package/src/hooks/useRootColors.ts

@@ -0,0 +1,73 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useReducer } from 'react'
+
+/**
+ * This module provides a hook to get Cerberus colors from the document root.
+ * @module useRootColors
+ */
+
+export interface RootColorsResult {
+  /**
+   * A record of Cerberus colors where the key is the token name provided and the value is the color hex.
+   */
+  colors: Record<string, string>
+  /**
+   * A function to refetch the Cerberus colors from the document root. Useful when you need the latest colors after a theme/mode change.
+   */
+  refetch: () => Promise<void>
+}
+
+/**
+ * This hook returns a record of Cerberus colors from the document root.
+ * This is useful when you are working with a component that uses the `<canvas>`
+ * element.
+ * @param colors - An array of Cerberus tokens to get from the document root (i.e. `['dataViz.diverging.50', 'dataViz.diverging.200']`).
+ * @returns A record of Cerberus colors where the key is the token name provided and the value is the color hex.
+ */
+export function useRootColors(colors: string[] = []): RootColorsResult {
+  const [state, dispatch] = useReducer(rootColorsReducer, {})
+
+  const handleRefetch = useCallback(() => {
+    return new Promise<void>((resolve) => {
+      dispatch(formatColors(colors))
+      resolve()
+    })
+  }, [])
+
+  useEffect(() => {
+    if (Object.keys(state).length === colors.length) return
+    dispatch(formatColors(colors))
+    console.log('updating colors in root hook')
+  }, [colors])
+
+  // reducer is already memoized
+  return useMemo(
+    () => ({ colors: state, refetch: handleRefetch }),
+    [state, handleRefetch],
+  )
+}
+
+function formatColors(colors: string[]): Record<string, string> {
+  const rootStyles = getComputedStyle(document.body)
+  return colors.reduce(
+    (acc, color) => {
+      const formattedColor = color
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .toLowerCase()
+        .replaceAll('.', '-')
+      acc[color] = rootStyles
+        .getPropertyValue(`--cerberus-colors-${formattedColor}`)
+        .trim()
+      return acc
+    },
+    {} as Record<string, string>,
+  )
+}
+
+function rootColorsReducer(
+  state: Record<string, string>,
+  action: Record<string, string>,
+): Record<string, string> {
+  return { ...state, ...action }
+}

package/src/index.ts

@@ -69,6 +69,7 @@ export * from './hooks/useDate'
 export * from './hooks/useModal'
 export * from './hooks/useTheme'
 export * from './hooks/useToggle'
+export * from './hooks/useRootColors'
 
 // aria-helpers