@teamix-evo/ui 0.2.0 → 0.3.0

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-xs-cal',
+        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

@@ -3,7 +3,7 @@ id: card
 name: Card
 displayName: 卡片
 type: component
-category: layout
+category: data-display
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
@@ -31,34 +31,11 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
 
 <!-- auto:props:begin -->
-
-#### Card
-
-| 名称        | 类型      | 默认值  | 必填 | 说明                                                                 |
-| ----------- | --------- | ------- | ---- | -------------------------------------------------------------------- |
-| `hoverable` | `boolean` | `false` | –    | 鼠标 hover 时的视觉反馈(antd `hoverable` 并集) — 阴影升级 + 微交互。 |
-| `loading`   | `boolean` | `false` | –    | 加载态(antd `loading` 并集) — 整卡渲染为骨架屏占位,不展示 children。 |
-
-#### CardHeader
-
-| 名称    | 类型              | 默认值 | 必填 | 说明                                                                       |
-| ------- | ----------------- | ------ | ---- | -------------------------------------------------------------------------- |
-| `extra` | `React.ReactNode` | –      | –    | 右侧附加内容(antd `extra` 并集) — 用 flex 撑开,与 title/description 同行。 |
-
-#### CardActions
-
-| 名称    | 类型                | 默认值 | 必填 | 说明                                                        |
-| ------- | ------------------- | ------ | ---- | ----------------------------------------------------------- |
-| `items` | `React.ReactNode[]` | –      | ✓    | 操作项数组(antd `actions` 并集) — 自动均分等宽,中间分隔线。 |
-
-#### CardMeta
-
-| 名称          | 类型              | 默认值 | 必填 | 说明                                     |
-| ------------- | ----------------- | ------ | ---- | ---------------------------------------- |
-| `avatar`      | `React.ReactNode` | –      | –    | 头像槽(antd `Card.Meta` `avatar` 并集)。 |
-| `title`       | `React.ReactNode` | –      | –    | 标题(粗体)。                             |
-| `description` | `React.ReactNode` | –      | –    | 描述。                                   |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `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 -->
 
 ## 依赖
@@ -66,20 +43,18 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add card` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry      | 类型      | 描述                                                                                              |
-| ---------- | --------- | ------------------------------------------------------------------------------------------------- |
-| `cn`       | util      | Tailwind className 合并工具(clsx + tailwind-merge)                                                |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
 | `skeleton` | component | 骨架屏 — shadcn pulse 单元素 + antd Avatar/Image/Button/Input/Paragraph 子家族,自动 motion-reduce |
 
 ### npm 依赖
 
 _无 — 本组件不依赖任何 npm 包。_
-
 <!-- auto:deps:end -->
 
 ## AI 生成纪律
@@ -90,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,7 +19,7 @@ import {
 } from '@/components/avatar/avatar';
 
 const meta: Meta<typeof Card> = {
-  title: '布局与容器 · Layout/Card',
+  title: '数据展示 · Data Display/Card',
   component: Card,
   tags: ['autodocs'],
   parameters: {
@@ -33,8 +33,9 @@ const meta: Meta<typeof Card> = {
   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;
@@ -118,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

@@ -31,14 +31,12 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
 
 <!-- auto:props:begin -->
-
-| 名称          | 类型                         | 默认值         | 必填 | 说明                                                                 |
-| ------------- | ---------------------------- | -------------- | ---- | -------------------------------------------------------------------- |
-| `opts`        | `CarouselOptions`            | –              | –    | embla 选项透传(`loop / align / startIndex / dragFree` 等)。          |
-| `plugins`     | `CarouselPlugin`             | –              | –    | embla 插件数组(`autoplay`、`fade` 等)。                              |
-| `orientation` | `'horizontal' \| 'vertical'` | `"horizontal"` | –    | 滚动方向。                                                           |
-| `setApi`      | `(api: CarouselApi) => void` | –              | –    | 提供 embla API 的回调,用于业务侧自行控制(scrollNext / scrollTo 等)。 |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `opts` | `CarouselOptions` | – | – | embla 选项透传(`loop / align / startIndex / dragFree` 等)。 |
+| `plugins` | `CarouselPlugin` | – | – | embla 插件数组(`autoplay`、`fade` 等)。 |
+| `orientation` | `'horizontal' \| 'vertical'` | `"horizontal"` | – | 滚动方向。 |
+| `setApi` | `(api: CarouselApi) => void` | – | – | 提供 embla API 的回调,用于业务侧自行控制(scrollNext / scrollTo 等)。 |
 <!-- auto:props:end -->
 
 ## 依赖
@@ -46,15 +44,14 @@ package: '@teamix-evo/ui'
 > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
 
 <!-- auto:deps:begin -->
-
 ### 同库依赖
 
 > `teamix-evo ui add carousel` 时,以下 entry 会被自动连带安装(无需手动 add)。
 
-| Entry    | 类型      | 描述                                                                                    |
-| -------- | --------- | --------------------------------------------------------------------------------------- |
-| `cn`     | util      | Tailwind className 合并工具(clsx + tailwind-merge)                                      |
-| `button` | component | 通用按钮 — shadcn 实现 + antd 功能扩展(loading / icon / shape / block / dashed variant) |
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
 
 ### npm 依赖
 
@@ -63,7 +60,6 @@ package: '@teamix-evo/ui'
 ```bash
 pnpm add embla-carousel-react@^8.0.0 lucide-react@^0.460.0
 ```
-
 <!-- auto:deps:end -->
 
 > 子组件:`Carousel`(主容器,内置 embla)/ `CarouselContent`(可滚动 wrapper)/ `CarouselItem`(单页)/ `CarouselPrevious` + `CarouselNext`(导航按钮)+ `useCarousel()` 内部 hook。

package/src/components/carousel/carousel.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Carousel,
   CarouselContent,