musae 1.2.0 → 1.3.0

package/dist/components/card/card.mjs

@@ -1,24 +1,32 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState, useCallback } from 'react';
 import { stringify } from '@aiszlab/relax/class-name';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { OPACITY } from '../theme/tokens.stylex.mjs';
-import { useTheme } from '../theme/hooks.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
-import { CLASS_NAMES } from './context.mjs';
+import { CLASS_NAMES, CardContext } from './context.mjs';
 import styles from './styles.mjs';
+import CardHeader from './header.mjs';
+import CardMedia from './media.mjs';
+import CardContent from './content.mjs';
+import CardHeadline from './headline.mjs';
+import CardTitle from './title.mjs';
+import CardSubhead from './subhead.mjs';
+import CardBody from './body.mjs';
+import CardActions from './actions.mjs';
 
-var _excluded = ["children", "className", "style", "variant", "onClick", "disabled"],
-  _excluded2 = ["className", "style", "src", "alt", "children"];
+var _excluded = ["children", "className", "style", "variant", "layout", "onClick", "disabled", "dragged", "draggable", "onDragStart", "onDragEnd"];
 /**
- * @zh 卡片组件，用于在一个容器中展示内容和操作。卡片支持多种样式变体（描边、浮起、填充），
- * 并在悬停、聚焦、按下时展示交互状态层。
+ * @zh 卡片组件,用于在一个容器中展示内容和操作。卡片支持多种样式变体(描边、浮起、填充)
+ * 和布局变体(垂直堆叠、水平排布),并在悬停、聚焦、按下、拖拽时展示交互状态层与 elevation 变化。
  *
  * @en Card component for displaying content and actions in a single container.
- * Cards support multiple style variants (outlined, elevated, filled) and show
- * interaction state layers on hover, focus, and press.
+ * Cards support multiple style variants (outlined, elevated, filled) and layout
+ * variants (stacked, horizontal), with state-based elevation and state-layer
+ * transitions on hover, focus, press, and drag.
  */
 var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -26,151 +34,75 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style = _ref.style,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "outlined" : _ref$variant,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? "stacked" : _ref$layout,
     onClick = _ref.onClick,
     disabled = _ref.disabled,
+    draggedProp = _ref.dragged,
+    _ref$draggable = _ref.draggable,
+    draggable = _ref$draggable === void 0 ? false : _ref$draggable,
+    onDragStartProp = _ref.onDragStart,
+    onDragEndProp = _ref.onDragEnd,
     props$1 = _objectWithoutProperties(_ref, _excluded);
-  useTheme();
   var classNames = useClassNames(CLASS_NAMES);
-  var themeColorVars = useThemeColorVars(["surface", "surface-container-low", "surface-container-highest", "outline-variant", "on-surface", ["on-surface", OPACITY.thin], ["on-surface", OPACITY.medium], ["on-surface", OPACITY.thick]]);
+  var themeColorVars = useThemeColorVars(["surface", "surface-container-low", "surface-container-highest", "primary-container", "on-primary-container", "outline-variant", "on-surface", ["on-surface", OPACITY.thin], ["on-surface", OPACITY.medium], ["on-surface", OPACITY.thick]]);
+  // Auto-detect drag state via HTML5 events when `draggable` is true.
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    autoDragged = _useState2[0],
+    setAutoDragged = _useState2[1];
+  var isDragged = draggedProp !== null && draggedProp !== void 0 ? draggedProp : autoDragged;
+  var handleDragStart = useCallback(function (event) {
+    if (draggable) setAutoDragged(true);
+    onDragStartProp === null || onDragStartProp === void 0 || onDragStartProp(event);
+  }, [draggable, onDragStartProp]);
+  var handleDragEnd = useCallback(function (event) {
+    if (draggable) setAutoDragged(false);
+    onDragEndProp === null || onDragEndProp === void 0 || onDragEndProp(event);
+  }, [draggable, onDragEndProp]);
   var interactive = !!onClick && !disabled;
-  var styled = props(styles.card["default"], styles.card[variant], interactive && styles.card.interactive, interactive && styles.stateLayer.hover, interactive && styles.stateLayer.focus, interactive && styles.stateLayer.active);
-  return /*#__PURE__*/React.createElement("div", _objectSpread({
+  var handleClick = useCallback(function (event) {
+    if (disabled) return;
+    onClick === null || onClick === void 0 || onClick(event);
+  }, [disabled, onClick]);
+  var styled = props(styles.card["default"], styles.card[layout], styles.card[variant], interactive && styles.card.interactive, disabled && styles.card.disabled,
+  // state-based elevation (only meaningful when interactive or dragged)
+  interactive && variant === "outlined" && styles.elevationState.outlinedHover, isDragged && variant === "outlined" && styles.elevationState.outlinedDragged, interactive && variant === "elevated" && styles.elevationState.elevatedHover, isDragged && variant === "elevated" && styles.elevationState.elevatedDragged, isDragged && variant === "filled" && styles.elevationState.filledDragged,
+  // state layer
+  interactive && !isDragged && styles.stateLayer.hover, interactive && !isDragged && styles.stateLayer.focus, interactive && !isDragged && styles.stateLayer.press);
+  return /*#__PURE__*/React.createElement(CardContext.Provider, {
+    value: {
+      layout: layout,
+      disabled: disabled
+    }
+  }, /*#__PURE__*/React.createElement("div", _objectSpread({
     ref: ref,
     className: stringify(classNames.card, className, styled.className),
     style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styled.style), style), themeColorVars), {}, {
       "--color-state-layer-hover": "color-mix(in srgb, var(--color-on-surface) 8%, transparent)",
       "--color-state-layer-focus": "color-mix(in srgb, var(--color-on-surface) 12%, transparent)",
       "--color-state-layer-press": "color-mix(in srgb, var(--color-on-surface) 12%, transparent)"
+    }, isDragged && {
+      "--card-state-layer": "color-mix(in srgb, var(--color-on-surface) 16%, transparent)"
     }),
-    onClick: onClick,
+    onClick: handleClick,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
     tabIndex: interactive ? 0 : undefined,
     role: interactive ? "button" : undefined,
-    "aria-disabled": disabled
-  }, props$1), children);
-});
-/**
- * @zh 卡片头部，包含字母头像、标题、副标题和可选的操作区
- * @en Card header with monogram, title, subhead, and optional action area
- */
-var CardHeader = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var className = _ref2.className,
-    style = _ref2.style,
-    children = _ref2.children,
-    action = _ref2.action,
-    monogram = _ref2.monogram,
-    monogramText = _ref2.monogramText,
-    title = _ref2.title,
-    subhead = _ref2.subhead;
-  var classNames = useClassNames(CLASS_NAMES);
-  var headerStyled = props(styles.header["default"]);
-  var contentStyled = props(styles.headerContent["default"]);
-  var textStyled = props(styles.headerText["default"]);
-  var titleStyled = props(styles.headerTitle["default"]);
-  var subheadStyled = props(styles.headerSubhead["default"]);
-  if (children) {
-    return /*#__PURE__*/React.createElement("div", {
-      ref: ref,
-      className: stringify(classNames.header, className, headerStyled.className),
-      style: _objectSpread(_objectSpread({}, headerStyled.style), style)
-    }, children);
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: stringify(classNames.header, className, headerStyled.className),
-    style: _objectSpread(_objectSpread({}, headerStyled.style), style)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: stringify(classNames.headerContent, contentStyled.className),
-    style: contentStyled.style
-  }, (monogram || monogramText) && (/*#__PURE__*/React.createElement("div", {
-    className: classNames.headerMonogram
-  }, monogram ? (/*#__PURE__*/React.createElement("img", {
-    alt: "",
-    src: monogram,
-    style: {
-      width: "100%",
-      height: "100%",
-      display: "block"
-    }
-  })) : monogramText)), /*#__PURE__*/React.createElement("div", {
-    className: stringify(classNames.headerText, textStyled.className),
-    style: textStyled.style
-  }, title && (/*#__PURE__*/React.createElement("div", {
-    className: stringify(classNames.headerTitle, titleStyled.className),
-    style: titleStyled.style
-  }, title)), subhead && (/*#__PURE__*/React.createElement("div", {
-    className: stringify(classNames.headerSubhead, subheadStyled.className),
-    style: subheadStyled.style
-  }, subhead)))), action && /*#__PURE__*/React.createElement("div", {
-    className: classNames.headerAction
-  }, action));
-});
-/**
- * @zh 卡片媒体区，用于展示图片或自定义内容
- * @en Card media area for displaying images or custom content
- */
-var CardMedia = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var className = _ref3.className,
-    style = _ref3.style,
-    src = _ref3.src,
-    alt = _ref3.alt,
-    children = _ref3.children,
-    imgProps = _objectWithoutProperties(_ref3, _excluded2);
-  var classNames = useClassNames(CLASS_NAMES);
-  var mediaStyled = props(styles.media["default"]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: stringify(classNames.media, className, mediaStyled.className),
-    style: _objectSpread(_objectSpread({}, mediaStyled.style), style)
-  }, children || src && (/*#__PURE__*/React.createElement("img", _objectSpread(_objectSpread({
-    alt: alt,
-    src: src
-  }, imgProps), {}, {
-    style: {
-      position: "absolute",
-      inset: 0,
-      width: "100%",
-      height: "100%",
-      objectFit: "cover"
-    }
-  }))));
-});
-/**
- * @zh 卡片内容区，用于展示文本内容
- * @en Card content area for displaying text content
- */
-var CardContent = /*#__PURE__*/forwardRef(function (_ref4, ref) {
-  var className = _ref4.className,
-    style = _ref4.style,
-    children = _ref4.children;
-  var classNames = useClassNames(CLASS_NAMES);
-  var contentStyled = props(styles.content["default"]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: stringify(classNames.content, className, contentStyled.className),
-    style: _objectSpread(_objectSpread({}, contentStyled.style), style)
-  }, children);
-});
-/**
- * @zh 卡片操作区，通常包含按钮等交互元素
- * @en Card actions area, typically containing buttons and other interactive elements
- */
-var CardActions = /*#__PURE__*/forwardRef(function (_ref5, ref) {
-  var className = _ref5.className,
-    style = _ref5.style,
-    children = _ref5.children;
-  var classNames = useClassNames(CLASS_NAMES);
-  var actionsStyled = props(styles.actions["default"]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: stringify(classNames.actions, className, actionsStyled.className),
-    style: _objectSpread(_objectSpread({}, actionsStyled.style), style)
-  }, children);
+    "aria-disabled": disabled,
+    draggable: draggable || undefined
+  }, props$1), children));
 });
 var _Card = Object.assign(Card, {
   Header: CardHeader,
   Media: CardMedia,
   Content: CardContent,
+  Headline: CardHeadline,
+  Title: CardTitle,
+  Subhead: CardSubhead,
+  Body: CardBody,
   Actions: CardActions
 });
 
-export { Card, CardActions, CardContent, CardHeader, CardMedia, _Card as default };
+export { Card, CardActions, CardBody, CardContent, CardHeader, CardHeadline, CardMedia, CardSubhead, CardTitle, _Card as default };

package/dist/components/card/content.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var className = require('@aiszlab/relax/class-name');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var context = require('./context.cjs');
+var styles = require('./styles.cjs');
+
+/**
+ * @zh 卡片内容区,用于展示结构化文本(padding 16, gap 32)。
+ * 推荐组合:Headline(Title + Subhead) + Body + Actions。
+ *
+ * @en Card content area for displaying structured text (padding 16, gap 32).
+ * Recommended composition: Headline (Title + Subhead) + Body + Actions.
+ */
+var CardContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className$1 = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var contentStyled = stylex.props(styles.default.content["default"]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: className.stringify(classNames.content, className$1, contentStyled.className),
+    style: _objectSpread(_objectSpread({}, contentStyled.style), style)
+  }, children);
+});
+
+exports.default = CardContent;

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

@@ -0,0 +1,33 @@
+import type { ReactNode, CSSProperties } from "react";
+import React from "react";
+/**
+ * @zh 卡片内容区属性
+ * @en Card content props
+ */
+interface CardContentProps {
+    /**
+     * @zh 自定义类名
+     * @en Custom class name
+     */
+    className?: string;
+    /**
+     * @zh 自定义样式
+     * @en Custom style
+     */
+    style?: CSSProperties;
+    /**
+     * @zh 内容
+     * @en Content
+     */
+    children?: ReactNode;
+}
+/**
+ * @zh 卡片内容区,用于展示结构化文本(padding 16, gap 32)。
+ * 推荐组合:Headline(Title + Subhead) + Body + Actions。
+ *
+ * @en Card content area for displaying structured text (padding 16, gap 32).
+ * Recommended composition: Headline (Title + Subhead) + Body + Actions.
+ */
+declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+export default CardContent;
+export type { CardContentProps };

package/dist/components/card/content.mjs

@@ -0,0 +1,29 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import React, { forwardRef } from 'react';
+import { stringify } from '@aiszlab/relax/class-name';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { CLASS_NAMES } from './context.mjs';
+import styles from './styles.mjs';
+
+/**
+ * @zh 卡片内容区,用于展示结构化文本(padding 16, gap 32)。
+ * 推荐组合:Headline(Title + Subhead) + Body + Actions。
+ *
+ * @en Card content area for displaying structured text (padding 16, gap 32).
+ * Recommended composition: Headline (Title + Subhead) + Body + Actions.
+ */
+var CardContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var classNames = useClassNames(CLASS_NAMES);
+  var contentStyled = props(styles.content["default"]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: stringify(classNames.content, className, contentStyled.className),
+    style: _objectSpread(_objectSpread({}, contentStyled.style), style)
+  }, children);
+});
+
+export { CardContent as default };

package/dist/components/card/context.cjs

@@ -1,15 +1,20 @@
 'use strict';
 
+var React = require('react');
+
 /**
  * @description
  * class names
  */
 var CLASS_NAMES = {
   card: "card",
-  stateLayer: "card__state-layer",
   header: "card__header",
   media: "card__media",
   content: "card__content",
+  headline: "card__headline",
+  title: "card__title",
+  subhead: "card__subhead",
+  body: "card__body",
   actions: "card__actions",
   headerContent: "card__header-content",
   headerText: "card__header-text",
@@ -18,5 +23,13 @@ var CLASS_NAMES = {
   headerMonogram: "card__header-monogram",
   headerAction: "card__header-action"
 };
+var CardContext = /*#__PURE__*/React.createContext({
+  layout: "stacked"
+});
+var useCardContext = function useCardContext() {
+  return React.useContext(CardContext);
+};
 
 exports.CLASS_NAMES = CLASS_NAMES;
+exports.CardContext = CardContext;
+exports.useCardContext = useCardContext;

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

@@ -1,13 +1,17 @@
+import type { CardLayout } from "../../types/card";
 /**
  * @description
  * class names
  */
 declare const CLASS_NAMES: {
     card: string;
-    stateLayer: string;
     header: string;
     media: string;
     content: string;
+    headline: string;
+    title: string;
+    subhead: string;
+    body: string;
     actions: string;
     headerContent: string;
     headerText: string;
@@ -17,3 +21,13 @@ declare const CLASS_NAMES: {
     headerAction: string;
 };
 export { CLASS_NAMES };
+/**
+ * @zh 卡片内部 context,用于在嵌套子组件中传递 layout 与 disabled 状态
+ * @en Card internal context, used to propagate layout and disabled state to nested subcomponents
+ */
+export interface CardContextValue {
+    layout: CardLayout;
+    disabled?: boolean;
+}
+export declare const CardContext: import("react").Context<CardContextValue>;
+export declare const useCardContext: () => CardContextValue;

package/dist/components/card/context.mjs

@@ -1,13 +1,18 @@
+import { createContext, useContext } from 'react';
+
 /**
  * @description
  * class names
  */
 var CLASS_NAMES = {
   card: "card",
-  stateLayer: "card__state-layer",
   header: "card__header",
   media: "card__media",
   content: "card__content",
+  headline: "card__headline",
+  title: "card__title",
+  subhead: "card__subhead",
+  body: "card__body",
   actions: "card__actions",
   headerContent: "card__header-content",
   headerText: "card__header-text",
@@ -16,5 +21,11 @@ var CLASS_NAMES = {
   headerMonogram: "card__header-monogram",
   headerAction: "card__header-action"
 };
+var CardContext = /*#__PURE__*/createContext({
+  layout: "stacked"
+});
+var useCardContext = function useCardContext() {
+  return useContext(CardContext);
+};
 
-export { CLASS_NAMES };
+export { CLASS_NAMES, CardContext, useCardContext };

package/dist/components/card/header.cjs

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var React = require('react');
+var className = require('@aiszlab/relax/class-name');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var context = require('./context.cjs');
+var styles = require('./styles.cjs');
+var iconButton = require('../icon-button/icon-button.cjs');
+var moreVert = require('../icon/icons/navigation/more-vert.cjs');
+
+/**
+ * @zh 卡片头部,包含字母头像、标题、副标题和可选的操作区。Horizontal 布局下自动应用
+ * 全 16px padding,Stacked 布局下应用 12/4/12/16 padding。
+ *
+ * @en Card header with monogram, title, subhead, and optional action area.
+ * Applies 16px padding on all sides in horizontal layout, and 12/4/12/16 in stacked.
+ */
+var CardHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className$1 = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    monogram = _ref.monogram,
+    monogramText = _ref.monogramText,
+    title = _ref.title,
+    subhead = _ref.subhead;
+  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
+  var _useCardContext = context.useCardContext(),
+    layout = _useCardContext.layout;
+  var headerStyled = stylex.props(styles.default.header["default"], styles.default.header[layout]);
+  var contentStyled = stylex.props(styles.default.headerContent["default"]);
+  var textStyled = stylex.props(styles.default.headerText["default"]);
+  var titleStyled = stylex.props(styles.default.headerTitle["default"]);
+  var subheadStyled = stylex.props(styles.default.headerSubhead["default"]);
+  stylex.props(styles.default.headerAction["default"]);
+  if (children) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      className: className.stringify(classNames.header, className$1, headerStyled.className),
+      style: _objectSpread(_objectSpread({}, headerStyled.style), style)
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: className.stringify(classNames.header, className$1, headerStyled.className),
+    style: _objectSpread(_objectSpread({}, headerStyled.style), style)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.headerContent, contentStyled.className),
+    style: contentStyled.style
+  }, (monogram || monogramText) && (/*#__PURE__*/React.createElement("div", {
+    className: classNames.headerMonogram
+  }, monogram ? (/*#__PURE__*/React.createElement("img", {
+    alt: "",
+    src: monogram,
+    style: {
+      width: "100%",
+      height: "100%",
+      display: "block"
+    }
+  })) : monogramText)), /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.headerText, textStyled.className),
+    style: textStyled.style
+  }, title && (/*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.headerTitle, titleStyled.className),
+    style: titleStyled.style
+  }, title)), subhead && (/*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.headerSubhead, subheadStyled.className),
+    style: subheadStyled.style
+  }, subhead)))), /*#__PURE__*/React.createElement(iconButton.default, {
+    variant: "text"
+  }, /*#__PURE__*/React.createElement(moreVert.default, {
+    size: "large"
+  })));
+});
+
+exports.default = CardHeader;

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

@@ -0,0 +1,58 @@
+import type { ReactNode, CSSProperties } from "react";
+import React from "react";
+/**
+ * @zh 卡片头部属性
+ * @en Card header props
+ */
+interface CardHeaderProps {
+    /**
+     * @zh 自定义类名
+     * @en Custom class name
+     */
+    className?: string;
+    /**
+     * @zh 自定义样式
+     * @en Custom style
+     */
+    style?: CSSProperties;
+    /**
+     * @zh 头部内容
+     * @en Header content
+     */
+    children?: ReactNode;
+    /**
+     * @zh 尾部操作区,例如 IconButton(会自动包 48x48 容器)
+     * @en Trailing action area, e.g. IconButton (auto-wrapped in 48x48 container)
+     */
+    action?: ReactNode;
+    /**
+     * @zh 头像/字母缩写图片地址
+     * @en Monogram image source
+     */
+    monogram?: string;
+    /**
+     * @zh 字母缩写文本
+     * @en Monogram text (e.g. initials)
+     */
+    monogramText?: string;
+    /**
+     * @zh 标题
+     * @en Title
+     */
+    title?: ReactNode;
+    /**
+     * @zh 副标题
+     * @en Subhead
+     */
+    subhead?: ReactNode;
+}
+/**
+ * @zh 卡片头部,包含字母头像、标题、副标题和可选的操作区。Horizontal 布局下自动应用
+ * 全 16px padding,Stacked 布局下应用 12/4/12/16 padding。
+ *
+ * @en Card header with monogram, title, subhead, and optional action area.
+ * Applies 16px padding on all sides in horizontal layout, and 12/4/12/16 in stacked.
+ */
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default CardHeader;
+export type { CardHeaderProps };

package/dist/components/card/header.mjs

@@ -0,0 +1,75 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import React, { forwardRef } from 'react';
+import { stringify } from '@aiszlab/relax/class-name';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { CLASS_NAMES, useCardContext } from './context.mjs';
+import styles from './styles.mjs';
+import IconButton from '../icon-button/icon-button.mjs';
+import IconMoreVert from '../icon/icons/navigation/more-vert.mjs';
+
+/**
+ * @zh 卡片头部,包含字母头像、标题、副标题和可选的操作区。Horizontal 布局下自动应用
+ * 全 16px padding,Stacked 布局下应用 12/4/12/16 padding。
+ *
+ * @en Card header with monogram, title, subhead, and optional action area.
+ * Applies 16px padding on all sides in horizontal layout, and 12/4/12/16 in stacked.
+ */
+var CardHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    monogram = _ref.monogram,
+    monogramText = _ref.monogramText,
+    title = _ref.title,
+    subhead = _ref.subhead;
+  var classNames = useClassNames(CLASS_NAMES);
+  var _useCardContext = useCardContext(),
+    layout = _useCardContext.layout;
+  var headerStyled = props(styles.header["default"], styles.header[layout]);
+  var contentStyled = props(styles.headerContent["default"]);
+  var textStyled = props(styles.headerText["default"]);
+  var titleStyled = props(styles.headerTitle["default"]);
+  var subheadStyled = props(styles.headerSubhead["default"]);
+  props(styles.headerAction["default"]);
+  if (children) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      className: stringify(classNames.header, className, headerStyled.className),
+      style: _objectSpread(_objectSpread({}, headerStyled.style), style)
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: stringify(classNames.header, className, headerStyled.className),
+    style: _objectSpread(_objectSpread({}, headerStyled.style), style)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.headerContent, contentStyled.className),
+    style: contentStyled.style
+  }, (monogram || monogramText) && (/*#__PURE__*/React.createElement("div", {
+    className: classNames.headerMonogram
+  }, monogram ? (/*#__PURE__*/React.createElement("img", {
+    alt: "",
+    src: monogram,
+    style: {
+      width: "100%",
+      height: "100%",
+      display: "block"
+    }
+  })) : monogramText)), /*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.headerText, textStyled.className),
+    style: textStyled.style
+  }, title && (/*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.headerTitle, titleStyled.className),
+    style: titleStyled.style
+  }, title)), subhead && (/*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.headerSubhead, subheadStyled.className),
+    style: subheadStyled.style
+  }, subhead)))), /*#__PURE__*/React.createElement(IconButton, {
+    variant: "text"
+  }, /*#__PURE__*/React.createElement(IconMoreVert, {
+    size: "large"
+  })));
+});
+
+export { CardHeader as default };