@cerberus-design/react 0.15.0-next-199cf16 → 0.15.0-next-e0ce56e

package/build/modern/{chunk-RMVJK26W.js → chunk-XJQXHSH7.js}

@@ -11,7 +11,6 @@ function useRootColors(colors = []) {
   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 }),
@@ -36,4 +35,4 @@ function rootColorsReducer(state, action) {
 export {
   useRootColors
 };
-//# sourceMappingURL=chunk-RMVJK26W.js.map
+//# sourceMappingURL=chunk-XJQXHSH7.js.map

package/build/modern/chunk-XJQXHSH7.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  }, [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;AAAA,EAC/B,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/hooks/useRootColors.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   useRootColors
-} from "../chunk-RMVJK26W.js";
+} from "../chunk-XJQXHSH7.js";
 export {
   useRootColors
 };

package/build/modern/index.js

@@ -252,7 +252,7 @@ import {
 } from "./chunk-KGQG5JGW.js";
 import {
   useRootColors
-} from "./chunk-RMVJK26W.js";
+} from "./chunk-XJQXHSH7.js";
 import {
   MODE_KEY,
   THEME_KEY,

package/package.json

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

package/src/hooks/useRootColors.ts

@@ -38,7 +38,6 @@ export function useRootColors(colors: string[] = []): RootColorsResult {
   useEffect(() => {
     if (Object.keys(state).length === colors.length) return
     dispatch(formatColors(colors))
-    console.log('updating colors in root hook')
   }, [colors])
 
   // reducer is already memoized

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

@@ -1 +0,0 @@
-{"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":[]}