@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/calendar/calendar.tsx

@@ -1,172 +0,0 @@
-import * as React from 'react';
-import {
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
-} from 'lucide-react';
-import { DayPicker, type DayPickerProps } from 'react-day-picker';
-
-import { cn } from '@/utils/cn';
-import { buttonVariants } from '@/components/button/button';
-
-/**
- * Calendar 自身的可定制属性(ui 层包装)。底层完整 props 透传至
- * [`DayPicker`](https://daypicker.dev/) — 下表列出业务侧最常用的核心 props,
- * 其余 DayPicker prop(`initialFocus` / `pagedNavigation` 等)走 `...rest` 透传。
- */
-export interface CalendarProps {
-  /**
-   * 容器 className。组件内部默认带 `p-3`,会与传入值自动 merge。
-   */
-  className?: string;
-  /**
-   * 覆盖底层 react-day-picker 的 classNames slots(深度自定义日格 / 表头 / 导航等)。
-   */
-  classNames?: DayPickerProps['classNames'];
-  /**
-   * 是否显示当月范围外的日期(灰色填充,占位补齐周表格)。
-   * @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({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps & DayPickerProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn('p-3', className)}
-      classNames={{
-        root: 'w-fit',
-        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-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' }),
-          'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-        ),
-        button_next: cn(
-          buttonVariants({ variant: 'outline', size: 'icon' }),
-          'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-        ),
-        month_grid: 'w-full border-collapse',
-        weekdays: 'flex',
-        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-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 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',
-        range_middle:
-          'aria-selected:bg-accent aria-selected:text-accent-foreground',
-        selected:
-          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md',
-        today: 'bg-accent text-accent-foreground rounded-md',
-        outside:
-          'day-outside text-muted-foreground aria-selected:text-muted-foreground',
-        disabled: 'text-muted-foreground opacity-50',
-        hidden: 'invisible',
-        ...classNames,
-      }}
-      components={{
-        Chevron: ({ orientation, className: chevronClassName, ...rest }) => {
-          const Icon =
-            orientation === 'left'
-              ? ChevronLeft
-              : orientation === 'up'
-              ? ChevronUp
-              : orientation === 'down'
-              ? ChevronDown
-              : ChevronRight;
-          return <Icon {...rest} className={cn('size-4', chevronClassName)} />;
-        },
-      }}
-      {...props}
-    />
-  );
-}
-Calendar.displayName = 'Calendar';
-
-export { Calendar };

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

@@ -1,139 +0,0 @@
----
-id: card
-name: Card
-displayName: 卡片
-type: component
-category: data-display
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Card 卡片
-
-卡片容器 — shadcn 组合式(`Card / Header / Title / Description / Content / Footer`)+ antd 并集(`hoverable / loading / Cover / Actions / Meta / extra`)。
-**单卡覆盖列表项 / 详情卡 / 资源卡 / 媒体卡多种形态**。
-
-## When to use
-
-- 列表项 / 网格卡片(产品 / 服务 / 用户)
-- 详情页的分块容器
-- 仪表板小部件(配 Header.extra 放刷新按钮)
-- 媒体卡(`<CardCover>` 顶部图片)
-
-## When NOT to use
-
-- 整屏页面背景 → 用普通 div + spacing
-- 简单文字提示 → `Alert` / `Badge`
-- 浮层 → `Popover` / `HoverCard`
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `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 -->
-
-## 依赖
-
-> 以下表格由 `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) |
-| `skeleton` | component | 骨架屏 — shadcn pulse 单元素 + antd Avatar/Image/Button/Input/Paragraph 子家族,自动 motion-reduce |
-
-### npm 依赖
-
-_无 — 本组件不依赖任何 npm 包。_
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **`hoverable` 仅用于可点击卡**:配 `onClick` 或包 `<Link>`,不能 hover 起视觉但点了无反应
-- **`loading` 整卡替换为骨架**:`children` 在 loading 时不渲染,**不要**手动嵌套 Skeleton
-- **`extra` 放轻量按钮**:刷新 / 更多 / 切换;**不要**塞主操作(放 CardFooter 更醒目)
-- **`<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
-import {
-  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
-  CardCover, CardActions, CardMeta,
-} from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Heart, Share, MessageSquare, MoreHorizontal } from 'lucide-react';
-
-// 基础
-<Card>
-  <CardHeader extra={<Button size="icon" variant="ghost"><MoreHorizontal /></Button>}>
-    <CardTitle>项目名称</CardTitle>
-    <CardDescription>项目简介一行...</CardDescription>
-  </CardHeader>
-  <CardContent>主体内容</CardContent>
-  <CardFooter className="justify-end gap-2">
-    <Button variant="outline">取消</Button>
-    <Button>确认</Button>
-  </CardFooter>
-</Card>
-
-// hoverable
-<Card hoverable onClick={() => navigate('/x')}>
-  <CardContent>...</CardContent>
-</Card>
-
-// loading
-<Card loading />
-
-// 媒体卡(antd 风格)
-<Card hoverable>
-  <CardCover>
-    <img src="/cover.jpg" alt="" />
-  </CardCover>
-  <CardContent className="pt-4">
-    <CardMeta
-      avatar={<Avatar><AvatarImage src="..." /><AvatarFallback>A</AvatarFallback></Avatar>}
-      title="作者"
-      description="发布时间"
-    />
-  </CardContent>
-  <CardActions items={[
-    <span><Heart className="inline size-4" /> 12</span>,
-    <span><Share className="inline size-4" /> 4</span>,
-    <span><MessageSquare className="inline size-4" /> 8</span>,
-  ]} />
-</Card>
-```

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

@@ -1,151 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Heart, MessageSquare, MoreHorizontal, Share } from 'lucide-react';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  CardCover,
-  CardActions,
-  CardMeta,
-} from './card';
-import { Button } from '@/components/button/button';
-import {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-} from '@/components/avatar/avatar';
-
-const meta: Meta<typeof 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, size: 'default' },
-};
-
-export default meta;
-type Story = StoryObj<typeof Card>;
-
-export const Basic: Story = {
-  render: (args) => (
-    <Card {...args} className="w-80">
-      <CardHeader
-        extra={
-          <Button size="icon" variant="ghost" aria-label="更多">
-            <MoreHorizontal />
-          </Button>
-        }
-      >
-        <CardTitle>项目名称</CardTitle>
-        <CardDescription>项目简介一行...</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p className="text-sm text-muted-foreground">主体内容区域。</p>
-      </CardContent>
-      <CardFooter className="justify-end gap-2">
-        <Button variant="outline">取消</Button>
-        <Button>确认</Button>
-      </CardFooter>
-    </Card>
-  ),
-};
-
-export const Hoverable: Story = {
-  args: { hoverable: true },
-  render: (args) => (
-    <Card {...args} className="w-72">
-      <CardContent className="pt-6">
-        <p className="text-sm">悬浮我看阴影变化</p>
-      </CardContent>
-    </Card>
-  ),
-};
-
-export const Loading: Story = {
-  args: { loading: true },
-  render: (args) => <Card {...args} className="w-80" />,
-};
-
-export const Media: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Card hoverable className="w-80">
-      <CardCover>
-        <img
-          src="https://placehold.co/600x320/e5e7eb/6b7280?text=Cover"
-          alt="cover"
-        />
-      </CardCover>
-      <CardContent className="pt-4">
-        <CardMeta
-          avatar={
-            <Avatar>
-              <AvatarImage src="https://github.com/shadcn.png" />
-              <AvatarFallback>U</AvatarFallback>
-            </Avatar>
-          }
-          title="发布者"
-          description="2 小时前 · 北京"
-        />
-      </CardContent>
-      <CardActions
-        items={[
-          <span key="like" className="inline-flex items-center gap-1">
-            <Heart className="size-4" /> 12
-          </span>,
-          <span key="share" className="inline-flex items-center gap-1">
-            <Share className="size-4" /> 4
-          </span>,
-          <span key="comment" className="inline-flex items-center gap-1">
-            <MessageSquare className="size-4" /> 8
-          </span>,
-        ]}
-      />
-    </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>
-  ),
-};