@fangxinyan/lumina 0.6.11 → 0.6.12

package/dist/{Card-4DKCXWFU.css → Card-W3ATFUJW.css}

@@ -1,6 +1,8 @@
 /* ============ Card ============ */
 .card {
-  background: var(--bg);
+  --card-bg: var(--bg);
+  --card-loading-bg: color-mix(in srgb, var(--bg) 72%, var(--bg-sunken));
+  background: var(--card-bg);
   border-radius: var(--r-lg);
   box-shadow: var(--neu-shadow-panel);
   padding: var(--gap-5);
@@ -66,7 +68,7 @@
   border-radius: var(--r-md);
   display: grid;
   place-items: center;
-  background: color-mix(in srgb, var(--bg) 72%, var(--bg-sunken));
+  background: var(--card-loading-bg);
   box-shadow:
     inset calc(var(--shadow-inset-offset) * 0.45) calc(var(--shadow-inset-offset) * 0.45) calc(var(--shadow-inset-blur) * 0.45) color-mix(in oklch, var(--shadow-dark) 55%, transparent),
     inset calc(var(--shadow-inset-offset) * -0.45) calc(var(--shadow-inset-offset) * -0.45) calc(var(--shadow-inset-blur) * 0.45) color-mix(in oklch, var(--shadow-light) 72%, transparent);

package/dist/Card.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkOUSJMIZX_cjs = require('./chunk-OUSJMIZX.cjs');
+var chunkKZZ5Y56R_cjs = require('./chunk-KZZ5Y56R.cjs');
 require('./chunk-MZCKPLHQ.cjs');
 
 
 
 Object.defineProperty(exports, "Card", {
   enumerable: true,
-  get: function () { return chunkOUSJMIZX_cjs.Card; }
+  get: function () { return chunkKZZ5Y56R_cjs.Card; }
 });

package/dist/Card.d.cts

@@ -7,6 +7,8 @@ type CardBodyProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "cl
 interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     /** Visual variant. `raised` protrudes; `sunken` recesses; `flat` is subtle. */
     variant?: "raised" | "sunken" | "flat";
+    /** Custom card background. Accepts CSS colors, theme tokens, color-mix and gradients. */
+    background?: React.CSSProperties["background"];
     /** Inner padding. */
     padding?: "none" | "sm" | "md" | "lg";
     /** When true, the card raises and lifts on hover. */

package/dist/Card.d.ts

@@ -7,6 +7,8 @@ type CardBodyProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "cl
 interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     /** Visual variant. `raised` protrudes; `sunken` recesses; `flat` is subtle. */
     variant?: "raised" | "sunken" | "flat";
+    /** Custom card background. Accepts CSS colors, theme tokens, color-mix and gradients. */
+    background?: React.CSSProperties["background"];
     /** Inner padding. */
     padding?: "none" | "sm" | "md" | "lg";
     /** When true, the card raises and lifts on hover. */

package/dist/Card.js

@@ -1,2 +1,2 @@
-export { Card } from './chunk-HEBBQZUT.js';
+export { Card } from './chunk-RBDBEXUU.js';
 import './chunk-3GJZRYTD.js';

package/dist/{chunk-OUSJMIZX.cjs → chunk-KZZ5Y56R.cjs}

@@ -3,7 +3,7 @@
 var chunkMZCKPLHQ_cjs = require('./chunk-MZCKPLHQ.cjs');
 require('./tokens-RGFJKRC7.css');
 require('./shared-NJHRNLRH.css');
-require('./Card-4DKCXWFU.css');
+require('./Card-W3ATFUJW.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -35,6 +35,7 @@ var Card = React__namespace.forwardRef(
     title,
     description,
     actions,
+    background,
     fill = false,
     bodyLayout,
     bodyClassName = "",
@@ -43,6 +44,7 @@ var Card = React__namespace.forwardRef(
     loading = false,
     loadingOverlay,
     className = "",
+    style,
     children,
     ...rest
   }, ref) => {
@@ -62,7 +64,11 @@ var Card = React__namespace.forwardRef(
       loading && "loading",
       bodyClassName
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cls, "aria-busy": loading || void 0, ...rest, children: [
+    const cardStyle = background ? {
+      "--card-bg": background,
+      ...style
+    } : style;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cls, style: cardStyle, "aria-busy": loading || void 0, ...rest, children: [
       (title || description || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-head", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-titles", children: [
           title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-title", children: title }),

package/dist/{chunk-HEBBQZUT.js → chunk-RBDBEXUU.js}

@@ -1,7 +1,7 @@
 import { Spin } from './chunk-3GJZRYTD.js';
 import './tokens-RGFJKRC7.css';
 import './shared-NJHRNLRH.css';
-import './Card-4DKCXWFU.css';
+import './Card-W3ATFUJW.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -13,6 +13,7 @@ var Card = React.forwardRef(
     title,
     description,
     actions,
+    background,
     fill = false,
     bodyLayout,
     bodyClassName = "",
@@ -21,6 +22,7 @@ var Card = React.forwardRef(
     loading = false,
     loadingOverlay,
     className = "",
+    style,
     children,
     ...rest
   }, ref) => {
@@ -40,7 +42,11 @@ var Card = React.forwardRef(
       loading && "loading",
       bodyClassName
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs("div", { ref, className: cls, "aria-busy": loading || void 0, ...rest, children: [
+    const cardStyle = background ? {
+      "--card-bg": background,
+      ...style
+    } : style;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cls, style: cardStyle, "aria-busy": loading || void 0, ...rest, children: [
       (title || description || actions) && /* @__PURE__ */ jsxs("div", { className: "card-head", children: [
         /* @__PURE__ */ jsxs("div", { className: "card-titles", children: [
           title && /* @__PURE__ */ jsx("div", { className: "card-title", children: title }),

package/dist/index.cjs

@@ -29,7 +29,7 @@ var chunkN4JH6HHA_cjs = require('./chunk-N4JH6HHA.cjs');
 var chunk3NSBPQBT_cjs = require('./chunk-3NSBPQBT.cjs');
 var chunkPEFIXNAV_cjs = require('./chunk-PEFIXNAV.cjs');
 var chunk4N64ZL5M_cjs = require('./chunk-4N64ZL5M.cjs');
-var chunkOUSJMIZX_cjs = require('./chunk-OUSJMIZX.cjs');
+var chunkKZZ5Y56R_cjs = require('./chunk-KZZ5Y56R.cjs');
 var chunkMZCKPLHQ_cjs = require('./chunk-MZCKPLHQ.cjs');
 var chunkAA2FRQUQ_cjs = require('./chunk-AA2FRQUQ.cjs');
 var chunk5KGGB3EH_cjs = require('./chunk-5KGGB3EH.cjs');
@@ -51,7 +51,7 @@ var chunkHTW62OMX_cjs = require('./chunk-HTW62OMX.cjs');
 var chunkGJAEGIPM_cjs = require('./chunk-GJAEGIPM.cjs');
 
 // src/index.ts
-var VERSION = "0.6.11";
+var VERSION = "0.6.12";
 
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
@@ -271,7 +271,7 @@ Object.defineProperty(exports, "List", {
 });
 Object.defineProperty(exports, "Card", {
   enumerable: true,
-  get: function () { return chunkOUSJMIZX_cjs.Card; }
+  get: function () { return chunkKZZ5Y56R_cjs.Card; }
 });
 Object.defineProperty(exports, "Spin", {
   enumerable: true,

package/dist/index.d.cts

@@ -49,6 +49,6 @@ import 'react/jsx-runtime';
 import 'react';
 
 /** Package version — bumped by release scripts. */
-declare const VERSION = "0.6.11";
+declare const VERSION = "0.6.12";
 
 export { VERSION };

package/dist/index.d.ts

@@ -49,6 +49,6 @@ import 'react/jsx-runtime';
 import 'react';
 
 /** Package version — bumped by release scripts. */
-declare const VERSION = "0.6.11";
+declare const VERSION = "0.6.12";
 
 export { VERSION };

package/dist/index.js

@@ -27,7 +27,7 @@ export { Form, FormItem, useForm } from './chunk-ACZA7HHP.js';
 export { Image, ImageGrid, LayeredImage, SpriteImage } from './chunk-GEANNF4T.js';
 export { InputNumber } from './chunk-3VXBSLPT.js';
 export { List } from './chunk-Q77BWQNG.js';
-export { Card } from './chunk-HEBBQZUT.js';
+export { Card } from './chunk-RBDBEXUU.js';
 export { Spin } from './chunk-3GJZRYTD.js';
 export { Cascader } from './chunk-FPII6I52.js';
 export { Checkbox } from './chunk-PHONNUK2.js';
@@ -49,6 +49,6 @@ export { Calendar } from './chunk-W72IIGOV.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-SNX4FZYB.js';
 
 // src/index.ts
-var VERSION = "0.6.11";
+var VERSION = "0.6.12";
 
 export { VERSION };

package/dist/styles.css

@@ -1136,7 +1136,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
 /* center is default (both flex: 1) */
 /* ============ Card ============ */
 .card {
-  background: var(--bg);
+  --card-bg: var(--bg);
+  --card-loading-bg: color-mix(in srgb, var(--bg) 72%, var(--bg-sunken));
+  background: var(--card-bg);
   border-radius: var(--r-lg);
   box-shadow: var(--neu-shadow-panel);
   padding: var(--gap-5);
@@ -1199,7 +1201,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border-radius: var(--r-md);
   display: grid;
   place-items: center;
-  background: color-mix(in srgb, var(--bg) 72%, var(--bg-sunken));
+  background: var(--card-loading-bg);
   box-shadow:
     inset calc(var(--shadow-inset-offset) * 0.45) calc(var(--shadow-inset-offset) * 0.45) calc(var(--shadow-inset-blur) * 0.45) color-mix(in oklch, var(--shadow-dark) 55%, transparent),
     inset calc(var(--shadow-inset-offset) * -0.45) calc(var(--shadow-inset-offset) * -0.45) calc(var(--shadow-inset-blur) * 0.45) color-mix(in oklch, var(--shadow-light) 72%, transparent);

package/docs/llms/card.md

@@ -28,6 +28,26 @@ hoverable 在鼠标悬浮时轻微上移并加强阴影,适合可点击的卡片
 <Card hoverable>可点击卡片</Card>
 ```
 
+### 自定义背景色
+
+background 可覆盖卡片根节点背景，纯色、主题 token、color-mix 与渐变都走同一个字段。
+
+```tsx
+<Card background="color-mix(in oklch, var(--accent-soft) 70%, var(--bg))">
+  主题强调底色
+</Card>
+```
+
+### 渐变背景
+
+background 支持完整 CSS 背景值，适合给看板、概览指标或状态卡片做轻量分层。
+
+```tsx
+<Card background="linear-gradient(135deg, var(--bg-raised), var(--accent-soft))">
+  渐变卡片
+</Card>
+```
+
 ### 带标题
 
 带标题、描述、操作区。
@@ -76,6 +96,7 @@ loading 会在正文区域显示中性 overlay；默认 Spin 跟随主题色，l
 | Prop | 类型 | 默认 | 说明 |
 | --- | --- | --- | --- |
 | variant | `"raised" | "flat" | "sunken"` | `"raised"` | 视觉变体 |
+| background | `CSSProperties["background"]` | — | 自定义卡片根节点背景，支持主题 token / color-mix / linear-gradient / radial-gradient 等 CSS 背景值 |
 | padding | `"none" | "sm" | "md" | "lg"` | `"md"` | 内边距 |
 | hoverable | `boolean` | `false` | 悬浮时抬起 |
 | title | `ReactNode` | — | 标题 |

package/docs/llms.md

@@ -3,7 +3,7 @@
 > 拟态风格的 React 18 组件库,目标是 Electron 桌面应用。**写给 AI 编程助手**的按需文档 —— 每个组件单独一个 `.md`,避免一次性读取全部。示例源自 playground 的 demo,可直接复制运行。
 
 - **包名**: `@fangxinyan/lumina`
-- **版本**: `0.6.11`
+- **版本**: `0.6.12`
 - **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.6.11",
+  "version": "0.6.12",
   "description": "Lumina — Neumorphic component library for Electron & React apps",
   "type": "module",
   "main": "./dist/index.cjs",