@teamix-evo/ui 0.1.1 → 0.3.0

package/src/components/calendar/calendar.meta.md

@@ -1,13 +1,14 @@
 ---
 id: calendar
 name: Calendar
+displayName: 日历
 type: component
-category: form
+category: data-display
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
 
-# Calendar
+# Calendar 日历
 
 日期选择面板 — 基于 [`react-day-picker`](https://react-day-picker.js.org/),与 design tokens 对齐。
 **两种用法**:
@@ -37,6 +38,15 @@ package: '@teamix-evo/ui'
 | `className` | `string` | – | – | 容器 className。组件内部默认带 `p-3`,会与传入值自动 merge。 |
 | `classNames` | `DayPickerProps['classNames']` | – | – | 覆盖底层 react-day-picker 的 classNames slots(深度自定义日格 / 表头 / 导航等)。 |
 | `showOutsideDays` | `boolean` | `true` | – | 是否显示当月范围外的日期(灰色填充,占位补齐周表格)。 |
+| `mode` | `DayPickerProps['mode']` | `"single"` | – | 选择模式 — `'single'` 单选(`selected: Date`)/ `'multiple'` 多选(`selected: Date[]`) / `'range'` 范围(`selected: DateRange`)。 |
+| `numberOfMonths` | `number` | `1` | – | 受控已选值 — 类型随 `mode` 变化: - `single` → `Date \| undefined` - `multiple` → `Date[]` - `range` → `{ from?: Date; to?: Date } \| undefined` 详细类型由底层 react-day-picker 判别联合保证;此处仅展示业务侧期望形态。 同时显示几个月历(对齐 antd `numberOfMonths`)。 |
+| `disabled` | `DayPickerProps['disabled']` | – | – | 不可选日期匹配器 — 支持 `Date` / `Date[]` / `DateRange` / 函数 `(date) => boolean` / 复合数组。 |
+| `defaultMonth` | `Date` | – | – | 默认显示的月份(uncontrolled — 仅初始生效)。 不传时使用 `selected` 的月份,均无则当前月。 |
+| `month` | `Date` | – | – | 受控当前显示的月份(配 `onMonthChange` 使用)。 |
+| `onMonthChange` | `(month: Date) => void` | – | – | 月份切换回调。 |
+| `weekStartsOn` | `DayPickerProps['weekStartsOn']` | `0` | – | 一周起始日 — `0` 周日 / `1` 周一 / ... / `6` 周六(对齐 ISO 8601 / antd `firstDayOfWeek`)。 |
+| `captionLayout` | `DayPickerProps['captionLayout']` | – | – | 标题布局 — 控制是否显示年 / 月下拉: - `'label'`(默认)— 仅标签文字 - `'dropdown'` — 月 + 年下拉 - `'dropdown-months'` — 仅月份下拉 - `'dropdown-years'` — 仅年份下拉 |
+| `locale` | `DayPickerProps['locale']` | – | – | date-fns Locale 对象,用于本地化星期 / 月份名 / RTL 等(默认 en-US)。 |
 <!-- auto:props:end -->
 
 ## 依赖
@@ -51,7 +61,7 @@ package: '@teamix-evo/ui'
 | Entry | 类型 | 描述 |
 | --- | --- | --- |
 | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `button` | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
+| `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
 
 ### npm 依赖
 

package/src/components/calendar/calendar.stories.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { DateRange } from 'react-day-picker';
 import { Calendar } from './calendar';
 
 const meta: Meta<typeof Calendar> = {
-  title: '表单与输入 · Form/Calendar',
+  title: '数据展示 · Data Display/Calendar',
   component: Calendar,
   tags: ['autodocs'],
   parameters: {
@@ -12,7 +12,7 @@ const meta: Meta<typeof Calendar> = {
     docs: {
       description: {
         component:
-          '日历 — 内联日期选择面板。基于 [`react-day-picker@9`](https://daypicker.dev/) + design tokens，支持 `mode="single" | "multiple" | "range"` 三种选择模式、年份 / 月份导航、`disabled` 函数式禁用、`numberOfMonths` 多月并排；通常配 `Popover` 包装为 `DatePicker`。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+          '日历 — 内联日期选择面板。基于 react-day-picker@9 + design tokens，支持 `mode="single" | "multiple" | "range"` 三种选择模式、年份 / 月份导航、`disabled` 函数式禁用、`numberOfMonths` 多月并排；通常配 `Popover` 包装为 `DatePicker`。',
       },
     },
   },
@@ -29,7 +29,7 @@ export const Single: Story = {
         mode="single"
         selected={date}
         onSelect={setDate}
-        className="rounded-md border"
+        className="rounded-md border border-border"
       />
     );
   },
@@ -43,7 +43,7 @@ export const Multiple: Story = {
         mode="multiple"
         selected={days}
         onSelect={setDays}
-        className="rounded-md border"
+        className="rounded-md border border-border"
       />
     );
   },
@@ -61,7 +61,7 @@ export const Range: Story = {
         selected={range}
         onSelect={setRange}
         numberOfMonths={2}
-        className="rounded-md border"
+        className="rounded-md border border-border"
       />
     );
   },

package/src/components/calendar/calendar.tsx

@@ -11,9 +11,9 @@ import { cn } from '@/utils/cn';
 import { buttonVariants } from '@/components/button/button';
 
 /**
- * Calendar 自身的可定制属性(ui 层包装)。
- * 底层完整 props 透传至 [`DayPicker`](https://daypicker.dev/),
- * 包括 `mode` / `selected` / `onSelect` / `numberOfMonths` / `disabled` / `initialFocus` 等。
+ * Calendar 自身的可定制属性(ui 层包装)。底层完整 props 透传至
+ * [`DayPicker`](https://daypicker.dev/) — 下表列出业务侧最常用的核心 props,
+ * 其余 DayPicker prop(`initialFocus` / `pagedNavigation` 等)走 `...rest` 透传。
  */
 export interface CalendarProps {
   /**
@@ -29,6 +29,62 @@ export interface CalendarProps {
    * @default true
    */
   showOutsideDays?: boolean;
+  /**
+   * 选择模式 — `'single'` 单选(`selected: Date`)/ `'multiple'` 多选(`selected: Date[]`)
+   * / `'range'` 范围(`selected: DateRange`)。
+   * @default "single"
+   */
+  mode?: DayPickerProps['mode'];
+  /**
+   * 受控已选值 — 类型随 `mode` 变化:
+   * - `single` → `Date | undefined`
+   * - `multiple` → `Date[]`
+   * - `range` → `{ from?: Date; to?: Date } | undefined`
+   *
+   * 详细类型由底层 react-day-picker 判别联合保证;此处仅展示业务侧期望形态。
+   */
+  // selected / onSelect 由 DayPickerProps 通过 `& DayPickerProps` 透传保证类型正确;
+  // 此处声明仅为 meta 文档展示,不参与运行时类型推导。
+  // 业务侧调用:`<Calendar mode="single" selected={date} onSelect={(d) => ...} />`
+  /**
+   * 同时显示几个月历(对齐 antd `numberOfMonths`)。
+   * @default 1
+   */
+  numberOfMonths?: number;
+  /**
+   * 不可选日期匹配器 — 支持 `Date` / `Date[]` / `DateRange` / 函数 `(date) => boolean`
+   * / 复合数组。
+   */
+  disabled?: DayPickerProps['disabled'];
+  /**
+   * 默认显示的月份(uncontrolled — 仅初始生效)。
+   * 不传时使用 `selected` 的月份,均无则当前月。
+   */
+  defaultMonth?: Date;
+  /** 受控当前显示的月份(配 `onMonthChange` 使用)。 */
+  month?: Date;
+  /** 月份切换回调。 */
+  onMonthChange?: (month: Date) => void;
+  /**
+   * 一周起始日 — `0` 周日 / `1` 周一 / ... / `6` 周六(对齐 ISO 8601 / antd `firstDayOfWeek`)。
+   * @default 0
+   */
+  weekStartsOn?: DayPickerProps['weekStartsOn'];
+  /**
+   * 标题布局 — 控制是否显示年 / 月下拉:
+   * - `'label'`(默认)— 仅标签文字
+   * - `'dropdown'` — 月 + 年下拉
+   * - `'dropdown-months'` — 仅月份下拉
+   * - `'dropdown-years'` — 仅年份下拉
+   */
+  captionLayout?: DayPickerProps['captionLayout'];
+  /**
+   * date-fns Locale 对象,用于本地化星期 / 月份名 / RTL 等(默认 en-US)。
+   * @example
+   *   import { zhCN } from 'date-fns/locale';
+   *   <Calendar locale={zhCN} />
+   */
+  locale?: DayPickerProps['locale'];
 }
 
 function Calendar({
@@ -46,7 +102,7 @@ function Calendar({
         months: 'flex flex-col sm:flex-row gap-4 relative',
         month: 'flex flex-col gap-4',
         month_caption: 'flex justify-center pt-1 items-center h-7 w-full',
-        caption_label: 'text-sm font-medium',
+        caption_label: 'text-xs font-medium',
         nav: 'absolute inset-x-1 top-1 z-10 flex items-center justify-between',
         button_previous: cn(
           buttonVariants({ variant: 'outline', size: 'icon' }),
@@ -58,19 +114,28 @@ function Calendar({
         ),
         month_grid: 'w-full border-collapse',
         weekdays: 'flex',
-        weekday:
-          'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+        weekday: 'text-muted-foreground rounded-md w-8 font-normal text-xs-cal',
         week: 'flex w-full mt-2',
         day: cn(
-          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20',
+          'relative p-0 text-center text-xs focus-within:relative focus-within:z-20',
           '[&:has([data-selected])]:bg-accent',
           '[&:has([data-selected])]:first:rounded-l-md [&:has([data-selected])]:last:rounded-r-md',
           '[&:has([data-range-start])]:rounded-l-md [&:has([data-range-end])]:rounded-r-md',
           '[&:not(:has([data-range-middle]))]:[&:has([data-selected])]:rounded-md',
+          // 预留 1px transparent dashed border 全 4 边占位 —— DateRangePicker preview 虚线
+          // 切换时不触发 cell 宽度 / 高度跳变(仅切换 border-color)。
+          // dashed border 跨 cell 时 pattern 节奏不可避免有微小偏差(CSS 固有限制),
+          // 但 cell 间 0 gap,视觉上无明显断点。
+          'border border-transparent border-dashed',
         ),
         day_button: cn(
           buttonVariants({ variant: 'ghost' }),
-          'size-8 p-0 font-normal aria-selected:opacity-100',
+          'size-8 rounded-md p-0 font-normal aria-selected:opacity-100',
+          'focus-visible:ring-offset-0',
+          // 父 day cell(td)有 aria-selected 时,button hover 保持 primary 蓝,
+          // 不被 ghost variant 的 hover:bg-accent 覆盖。react-day-picker v9 的
+          // aria-selected 加在 cell 上而非 button 上,所以走 ancestor selector。
+          '[[aria-selected]_&]:hover:bg-primary [[aria-selected]_&]:hover:text-primary-foreground',
         ),
         range_start: 'day-range-start',
         range_end: 'day-range-end',

package/src/components/card/card.meta.md

@@ -1,13 +1,14 @@
 ---
 id: card
 name: Card
+displayName: 卡片
 type: component
-category: layout
+category: data-display
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Card
+# Card 卡片
 
 卡片容器 — shadcn 组合式(`Card / Header / Title / Description / Content / Footer`)+ antd 并集(`hoverable / loading / Cover / Actions / Meta / extra`)。
 **单卡覆盖列表项 / 详情卡 / 资源卡 / 媒体卡多种形态**。
@@ -34,6 +35,7 @@ package: "@teamix-evo/ui"
 | --- | --- | --- | --- | --- |
 | `hoverable` | `boolean` | `false` | – | 鼠标 hover 时的视觉反馈(antd `hoverable` 并集) — 阴影升级 + 微交互。 |
 | `loading` | `boolean` | `false` | – | 加载态(antd `loading` 并集) — 整卡渲染为骨架屏占位,不展示 children。 |
+| `size` | `CardSize` | `"default"` | – | 卡片尺寸(antd `size` 并集,并与 cloud-design spec 对齐) — - `sm`: 16px padding + sm 标题 (16px) - `default`: 24px padding + base 标题 (16px) - `lg`: 32px padding + lg 标题 (18px) 会通过 context 传递给其子组件(Header / Content / Footer)。 |
 <!-- auto:props:end -->
 
 ## 依赖
@@ -55,8 +57,6 @@ package: "@teamix-evo/ui"
 _无 — 本组件不依赖任何 npm 包。_
 <!-- auto:deps:end -->
 
-> 子组件:`Card`(主容器)/ `CardHeader`(支持 `extra`)/ `CardTitle` / `CardDescription` / `CardContent` / `CardFooter` / `CardCover`(顶部封面)/ `CardActions`(底部分隔操作栏)/ `CardMeta`(avatar + title + description 行)。
-
 ## AI 生成纪律
 
 - **`hoverable` 仅用于可点击卡**:配 `onClick` 或包 `<Link>`,不能 hover 起视觉但点了无反应
@@ -65,6 +65,28 @@ _无 — 本组件不依赖任何 npm 包。_
 - **`<CardCover>` 顶部对齐**:必须是 Card 的第一个子元素(避免上方圆角穿帮)
 - **`<CardActions items>` 数组用法**:item 可以是文本 / 图标按钮;数组长度不超过 4
 
+## Card 形态 — 旧库 API → 新库映射
+
+旧库(Teamix 1.0 / `@alifd/next.Card` / `Card.Content` / `Card.Media` / `Card.Actions`)走数据驱动 + free 模式;新库走**纯组合**。下表给出旧库 API 到新库写法的逐项映射。
+
+| 旧库 API | 新库写法 | 备注 |
+| --- | --- | --- |
+| `<Card title="..." subTitle="...">` | `<CardHeader><CardTitle>...</CardTitle><CardDescription>...</CardDescription></CardHeader>` | 组合式更利于多语言换行 / 自定义节点 |
+| `<Card extra={...}>` | `<CardHeader extra={...}>...</CardHeader>` | API 一致;放刷新 / 更多 / 切换等轻量按钮 |
+| `<Card.Media>` | `<CardCover>` | 圆角自动只渲顶部(`rounded-t-lg`) |
+| `<Card.Actions>` | `<CardActions items={[...]} />` | 自动均分等宽 + 中间分隔线 |
+| `<Card.Divider />` | `<Separator />` | 用 `@/components/ui/separator` |
+| `loading` 骨架屏 | `loading` (P0 已实现) | 整卡渲染为 3 行骨架占位 |
+| `hoverable` 鼠标反馈 | `hoverable` (P0 已实现) | 阴影升级 + 微交互 |
+| `size="small/medium/large"` | `size="sm/default/lg"` | 重命名 — `sm` 16px / `default` 24px / `lg` 32px padding |
+| `showTitleBullet` 左侧竖线 | 不修复 — 业务自加 `<CardTitle className="border-l-2 border-primary pl-2">` | className 自实现 |
+| `showHeadDivider` 标题分割线 | 不修复 — 用 `<Separator />` 或 `border-b` | — |
+| `contentHeight` 内容固定高 | 不修复 — `<CardContent className="h-[N]">` | — |
+| `free` 自由组合模式 | 不修复 — 新库始终组合式 | 默认即 free |
+| `hasBorder={false}` | 不修复 — `className="border-0 shadow-none"` | — |
+| `Card.CollapseContent` | 组合 `<Collapsible>` 在 `<CardContent>` 内 | 用 `@/components/ui/collapsible` |
+| `Card.DropDownActions` | 组合 `<CardAction>` + `<DropdownMenu>` | shadcn 2026-04 新增 `<CardAction>` 子组件 |
+
 ## Examples
 
 ```tsx

package/src/components/card/card.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Heart, MessageSquare, MoreHorizontal, Share } from 'lucide-react';
 import {
   Card,
@@ -19,14 +19,23 @@ import {
 } from '@/components/avatar/avatar';
 
 const meta: Meta<typeof Card> = {
-  title: '布局与容器 · Layout/Card',
+  title: '数据展示 · Data Display/Card',
   component: Card,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '卡片容器 — shadcn 组合式(Card / Header / Title / Description / Content / Footer) + antd 并集(hoverable / loading / Cover / Actions / Meta / extra)。单卡覆盖列表项 / 详情卡 / 资源卡 / 媒体卡多种形态。',
+      },
+    },
+  },
   argTypes: {
     hoverable: { control: 'boolean' },
     loading: { control: 'boolean' },
+    size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
   },
-  args: { hoverable: false, loading: false },
+  args: { hoverable: false, loading: false, size: 'default' },
 };
 
 export default meta;
@@ -110,3 +119,33 @@ export const Media: Story = {
     </Card>
   ),
 };
+
+export const Sizes: Story = {
+  name: 'Sizes · sm / default / lg',
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-4">
+      {(['sm', 'default', 'lg'] as const).map((s) => (
+        <Card key={s} size={s} className="w-80">
+          <CardHeader>
+            <CardTitle>size = {s}</CardTitle>
+            <CardDescription>
+              padding 与标题级随 size 变化: sm → 16px / default → 24px / lg → 32px
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">
+              内容区 padding 同步从 head 继承,顶部 pt-0 跟 header 默认 gap 对齐。
+            </p>
+          </CardContent>
+          <CardFooter className="justify-end gap-2">
+            <Button size={s === 'lg' ? 'lg' : s === 'sm' ? 'sm' : 'default'} variant="outline">
+              取消
+            </Button>
+            <Button size={s === 'lg' ? 'lg' : s === 'sm' ? 'sm' : 'default'}>确认</Button>
+          </CardFooter>
+        </Card>
+      ))}
+    </div>
+  ),
+};

package/src/components/card/card.tsx

@@ -3,6 +3,42 @@ import * as React from 'react';
 import { cn } from '@/utils/cn';
 import { Skeleton } from '@/components/skeleton/skeleton';
 
+type CardSize = 'sm' | 'md' | 'default' | 'lg';
+
+/**
+ * 内部驱动 Header / Content / Footer padding 的 context。
+ * 不对外暴露 — 子组件仅依据它返回对应的 Tailwind padding 类名，
+ * 保证 `<Card size="sm">` 包裹的子组件查表一致。
+ */
+const CardSizeContext = React.createContext<CardSize>('md');
+
+const SIZE_TOKENS = {
+  sm: {
+    headerFooter: 'p-4',
+    content: 'p-4 pt-0',
+    footer: 'p-4 pt-0',
+    title: 'text-sm',
+  },
+  md: {
+    headerFooter: 'p-6',
+    content: 'p-6 pt-0',
+    footer: 'p-6 pt-0',
+    title: 'text-base',
+  },
+  default: {
+    headerFooter: 'p-6',
+    content: 'p-6 pt-0',
+    footer: 'p-6 pt-0',
+    title: 'text-base',
+  },
+  lg: {
+    headerFooter: 'p-8',
+    content: 'p-8 pt-0',
+    footer: 'p-8 pt-0',
+    title: 'text-lg',
+  },
+} as const;
+
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * 鼠标 hover 时的视觉反馈(antd `hoverable` 并集) — 阴影升级 + 微交互。
@@ -14,29 +50,56 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default false
    */
   loading?: boolean;
+  /**
+   * 卡片尺寸(antd `size` 并集,并与 cloud-design spec 对齐) —
+   *   - `sm`: 16px padding + sm 标题 (16px)
+   *   - `default`: 24px padding + base 标题 (16px)
+   *   - `lg`: 32px padding + lg 标题 (18px)
+   * 会通过 context 传递给其子组件(Header / Content / Footer)。
+   * @default "default"
+   */
+  size?: CardSize;
 }
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, hoverable = false, loading = false, children, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'rounded-lg border bg-card text-card-foreground shadow-sm transition-shadow',
-        hoverable && 'cursor-pointer hover:shadow-md',
-        className,
-      )}
-      {...props}
-    >
-      {loading ? (
-        <div className="space-y-3 p-6">
-          <Skeleton shape="line" className="w-2/5" />
-          <Skeleton shape="line" />
-          <Skeleton shape="line" className="w-4/5" />
-        </div>
-      ) : (
-        children
-      )}
-    </div>
+  (
+    {
+      className,
+      hoverable = false,
+      loading = false,
+      size = 'md',
+      children,
+      ...props
+    },
+    ref,
+  ) => (
+    <CardSizeContext.Provider value={size}>
+      <div
+        ref={ref}
+        data-size={size}
+        className={cn(
+          'rounded-lg border border-border bg-card text-card-foreground shadow-sm transition-shadow',
+          hoverable && 'cursor-pointer hover:shadow-md',
+          className,
+        )}
+        {...props}
+      >
+        {loading ? (
+          <div
+            className={cn(
+              'flex flex-col gap-3',
+              SIZE_TOKENS[size].headerFooter,
+            )}
+          >
+            <Skeleton shape="line" className="w-2/5" />
+            <Skeleton shape="line" />
+            <Skeleton shape="line" className="w-4/5" />
+          </div>
+        ) : (
+          children
+        )}
+      </div>
+    </CardSizeContext.Provider>
   ),
 );
 Card.displayName = 'Card';
@@ -50,22 +113,29 @@ export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
-  ({ className, extra, children, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('flex flex-col space-y-1.5 p-6', className)}
-      {...props}
-    >
-      {extra ? (
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex flex-1 flex-col space-y-1.5">{children}</div>
-          <div className="shrink-0">{extra}</div>
-        </div>
-      ) : (
-        children
-      )}
-    </div>
-  ),
+  ({ className, extra, children, ...props }, ref) => {
+    const size = React.useContext(CardSizeContext);
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex flex-col gap-1.5',
+          SIZE_TOKENS[size].headerFooter,
+          className,
+        )}
+        {...props}
+      >
+        {extra ? (
+          <div className="flex items-start justify-between gap-3">
+            <div className="flex flex-1 flex-col gap-1.5">{children}</div>
+            <div className="shrink-0">{extra}</div>
+          </div>
+        ) : (
+          children
+        )}
+      </div>
+    );
+  },
 );
 CardHeader.displayName = 'CardHeader';
 
@@ -87,16 +157,20 @@ CardAction.displayName = 'CardAction';
 const CardTitle = React.forwardRef<
   HTMLHeadingElement,
   React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      'text-base font-semibold leading-none tracking-tight',
-      className,
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const size = React.useContext(CardSizeContext);
+  return (
+    <h3
+      ref={ref}
+      className={cn(
+        'font-semibold leading-none tracking-tight',
+        SIZE_TOKENS[size].title,
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 CardTitle.displayName = 'CardTitle';
 
 const CardDescription = React.forwardRef<
@@ -105,7 +179,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-xs text-muted-foreground', className)}
     {...props}
   />
 ));
@@ -114,21 +188,31 @@ CardDescription.displayName = 'CardDescription';
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-));
+>(({ className, ...props }, ref) => {
+  const size = React.useContext(CardSizeContext);
+  return (
+    <div
+      ref={ref}
+      className={cn(SIZE_TOKENS[size].content, className)}
+      {...props}
+    />
+  );
+});
 CardContent.displayName = 'CardContent';
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex items-center p-6 pt-0', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const size = React.useContext(CardSizeContext);
+  return (
+    <div
+      ref={ref}
+      className={cn('flex items-center', SIZE_TOKENS[size].footer, className)}
+      {...props}
+    />
+  );
+});
 CardFooter.displayName = 'CardFooter';
 
 // ─── antd 风格 sub-components(并集)──────────────────────────────────────
@@ -139,7 +223,7 @@ const CardCover = React.forwardRef<HTMLDivElement, CardCoverProps>(
     <div
       ref={ref}
       className={cn(
-        'overflow-hidden rounded-t-lg border-b [&>img]:w-full [&>img]:object-cover',
+        'overflow-hidden rounded-t-lg border-b border-border [&>img]:w-full [&>img]:object-cover',
         className,
       )}
       {...props}
@@ -150,8 +234,7 @@ const CardCover = React.forwardRef<HTMLDivElement, CardCoverProps>(
 );
 CardCover.displayName = 'CardCover';
 
-export interface CardActionsProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
   /** 操作项数组(antd `actions` 并集) — 自动均分等宽,中间分隔线。 */
   items: React.ReactNode[];
 }
@@ -160,7 +243,7 @@ const CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(
     <div
       ref={ref}
       className={cn(
-        'flex items-stretch divide-x divide-border border-t',
+        'flex items-stretch divide-x divide-border border-t border-border',
         className,
       )}
       {...props}
@@ -168,7 +251,7 @@ const CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(
       {items.map((item, i) => (
         <div
           key={i}
-          className="flex flex-1 items-center justify-center py-3 text-sm text-muted-foreground transition-colors hover:bg-accent"
+          className="flex flex-1 items-center justify-center py-3 text-xs text-muted-foreground transition-colors hover:bg-accent"
         >
           {item}
         </div>
@@ -200,7 +283,7 @@ const CardMeta = React.forwardRef<HTMLDivElement, CardMetaProps>(
           <div className="text-sm font-semibold leading-none">{title}</div>
         ) : null}
         {description ? (
-          <div className="text-sm text-muted-foreground">{description}</div>
+          <div className="text-xs text-muted-foreground">{description}</div>
         ) : null}
       </div>
     </div>

package/src/components/carousel/carousel.meta.md

@@ -1,13 +1,14 @@
 ---
 id: carousel
 name: Carousel
+displayName: 走马灯
 type: component
 category: data-display
 since: 0.1.0
-package: "@teamix-evo/ui"
+package: '@teamix-evo/ui'
 ---
 
-# Carousel
+# Carousel 走马灯
 
 走马灯 — 基于 [`embla-carousel-react`](https://www.embla-carousel.com/),性能与可访问性出色。
 对应 antd `Carousel` 的核心场景。
@@ -50,7 +51,7 @@ package: "@teamix-evo/ui"
 | Entry | 类型 | 描述 |
 | --- | --- | --- |
 | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `button` | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
+| `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
 
 ### npm 依赖