"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BloomColorScope = BloomColorScope;
exports.useColorScopeStyle = useColorScopeStyle;
var _react = _interopRequireWildcard(require("react"));
var _BloomThemeProvider = require("../BloomThemeProvider.js");
var _buildTheme = require("../build-theme.js");
var _tokenRegistry = require("../token-registry.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
 * `getResolvedTokens` returns every canonical token already resolved to an sRGB
 * `rgb(...)` string — the SAME pipeline the document-root web writer and the
 * native writer use. Scoped onto an element's inline `style`, Tailwind v4's
 * compiled utilities read these as `var(--x)` directly, so each base token is a
 * full CSS color with no per-value wrapping needed.
 */function buildWebScopeVars(colorPreset, mode) {
  return (0, _tokenRegistry.getResolvedTokens)(colorPreset, mode);
}

/**
 * On web, the single `asChild` child is frequently a react-native-web
 * component (e.g. RN `<View>`) whose `style` prop is a *style array* (or a
 * numeric registered-style id), not a plain `React.CSSProperties` object.
 * react-native-web flattens nested style arrays, so the cloned child must
 * receive an array — spreading an array into an object literal would copy its
 * numeric indices as keys and crash RNW when it commits them to the DOM
 * (`Failed to set an indexed property [0] on 'CSSStyleDeclaration'`).
 */

function BloomColorScope({
  colorPreset,
  asChild = false,
  style,
  children
}) {
  const parent = (0, _react.useContext)(_BloomThemeProvider.BloomThemeContext);
  if (!parent) {
    throw new Error('BloomColorScope must be used within a <BloomThemeProvider>');
  }
  if (!colorPreset) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: children
  });
  const resolvedMode = parent.theme.mode;
  const contextValue = (0, _react.useMemo)(() => {
    const theme = (0, _buildTheme.buildTheme)(colorPreset, resolvedMode);
    return {
      ...parent,
      theme,
      colorPreset
    };
  }, [colorPreset, resolvedMode, parent]);
  const varsStyle = (0, _react.useMemo)(() => buildWebScopeVars(colorPreset, resolvedMode), [colorPreset, resolvedMode]);
  let content;
  if (asChild) {
    const child = _react.Children.only(children);
    if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
      throw new Error('BloomColorScope with `asChild` requires a single React element child that accepts a `style` prop.');
    }
    // Merge as a style ARRAY (the RNW-safe form): scope vars first, then the
    // caller's `style`, then the child's own `style` last so its explicit
    // styles win. react-native-web flattens nested arrays correctly; spreading
    // the child's style (which is often an RN style array or numeric id) into an
    // object literal would copy numeric indices as keys and crash RNW.
    const childStyle = child.props.style;
    const mergedStyle = [varsStyle, style, childStyle];
    content = /*#__PURE__*/(0, _react.cloneElement)(child, {
      style: mergedStyle
    });
  } else {
    // A plain DOM `<div>` does NOT accept style arrays — only the cloned child
    // path can, so the wrapper keeps using an object spread.
    const mergedStyle = {
      ...varsStyle,
      ...style
    };
    content = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: mergedStyle,
      children: children
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BloomThemeProvider.BloomThemeContext.Provider, {
    value: contextValue,
    children: content
  });
}

/**
 * Escape hatch for advanced cases where the wrapping element is owned by the
 * caller. Returns a stable React style object carrying the preset's CSS vars.
 */
function useColorScopeStyle(colorPreset) {
  const parent = (0, _react.useContext)(_BloomThemeProvider.BloomThemeContext);
  if (!parent) {
    throw new Error('useColorScopeStyle must be used within a <BloomThemeProvider>');
  }
  const resolvedMode = parent.theme.mode;
  return (0, _react.useMemo)(() => buildWebScopeVars(colorPreset, resolvedMode), [colorPreset, resolvedMode]);
}
//# sourceMappingURL=index.web.js.map