@manohub/ui 0.6.0

package/dist/components/card/index.d.ts

@@ -0,0 +1,456 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import type { Padding } from '../part-padding';
+/** 描边档：`outline`（默认，弱描边）/ `plain`（无描边，靠容器底色区分） */
+export type CardVariant = 'outline' | 'plain';
+/** 卡片内距：与 `Panel` / `Form` 共用一套口径（`number` = 四边同值；`{ y, x }` 分别给） */
+export type CardPadding = Padding;
+/** 头部图标：图片地址（渲染 `<img>`、按方框自裁）或返回节点的函数（图标一律来自 `@manohub/icon`） */
+export type CardHeaderIcon = string | (() => VNodeChild);
+/**
+ * 卡片容器：**卡片外观的唯一实现**（底 / 弱描边 / 圆角 / 内距 / 悬浮与选中反馈）。
+ *
+ * 消费方（含 `ListView.CardItem`）不得再自绘卡片外观（描边 / 圆角 / 阴影 / 底色），
+ * 也不得在应用侧写这四类属性 —— 需要不同形态就用本件的维度（`variant` / `interactive` /
+ * `selected` / `disabled`），或提为骨架层待建件。
+ *
+ * ## 几何来源（portal 技能市场卡片实测，逐项落 `--ui-*` 令牌）
+ *
+ * - 圆角 8（`--ui-radius-md`）、内距 20（`--mh-card-padding`，原型 `p-5`）
+ * - 底 `--ui-base-100`、弱描边 `--ui-base-300`（原型 `border-border`）
+ * - 悬浮：描边转 `--ui-primary` + 主色 12% 阴影（`--ui-shadow-card-hover`）
+ *
+ * 列表卡片项那套几何（最小高 144、状态胶囊、标签片…）属 `ListView.CardItem`，**不在本件** ——
+ * 通用卡片不该被一条「只在列表里成立」的最小高绑住（**头部四件两处一致**，见下）。
+ *
+ * ## Header 区域（四件；`Card.Header` 是完整入口，`Card` 上的同名 props 是它的简写）
+ *
+ * ```
+ * ┌───────────────────────────────────────────────┐
+ * │ [图标] 标题                      extra（右端） │
+ * │        副标题                                   │
+ * └───────────────────────────────────────────────┘
+ * ```
+ *
+ * - **左侧区域**（`__header-main`）= 图标（`icon`）+ 文字块（`title` / `subtitle` 上下两行）
+ *   + `Card.Header` 默认插槽的自排内容；
+ * - **右侧** = `extra` 插槽（状态胶囊 / 行内按钮 / 统计）；
+ * - 四个位**一个都没给**时退化为**纯自排容器**：默认插槽内容原样进头容器（DOM 与没有这些位时一致）。
+ *
+ * 四个位两处入口完全等价：
+ * `<Card title="…" subtitle="…" icon="…">` ≡ `<Card.Header title="…" subtitle="…" icon="…" />`。
+ *
+ * 几何：图标 36×36（与 `ListView.CardItem` 同一档）、圆角取控件档 6；标题 16/600 单行省略；
+ * 副标题 12 + 弱字色，同样单行省略。
+ *
+ * ## 内距：**全部由段承载，根件不出内距；相邻两段之间只有一份**
+ *
+ * 根件只出面（底 / 描边 / 圆角），既不出内距也不出段间距；内距一律吃在**段**上：
+ * `Card.Header` / `Body` / `Footer`（分件）与 `Card` 内建头 / 操作行默认各吃 `--mh-card-padding`（20px）。
+ *
+ * 纵向的分配是「**每段只吃上边**」：一段只负责**与自己上方之间的距离**（下一段的上内距就是段间距），
+ * 卡片的**下沿由最后一段补**（面上 `:last-child` 那条规则）——
+ * 所以 header + body、body + footer 相邻时都不会叠成两份（20 + 20），卡片首末两端又各有一份完整内距。
+ *
+ * 要收紧某一段给那一段传 `padding`（px 数字或 `{ y, x }`，**缺哪边不覆盖哪边**：
+ * 这里的 `y` 就是该段的段间距，横向照 `x`）；要整卡统一就改令牌 `--mh-card-padding`。
+ *
+ * 直接写内容（`<Card>正文</Card>`）时，**裸子节点会被自动包进一层 `Card.Body`**（与 `Panel` 的简写路径同款），
+ * 所以它与显式写 `<Card><Card.Body>正文</Card.Body></Card>` 得到同一份内距。
+ *
+ * ## 三件（`Card.Header` / `Body` / `Footer`）
+ *
+ * 分件只有内距这一个维度：**不给就走 CSS 默认值**（不额外产生行内 `style`，DOM 与没有该维度时一致）。
+ * 分件的 `padding` 语义同上（纵向只表达段间距；下边由末段补）。
+ *
+ * ## 底部操作行（`actions` 插槽）
+ *
+ * `margin-top: auto` 贴卡片底部，卡片被拉伸（网格等高）时才有差别；内距与段同口径。
+ *
+ * ## 为什么不是 `<button>`
+ *
+ * 卡片里常驻操作按钮（编辑 / 删除等），整卡换成按钮会产生嵌套可交互元素；键盘可达性由卡内控件承担。
+ * 「整卡可点」由 `interactive`（光标 + 悬浮反馈）+ `onClick` 表达，与原型一致。
+ *
+ * @example 技能卡（图标 + 标题/副标题 + 右端状态 + 正文 + 操作行）
+ * <Card>
+ *   <Card.Header icon={skill.icon} title={skill.name} subtitle={`V${skill.version}`}>
+ *     <template #extra><Tag shape="status" tone="success">已发布</Tag></template>
+ *   </Card.Header>
+ *   <Card.Body>{skill.description}</Card.Body>
+ *   <template #actions><Button size="sm">编辑</Button></template>
+ * </Card>
+ */
+export interface CardProps {
+    /**
+     * 描边档：`outline`（默认）弱描边 `--ui-base-300`；`plain` 无描边。
+     * 底 / 圆角 / 阴影不随档位变化 —— 卡片外观在本件只有一处定义。
+     */
+    variant?: CardVariant;
+    /** 悬浮反馈：hover 描边转主色 + 主色 12% 阴影，并显示 `cursor: pointer` */
+    interactive?: boolean;
+    /** 选中态（主色描边 + 主色弱底）；只表达「已选中」，不表达单选逻辑 */
+    selected?: boolean;
+    /** 禁用态（半透明 + `not-allowed`；不转发 `onClick`） */
+    disabled?: boolean;
+    /** Header 简写：图标（图片地址，或返回节点的函数 —— 如 `() => <Icon name="skill" />`） */
+    icon?: CardHeaderIcon;
+    /** Header 简写：标题（单行省略；节点形态走 `title` 插槽） */
+    title?: string;
+    /** Header 简写：副标题（标题下方第二行，弱字色单行省略） */
+    subtitle?: string;
+    /** 整卡点击（打开详情 / 抽屉）。卡片是**容器**不是按钮：卡内操作位需自行 `stopPropagation`（见 `ListView.CardItem`） */
+    onClick?: (e: MouseEvent) => void;
+}
+/**
+ * 卡片头部：**四件**（图标 / 标题 / 副标题 + 右端 `extra`）。
+ *
+ * 四个位都可由属性给；`icon` / `title` / `subtitle` / `extra` 也都可走同名插槽（**插槽优先**）。
+ * 一个位都不给时退化为自排容器：默认插槽内容原样进头容器（`Card.Header` 也仍然是「自己排头」的逃生口）。
+ */
+export declare const CardHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+    padding: {
+        type: PropType<CardPadding>;
+        default: undefined;
+    };
+    /** 图标：图片地址或返回节点的函数（图标一律来自 `@manohub/icon`） */
+    icon: {
+        type: PropType<CardHeaderIcon>;
+        default: undefined;
+    };
+    /** 标题（单行省略）；要节点化标题时走 `title` 插槽 */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 副标题（标题下方第二行，弱字色单行省略） */
+    subtitle: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+    padding: {
+        type: PropType<CardPadding>;
+        default: undefined;
+    };
+    /** 图标：图片地址或返回节点的函数（图标一律来自 `@manohub/icon`） */
+    icon: {
+        type: PropType<CardHeaderIcon>;
+        default: undefined;
+    };
+    /** 标题（单行省略）；要节点化标题时走 `title` 插槽 */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 副标题（标题下方第二行，弱字色单行省略） */
+    subtitle: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    padding: Padding;
+    icon: CardHeaderIcon;
+    title: string;
+    subtitle: string;
+}, SlotsType<{
+    default?: () => VNodeChild;
+    icon?: () => VNodeChild;
+    title?: () => VNodeChild;
+    subtitle?: () => VNodeChild;
+    extra?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 卡片内容区：撑满剩余高度（卡片被拉伸时才有差别），本身不滚动 —— 滚动归属由所在容器决定 */
+export declare const CardBody: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+    padding: {
+        type: PropType<CardPadding>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+    padding: {
+        type: PropType<CardPadding>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    padding: Padding;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 卡片尾部：贴卡片底部（`margin-top: auto`），承载标签 / 统计 / 操作位 */
+export declare const CardFooter: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+    padding: {
+        type: PropType<CardPadding>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+    padding: {
+        type: PropType<CardPadding>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    padding: Padding;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * 复合件入口：`Card` + `Card.Header` / `Card.Body` / `Card.Footer`
+ * （与 `Panel` 同款 `Object.assign` 复合写法；成员不平级导出）
+ */
+export declare const Card: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        variant: {
+            type: PropType<CardVariant>;
+            default: string;
+        };
+        interactive: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        selected: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        icon: {
+            type: PropType<CardHeaderIcon>;
+            default: undefined;
+        };
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        subtitle: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        onClick: {
+            type: PropType<(e: MouseEvent) => void>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        icon: CardHeaderIcon;
+        disabled: boolean;
+        title: string;
+        onClick: (e: MouseEvent) => void;
+        subtitle: string;
+        variant: CardVariant;
+        interactive: boolean;
+        selected: boolean;
+    }, true, {}, SlotsType<{
+        default?: () => VNodeChild;
+        /** 图标的节点形态（替代 `icon` 属性；插槽优先于属性） */
+        icon?: () => VNodeChild;
+        /** 标题的节点形态（替代 `title` 属性） */
+        title?: () => VNodeChild;
+        /** 副标题的节点形态（替代 `subtitle` 属性） */
+        subtitle?: () => VNodeChild;
+        /** 右端（状态胶囊 / 行内按钮 / 统计） */
+        extra?: () => VNodeChild;
+        /** 底部操作行 */
+        actions?: () => VNodeChild;
+    }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        variant: {
+            type: PropType<CardVariant>;
+            default: string;
+        };
+        interactive: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        selected: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        icon: {
+            type: PropType<CardHeaderIcon>;
+            default: undefined;
+        };
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        subtitle: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        onClick: {
+            type: PropType<(e: MouseEvent) => void>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
+        icon: CardHeaderIcon;
+        disabled: boolean;
+        title: string;
+        onClick: (e: MouseEvent) => void;
+        subtitle: string;
+        variant: CardVariant;
+        interactive: boolean;
+        selected: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<CardVariant>;
+        default: string;
+    };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: PropType<CardHeaderIcon>;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    subtitle: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onClick: {
+        type: PropType<(e: MouseEvent) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    icon: CardHeaderIcon;
+    disabled: boolean;
+    title: string;
+    onClick: (e: MouseEvent) => void;
+    subtitle: string;
+    variant: CardVariant;
+    interactive: boolean;
+    selected: boolean;
+}, {}, string, SlotsType<{
+    default?: () => VNodeChild;
+    /** 图标的节点形态（替代 `icon` 属性；插槽优先于属性） */
+    icon?: () => VNodeChild;
+    /** 标题的节点形态（替代 `title` 属性） */
+    title?: () => VNodeChild;
+    /** 副标题的节点形态（替代 `subtitle` 属性） */
+    subtitle?: () => VNodeChild;
+    /** 右端（状态胶囊 / 行内按钮 / 统计） */
+    extra?: () => VNodeChild;
+    /** 底部操作行 */
+    actions?: () => VNodeChild;
+}>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    Header: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+        padding: {
+            type: PropType<CardPadding>;
+            default: undefined;
+        };
+        /** 图标：图片地址或返回节点的函数（图标一律来自 `@manohub/icon`） */
+        icon: {
+            type: PropType<CardHeaderIcon>;
+            default: undefined;
+        };
+        /** 标题（单行省略）；要节点化标题时走 `title` 插槽 */
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        /** 副标题（标题下方第二行，弱字色单行省略） */
+        subtitle: {
+            type: StringConstructor;
+            default: undefined;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+        padding: {
+            type: PropType<CardPadding>;
+            default: undefined;
+        };
+        /** 图标：图片地址或返回节点的函数（图标一律来自 `@manohub/icon`） */
+        icon: {
+            type: PropType<CardHeaderIcon>;
+            default: undefined;
+        };
+        /** 标题（单行省略）；要节点化标题时走 `title` 插槽 */
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        /** 副标题（标题下方第二行，弱字色单行省略） */
+        subtitle: {
+            type: StringConstructor;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        padding: Padding;
+        icon: CardHeaderIcon;
+        title: string;
+        subtitle: string;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+        icon?: () => VNodeChild;
+        title?: () => VNodeChild;
+        subtitle?: () => VNodeChild;
+        extra?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Body: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+        padding: {
+            type: PropType<CardPadding>;
+            default: undefined;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+        padding: {
+            type: PropType<CardPadding>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        padding: Padding;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Footer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+        padding: {
+            type: PropType<CardPadding>;
+            default: undefined;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+        padding: {
+            type: PropType<CardPadding>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        padding: Padding;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
+export type CardCompound = typeof Card;

package/dist/components/card/index.js

@@ -0,0 +1,231 @@
+import { defineComponent, createVNode, h } from "vue";
+const isBlank = (value) => value === void 0 || value === null || value === false || value === "";
+function resolveSlot(slotFn, propValue, transform) {
+  if (slotFn) return slotFn();
+  if (propValue === void 0 || propValue === null) return void 0;
+  return transform ? transform(propValue) : propValue;
+}
+const renderHeaderIcon = (icon) => typeof icon === "function" ? icon() : createVNode("img", {
+  "class": "mh-card__header-icon-img",
+  "src": icon,
+  "alt": ""
+}, null);
+function renderHeaderParts(parts) {
+  const noBuiltin = isBlank(parts.icon) && isBlank(parts.title) && isBlank(parts.subtitle) && isBlank(parts.extra);
+  if (noBuiltin) return isBlank(parts.main) ? [] : [parts.main];
+  const left = [];
+  if (!isBlank(parts.icon)) {
+    left.push(createVNode("span", {
+      "class": "mh-card__header-icon"
+    }, [parts.icon]));
+  }
+  if (!isBlank(parts.title) || !isBlank(parts.subtitle)) {
+    left.push(createVNode("span", {
+      "class": "mh-card__header-text"
+    }, [isBlank(parts.title) ? null : createVNode("span", {
+      "class": "mh-card__header-title"
+    }, [parts.title]), isBlank(parts.subtitle) ? null : createVNode("span", {
+      "class": "mh-card__header-subtitle"
+    }, [parts.subtitle])]));
+  }
+  if (!isBlank(parts.main)) left.push(parts.main);
+  return [left.length > 0 ? createVNode("div", {
+    "class": "mh-card__header-main"
+  }, [left]) : null, isBlank(parts.extra) ? null : createVNode("span", {
+    "class": "mh-card__header-extra"
+  }, [parts.extra])];
+}
+const mergeSegmentStyle = (attrsStyle, padding) => {
+  if (padding === void 0) return attrsStyle;
+  const y = typeof padding === "number" ? padding : padding.y;
+  const x = typeof padding === "number" ? padding : padding.x;
+  const style = {};
+  if (y !== void 0) style.paddingTop = `${y}px`;
+  if (x !== void 0) {
+    style.paddingLeft = `${x}px`;
+    style.paddingRight = `${x}px`;
+  }
+  if (Object.keys(style).length === 0) return attrsStyle;
+  return [attrsStyle, style];
+};
+const CardHeader = /* @__PURE__ */ defineComponent({
+  name: "CardHeader",
+  inheritAttrs: false,
+  props: {
+    /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    },
+    /** 图标：图片地址或返回节点的函数（图标一律来自 `@manohub/icon`） */
+    icon: {
+      type: [String, Function],
+      default: void 0
+    },
+    /** 标题（单行省略）；要节点化标题时走 `title` 插槽 */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /** 副标题（标题下方第二行，弱字色单行省略） */
+    subtitle: {
+      type: String,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["mh-card__header", attrs.class].filter(Boolean).join(" "),
+      "style": mergeSegmentStyle(attrs.style, props.padding)
+    }, [renderHeaderParts({
+      icon: resolveSlot(slots.icon, props.icon, renderHeaderIcon),
+      title: resolveSlot(slots.title, props.title),
+      subtitle: resolveSlot(slots.subtitle, props.subtitle),
+      extra: slots.extra?.(),
+      main: slots.default?.()
+    })]);
+  }
+});
+const CardBody = /* @__PURE__ */ defineComponent({
+  name: "CardBody",
+  inheritAttrs: false,
+  props: {
+    /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["mh-card__body", attrs.class].filter(Boolean).join(" "),
+      "style": mergeSegmentStyle(attrs.style, props.padding)
+    }, [slots.default?.()]);
+  }
+});
+const CardFooter = /* @__PURE__ */ defineComponent({
+  name: "CardFooter",
+  inheritAttrs: false,
+  props: {
+    /** 这一段的内距（横向 + 段间距）：缺省吃组件令牌 `--mh-card-padding`（20px）；下边由卡片末段统一补 */
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["mh-card__footer", attrs.class].filter(Boolean).join(" "),
+      "style": mergeSegmentStyle(attrs.style, props.padding)
+    }, [slots.default?.()]);
+  }
+});
+const isCardPart = (child) => !!child && typeof child === "object" && (child.type === CardHeader || child.type === CardBody || child.type === CardFooter);
+const flattenChildren = (raw) => (Array.isArray(raw) ? raw : raw == null ? [] : [raw]).flatMap((child) => Array.isArray(child) ? child : [child]).filter((child) => child !== null && child !== void 0 && child !== false && child !== true && child !== "");
+function withImplicitBody(children) {
+  const out = [];
+  let loose = [];
+  const flush = () => {
+    if (loose.length === 0) return;
+    const group = loose;
+    loose = [];
+    out.push(h(CardBody, null, {
+      default: () => group
+    }));
+  };
+  for (const child of children) {
+    if (isCardPart(child)) {
+      flush();
+      out.push(child);
+    } else {
+      loose.push(child);
+    }
+  }
+  flush();
+  return out;
+}
+const CardRoot = /* @__PURE__ */ defineComponent({
+  name: "Card",
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String,
+      default: "outline"
+    },
+    interactive: {
+      type: Boolean,
+      default: false
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: [String, Function],
+      default: void 0
+    },
+    title: {
+      type: String,
+      default: void 0
+    },
+    subtitle: {
+      type: String,
+      default: void 0
+    },
+    onClick: {
+      type: Function,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => {
+      const hasHead = Boolean(props.icon !== void 0 || props.title !== void 0 || props.subtitle !== void 0 || slots.icon || slots.title || slots.subtitle || slots.extra);
+      const classes = ["mh-card", `mh-card--${props.variant}`, props.interactive ? "mh-card--interactive" : "", props.selected ? "mh-card--selected" : "", props.disabled ? "mh-card--disabled" : "", attrs.class].filter(Boolean).join(" ");
+      return createVNode("div", {
+        "class": classes,
+        "style": attrs.style,
+        "onClick": props.disabled ? void 0 : props.onClick
+      }, [hasHead ? createVNode("div", {
+        "class": "mh-card__header"
+      }, [renderHeaderParts({
+        icon: resolveSlot(slots.icon, props.icon, renderHeaderIcon),
+        title: resolveSlot(slots.title, props.title),
+        subtitle: resolveSlot(slots.subtitle, props.subtitle),
+        extra: slots.extra?.()
+      })]) : null, withImplicitBody(flattenChildren(slots.default?.())), slots.actions ? createVNode("div", {
+        "class": "mh-card__actions"
+      }, [slots.actions()]) : null]);
+    };
+  }
+});
+const Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Body: CardBody,
+  Footer: CardFooter
+});
+export {
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader
+};