@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/card/card.tsx

@@ -1,306 +0,0 @@
-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: {
-    // p-[var(--card-padding-x)] — op: 20px / um: 20px（OpenTrek v4.1 ContentCard准则）
-    headerFooter: 'p-[var(--card-padding-x)]',
-    content: 'p-[var(--card-padding-x)] pt-0',
-    footer: 'p-[var(--card-padding-x)] pt-0',
-    title: 'text-base',
-  },
-  default: {
-    headerFooter: 'p-[var(--card-padding-x)]',
-    content: 'p-[var(--card-padding-x)] pt-0',
-    footer: 'p-[var(--card-padding-x)] 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` 并集) — 阴影升级 + 微交互。
-   * @default false
-   */
-  hoverable?: boolean;
-  /**
-   * 加载态(antd `loading` 并集) — 整卡渲染为骨架屏占位,不展示 children。
-   * @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,
-      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';
-
-export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * 右侧附加内容(antd `extra` 并集) — 用 flex 撑开,与 title/description 同行。
-   * 已等价 shadcn 2026-04 新增的 `CardAction` 子组件,推荐传 `<CardAction>...</CardAction>` 节点。
-   */
-  extra?: React.ReactNode;
-}
-
-const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
-  ({ 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';
-
-const CardAction = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
-      className,
-    )}
-    {...props}
-  />
-));
-CardAction.displayName = 'CardAction';
-
-const CardTitle = React.forwardRef<
-  HTMLHeadingElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ 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<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn('text-xs text-muted-foreground', className)}
-    {...props}
-  />
-));
-CardDescription.displayName = 'CardDescription';
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ 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) => {
-  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(并集)──────────────────────────────────────
-
-export interface CardCoverProps extends React.HTMLAttributes<HTMLDivElement> {}
-const CardCover = React.forwardRef<HTMLDivElement, CardCoverProps>(
-  ({ className, children, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'overflow-hidden rounded-t-lg border-b border-border [&>img]:w-full [&>img]:object-cover',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  ),
-);
-CardCover.displayName = 'CardCover';
-
-export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** 操作项数组(antd `actions` 并集) — 自动均分等宽,中间分隔线。 */
-  items: React.ReactNode[];
-}
-const CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(
-  ({ className, items, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'flex items-stretch divide-x divide-border border-t border-border',
-        className,
-      )}
-      {...props}
-    >
-      {items.map((item, i) => (
-        <div
-          key={i}
-          className="flex flex-1 items-center justify-center py-3 text-xs text-muted-foreground transition-colors hover:bg-accent"
-        >
-          {item}
-        </div>
-      ))}
-    </div>
-  ),
-);
-CardActions.displayName = 'CardActions';
-
-export interface CardMetaProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-  /** 头像槽(antd `Card.Meta` `avatar` 并集)。 */
-  avatar?: React.ReactNode;
-  /** 标题(粗体)。 */
-  title?: React.ReactNode;
-  /** 描述。 */
-  description?: React.ReactNode;
-}
-const CardMeta = React.forwardRef<HTMLDivElement, CardMetaProps>(
-  ({ className, avatar, title, description, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('flex items-start gap-3', className)}
-      {...props}
-    >
-      {avatar ? <div className="shrink-0">{avatar}</div> : null}
-      <div className="flex min-w-0 flex-1 flex-col gap-1">
-        {title ? (
-          <div className="text-sm font-semibold leading-none">{title}</div>
-        ) : null}
-        {description ? (
-          <div className="text-xs text-muted-foreground">{description}</div>
-        ) : null}
-      </div>
-    </div>
-  ),
-);
-CardMeta.displayName = 'CardMeta';
-
-export {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  CardCover,
-  CardActions,
-  CardAction,
-  CardMeta,
-};

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

@@ -1,118 +0,0 @@
----
-id: carousel
-name: Carousel
-displayName: 走马灯
-type: component
-category: data-display
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Carousel 走马灯
-
-走马灯 — 基于 [`embla-carousel-react`](https://www.embla-carousel.com/),性能与可访问性出色。
-对应 antd `Carousel` 的核心场景。
-
-## When to use
-
-- 首屏 banner / 营销轮播
-- 卡片横向滚动(配 `basis-1/3` 等让一屏多卡可见)
-- 图片画廊
-- 商品 / 服务的横向展示
-
-## When NOT to use
-
-- 密集 tab 切换 → `Tabs`
-- 数据表格 → `Table` / `DataTable`
-- 全屏画廊(含缩放 / 全屏)→ 专用图库组件
-
-## Props
-
-> 以下表格由 `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 等)。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `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 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```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。
-
-## AI 生成纪律
-
-- **`opts.loop` 默认 false**:必须显式开启 loop 才能循环
-- **配 `setApi` 拿 embla API**:业务侧需要 `scrollTo / on('select', ...)` 时,通过 `setApi` 回调收口
-- **`basis-*` 控制每屏几张**:`<CarouselItem className="basis-1/3">` 一屏 3 张
-- **`orientation="vertical"` 父容器需固定高度**:embla 不会自动撑开
-- **autoplay 用 `embla-carousel-autoplay` 插件**:`plugins={[Autoplay({ delay: 4000 })]}`
-- **触屏拖动自带**:不需要额外配置
-
-## Examples
-
-```tsx
-import {
-  Carousel, CarouselContent, CarouselItem,
-  CarouselPrevious, CarouselNext,
-} from '@/components/ui/carousel';
-
-// 基础(单页)
-<Carousel className="w-full max-w-md">
-  <CarouselContent>
-    {Array.from({ length: 5 }).map((_, i) => (
-      <CarouselItem key={i}>
-        <Card>{i + 1}</Card>
-      </CarouselItem>
-    ))}
-  </CarouselContent>
-  <CarouselPrevious />
-  <CarouselNext />
-</Carousel>
-
-// 一屏 3 张
-<Carousel opts={{ align: 'start' }} className="w-full max-w-2xl">
-  <CarouselContent>
-    {items.map((it, i) => (
-      <CarouselItem key={i} className="md:basis-1/3">
-        <Card>{it.title}</Card>
-      </CarouselItem>
-    ))}
-  </CarouselContent>
-  <CarouselPrevious />
-  <CarouselNext />
-</Carousel>
-
-// 受控 / 拿 API
-const [api, setApi] = React.useState<CarouselApi>();
-React.useEffect(() => {
-  if (!api) return;
-  api.on('select', () => console.log('current:', api.selectedScrollSnap()));
-}, [api]);
-
-<Carousel setApi={setApi}>...</Carousel>
-```

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

@@ -1,89 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-} from './carousel';
-import { Card, CardContent } from '@/components/card/card';
-
-const meta: Meta<typeof Carousel> = {
-  title: '数据展示 · Data Display/Carousel',
-  component: Carousel,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          '走马灯 — 基于 embla-carousel-react，支持单页 / 多页 / 循环 / 拖拽 / 自动播放插件。对应 antd `Carousel` 的核心场景。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Carousel>;
-
-export const Single: Story = {
-  render: () => (
-    <Carousel className="w-full max-w-md">
-      <CarouselContent>
-        {Array.from({ length: 5 }).map((_, i) => (
-          <CarouselItem key={i}>
-            <Card>
-              <CardContent className="flex aspect-video items-center justify-center p-6">
-                <span className="text-4xl font-semibold">{i + 1}</span>
-              </CardContent>
-            </Card>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  ),
-};
-
-export const ThreePerView: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Carousel opts={{ align: 'start' }} className="w-full max-w-2xl">
-      <CarouselContent>
-        {Array.from({ length: 8 }).map((_, i) => (
-          <CarouselItem key={i} className="md:basis-1/3">
-            <Card>
-              <CardContent className="flex aspect-square items-center justify-center p-6">
-                <span className="text-3xl font-semibold">{i + 1}</span>
-              </CardContent>
-            </Card>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  ),
-};
-
-export const Looping: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Carousel className="w-full max-w-md" opts={{ loop: true }}>
-      <CarouselContent>
-        {Array.from({ length: 4 }).map((_, i) => (
-          <CarouselItem key={i}>
-            <Card>
-              <CardContent className="flex aspect-video items-center justify-center p-6">
-                <span className="text-2xl">循环 #{i + 1}</span>
-              </CardContent>
-            </Card>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  ),
-};