@fangxinyan/lumina 0.6.18 → 0.8.0

package/dist/{chunk-BVQOJKRX.js → chunk-BKW5PXEO.js}

@@ -1,47 +1,59 @@
-import { Button } from './chunk-IPSNC5VZ.js';
-import { Icon } from './chunk-FDZG27IG.js';
-import './tokens-RYJ3DFTU.css';
+import { useOverlayZIndex, useOverlayLayer, OverlayZIndexProvider } from './chunk-2A4GYSN4.js';
+import { Button } from './chunk-JHM7MN3G.js';
+import { Icon } from './chunk-LQMOYVQF.js';
+import { useComponentPortalTheme, InternalComponentThemePart, withComponentTheme } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Modal-ZFWNFEA5.css';
+import './Modal-UI2FXNDR.css';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 var ANIM_MS = 280;
-var ModalBase = React.forwardRef(({
-  open,
-  onClose,
-  onCancel,
-  onOk,
-  title,
-  description,
-  footer,
-  children,
-  width = 440,
-  closable = true,
-  closeIcon,
-  maskClosable = true,
-  maskClassName = "",
-  maskStyle,
-  escClosable = true,
-  okText = "\u786E\u5B9A",
-  cancelText = "\u53D6\u6D88",
-  okButtonProps,
-  cancelButtonProps,
-  confirmLoading,
-  bodyClassName = "",
-  bodyStyle,
-  bodyProps,
-  bodyOverflow,
-  destroyOnClose = false,
-  afterOpenChange,
-  zIndex,
-  className = "",
-  style,
-  onClick,
-  ...rest
-}, ref) => {
+var ModalBase = React.forwardRef((props, ref) => {
+  const hasExplicitWidth = props.width !== void 0;
+  const {
+    open,
+    onClose,
+    onCancel,
+    onOk,
+    title,
+    description,
+    footer,
+    children,
+    width = 440,
+    closable = true,
+    closeIcon,
+    maskClosable = true,
+    maskClassName = "",
+    maskStyle,
+    escClosable = true,
+    okText = "\u786E\u5B9A",
+    cancelText = "\u53D6\u6D88",
+    okButtonProps,
+    cancelButtonProps,
+    confirmLoading,
+    bodyClassName = "",
+    bodyStyle,
+    bodyProps,
+    bodyOverflow,
+    bodyInset = "safe",
+    destroyOnClose = false,
+    afterOpenChange,
+    zIndex,
+    className = "",
+    style,
+    onClick,
+    ...rest
+  } = props;
+  const portalContainer = usePortalContainer();
+  const portalTheme = useComponentPortalTheme("Modal");
+  const panelRef = React.useRef(null);
+  const titleId = React.useId();
+  const descriptionId = React.useId();
+  const overlayZIndex = useOverlayZIndex(open, zIndex);
   const [hasOpenedOnce, setHasOpenedOnce] = React.useState(open);
   React.useEffect(() => {
     if (open) setHasOpenedOnce(true);
@@ -50,29 +62,49 @@ var ModalBase = React.forwardRef(({
     if (onCancel) onCancel();
     else onClose?.();
   }, [onCancel, onClose]);
-  React.useEffect(() => {
-    if (!open || !escClosable) return;
-    const h = (e) => {
-      if (e.key === "Escape") handleCancel();
-    };
-    window.addEventListener("keydown", h);
-    return () => window.removeEventListener("keydown", h);
-  }, [open, escClosable, handleCancel]);
+  useOverlayLayer({
+    open: open && portalContainer != null,
+    containerRef: panelRef,
+    zIndex: overlayZIndex,
+    onEscape: handleCancel,
+    escapeEnabled: escClosable,
+    trapFocus: true,
+    autoFocus: true,
+    restoreFocus: true,
+    lockScroll: true
+  });
+  const setPanelRef = React.useCallback((node) => {
+    panelRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
   const prevOpen = React.useRef(open);
+  const afterOpenChangeRef = React.useRef(afterOpenChange);
+  afterOpenChangeRef.current = afterOpenChange;
   React.useEffect(() => {
     if (prevOpen.current !== open) {
       prevOpen.current = open;
-      if (afterOpenChange) {
-        const id = window.setTimeout(() => afterOpenChange(open), ANIM_MS);
-        return () => window.clearTimeout(id);
-      }
+      const id = window.setTimeout(() => afterOpenChangeRef.current?.(open), ANIM_MS);
+      return () => window.clearTimeout(id);
     }
-  }, [open, afterOpenChange]);
-  if (typeof document === "undefined") return null;
+  }, [open]);
+  if (!portalContainer) return null;
   if (!hasOpenedOnce) return null;
   if (!open && destroyOnClose) return null;
-  const overlayStyle = zIndex != null || maskStyle ? { ...maskStyle, ...zIndex != null ? { zIndex } : {} } : void 0;
-  const defaultFooter = /* @__PURE__ */ jsxs(Fragment, { children: [
+  const overlayStyle = {
+    ...portalTheme.styles.overlay,
+    ...maskStyle,
+    zIndex: overlayZIndex
+  };
+  const panelStyle = {
+    ...portalTheme.style,
+    width,
+    maxWidth: "92vw",
+    ...portalTheme.styles.popup,
+    ...hasExplicitWidth ? { width } : null,
+    ...style
+  };
+  const defaultFooter = /* @__PURE__ */ jsxs(InternalComponentThemePart, { components: "Button", children: [
     /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: handleCancel, ...cancelButtonProps, children: cancelText }),
     /* @__PURE__ */ jsx(
       Button,
@@ -85,21 +117,21 @@ var ModalBase = React.forwardRef(({
       }
     )
   ] });
-  const modalBodyStyle = bodyOverflow == null ? bodyStyle : { overflow: bodyOverflow, ...bodyStyle };
+  const modalBodyStyle = bodyOverflow == null ? { ...portalTheme.styles.body, ...bodyStyle } : { ...portalTheme.styles.body, overflow: bodyOverflow, ...bodyStyle };
   return ReactDOM.createPortal(
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(OverlayZIndexProvider, { zIndex: overlayZIndex, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: ["modal-overlay", open ? "" : "hidden", className, maskClassName].filter(Boolean).join(" "),
+        className: ["modal-overlay", open ? "" : "hidden", maskClassName].filter(Boolean).join(" "),
         style: overlayStyle,
         onClick: () => maskClosable && handleCancel(),
         role: "presentation",
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            ref,
-            className: "modal",
-            style: { width, ...style },
+            ref: setPanelRef,
+            className: ["modal", className].filter(Boolean).join(" "),
+            style: panelStyle,
             onClick: (e) => {
               onClick?.(e);
               e.stopPropagation();
@@ -107,12 +139,16 @@ var ModalBase = React.forwardRef(({
             role: "dialog",
             "aria-modal": true,
             "aria-hidden": !open,
+            "aria-labelledby": title ? titleId : void 0,
+            "aria-describedby": description ? descriptionId : void 0,
+            tabIndex: -1,
+            ...portalTheme.dataAttributes,
             ...rest,
             children: [
               (title || description || closable) && /* @__PURE__ */ jsxs("div", { className: "modal-head", children: [
                 /* @__PURE__ */ jsxs("div", { className: "modal-titles", children: [
-                  title && /* @__PURE__ */ jsx("div", { className: "modal-title", children: title }),
-                  description && /* @__PURE__ */ jsx("div", { className: "modal-desc", children: description })
+                  title && /* @__PURE__ */ jsx("div", { id: titleId, className: "modal-title", children: title }),
+                  description && /* @__PURE__ */ jsx("div", { id: descriptionId, className: "modal-desc", children: description })
                 ] }),
                 closable && /* @__PURE__ */ jsx(
                   "button",
@@ -129,7 +165,7 @@ var ModalBase = React.forwardRef(({
                 "div",
                 {
                   ...bodyProps,
-                  className: `modal-body ${bodyClassName}`.trim(),
+                  className: ["modal-body", `inset-${bodyInset}`, bodyClassName].filter(Boolean).join(" "),
                   style: modalBodyStyle,
                   children
                 }
@@ -139,11 +175,17 @@ var ModalBase = React.forwardRef(({
           }
         )
       }
-    ),
-    document.body
+    ) }),
+    portalContainer
   );
 });
 ModalBase.displayName = "Modal";
+var ThemedModalBase = withComponentTheme(
+  ModalBase,
+  "Modal",
+  ["modal", "button"],
+  { portalOnly: true }
+);
 var staticHandles = /* @__PURE__ */ new Set();
 var staticIconName = {
   confirm: "info",
@@ -189,13 +231,13 @@ var StaticModalHost = ({
       setLoading(true);
       result.then((next) => {
         if (next !== false) destroy();
-      }).finally(() => setLoading(false));
+      }, () => void 0).finally(() => setLoading(false));
       return;
     }
     destroy();
   }, [destroy, onOk]);
   const okVariant = kind === "error" ? "danger" : "primary";
-  const mergedFooter = footer !== void 0 ? footer : okCancel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  const mergedFooter = footer !== void 0 ? footer : okCancel ? /* @__PURE__ */ jsxs(InternalComponentThemePart, { components: "Button", children: [
     /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: close, ...cancelButtonProps, children: cancelText }),
     /* @__PURE__ */ jsx(
       Button,
@@ -207,7 +249,7 @@ var StaticModalHost = ({
         children: okText
       }
     )
-  ] }) : /* @__PURE__ */ jsx(
+  ] }) : /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Button", children: /* @__PURE__ */ jsx(
     Button,
     {
       variant: okVariant,
@@ -216,9 +258,9 @@ var StaticModalHost = ({
       ...okButtonProps,
       children: okText
     }
-  );
+  ) });
   return /* @__PURE__ */ jsx(
-    ModalBase,
+    ThemedModalBase,
     {
       ...modalProps,
       open,
@@ -227,7 +269,8 @@ var StaticModalHost = ({
       footer: mergedFooter,
       maskClosable: maskClosable ?? false,
       escClosable: escClosable ?? true,
-      className: `modal-static-overlay ${className}`,
+      className,
+      maskClassName: ["modal-static-overlay", config.maskClassName].filter(Boolean).join(" "),
       children: /* @__PURE__ */ jsxs("div", { className: "modal-static-body", children: [
         icon !== false && /* @__PURE__ */ jsx("span", { className: `modal-static-icon ${kind}`, children: icon ?? /* @__PURE__ */ jsx(Icon, { name: staticIconName[kind], size: 20 }) }),
         /* @__PURE__ */ jsx("div", { className: "modal-static-content", children: content ?? children })
@@ -284,7 +327,7 @@ var createStaticModal = (kind, config) => {
   render();
   return handle;
 };
-var Modal = ModalBase;
+var Modal = ThemedModalBase;
 Modal.confirm = (config) => createStaticModal("confirm", config);
 Modal.info = (config) => createStaticModal("info", config);
 Modal.success = (config) => createStaticModal("success", config);

package/dist/chunk-DRDDQCDD.js

@@ -0,0 +1,322 @@
+import { useVisualThemeSnapshot, useComponentOverrides, subscribeImperativeThemeChange, useOwnerPortalTheme, resolveVisualThemeSnapshot, componentTokensToStyle, visualThemeToStyle, VisualThemeProvider, ComponentOverridesProvider, OwnerPortalThemeProvider, DEFAULT_THEME_COLORS } from './chunk-ULTDRMGN.js';
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+var ACCENT_KEYS = /* @__PURE__ */ new Set([
+  "sky",
+  "coral",
+  "mint",
+  "violet",
+  "amber",
+  "rose"
+]);
+var InternalComponentThemePartContext = React.createContext([]);
+function InternalComponentThemePart({
+  components,
+  children
+}) {
+  const inherited = React.useContext(InternalComponentThemePartContext);
+  const value = React.useMemo(() => {
+    const next = Array.isArray(components) ? components : [components];
+    return [...inherited, ...next];
+  }, [components, inherited]);
+  return /* @__PURE__ */ jsx(InternalComponentThemePartContext.Provider, { value, children });
+}
+var THEME_COLOR_VARIABLES = {
+  bg: "--bg",
+  bgRaised: "--bg-raised",
+  bgSunken: "--bg-sunken",
+  fg: "--fg",
+  fgMuted: "--fg-muted",
+  fgSubtle: "--fg-subtle",
+  border: "--border",
+  divider: "--divider",
+  shadowDark: "--shadow-dark",
+  shadowLight: "--shadow-light",
+  accent: "--accent",
+  accentInk: "--accent-ink",
+  accentSoft: "--accent-soft",
+  accentGlow: "--accent-glow",
+  info: "--info",
+  success: "--success",
+  warning: "--warning",
+  danger: "--danger"
+};
+function normalizeComponentThemeInput(theme) {
+  if (theme === void 0) return void 0;
+  if (typeof theme === "string") {
+    return ACCENT_KEYS.has(theme) ? { accent: theme } : { baseColor: theme };
+  }
+  return theme;
+}
+function mergeComponentTheme(inherited, own) {
+  if (!inherited && !own) return void 0;
+  return {
+    ...inherited,
+    ...own,
+    colors: { ...inherited?.colors ?? {}, ...own?.colors ?? {} },
+    tokens: { ...inherited?.tokens ?? {}, ...own?.tokens ?? {} },
+    components: own?.components
+  };
+}
+function hasExplicitIconForeground(config) {
+  if (!config) return false;
+  return config.baseColor !== void 0 || config.colorScheme !== void 0 || config.colors?.fg !== void 0 || config.tokens?.fg !== void 0 || config.tokens?.["--fg"] !== void 0 || config.tokens?.["--lmn-icon-fg"] !== void 0;
+}
+function getStaticColorScheme(rootElement) {
+  if (typeof document === "undefined") return "light";
+  const inheritedElement = rootElement?.parentElement ?? document.documentElement;
+  const themeScope = inheritedElement.closest("[data-theme]");
+  return themeScope?.dataset.theme === "dark" ? "dark" : "light";
+}
+function hasLocalStaticThemeScope(rootElement) {
+  if (!rootElement || typeof document === "undefined") return false;
+  const themeScope = rootElement.parentElement?.closest("[data-theme]");
+  return themeScope != null && themeScope !== document.documentElement && themeScope !== document.body;
+}
+function getFallbackSnapshot(rootElement) {
+  const colorScheme = getStaticColorScheme(rootElement);
+  return {
+    colorScheme,
+    intensity: 5,
+    colors: { ...DEFAULT_THEME_COLORS[colorScheme] }
+  };
+}
+function getDefaultSnapshot(rootElement) {
+  const fallback = getFallbackSnapshot(rootElement);
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return fallback;
+  }
+  const inheritedElement = rootElement?.parentElement ?? document.documentElement;
+  const computed = window.getComputedStyle(inheritedElement);
+  const colors = { ...fallback.colors };
+  for (const key of Object.keys(THEME_COLOR_VARIABLES)) {
+    const value = computed.getPropertyValue(THEME_COLOR_VARIABLES[key]).trim();
+    if (value) colors[key] = value;
+  }
+  const shadowDepth = Number.parseFloat(computed.getPropertyValue("--d"));
+  const intensity = Number.isFinite(shadowDepth) ? (shadowDepth - 0.4) / 0.12 : fallback.intensity;
+  return { ...fallback, intensity, colors };
+}
+function createInheritedTokenResetStyle(ownerStyle, cssPrefixes) {
+  const variablePrefixes = cssPrefixes.map((prefix) => `--lmn-${prefix}-`);
+  const style = {};
+  for (const property of Object.keys(ownerStyle)) {
+    if (variablePrefixes.some((prefix) => property.startsWith(prefix))) {
+      style[property] = "initial";
+    }
+  }
+  return style;
+}
+function useComponentThemeRootRef(forwardedRef, { component, theme }) {
+  const inheritedVisualTheme = useVisualThemeSnapshot();
+  const inheritedOverrides = useComponentOverrides();
+  const [rootState, setRootState] = React.useState({
+    element: null,
+    revision: 0
+  });
+  const mountedRootRef = React.useRef(null);
+  const tracksRootElement = React.useRef(false);
+  const shouldTrackConfiguredTheme = inheritedVisualTheme === null && (theme !== void 0 || inheritedOverrides[component] !== void 0);
+  const shouldDetectLocalStaticTheme = inheritedVisualTheme === null;
+  const rootRef = React.useCallback((node) => {
+    mountedRootRef.current = node;
+    const shouldTrackNode = node !== null && (shouldTrackConfiguredTheme || shouldDetectLocalStaticTheme && hasLocalStaticThemeScope(node));
+    if (shouldTrackNode) {
+      tracksRootElement.current = true;
+      setRootState((current) => current.element === node ? current : { element: node, revision: current.revision + 1 });
+    } else if (node !== null) {
+      tracksRootElement.current = false;
+      setRootState((current) => current.element === null ? current : { element: null, revision: current.revision + 1 });
+    } else {
+      tracksRootElement.current = false;
+    }
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  }, [forwardedRef, shouldDetectLocalStaticTheme, shouldTrackConfiguredTheme]);
+  useIsomorphicLayoutEffect(() => {
+    if (!shouldDetectLocalStaticTheme) return;
+    return subscribeImperativeThemeChange((target) => {
+      const node = mountedRootRef.current;
+      if (!node || !target.contains(node)) return;
+      const shouldTrackNode = shouldTrackConfiguredTheme || hasLocalStaticThemeScope(node);
+      if (!shouldTrackNode && !tracksRootElement.current) return;
+      tracksRootElement.current = shouldTrackNode;
+      setRootState((current) => ({
+        element: shouldTrackNode ? node : null,
+        revision: current.revision + 1
+      }));
+    });
+  }, [shouldDetectLocalStaticTheme, shouldTrackConfiguredTheme]);
+  return [rootState.element, rootRef];
+}
+function ComponentThemeBoundary({
+  component,
+  cssPrefix,
+  theme,
+  rootElement,
+  children
+}) {
+  const inheritedVisualTheme = useVisualThemeSnapshot();
+  const inheritedOwner = useOwnerPortalTheme();
+  const inheritedOverrides = useComponentOverrides();
+  const internalComponents = React.useContext(InternalComponentThemePartContext);
+  const own = normalizeComponentThemeInput(theme);
+  const override = inheritedOverrides[component];
+  const config = mergeComponentTheme(override, own);
+  const active = config !== void 0;
+  const scope = own?.scope ?? "self";
+  const cssPrefixes = Array.isArray(cssPrefix) ? cssPrefix : [cssPrefix];
+  const isOwnedInternalPart = internalComponents.includes(component);
+  const matchesInheritedCssPrefix = cssPrefixes.some(
+    (prefix) => inheritedOwner?.cssPrefixes.includes(prefix)
+  );
+  const shouldResetSelfTheme = !active && inheritedOwner !== null && !isOwnedInternalPart && (inheritedOwner?.component === component || matchesInheritedCssPrefix) && !inheritedOwner.subtree;
+  const hasLocalStaticTheme = inheritedVisualTheme === null && hasLocalStaticThemeScope(rootElement);
+  const inheritedSnapshot = inheritedVisualTheme ?? (shouldResetSelfTheme && inheritedOwner ? inheritedOwner.inheritedSnapshot : active || hasLocalStaticTheme ? getDefaultSnapshot(rootElement) : getFallbackSnapshot(rootElement));
+  const snapshot = active ? resolveVisualThemeSnapshot(config, inheritedSnapshot) : inheritedSnapshot;
+  const inheritedTokenResetStyle = shouldResetSelfTheme && inheritedOwner ? createInheritedTokenResetStyle(inheritedOwner.style, cssPrefixes) : {};
+  const prefixedStyle = active || shouldResetSelfTheme ? cssPrefixes.reduce((result, currentPrefix) => {
+    const prefix = `lmn-${currentPrefix}-`;
+    return {
+      ...result,
+      ...visualThemeToStyle(snapshot, prefix),
+      ...active ? componentTokensToStyle(config.tokens, prefix) : null
+    };
+  }, inheritedTokenResetStyle) : {};
+  const subtreeStyle = active && scope === "subtree" ? visualThemeToStyle(snapshot) : {};
+  const styles = override?.styles ?? {};
+  const rootStyle = {
+    ...styles.root ?? {},
+    ...prefixedStyle,
+    ...subtreeStyle
+  };
+  const rootDataAttributes = active || shouldResetSelfTheme ? active && scope === "subtree" ? {
+    "data-theme": snapshot.colorScheme,
+    "data-lumina-color-scheme": snapshot.colorScheme
+  } : { "data-lumina-color-scheme": snapshot.colorScheme } : {};
+  if (component === "Icon" && active && hasExplicitIconForeground(config)) {
+    rootDataAttributes["data-lumina-icon-color"] = "";
+  }
+  const shouldApplyPortalTheme = active || inheritedVisualTheme !== null || hasLocalStaticTheme;
+  const portalStyle = shouldApplyPortalTheme ? {
+    ...visualThemeToStyle(inheritedSnapshot),
+    ...prefixedStyle,
+    ...scope === "subtree" ? subtreeStyle : {}
+  } : {};
+  const portalDataAttributes = shouldApplyPortalTheme ? {
+    "data-theme": scope === "subtree" ? snapshot.colorScheme : inheritedSnapshot.colorScheme,
+    "data-lumina-color-scheme": snapshot.colorScheme
+  } : {};
+  const state = {
+    active,
+    scope,
+    snapshot,
+    rootStyle,
+    rootDataAttributes,
+    portalStyle,
+    portalDataAttributes,
+    styles
+  };
+  const consumedIndex = internalComponents.indexOf(component);
+  const remainingInternalComponents = isOwnedInternalPart ? [
+    ...internalComponents.slice(0, consumedIndex),
+    ...internalComponents.slice(consumedIndex + 1)
+  ] : internalComponents;
+  const ownerPortalTheme = active ? {
+    component,
+    cssPrefixes,
+    style: portalStyle,
+    colorScheme: snapshot.colorScheme,
+    inheritedColorScheme: inheritedSnapshot.colorScheme,
+    inheritedSnapshot,
+    subtree: scope === "subtree",
+    styles
+  } : shouldResetSelfTheme ? null : inheritedOwner;
+  const providedVisualTheme = active && scope === "subtree" ? snapshot : !active && hasLocalStaticTheme ? inheritedSnapshot : null;
+  return /* @__PURE__ */ jsx(VisualThemeProvider, { value: providedVisualTheme ?? inheritedVisualTheme, children: /* @__PURE__ */ jsx(ComponentOverridesProvider, { value: own?.components, children: /* @__PURE__ */ jsx(OwnerPortalThemeProvider, { value: ownerPortalTheme, children: /* @__PURE__ */ jsx(InternalComponentThemePartContext.Provider, { value: remainingInternalComponents, children: children(state) }) }) }) });
+}
+function mergeComponentRootStyleWithInstanceStyle(rootStyle, instanceStyle) {
+  if (!instanceStyle) return rootStyle;
+  const overrides = {};
+  const instanceRecord = instanceStyle;
+  for (const property of Object.keys(rootStyle)) {
+    if (Object.prototype.hasOwnProperty.call(instanceRecord, property)) {
+      overrides[property] = instanceRecord[property];
+    }
+  }
+  return { ...rootStyle, ...overrides };
+}
+function withInternalComponentThemePart(Component, components) {
+  const Wrapped = React.forwardRef(
+    (props, ref) => /* @__PURE__ */ jsx(InternalComponentThemePart, { components, children: React.createElement(Component, { ...props, ref }) })
+  );
+  Wrapped.displayName = `InternalThemePart(${typeof Component === "string" ? Component : Component.displayName ?? Component.name ?? "Component"})`;
+  return Wrapped;
+}
+function useComponentPortalTheme(component) {
+  const owner = useOwnerPortalTheme();
+  const inherited = useVisualThemeSnapshot();
+  const matchesOwner = owner && (Array.isArray(component) ? component.includes(owner.component) : owner.component === component);
+  if (matchesOwner && owner) {
+    return {
+      style: owner.style,
+      dataAttributes: {
+        "data-theme": owner.subtree ? owner.colorScheme : owner.inheritedColorScheme,
+        "data-lumina-color-scheme": owner.colorScheme
+      },
+      styles: owner.styles
+    };
+  }
+  if (!inherited) {
+    return { style: {}, dataAttributes: {}, styles: {} };
+  }
+  return {
+    style: visualThemeToStyle(inherited),
+    dataAttributes: {
+      "data-theme": inherited.colorScheme,
+      "data-lumina-color-scheme": inherited.colorScheme
+    },
+    styles: {}
+  };
+}
+function withComponentTheme(Component, component, cssPrefix = component.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), options = {}) {
+  const Wrapped = React.forwardRef((props, ref) => {
+    const { theme, style, ...rest } = props;
+    const [rootElement, rootRef] = useComponentThemeRootRef(
+      options.portalOnly ? void 0 : ref,
+      { component, theme }
+    );
+    const themedNode = /* @__PURE__ */ jsx(
+      ComponentThemeBoundary,
+      {
+        component,
+        cssPrefix,
+        theme,
+        rootElement,
+        children: (state) => React.createElement(Component, {
+          ...rest,
+          ...state.rootDataAttributes,
+          ref: options.portalOnly ? ref : rootRef,
+          style: { ...state.rootStyle, ...style }
+        })
+      }
+    );
+    if (!options.portalOnly) return themedNode;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "template",
+        {
+          ref: rootRef,
+          "data-lumina-theme-anchor": component
+        }
+      ),
+      themedNode
+    ] });
+  });
+  Wrapped.displayName = Component.displayName ?? component;
+  return Wrapped;
+}
+
+export { ComponentThemeBoundary, InternalComponentThemePart, mergeComponentRootStyleWithInstanceStyle, normalizeComponentThemeInput, useComponentPortalTheme, useComponentThemeRootRef, withComponentTheme, withInternalComponentThemePart };