@fangxinyan/lumina 0.6.6 → 0.6.8

package/docs/llms/textarea.md

@@ -0,0 +1,83 @@
+# Textarea 多行输入
+
+> 多行文本输入域,支持清除、字数统计、错误态和原生 textarea 属性。
+
+## 导入
+
+```tsx
+import { Textarea, TextArea, Input } from "@fangxinyan/lumina";
+```
+
+## 示例
+
+### 基础用法
+
+Textarea 直接暴露原生 textarea ref 和常用原生属性。
+
+```tsx
+const [notes, setNotes] = useState("");
+
+<Textarea
+  value={notes}
+  onValueChange={setNotes}
+  rows={4}
+  placeholder="写点什么..."
+/>
+```
+
+### 可清除与字数统计
+
+allowClear、maxLength、showCount 可组合使用,适合受限文本输入。
+
+```tsx
+<Textarea
+  value={feedback}
+  onValueChange={setFeedback}
+  allowClear
+  maxLength={160}
+  showCount
+  placeholder="最多输入 160 个字"
+/>
+```
+
+### 错误与禁用
+
+invalid 只负责视觉状态;错误文案通常交给 Field 或 Form.Item 展示。
+
+```tsx
+<Textarea invalid defaultValue="太短" />
+<Textarea disabled defaultValue="只读说明..." />
+```
+
+### Input.TextArea 别名
+
+当表单统一从 Input 命名空间取控件时,Input.TextArea 与 Textarea 等价。
+
+```tsx
+<Input.TextArea
+  defaultValue="Input.TextArea 与 Textarea 使用同一套能力"
+  allowClear
+  showCount
+/>
+```
+
+## API
+
+**Textarea / TextArea / Input.TextArea**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| value / defaultValue | `string` | — | 受控值 / 初值 |
+| onChange | `(event) => void` | — | 变更回调,传入 React 原生事件 |
+| onValueChange | `(value: string, event) => void` | — | 值回调便捷写法 |
+| allowClear | `boolean` | `false` | 右上角显示清除按钮 |
+| maxLength | `number` | — | 最大字符数,透传至原生 textarea |
+| showCount | `boolean` | `false` | 显示字数统计;有 maxLength 时显示 N / max |
+| invalid | `boolean` | `false` | 错误态 |
+| disabled | `boolean` | `false` | 禁用 |
+| rows | `number` | — | 文本域可见行数,透传至原生 textarea |
+| className / style / id / data-* / aria-* | `native attrs` | — | 透传至原生 textarea |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/themepanel.md

@@ -12,7 +12,7 @@ import { ThemeProvider, ThemePanel, THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PA
 
 ### 完整面板
 
-默认包含浅色、深色、瓷白、助手、助手暗五个主题卡片,并提供简洁/深度两档新建主题入口;其余控制项直接驱动 useTheme。
+默认包含浅色、深色、瓷白、助手、助手暗五个主题卡片,并提供简洁/深度两档新建主题入口;高级调整区可编辑当前主题的 token、palette 和自定义字体,默认主题另存时可填写新主题名和副标题,非默认主题可直接改名、修改副标题后保存。
 
 ```tsx
 <ThemeProvider>
@@ -22,7 +22,7 @@ import { ThemeProvider, ThemePanel, THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PA
 
 ### 外部保存与回灌
 
-onCreateTheme / onDeleteTheme 会把新建和删除事件交给业务侧;业务侧保存后通过 ThemeProvider themes 回灌。
+onCreateTheme / onUpdateTheme / onDeleteTheme 会把新建、另存为、更新和删除事件交给业务侧;主题名和卡片第二行副标题会分别通过 payload.label / payload.description 传出,业务侧保存后通过 ThemeProvider themes 回灌。
 
 ```tsx
 import { ThemeProvider, ThemePanel, type ThemePresets } from "lumina";
@@ -45,6 +45,13 @@ const [themes, setThemes] = React.useState<ThemePresets>({});
       });
       deleteThemeFromServerOrStorage(payload);
     }}
+    onUpdateTheme={(payload) => {
+      setThemes((current) => ({
+        ...current,
+        [String(payload.key)]: payload.preset,
+      }));
+      saveThemeToServerOrStorage(payload);
+    }}
   />
 </ThemeProvider>
 ```
@@ -71,16 +78,18 @@ const [themes, setThemes] = React.useState<ThemePresets>({});
 | --- | --- | --- | --- |
 | title | `ReactNode` | `"主题"` | 面板标题;传 null 可隐藏标题文本 |
 | description | `ReactNode` | `"快速调整当前 Lumina 主题"` | 面板副标题 |
-| sections | `ThemePanelSection[]` | — | 展示的控制区及顺序;shadow 区同时控制 intensity / shadow-scale / shadow-float-scale |
+| sections | `ThemePanelSection[]` | — | 展示的控制区及顺序;advanced 区提供完整 token / palette 编辑,shadow 区同时控制 intensity / shadow-scale / shadow-float-scale |
 | modeOptions | `ThemePanelModeOption[]` | — | 模式切换项 |
 | presetOptions | `ThemePanelPresetOption[]` | — | 命名主题预设卡片;不传时使用浅色/深色/瓷白/助手/助手暗 + theme.themes,也可完全由业务侧控制 |
 | defaultCustomAccent | `string` | `"#845ef7"` | 自定义强调色初始值 |
 | allowCreateTheme | `boolean` | `true` | 在预设区显示新建主题流程 |
 | defaultCreateThemeName | `string` | `"我的主题"` | 新建主题的默认名称 |
 | createThemeKeyPrefix | `string` | `"user"` | 生成自建主题 mode key 时使用的前缀 |
-| onCreateTheme | `(payload: ThemePanelCreateThemePayload) => void` | — | 保存自建主题后的回调,业务侧可把 payload.preset 存起来并通过 ThemeProvider themes 回灌 |
+| onCreateTheme | `(payload: ThemePanelCreateThemePayload) => void` | — | 保存自建主题或高级区命名另存为后的回调;主题名和副标题通过 payload.label / payload.description 传出,业务侧可把 payload.preset 存起来并通过 ThemeProvider themes 回灌 |
 | allowDeleteTheme | `boolean` | `true` | 为非默认主题显示删除按钮;默认主题不会显示删除入口 |
 | onDeleteTheme | `(payload: ThemePanelDeleteThemePayload) => void` | — | 删除非默认主题后的回调,业务侧可同步删除外部存储 |
+| allowUpdateTheme | `boolean` | `true` | 在高级调整区为非默认主题显示保存修改能力;默认主题保存时会另存为新主题 |
+| onUpdateTheme | `(payload: ThemePanelUpdateThemePayload) => void` | — | 覆盖保存非默认主题修改后的回调;名称和副标题修改通过 payload.label / payload.description 传出,另存为仍走 onCreateTheme |
 | showReset | `boolean` | `true` | 显示重置按钮 |
 | compact | `boolean` | `false` | 紧凑布局 |
 
@@ -109,11 +118,23 @@ const [themes, setThemes] = React.useState<ThemePresets>({});
 | --- | --- | --- | --- |
 | key | `ThemeMode` | — | 保存后注册到 ThemeProvider 的 mode key |
 | label | `string` | — | 用户输入的主题名称 |
-| description | `string` | — | ThemePanel 生成的说明文案,如自建亮/自建暗 |
+| description | `string` | — | 用户输入的主题副标题,会显示在主题卡片第二行 |
 | preset | `ThemePreset` | — | 最终保存到 theme.themes 的主题配置 |
 | presetOption | `ThemePanelPresetOption` | — | 可直接追加到受控 presetOptions 的卡片配置 |
 
 
+**ThemePanelUpdateThemePayload**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| key | `ThemeMode` | — | 被更新的主题 mode key |
+| label | `string` | — | 被更新主题的展示名称 |
+| description | `string` | — | 被更新主题的副标题,会显示在主题卡片第二行 |
+| preset | `ThemePreset` | — | 从当前面板状态生成的新主题配置 |
+| previousPreset | `ThemePreset` | — | 更新前的主题配置 |
+| presetOption | `ThemePanelPresetOption` | — | 可直接回灌到受控 presetOptions 的卡片配置 |
+
+
 **ThemePanelDeleteThemePayload**
 
 | Prop | 类型 | 默认 | 说明 |

package/docs/llms/timeline.md

@@ -2,6 +2,12 @@
 
 > 垂直时间线，支持等待状态、自定义圆点、交替布局
 
+## 导入
+
+```tsx
+import { Timeline } from "@fangxinyan/lumina";
+```
+
 ## 示例
 
 ### 基础用法
@@ -112,6 +118,24 @@ reverse 属性将时间线反转，最新的事件在最上面
 />
 ```
 
+### 槽位样式
+
+item / content / dot / label 都可以拿到样式入口；content 默认 min-width: 0，长内容能在弹性容器里正确收缩。
+
+```tsx
+<Timeline
+  contentMinWidth={0}
+  dotOffset={4}
+  items={[
+    {
+      children: "很长的任务标题...",
+      contentStyle: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+      dotStyle: { boxShadow: "var(--neu-shadow-lift)" },
+    },
+  ]}
+/>
+```
+
 ## API
 
 **Timeline**
@@ -123,6 +147,13 @@ reverse 属性将时间线反转，最新的事件在最上面
 | pendingContent | `ReactNode` | `"加载中..."` | 等待节点的文字内容 |
 | mode | `"left" | "right" | "alternate"` | `"left"` | 布局模式 |
 | reverse | `boolean` | `false` | 反转节点顺序 |
+| itemClassName / itemStyle | `string / CSSProperties` | — | 透传到每个节点外层 |
+| contentClassName / contentStyle | `string / CSSProperties` | — | 透传到每个内容槽 |
+| contentMinWidth | `CSSProperties['minWidth']` | `0` | 内容槽最小宽度，默认允许在 flex/grid 中收缩 |
+| dotClassName / dotStyle | `string / CSSProperties` | — | 透传到每个圆点槽 |
+| dotOffset | `CSSProperties['marginTop']` | `4` | 圆点垂直偏移 |
+| dotAlign | `"start" | "center" | "end"` | `"center"` | 圆点在 head 列中的横向对齐 |
+| labelClassName / labelStyle | `string / CSSProperties` | — | 透传到每个标签槽 |
 
 
 **TimelineItemConfig**
@@ -134,6 +165,10 @@ reverse 属性将时间线反转，最新的事件在最上面
 | label | `ReactNode` | — | 对侧标签（alternate 模式下使用） |
 | color | `"accent" | "success" | "warning" | "danger" | "info" | "muted"` | `"accent"` | 圆点颜色 |
 | dot | `ReactNode` | — | 自定义圆点内容 |
+| className / style | `string / CSSProperties` | — | 节点外层样式槽 |
+| contentClassName / contentStyle | `string / CSSProperties` | — | 内容槽样式 |
+| dotClassName / dotStyle | `string / CSSProperties` | — | 圆点槽样式 |
+| labelClassName / labelStyle | `string / CSSProperties` | — | 标签槽样式 |
 
 
 ---

package/docs/llms/typography.md

@@ -5,7 +5,7 @@
 ## 导入
 
 ```tsx
-import { Typography } from "@fangxinyan/lumina";
+import { Typography, Title, Text, Paragraph, Link } from "@fangxinyan/lumina";
 ```
 
 ## 示例

package/docs/llms.md

@@ -3,7 +3,7 @@
 > 拟态风格的 React 18 组件库,目标是 Electron 桌面应用。**写给 AI 编程助手**的按需文档 —— 每个组件单独一个 `.md`,避免一次性读取全部。示例源自 playground 的 demo,可直接复制运行。
 
 - **包名**: `@fangxinyan/lumina`
-- **版本**: `0.6.6`
+- **版本**: `0.6.8`
 - **React 最低版本**: 18
 - **环境**: 带打包器的 React 工程(Vite / Next.js / Webpack / Remix / Electron + Vite 等)
 - **零运行时依赖**: 只依赖 `react` / `react-dom` (peer deps)
@@ -55,6 +55,7 @@
 ### 表单
 
 - [Input 输入框](./llms/input.md) — 凹陷凹槽式输入域,支持前后置图标、错误态、禁用态。
+- [Textarea 多行输入](./llms/textarea.md) — 多行文本输入域,支持清除、字数统计、错误态和原生 textarea 属性。
 - [InputNumber 数字输入](./llms/inputnumber.md) — 带步进按钮的数字输入框。
 - [Switch 开关](./llms/switch.md) — 二元状态切换器。
 - [Checkbox 复选框](./llms/checkbox.md) — 在一组选项中进行多项选择,或独立切换某个开关项。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fangxinyan/lumina",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "description": "Lumina — Neumorphic component library for Electron & React apps",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -27,6 +27,56 @@
       "import": "./dist/AppShell.js",
       "require": "./dist/AppShell.cjs"
     },
+    "./IconButton": {
+      "types": "./dist/Button.d.ts",
+      "import": "./dist/Button.js",
+      "require": "./dist/Button.cjs"
+    },
+    "./InputPassword": {
+      "types": "./dist/Input.d.ts",
+      "import": "./dist/Input.js",
+      "require": "./dist/Input.cjs"
+    },
+    "./TextArea": {
+      "types": "./dist/Textarea.d.ts",
+      "import": "./dist/Textarea.js",
+      "require": "./dist/Textarea.cjs"
+    },
+    "./RadioGroup": {
+      "types": "./dist/Radio.d.ts",
+      "import": "./dist/Radio.js",
+      "require": "./dist/Radio.cjs"
+    },
+    "./FormItem": {
+      "types": "./dist/Form.d.ts",
+      "import": "./dist/Form.js",
+      "require": "./dist/Form.cjs"
+    },
+    "./ThemeProvider": {
+      "types": "./dist/Theme.d.ts",
+      "import": "./dist/Theme.js",
+      "require": "./dist/Theme.cjs"
+    },
+    "./Title": {
+      "types": "./dist/Typography.d.ts",
+      "import": "./dist/Typography.js",
+      "require": "./dist/Typography.cjs"
+    },
+    "./Text": {
+      "types": "./dist/Typography.d.ts",
+      "import": "./dist/Typography.js",
+      "require": "./dist/Typography.cjs"
+    },
+    "./Paragraph": {
+      "types": "./dist/Typography.d.ts",
+      "import": "./dist/Typography.js",
+      "require": "./dist/Typography.cjs"
+    },
+    "./Link": {
+      "types": "./dist/Typography.d.ts",
+      "import": "./dist/Typography.js",
+      "require": "./dist/Typography.cjs"
+    },
     "./Sidebar": {
       "types": "./dist/AppShell.d.ts",
       "import": "./dist/AppShell.js",

package/dist/chunk-BJ6WUVEG.cjs

@@ -1,106 +0,0 @@
-'use strict';
-
-var chunkSG42F5VB_cjs = require('./chunk-SG42F5VB.cjs');
-require('./tokens-EF34LSWI.css');
-require('./shared-NJHRNLRH.css');
-require('./Timeline-ZIM7QFQC.css');
-var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-var Timeline = React__namespace.forwardRef(
-  ({
-    items,
-    pending = false,
-    pendingContent = "\u52A0\u8F7D\u4E2D...",
-    mode = "left",
-    reverse = false,
-    className = "",
-    ...rest
-  }, ref) => {
-    const displayItems = [...items];
-    if (reverse) displayItems.reverse();
-    const hasPending = pending !== false;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: `timeline timeline-${mode} ${className}`,
-        ...rest,
-        children: [
-          displayItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
-            TimelineItem,
-            {
-              item,
-              isLast: !hasPending && i === displayItems.length - 1,
-              position: getPosition(mode, i)
-            },
-            item.key ?? i
-          )),
-          hasPending && /* @__PURE__ */ jsxRuntime.jsx(
-            TimelineItem,
-            {
-              item: {
-                children: pendingContent,
-                dot: typeof pending === "boolean" ? void 0 : pending,
-                color: "muted"
-              },
-              isLast: true,
-              isPending: true,
-              position: getPosition(mode, displayItems.length)
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Timeline.displayName = "Timeline";
-function getPosition(mode, index) {
-  if (mode === "left") return "left";
-  if (mode === "right") return "right";
-  return index % 2 === 0 ? "left" : "right";
-}
-var TimelineItem = ({
-  item,
-  isLast,
-  isPending,
-  position
-}) => {
-  const color = item.color ?? "accent";
-  const cls = [
-    "timeline-item",
-    `timeline-item-${position}`,
-    isLast ? "timeline-item-last" : "",
-    isPending ? "timeline-item-pending" : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-label", children: item.label }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "timeline-item-head", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `timeline-item-dot ${color} ${isPending ? "pending" : ""}`, children: item.dot ?? (isPending && /* @__PURE__ */ jsxRuntime.jsx(chunkSG42F5VB_cjs.Spin, { size: 14 })) }),
-      !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-tail" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-content", children: item.children })
-  ] });
-};
-
-exports.Timeline = Timeline;

package/dist/chunk-D64IPDUE.cjs

@@ -1,28 +0,0 @@
-'use strict';
-
-var chunkOGPDCBPD_cjs = require('./chunk-OGPDCBPD.cjs');
-require('./tokens-EF34LSWI.css');
-require('./shared-NJHRNLRH.css');
-require('./TablePro-JRSBPXB5.css');
-var jsxRuntime = require('react/jsx-runtime');
-
-function TablePro({
-  toolbar,
-  actions,
-  footer,
-  title,
-  className = "",
-  ...tableProps
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `table-card ${className}`, children: [
-    (title || toolbar || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "table-toolbar", children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-title", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-toolbar-main", children: toolbar }),
-      actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-toolbar-actions", children: actions })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkOGPDCBPD_cjs.Table, { ...tableProps, className: "joined" }),
-    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-footer", children: footer })
-  ] });
-}
-
-exports.TablePro = TablePro;

package/dist/chunk-GUZ2DNDC.js

@@ -1,26 +0,0 @@
-import { Table } from './chunk-YSXD344H.js';
-import './tokens-EF34LSWI.css';
-import './shared-NJHRNLRH.css';
-import './TablePro-JRSBPXB5.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function TablePro({
-  toolbar,
-  actions,
-  footer,
-  title,
-  className = "",
-  ...tableProps
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: `table-card ${className}`, children: [
-    (title || toolbar || actions) && /* @__PURE__ */ jsxs("div", { className: "table-toolbar", children: [
-      title && /* @__PURE__ */ jsx("div", { className: "table-title", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "table-toolbar-main", children: toolbar }),
-      actions && /* @__PURE__ */ jsx("div", { className: "table-toolbar-actions", children: actions })
-    ] }),
-    /* @__PURE__ */ jsx(Table, { ...tableProps, className: "joined" }),
-    footer && /* @__PURE__ */ jsx("div", { className: "table-footer", children: footer })
-  ] });
-}
-
-export { TablePro };

package/dist/chunk-OQU3TJCF.js

@@ -1,84 +0,0 @@
-import { Spin } from './chunk-Y5F7ZTBH.js';
-import './tokens-EF34LSWI.css';
-import './shared-NJHRNLRH.css';
-import './Timeline-ZIM7QFQC.css';
-import * as React from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var Timeline = React.forwardRef(
-  ({
-    items,
-    pending = false,
-    pendingContent = "\u52A0\u8F7D\u4E2D...",
-    mode = "left",
-    reverse = false,
-    className = "",
-    ...rest
-  }, ref) => {
-    const displayItems = [...items];
-    if (reverse) displayItems.reverse();
-    const hasPending = pending !== false;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: `timeline timeline-${mode} ${className}`,
-        ...rest,
-        children: [
-          displayItems.map((item, i) => /* @__PURE__ */ jsx(
-            TimelineItem,
-            {
-              item,
-              isLast: !hasPending && i === displayItems.length - 1,
-              position: getPosition(mode, i)
-            },
-            item.key ?? i
-          )),
-          hasPending && /* @__PURE__ */ jsx(
-            TimelineItem,
-            {
-              item: {
-                children: pendingContent,
-                dot: typeof pending === "boolean" ? void 0 : pending,
-                color: "muted"
-              },
-              isLast: true,
-              isPending: true,
-              position: getPosition(mode, displayItems.length)
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Timeline.displayName = "Timeline";
-function getPosition(mode, index) {
-  if (mode === "left") return "left";
-  if (mode === "right") return "right";
-  return index % 2 === 0 ? "left" : "right";
-}
-var TimelineItem = ({
-  item,
-  isLast,
-  isPending,
-  position
-}) => {
-  const color = item.color ?? "accent";
-  const cls = [
-    "timeline-item",
-    `timeline-item-${position}`,
-    isLast ? "timeline-item-last" : "",
-    isPending ? "timeline-item-pending" : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: cls, children: [
-    /* @__PURE__ */ jsx("div", { className: "timeline-item-label", children: item.label }),
-    /* @__PURE__ */ jsxs("div", { className: "timeline-item-head", children: [
-      /* @__PURE__ */ jsx("div", { className: `timeline-item-dot ${color} ${isPending ? "pending" : ""}`, children: item.dot ?? (isPending && /* @__PURE__ */ jsx(Spin, { size: 14 })) }),
-      !isLast && /* @__PURE__ */ jsx("div", { className: "timeline-item-tail" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "timeline-item-content", children: item.children })
-  ] });
-};
-
-export { Timeline };