@fangxinyan/lumina 0.6.2 → 0.6.3

package/dist/index.js

@@ -1,51 +1,51 @@
-export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, FONT_STACKS, ThemeProvider, applyTheme, normalizeAccentInput, resolveThemeMode, useTheme, useThemeOptional } from './chunk-NN25YMOL.js';
+export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, FONT_STACKS, ThemeProvider, applyTheme, normalizeAccentInput, resolveThemeColorScheme, resolveThemeMode, useTheme, useThemeOptional } from './chunk-J5ZGYQZK.js';
 export { Timeline } from './chunk-46VXFTEC.js';
 export { Tooltip } from './chunk-TEEFR2FD.js';
-export { Link, Paragraph, Text, Title, Typography } from './chunk-CXWEOAVU.js';
+export { Link, Paragraph, Text, Title, Typography } from './chunk-ET6DYQVZ.js';
 export { Slider } from './chunk-7JN6FJ55.js';
 export { Spin } from './chunk-ELNT3CFO.js';
 export { Splitter } from './chunk-KLEKKZ73.js';
 export { StatusBar, StatusBarItem } from './chunk-6BWELOCT.js';
 export { Switch } from './chunk-QCILPZWP.js';
-export { TablePro } from './chunk-MUXP7ASL.js';
-export { Table } from './chunk-AWXCSX6J.js';
+export { TablePro } from './chunk-J2HZTJO6.js';
+export { Table } from './chunk-BPOOVO5T.js';
 export { Tabs } from './chunk-OBEKX4VR.js';
-export { MessageContainer, ToastContainer, message, toast } from './chunk-ON4DEDMI.js';
-export { Modal } from './chunk-CEJ7VBR6.js';
-export { Pagination } from './chunk-7NGMQIST.js';
+export { MessageContainer, ToastContainer, message, toast } from './chunk-K5IGFBDR.js';
+export { Modal } from './chunk-7IYKKLV3.js';
+export { Pagination } from './chunk-CETNCRZ4.js';
 export { Popover } from './chunk-HWFM4MAT.js';
 export { Progress } from './chunk-65FIH5A3.js';
 export { Radio, RadioGroup } from './chunk-USQ43DJ5.js';
-export { Select } from './chunk-WKKSAGYH.js';
-export { Tag } from './chunk-DQTSTJ6O.js';
+export { Select } from './chunk-FBYUZOZP.js';
+export { Tag } from './chunk-5H5YP2TB.js';
 export { Skeleton } from './chunk-5TKC6IEN.js';
-export { Drawer } from './chunk-CHMCL7AV.js';
+export { Drawer } from './chunk-JCEHZ336.js';
 export { Empty } from './chunk-45VJGBGN.js';
 export { Form, FormItem, useForm } from './chunk-EC4WGEAJ.js';
-export { Image, ImageGrid } from './chunk-PH3YECMF.js';
-export { InputNumber } from './chunk-EJBHR2P5.js';
+export { Image, ImageGrid, LayeredImage, SpriteImage } from './chunk-DWAN57G4.js';
+export { InputNumber } from './chunk-BVQ77VRY.js';
 export { List } from './chunk-6YQTMI55.js';
 export { Card } from './chunk-AXZ7ELMA.js';
-export { Cascader } from './chunk-GNEZQMKH.js';
-export { Checkbox } from './chunk-EQEJTN3V.js';
-export { Collapse } from './chunk-FFZ6OMZI.js';
+export { Cascader } from './chunk-TGL5BGMR.js';
+export { Checkbox } from './chunk-GIZU3H6H.js';
+export { Collapse } from './chunk-JVUVOR6S.js';
 export { ColorPicker } from './chunk-K6F25JXT.js';
-export { CommandPalette } from './chunk-XD3JGL5O.js';
+export { CommandPalette } from './chunk-ME5BZ2WA.js';
 export { ContextMenu } from './chunk-5C2AI2SD.js';
 export { Divider } from './chunk-LKK2AA7W.js';
-export { Alert } from './chunk-UMDGS4BP.js';
+export { Alert } from './chunk-I5WTQ5Y3.js';
 export { AppShell, Sidebar, TitleBar, WindowControls } from './chunk-XRR3CYQL.js';
-export { AutoComplete } from './chunk-FJNWUELL.js';
+export { AutoComplete } from './chunk-AAGF7K3L.js';
 import './chunk-DUFRASGO.js';
-export { Input, InputPassword } from './chunk-XTIN5545.js';
-export { TextArea, Textarea } from './chunk-WGZ2KJTZ.js';
+export { Input, InputPassword } from './chunk-UKS23N3L.js';
+export { TextArea, Textarea } from './chunk-HLFH5HWR.js';
 export { Avatar } from './chunk-7PQJCLIR.js';
 export { Badge } from './chunk-F6RYCBQG.js';
-export { Button } from './chunk-JD7A6VM3.js';
-export { Calendar } from './chunk-33NCTOEB.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, resolveIconName } from './chunk-OF3SGLZY.js';
+export { Button } from './chunk-SQGPSMSK.js';
+export { Calendar } from './chunk-FWPBORRB.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-47VG2P34.js';
 
 // src/index.ts
-var VERSION = "0.6.2";
+var VERSION = "0.6.3";
 
 export { VERSION };

package/dist/styles.css

@@ -219,7 +219,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   gap: 8px;
   height: var(--ctrl-h);
   padding: 0 var(--ctrl-pad-x);
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--r-md);
   font-size: 13px;
   font-weight: 500;
@@ -231,55 +231,67 @@ input, textarea, select { font-family: inherit; color: inherit; }
   user-select: none;
   white-space: nowrap;
   flex-shrink: 0;
-  transition: all var(--dur-fast) var(--ease);
+  transition:
+    background var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+.btn > svg,
+.btn-icon-slot {
+  flex-shrink: 0;
+}
+.btn-icon-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.btn-icon-slot img {
+  display: block;
+  max-width: 1.25em;
+  max-height: 1.25em;
+  object-fit: contain;
 }
-.btn > svg { flex-shrink: 0; }
 .btn.icon {
   flex-shrink: 0;
   overflow: visible;
 }
-.btn:hover { color: var(--accent-ink); }
-.btn:active, .btn.pressed {
-  box-shadow: var(--neu-in-sm);
-  color: var(--accent-ink);
-}
 .btn.primary {
   color: var(--accent-ink);
-  background:
-    linear-gradient(145deg,
-      color-mix(in oklch, var(--accent-soft) 80%, var(--shadow-light)),
-      color-mix(in oklch, var(--accent-soft) 92%, var(--bg)));
-  box-shadow:
-    var(--neu-out-sm),
-    inset 1px 1px 0 color-mix(in oklch, var(--shadow-light) 60%, transparent),
-    inset -1px -1px 0 color-mix(in oklch, var(--accent) 15%, transparent);
+  background: color-mix(in oklch, var(--accent-soft) 62%, var(--bg));
   font-weight: 600;
 }
-.btn.primary:hover {
-  background:
-    linear-gradient(145deg,
-      color-mix(in oklch, var(--accent-soft) 70%, var(--shadow-light)),
-      color-mix(in oklch, var(--accent) 18%, var(--accent-soft)));
-  box-shadow:
-    var(--neu-out-sm),
-    inset 1px 1px 0 color-mix(in oklch, var(--shadow-light) 70%, transparent),
-    inset -1px -1px 0 color-mix(in oklch, var(--accent) 20%, transparent),
-    0 0 16px -6px var(--accent-glow);
-}
-.btn.primary:active, .btn.primary.pressed {
-  box-shadow:
-    inset 2px 2px 4px color-mix(in oklch, var(--accent) 25%, var(--shadow-dark)),
-    inset -1px -1px 2px var(--shadow-light);
-  transform: none;
-}
 .btn.ghost {
   background: transparent;
   box-shadow: none;
   color: var(--fg-muted);
 }
-.btn.ghost:hover { background: var(--bg); box-shadow: var(--neu-flat); color: var(--fg); }
 .btn.danger { color: var(--danger); }
-.btn.danger:hover { color: var(--danger); }
+.btn:hover {
+  box-shadow: var(--neu-out);
+}
+.btn.ghost:hover {
+  background: var(--bg);
+  border-color: transparent;
+  box-shadow: var(--neu-flat);
+  color: var(--fg);
+}
+.btn.danger:hover {
+  color: var(--danger);
+}
+.btn:active,
+.btn.pressed {
+  box-shadow: var(--neu-in);
+}
+.btn.ghost:active,
+.btn.ghost.pressed {
+  background: var(--bg);
+  color: var(--fg);
+}
+.btn.danger:active,
+.btn.danger.pressed {
+  color: var(--danger);
+}
 .btn.icon { width: var(--ctrl-h); padding: 0; }
 .btn.sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: var(--r-sm); }
 .btn.sm.icon { width: 30px; padding: 0; }
@@ -289,10 +301,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .btn[disabled], .btn.disabled, .btn:disabled {
   color: var(--fg-subtle);
   cursor: not-allowed;
+  border-color: transparent;
+  box-shadow: var(--neu-flat);
+  transform: none;
+}
+.btn[disabled]:hover, .btn:disabled:hover, .btn.disabled:hover {
+  color: var(--fg-subtle);
+  background: var(--bg);
+  border-color: transparent;
   box-shadow: var(--neu-flat);
   transform: none;
 }
-.btn[disabled]:hover, .btn:disabled:hover, .btn.disabled:hover { transform: none; color: var(--fg-subtle); background: var(--bg); }
 .btn.loading { cursor: wait; }
 .btn .spinner {
   width: 14px; height: 14px;
@@ -338,6 +357,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
   color: var(--fg-subtle);
   flex-shrink: 0;
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.input-wrap .lead img,
+.input-wrap .trail img {
+  display: block;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
 }
 .input-wrap .lead.interactive,
 .input-wrap .trail.interactive { cursor: pointer; pointer-events: auto; }
@@ -903,7 +932,20 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .tag.solid.danger   { background: var(--danger);  color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--danger) 35%, transparent); }
 .tag.borderless { background: transparent; box-shadow: none; }
 .tag .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
-.tag .tag-ico { color: currentColor; display: inline-flex; }
+.tag .tag-ico {
+  color: currentColor;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  flex-shrink: 0;
+}
+.tag .tag-ico img {
+  display: block;
+  width: 1em;
+  height: 1em;
+  object-fit: contain;
+}
 .tag .x { cursor: pointer; color: var(--fg-subtle); margin-left: 2px; display: inline-flex; }
 .tag .x:hover { color: var(--fg); }
 /* ============ Badge ============ */
@@ -1228,11 +1270,36 @@ input, textarea, select { font-family: inherit; color: inherit; }
   flex: 1;
   min-width: 0;
 }
-.select-value > span {
+.select-value-label {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.select-icon,
+.menu-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  flex-shrink: 0;
+}
+.select-icon img,
+.menu-item-icon img {
+  display: block;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+.select.sm .select-icon img,
+.select.sm .menu-item-icon img {
+  width: 14px;
+  height: 14px;
+}
+.select.lg .select-icon img,
+.select.lg .menu-item-icon img {
+  width: 18px;
+  height: 18px;
+}
 .select.invalid .select-trigger {
   box-shadow: var(--neu-out-sm), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent);
 }
@@ -1793,6 +1860,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
   display: grid; place-items: center;
   flex-shrink: 0;
   margin-top: 1px;
+  line-height: 0;
+}
+.alert-ico img {
+  display: block;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
 }
 .alert.info    .alert-ico { color: var(--info); }
 .alert.success .alert-ico { color: var(--success); }
@@ -2417,6 +2491,18 @@ input, textarea, select { font-family: inherit; color: inherit; }
   overflow: hidden;
   line-height: 0;
 }
+.n-image.raw {
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.n-image.icon {
+  border-radius: var(--r-sm);
+}
+.n-image.unframed {
+  background: transparent;
+  box-shadow: none;
+}
 .n-image-frame {
   position: relative;
   overflow: hidden;
@@ -2424,6 +2510,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
   box-shadow: var(--neu-in-sm);
   background: var(--bg-sunken);
 }
+.n-image.raw .n-image-frame {
+  border-radius: 0;
+}
+.n-image.icon .n-image-frame {
+  border-radius: var(--r-sm);
+}
+.n-image.unframed .n-image-frame {
+  background: transparent;
+  box-shadow: none;
+}
 .n-image img {
   display: block;
   width: 100%;
@@ -2512,6 +2608,61 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border-radius: var(--r-lg);
   box-shadow: var(--neu-float);
 }
+/* ============ SpriteImage / LayeredImage ============ */
+.n-sprite-image,
+.n-layered-image {
+  display: inline-block;
+  position: relative;
+  border-radius: var(--r-sm);
+  background: var(--bg);
+  padding: 6px;
+  box-shadow: var(--neu-out-sm);
+  overflow: hidden;
+  line-height: 0;
+}
+.n-sprite-image.raw,
+.n-layered-image.raw {
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.n-sprite-image.unframed,
+.n-layered-image.unframed {
+  background: transparent;
+  box-shadow: none;
+}
+.n-sprite-image-frame,
+.n-layered-image-frame {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--r-sm);
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-in-sm);
+}
+.n-sprite-image.raw .n-sprite-image-frame,
+.n-layered-image.raw .n-layered-image-frame {
+  border-radius: 0;
+}
+.n-sprite-image.unframed .n-sprite-image-frame,
+.n-layered-image.unframed .n-layered-image-frame {
+  background: transparent;
+  box-shadow: none;
+}
+.n-sprite-image-sprite {
+  display: block;
+  background-repeat: no-repeat;
+  transform-origin: top left;
+}
+.n-layered-image-layer {
+  position: absolute;
+  display: block;
+}
+.n-layered-image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 /* ============ Cascader ============ */
 .cascader {
   position: relative;
@@ -2640,6 +2791,19 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 100%;
   text-align: left;
 }
+.cascader-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  flex-shrink: 0;
+}
+.cascader-icon img {
+  display: block;
+  width: 15px;
+  height: 15px;
+  object-fit: contain;
+}
 .cascader-item:hover { background: var(--bg); box-shadow: var(--neu-flat); color: var(--accent-ink); }
 .cascader-item.active {
   background: var(--bg);

package/docs/llms/alert.md

@@ -22,12 +22,13 @@ import { Alert } from "@fangxinyan/lumina";
 <Alert tone="info" closable>仅一行的简短提示</Alert>
 ```
 
-### 隐藏图标
+### 图标控制
 
-showIcon={false} 可隐藏左侧语义图标,文本更紧凑。
+showIcon={false} 可隐藏左侧语义图标；icon 可传 IconName 或 ReactNode。
 
 ```tsx
 <Alert tone="info" showIcon={false}>纯文本提示</Alert>
+<Alert icon={<img src={iconUrl} alt="" />}>自定义图标</Alert>
 ```
 
 ### 自定义操作区
@@ -53,7 +54,7 @@ action 插槽可以放置按钮等操作元素,位于内容与关闭按钮之间
 | --- | --- | --- | --- |
 | tone | `"info" | "success" | "warning" | "danger"` | `"info"` | 语气 |
 | title | `ReactNode` | — | 标题 |
-| icon | `IconName` | — | 自定义图标 |
+| icon | `IconName | ReactNode` | — | 自定义图标,可传内置图标名或自定义节点 |
 | showIcon | `boolean` | `true` | 是否显示语义图标 |
 | action | `ReactNode` | — | 右侧操作区(如按钮) |
 | closable | `boolean` | `false` | 可关闭 |

package/docs/llms/button.md

@@ -23,12 +23,13 @@ import { Button } from "@fangxinyan/lumina";
 
 ### 图标按钮
 
-icon 在前,trailingIcon 在后。
+icon 在前,trailingIcon 在后,既支持内置 IconName,也支持外部 ReactNode。
 
 ```tsx
 <Button variant="primary" icon="sparkle">新建</Button>
 <Button icon="download">下载</Button>
 <Button trailingIcon="arrowRight">下一步</Button>
+<Button icon={<img src={iconUrl} alt="" />}>外部图标</Button>
 ```
 
 ### 加载与禁用
@@ -77,8 +78,8 @@ Button 在只有 icon 时自动呈现为方形按钮,常配合 tip 使用。
 | --- | --- | --- | --- |
 | variant | `"default" | "primary" | "ghost" | "danger"` | `"default"` | 按钮风格 |
 | size | `"sm" | "md" | "lg"` | `"md"` | 按钮尺寸 |
-| icon | `IconName` | — | 前置图标 |
-| trailingIcon | `IconName` | — | 后置图标 |
+| icon | `IconName | ReactNode` | — | 前置图标,可传内置图标名或自定义节点 |
+| trailingIcon | `IconName | ReactNode` | — | 后置图标,可传内置图标名或自定义节点 |
 | iconOnly | `boolean` | `自动` | 渲染为纯图标方形按钮 |
 | tip | `string` | — | 原生悬浮提示,常用于纯图标按钮 |
 | loading | `boolean` | `false` | 加载态 |

package/docs/llms/cascader.md

@@ -12,6 +12,8 @@ import { Cascader } from "@fangxinyan/lumina";
 
 ### 基础用法
 
+option.icon 支持 IconName 或 ReactNode。
+
 ```tsx
 <Cascader options={regions} value={addr} onChange={setAddr} />
 ```
@@ -38,6 +40,7 @@ showSearch 开启路径搜索,allowClear 提供一键清空,popupClassName 可
 | Prop | 类型 | 默认 | 说明 |
 | --- | --- | --- | --- |
 | options \* | `CascaderOption[]` | — | 层级选项树 |
+| options[].icon | `IconName | ReactNode` | — | 选项前置图标,可传内置图标名或自定义节点 |
 | value / defaultValue | `string[]` | — | 受控/初始路径 |
 | onChange | `(path: string[]) => void` | — | 选择叶子时触发 |
 | placeholder | `string` | — | 占位文案 |

package/docs/llms/image.md

@@ -5,7 +5,7 @@
 ## 导入
 
 ```tsx
-import { Image, ImageGrid } from "@fangxinyan/lumina";
+import { Image, ImageGrid, SpriteImage, LayeredImage } from "@fangxinyan/lumina";
 ```
 
 ## 示例
@@ -16,10 +16,43 @@ import { Image, ImageGrid } from "@fangxinyan/lumina";
 <Image src={url} width={240} height={160} />
 ```
 
+### 图标 / 原始资源
+
+variant="icon" 会默认去掉外层 padding,适合 1:1 装备、物品、头像缩略图；variant="raw" 保留原始图片比例。
+
+```tsx
+<Image variant="icon" src={iconUrl} width={56} height={56} preview={false} />
+<Image variant="raw" src={bannerUrl} width={220} height={84} objectFit="contain" />
+```
+
+### Sprite 裁剪
+
+SpriteImage 用 background-position 裁剪同一张雪碧图,适合 url + x/y/width/height 形式的图标资源。
+
+```tsx
+<SpriteImage src={sheetUrl} sprite={{ x: 32, y: 0, width: 32, height: 32 }} />
+```
+
+### 多图层图片
+
+LayeredImage 将多张图片叠在同一个盒子里,适合头像 + 头像框、底图 + 标记等资产。
+
+```tsx
+<LayeredImage
+  width={72}
+  height={72}
+  layers={[
+    { src: headUrl, fit: "cover" },
+    { src: frameUrl },
+  ]}
+/>
+```
+
 ### 图片组
 
 ```tsx
 <ImageGrid images={images} />
+<ImageGrid images={icons} imageProps={{ variant: "icon", preview: false }} />
 ```
 
 ## API
@@ -30,9 +63,47 @@ import { Image, ImageGrid } from "@fangxinyan/lumina";
 | --- | --- | --- | --- |
 | src | `string` | — | 图片 URL |
 | width / height | `number | string` | — | 尺寸 |
+| variant | `"framed" | "raw" | "icon"` | `"framed"` | 视觉形态 |
+| frame | `boolean` | `framed 时 true` | 是否保留内层凹陷 frame |
+| padding | `number | string` | — | 外层留白,raw/icon 默认 0 |
+| objectFit / objectPosition | `CSSProperties` | — | 底层 img 的 object-fit / object-position |
 | preview | `boolean` | `true` | 支持点击全屏预览 |
 | hover | `boolean` | `true` | 悬浮放大 |
 | placeholder | `ReactNode` | — | 占位/错误时内容 |
+| imgProps | `ImgHTMLAttributes` | — | 透传到底层 img 的属性 |
+
+
+**ImageGrid**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| images \* | `ImageGridItem[]` | — | 图片项数组,单项也可覆盖 Image props |
+| columns | `number` | — | 固定列数,不传则自动填充 |
+| itemHeight | `number` | `130` | 默认图片高度 |
+| minItemWidth | `number | string` | `160` | 自动填充时的最小列宽 |
+| gap | `number | string` | `14` | 网格间距 |
+| imageProps | `ImageProps` | — | 批量传给每个 Image 的属性 |
+
+
+**SpriteImage**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| src \* | `string` | — | sprite sheet 图片 URL |
+| sprite \* | `{ x; y; width; height }` | — | 裁剪区域 |
+| width / height | `number | string` | — | 渲染尺寸,默认使用 sprite 尺寸 |
+| scale | `number` | `1` | 未指定 width/height 时的缩放倍数 |
+| backgroundSize | `string` | — | 自定义 background-size |
+| variant / frame / padding | `ImageVariant / boolean / number` | — | 同 Image 的媒体外观控制 |
+
+
+**LayeredImage**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| layers \* | `LayeredImageLayer[]` | — | 按顺序叠放的图片层 |
+| width / height | `number | string` | — | 容器尺寸 |
+| variant / frame / padding | `ImageVariant / boolean / number` | — | 同 Image 的媒体外观控制 |
 
 
 ---

package/docs/llms/input.md

@@ -24,10 +24,11 @@ const [v, setV] = useState("");
 
 ### 前后置图标
 
-leadingIcon / trailingIcon。
+leadingIcon / trailingIcon 支持内置 IconName 或外部 ReactNode。
 
 ```tsx
 <Input placeholder="搜索..." leadingIcon="search" />
+<Input placeholder="物品名" leadingIcon={<img src={iconUrl} alt="" />} />
 ```
 
 ### Input.Password
@@ -106,7 +107,7 @@ Input.TextArea 与 Textarea 使用同一套多行输入能力,也支持 allowCle
 | onChange | `(event) => void` | — | 变更回调,传入 React 原生事件 |
 | onValueChange | `(value: string, event) => void` | — | 值回调便捷写法 |
 | placeholder | `string` | — | 占位文案 |
-| leadingIcon / trailingIcon | `IconName` | — | 前/后置图标 |
+| leadingIcon / trailingIcon | `IconName | ReactNode` | — | 前/后置图标,可传内置图标名或自定义节点 |
 | prefix | `ReactNode` | — | 左侧内嵌内容(在 leadingIcon 之后) |
 | suffix | `ReactNode` | — | 右侧内嵌内容(在 trailingIcon 之前) |
 | allowClear | `boolean` | `false` | 显示内置的清除按钮 |

package/docs/llms/select.md

@@ -29,7 +29,7 @@ multiple + Tag 形式呈现已选项。
 
 ### 搜索过滤
 
-searchable + clearable + 选项 icon/description。
+searchable + clearable + 选项 icon/description。icon 支持 IconName 或 ReactNode。
 
 ```tsx
 <Select searchable clearable
@@ -110,7 +110,7 @@ loading 时显示 spinner,emptyContent 自定义空态。
 | --- | --- | --- | --- |
 | value \* | `T` | — | 值 |
 | label | `ReactNode` | — | 显示 |
-| icon | `IconName` | — | 前置图标 |
+| icon | `IconName | ReactNode` | — | 前置图标,可传内置图标名或自定义节点 |
 | description | `ReactNode` | — | 次要描述 |
 | disabled | `boolean` | `false` | 禁用项 |
 

package/docs/llms/tag.md

@@ -34,11 +34,12 @@ dot 渲染前置色块。
 
 ### 前置图标
 
-icon 使用内置 Icon 组件,颜色随语气自动适配。
+icon 可传内置 IconName 或自定义 ReactNode,颜色随语气自动适配。
 
 ```tsx
 <Tag tone="success" icon="check2">已完成</Tag>
 <Tag tone="info" icon="star">推荐</Tag>
+<Tag icon={<img src={iconUrl} alt="" />}>物品</Tag>
 ```
 
 ### 无边框
@@ -67,7 +68,7 @@ removable + onRemove 实现关闭按钮。
 | tone | `"neutral" | "accent" | "info" | "success" | "warning" | "danger"` | `"neutral"` | 色调 |
 | solid | `boolean` | `false` | 实心填充 |
 | dot | `boolean` | `false` | 前置圆点 |
-| icon | `IconName` | — | 前置图标 |
+| icon | `IconName | ReactNode` | — | 前置图标,可传内置图标名或自定义节点 |
 | bordered | `boolean` | `true` | 是否显示外框 flat 阴影 |
 | removable | `boolean` | `false` | 显示 × |
 | onRemove | `() => void` | — | 关闭回调 |