@fangxinyan/lumina 0.8.0 → 0.9.0

package/dist/index.d.cts

@@ -6,7 +6,7 @@ export { Switch, SwitchProps } from './Switch.cjs';
 export { Checkbox, CheckboxProps } from './Checkbox.cjs';
 export { Radio, RadioGroup, RadioGroupProps, RadioOption, RadioProps } from './Radio.cjs';
 export { Slider, SliderBaseProps, SliderProps, SliderRangeProps, SliderRangeValue, SliderSingleProps, SliderValue } from './Slider.cjs';
-export { MultiSelectProps, Select, SelectFilterOption, SelectItem, SelectMultiChangeHandler, SelectOption, SelectOptionGroup, SelectOptionRenderInfo, SelectProps, SelectSelectedRenderInfo, SelectSingleChangeHandler, SingleSelectProps } from './Select.cjs';
+export { MultiSelectProps, Select, SelectFilterOption, SelectItem, SelectMultiChangeHandler, SelectOption, SelectOptionExtraRenderInfo, SelectOptionGroup, SelectOptionRenderInfo, SelectProps, SelectSelectedRenderInfo, SelectSingleChangeHandler, SingleSelectProps } from './Select.cjs';
 export { TabItem, Tabs, TabsProps } from './Tabs.cjs';
 export { Collapse, CollapseItem, CollapseProps } from './Collapse.cjs';
 export { Card, CardProps } from './Card.cjs';
@@ -54,6 +54,6 @@ import 'react/jsx-runtime';
 import 'react';
 
 /** Package version — bumped by release scripts. */
-declare const VERSION = "0.8.0";
+declare const VERSION = "0.9.0";
 
 export { VERSION };

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { Switch, SwitchProps } from './Switch.js';
 export { Checkbox, CheckboxProps } from './Checkbox.js';
 export { Radio, RadioGroup, RadioGroupProps, RadioOption, RadioProps } from './Radio.js';
 export { Slider, SliderBaseProps, SliderProps, SliderRangeProps, SliderRangeValue, SliderSingleProps, SliderValue } from './Slider.js';
-export { MultiSelectProps, Select, SelectFilterOption, SelectItem, SelectMultiChangeHandler, SelectOption, SelectOptionGroup, SelectOptionRenderInfo, SelectProps, SelectSelectedRenderInfo, SelectSingleChangeHandler, SingleSelectProps } from './Select.js';
+export { MultiSelectProps, Select, SelectFilterOption, SelectItem, SelectMultiChangeHandler, SelectOption, SelectOptionExtraRenderInfo, SelectOptionGroup, SelectOptionRenderInfo, SelectProps, SelectSelectedRenderInfo, SelectSingleChangeHandler, SingleSelectProps } from './Select.js';
 export { TabItem, Tabs, TabsProps } from './Tabs.js';
 export { Collapse, CollapseItem, CollapseProps } from './Collapse.js';
 export { Card, CardProps } from './Card.js';
@@ -54,6 +54,6 @@ import 'react/jsx-runtime';
 import 'react';
 
 /** Package version — bumped by release scripts. */
-declare const VERSION = "0.8.0";
+declare const VERSION = "0.9.0";
 
 export { VERSION };

package/dist/index.js

@@ -1,61 +1,61 @@
-export { Timeline } from './chunk-6RQJXSWN.js';
-export { Tooltip } from './chunk-U3SG2YT2.js';
-export { Link, Paragraph, Text, Title, Typography } from './chunk-UQI4R32R.js';
-export { TablePro } from './chunk-63RSKQID.js';
-export { Table } from './chunk-WMISXERU.js';
-export { Tabs } from './chunk-IJDM2U3B.js';
+export { Timeline } from './chunk-U7V2FOIM.js';
+export { Tooltip } from './chunk-TALNKJQ2.js';
+export { Link, Paragraph, Text, Title, Typography } from './chunk-2COQYOVG.js';
+export { TablePro } from './chunk-2NECDEAJ.js';
+export { Table } from './chunk-JMYUO7V7.js';
+export { Tabs } from './chunk-4JANYBXO.js';
 import './chunk-EE7IJ3MB.js';
-export { THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS, ThemePanel } from './chunk-OLYSSZHP.js';
-export { TimePicker } from './chunk-SXLRWYQQ.js';
-export { Skeleton } from './chunk-5AXNUX3J.js';
-export { Slider } from './chunk-K5HGHOG7.js';
-export { Splitter } from './chunk-J5UEQ3ZQ.js';
-export { StatusBar, StatusBarItem } from './chunk-YKHIIC7M.js';
-export { SURFACE_THEME_PRESETS, Surface } from './chunk-DU2DSERH.js';
+export { THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS, ThemePanel } from './chunk-IU6PLLEL.js';
+export { TimePicker } from './chunk-SXT672KF.js';
+export { Skeleton } from './chunk-MFJHI472.js';
+export { Slider } from './chunk-Y3WFWA52.js';
+export { Splitter } from './chunk-J7D5CQDK.js';
+export { StatusBar, StatusBarItem } from './chunk-VLQ6XIAL.js';
+export { SURFACE_THEME_PRESETS, Surface } from './chunk-HAIWLYLR.js';
 export { LUMINA_THEME_PRESETS, cloneLuminaThemePreset, pickLuminaThemePresets } from './chunk-TSL3F2K3.js';
-export { Switch } from './chunk-LEDESWNL.js';
-export { InputNumber } from './chunk-YPMQC5HX.js';
-export { List } from './chunk-VQEMMJHC.js';
-export { MessageContainer, ToastContainer, message, toast } from './chunk-7QAVPVMW.js';
-export { Modal } from './chunk-BKW5PXEO.js';
-export { Pagination } from './chunk-HQNDVNTQ.js';
-export { Select } from './chunk-DURKCGEM.js';
-export { Tag } from './chunk-62VV5COT.js';
-export { Popover } from './chunk-RPO7657K.js';
-export { Progress } from './chunk-HQFKXTX6.js';
-export { Radio, RadioGroup } from './chunk-QDY56GGO.js';
-export { DateTimePicker } from './chunk-4SKHRPDH.js';
-export { Divider } from './chunk-2BIOTRQC.js';
-export { Drawer } from './chunk-HVPUGYBY.js';
-export { Empty } from './chunk-AURYNA6G.js';
-export { Form, FormItem, useForm } from './chunk-QDMFXRPI.js';
-export { Image, ImageGrid, LayeredImage, SpriteImage } from './chunk-Y22PTPA7.js';
-export { Card } from './chunk-Y2MT6PI6.js';
-export { Spin } from './chunk-PQOBBASY.js';
-export { Cascader } from './chunk-O6G3F5L4.js';
-export { Checkbox } from './chunk-KATJAJUU.js';
-export { Collapse } from './chunk-YBGMTQ2V.js';
-export { ColorPicker } from './chunk-FY73C7JK.js';
-export { CommandPalette } from './chunk-EAUB6FEN.js';
-export { ContextMenu } from './chunk-3IZZBM56.js';
-export { DatePicker } from './chunk-LJVQQEME.js';
+export { Switch } from './chunk-O6PRE6MZ.js';
+export { InputNumber } from './chunk-RYF5ADJW.js';
+export { List } from './chunk-LACXN5CI.js';
+export { MessageContainer, ToastContainer, message, toast } from './chunk-2V6RQQRI.js';
+export { Modal } from './chunk-GMFOY7RD.js';
+export { Pagination } from './chunk-UCE53RYR.js';
+export { Select } from './chunk-AL2PYVVP.js';
+export { Tag } from './chunk-OGMI3TO5.js';
+export { Popover } from './chunk-A34P5CU7.js';
+export { Progress } from './chunk-BOBT7JUB.js';
+export { Radio, RadioGroup } from './chunk-D2N7OXMK.js';
+export { DateTimePicker } from './chunk-MKVONDTB.js';
+export { Divider } from './chunk-ISK2RW7F.js';
+export { Drawer } from './chunk-BDPJ2BPN.js';
+export { Empty } from './chunk-KFCWDFBW.js';
+export { Form, FormItem, useForm } from './chunk-INCTDROH.js';
+export { Image, ImageGrid, LayeredImage, SpriteImage } from './chunk-QK3E6FAQ.js';
+export { Card } from './chunk-7NKNQRK6.js';
+export { Spin } from './chunk-L2NEYHYG.js';
+export { Cascader } from './chunk-CFKAKB2B.js';
+export { Checkbox } from './chunk-QSLXUNLM.js';
+export { Collapse } from './chunk-XFJTJVWD.js';
+export { ColorPicker } from './chunk-MEBAE7DB.js';
+export { CommandPalette } from './chunk-7PUYEPLK.js';
+export { ContextMenu } from './chunk-TNQJA5JF.js';
+export { DatePicker } from './chunk-DQMG4XPX.js';
 import './chunk-RC6ULCQP.js';
-export { Alert } from './chunk-2HIN5NFM.js';
-export { AppShell, Sidebar, TitleBar, WindowControls } from './chunk-I4YPBAQ5.js';
-export { AutoComplete } from './chunk-AUO2YYHB.js';
+export { Alert } from './chunk-5VLANZAJ.js';
+export { AppShell, Sidebar, TitleBar, WindowControls } from './chunk-2NXLVPF4.js';
+export { AutoComplete } from './chunk-Z7GKR4LL.js';
 import './chunk-3QXP2ZNP.js';
-export { Input, InputPassword } from './chunk-UE4HFGJ6.js';
-export { TextArea, Textarea } from './chunk-3F424R5P.js';
+export { Input, InputPassword } from './chunk-TUXF2G2O.js';
+export { TextArea, Textarea } from './chunk-AXZNZ2IH.js';
 import './chunk-2A4GYSN4.js';
-export { Avatar } from './chunk-ALAG4ZUH.js';
-export { Badge } from './chunk-ARUN2DMD.js';
-export { Button, IconButton } from './chunk-JHM7MN3G.js';
-export { Calendar } from './chunk-3DKFS44V.js';
-export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, isIconName, renderIconSlot, resolveIconName } from './chunk-LQMOYVQF.js';
-import './chunk-DRDDQCDD.js';
-export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, DEFAULT_THEME_COLORS, FONT_STACKS, ThemeProvider, applyTheme, componentTokensToStyle, deriveThemeColors, normalizeAccentInput, resolveThemeColorScheme, resolveThemeColors, resolveThemeMode, resolveVisualThemeSnapshot, themeColorsToStyle, themeTokenToKebabCase, useTheme, useThemeOptional, visualThemeToStyle } from './chunk-ULTDRMGN.js';
+export { Avatar } from './chunk-6OVWY63D.js';
+export { Badge } from './chunk-427CDZDU.js';
+export { Button, IconButton } from './chunk-563SQXH7.js';
+export { Calendar } from './chunk-TY5LOU3A.js';
+export { AimOutlined, AppstoreOutlined, BarChartOutlined, BlockOutlined, BorderOutlined, CameraOutlined, CaretDownOutlined, CaretUpOutlined, CheckCircleFilled, CheckCircleOutlined, CheckOutlined, ClockCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, EnvironmentOutlined, ExclamationCircleOutlined, FolderOpenOutlined, ICON_NAMES, Icon, LeftOutlined, LoadingOutlined, MinusCircleOutlined, MinusOutlined, NAMED_ICON_MAP, PictureOutlined, PlusOutlined, QqOutlined, ReloadOutlined, RightOutlined, RobotOutlined, SearchOutlined, SettingOutlined, StarFilled, StarOutlined, SwapOutlined, SwapRightOutlined, SyncOutlined, ThunderboltOutlined, TranslationOutlined, UnorderedListOutlined, UserOutlined, isIconName, renderIconSlot, resolveIconName } from './chunk-2BM65ITV.js';
+import './chunk-5HLNFDV4.js';
+export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, DEFAULT_THEME_COLORS, FONT_STACKS, ThemeProvider, applyTheme, componentTokensToStyle, deriveThemeColors, normalizeAccentInput, resolveThemeColorScheme, resolveThemeColors, resolveThemeMode, resolveVisualThemeSnapshot, themeColorsToStyle, themeTokenToKebabCase, useTheme, useThemeOptional, visualThemeToStyle } from './chunk-CPVUDSIY.js';
 
 // src/index.ts
-var VERSION = "0.8.0";
+var VERSION = "0.9.0";
 
 export { VERSION };

package/dist/styles.css

@@ -24,10 +24,10 @@
   --shadow-scale: 1;
   --shadow-float-scale: 1;
 
-  --shadow-blur: calc(16px * var(--d) * var(--shadow-scale));
-  --shadow-offset: calc(6px * var(--d) * var(--shadow-scale));
-  --shadow-inset-blur: calc(10px * var(--d) * var(--shadow-scale));
-  --shadow-inset-offset: calc(4px * var(--d) * var(--shadow-scale));
+  --shadow-blur: calc(12px * var(--d) * var(--shadow-scale));
+  --shadow-offset: calc(5px * var(--d) * var(--shadow-scale));
+  --shadow-inset-blur: calc(8px * var(--d) * var(--shadow-scale));
+  --shadow-inset-offset: calc(3px * var(--d) * var(--shadow-scale));
 
   --neu-shadow-panel:
     var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-dark),
@@ -50,8 +50,8 @@
     inset calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-blur) * 0.6) var(--shadow-light);
 
   --neu-shadow-subtle:
-    1px 1px 2px var(--shadow-dark),
-    -1px -1px 2px var(--shadow-light);
+    0.75px 0.75px 1.5px var(--shadow-dark),
+    -0.75px -0.75px 1.5px var(--shadow-light);
 
   /* Floating-overlay elevation.
      No top-left highlight — there's no continuous surface beneath an overlay
@@ -151,10 +151,10 @@
   --mask-bg: color-mix(in oklch, black 18%, transparent);
   --shadow-dark: rgba(163, 177, 198, 0.55);
   --shadow-light: rgba(255, 255, 255, 0.95);
-  --shadow-offset: calc(6px * var(--d) * var(--shadow-scale));
-  --shadow-blur: calc(16px * var(--d) * var(--shadow-scale));
-  --shadow-inset-offset: calc(4px * var(--d) * var(--shadow-scale));
-  --shadow-inset-blur: calc(10px * var(--d) * var(--shadow-scale));
+  --shadow-offset: calc(5px * var(--d) * var(--shadow-scale));
+  --shadow-blur: calc(12px * var(--d) * var(--shadow-scale));
+  --shadow-inset-offset: calc(3px * var(--d) * var(--shadow-scale));
+  --shadow-inset-blur: calc(8px * var(--d) * var(--shadow-scale));
 }
 /* ---- Dark theme ----
    深色模式的拟态不能照搬浅色思路:白色高光会变成刺眼的白圈。
@@ -175,10 +175,10 @@
   --shadow-dark: rgba(0, 0, 0, 0.55);
   --shadow-light: rgba(130, 145, 180, 0.06);
   /* 同时收紧阴影尺寸,深色模式下拟态更内敛 */
-  --shadow-offset: calc(4px * var(--d) * var(--shadow-scale));
-  --shadow-blur: calc(10px * var(--d) * var(--shadow-scale));
-  --shadow-inset-offset: calc(3px * var(--d) * var(--shadow-scale));
-  --shadow-inset-blur: calc(7px * var(--d) * var(--shadow-scale));
+  --shadow-offset: calc(3px * var(--d) * var(--shadow-scale));
+  --shadow-blur: calc(8px * var(--d) * var(--shadow-scale));
+  --shadow-inset-offset: calc(2px * var(--d) * var(--shadow-scale));
+  --shadow-inset-blur: calc(5px * var(--d) * var(--shadow-scale));
   --accent-soft: oklch(35% 0.06 235);
   --accent-ink: oklch(82% 0.09 235);
   --accent-glow: oklch(68% 0.14 235 / 0.18);
@@ -681,6 +681,9 @@ svg[data-lumina-icon-color],
   flex-shrink: 0;
   transition: all var(--dur) var(--ease);
 }
+.switch.invalid .switch-track {
+  box-shadow: var(--lmn-switch-neu-shadow-inset, var(--neu-shadow-inset)), 0 0 0 2px color-mix(in oklch, var(--lmn-switch-danger, var(--danger)) 30%, transparent);
+}
 .switch.sm { --w: 36px; --h: 20px; }
 .switch.lg { --w: 58px; --h: 32px; }
 /* When checkedChildren / unCheckedChildren are present, widen the track to fit. */
@@ -781,6 +784,9 @@ svg[data-lumina-icon-color],
   color: var(--lmn-checkbox-bg, var(--bg));
   transition: all var(--dur) var(--ease);
 }
+.checkbox.invalid .checkbox-box {
+  box-shadow: var(--lmn-checkbox-neu-shadow-inset, var(--neu-shadow-inset)), 0 0 0 2px color-mix(in oklch, var(--lmn-checkbox-danger, var(--danger)) 30%, transparent);
+}
 .checkbox-box svg { opacity: 0; transform: scale(0.6); transition: all var(--dur) var(--ease); }
 .checkbox.checked .checkbox-box {
   background: var(--lmn-checkbox-accent, var(--accent));
@@ -791,6 +797,10 @@ svg[data-lumina-icon-color],
   background: var(--lmn-checkbox-accent, var(--accent));
   box-shadow: var(--lmn-checkbox-neu-shadow-control, var(--neu-shadow-control)), 0 2px 8px var(--lmn-checkbox-accent-glow, var(--accent-glow));
 }
+.checkbox.checked.invalid .checkbox-box,
+.checkbox.indeterminate.invalid .checkbox-box {
+  box-shadow: var(--lmn-checkbox-neu-shadow-control, var(--neu-shadow-control)), 0 2px 8px var(--lmn-checkbox-accent-glow, var(--accent-glow)), 0 0 0 2px color-mix(in oklch, var(--lmn-checkbox-danger, var(--danger)) 30%, transparent);
+}
 .checkbox.indeterminate .checkbox-box::after {
   content: "";
   width: 10px; height: 2px;
@@ -1795,6 +1805,30 @@ button.collapse-chev {
   min-width: 0;
   text-align: left;
 }
+.menu-item-row {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  border-radius: var(--r-sm);
+  transition: all var(--dur-fast) var(--ease);
+}
+.menu-item-row > .menu-item {
+  flex: 1;
+  min-width: 0;
+  width: auto;
+}
+.menu-item-extra {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0 8px 0 2px;
+  color: var(--lmn-select-fg-subtle, var(--fg-subtle));
+}
+.menu-item-extra:focus-within,
+.menu-item-extra:hover {
+  color: var(--lmn-select-accent-ink, var(--accent-ink));
+}
 .menu-item-label {
   white-space: nowrap;
   overflow: hidden;
@@ -1808,14 +1842,18 @@ button.collapse-chev {
   text-overflow: ellipsis;
 }
 .menu-item.active .menu-item-desc { color: color-mix(in oklch, var(--lmn-select-accent-ink, var(--accent-ink)) 70%, var(--lmn-select-fg-subtle, var(--fg-subtle))); }
-/* Keyboard / hover highlight — soft raised pill */
-.menu-item.highlight:not([disabled]) {
+/* Keyboard / hover highlight — inset styling stays inside the scrollport edge. */
+.menu-item-row.highlight:not(.disabled) {
   background: var(--lmn-select-bg, var(--bg));
-  box-shadow: var(--lmn-select-neu-shadow-control, var(--neu-shadow-control));
+  box-shadow: var(--lmn-select-neu-shadow-inset, var(--neu-shadow-inset));
+}
+.menu-item-row.highlight:not(.disabled) .menu-item {
   color: var(--lmn-select-accent-ink, var(--accent-ink));
 }
-.menu-item[disabled] {
+.menu-item-row.disabled {
   opacity: 0.45;
+}
+.menu-item-row.disabled .menu-item {
   cursor: not-allowed;
 }
 .menu {
@@ -1850,7 +1888,8 @@ button.collapse-chev {
   width: 100%;
   text-align: left;
 }
-.menu-item:hover { background: var(--lmn-select-bg, var(--bg)); box-shadow: var(--lmn-select-neu-shadow-subtle, var(--neu-shadow-subtle)); color: var(--lmn-select-accent-ink, var(--accent-ink)); }
+.menu-item-row:hover:not(.disabled) { background: var(--lmn-select-bg, var(--bg)); box-shadow: var(--lmn-select-neu-shadow-inset, var(--neu-shadow-inset)); }
+.menu-item-row:hover:not(.disabled) .menu-item { color: var(--lmn-select-accent-ink, var(--accent-ink)); }
 .menu-item.active { color: var(--lmn-select-accent-ink, var(--accent-ink)); font-weight: 500; }
 .menu-item .tick { margin-left: auto; color: var(--lmn-select-accent, var(--accent)); opacity: 0; }
 .menu-item.active .tick { opacity: 1; }

package/dist/{tokens-CEJVVA3G.css → tokens-223RYVVS.css}

@@ -24,10 +24,10 @@
   --shadow-scale: 1;
   --shadow-float-scale: 1;
 
-  --shadow-blur: calc(16px * var(--d) * var(--shadow-scale));
-  --shadow-offset: calc(6px * var(--d) * var(--shadow-scale));
-  --shadow-inset-blur: calc(10px * var(--d) * var(--shadow-scale));
-  --shadow-inset-offset: calc(4px * var(--d) * var(--shadow-scale));
+  --shadow-blur: calc(12px * var(--d) * var(--shadow-scale));
+  --shadow-offset: calc(5px * var(--d) * var(--shadow-scale));
+  --shadow-inset-blur: calc(8px * var(--d) * var(--shadow-scale));
+  --shadow-inset-offset: calc(3px * var(--d) * var(--shadow-scale));
 
   --neu-shadow-panel:
     var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-dark),
@@ -50,8 +50,8 @@
     inset calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-blur) * 0.6) var(--shadow-light);
 
   --neu-shadow-subtle:
-    1px 1px 2px var(--shadow-dark),
-    -1px -1px 2px var(--shadow-light);
+    0.75px 0.75px 1.5px var(--shadow-dark),
+    -0.75px -0.75px 1.5px var(--shadow-light);
 
   /* Floating-overlay elevation.
      No top-left highlight — there's no continuous surface beneath an overlay
@@ -153,10 +153,10 @@
   --mask-bg: color-mix(in oklch, black 18%, transparent);
   --shadow-dark: rgba(163, 177, 198, 0.55);
   --shadow-light: rgba(255, 255, 255, 0.95);
-  --shadow-offset: calc(6px * var(--d) * var(--shadow-scale));
-  --shadow-blur: calc(16px * var(--d) * var(--shadow-scale));
-  --shadow-inset-offset: calc(4px * var(--d) * var(--shadow-scale));
-  --shadow-inset-blur: calc(10px * var(--d) * var(--shadow-scale));
+  --shadow-offset: calc(5px * var(--d) * var(--shadow-scale));
+  --shadow-blur: calc(12px * var(--d) * var(--shadow-scale));
+  --shadow-inset-offset: calc(3px * var(--d) * var(--shadow-scale));
+  --shadow-inset-blur: calc(8px * var(--d) * var(--shadow-scale));
 }
 
 /* ---- Dark theme ----
@@ -178,10 +178,10 @@
   --shadow-dark: rgba(0, 0, 0, 0.55);
   --shadow-light: rgba(130, 145, 180, 0.06);
   /* 同时收紧阴影尺寸,深色模式下拟态更内敛 */
-  --shadow-offset: calc(4px * var(--d) * var(--shadow-scale));
-  --shadow-blur: calc(10px * var(--d) * var(--shadow-scale));
-  --shadow-inset-offset: calc(3px * var(--d) * var(--shadow-scale));
-  --shadow-inset-blur: calc(7px * var(--d) * var(--shadow-scale));
+  --shadow-offset: calc(3px * var(--d) * var(--shadow-scale));
+  --shadow-blur: calc(8px * var(--d) * var(--shadow-scale));
+  --shadow-inset-offset: calc(2px * var(--d) * var(--shadow-scale));
+  --shadow-inset-blur: calc(5px * var(--d) * var(--shadow-scale));
   --accent-soft: oklch(35% 0.06 235);
   --accent-ink: oklch(82% 0.09 235);
   --accent-glow: oklch(68% 0.14 235 / 0.18);

package/dist/tokens.css

@@ -24,10 +24,10 @@
   --shadow-scale: 1;
   --shadow-float-scale: 1;
 
-  --shadow-blur: calc(16px * var(--d) * var(--shadow-scale));
-  --shadow-offset: calc(6px * var(--d) * var(--shadow-scale));
-  --shadow-inset-blur: calc(10px * var(--d) * var(--shadow-scale));
-  --shadow-inset-offset: calc(4px * var(--d) * var(--shadow-scale));
+  --shadow-blur: calc(12px * var(--d) * var(--shadow-scale));
+  --shadow-offset: calc(5px * var(--d) * var(--shadow-scale));
+  --shadow-inset-blur: calc(8px * var(--d) * var(--shadow-scale));
+  --shadow-inset-offset: calc(3px * var(--d) * var(--shadow-scale));
 
   --neu-shadow-panel:
     var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-dark),
@@ -50,8 +50,8 @@
     inset calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-blur) * 0.6) var(--shadow-light);
 
   --neu-shadow-subtle:
-    1px 1px 2px var(--shadow-dark),
-    -1px -1px 2px var(--shadow-light);
+    0.75px 0.75px 1.5px var(--shadow-dark),
+    -0.75px -0.75px 1.5px var(--shadow-light);
 
   /* Floating-overlay elevation.
      No top-left highlight — there's no continuous surface beneath an overlay
@@ -153,10 +153,10 @@
   --mask-bg: color-mix(in oklch, black 18%, transparent);
   --shadow-dark: rgba(163, 177, 198, 0.55);
   --shadow-light: rgba(255, 255, 255, 0.95);
-  --shadow-offset: calc(6px * var(--d) * var(--shadow-scale));
-  --shadow-blur: calc(16px * var(--d) * var(--shadow-scale));
-  --shadow-inset-offset: calc(4px * var(--d) * var(--shadow-scale));
-  --shadow-inset-blur: calc(10px * var(--d) * var(--shadow-scale));
+  --shadow-offset: calc(5px * var(--d) * var(--shadow-scale));
+  --shadow-blur: calc(12px * var(--d) * var(--shadow-scale));
+  --shadow-inset-offset: calc(3px * var(--d) * var(--shadow-scale));
+  --shadow-inset-blur: calc(8px * var(--d) * var(--shadow-scale));
 }
 
 /* ---- Dark theme ----
@@ -178,10 +178,10 @@
   --shadow-dark: rgba(0, 0, 0, 0.55);
   --shadow-light: rgba(130, 145, 180, 0.06);
   /* 同时收紧阴影尺寸,深色模式下拟态更内敛 */
-  --shadow-offset: calc(4px * var(--d) * var(--shadow-scale));
-  --shadow-blur: calc(10px * var(--d) * var(--shadow-scale));
-  --shadow-inset-offset: calc(3px * var(--d) * var(--shadow-scale));
-  --shadow-inset-blur: calc(7px * var(--d) * var(--shadow-scale));
+  --shadow-offset: calc(3px * var(--d) * var(--shadow-scale));
+  --shadow-blur: calc(8px * var(--d) * var(--shadow-scale));
+  --shadow-inset-offset: calc(2px * var(--d) * var(--shadow-scale));
+  --shadow-inset-blur: calc(5px * var(--d) * var(--shadow-scale));
   --accent-soft: oklch(35% 0.06 235);
   --accent-ink: oklch(82% 0.09 235);
   --accent-glow: oklch(68% 0.14 235 / 0.18);

package/docs/llms/checkbox.md

@@ -16,15 +16,31 @@ import { Checkbox } from "@fangxinyan/lumina";
 <Checkbox checked={v} onChange={setV} label="同意协议" />
 ```
 
-### 原生表单
+### Lumina 表单校验
 
-name / value / required 会落到真实 checkbox，可直接参与浏览器表单提交与约束校验。
+通过 Form.Item 与 message 提供一致的组件反馈，不再触发浏览器原生 required 气泡。name / value 仍会透传到真实 checkbox。
 
 ```tsx
-<form onSubmit={(event) => event.preventDefault()}>
-  <Checkbox name="agreement" value="accepted" required label="同意条款" />
+<Form
+  layout="inline"
+  onFinish={() => message.success({ key: "checkbox-validation", content: "条款已确认" })}
+  onFinishFailed={() => message.warning({ key: "checkbox-validation", content: "请先同意条款" })}
+>
+  <Form.Item
+    name="agreement"
+    valuePropName="checked"
+    rules={[{
+      required: true,
+      message: "请同意条款",
+      validator: (_rule, checked) => checked
+        ? Promise.resolve()
+        : Promise.reject(new Error("请同意条款")),
+    }]}
+  >
+    <Checkbox name="agreement" value="accepted" label="同意条款" />
+  </Form.Item>
   <Button type="submit">验证提交</Button>
-</form>
+</Form>
 ```
 
 ### 全选/半选
@@ -47,6 +63,7 @@ indeterminate 用来表示部分选中。
 | label | `ReactNode` | — | 右侧文案 |
 | name / value | `string` | — | 原生表单字段名与选中时提交的值 |
 | required / form | `boolean / string` | — | 原生必填约束与关联 form id |
+| invalid | `boolean` | `false` | 错误态，可由 Form.Item 自动注入 |
 | disabled | `boolean` | `false` | 禁用 |
 
 

package/docs/llms/select.md

@@ -87,6 +87,26 @@ optionRender 承载多行菜单内容；selectedRender 提供适合固定高度
 />
 ```
 
+### 置顶分组与额外操作
+
+分组设置 pinned 后会稳定提升到菜单顶部；optionExtraRender 提供不会触发选中的独立尾部区域。收藏仅是业务侧示例。
+
+```tsx
+const groups = [
+  { label: "其他服务", options: otherOptions },
+  { label: "已收藏", pinned: true, options: favoriteOptions },
+];
+
+<Select
+  value={service}
+  onChange={setService}
+  options={groups}
+  optionExtraRender={(option) => (
+    <IconButton icon={isFavorite(option) ? "starFilled" : "star"} />
+  )}
+/>
+```
+
 ### 分组
 
 options 接受 { label, options } 表示分组。
@@ -140,6 +160,7 @@ loading 时显示 spinner,emptyContent 自定义空态。
 | loading | `boolean` | `false` | 加载态 |
 | emptyContent | `ReactNode` | — | 空态文案 |
 | optionRender | `(option, info) => ReactNode` | — | 自定义菜单内完整选项内容，并获得 selected / active / index 状态 |
+| optionExtraRender | `(option, info) => ReactNode` | — | 自定义选项尾部的独立内容或操作，不触发选中；info 含 disabled / groupPinned |
 | selectedRender | `(option, info) => ReactNode` | — | 自定义触发器中的紧凑已选内容；单选和多选标签均支持 |
 | listHeight | `number` | `260` | 菜单选项滚动区域最大高度 |
 | popupStyle | `CSSProperties` | — | Portal 菜单内联样式，可覆盖宽度或高度 |
@@ -158,8 +179,18 @@ loading 时显示 spinner,emptyContent 自定义空态。
 | ariaLabel | `string` | — | 复杂选项或 optionRender 的独立可访问名称 |
 | icon | `IconName | ReactNode` | — | 前置图标,可传内置图标名或自定义节点 |
 | description | `ReactNode` | — | 次要描述 |
+| extra | `ReactNode` | — | 选项尾部的静态独立内容或操作；optionExtraRender 存在时由其覆盖 |
 | disabled | `boolean` | `false` | 禁用项 |
 
 
+**SelectOptionGroup**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| label \* | `ReactNode` | — | 分组标题 |
+| options \* | `SelectOption<T>[]` | — | 分组内选项 |
+| pinned | `boolean` | `false` | 稳定提升到菜单顶部，其他项目保持原始顺序 |
+
+
 ---
 [← 回到索引](../llms.md)

package/docs/llms/switch.md

@@ -16,15 +16,31 @@ import { Switch } from "@fangxinyan/lumina";
 <Switch checked={v} onChange={setV} label="开启通知" />
 ```
 
-### 原生表单
+### Lumina 表单校验
 
-开启后按 name / value 参与原生表单提交，required 可交给浏览器校验。
+通过 Form.Item 与 message 提供一致的组件反馈，不再触发浏览器原生 required 气泡。name / value 仍会透传到真实 checkbox。
 
 ```tsx
-<form onSubmit={(event) => event.preventDefault()}>
-  <Switch name="notifications" value="enabled" required label="开启通知" />
+<Form
+  layout="inline"
+  onFinish={() => message.success({ key: "switch-validation", content: "通知已开启" })}
+  onFinishFailed={() => message.warning({ key: "switch-validation", content: "请先开启通知" })}
+>
+  <Form.Item
+    name="notifications"
+    valuePropName="checked"
+    rules={[{
+      required: true,
+      message: "请开启通知",
+      validator: (_rule, checked) => checked
+        ? Promise.resolve()
+        : Promise.reject(new Error("请开启通知")),
+    }]}
+  >
+    <Switch name="notifications" value="enabled" label="开启通知" />
+  </Form.Item>
   <Button type="submit">验证提交</Button>
-</form>
+</Form>
 ```
 
 ### 尺寸
@@ -66,6 +82,7 @@ checkedChildren / unCheckedChildren 在轨道内显示简短文字(如 ON/OFF)
 | size | `"sm" | "md"` | `"md"` | 尺寸 |
 | name / value | `string` | — | 原生表单字段名与开启时提交的值 |
 | required / form | `boolean / string` | — | 原生必填约束与关联 form id |
+| invalid | `boolean` | `false` | 错误态，可由 Form.Item 自动注入 |
 | disabled | `boolean` | `false` | 禁用 |
 
 

package/docs/llms.md

@@ -3,7 +3,7 @@
 > 拟态风格的 React 18 组件库,目标是 Electron 桌面应用。**写给 AI 编程助手**的按需文档 —— 每个组件单独一个 `.md`,避免一次性读取全部。示例源自 playground 的 demo,可直接复制运行。
 
 - **包名**: `@fangxinyan/lumina`
-- **版本**: `0.8.0`
+- **版本**: `0.9.0`
 - **React 最低版本**: 18
 - **环境**: 带打包器的 React 工程(Vite / Next.js / Webpack / Remix / Electron + Vite 等)
 - **零运行时依赖**: 只依赖 `react` / `react-dom` (peer deps)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fangxinyan/lumina",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Lumina — Neumorphic component library for Electron & React apps",
   "type": "module",
   "main": "./dist/index.cjs",