@fangxinyan/lumina 0.6.2 → 0.6.3

package/dist/{chunk-WKKSAGYH.js → chunk-FBYUZOZP.js}

@@ -1,10 +1,10 @@
-import { Tag } from './chunk-DQTSTJ6O.js';
+import { Tag } from './chunk-5H5YP2TB.js';
 import { useFloating } from './chunk-DUFRASGO.js';
-import { Input } from './chunk-XTIN5545.js';
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Input } from './chunk-UKS23N3L.js';
+import { Icon, renderIconSlot } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
-import './Select-JVBQAZBG.css';
+import './Select-Z5VYPEEY.css';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -218,8 +218,8 @@ var SelectInner = (props, forwardedRef) => {
     const current = allFlat.find((o) => o.value === singleValue);
     if (!current) return /* @__PURE__ */ jsx("span", { className: "placeholder", children: placeholder });
     return /* @__PURE__ */ jsxs("span", { className: "select-value", children: [
-      current.icon && /* @__PURE__ */ jsx(Icon, { name: current.icon, size: 14 }),
-      /* @__PURE__ */ jsx("span", { children: current.label })
+      renderIconSlot(current.icon, { size: 14, className: "select-icon" }),
+      /* @__PURE__ */ jsx("span", { className: "select-value-label", children: current.label })
     ] });
   };
   const hasSelection = isMulti ? (multiValue?.length ?? 0) > 0 : singleValue !== void 0;
@@ -242,7 +242,7 @@ var SelectInner = (props, forwardedRef) => {
         onClick: () => isMulti ? toggleMulti(o) : pickSingle(o),
         children: [
           isMulti && /* @__PURE__ */ jsx("span", { className: `menu-check ${sel ? "on" : ""}`, "aria-hidden": true, children: sel && /* @__PURE__ */ jsx(Icon, { name: "check", size: 11, stroke: 3 }) }),
-          o.icon && /* @__PURE__ */ jsx(Icon, { name: o.icon, size: 14 }),
+          renderIconSlot(o.icon, { size: 14, className: "menu-item-icon" }),
           /* @__PURE__ */ jsxs("span", { className: "menu-item-body", children: [
             /* @__PURE__ */ jsx("span", { className: "menu-item-label", children: o.label }),
             o.description && /* @__PURE__ */ jsx("span", { className: "menu-item-desc", children: o.description })

package/dist/{chunk-EIY7KEJ3.cjs → chunk-FGW5GJ22.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkTJII7BQ2_cjs = require('./chunk-TJII7BQ2.cjs');
+var chunkV272XR3F_cjs = require('./chunk-V272XR3F.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Collapse-66U5YJFY.css');
@@ -112,7 +112,7 @@ var Collapse = React__namespace.forwardRef(({
                             toggle(it.key, it.disabled);
                           }
                         },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "chevDown", size: 16 })
+                        children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "chevDown", size: 16 })
                       }
                     )
                   ]

package/dist/{chunk-33NCTOEB.js → chunk-FWPBORRB.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Icon } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Calendar-LHZELUDL.css';

package/dist/{chunk-EQEJTN3V.js → chunk-GIZU3H6H.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Icon } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Checkbox-U5EUDSYS.css';

package/dist/{chunk-HPFQXYKG.cjs → chunk-H4LGWZMH.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk5WAXZJG5_cjs = require('./chunk-5WAXZJG5.cjs');
-var chunkTJII7BQ2_cjs = require('./chunk-TJII7BQ2.cjs');
+var chunkTP567B3L_cjs = require('./chunk-TP567B3L.cjs');
+var chunkV272XR3F_cjs = require('./chunk-V272XR3F.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Modal-2QNDW4SO.css');
@@ -92,9 +92,9 @@ var ModalBase = React__namespace.forwardRef(({
   if (!open && destroyOnClose) return null;
   const overlayStyle = zIndex != null ? { zIndex } : void 0;
   const defaultFooter = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunk5WAXZJG5_cjs.Button, { variant: "ghost", onClick: handleCancel, ...cancelButtonProps, children: cancelText }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkTP567B3L_cjs.Button, { variant: "ghost", onClick: handleCancel, ...cancelButtonProps, children: cancelText }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5WAXZJG5_cjs.Button,
+      chunkTP567B3L_cjs.Button,
       {
         variant: "primary",
         loading: confirmLoading,
@@ -139,7 +139,7 @@ var ModalBase = React__namespace.forwardRef(({
                     className: "modal-close",
                     onClick: handleCancel,
                     "aria-label": "Close",
-                    children: closeIcon ?? /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "x", size: 16 })
+                    children: closeIcon ?? /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "x", size: 16 })
                   }
                 )
               ] }),
@@ -206,9 +206,9 @@ var StaticModalHost = ({
   }, [destroy, onOk]);
   const okVariant = kind === "error" ? "danger" : "primary";
   const mergedFooter = footer !== void 0 ? footer : okCancel ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunk5WAXZJG5_cjs.Button, { variant: "ghost", onClick: close, ...cancelButtonProps, children: cancelText }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkTP567B3L_cjs.Button, { variant: "ghost", onClick: close, ...cancelButtonProps, children: cancelText }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5WAXZJG5_cjs.Button,
+      chunkTP567B3L_cjs.Button,
       {
         variant: okVariant,
         loading: loading || confirmLoading,
@@ -218,7 +218,7 @@ var StaticModalHost = ({
       }
     )
   ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-    chunk5WAXZJG5_cjs.Button,
+    chunkTP567B3L_cjs.Button,
     {
       variant: okVariant,
       loading: loading || confirmLoading,
@@ -239,7 +239,7 @@ var StaticModalHost = ({
       escClosable: escClosable ?? true,
       className: `modal-static-overlay ${className}`,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-static-body", children: [
-        icon !== false && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `modal-static-icon ${kind}`, children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: staticIconName[kind], size: 20 }) }),
+        icon !== false && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `modal-static-icon ${kind}`, children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: staticIconName[kind], size: 20 }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-static-content", children: content ?? children })
       ] })
     }

package/dist/{chunk-6LZ54NPO.cjs → chunk-HKF2V5MM.cjs}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkOQBDU5I2_cjs = require('./chunk-OQBDU5I2.cjs');
-var chunkTJII7BQ2_cjs = require('./chunk-TJII7BQ2.cjs');
+var chunkMPVCYU2K_cjs = require('./chunk-MPVCYU2K.cjs');
+var chunkV272XR3F_cjs = require('./chunk-V272XR3F.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
-require('./Input-3G4ONWNU.css');
+require('./Input-HUBJ55OH.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -73,6 +73,32 @@ var InputBase = React__namespace.forwardRef(
       e.stopPropagation();
       if (!disabled) handler(e);
     } : void 0;
+    const renderAffixIcon = (icon, side, handler) => {
+      if (icon == null || icon === false) return null;
+      const className2 = `${side}${handler ? " interactive" : ""}`;
+      if (chunkV272XR3F_cjs.isIconName(icon)) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          chunkV272XR3F_cjs.Icon,
+          {
+            name: icon,
+            size: 14,
+            className: className2,
+            onClick: handleIconClick(handler)
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: className2,
+          onClick: handler ? (e) => {
+            e.stopPropagation();
+            if (!disabled) handler(e);
+          } : void 0,
+          children: chunkV272XR3F_cjs.renderIconSlot(icon)
+        }
+      );
+    };
     const handleChange = (e) => {
       if (!isControlled) setInner(e.target.value);
       onChange?.(e);
@@ -94,15 +120,7 @@ var InputBase = React__namespace.forwardRef(
     const showClear = !!allowClear && !!currentValue && !disabled;
     const count = currentValue ? currentValue.length : 0;
     const inputElement = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapCls, children: [
-      leadingIcon && /* @__PURE__ */ jsxRuntime.jsx(
-        chunkTJII7BQ2_cjs.Icon,
-        {
-          name: leadingIcon,
-          size: 14,
-          className: `lead${onLeadingIconClick ? " interactive" : ""}`,
-          onClick: handleIconClick(onLeadingIconClick)
-        }
-      ),
+      renderAffixIcon(leadingIcon, "lead", onLeadingIconClick),
       prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "input-affix prefix", children: prefix }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -128,18 +146,10 @@ var InputBase = React__namespace.forwardRef(
           tabIndex: -1,
           onMouseDown: (e) => e.preventDefault(),
           onClick: handleClear,
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "x", size: 12 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "x", size: 12 })
         }
       ),
-      trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(
-        chunkTJII7BQ2_cjs.Icon,
-        {
-          name: trailingIcon,
-          size: 14,
-          className: `trail${onTrailingIconClick ? " interactive" : ""}`,
-          onClick: handleIconClick(onTrailingIconClick)
-        }
-      )
+      renderAffixIcon(trailingIcon, "trail", onTrailingIconClick)
     ] });
     if (!showCount) return inputElement;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "input-shell", children: [
@@ -198,7 +208,7 @@ var InputPassword = React__namespace.forwardRef(
 InputPassword.displayName = "Input.Password";
 var Input = InputBase;
 Input.Password = InputPassword;
-Input.TextArea = chunkOQBDU5I2_cjs.Textarea;
+Input.TextArea = chunkMPVCYU2K_cjs.Textarea;
 
 exports.Input = Input;
 exports.InputPassword = InputPassword;

package/dist/{chunk-WGZ2KJTZ.js → chunk-HLFH5HWR.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Icon } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Textarea-YNET7IBH.css';

package/dist/{chunk-UMDGS4BP.js → chunk-I5WTQ5Y3.js}

@@ -1,7 +1,7 @@
-import { Icon } from './chunk-OF3SGLZY.js';
+import { renderIconSlot, Icon } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
-import './Alert-JJ7GB3UU.css';
+import './Alert-QBKIDY5H.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -17,7 +17,7 @@ var Alert = React.forwardRef(({
   className = "",
   ...rest
 }, ref) => {
-  const iconName = icon ?? (tone === "success" ? "check2" : tone === "warning" || tone === "danger" ? "alert" : "info");
+  const iconNode = icon ?? (tone === "success" ? "check2" : tone === "warning" || tone === "danger" ? "alert" : "info");
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -26,7 +26,7 @@ var Alert = React.forwardRef(({
       role: "alert",
       ...rest,
       children: [
-        showIcon && /* @__PURE__ */ jsx("span", { className: "alert-ico", children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: 14 }) }),
+        showIcon && /* @__PURE__ */ jsx("span", { className: "alert-ico", children: renderIconSlot(iconNode, { size: 14 }) }),
         /* @__PURE__ */ jsxs("div", { className: "alert-body", children: [
           title && /* @__PURE__ */ jsx("div", { className: "alert-title", children: title }),
           children && /* @__PURE__ */ jsx("div", { className: "alert-desc", children })

package/dist/{chunk-MUXP7ASL.js → chunk-J2HZTJO6.js}

@@ -1,4 +1,4 @@
-import { Table } from './chunk-AWXCSX6J.js';
+import { Table } from './chunk-BPOOVO5T.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './TablePro-3XVHYLSL.css';

package/dist/{chunk-NN25YMOL.js → chunk-J5ZGYQZK.js}

@@ -27,24 +27,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 };
@@ -52,18 +123,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;
@@ -124,7 +197,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 {
   }
 }
@@ -142,41 +216,69 @@ var ThemeProvider = (props) => {
   const initialConfig = React.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.useState(initialConfig);
   React.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.useState(
     () => isBrowser && window.matchMedia("(prefers-color-scheme: dark)").matches
@@ -188,32 +290,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.useMemo(() => resolveThemeConfig(config), [config]);
+  const activeTheme = React.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.useMemo(
-    () => normalizeAccentInput(config.accent, resolvedMode),
-    [config.accent, resolvedMode]
+    () => normalizeAccentInput(effectiveConfig.accent, colorScheme),
+    [effectiveConfig.accent, colorScheme]
   );
   const scopeRef = React.useRef(null);
+  const appliedTokenKeysRef = React.useRef(/* @__PURE__ */ new Set());
   React.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.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"
@@ -224,10 +341,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.useRef(onChange);
   onChangeRef.current = onChange;
   React.useEffect(() => {
@@ -248,4 +366,4 @@ var ThemeProvider = (props) => {
   return /* @__PURE__ */ jsx(ThemeCtx.Provider, { value, children });
 };
 
-export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, FONT_STACKS, ThemeProvider, applyTheme, normalizeAccentInput, resolveThemeMode, useTheme, useThemeOptional };
+export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, FONT_STACKS, ThemeProvider, applyTheme, normalizeAccentInput, resolveThemeColorScheme, resolveThemeMode, useTheme, useThemeOptional };

package/dist/{chunk-CHMCL7AV.js → chunk-JCEHZ336.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Icon } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Drawer-IPGB4CXH.css';

package/dist/{chunk-FFZ6OMZI.js → chunk-JVUVOR6S.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Icon } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Collapse-66U5YJFY.css';

package/dist/{chunk-ON4DEDMI.js → chunk-K5IGFBDR.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-OF3SGLZY.js';
+import { Icon } from './chunk-47VG2P34.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Message-2MZ3LFPU.css';

package/dist/{chunk-35ZGBAA3.cjs → chunk-K7FV7W6U.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkTJII7BQ2_cjs = require('./chunk-TJII7BQ2.cjs');
+var chunkV272XR3F_cjs = require('./chunk-V272XR3F.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
-require('./Alert-JJ7GB3UU.css');
+require('./Alert-QBKIDY5H.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -39,7 +39,7 @@ var Alert = React__namespace.forwardRef(({
   className = "",
   ...rest
 }, ref) => {
-  const iconName = icon ?? (tone === "success" ? "check2" : tone === "warning" || tone === "danger" ? "alert" : "info");
+  const iconNode = icon ?? (tone === "success" ? "check2" : tone === "warning" || tone === "danger" ? "alert" : "info");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -48,13 +48,13 @@ var Alert = React__namespace.forwardRef(({
       role: "alert",
       ...rest,
       children: [
-        showIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "alert-ico", children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: iconName, size: 14 }) }),
+        showIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "alert-ico", children: chunkV272XR3F_cjs.renderIconSlot(iconNode, { size: 14 }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "alert-body", children: [
           title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "alert-title", children: title }),
           children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "alert-desc", children })
         ] }),
         action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "alert-action", children: action }),
-        closable && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "alert-close", onClick: onClose, "aria-label": "Dismiss", children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "x", size: 12 }) })
+        closable && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "alert-close", onClick: onClose, "aria-label": "Dismiss", children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "x", size: 12 }) })
       ]
     }
   );

package/dist/{chunk-XD3JGL5O.js → chunk-ME5BZ2WA.js}

@@ -1,4 +1,4 @@
-import { Input } from './chunk-XTIN5545.js';
+import { Input } from './chunk-UKS23N3L.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './CommandPalette-T45DBMPY.css';

package/dist/{chunk-OQBDU5I2.cjs → chunk-MPVCYU2K.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkTJII7BQ2_cjs = require('./chunk-TJII7BQ2.cjs');
+var chunkV272XR3F_cjs = require('./chunk-V272XR3F.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Textarea-YNET7IBH.css');
@@ -86,7 +86,7 @@ var Textarea = React__namespace.forwardRef(
           tabIndex: -1,
           onMouseDown: (e) => e.preventDefault(),
           onClick: handleClear,
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "x", size: 12 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "x", size: 12 })
         }
       )
     ] });