@fangxinyan/lumina 0.2.1 → 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 ============ */
@@ -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/commandpalette.md

@@ -0,0 +1,58 @@
+# CommandPalette ⌘K 命令面板
+
+> 全局命令搜索与执行入口。
+
+## 示例
+
+### 基础 + 快捷键
+
+在当前页面按 ⌘K / Ctrl+K 打开。分组、快捷键提示、键盘导航都已内置。
+
+```tsx
+const [open, setOpen] = useState(false);
+useEffect(() => {
+  const h = (e: KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+      e.preventDefault();
+      setOpen(o => !o);
+    }
+  };
+  window.addEventListener("keydown", h);
+  return () => window.removeEventListener("keydown", h);
+}, []);
+
+<CommandPalette open={open} onOpenChange={setOpen} items={[...]} />
+```
+
+## API
+
+**CommandPalette**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| open / onOpenChange \* | `boolean / (open: boolean) => void` | — | 受控开关 |
+| items \* | `CommandItem[]` | — | 所有命令项 |
+| placeholder | `string` | `"搜索命令…"` | 搜索框占位文本 |
+| filter | `(item, query) => boolean` | `子序列匹配` | 自定义过滤函数 |
+| emptyText | `ReactNode` | — | 无结果占位 |
+| resetOnOpen | `boolean` | `true` | 打开时清空输入 |
+| footer | `ReactNode` | — | 底部区;null 隐藏 |
+
+
+**CommandItem**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| key \* | `string` | — | 唯一键 |
+| label \* | `string` | — | 主文案(也参与搜索) |
+| description | `ReactNode` | — | 副标题 |
+| icon | `ReactNode` | — | 前置图标 |
+| shortcut | `ReactNode` | — | 右侧快捷键 |
+| keywords | `string[]` | — | 额外搜索关键词 |
+| group | `string` | — | 分组标题 |
+| disabled | `boolean` | — | 禁用 |
+| onSelect | `() => void` | — | 选中回调(会自动关闭面板) |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/contextmenu.md

@@ -0,0 +1,55 @@
+# ContextMenu 右键菜单
+
+> 桌面应用风格的右键上下文菜单。
+
+## 示例
+
+### 基础
+
+```tsx
+<ContextMenu items={[
+  { key: "copy", label: "复制", shortcut: "⌘C", onSelect: () => {} },
+  { key: "cut",  label: "剪切", shortcut: "⌘X", onSelect: () => {} },
+  { key: "d",    type: "divider" },
+  { key: "del",  label: "删除", danger: true, onSelect: () => {} },
+]}>
+  <div>右键点击我</div>
+</ContextMenu>
+```
+
+### 文件管理器示例
+
+典型的文件右键菜单,带图标、快捷键、分组分隔、危险操作高亮。
+
+```tsx
+<ContextMenu items={[...]}>...
+```
+
+## API
+
+**ContextMenu**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| items \* | `ContextMenuItem[]` | — | 菜单项 |
+| children \* | `ReactElement` | — | 触发元素(恰好一个) |
+| disabled | `boolean` | — | 禁用,恢复浏览器原生菜单 |
+| minWidth | `number` | `180` | 面板最小宽度 |
+
+
+**ContextMenuItem**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| key \* | `string` | — | 唯一键 |
+| label | `ReactNode` | — | 文案 |
+| icon | `ReactNode` | — | 前置图标 |
+| shortcut | `ReactNode` | — | 右侧快捷键提示 |
+| disabled | `boolean` | — | 禁用 |
+| danger | `boolean` | — | 危险态(红色) |
+| type | `"divider"` | — | 置为 "divider" 渲染分隔线 |
+| onSelect | `() => void` | — | 选中回调 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/splitter.md

@@ -0,0 +1,63 @@
+# Splitter 可拖拽分栏
+
+> 两栏之间可拖拽的分隔条,支持横向、纵向与嵌套。
+
+## 示例
+
+### 水平分栏
+
+```tsx
+<Splitter defaultSize={200} min={120} max={360}>
+  <SidePanel />
+  <MainPanel />
+</Splitter>
+```
+
+### 垂直分栏
+
+direction="vertical" 让面板上下排列,分隔条变成横条。
+
+```tsx
+<Splitter direction="vertical" defaultSize={120} min={60}>...</Splitter>
+```
+
+### 嵌套分栏
+
+组合使用两个 Splitter 可以搭出 IDE 风格的三区布局。
+
+```tsx
+<Splitter defaultSize={180}>
+  <SideNav />
+  <Splitter direction="vertical" defaultSize={180}>
+    <Editor />
+    <Terminal />
+  </Splitter>
+</Splitter>
+```
+
+### 受控模式
+
+通过 size / onResize 可以持久化宽度或与其他状态联动。
+
+```tsx
+const [w, setW] = useState(220);
+<Splitter size={w} onResize={setW}>...</Splitter>
+```
+
+## API
+
+**Splitter**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| direction | `"horizontal" | "vertical"` | `"horizontal"` | 布局方向 |
+| defaultSize | `number` | `240` | 非受控初始宽/高 (px) |
+| size / onResize | `number / (n: number) => void` | — | 受控宽/高 |
+| onResizeEnd | `(n: number) => void` | — | 拖动结束回调 |
+| min / max | `number` | `80 / Infinity` | 尺寸限制 (px) |
+| step | `number` | `16` | 方向键步长 (px) |
+| children \* | `[ReactNode, ReactNode]` | — | 必须恰好两个子节点 |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms/statusbar.md

@@ -0,0 +1,53 @@
+# StatusBar 状态栏
+
+> 窗口底部状态栏,展示分支、编码、行列等应用元信息。
+
+## 示例
+
+### 基础
+
+```tsx
+<StatusBar
+  left={<StatusBar.Item icon={<Icon name="check" size={12} />} tone="success">Ready</StatusBar.Item>}
+  right={<StatusBar.Item tone="muted">UTF-8</StatusBar.Item>}
+/>
+```
+
+### 可点击项
+
+为 Item 提供 onClick 会渲染成按钮,支持悬停高亮。
+
+```tsx
+<StatusBar.Item onClick={...}>TypeScript</StatusBar.Item>
+```
+
+### 语义色
+
+tone 控制文字颜色:default / muted / accent / success / warning / danger。
+
+```tsx
+<StatusBar.Item tone="danger">3 errors</StatusBar.Item>
+```
+
+## API
+
+**StatusBar**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| left | `ReactNode` | — | 左侧槽位 |
+| center | `ReactNode` | — | 中部槽位(绝对居中) |
+| right | `ReactNode` | — | 右侧槽位 |
+
+
+**StatusBar.Item**
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| icon | `ReactNode` | — | 前置图标 |
+| tone | `"default" | "muted" | "accent" | "success" | "warning" | "danger"` | `"default"` | 语义色 |
+| onClick | `(e) => void` | — | 点击回调(提供时渲染为 button) |
+
+
+---
+[← 回到索引](../llms.md)

package/docs/llms.md

@@ -3,7 +3,7 @@
 > 拟态风格的 React 18 组件库,目标是 Electron 桌面应用。**写给 AI 编程助手**的按需文档 —— 每个组件单独一个 `.md`,避免一次性读取全部。示例源自 playground 的 demo,可直接复制运行。
 
 - **包名**: `@fangxinyan/lumina`
-- **版本**: `0.2.1`
+- **版本**: `0.3.0`
 - **React 最低版本**: 18
 - **环境**: 带打包器的 React 工程(Vite / Next.js / Webpack / Remix / Electron + Vite 等)
 - **零运行时依赖**: 只依赖 `react` / `react-dom` (peer deps)
@@ -94,4 +94,8 @@
 - [TitleBar 标题栏](./llms/titlebar.md) — Electron 应用窗口顶部的跨平台标题栏。
 - [WindowControls 窗口控件](./llms/windowcontrols.md) — 独立的窗口控件按钮组。
 - [Sidebar 侧边栏](./llms/sidebar.md) — 应用主导航,沿屏幕左侧垂直排列。
+- [StatusBar 状态栏](./llms/statusbar.md) — 窗口底部状态栏,展示分支、编码、行列等应用元信息。
+- [Splitter 可拖拽分栏](./llms/splitter.md) — 两栏之间可拖拽的分隔条,支持横向、纵向与嵌套。
+- [ContextMenu 右键菜单](./llms/contextmenu.md) — 桌面应用风格的右键上下文菜单。
+- [CommandPalette ⌘K 命令面板](./llms/commandpalette.md) — 全局命令搜索与执行入口。
 

package/package.json

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

package/dist/chunk-4MR4GVTD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"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","file":"chunk-4MR4GVTD.js","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Accordion.css\";\nimport * as React from \"react\";\nimport { Icon } from \"../Icon\";\n\nexport interface AccordionItem {\n  key: string;\n  title: React.ReactNode;\n  content: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface AccordionProps {\n  items: AccordionItem[];\n  /** If true, multiple sections can be open at once. */\n  multiple?: boolean;\n  /**\n   * Accordion mode — at most one item open at a time. Takes precedence over `multiple`\n   * when both are set.\n   */\n  accordion?: boolean;\n  /**\n   * What triggers expansion.\n   * - `\"header\"` (default): clicking anywhere on the header toggles.\n   * - `\"icon\"`: only the chevron icon is clickable.\n   * - `\"disabled\"`: the panel cannot be toggled.\n   */\n  collapsible?: \"header\" | \"icon\" | \"disabled\";\n  activeKeys?: string[];\n  defaultActiveKeys?: string[];\n  onChange?: (keys: string[]) => void;\n  className?: string;\n}\n\n/** `Accordion` — collapsible sections. */\nexport const Accordion: React.FC<AccordionProps> = ({\n  items,\n  multiple = false,\n  accordion = false,\n  collapsible = \"header\",\n  activeKeys,\n  defaultActiveKeys = [],\n  onChange,\n  className = \"\",\n}) => {\n  const [inner, setInner] = React.useState<string[]>(defaultActiveKeys);\n  const isControlled = activeKeys !== undefined;\n  const keys = isControlled ? activeKeys! : inner;\n\n  // accordion takes precedence over multiple\n  const singleOpen = accordion || !multiple;\n\n  const toggle = (k: string, itemDisabled?: boolean) => {\n    if (collapsible === \"disabled\" || itemDisabled) return;\n    const next = keys.includes(k)\n      ? keys.filter((x) => x !== k)\n      : singleOpen\n      ? [k]\n      : [...keys, k];\n    if (!isControlled) setInner(next);\n    onChange?.(next);\n  };\n\n  return (\n    <div className={`accordion ${className}`}>\n      {items.map((it) => {\n        const open = keys.includes(it.key);\n        const isDisabled = it.disabled || collapsible === \"disabled\";\n        const headerClickable = collapsible === \"header\" && !isDisabled;\n        return (\n          <div\n            key={it.key}\n            className={`accordion-item ${open ? \"open\" : \"\"} ${isDisabled ? \"disabled\" : \"\"} ${collapsible === \"icon\" ? \"icon-only\" : \"\"}`}\n          >\n            <button\n              type=\"button\"\n              className=\"accordion-head\"\n              disabled={isDisabled}\n              onClick={() => headerClickable && toggle(it.key, it.disabled)}\n              aria-expanded={open}\n            >\n              <span>{it.title}</span>\n              <span\n                className={`accordion-chev${collapsible === \"icon\" ? \" clickable\" : \"\"}`}\n                onClick={(e) => {\n                  if (collapsible === \"icon\" && !isDisabled) {\n                    e.stopPropagation();\n                    toggle(it.key, it.disabled);\n                  }\n                }}\n              >\n                <Icon name=\"chevDown\" size={16} />\n              </span>\n            </button>\n            <div className=\"accordion-body\">\n              <div className=\"accordion-body-inner\">{it.content}</div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"]}

package/dist/chunk-RDLPX7RK.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Accordion/Accordion.tsx"],"names":["React","jsx","jsxs","Icon"],"mappings":"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","file":"chunk-RDLPX7RK.cjs","sourcesContent":["import \"../../styles/tokens.css\";\nimport \"../../styles/shared.css\";\nimport \"./Accordion.css\";\nimport * as React from \"react\";\nimport { Icon } from \"../Icon\";\n\nexport interface AccordionItem {\n  key: string;\n  title: React.ReactNode;\n  content: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface AccordionProps {\n  items: AccordionItem[];\n  /** If true, multiple sections can be open at once. */\n  multiple?: boolean;\n  /**\n   * Accordion mode — at most one item open at a time. Takes precedence over `multiple`\n   * when both are set.\n   */\n  accordion?: boolean;\n  /**\n   * What triggers expansion.\n   * - `\"header\"` (default): clicking anywhere on the header toggles.\n   * - `\"icon\"`: only the chevron icon is clickable.\n   * - `\"disabled\"`: the panel cannot be toggled.\n   */\n  collapsible?: \"header\" | \"icon\" | \"disabled\";\n  activeKeys?: string[];\n  defaultActiveKeys?: string[];\n  onChange?: (keys: string[]) => void;\n  className?: string;\n}\n\n/** `Accordion` — collapsible sections. */\nexport const Accordion: React.FC<AccordionProps> = ({\n  items,\n  multiple = false,\n  accordion = false,\n  collapsible = \"header\",\n  activeKeys,\n  defaultActiveKeys = [],\n  onChange,\n  className = \"\",\n}) => {\n  const [inner, setInner] = React.useState<string[]>(defaultActiveKeys);\n  const isControlled = activeKeys !== undefined;\n  const keys = isControlled ? activeKeys! : inner;\n\n  // accordion takes precedence over multiple\n  const singleOpen = accordion || !multiple;\n\n  const toggle = (k: string, itemDisabled?: boolean) => {\n    if (collapsible === \"disabled\" || itemDisabled) return;\n    const next = keys.includes(k)\n      ? keys.filter((x) => x !== k)\n      : singleOpen\n      ? [k]\n      : [...keys, k];\n    if (!isControlled) setInner(next);\n    onChange?.(next);\n  };\n\n  return (\n    <div className={`accordion ${className}`}>\n      {items.map((it) => {\n        const open = keys.includes(it.key);\n        const isDisabled = it.disabled || collapsible === \"disabled\";\n        const headerClickable = collapsible === \"header\" && !isDisabled;\n        return (\n          <div\n            key={it.key}\n            className={`accordion-item ${open ? \"open\" : \"\"} ${isDisabled ? \"disabled\" : \"\"} ${collapsible === \"icon\" ? \"icon-only\" : \"\"}`}\n          >\n            <button\n              type=\"button\"\n              className=\"accordion-head\"\n              disabled={isDisabled}\n              onClick={() => headerClickable && toggle(it.key, it.disabled)}\n              aria-expanded={open}\n            >\n              <span>{it.title}</span>\n              <span\n                className={`accordion-chev${collapsible === \"icon\" ? \" clickable\" : \"\"}`}\n                onClick={(e) => {\n                  if (collapsible === \"icon\" && !isDisabled) {\n                    e.stopPropagation();\n                    toggle(it.key, it.disabled);\n                  }\n                }}\n              >\n                <Icon name=\"chevDown\" size={16} />\n              </span>\n            </button>\n            <div className=\"accordion-body\">\n              <div className=\"accordion-body-inner\">{it.content}</div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"]}