import { jsx } from 'react/jsx-runtime';
import { useContext, useMemo } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
import { t as themeStyles } from './ThemeProvider.module-_7m6Tav-.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';

function kebabize(str) {
  return str.split("").map((letter, idx) => {
    const prevChar = str[idx - 1];
    if (!isNaN(parseFloat(letter))) {
      if (!isNaN(parseFloat(prevChar))) {
        return letter;
      }
      return `${idx !== 0 ? "-" : ""}${letter.toLowerCase()}`;
    }
    return letter.toUpperCase() === letter ? `${idx !== 0 ? "-" : ""}${letter.toLowerCase()}` : letter;
  }).join("");
}

const ThemeProvider = (props) => {
  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
  const {
    theme,
    mode: modeProp,
    children,
    className: classNameProp,
    prefix = "a2",
    style,
    ...rest
  } = componentProps;
  const { mode: modeContext } = useContext(ThemeProviderContext);
  const mode = modeProp ?? modeContext;
  const classNameCombined = cx(themeStyles["theme-provider"], classNameProp, {
    [themeStyles["mode-dark"]]: mode === "dark",
    [themeStyles["mode-light"]]: mode === "light"
  });
  const createCustomThemeStyle = useMemo(() => {
    if (!theme) return;
    const styleObj = {};
    const themeTokens = {
      ...theme.primitive,
      ...theme.semantic,
      ...theme.component
    };
    Object.keys(themeTokens).forEach((token) => {
      const light = themeTokens[token].value;
      const dark = themeTokens[token].extensions?.appearance?.dark.value;
      const tokenName = [prefix, kebabize(token)].join("-");
      if (!dark) {
        styleObj[`--${tokenName}`] = light;
        return;
      }
      styleObj[`--${tokenName}`] = `light-dark(${light}, ${dark})`;
    });
    return styleObj;
  }, [prefix, theme]);
  const styleCombined = {
    ...style,
    ...layoutStyles,
    ...createCustomThemeStyle
  };
  const value = useMemo(() => ({ theme, mode }), [theme, mode]);
  return /* @__PURE__ */ jsx(ThemeProviderContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: classNameCombined, style: styleCombined, ...rest, children }) });
};
ThemeProvider.displayName = "ThemeProvider";

export { ThemeProvider as T };
//# sourceMappingURL=ThemeProvider-Sd8LK0A9.js.map
