@fangxinyan/lumina 0.6.17 → 0.7.0

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 };

package/dist/chunk-DU2DSERH.js

@@ -0,0 +1,190 @@
+import { cloneLuminaThemePreset } from './chunk-TSL3F2K3.js';
+import { normalizeComponentThemeInput, useComponentThemeRootRef, ComponentThemeBoundary } from './chunk-DRDDQCDD.js';
+import { useThemeOptional, mergeComponentThemeOverrides, ComponentOverridesProvider, ThemeProvider } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Surface-CTN775GD.css';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function createSurfaceThemePreset(key) {
+  const preset = cloneLuminaThemePreset(key);
+  delete preset.density;
+  delete preset.font;
+  delete preset.label;
+  delete preset.description;
+  return preset;
+}
+var SURFACE_THEME_PRESETS = {
+  mist: createSurfaceThemePreset("light"),
+  porcelain: createSurfaceThemePreset("porcelain"),
+  graphite: createSurfaceThemePreset("graphite"),
+  ember: createSurfaceThemePreset("ember")
+};
+var surfacePresetMap = SURFACE_THEME_PRESETS;
+var isDefined = (value) => value !== void 0;
+var Surface = React.forwardRef(
+  ({
+    preset = "inherit",
+    tone = "base",
+    variant = "plain",
+    padding = "md",
+    radius = "lg",
+    height = "content",
+    bordered,
+    scrollable,
+    mode,
+    colorScheme,
+    accent,
+    baseColor,
+    density,
+    intensity,
+    themeRadius,
+    font,
+    tokens,
+    colors,
+    components,
+    theme,
+    themes,
+    className = "",
+    children,
+    style,
+    ...rest
+  }, ref) => {
+    const inherited = useThemeOptional();
+    const normalizedTheme = normalizeComponentThemeInput(theme);
+    const presetConfig = preset === "inherit" ? void 0 : surfacePresetMap[preset];
+    const effectiveSurfaceMode = mode ?? colorScheme ?? normalizedTheme?.colorScheme ?? presetConfig?.base ?? inherited?.mode ?? "light";
+    const [systemDark, setSystemDark] = React.useState(
+      () => typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches
+    );
+    React.useEffect(() => {
+      if (effectiveSurfaceMode !== "system" || typeof window === "undefined") return;
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      setSystemDark(media.matches);
+      const handleChange = (event) => setSystemDark(event.matches);
+      media.addEventListener?.("change", handleChange);
+      return () => media.removeEventListener?.("change", handleChange);
+    }, [effectiveSurfaceMode]);
+    const registeredModePreset = effectiveSurfaceMode != null && effectiveSurfaceMode !== "light" && effectiveSurfaceMode !== "dark" && effectiveSurfaceMode !== "system" ? themes?.[effectiveSurfaceMode] ?? inherited?.themes[effectiveSurfaceMode] : void 0;
+    const localComponents = mergeComponentThemeOverrides(
+      normalizedTheme?.components,
+      components
+    );
+    const hasLocalComponentPalette = normalizedTheme != null && [
+      normalizedTheme.baseColor,
+      normalizedTheme.colorScheme,
+      normalizedTheme.accent,
+      normalizedTheme.intensity,
+      normalizedTheme.colors,
+      normalizedTheme.tokens
+    ].some(isDefined);
+    const usesLocalTheme = preset !== "inherit" || isDefined(mode) || isDefined(colorScheme) || isDefined(accent) || isDefined(baseColor) || isDefined(density) || isDefined(intensity) || isDefined(themeRadius) || isDefined(font) || isDefined(tokens) || isDefined(colors) || hasLocalComponentPalette || isDefined(themes);
+    const modeBaseColorScheme = effectiveSurfaceMode === "light" || effectiveSurfaceMode === "dark" ? effectiveSurfaceMode : effectiveSurfaceMode === "system" ? systemDark ? "dark" : "light" : void 0;
+    const localSurfaceColorScheme = modeBaseColorScheme ?? colorScheme ?? normalizedTheme?.colorScheme ?? presetConfig?.base ?? registeredModePreset?.base;
+    const hasLocalSurfacePalette = presetConfig != null || registeredModePreset != null || mode === "light" || mode === "dark" || [
+      colorScheme,
+      accent,
+      baseColor,
+      intensity,
+      tokens,
+      colors
+    ].some(isDefined) || hasLocalComponentPalette;
+    const localSurfaceTheme = hasLocalSurfacePalette ? {
+      colorScheme: localSurfaceColorScheme,
+      baseColor: baseColor ?? normalizedTheme?.baseColor ?? presetConfig?.baseColor ?? registeredModePreset?.baseColor,
+      accent: accent ?? normalizedTheme?.accent ?? presetConfig?.accent ?? registeredModePreset?.accent,
+      intensity: intensity ?? normalizedTheme?.intensity ?? presetConfig?.intensity ?? registeredModePreset?.intensity,
+      tokens: {
+        ...registeredModePreset?.tokens ?? {},
+        ...presetConfig?.tokens ?? {},
+        ...normalizedTheme?.tokens ?? {},
+        ...tokens ?? {}
+      },
+      colors: {
+        ...registeredModePreset?.colors ?? {},
+        ...presetConfig?.colors ?? {},
+        ...normalizedTheme?.colors ?? {},
+        ...colors ?? {}
+      },
+      scope: "self"
+    } : void 0;
+    const [themeRootElement, themeRootRef] = useComponentThemeRootRef(
+      ref,
+      { component: "Surface", theme: localSurfaceTheme }
+    );
+    const cls = [
+      "surface",
+      `tone-${tone}`,
+      variant,
+      `pad-${padding}`,
+      `radius-${radius}`,
+      `height-${height}`,
+      bordered && "bordered",
+      scrollable && "scrollable",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      ComponentThemeBoundary,
+      {
+        component: "Surface",
+        cssPrefix: "surface",
+        theme: localSurfaceTheme,
+        rootElement: themeRootElement,
+        children: (themeState) => {
+          const surfaceNode = /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: themeRootRef,
+              className: cls,
+              "data-surface-preset": preset === "inherit" ? void 0 : preset,
+              "data-surface-tone": tone,
+              ...themeState.rootDataAttributes,
+              ...rest,
+              style: { ...themeState.rootStyle, ...style },
+              children
+            }
+          );
+          return /* @__PURE__ */ jsx(ComponentOverridesProvider, { value: localComponents, children: /* @__PURE__ */ jsx(
+            ThemeProvider,
+            {
+              enabled: usesLocalTheme,
+              target: "scope",
+              asChild: true,
+              mode: effectiveSurfaceMode,
+              colorScheme: localSurfaceColorScheme ?? inherited?.colorScheme ?? "light",
+              baseColor: baseColor ?? normalizedTheme?.baseColor ?? presetConfig?.baseColor,
+              accent: accent ?? normalizedTheme?.accent ?? presetConfig?.accent,
+              density: density ?? presetConfig?.density ?? registeredModePreset?.density ?? inherited?.density ?? "comfortable",
+              intensity: intensity ?? normalizedTheme?.intensity ?? presetConfig?.intensity ?? registeredModePreset?.intensity ?? inherited?.intensity ?? 5,
+              radius: themeRadius ?? presetConfig?.radius ?? registeredModePreset?.radius ?? inherited?.radius ?? 20,
+              font: font ?? presetConfig?.font ?? registeredModePreset?.font ?? inherited?.font ?? "sf",
+              tokens: {
+                ...presetConfig?.tokens ?? {},
+                ...normalizedTheme?.tokens ?? {},
+                ...tokens ?? {}
+              },
+              colors: {
+                ...presetConfig?.colors ?? {},
+                ...normalizedTheme?.colors ?? {},
+                ...colors ?? {}
+              },
+              components: mergeComponentThemeOverrides(
+                presetConfig?.components,
+                localComponents
+              ),
+              themes: {
+                ...inherited?.themes ?? {},
+                ...themes ?? {}
+              },
+              children: surfaceNode
+            }
+          ) });
+        }
+      }
+    );
+  }
+);
+Surface.displayName = "Surface";
+
+export { SURFACE_THEME_PRESETS, Surface };