@fangxinyan/lumina 0.6.18 → 0.7.0

package/dist/{chunk-A4Z7PLHV.cjs → chunk-PIJV2FHO.cjs}

@@ -1,17 +1,18 @@
 'use strict';
 
-var chunkMPOO5VPW_cjs = require('./chunk-MPOO5VPW.cjs');
-var chunk6EOSMK34_cjs = require('./chunk-6EOSMK34.cjs');
-var chunkPKNRTFNE_cjs = require('./chunk-PKNRTFNE.cjs');
-var chunkMYW7LNB2_cjs = require('./chunk-MYW7LNB2.cjs');
-var chunkPSQ3HNZP_cjs = require('./chunk-PSQ3HNZP.cjs');
-var chunkS2ZGXBUH_cjs = require('./chunk-S2ZGXBUH.cjs');
-var chunkVS3I5OKA_cjs = require('./chunk-VS3I5OKA.cjs');
-var chunkSW2HMNCA_cjs = require('./chunk-SW2HMNCA.cjs');
-var chunkQMX67CVT_cjs = require('./chunk-QMX67CVT.cjs');
-require('./tokens-RYJ3DFTU.css');
+var chunkZYIE3BH7_cjs = require('./chunk-ZYIE3BH7.cjs');
+var chunkG5LCOBOT_cjs = require('./chunk-G5LCOBOT.cjs');
+var chunkWROF2PVG_cjs = require('./chunk-WROF2PVG.cjs');
+var chunkE66PSVBU_cjs = require('./chunk-E66PSVBU.cjs');
+var chunkVVRXNGYL_cjs = require('./chunk-VVRXNGYL.cjs');
+var chunkSTQDKMS5_cjs = require('./chunk-STQDKMS5.cjs');
+var chunkT4RR6NVU_cjs = require('./chunk-T4RR6NVU.cjs');
+var chunk2AUXUZ3Z_cjs = require('./chunk-2AUXUZ3Z.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+var chunkEE5KXDRK_cjs = require('./chunk-EE5KXDRK.cjs');
+require('./tokens-CEJVVA3G.css');
 require('./shared-NJHRNLRH.css');
-require('./ThemePanel-TEHB2JCQ.css');
+require('./ThemePanel-EHNAS4RN.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -35,7 +36,13 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var THEME_PANEL_DEFAULT_THEME_PRESETS = chunk6EOSMK34_cjs.pickLuminaThemePresets(["light", "dark", "porcelain", "assistant", "assistantDark"]);
+var Button2 = chunkNRJXZPZR_cjs.withInternalComponentThemePart(chunkT4RR6NVU_cjs.Button, "Button");
+var ColorPicker2 = chunkNRJXZPZR_cjs.withInternalComponentThemePart(chunkVVRXNGYL_cjs.ColorPicker, "ColorPicker");
+var Input2 = chunkNRJXZPZR_cjs.withInternalComponentThemePart(chunkSTQDKMS5_cjs.Input, "Input");
+var RadioGroup2 = chunkNRJXZPZR_cjs.withInternalComponentThemePart(chunkE66PSVBU_cjs.RadioGroup, ["RadioGroup", "Radio"]);
+var Slider2 = chunkNRJXZPZR_cjs.withInternalComponentThemePart(chunkZYIE3BH7_cjs.Slider, "Slider");
+var Switch2 = chunkNRJXZPZR_cjs.withInternalComponentThemePart(chunkWROF2PVG_cjs.Switch, "Switch");
+var THEME_PANEL_DEFAULT_THEME_PRESETS = chunkG5LCOBOT_cjs.pickLuminaThemePresets(["light", "dark", "porcelain", "assistant", "assistantDark"]);
 var THEME_PANEL_DEFAULT_PRESET_OPTIONS = [
   { key: "light", label: "\u6D45\u8272", description: "\u9ED8\u8BA4", preset: THEME_PANEL_DEFAULT_THEME_PRESETS.light },
   { key: "dark", label: "\u6DF1\u8272", description: "\u9ED8\u8BA4", preset: THEME_PANEL_DEFAULT_THEME_PRESETS.dark },
@@ -131,7 +138,7 @@ var getShadowScaleRange = (key) => key === "shadow-float-scale" ? THEME_PANEL_RA
 function accentFromPreset(preset) {
   const accent = preset?.accent ?? "sky";
   if (typeof accent === "string") {
-    return chunkPKNRTFNE_cjs.ACCENT_PRESETS[accent]?.accent ?? accent;
+    return chunkEE5KXDRK_cjs.ACCENT_PRESETS[accent]?.accent ?? accent;
   }
   return accent.accent;
 }
@@ -319,8 +326,8 @@ function fontConfigToText(font) {
   return typeof font === "string" ? font : JSON.stringify(font);
 }
 function fontToStack(font) {
-  if (typeof font === "string") return chunkPKNRTFNE_cjs.FONT_STACKS[font] ?? font;
-  return font.sans ?? font.display ?? chunkPKNRTFNE_cjs.FONT_STACKS.system;
+  if (typeof font === "string") return chunkEE5KXDRK_cjs.FONT_STACKS[font] ?? font;
+  return font.sans ?? font.display ?? chunkEE5KXDRK_cjs.FONT_STACKS.system;
 }
 function tokenPickerValue(value, fallback) {
   return cssColorToHex(value ?? fallback, fallback);
@@ -332,7 +339,7 @@ function parseScaleToken(value, fallback = 1, range = THEME_PANEL_RANGES.shadowS
 function formatScaleToken(value) {
   return value.toFixed(2).replace(/\.?0+$/, "");
 }
-var ThemePanel = React__namespace.forwardRef(
+var ThemePanelBase = React__namespace.forwardRef(
   ({
     title = "\u4E3B\u9898",
     description = "\u5FEB\u901F\u8C03\u6574\u5F53\u524D Lumina \u4E3B\u9898",
@@ -353,7 +360,7 @@ var ThemePanel = React__namespace.forwardRef(
     className = "",
     ...rest
   }, ref) => {
-    const theme = chunkPKNRTFNE_cjs.useTheme();
+    const theme = chunkEE5KXDRK_cjs.useTheme();
     const rootRef = React__namespace.useRef(null);
     const previewSnapshotRef = React__namespace.useRef(null);
     const updateThemeRef = React__namespace.useRef(theme.update);
@@ -387,6 +394,7 @@ var ThemePanel = React__namespace.forwardRef(
     const [draftIntensity, setDraftIntensity] = React__namespace.useState(5);
     const [draftRadius, setDraftRadius] = React__namespace.useState(20);
     const [draftFont, setDraftFont] = React__namespace.useState("sf");
+    const [draftComponents, setDraftComponents] = React__namespace.useState({});
     const [createMode, setCreateMode] = React__namespace.useState("simple");
     const [advancedFontMode, setAdvancedFontMode] = React__namespace.useState("preset");
     const [liveAdvancedFontMode, setLiveAdvancedFontMode] = React__namespace.useState("preset");
@@ -418,9 +426,19 @@ var ThemePanel = React__namespace.forwardRef(
         intensity: draftIntensity,
         radius: draftRadius,
         font: draftFont,
-        tokens: draftTokens
+        tokens: draftTokens,
+        components: draftComponents
       }),
-      [draftAccentPalette, draftBase, draftDensity, draftFont, draftIntensity, draftRadius, draftTokens]
+      [
+        draftAccentPalette,
+        draftBase,
+        draftDensity,
+        draftFont,
+        draftIntensity,
+        draftRadius,
+        draftTokens,
+        draftComponents
+      ]
     );
     const resolvedPresetOptions = React__namespace.useMemo(() => {
       if (presetOptions) return presetOptions;
@@ -456,12 +474,15 @@ var ThemePanel = React__namespace.forwardRef(
       updateThemeRef.current({
         mode: DRAFT_THEME_MODE,
         colorScheme: draftPreset.base,
+        baseColor: draftPreset.baseColor,
         accent: draftPreset.accent,
         density: draftPreset.density,
         intensity: draftPreset.intensity,
         radius: draftPreset.radius,
         font: draftPreset.font,
-        tokens: draftPreset.tokens
+        colors: draftPreset.colors ?? {},
+        tokens: draftPreset.tokens,
+        components: draftPreset.components ?? {}
       });
     }, [draftPreset, isCreatingTheme, previewDraft]);
     const clearCreateState = () => {
@@ -485,7 +506,14 @@ var ThemePanel = React__namespace.forwardRef(
     const applyMode = (mode) => {
       clearCreateState();
       if (mode === "light" || mode === "dark" || mode === "system") {
-        theme.update({ mode, colorScheme: mode === "system" ? theme.colorScheme : mode, tokens: {} });
+        theme.update({
+          mode,
+          colorScheme: mode === "system" ? theme.colorScheme : mode,
+          baseColor: void 0,
+          colors: {},
+          tokens: {},
+          components: {}
+        });
         return;
       }
       theme.setMode(mode);
@@ -504,12 +532,15 @@ var ThemePanel = React__namespace.forwardRef(
         ...!isBuiltInMode ? { themes: { ...theme.themes, [key]: preset } } : null,
         mode: option.key,
         colorScheme: preset.base ?? theme.colorScheme,
+        baseColor: preset.baseColor,
         accent: preset.accent ?? fallbackAccent,
         density: preset.density ?? theme.density,
         intensity: preset.intensity ?? theme.intensity,
         radius: preset.radius ?? theme.radius,
         font: preset.font ?? theme.font,
-        tokens: preset.tokens ?? {}
+        colors: { ...preset.colors ?? {} },
+        tokens: preset.tokens ?? {},
+        components: chunkEE5KXDRK_cjs.mergeComponentThemeOverrides(void 0, preset.components)
       });
     };
     const deletePreset = (option) => {
@@ -524,12 +555,15 @@ var ThemePanel = React__namespace.forwardRef(
       const nextConfig = active ? {
         mode: nextBase,
         colorScheme: fallbackPreset.base,
+        baseColor: fallbackPreset.baseColor,
         accent: fallbackPreset.accent,
         density: fallbackPreset.density,
         intensity: fallbackPreset.intensity,
         radius: fallbackPreset.radius,
         font: fallbackPreset.font,
-        tokens: fallbackPreset.tokens
+        colors: { ...fallbackPreset.colors ?? {} },
+        tokens: fallbackPreset.tokens,
+        components: chunkEE5KXDRK_cjs.mergeComponentThemeOverrides(void 0, fallbackPreset.components)
       } : {};
       theme.update({
         ...nextConfig,
@@ -590,12 +624,15 @@ var ThemePanel = React__namespace.forwardRef(
       label: meta.label,
       description: meta.description,
       base: theme.colorScheme,
+      baseColor: theme.baseColor,
       accent: theme.accent === "custom" ? { ...theme.accentPalette } : theme.accent,
       density: theme.density,
       intensity: theme.intensity,
       radius: theme.radius,
       font: theme.font,
-      tokens: { ...tokens }
+      colors: { ...theme.colors },
+      tokens: { ...tokens },
+      components: chunkEE5KXDRK_cjs.mergeComponentThemeOverrides(void 0, theme.components)
     });
     const updateLiveBase = (base) => {
       clearCreateState();
@@ -632,12 +669,15 @@ var ThemePanel = React__namespace.forwardRef(
         themes: nextThemes,
         mode: key,
         colorScheme: preset.base,
+        baseColor: preset.baseColor,
         accent: preset.accent,
         density: preset.density,
         intensity: preset.intensity,
         radius: preset.radius,
         font: preset.font,
-        tokens: preset.tokens
+        colors: preset.colors ?? {},
+        tokens: preset.tokens,
+        components: preset.components ?? {}
       });
       setCreatedThemeMeta((current) => ({ ...current, [key]: meta }));
       onUpdateTheme?.({ ...meta, preset, previousPreset, presetOption });
@@ -658,12 +698,15 @@ var ThemePanel = React__namespace.forwardRef(
         themes: nextThemes,
         mode: key,
         colorScheme: preset.base,
+        baseColor: preset.baseColor,
         accent: preset.accent,
         density: preset.density,
         intensity: preset.intensity,
         radius: preset.radius,
         font: preset.font,
-        tokens: preset.tokens
+        colors: preset.colors ?? {},
+        tokens: preset.tokens,
+        components: preset.components ?? {}
       });
       onCreateTheme?.({ ...meta, preset, presetOption });
     };
@@ -679,12 +722,15 @@ var ThemePanel = React__namespace.forwardRef(
       const currentTokens = readCurrentThemeTokens(root, base);
       const currentPreset = {
         base,
+        baseColor: theme.baseColor,
         accent: accentPalette,
         density: theme.density,
         intensity: theme.intensity,
         radius: theme.radius,
         font: theme.font,
-        tokens: currentTokens
+        colors: { ...theme.colors },
+        tokens: currentTokens,
+        components: chunkEE5KXDRK_cjs.mergeComponentThemeOverrides(void 0, theme.components)
       };
       const basePresets = {
         light: base === "light" ? currentPreset : THEME_PANEL_DEFAULT_THEME_PRESETS.light,
@@ -693,12 +739,15 @@ var ThemePanel = React__namespace.forwardRef(
       previewSnapshotRef.current = {
         mode: theme.mode,
         colorScheme: theme.colorScheme,
+        baseColor: theme.baseColor,
         accent: theme.accent === "custom" ? theme.accentPalette : theme.accent,
         density: theme.density,
         intensity: theme.intensity,
         radius: theme.radius,
         font: theme.font,
+        colors: theme.colors,
         tokens: theme.tokens,
+        components: theme.components,
         themes: theme.themes
       };
       setDraftBasePresets(basePresets);
@@ -716,6 +765,7 @@ var ThemePanel = React__namespace.forwardRef(
       setDraftIntensity(theme.intensity);
       setDraftRadius(theme.radius);
       setDraftFont(theme.font ?? "sf");
+      setDraftComponents(chunkEE5KXDRK_cjs.mergeComponentThemeOverrides(void 0, theme.components));
       setAdvancedFontMode(toFontKey(theme.font) === theme.font ? "preset" : "custom");
       setCreateMode("simple");
       setCustomAccent(accent);
@@ -781,12 +831,15 @@ var ThemePanel = React__namespace.forwardRef(
         themes: nextThemes,
         mode: key,
         colorScheme: preset.base,
+        baseColor: preset.baseColor,
         accent: preset.accent,
         density: preset.density,
         intensity: preset.intensity,
         radius: preset.radius,
         font: preset.font,
-        tokens: preset.tokens
+        colors: preset.colors ?? {},
+        tokens: preset.tokens,
+        components: preset.components ?? {}
       });
       setCustomAccent(draftAccent);
       onCreateTheme?.({ ...meta, preset, presetOption });
@@ -828,7 +881,7 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx("small", { children: fontMode === "preset" ? "\u9009\u62E9\u5185\u7F6E\u5B57\u4F53" : "\u586B\u5199 CSS font-family" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkPSQ3HNZP_cjs.RadioGroup,
+          RadioGroup2,
           {
             className: "theme-panel-create-mode",
             variant: "segmented",
@@ -847,7 +900,7 @@ var ThemePanel = React__namespace.forwardRef(
         fontMode === "custom" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5B57\u4F53\u6808" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkVS3I5OKA_cjs.Input,
+            Input2,
             {
               size: "sm",
               value: fontConfigToText(font),
@@ -872,7 +925,7 @@ var ThemePanel = React__namespace.forwardRef(
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-input", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkS2ZGXBUH_cjs.ColorPicker,
+              ColorPicker2,
               {
                 className: "theme-panel-token-picker",
                 value: tokenPickerValue(tokens[field.key], surfaceFallback),
@@ -883,7 +936,7 @@ var ThemePanel = React__namespace.forwardRef(
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkVS3I5OKA_cjs.Input,
+              Input2,
               {
                 size: "sm",
                 value: tokens[field.key] ?? "",
@@ -909,7 +962,7 @@ var ThemePanel = React__namespace.forwardRef(
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-input", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkS2ZGXBUH_cjs.ColorPicker,
+                ColorPicker2,
                 {
                   className: "theme-panel-token-picker",
                   value: tokenPickerValue(tokens[field.key], surfaceFallback),
@@ -920,7 +973,7 @@ var ThemePanel = React__namespace.forwardRef(
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkVS3I5OKA_cjs.Input,
+                Input2,
                 {
                   size: "sm",
                   value: tokens[field.key] ?? "",
@@ -938,7 +991,7 @@ var ThemePanel = React__namespace.forwardRef(
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-scale", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkVS3I5OKA_cjs.Input,
+                Input2,
                 {
                   size: "sm",
                   value: tokens[field.key] ?? "1",
@@ -946,7 +999,7 @@ var ThemePanel = React__namespace.forwardRef(
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkMPOO5VPW_cjs.Slider,
+                Slider2,
                 {
                   value: parseScaleToken(tokens[field.key], 1, getShadowScaleRange(field.key)),
                   onChange: (value) => onTokenChange(field.key, formatScaleToken(value)),
@@ -974,7 +1027,7 @@ var ThemePanel = React__namespace.forwardRef(
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-input", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkS2ZGXBUH_cjs.ColorPicker,
+              ColorPicker2,
               {
                 className: "theme-panel-token-picker",
                 value: tokenPickerValue(accentPalette[field.key], accentFallback),
@@ -985,7 +1038,7 @@ var ThemePanel = React__namespace.forwardRef(
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkVS3I5OKA_cjs.Input,
+              Input2,
               {
                 size: "sm",
                 value: accentPalette[field.key],
@@ -999,7 +1052,7 @@ var ThemePanel = React__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setRootRef, className: rootClass, ...rest, children: [
       (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-head", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-title", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkQMX67CVT_cjs.Icon, { name: "sliders", size: 14 }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "sliders", size: 14 }),
           title && /* @__PURE__ */ jsxRuntime.jsx("span", { children: title })
         ] }),
         description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "theme-panel-desc", children: description })
@@ -1010,7 +1063,7 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: theme.colorScheme })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkPSQ3HNZP_cjs.RadioGroup,
+          RadioGroup2,
           {
             variant: "segmented",
             size: "sm",
@@ -1035,7 +1088,7 @@ var ThemePanel = React__namespace.forwardRef(
           const deletable = allowDeleteTheme && !protectedPresetKeys.has(key) && key in theme.themes;
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `theme-panel-preset-shell ${deletable ? "deletable" : ""}`, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
-              chunkSW2HMNCA_cjs.Button,
+              Button2,
               {
                 type: "button",
                 variant: "ghost",
@@ -1044,8 +1097,8 @@ var ThemePanel = React__namespace.forwardRef(
                 onClick: () => applyPreset(option),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-preset-ink", "aria-hidden": true, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { background: preset?.tokens?.bg ?? "var(--bg)" } }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { background: preset?.tokens?.["bg-raised"] ?? "var(--bg-raised)" } }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { background: preset?.tokens?.bg ?? "var(--lmn-theme-panel-bg, var(--bg))" } }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { background: preset?.tokens?.["bg-raised"] ?? "var(--lmn-theme-panel-bg-raised, var(--bg-raised))" } }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { background: accentFromPreset(preset) } })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-preset-copy", children: [
@@ -1056,7 +1109,7 @@ var ThemePanel = React__namespace.forwardRef(
               }
             ),
             deletable && /* @__PURE__ */ jsxRuntime.jsx(
-              chunkSW2HMNCA_cjs.Button,
+              Button2,
               {
                 type: "button",
                 variant: "danger",
@@ -1070,7 +1123,7 @@ var ThemePanel = React__namespace.forwardRef(
             )
           ] }, key);
         }) }),
-        allowCreateTheme && !isCreatingTheme && /* @__PURE__ */ jsxRuntime.jsx(chunkSW2HMNCA_cjs.Button, { type: "button", variant: "primary", size: "sm", icon: "plus", block: true, onClick: beginCreateTheme, children: "\u65B0\u5EFA\u4E3B\u9898" }),
+        allowCreateTheme && !isCreatingTheme && /* @__PURE__ */ jsxRuntime.jsx(Button2, { type: "button", variant: "primary", size: "sm", icon: "plus", block: true, onClick: beginCreateTheme, children: "\u65B0\u5EFA\u4E3B\u9898" }),
         allowCreateTheme && isCreatingTheme && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-head", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -1078,7 +1131,7 @@ var ThemePanel = React__namespace.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx("small", { children: previewDraft ? "\u5B9E\u65F6\u9884\u89C8\u4E2D" : "\u9884\u89C8\u5DF2\u6682\u505C" })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkMYW7LNB2_cjs.Switch,
+              Switch2,
               {
                 size: "sm",
                 checked: previewDraft,
@@ -1089,7 +1142,7 @@ var ThemePanel = React__namespace.forwardRef(
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkVS3I5OKA_cjs.Input,
+            Input2,
             {
               size: "sm",
               value: draftName,
@@ -1100,7 +1153,7 @@ var ThemePanel = React__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkPSQ3HNZP_cjs.RadioGroup,
+            RadioGroup2,
             {
               className: "theme-panel-create-mode",
               variant: "segmented",
@@ -1116,7 +1169,7 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u57FA\u5E95" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkPSQ3HNZP_cjs.RadioGroup,
+              RadioGroup2,
               {
                 variant: "segmented",
                 size: "sm",
@@ -1132,11 +1185,11 @@ var ThemePanel = React__namespace.forwardRef(
           createMode === "simple" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-grid", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u8868\u9762" }),
-              /* @__PURE__ */ jsxRuntime.jsx(chunkS2ZGXBUH_cjs.ColorPicker, { size: "sm", value: draftSurface, onChange: updateDraftSurface })
+              /* @__PURE__ */ jsxRuntime.jsx(ColorPicker2, { size: "sm", value: draftSurface, onChange: updateDraftSurface })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5F3A\u8C03" }),
-              /* @__PURE__ */ jsxRuntime.jsx(chunkS2ZGXBUH_cjs.ColorPicker, { size: "sm", value: draftAccent, onChange: updateDraftAccent })
+              /* @__PURE__ */ jsxRuntime.jsx(ColorPicker2, { size: "sm", value: draftAccent, onChange: updateDraftAccent })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-sliders", children: [
@@ -1145,7 +1198,7 @@ var ThemePanel = React__namespace.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: draftIntensity })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkMPOO5VPW_cjs.Slider,
+              Slider2,
               {
                 value: draftIntensity,
                 onChange: setDraftIntensity,
@@ -1162,7 +1215,7 @@ var ThemePanel = React__namespace.forwardRef(
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkMPOO5VPW_cjs.Slider,
+              Slider2,
               {
                 value: draftRadius,
                 onChange: setDraftRadius,
@@ -1175,7 +1228,7 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5BC6\u5EA6" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkPSQ3HNZP_cjs.RadioGroup,
+              RadioGroup2,
               {
                 variant: "segmented",
                 size: "sm",
@@ -1188,7 +1241,7 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5B57\u4F53" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkPSQ3HNZP_cjs.RadioGroup,
+              RadioGroup2,
               {
                 variant: "segmented",
                 size: "sm",
@@ -1227,7 +1280,7 @@ var ThemePanel = React__namespace.forwardRef(
               },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-create-preview-label", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(chunkQMX67CVT_cjs.Icon, { name: "palette", size: 13 }),
+                  /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "palette", size: 13 }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { children: draftName.trim() || "\u81EA\u5B9A\u4E49\u4E3B\u9898" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("i", { "aria-hidden": true })
@@ -1235,9 +1288,9 @@ var ThemePanel = React__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-actions", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(chunkSW2HMNCA_cjs.Button, { type: "button", variant: "ghost", size: "sm", icon: "x", onClick: cancelCreateTheme, children: "\u53D6\u6D88" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button2, { type: "button", variant: "ghost", size: "sm", icon: "x", onClick: cancelCreateTheme, children: "\u53D6\u6D88" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkSW2HMNCA_cjs.Button,
+              Button2,
               {
                 type: "button",
                 variant: "primary",
@@ -1257,20 +1310,20 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: theme.accent === "custom" ? customAccent : theme.accent })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-swatches", children: [
-          Object.keys(chunkPKNRTFNE_cjs.ACCENT_PRESETS).map((key) => /* @__PURE__ */ jsxRuntime.jsx(
-            chunkSW2HMNCA_cjs.Button,
+          Object.keys(chunkEE5KXDRK_cjs.ACCENT_PRESETS).map((key) => /* @__PURE__ */ jsxRuntime.jsx(
+            Button2,
             {
               type: "button",
               size: "sm",
               "aria-label": key,
               className: `theme-panel-swatch ${theme.accent === key ? "active" : ""}`,
-              style: { background: chunkPKNRTFNE_cjs.ACCENT_PRESETS[key].accent },
+              style: { background: chunkEE5KXDRK_cjs.ACCENT_PRESETS[key].accent },
               onClick: () => theme.setAccent(key)
             },
             key
           )),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkS2ZGXBUH_cjs.ColorPicker,
+            ColorPicker2,
             {
               size: "sm",
               value: customAccent,
@@ -1288,7 +1341,7 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: theme.intensity })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkMPOO5VPW_cjs.Slider,
+          Slider2,
           {
             value: theme.intensity,
             onChange: theme.setIntensity,
@@ -1305,7 +1358,7 @@ var ThemePanel = React__namespace.forwardRef(
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkMPOO5VPW_cjs.Slider,
+          Slider2,
           {
             value: shadowScale,
             onChange: (value) => updateThemeToken("shadow-scale", formatScaleToken(value)),
@@ -1322,7 +1375,7 @@ var ThemePanel = React__namespace.forwardRef(
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkMPOO5VPW_cjs.Slider,
+          Slider2,
           {
             value: shadowFloatScale,
             onChange: (value) => updateThemeToken("shadow-float-scale", formatScaleToken(value)),
@@ -1338,7 +1391,7 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: theme.intensity })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkMPOO5VPW_cjs.Slider,
+          Slider2,
           {
             value: theme.intensity,
             onChange: theme.setIntensity,
@@ -1357,7 +1410,7 @@ var ThemePanel = React__namespace.forwardRef(
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkMPOO5VPW_cjs.Slider,
+          Slider2,
           {
             value: theme.radius,
             onChange: theme.setRadius,
@@ -1370,7 +1423,7 @@ var ThemePanel = React__namespace.forwardRef(
       sections.includes("font") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-row", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "theme-panel-label", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5B57\u4F53" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkPSQ3HNZP_cjs.RadioGroup,
+          RadioGroup2,
           {
             variant: "segmented",
             size: "sm",
@@ -1383,7 +1436,7 @@ var ThemePanel = React__namespace.forwardRef(
       sections.includes("density") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-row", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "theme-panel-label", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5BC6\u5EA6" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkPSQ3HNZP_cjs.RadioGroup,
+          RadioGroup2,
           {
             variant: "segmented",
             size: "sm",
@@ -1395,7 +1448,7 @@ var ThemePanel = React__namespace.forwardRef(
       ] }),
       sections.includes("advanced") && !isCreatingTheme && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-row theme-panel-advanced-row", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkSW2HMNCA_cjs.Button,
+          Button2,
           {
             type: "button",
             variant: "ghost",
@@ -1413,7 +1466,7 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u57FA\u5E95" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkPSQ3HNZP_cjs.RadioGroup,
+              RadioGroup2,
               {
                 variant: "segmented",
                 size: "sm",
@@ -1445,7 +1498,7 @@ var ThemePanel = React__namespace.forwardRef(
             canSaveCurrentThemeAsNew && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-save-as-field", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentSavedTheme ? "\u4E3B\u9898\u540D" : "\u65B0\u4E3B\u9898\u540D" }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkVS3I5OKA_cjs.Input,
+                Input2,
                 {
                   size: "sm",
                   value: saveAsName,
@@ -1459,7 +1512,7 @@ var ThemePanel = React__namespace.forwardRef(
             canSaveCurrentThemeAsNew && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-save-as-field", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u526F\u6807\u9898" }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkVS3I5OKA_cjs.Input,
+                Input2,
                 {
                   size: "sm",
                   value: saveAsDescription,
@@ -1473,9 +1526,9 @@ var ThemePanel = React__namespace.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-footer", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentSavedTheme ? `\u5F53\u524D\u9884\u8BBE: ${getActiveThemeMeta().label}` : canSaveCurrentThemeAsNew ? "\u9ED8\u8BA4\u9884\u8BBE\u4F1A\u4FDD\u5B58\u4E3A\u65B0\u4E3B\u9898" : "\u5F53\u524D\u8C03\u6574\u4EC5\u8FD0\u884C\u65F6\u751F\u6548" }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-buttons", children: [
-                canUpdateCurrentTheme && /* @__PURE__ */ jsxRuntime.jsx(chunkSW2HMNCA_cjs.Button, { type: "button", variant: "primary", size: "sm", icon: "check", onClick: saveCurrentThemeUpdate, children: "\u4FDD\u5B58\u4FEE\u6539" }),
+                canUpdateCurrentTheme && /* @__PURE__ */ jsxRuntime.jsx(Button2, { type: "button", variant: "primary", size: "sm", icon: "check", onClick: saveCurrentThemeUpdate, children: "\u4FDD\u5B58\u4FEE\u6539" }),
                 canSaveCurrentThemeAsNew && /* @__PURE__ */ jsxRuntime.jsx(
-                  chunkSW2HMNCA_cjs.Button,
+                  Button2,
                   {
                     type: "button",
                     variant: canUpdateCurrentTheme ? "ghost" : "primary",
@@ -1490,11 +1543,16 @@ var ThemePanel = React__namespace.forwardRef(
           ] })
         ] })
       ] }),
-      showReset && /* @__PURE__ */ jsxRuntime.jsx(chunkSW2HMNCA_cjs.Button, { type: "button", variant: "ghost", size: "sm", icon: "reload", block: true, onClick: resetTheme, children: "\u91CD\u7F6E\u4E3B\u9898" })
+      showReset && /* @__PURE__ */ jsxRuntime.jsx(Button2, { type: "button", variant: "ghost", size: "sm", icon: "reload", block: true, onClick: resetTheme, children: "\u91CD\u7F6E\u4E3B\u9898" })
     ] });
   }
 );
-ThemePanel.displayName = "ThemePanel";
+ThemePanelBase.displayName = "ThemePanel";
+var ThemePanel = chunkNRJXZPZR_cjs.withComponentTheme(
+  ThemePanelBase,
+  "ThemePanel",
+  ["theme-panel", "button", "color-picker", "input", "radio", "slider", "switch"]
+);
 
 exports.THEME_PANEL_DEFAULT_PRESET_OPTIONS = THEME_PANEL_DEFAULT_PRESET_OPTIONS;
 exports.THEME_PANEL_DEFAULT_THEME_PRESETS = THEME_PANEL_DEFAULT_THEME_PRESETS;