musae 1.2.0 → 1.3.1-beta.1

package/dist/components/card/actions.cjs

@@ -0,0 +1,31 @@
+'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 卡片操作区,通常包含按钮等交互元素(flex, justify-end, gap 8px)。
+ * @en Card actions area, typically containing buttons and other interactive
+ * elements (flex, justify-end, gap 8px).
+ */
+var CardActions = /*#__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 actionsStyled = stylex.props(styles.default.actions["default"]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: className.stringify(classNames.actions, className$1, actionsStyled.className),
+    style: _objectSpread(_objectSpread({}, actionsStyled.style), style)
+  }, children);
+});
+
+exports.default = CardActions;

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

@@ -0,0 +1,31 @@
+import type { ReactNode, CSSProperties } from "react";
+import React from "react";
+/**
+ * @zh 卡片操作区属性
+ * @en Card actions props
+ */
+interface CardActionsProps {
+    /**
+     * @zh 自定义类名
+     * @en Custom class name
+     */
+    className?: string;
+    /**
+     * @zh 自定义样式
+     * @en Custom style
+     */
+    style?: CSSProperties;
+    /**
+     * @zh 操作按钮等
+     * @en Action buttons etc.
+     */
+    children?: ReactNode;
+}
+/**
+ * @zh 卡片操作区,通常包含按钮等交互元素(flex, justify-end, gap 8px)。
+ * @en Card actions area, typically containing buttons and other interactive
+ * elements (flex, justify-end, gap 8px).
+ */
+declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
+export default CardActions;
+export type { CardActionsProps };

package/dist/components/card/actions.mjs

@@ -0,0 +1,27 @@
+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 卡片操作区,通常包含按钮等交互元素(flex, justify-end, gap 8px)。
+ * @en Card actions area, typically containing buttons and other interactive
+ * elements (flex, justify-end, gap 8px).
+ */
+var CardActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.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);
+});
+
+export { CardActions as default };

package/dist/components/card/body.cjs

@@ -0,0 +1,30 @@
+'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 卡片 Body 文本(14px body/medium)。
+ * @en Card body text (14px body/medium).
+ */
+var CardBody = /*#__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 bodyStyled = stylex.props(styles.default.body["default"]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: className.stringify(classNames.body, className$1, bodyStyled.className),
+    style: _objectSpread(_objectSpread({}, bodyStyled.style), style)
+  }, children);
+});
+
+exports.default = CardBody;

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

@@ -0,0 +1,18 @@
+import type { ReactNode, CSSProperties } from "react";
+import React from "react";
+/**
+ * @zh 卡片 Body 文本(14px body/medium,on-surface-variant)
+ * @en Card body text (14px body/medium, on-surface-variant)
+ */
+interface CardBodyProps {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/**
+ * @zh 卡片 Body 文本(14px body/medium)。
+ * @en Card body text (14px body/medium).
+ */
+declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+export default CardBody;
+export type { CardBodyProps };

package/dist/components/card/body.mjs

@@ -0,0 +1,26 @@
+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 卡片 Body 文本(14px body/medium)。
+ * @en Card body text (14px body/medium).
+ */
+var CardBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var classNames = useClassNames(CLASS_NAMES);
+  var bodyStyled = props(styles.body["default"]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: stringify(classNames.body, className, bodyStyled.className),
+    style: _objectSpread(_objectSpread({}, bodyStyled.style), style)
+  }, children);
+});
+
+export { CardBody as default };

package/dist/components/card/card.cjs

@@ -3,26 +3,34 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 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 tokens_stylex = require('../theme/tokens.stylex.cjs');
-var hooks = require('../theme/hooks.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 var context = require('./context.cjs');
 var styles = require('./styles.cjs');
+var header = require('./header.cjs');
+var media = require('./media.cjs');
+var content = require('./content.cjs');
+var headline = require('./headline.cjs');
+var title = require('./title.cjs');
+var subhead = require('./subhead.cjs');
+var body = require('./body.cjs');
+var actions = require('./actions.cjs');
 
-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__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -30,156 +38,84 @@ var Card = /*#__PURE__*/React.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 = _objectWithoutProperties(_ref, _excluded);
-  hooks.useTheme();
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var themeColorVars = useThemeColorVars.useThemeColorVars(["surface", "surface-container-low", "surface-container-highest", "outline-variant", "on-surface", ["on-surface", tokens_stylex.OPACITY.thin], ["on-surface", tokens_stylex.OPACITY.medium], ["on-surface", tokens_stylex.OPACITY.thick]]);
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["surface", "surface-container-low", "surface-container-highest", "primary-container", "on-primary-container", "outline-variant", "on-surface", ["on-surface", tokens_stylex.OPACITY.thin], ["on-surface", tokens_stylex.OPACITY.medium], ["on-surface", tokens_stylex.OPACITY.thick]]);
+  // Auto-detect drag state via HTML5 events when `draggable` is true.
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    autoDragged = _useState2[0],
+    setAutoDragged = _useState2[1];
+  var isDragged = draggedProp !== null && draggedProp !== void 0 ? draggedProp : autoDragged;
+  var handleDragStart = React.useCallback(function (event) {
+    if (draggable) setAutoDragged(true);
+    onDragStartProp === null || onDragStartProp === void 0 || onDragStartProp(event);
+  }, [draggable, onDragStartProp]);
+  var handleDragEnd = React.useCallback(function (event) {
+    if (draggable) setAutoDragged(false);
+    onDragEndProp === null || onDragEndProp === void 0 || onDragEndProp(event);
+  }, [draggable, onDragEndProp]);
   var interactive = !!onClick && !disabled;
-  var styled = stylex.props(styles.default.card["default"], styles.default.card[variant], interactive && styles.default.card.interactive, interactive && styles.default.stateLayer.hover, interactive && styles.default.stateLayer.focus, interactive && styles.default.stateLayer.active);
-  return /*#__PURE__*/React.createElement("div", _objectSpread({
+  var handleClick = React.useCallback(function (event) {
+    if (disabled) return;
+    onClick === null || onClick === void 0 || onClick(event);
+  }, [disabled, onClick]);
+  var styled = stylex.props(styles.default.card["default"], styles.default.card[layout], styles.default.card[variant], interactive && styles.default.card.interactive, disabled && styles.default.card.disabled,
+  // state-based elevation (only meaningful when interactive or dragged)
+  interactive && variant === "outlined" && styles.default.elevationState.outlinedHover, isDragged && variant === "outlined" && styles.default.elevationState.outlinedDragged, interactive && variant === "elevated" && styles.default.elevationState.elevatedHover, isDragged && variant === "elevated" && styles.default.elevationState.elevatedDragged, isDragged && variant === "filled" && styles.default.elevationState.filledDragged,
+  // state layer
+  interactive && !isDragged && styles.default.stateLayer.hover, interactive && !isDragged && styles.default.stateLayer.focus, interactive && !isDragged && styles.default.stateLayer.press);
+  return /*#__PURE__*/React.createElement(context.CardContext.Provider, {
+    value: {
+      layout: layout,
+      disabled: disabled
+    }
+  }, /*#__PURE__*/React.createElement("div", _objectSpread({
     ref: ref,
     className: className.stringify(classNames.card, className$1, 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), children);
-});
-/**
- * @zh 卡片头部，包含字母头像、标题、副标题和可选的操作区
- * @en Card header with monogram, title, subhead, and optional action area
- */
-var CardHeader = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var className$1 = _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.useClassNames(context.CLASS_NAMES);
-  var headerStyled = stylex.props(styles.default.header["default"]);
-  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"]);
-  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)))), action && /*#__PURE__*/React.createElement("div", {
-    className: classNames.headerAction
-  }, action));
-});
-/**
- * @zh 卡片媒体区，用于展示图片或自定义内容
- * @en Card media area for displaying images or custom content
- */
-var CardMedia = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
-  var className$1 = _ref3.className,
-    style = _ref3.style,
-    src = _ref3.src,
-    alt = _ref3.alt,
-    children = _ref3.children,
-    imgProps = _objectWithoutProperties(_ref3, _excluded2);
-  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var mediaStyled = stylex.props(styles.default.media["default"]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: className.stringify(classNames.media, className$1, 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__*/React.forwardRef(function (_ref4, ref) {
-  var className$1 = _ref4.className,
-    style = _ref4.style,
-    children = _ref4.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);
-});
-/**
- * @zh 卡片操作区，通常包含按钮等交互元素
- * @en Card actions area, typically containing buttons and other interactive elements
- */
-var CardActions = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
-  var className$1 = _ref5.className,
-    style = _ref5.style,
-    children = _ref5.children;
-  var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var actionsStyled = stylex.props(styles.default.actions["default"]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: className.stringify(classNames.actions, className$1, actionsStyled.className),
-    style: _objectSpread(_objectSpread({}, actionsStyled.style), style)
-  }, children);
+    "aria-disabled": disabled,
+    draggable: draggable || undefined
+  }, props), children));
 });
 var _Card = Object.assign(Card, {
-  Header: CardHeader,
-  Media: CardMedia,
-  Content: CardContent,
-  Actions: CardActions
+  Header: header.default,
+  Media: media.default,
+  Content: content.default,
+  Headline: headline.default,
+  Title: title.default,
+  Subhead: subhead.default,
+  Body: body.default,
+  Actions: actions.default
 });
 
+exports.CardHeader = header.default;
+exports.CardMedia = media.default;
+exports.CardContent = content.default;
+exports.CardHeadline = headline.default;
+exports.CardTitle = title.default;
+exports.CardSubhead = subhead.default;
+exports.CardBody = body.default;
+exports.CardActions = actions.default;
 exports.Card = Card;
-exports.CardActions = CardActions;
-exports.CardContent = CardContent;
-exports.CardHeader = CardHeader;
-exports.CardMedia = CardMedia;
 exports.default = _Card;

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

@@ -1,159 +1,32 @@
 import type { CardProps } from "../../types/card";
-import type { ReactNode, CSSProperties, ImgHTMLAttributes } 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 尾部操作区，例如图标按钮
-     * @en Trailing action area, e.g. icon button
-     */
-    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 卡片媒体区属性
- * @en Card media props
- */
-interface CardMediaProps extends ImgHTMLAttributes<HTMLImageElement> {
-    /**
-     * @zh 自定义类名
-     * @en Custom class name
-     */
-    className?: string;
-    /**
-     * @zh 自定义样式
-     * @en Custom style
-     */
-    style?: CSSProperties;
-    /**
-     * @zh 图片地址
-     * @en Image source
-     */
-    src?: string;
-    /**
-     * @zh 图片替代文本
-     * @en Image alt text
-     */
-    alt?: string;
-    /**
-     * @zh 自定义内容（覆盖默认图片渲染）
-     * @en Custom content (overrides default image)
-     */
-    children?: ReactNode;
-}
-/**
- * @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 卡片操作区属性
- * @en Card actions props
- */
-interface CardActionsProps {
-    /**
-     * @zh 自定义类名
-     * @en Custom class name
-     */
-    className?: string;
-    /**
-     * @zh 自定义样式
-     * @en Custom style
-     */
-    style?: CSSProperties;
-    /**
-     * @zh 操作按钮等
-     * @en Action buttons etc.
-     */
-    children?: ReactNode;
-}
-/**
- * @zh 卡片组件，用于在一个容器中展示内容和操作。卡片支持多种样式变体（描边、浮起、填充），
- * 并在悬停、聚焦、按下时展示交互状态层。
+import CardHeader from "./header";
+import CardMedia from "./media";
+import CardContent from "./content";
+import CardHeadline from "./headline";
+import CardTitle from "./title";
+import CardSubhead from "./subhead";
+import CardBody from "./body";
+import CardActions from "./actions";
+/**
+ * @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.
  */
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * @zh 卡片头部，包含字母头像、标题、副标题和可选的操作区
- * @en Card header with monogram, title, subhead, and optional action area
- */
-declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * @zh 卡片媒体区，用于展示图片或自定义内容
- * @en Card media area for displaying images or custom content
- */
-declare const CardMedia: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * @zh 卡片内容区，用于展示文本内容
- * @en Card content area for displaying text content
- */
-declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * @zh 卡片操作区，通常包含按钮等交互元素
- * @en Card actions area, typically containing buttons and other interactive elements
- */
-declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
 declare const _Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
-    Header: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
-    Media: React.ForwardRefExoticComponent<CardMediaProps & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
-    Actions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<import("./header").CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Media: React.ForwardRefExoticComponent<import("./media").CardMediaProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<import("./content").CardContentProps & React.RefAttributes<HTMLDivElement>>;
+    Headline: React.ForwardRefExoticComponent<import("./headline").CardHeadlineProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<import("./title").CardTitleProps & React.RefAttributes<HTMLDivElement>>;
+    Subhead: React.ForwardRefExoticComponent<import("./subhead").CardSubheadProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./body").CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Actions: React.ForwardRefExoticComponent<import("./actions").CardActionsProps & React.RefAttributes<HTMLDivElement>>;
 };
 export default _Card;
-export { Card, CardHeader, CardMedia, CardContent, CardActions };
+export { Card, CardHeader, CardMedia, CardContent, CardHeadline, CardTitle, CardSubhead, CardBody, CardActions, };