"use strict";

import React, { Children, cloneElement, isValidElement, useContext, useMemo } from 'react';
import { BloomThemeContext } from "../BloomThemeProvider.js";
import { buildTheme } from "../build-theme.js";
import { getResolvedTokens } from "../token-registry.js";

/**
 * `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.
 */
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
function buildWebScopeVars(colorPreset, mode) {
  return 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'`).
 */

export function BloomColorScope({
  colorPreset,
  asChild = false,
  style,
  children
}) {
  const parent = useContext(BloomThemeContext);
  if (!parent) {
    throw new Error('BloomColorScope must be used within a <BloomThemeProvider>');
  }
  if (!colorPreset) return /*#__PURE__*/_jsx(_Fragment, {
    children: children
  });
  const resolvedMode = parent.theme.mode;
  const contextValue = useMemo(() => {
    const theme = buildTheme(colorPreset, resolvedMode);
    return {
      ...parent,
      theme,
      colorPreset
    };
  }, [colorPreset, resolvedMode, parent]);
  const varsStyle = useMemo(() => buildWebScopeVars(colorPreset, resolvedMode), [colorPreset, resolvedMode]);
  let content;
  if (asChild) {
    const child = Children.only(children);
    if (! /*#__PURE__*/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__*/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__*/_jsx("div", {
      style: mergedStyle,
      children: children
    });
  }
  return /*#__PURE__*/_jsx(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.
 */
export function useColorScopeStyle(colorPreset) {
  const parent = useContext(BloomThemeContext);
  if (!parent) {
    throw new Error('useColorScopeStyle must be used within a <BloomThemeProvider>');
  }
  const resolvedMode = parent.theme.mode;
  return useMemo(() => buildWebScopeVars(colorPreset, resolvedMode), [colorPreset, resolvedMode]);
}
//# sourceMappingURL=index.web.js.map