@cerberus-design/react/dist/hooks/useRootColors.cjs

The Cerberus Design React component library.

'use client';
'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const React = require('react');

function useRootColors(colors = []) {
  const [state, dispatch] = React.useReducer(rootColorsReducer, {});
  const handleRefetch = React.useCallback(() => {
    return new Promise((resolve) => {
      dispatch(formatColors(colors));
      resolve();
    });
  }, [colors]);
  React.useEffect(() => {
    if (Object.keys(state).length === colors.length) return;
    dispatch(formatColors(colors));
  }, [colors, state]);
  return React.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 };
}

exports.useRootColors = useRootColors;