@fangxinyan/lumina 0.6.1 → 0.6.3

package/dist/chunk-5MN3PMF4.cjs

@@ -0,0 +1,240 @@
+'use strict';
+
+var chunkYB3IWIOJ_cjs = require('./chunk-YB3IWIOJ.cjs');
+var chunkHKF2V5MM_cjs = require('./chunk-HKF2V5MM.cjs');
+var chunkV272XR3F_cjs = require('./chunk-V272XR3F.cjs');
+require('./tokens-BIIUTPKN.css');
+require('./shared-NJHRNLRH.css');
+require('./Cascader-3BLLA7EN.css');
+var React = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var collectPaths = (options, prefix = []) => options.flatMap((option) => {
+  const next = [...prefix, option];
+  if (option.children?.length) return collectPaths(option.children, next);
+  return [next];
+});
+var defaultSearchFilter = (inputValue, path) => {
+  const q = inputValue.trim().toLowerCase();
+  if (!q) return true;
+  return path.map((option) => String(option.label ?? option.value)).join(" / ").toLowerCase().includes(q);
+};
+var Cascader = React__namespace.forwardRef(({
+  options,
+  value,
+  defaultValue = [],
+  onChange,
+  placeholder = "\u8BF7\u9009\u62E9",
+  disabled,
+  allowClear,
+  onClear,
+  changeOnSelect,
+  showSearch,
+  popupClassName = "",
+  dropdownClassName = "",
+  className = "",
+  ...rest
+}, ref) => {
+  const [inner, setInner] = React__namespace.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const cur = isControlled ? value : inner;
+  const [open, setOpen] = React__namespace.useState(false);
+  const [path, setPath] = React__namespace.useState(cur);
+  const [query, setQuery] = React__namespace.useState("");
+  const panelRef = React__namespace.useRef(null);
+  const searchRef = React__namespace.useRef(null);
+  const searchConfig = typeof showSearch === "object" ? showSearch : {};
+  const searchable = !!showSearch;
+  const { triggerRef, floatingStyle } = chunkYB3IWIOJ_cjs.useFloating({
+    open,
+    placement: "bottom",
+    panelWidth: 520,
+    panelHeight: 260
+  });
+  const setTriggerRef = React__namespace.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref, triggerRef]
+  );
+  React__namespace.useEffect(() => {
+    const h = (e) => {
+      const t = e.target;
+      if (triggerRef.current?.contains(t)) return;
+      if (panelRef.current?.contains(t)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, []);
+  React__namespace.useEffect(() => {
+    if (open) setPath(cur);
+    if (!open) setQuery("");
+  }, [open, cur]);
+  React__namespace.useEffect(() => {
+    if (!open || !searchable) return;
+    requestAnimationFrame(() => searchRef.current?.focus());
+  }, [open, searchable]);
+  const columns = [options];
+  let cursor = options;
+  for (const v of path) {
+    const match = cursor.find((o) => o.value === v);
+    if (match && match.children) {
+      cursor = match.children;
+      columns.push(cursor);
+    } else break;
+  }
+  const selectedOptionsForPath = (nextPath) => {
+    const selected = [];
+    let list2 = options;
+    for (const item of nextPath) {
+      const match = list2.find((option) => option.value === item);
+      if (!match) break;
+      selected.push(match);
+      list2 = match.children ?? [];
+    }
+    return selected;
+  };
+  const commit = (nextPath, closeAfterSelect) => {
+    if (!isControlled) setInner(nextPath);
+    onChange?.(nextPath, selectedOptionsForPath(nextPath));
+    if (closeAfterSelect) setOpen(false);
+  };
+  const pick = (depth, val, hasChildren) => {
+    const np = [...path.slice(0, depth), val];
+    setPath(np);
+    if (!hasChildren || changeOnSelect) commit(np, !hasChildren);
+  };
+  const clear = (e) => {
+    e.stopPropagation();
+    if (disabled) return;
+    setPath([]);
+    if (!isControlled) setInner([]);
+    onChange?.([], []);
+    onClear?.();
+  };
+  const labels = [];
+  let list = options;
+  for (const v of cur) {
+    const m = list.find((o) => o.value === v);
+    if (!m) break;
+    labels.push(m.label);
+    if (!m.children) break;
+    list = m.children;
+  }
+  const allPaths = React__namespace.useMemo(() => collectPaths(options), [options]);
+  const matchedPaths = React__namespace.useMemo(() => {
+    if (!query.trim()) return [];
+    const filter = searchConfig.filter ?? defaultSearchFilter;
+    const result = allPaths.filter((itemPath) => filter(query, itemPath));
+    const limit = searchConfig.limit === false ? result.length : searchConfig.limit ?? 50;
+    return result.slice(0, limit);
+  }, [allPaths, query, searchConfig.filter, searchConfig.limit]);
+  const panelClassName = [
+    "cascader-panel",
+    searchable && "with-search",
+    popupClassName,
+    dropdownClassName
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setTriggerRef, className: `cascader ${open ? "open" : ""} ${className}`, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: `cascader-trigger ${labels.length === 0 ? "placeholder" : ""}`,
+        disabled,
+        onClick: () => !disabled && setOpen((o) => !o),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: labels.length ? labels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            i > 0 && " / ",
+            l
+          ] }, i)) : placeholder }),
+          !!allowClear && labels.length > 0 && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "cascader-clear",
+              role: "button",
+              "aria-label": "Clear",
+              onClick: clear,
+              children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "x", size: 12 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "absolute", right: 12, color: "var(--fg-subtle)" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "chevDown", size: 14 }) })
+        ]
+      }
+    ),
+    open && typeof document !== "undefined" && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: panelRef, className: panelClassName, style: floatingStyle, children: [
+        searchable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cascader-search", children: /* @__PURE__ */ jsxRuntime.jsx(
+          chunkHKF2V5MM_cjs.Input,
+          {
+            ref: searchRef,
+            size: "sm",
+            leadingIcon: "search",
+            value: query,
+            onValueChange: setQuery,
+            placeholder: "\u641C\u7D22..."
+          }
+        ) }),
+        searchable && query.trim() ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cascader-search-list", children: matchedPaths.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cascader-empty", children: "\u6682\u65E0\u5339\u914D\u9879" }) : matchedPaths.map((itemPath) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "cascader-search-item",
+            onClick: () => commit(itemPath.map((item) => item.value), true),
+            children: searchConfig.render ? searchConfig.render(query, itemPath) : itemPath.map((item) => item.label).map((label, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+              index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cascader-path-sep", children: "/" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+            ] }, index))
+          },
+          itemPath.map((item) => item.value).join("__")
+        )) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cascader-columns", children: columns.map((col, depth) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cascader-col", children: col.map((o) => {
+          const isActive = path[depth] === o.value;
+          const hasChildren = !!(o.children && o.children.length);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: `cascader-item ${isActive ? "active" : ""}`,
+              disabled: o.disabled,
+              onClick: () => pick(depth, o.value, hasChildren),
+              children: [
+                chunkV272XR3F_cjs.renderIconSlot(o.icon, { size: 13, className: "cascader-icon" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: o.label }),
+                hasChildren && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chev", children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "chevRight", size: 12 }) })
+              ]
+            },
+            o.value
+          );
+        }) }, depth)) })
+      ] }),
+      document.body
+    )
+  ] });
+});
+Cascader.displayName = "Cascader";
+
+exports.Cascader = Cascader;

package/dist/{chunk-5A3RT4KD.js → chunk-5TKC6IEN.js}

@@ -1,61 +1,10 @@
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
-import './Empty-NQ72W3D7.css';
+import './Skeleton-CVWH2VWN.css';
 import * as React from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/components/Empty/Empty.tsx
-var Empty = React.forwardRef(({
-  title = "\u6682\u65E0\u5185\u5BB9",
-  description,
-  icon,
-  action,
-  size = "md",
-  variant = "default",
-  className = "",
-  ...rest
-}, ref) => /* @__PURE__ */ jsxs("div", { ref, className: `empty ${size} ${variant} ${className}`, ...rest, children: [
-  icon && /* @__PURE__ */ jsx("div", { className: "empty-ico", children: icon }),
-  /* @__PURE__ */ jsx("div", { className: "empty-title", children: title }),
-  description && /* @__PURE__ */ jsx("div", { className: "empty-desc", children: description }),
-  action && /* @__PURE__ */ jsx("div", { className: "empty-action", children: action })
-] }));
-Empty.displayName = "Empty";
-var Spinner = React.forwardRef(({
-  size = 20,
-  tone = "accent",
-  label,
-  variant = "ring",
-  className = "",
-  style,
-  ...rest
-}, ref) => {
-  const cls = `spinner ${variant} ${tone} ${className}`.trim();
-  const spinnerStyle = variant === "dots" ? { fontSize: size, ...style } : { width: size, height: size, ...style };
-  const spinner = variant === "dots" ? /* @__PURE__ */ jsxs("span", { className: cls, style: spinnerStyle, "aria-label": "Loading", children: [
-    /* @__PURE__ */ jsx("i", {}),
-    /* @__PURE__ */ jsx("i", {}),
-    /* @__PURE__ */ jsx("i", {})
-  ] }) : /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cls,
-      style: spinnerStyle,
-      "aria-label": "Loading"
-    }
-  );
-  if (!label) {
-    return React.cloneElement(spinner, {
-      ref,
-      ...rest
-    });
-  }
-  return /* @__PURE__ */ jsxs("span", { ref, className: "spinner-wrap", style, ...rest, children: [
-    spinner,
-    /* @__PURE__ */ jsx("span", { className: "spinner-label", children: label })
-  ] });
-});
-Spinner.displayName = "Spinner";
+// src/components/Skeleton/Skeleton.tsx
 var AVATAR_SIZE_PX = { sm: 32, md: 40, lg: 56 };
 var Skeleton = React.forwardRef(({
   width = "100%",
@@ -136,4 +85,4 @@ var Skeleton = React.forwardRef(({
 });
 Skeleton.displayName = "Skeleton";
 
-export { Empty, Skeleton, Spinner };
+export { Skeleton };

package/dist/{chunk-N57NXCNC.cjs → chunk-6HMTV6P4.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunk2MNAZRWE_cjs = require('./chunk-2MNAZRWE.cjs');
+var chunkV272XR3F_cjs = require('./chunk-V272XR3F.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
-require('./Checkbox-SKJATVSN.css');
+require('./Checkbox-U5EUDSYS.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -65,53 +65,12 @@ var Checkbox = React__namespace.forwardRef(({
         onClick: toggle,
         id,
         className: "checkbox-box",
-        children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "minus", size: 11 }) : value ? /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "check", size: 11 }) : null
+        children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "minus", size: 11 }) : value ? /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "check", size: 11 }) : null
       }
     ),
     label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "checkbox-label", children: label })
   ] });
 });
 Checkbox.displayName = "Checkbox";
-var RadioGroupInner = ({
-  options,
-  value,
-  defaultValue,
-  onChange,
-  direction = "vertical",
-  className = "",
-  ...rest
-}, ref) => {
-  const [inner, setInner] = React__namespace.useState(defaultValue);
-  const isControlled = value !== void 0;
-  const current = isControlled ? value : inner;
-  const pick = (v) => {
-    if (!isControlled) setInner(v);
-    onChange?.(v);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: `radio-group ${direction} ${className}`, ...rest, children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "label",
-    {
-      className: `radio ${current === opt.value ? "checked" : ""} ${opt.disabled ? "disabled" : ""}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            role: "radio",
-            "aria-checked": current === opt.value,
-            disabled: opt.disabled,
-            onClick: () => pick(opt.value),
-            className: "radio-dot"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "radio-label", children: opt.label })
-      ]
-    },
-    String(opt.value)
-  )) });
-};
-var RadioGroup = React__namespace.forwardRef(RadioGroupInner);
-RadioGroup.displayName = "RadioGroup";
 
 exports.Checkbox = Checkbox;
-exports.RadioGroup = RadioGroup;

package/dist/{chunk-RF2EY5JS.cjs → chunk-6ZXQJRAT.cjs}

@@ -49,24 +49,95 @@ var FONT_STACKS = {
 };
 var DEFAULT_CONFIG = {
   mode: "light",
+  colorScheme: "light",
   accent: "sky",
   density: "comfortable",
   intensity: 5,
   radius: 20,
   font: "sf",
-  tokens: {}
+  tokens: {},
+  themes: {}
 };
 var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+function isThemeBaseMode(mode) {
+  return mode === "light" || mode === "dark";
+}
+function isBuiltInThemeMode(mode) {
+  return mode === "light" || mode === "dark" || mode === "system";
+}
+function getThemePreset(themes, mode) {
+  if (!mode || isBuiltInThemeMode(mode)) return void 0;
+  return themes?.[mode];
+}
+function applyThemePreset(config, mode) {
+  const preset = getThemePreset(config.themes, mode);
+  if (!preset) {
+    return {
+      ...config,
+      mode,
+      colorScheme: isThemeBaseMode(mode) ? mode : config.colorScheme
+    };
+  }
+  return {
+    ...config,
+    mode,
+    colorScheme: preset.base ?? config.colorScheme ?? DEFAULT_CONFIG.colorScheme,
+    accent: preset.accent ?? config.accent,
+    density: preset.density ?? config.density,
+    intensity: preset.intensity ?? config.intensity,
+    radius: preset.radius ?? config.radius,
+    font: preset.font ?? config.font,
+    tokens: preset.tokens ? { ...preset.tokens } : config.tokens
+  };
+}
+function resolveThemeConfig(config) {
+  const mode = config.mode ?? DEFAULT_CONFIG.mode;
+  const themes = config.themes ?? DEFAULT_CONFIG.themes;
+  const preset = getThemePreset(themes, mode);
+  const presetConfig = preset ? {
+    ...preset.base ? { colorScheme: preset.base } : null,
+    ...preset.accent ? { accent: preset.accent } : null,
+    ...preset.density ? { density: preset.density } : null,
+    ...preset.intensity != null ? { intensity: preset.intensity } : null,
+    ...preset.radius != null ? { radius: preset.radius } : null,
+    ...preset.font ? { font: preset.font } : null
+  } : {};
+  const merged = {
+    ...DEFAULT_CONFIG,
+    ...presetConfig,
+    ...config,
+    mode,
+    themes,
+    tokens: {
+      ...preset?.tokens ?? {},
+      ...config.tokens ?? {}
+    }
+  };
+  return {
+    ...merged,
+    colorScheme: merged.colorScheme ?? preset?.base ?? DEFAULT_CONFIG.colorScheme,
+    accent: merged.accent ?? preset?.accent ?? DEFAULT_CONFIG.accent,
+    density: merged.density ?? preset?.density ?? DEFAULT_CONFIG.density,
+    intensity: merged.intensity ?? preset?.intensity ?? DEFAULT_CONFIG.intensity,
+    radius: merged.radius ?? preset?.radius ?? DEFAULT_CONFIG.radius,
+    font: merged.font ?? preset?.font ?? DEFAULT_CONFIG.font
+  };
+}
 function resolveThemeMode(mode) {
   if (mode !== "system") return mode;
   if (!isBrowser) return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function normalizeAccentInput(input, resolvedMode) {
+function resolveThemeColorScheme(mode, themes, fallback) {
+  if (mode === "system") return fallback ?? resolveThemeMode(mode);
+  if (isThemeBaseMode(mode)) return mode;
+  return getThemePreset(themes, mode)?.base ?? fallback ?? DEFAULT_CONFIG.colorScheme;
+}
+function normalizeAccentInput(input, colorScheme) {
   if (typeof input === "string" && input in ACCENT_PRESETS) {
     const key = input;
     const base = ACCENT_PRESETS[key];
-    if (resolvedMode === "dark") {
+    if (colorScheme === "dark") {
       return { key, palette: { ...base, ...ACCENT_PRESETS_DARK[key] } };
     }
     return { key, palette: base };
@@ -74,18 +145,20 @@ function normalizeAccentInput(input, resolvedMode) {
   const raw = typeof input === "string" ? { accent: input } : input;
   const { accent } = raw;
   const ink = raw.ink ?? `color-mix(in oklch, ${accent} 65%, black)`;
-  const soft = raw.soft ?? (resolvedMode === "dark" ? `color-mix(in oklch, ${accent} 30%, black)` : `color-mix(in oklch, ${accent} 15%, white)`);
-  const glow = raw.glow ?? (resolvedMode === "dark" ? `color-mix(in oklch, ${accent} 18%, transparent)` : `color-mix(in oklch, ${accent} 35%, transparent)`);
+  const soft = raw.soft ?? (colorScheme === "dark" ? `color-mix(in oklch, ${accent} 30%, black)` : `color-mix(in oklch, ${accent} 15%, white)`);
+  const glow = raw.glow ?? (colorScheme === "dark" ? `color-mix(in oklch, ${accent} 18%, transparent)` : `color-mix(in oklch, ${accent} 35%, transparent)`);
   return { key: "custom", palette: { accent, ink, soft, glow } };
 }
 function toVar(key) {
   return key.startsWith("--") ? key : `--${key}`;
 }
 function applyTheme(target, config) {
-  const cfg = { ...DEFAULT_CONFIG, ...config };
-  const resolvedMode = resolveThemeMode(cfg.mode);
-  const { key, palette } = normalizeAccentInput(cfg.accent, resolvedMode);
-  target.dataset.theme = resolvedMode;
+  const cfg = resolveThemeConfig(config);
+  resolveThemeMode(cfg.mode);
+  const colorScheme = resolveThemeColorScheme(cfg.mode, cfg.themes, cfg.colorScheme);
+  const { key, palette } = normalizeAccentInput(cfg.accent, colorScheme);
+  target.dataset.theme = colorScheme;
+  target.dataset.themeMode = cfg.mode;
   target.dataset.density = cfg.density;
   if (key === "custom") {
     delete target.dataset.accent;
@@ -146,7 +219,8 @@ function loadPersisted(key) {
 function persist(key, cfg) {
   if (!key || !isBrowser) return;
   try {
-    localStorage.setItem(key, JSON.stringify(cfg));
+    const { themes: _themes, ...persisted } = cfg;
+    localStorage.setItem(key, JSON.stringify(persisted));
   } catch {
   }
 }
@@ -164,41 +238,69 @@ var ThemeProvider = (props) => {
   const initialConfig = React__namespace.useMemo(() => {
     const fromProps = {
       mode: configProps.mode ?? DEFAULT_CONFIG.mode,
+      colorScheme: configProps.colorScheme,
       accent: configProps.accent ?? DEFAULT_CONFIG.accent,
       density: configProps.density ?? DEFAULT_CONFIG.density,
       intensity: configProps.intensity ?? DEFAULT_CONFIG.intensity,
       radius: configProps.radius ?? DEFAULT_CONFIG.radius,
       font: configProps.font ?? DEFAULT_CONFIG.font,
-      tokens: configProps.tokens ?? {}
+      tokens: configProps.tokens ?? {},
+      themes: configProps.themes ?? DEFAULT_CONFIG.themes
     };
     const persisted = loadPersisted(storageKey);
-    return persisted ? { ...fromProps, ...persisted } : fromProps;
+    const seeded = applyThemePreset(fromProps, fromProps.mode ?? DEFAULT_CONFIG.mode);
+    const withExplicitProps = {
+      ...seeded,
+      ...configProps.colorScheme ? { colorScheme: configProps.colorScheme } : null,
+      ...configProps.accent ? { accent: configProps.accent } : null,
+      ...configProps.density ? { density: configProps.density } : null,
+      ...configProps.intensity != null ? { intensity: configProps.intensity } : null,
+      ...configProps.radius != null ? { radius: configProps.radius } : null,
+      ...configProps.font ? { font: configProps.font } : null,
+      ...configProps.tokens ? { tokens: configProps.tokens } : null
+    };
+    if (!persisted) return withExplicitProps;
+    const persistedMode = persisted.mode ?? withExplicitProps.mode ?? DEFAULT_CONFIG.mode;
+    return {
+      ...applyThemePreset({ ...withExplicitProps, mode: persistedMode }, persistedMode),
+      ...persisted
+    };
   }, []);
   const [config, setConfig] = React__namespace.useState(initialConfig);
   React__namespace.useEffect(() => {
     setConfig((c) => {
+      const base = {
+        ...c,
+        themes: configProps.themes ?? c.themes
+      };
+      const mode = configProps.mode ?? c.mode ?? DEFAULT_CONFIG.mode;
+      const nextFromMode = configProps.mode ? applyThemePreset(base, mode) : base;
       const next = {
-        mode: configProps.mode ?? c.mode,
-        accent: configProps.accent ?? c.accent,
-        density: configProps.density ?? c.density,
-        intensity: configProps.intensity ?? c.intensity,
-        radius: configProps.radius ?? c.radius,
-        font: configProps.font ?? c.font,
-        tokens: configProps.tokens ?? c.tokens
+        ...nextFromMode,
+        mode,
+        colorScheme: configProps.colorScheme ?? nextFromMode.colorScheme,
+        accent: configProps.accent ?? nextFromMode.accent,
+        density: configProps.density ?? nextFromMode.density,
+        intensity: configProps.intensity ?? nextFromMode.intensity,
+        radius: configProps.radius ?? nextFromMode.radius,
+        font: configProps.font ?? nextFromMode.font,
+        tokens: configProps.tokens ?? nextFromMode.tokens
       };
-      if (next.mode === c.mode && next.accent === c.accent && next.density === c.density && next.intensity === c.intensity && next.radius === c.radius && next.font === c.font && next.tokens === c.tokens) {
+      if (next.mode === c.mode && next.colorScheme === c.colorScheme && next.accent === c.accent && next.density === c.density && next.intensity === c.intensity && next.radius === c.radius && next.font === c.font && next.tokens === c.tokens && next.themes === c.themes) {
         return c;
       }
       return next;
     });
   }, [
     configProps.mode,
+    configProps.colorScheme,
     configProps.accent,
     configProps.density,
     configProps.intensity,
     configProps.radius,
     configProps.font,
-    configProps.tokens
+    configProps.tokens,
+    configProps.themes
   ]);
   const [systemDark, setSystemDark] = React__namespace.useState(
     () => isBrowser && window.matchMedia("(prefers-color-scheme: dark)").matches
@@ -210,32 +312,47 @@ var ThemeProvider = (props) => {
     mql.addEventListener?.("change", handler);
     return () => mql.removeEventListener?.("change", handler);
   }, []);
-  const resolvedMode = config.mode === "system" ? systemDark ? "dark" : "light" : config.mode;
+  const effectiveConfig = React__namespace.useMemo(() => resolveThemeConfig(config), [config]);
+  const activeTheme = React__namespace.useMemo(
+    () => getThemePreset(effectiveConfig.themes, effectiveConfig.mode) ?? null,
+    [effectiveConfig.mode, effectiveConfig.themes]
+  );
+  const colorScheme = effectiveConfig.mode === "system" ? systemDark ? "dark" : "light" : isThemeBaseMode(effectiveConfig.mode) ? effectiveConfig.mode : effectiveConfig.colorScheme ?? activeTheme?.base ?? DEFAULT_CONFIG.colorScheme;
+  const resolvedMode = effectiveConfig.mode === "system" ? colorScheme : effectiveConfig.mode;
   const { key: accentKey, palette: accentPalette } = React__namespace.useMemo(
-    () => normalizeAccentInput(config.accent, resolvedMode),
-    [config.accent, resolvedMode]
+    () => normalizeAccentInput(effectiveConfig.accent, colorScheme),
+    [effectiveConfig.accent, colorScheme]
   );
   const scopeRef = React__namespace.useRef(null);
+  const appliedTokenKeysRef = React__namespace.useRef(/* @__PURE__ */ new Set());
   React__namespace.useEffect(() => {
     if (!isBrowser) return;
     const el = target === "root" ? document.documentElement : scopeRef.current;
     if (!el) return;
-    applyTheme(el, { ...config, mode: resolvedMode });
+    const nextTokenKeys = new Set(Object.keys(effectiveConfig.tokens));
+    for (const key of appliedTokenKeysRef.current) {
+      if (!nextTokenKeys.has(key)) el.style.removeProperty(toVar(key));
+    }
+    applyTheme(el, { ...effectiveConfig, colorScheme });
+    appliedTokenKeysRef.current = nextTokenKeys;
     persist(storageKey, config);
-  }, [config, resolvedMode, target, storageKey]);
+  }, [config, effectiveConfig, colorScheme, target, storageKey]);
   const value = React__namespace.useMemo(() => {
     const patch = (p) => setConfig((c) => ({ ...c, ...p }));
     return {
-      mode: config.mode,
+      mode: effectiveConfig.mode,
       resolvedMode,
+      colorScheme,
       accent: accentKey,
       accentPalette,
-      density: config.density,
-      intensity: config.intensity,
-      radius: config.radius,
-      font: config.font,
-      tokens: config.tokens ?? {},
-      setMode: (m) => patch({ mode: m }),
+      density: effectiveConfig.density,
+      intensity: effectiveConfig.intensity,
+      radius: effectiveConfig.radius,
+      font: effectiveConfig.font,
+      tokens: effectiveConfig.tokens,
+      themes: effectiveConfig.themes,
+      activeTheme,
+      setMode: (m) => setConfig((c) => applyThemePreset(c, m)),
       toggleMode: () => setConfig((c) => ({
         ...c,
         mode: c.mode === "dark" ? "light" : "dark"
@@ -246,10 +363,11 @@ var ThemeProvider = (props) => {
       setRadius: (n) => patch({ radius: n }),
       setFont: (f) => patch({ font: f }),
       setTokens: (t) => patch({ tokens: t }),
+      setThemes: (t) => patch({ themes: t }),
       update: patch,
       reset: () => setConfig(initialConfig)
     };
-  }, [config, resolvedMode, accentKey, accentPalette, initialConfig]);
+  }, [effectiveConfig, resolvedMode, colorScheme, accentKey, accentPalette, activeTheme, initialConfig]);
   const onChangeRef = React__namespace.useRef(onChange);
   onChangeRef.current = onChange;
   React__namespace.useEffect(() => {
@@ -276,6 +394,7 @@ exports.FONT_STACKS = FONT_STACKS;
 exports.ThemeProvider = ThemeProvider;
 exports.applyTheme = applyTheme;
 exports.normalizeAccentInput = normalizeAccentInput;
+exports.resolveThemeColorScheme = resolveThemeColorScheme;
 exports.resolveThemeMode = resolveThemeMode;
 exports.useTheme = useTheme;
 exports.useThemeOptional = useThemeOptional;