@fangxinyan/lumina 0.2.0 → 0.3.0

package/dist/styles.css

@@ -17,14 +17,15 @@
   /* ---- Shadows ---- */
   --shadow-dark: rgba(163, 177, 198, 0.55);
   --shadow-light: rgba(255, 255, 255, 0.95);
-  --shadow-blur: 16px;
-  --shadow-offset: 6px;
-  --shadow-inset-blur: 10px;
-  --shadow-inset-offset: 4px;
 
-  /* Distance multiplier (tweakable at runtime) */
+  /* Distance multiplier — driven by ThemeProvider `intensity` (1..10 → 0.4..1.6). */
   --d: 1;
 
+  --shadow-blur: calc(16px * var(--d));
+  --shadow-offset: calc(6px * var(--d));
+  --shadow-inset-blur: calc(10px * var(--d));
+  --shadow-inset-offset: calc(4px * var(--d));
+
   --neu-out:
     var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-dark),
     calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) var(--shadow-blur) var(--shadow-light);
@@ -49,6 +50,13 @@
     1px 1px 2px var(--shadow-dark),
     -1px -1px 2px var(--shadow-light);
 
+  /* Floating-overlay elevation.
+     No top-left highlight — there's no continuous surface beneath an overlay
+     panel, so the neumorphic light-reflection metaphor would read as a halo. */
+  --neu-float:
+    0 calc(var(--shadow-offset) * 1.8) calc(var(--shadow-blur) * 2.2) var(--shadow-dark),
+    0 calc(var(--shadow-offset) * 0.4) calc(var(--shadow-blur) * 0.7) var(--shadow-dark);
+
   /* ---- Accent (default sky) ---- */
   --accent: oklch(68% 0.14 235);
   --accent-ink: oklch(42% 0.12 235);
@@ -114,10 +122,10 @@
   --shadow-dark: rgba(0, 0, 0, 0.55);
   --shadow-light: rgba(130, 145, 180, 0.06);
   /* 同时收紧阴影尺寸,深色模式下拟态更内敛 */
-  --shadow-offset: 4px;
-  --shadow-blur: 10px;
-  --shadow-inset-offset: 3px;
-  --shadow-inset-blur: 7px;
+  --shadow-offset: calc(4px * var(--d));
+  --shadow-blur: calc(10px * var(--d));
+  --shadow-inset-offset: calc(3px * var(--d));
+  --shadow-inset-blur: calc(7px * var(--d));
   --accent-soft: oklch(35% 0.06 235);
   --accent-ink: oklch(82% 0.09 235);
   --accent-glow: oklch(68% 0.14 235 / 0.18);
@@ -1084,7 +1092,6 @@ input, textarea, select { font-family: inherit; color: inherit; }
   color: var(--fg-muted);
   font-size: 13px;
 }
-.accordion-item.open .accordion-body { max-height: 320px; }
 .accordion-body-inner { padding: 0 18px 16px; }
 .accordion-chev {
   transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
@@ -1311,7 +1318,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .menu {
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-out-lg);
+  box-shadow: var(--neu-float);
   padding: 6px;
   min-width: 180px;
   z-index: 1000;
@@ -1366,7 +1373,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .modal {
   background: var(--bg);
   border-radius: var(--r-xl);
-  box-shadow: var(--neu-out-lg), 0 24px 60px -20px rgba(40, 55, 80, 0.3);
+  box-shadow: var(--neu-float);
   padding: var(--gap-6);
   width: min(480px, 92vw);
   animation: modalIn var(--dur-slow) var(--ease);
@@ -1553,7 +1560,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .toast {
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-out-lg);
+  box-shadow: var(--neu-float);
   padding: 12px 16px;
   min-width: 240px;
   display: flex; align-items: flex-start; gap: 10px;
@@ -1588,7 +1595,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border-radius: var(--r-md);
   padding: var(--gap-3);
   min-width: 220px;
-  box-shadow: var(--neu-out-lg);
+  box-shadow: var(--neu-float);
   animation: menuIn var(--dur) var(--ease);
 }
 /* ============ Alert ============ */
@@ -1757,7 +1764,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .expand-btn.open { transform: rotate(90deg); color: var(--accent-ink); box-shadow: var(--neu-in-sm); }
 /* Expanded row panel */
 .table tbody tr.expanded-row td {
-  padding: 0 18px 14px 18px;
+  padding: 14px 18px;
   border-bottom: 1px solid var(--divider);
   background: color-mix(in oklch, var(--bg-sunken) 25%, transparent);
 }
@@ -1819,7 +1826,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   max-width: 260px;
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-out-lg);
+  box-shadow: var(--neu-float);
   padding: 10px;
   animation: menuIn var(--dur) var(--ease);
 }
@@ -2333,7 +2340,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   max-width: 80vw;
   max-height: 80vh;
   border-radius: var(--r-lg);
-  box-shadow: var(--neu-out-lg), 0 40px 80px -20px rgba(0,0,0,0.25);
+  box-shadow: var(--neu-float);
 }
 /* ============ Cascader ============ */
 .cascader {
@@ -2366,7 +2373,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   display: flex;
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-out-lg);
+  box-shadow: var(--neu-float);
   padding: 6px;
   animation: menuIn var(--dur) var(--ease);
   gap: 4px;
@@ -2695,7 +2702,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 12px;
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-out);
+  box-shadow: var(--neu-float);
   display: flex;
   flex-direction: column;
   gap: 10px;

package/dist/{tokens-HWQ7KWPG.css → tokens-BIIUTPKN.css}

@@ -17,14 +17,15 @@
   /* ---- Shadows ---- */
   --shadow-dark: rgba(163, 177, 198, 0.55);
   --shadow-light: rgba(255, 255, 255, 0.95);
-  --shadow-blur: 16px;
-  --shadow-offset: 6px;
-  --shadow-inset-blur: 10px;
-  --shadow-inset-offset: 4px;
 
-  /* Distance multiplier (tweakable at runtime) */
+  /* Distance multiplier — driven by ThemeProvider `intensity` (1..10 → 0.4..1.6). */
   --d: 1;
 
+  --shadow-blur: calc(16px * var(--d));
+  --shadow-offset: calc(6px * var(--d));
+  --shadow-inset-blur: calc(10px * var(--d));
+  --shadow-inset-offset: calc(4px * var(--d));
+
   --neu-out:
     var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-dark),
     calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) var(--shadow-blur) var(--shadow-light);
@@ -49,6 +50,13 @@
     1px 1px 2px var(--shadow-dark),
     -1px -1px 2px var(--shadow-light);
 
+  /* Floating-overlay elevation.
+     No top-left highlight — there's no continuous surface beneath an overlay
+     panel, so the neumorphic light-reflection metaphor would read as a halo. */
+  --neu-float:
+    0 calc(var(--shadow-offset) * 1.8) calc(var(--shadow-blur) * 2.2) var(--shadow-dark),
+    0 calc(var(--shadow-offset) * 0.4) calc(var(--shadow-blur) * 0.7) var(--shadow-dark);
+
   /* ---- Accent (default sky) ---- */
   --accent: oklch(68% 0.14 235);
   --accent-ink: oklch(42% 0.12 235);
@@ -115,10 +123,10 @@
   --shadow-dark: rgba(0, 0, 0, 0.55);
   --shadow-light: rgba(130, 145, 180, 0.06);
   /* 同时收紧阴影尺寸,深色模式下拟态更内敛 */
-  --shadow-offset: 4px;
-  --shadow-blur: 10px;
-  --shadow-inset-offset: 3px;
-  --shadow-inset-blur: 7px;
+  --shadow-offset: calc(4px * var(--d));
+  --shadow-blur: calc(10px * var(--d));
+  --shadow-inset-offset: calc(3px * var(--d));
+  --shadow-inset-blur: calc(7px * var(--d));
   --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

@@ -17,14 +17,15 @@
   /* ---- Shadows ---- */
   --shadow-dark: rgba(163, 177, 198, 0.55);
   --shadow-light: rgba(255, 255, 255, 0.95);
-  --shadow-blur: 16px;
-  --shadow-offset: 6px;
-  --shadow-inset-blur: 10px;
-  --shadow-inset-offset: 4px;
 
-  /* Distance multiplier (tweakable at runtime) */
+  /* Distance multiplier — driven by ThemeProvider `intensity` (1..10 → 0.4..1.6). */
   --d: 1;
 
+  --shadow-blur: calc(16px * var(--d));
+  --shadow-offset: calc(6px * var(--d));
+  --shadow-inset-blur: calc(10px * var(--d));
+  --shadow-inset-offset: calc(4px * var(--d));
+
   --neu-out:
     var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-dark),
     calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) var(--shadow-blur) var(--shadow-light);
@@ -49,6 +50,13 @@
     1px 1px 2px var(--shadow-dark),
     -1px -1px 2px var(--shadow-light);
 
+  /* Floating-overlay elevation.
+     No top-left highlight — there's no continuous surface beneath an overlay
+     panel, so the neumorphic light-reflection metaphor would read as a halo. */
+  --neu-float:
+    0 calc(var(--shadow-offset) * 1.8) calc(var(--shadow-blur) * 2.2) var(--shadow-dark),
+    0 calc(var(--shadow-offset) * 0.4) calc(var(--shadow-blur) * 0.7) var(--shadow-dark);
+
   /* ---- Accent (default sky) ---- */
   --accent: oklch(68% 0.14 235);
   --accent-ink: oklch(42% 0.12 235);
@@ -115,10 +123,10 @@
   --shadow-dark: rgba(0, 0, 0, 0.55);
   --shadow-light: rgba(130, 145, 180, 0.06);
   /* 同时收紧阴影尺寸,深色模式下拟态更内敛 */
-  --shadow-offset: 4px;
-  --shadow-blur: 10px;
-  --shadow-inset-offset: 3px;
-  --shadow-inset-blur: 7px;
+  --shadow-offset: calc(4px * var(--d));
+  --shadow-blur: calc(10px * var(--d));
+  --shadow-inset-offset: calc(3px * var(--d));
+  --shadow-inset-blur: calc(7px * var(--d));
   --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/accordion.md

@@ -0,0 +1,66 @@
+# Accordion 折叠面板
+
+> 纵向折叠面板。
+
+## 导入
+
+```tsx
+import { Accordion } from "@fangxinyan/lumina";
+```
+
+## 示例
+
+### 基础
+
+```tsx
+<Accordion items={[{ key, title, content }]} />
+```
+
+### 多项展开
+
+multiple 允许同时展开多个面板。
+
+```tsx
+<Accordion multiple defaultActiveKeys={["1", "2"]} ... />
+```
+
+### 手风琴模式
+
+accordion={true} 同一时刻最多只展开一项;与 multiple 同时传入时 accordion 优先。
+
+```tsx
+<Accordion accordion defaultActiveKeys={["1"]} ... />
+```
+
+### 仅图标可点
+
+collapsible="icon" 将展开触发限制在右侧箭头图标上,标题区域不再响应。
+
+```tsx
+<Accordion collapsible="icon" ... />
+```
+
+### 禁用展开
+
+collapsible="disabled" 会禁用所有项的展开交互。
+
+```tsx
+<Accordion collapsible="disabled" defaultActiveKeys={["1"]} ... />
+```
+
+## API
+
+**Accordion**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| items \* | `AccordionItem[]` | — | 面板数据 |
+| multiple | `boolean` | `false` | 可同时展开多个 |
+| accordion | `boolean` | `false` | 手风琴模式(同一时刻最多一项) |
+| collapsible | `"header" | "icon" | "disabled"` | `"header"` | 展开触发区域 |
+| activeKeys / defaultActiveKeys | `string[]` | — | 受控/初始展开 |
+| onChange | `(keys: string[]) => void` | — | 展开变更 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/alert.md

@@ -0,0 +1,64 @@
+# Alert 警告提示
+
+> 页面中嵌入的警告/提示。
+
+## 导入
+
+```tsx
+import { Alert } from "@fangxinyan/lumina";
+```
+
+## 示例
+
+### 四种语义
+
+```tsx
+<Alert tone="info" title="标题">内容</Alert>
+```
+
+### 无标题 / 可关闭
+
+```tsx
+<Alert tone="info" closable>仅一行的简短提示</Alert>
+```
+
+### 隐藏图标
+
+showIcon={false} 可隐藏左侧语义图标,文本更紧凑。
+
+```tsx
+<Alert tone="info" showIcon={false}>纯文本提示</Alert>
+```
+
+### 自定义操作区
+
+action 插槽可以放置按钮等操作元素,位于内容与关闭按钮之间。
+
+```tsx
+<Alert
+  tone="warning"
+  title="新版本可用"
+  action={<Button size="sm" variant="primary">立即更新</Button>}
+  closable
+>
+  v1.2.0 已发布。
+</Alert>
+```
+
+## API
+
+**Alert**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| tone | `"info" | "success" | "warning" | "danger"` | `"info"` | 语气 |
+| title | `ReactNode` | — | 标题 |
+| icon | `IconName` | — | 自定义图标 |
+| showIcon | `boolean` | `true` | 是否显示语义图标 |
+| action | `ReactNode` | — | 右侧操作区(如按钮) |
+| closable | `boolean` | `false` | 可关闭 |
+| onClose | `() => void` | — | 关闭回调 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/avatar.md

@@ -0,0 +1,55 @@
+# Avatar 头像
+
+> 用图像、首字母代表用户或事物。
+
+## 导入
+
+```tsx
+import { Avatar } from "@fangxinyan/lumina";
+```
+
+## 示例
+
+### 基础
+
+通过 alt 自动生成首字母。
+
+```tsx
+<Avatar alt="金伟" />
+<Avatar alt="陆" size="lg" />
+```
+
+### 方形头像
+
+shape="square" 使用圆角方形,尺寸变化时圆角跟随变化。
+
+```tsx
+<Avatar alt="金" shape="square" />
+<Avatar alt="陆" shape="square" size="lg" />
+```
+
+### 状态
+
+在右下角显示状态点。
+
+```tsx
+<Avatar alt="金" status="online" />
+<Avatar alt="陆" status="busy" />
+```
+
+## API
+
+**Avatar**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| src | `string` | — | 图片 URL |
+| alt | `string` | — | 替代文本/首字母来源 |
+| initials | `string` | — | 自定义首字母 |
+| size | `number | "sm" | "md" | "lg" | "xl"` | `"md"` | 尺寸 |
+| shape | `"circle" | "square"` | `"circle"` | 形状 |
+| status | `"online" | "busy" | "away" | "offline"` | — | 状态点 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/badge.md

@@ -0,0 +1,41 @@
+# Badge 徽标数
+
+> 右上角的小型计数或状态指示器。
+
+## 导入
+
+```tsx
+import { Badge } from "@fangxinyan/lumina";
+```
+
+## 示例
+
+### 数字徽标
+
+```tsx
+<Badge count={3}><IconButton icon="bell" /></Badge>
+<Badge count={128} max={99}><IconButton icon="mail" /></Badge>
+```
+
+### 圆点
+
+dot 模式不显示数字,只是状态指示。
+
+```tsx
+<Badge dot><IconButton icon="user" /></Badge>
+```
+
+## API
+
+**Badge**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| count | `number` | — | 显示数字 |
+| dot | `boolean` | `false` | 圆点模式 |
+| max | `number` | `99` | 超过显示 max+ |
+| tone | `"neutral" | "accent" | ...` | `"danger"` | 色调 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/button.md

@@ -0,0 +1,122 @@
+# Button 按钮
+
+> 标记一个操作命令,响应用户点击行为,触发相应业务逻辑。
+
+## 导入
+
+```tsx
+import { Button, IconButton, Segmented } from "@fangxinyan/lumina";
+```
+
+## 示例
+
+### 基础按钮
+
+四种风格:主要、默认、幽灵、危险。
+
+```tsx
+<Button variant="primary">主按钮</Button>
+<Button>默认按钮</Button>
+<Button variant="ghost">幽灵按钮</Button>
+<Button variant="danger">删除</Button>
+```
+
+### 图标按钮
+
+icon 在前,trailingIcon 在后。
+
+```tsx
+<Button variant="primary" icon="sparkle">新建</Button>
+<Button icon="download">下载</Button>
+<Button trailingIcon="arrowRight">下一步</Button>
+```
+
+### 加载与禁用
+
+loading 期间禁用并显示 spinner。
+
+```tsx
+<Button loading={loading} variant="primary" onClick={...}>点我加载</Button>
+<Button disabled>已禁用</Button>
+```
+
+### 尺寸
+
+提供 sm / md / lg 三种高度。
+
+```tsx
+<Button size="sm">Small</Button>
+<Button>Medium</Button>
+<Button size="lg">Large</Button>
+```
+
+### 块级按钮
+
+block 让按钮撑满容器宽度,常用于底部主操作或表单提交。
+
+```tsx
+<Button block variant="primary" icon="send">提交表单</Button>
+<Button block>取消</Button>
+```
+
+### 纯图标按钮
+
+IconButton 是只含图标的方形按钮,常配合 tip 使用。
+
+```tsx
+<IconButton icon="heart" tip="收藏" />
+<IconButton icon="bell" tip="通知" />
+<IconButton icon="settings" tip="设置" />
+```
+
+### 分段控制器
+
+互斥多选项切换。
+
+```tsx
+<Segmented
+  options={[
+    { value: "grid", label: "网格" },
+    { value: "list", label: "列表" },
+    { value: "card", label: "卡片" },
+  ]}
+  defaultValue="grid"
+/>
+```
+
+## API
+
+**Button**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| variant | `"default" | "primary" | "ghost" | "danger"` | `"default"` | 按钮风格 |
+| size | `"sm" | "md" | "lg"` | `"md"` | 按钮尺寸 |
+| icon | `IconName` | — | 前置图标 |
+| trailingIcon | `IconName` | — | 后置图标 |
+| loading | `boolean` | `false` | 加载态 |
+| block | `boolean` | `false` | 撑满父容器宽度 |
+| disabled | `boolean` | `false` | 禁用 |
+| onClick | `(e: MouseEvent) => void` | — | 点击回调 |
+
+
+**IconButton**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| icon \* | `IconName` | — | 图标名 |
+| tip | `string` | — | 悬浮提示 |
+| size / variant | `—` | — | 继承自 Button |
+
+
+**Segmented**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| options \* | `{ value, label, disabled? }[]` | — | 选项数组 |
+| value / defaultValue | `T` | — | 受控/初始选中值 |
+| onChange | `(value: T) => void` | — | 切换回调 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/calendar.md

@@ -0,0 +1,44 @@
+# Calendar 日历
+
+> 查看与选择日期。
+
+## 导入
+
+```tsx
+import { Calendar } from "@fangxinyan/lumina";
+```
+
+## 示例
+
+### 基础用法
+
+```tsx
+<Calendar value={date} onChange={setDate} />
+```
+
+### 禁用日期
+
+通过 disabledDate 将周末标灰并禁止点击;与 min/max 可叠加使用。
+
+```tsx
+<Calendar
+  value={workDate}
+  onChange={setWorkDate}
+  disabledDate={(d) => d.getDay() === 0 || d.getDay() === 6}
+/>
+```
+
+## API
+
+**Calendar**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| value / defaultValue | `Date` | — | 受控/初始日期 |
+| onChange | `(date: Date) => void` | — | 选择回调 |
+| min / max | `Date` | — | 可选范围 |
+| disabledDate | `(date: Date) => boolean` | — | 自定义禁用判断,返回 true 的日期不可选 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/card.md

@@ -0,0 +1,68 @@
+# Card 卡片
+
+> 信息分组容器,提供 raised / flat / sunken 三种视觉变体。
+
+## 导入
+
+```tsx
+import { Card, Panel } from "@fangxinyan/lumina";
+```
+
+## 示例
+
+### 三种变体
+
+raised(默认凸起)、flat(扁平)、sunken(凹陷)。
+
+```tsx
+<Card>raised</Card>
+<Card variant="flat">flat</Card>
+<Card variant="sunken">sunken</Card>
+```
+
+### 悬浮抬起
+
+hoverable 在鼠标悬浮时轻微上移并加强阴影,适合可点击的卡片列表。
+
+```tsx
+<Card hoverable>可点击卡片</Card>
+```
+
+### Panel
+
+带标题、描述、操作区。
+
+```tsx
+<Panel title="月度营收" description="2026 年 4 月" actions={...}>
+  ¥ 12,480
+</Panel>
+```
+
+### Panel 带操作
+
+```tsx
+<Panel title="..." actions={<Button size="sm" icon="plus">邀请</Button>}>...</Panel>
+```
+
+## API
+
+**Card**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| variant | `"raised" | "flat" | "sunken"` | `"raised"` | 视觉变体 |
+| padding | `"none" | "sm" | "md" | "lg"` | `"md"` | 内边距 |
+| hoverable | `boolean` | `false` | 悬浮时抬起 |
+
+
+**Panel**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| title | `ReactNode` | — | 标题 |
+| description | `ReactNode` | — | 副标题 |
+| actions | `ReactNode` | — | 右上操作区 |
+
+
+---
+[← 回到索引](../llms.md)