braid-design-system/dist/lib/playroom/useScope.cjs

Themeable design system for the SEEK Group

"use strict";
const react = require("react");
const entries_css_cjs = require("../../css.cjs");
const lib_playroom_playroomState_cjs = require("./playroomState.cjs");
const lib_css_atoms_sprinkles_css_cjs = require("../css/atoms/sprinkles.css.cjs");
const lib_components_useResponsiveValue_useResponsiveValue_cjs = require("../components/useResponsiveValue/useResponsiveValue.cjs");
const lib_components_useToast_ToastContext_cjs = require("../components/useToast/ToastContext.cjs");
const lib_css_breakpoints_cjs = require("../css/breakpoints.cjs");
function useScope() {
  const responsiveValue = lib_components_useResponsiveValue_useResponsiveValue_cjs.useResponsiveValue();
  const showToast = lib_components_useToast_ToastContext_cjs.useToast();
  const playroomState = lib_playroom_playroomState_cjs.usePlayroomStore();
  const [colorMode, setColorMode] = react.useState(
    "lightMode"
  );
  react.useEffect(() => {
    const observer = new MutationObserver((mutationsList) => {
      for (const mutation of mutationsList) {
        if (mutation.type === "attributes" && mutation.attributeName === "class") {
          setColorMode(
            document.documentElement.classList.contains(lib_css_atoms_sprinkles_css_cjs.darkMode) ? "darkMode" : "lightMode"
          );
        }
      }
    });
    observer.observe(document.documentElement, { attributes: true });
    return () => {
      observer.disconnect();
    };
  }, [colorMode]);
  function playroomColorModeValue(value) {
    if (typeof value !== "object" || !(value.darkMode || value.lightMode)) {
      return;
    }
    return document.documentElement.classList.contains(lib_css_atoms_sprinkles_css_cjs.darkMode) ? value.darkMode : value.lightMode;
  }
  function playroomResponsiveValue(value) {
    Object.values(value).forEach((v) => {
      if (v === null) {
        throw new Error(
          `You cannot use 'null' as a value when using 'responsiveValue'.`
        );
      }
    });
    const resolvedValue = responsiveValue(value);
    if (resolvedValue === null) {
      return value.mobile;
    }
    return resolvedValue;
  }
  return {
    vars: entries_css_cjs.vars,
    atoms: entries_css_cjs.atoms,
    breakpoints: lib_css_breakpoints_cjs.breakpoints,
    showToast,
    responsiveValue: playroomResponsiveValue,
    colorModeValue: playroomColorModeValue,
    ...playroomState
  };
}
exports.useScope = useScope;