@cerberus-design/react 0.13.1-next-8c8a5ee → 0.13.1-next-394d7c4

package/build/legacy/_tsup-dts-rollup.d.cts

@@ -2097,6 +2097,14 @@ export { RadioRecipe as RadioRecipe_alias_1 }
 
 export { rectIntersection }
 
+/**
+ * This module provides a hook to get Cerberus colors from the document root.
+ * @module useRootColors
+ */
+declare type RootColorsResult = Record<string, string>;
+export { RootColorsResult }
+export { RootColorsResult as RootColorsResult_alias_1 }
+
 export { ScreenReaderInstructions }
 
 /**
@@ -3010,6 +3018,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/legacy/hooks/useRootColors.cjs

@@ -0,0 +1,49 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useRootColors.ts
+var useRootColors_exports = {};
+__export(useRootColors_exports, {
+  useRootColors: () => useRootColors
+});
+module.exports = __toCommonJS(useRootColors_exports);
+var import_react = require("react");
+function useRootColors(colors = []) {
+  const [state, dispatch] = (0, import_react.useReducer)(rootColorsReducer, {});
+  (0, import_react.useEffect)(() => {
+    if (Object.keys(state).length === colors.length) return;
+    const rootStyles = getComputedStyle(document.body);
+    const rootColors = 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;
+    }, {});
+    dispatch(rootColors);
+  }, [colors]);
+  return state;
+}
+function rootColorsReducer(state, action) {
+  return { ...state, ...action };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useRootColors
+});
+//# sourceMappingURL=useRootColors.cjs.map

package/build/legacy/hooks/useRootColors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useRootColors.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, 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 type RootColorsResult = Record<string, string>\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  useEffect(() => {\n    if (Object.keys(state).length === colors.length) return\n\n    const rootStyles = getComputedStyle(document.body)\n    const rootColors = colors.reduce((acc, color) => {\n      const formattedColor = color\n        .replace(/([a-z])([A-Z])/g, '$1-$2')\n        .toLowerCase()\n        .replaceAll('.', '-')\n      acc[color as keyof typeof acc] = rootStyles\n        .getPropertyValue(`--cerberus-colors-${formattedColor}`)\n        .trim()\n      return acc\n    }, {} as RootColorsResult)\n\n    dispatch(rootColors)\n  }, [colors])\n\n  // reducer is already memoized\n  return state\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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAsC;AAgB/B,SAAS,cAAc,SAAmB,CAAC,GAAqB;AACrE,QAAM,CAAC,OAAO,QAAQ,QAAI,yBAAW,mBAAmB,CAAC,CAAC;AAE1D,8BAAU,MAAM;AACd,QAAI,OAAO,KAAK,KAAK,EAAE,WAAW,OAAO,OAAQ;AAEjD,UAAM,aAAa,iBAAiB,SAAS,IAAI;AACjD,UAAM,aAAa,OAAO,OAAO,CAAC,KAAK,UAAU;AAC/C,YAAM,iBAAiB,MACpB,QAAQ,mBAAmB,OAAO,EAClC,YAAY,EACZ,WAAW,KAAK,GAAG;AACtB,UAAI,KAAyB,IAAI,WAC9B,iBAAiB,qBAAqB,cAAc,EAAE,EACtD,KAAK;AACR,aAAO;AAAA,IACT,GAAG,CAAC,CAAqB;AAEzB,aAAS,UAAU;AAAA,EACrB,GAAG,CAAC,MAAM,CAAC;AAGX,SAAO;AACT;AAEA,SAAS,kBACP,OACA,QACwB;AACxB,SAAO,EAAE,GAAG,OAAO,GAAG,OAAO;AAC/B;","names":[]}

package/build/legacy/index.cjs

@@ -107,6 +107,7 @@ __export(src_exports, {
   useNavMenuContext: () => useNavMenuContext,
   useNotificationCenter: () => useNotificationCenter,
   usePromptModal: () => usePromptModal,
+  useRootColors: () => useRootColors,
   useTabsContext: () => useTabsContext,
   useTabsKeyboardNavigation: () => useTabsKeyboardNavigation,
   useTheme: () => useTheme,
@@ -3120,6 +3121,26 @@ function useToggle(options) {
   return (0, import_react24.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
 }
 
+// src/hooks/useRootColors.ts
+var import_react25 = require("react");
+function useRootColors(colors = []) {
+  const [state, dispatch] = (0, import_react25.useReducer)(rootColorsReducer, {});
+  (0, import_react25.useEffect)(() => {
+    if (Object.keys(state).length === colors.length) return;
+    const rootStyles = getComputedStyle(document.body);
+    const rootColors = 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;
+    }, {});
+    dispatch(rootColors);
+  }, [colors]);
+  return state;
+}
+function rootColorsReducer(state, action) {
+  return { ...state, ...action };
+}
+
 // src/utils/index.ts
 function formatNotifyCount(count) {
   if (count > 99) return "99+";
@@ -3216,6 +3237,7 @@ __reExport(src_exports, require("@dnd-kit/core"), module.exports);
   useNavMenuContext,
   useNotificationCenter,
   usePromptModal,
+  useRootColors,
   useTabsContext,
   useTabsKeyboardNavigation,
   useTheme,