@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/button/button.tsx

@@ -1,466 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Loader2 } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-import { Tooltip } from '@/components/tooltip/tooltip';
-
-// ─── Button cva ──────────────────────────────────────────────────────────────
-
-/**
- * Button cva 配置 — 视觉与交互的全部档位均落在 OpenTrek tokens 上:
- * - 圆角 `rounded-md` 直接消费 Tailwind v4 标准 namespace token `--radius-md`,
- *   uni-manager 主题下 = 2px(对齐 cd corner.1 锐利风格);
- *   opentrek 主题下 = Tailwind v4 默认 0.375rem = 6px。
- *   注:不使用自定义 `--radius-button` 组件级别名,因 Tailwind v4 在多包 @import
- *   场景下不会为非标准 namespace token 自动派生 utility(实测 .rounded-button
- *   不生成);用标准档对齐主题语义即可,避免无谓的 @utility 注册。
- * - 高度 `h-6 / h-8 / h-9` 对应 24/32/36px(与 Input / Select 同档)
- * - 字重 `font-normal`(400)— cd hybridcloud Button 字重
- * - 颜色 `bg-primary / bg-destructive / ...` 全部走 design semantic tokens
- * - ghost / link 仅收紧左右 padding(ghost px-1 / link px-0),高度跟随主 size 档(h-6/h-8/h-9)
- *   与 cd hybridcloud text 按钮实际表现一致(高度不追加独立紧凑档,只去背景/边框)
- */
-const buttonVariants = cva(
-  'inline-flex cursor-pointer items-center justify-center gap-1 whitespace-nowrap font-normal rounded-md transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        // shadow 由 variant scoped CSS 提供(opentrek 默认无 / uni-manager 有 shadow + hover 浮起,
-        // 见 packages/tokens/variants/uni-manager/theme.css 末尾 [data-slot='button'] 规则)
-        default:
-          'bg-primary text-primary-foreground transition-shadow duration-150 hover:bg-primary/90',
-        secondary:
-          'bg-secondary text-secondary-foreground transition-shadow duration-150 hover:bg-secondary/80',
-        destructive:
-          'bg-destructive text-destructive-foreground transition-shadow duration-150 hover:bg-destructive/90',
-        outline:
-          'border border-input bg-card transition-shadow duration-150 hover:bg-muted hover:text-foreground',
-        dashed:
-          'border border-dashed border-input bg-card transition-shadow duration-150 hover:bg-muted hover:text-foreground',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4',
-      },
-      // ADR 0021 语义色 — 与 `variant` 双 prop 组合,覆盖语义而非视觉骨架。
-      // 典型组合: `variant="outline" color="destructive"` ⇒ 旧库 warning + outline 形态。
-      color: {
-        default: '',
-        primary: '',
-        destructive: '',
-      },
-      size: {
-        // 24px — 紧凑场景（表格行内、密集工具条），对齐 cd small
-        sm: 'h-6 px-[var(--btn-padding-x-sm)] text-xs',
-        // 32px — 默认 / 表单基线；`md` 与 `default` 等价（向后兼容旧 API）
-        // 字号对齐 cd hybridcloud --form-element-medium-font-size: 12px（ADR 0027）
-        md: 'h-8 px-[var(--btn-padding-x-sm)] text-xs',
-        default: 'h-8 px-[var(--btn-padding-x-sm)] text-xs',
-        // 36px — 强调主操作 / 落地页；水平 padding 走 OpenTrek v4.1 标准 16px
-        lg: 'h-9 px-[var(--btn-padding-x)] text-sm',
-        // 32px 正方形 — 纯图标按钮（配合 shape="circle" / "square"）
-        icon: 'h-8 w-8',
-      },
-      shape: {
-        default: '',
-        // antd 兼容:`round` = 全圆角矩形
-        round: 'rounded-full',
-        // 等宽等高圆形 — 独立使用时常配 size="icon";SplitButton trigger 可省略 size 继承 group
-        circle: 'rounded-full aspect-square p-0',
-        // 等宽等高方形 — 独立使用时常配 size="icon";SplitButton trigger 可省略 size 继承 group
-        square: 'aspect-square p-0',
-      },
-      block: {
-        true: 'w-full',
-        false: '',
-      },
-      // 仅 icon、无 children 时收紧水平 padding,避免视觉过宽
-      iconOnly: {
-        true: 'px-0',
-        false: '',
-      },
-    },
-    compoundVariants: [
-      // size=icon 时强制方形,无需手动 px
-      { size: 'icon', className: 'p-0' },
-
-      // ─── color × variant 语义覆盖(ADR 0021) ────────────────────────────
-      // outline + destructive ⇒ 旧库 warning+outline:边线 / 文字红,背景透明
-      {
-        variant: 'outline',
-        color: 'destructive',
-        className:
-          'border-destructive text-destructive hover:bg-destructive/10 hover:text-destructive',
-      },
-      // ghost + destructive ⇒ 删除类危险操作的轻量按钮(hover 背景走中性灰,对齐 cd hybridcloud)
-      {
-        variant: 'ghost',
-        color: 'destructive',
-        className: 'text-destructive hover:bg-muted',
-      },
-      // link + destructive ⇒ 链接式危险操作
-      {
-        variant: 'link',
-        color: 'destructive',
-        className: 'text-destructive',
-      },
-
-      // text 形态(ghost / link) 水平 padding 收紧;高度跟随主 size 档(h-6/h-8/h-9),
-      // 与 cd hybridcloud text 按钮实际表现一致(早期版本曾加独立 18/20px 紧凑档,D1 决策删除)
-      {
-        variant: 'ghost',
-        size: 'sm',
-        className: 'px-1',
-      },
-      {
-        variant: 'ghost',
-        size: 'md',
-        className: 'px-1',
-      },
-      {
-        variant: 'ghost',
-        size: 'default',
-        className: 'px-1',
-      },
-      {
-        variant: 'ghost',
-        size: 'lg',
-        className: 'px-1',
-      },
-      {
-        variant: 'link',
-        size: 'sm',
-        className: 'px-0',
-      },
-      {
-        variant: 'link',
-        size: 'md',
-        className: 'px-0',
-      },
-      {
-        variant: 'link',
-        size: 'default',
-        className: 'px-0',
-      },
-      {
-        variant: 'link',
-        size: 'lg',
-        className: 'px-0',
-      },
-    ],
-    defaultVariants: {
-      variant: 'default',
-      color: 'default',
-      size: 'default',
-      shape: 'default',
-      block: false,
-      iconOnly: false,
-    },
-  },
-);
-
-export type ButtonVariant =
-  | 'default'
-  | 'secondary'
-  | 'destructive'
-  | 'outline'
-  | 'dashed'
-  | 'ghost'
-  | 'link';
-export type ButtonColor = 'default' | 'primary' | 'destructive';
-export type ButtonSize = 'sm' | 'md' | 'default' | 'lg' | 'icon';
-export type ButtonShape = 'default' | 'round' | 'circle' | 'square';
-
-// ─── ButtonGroup Context — 把 size 自顶向下注入子 Button ─────────────────────
-
-interface ButtonGroupContextValue {
-  /** 由 `<ButtonGroup size>` 注入,子 Button 未显式传 size 时回退到此值。 */
-  size?: ButtonSize;
-}
-
-const ButtonGroupContext = React.createContext<ButtonGroupContextValue | null>(
-  null,
-);
-
-// ─── Button ──────────────────────────────────────────────────────────────────
-
-export interface ButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,
-    VariantProps<typeof buttonVariants> {
-  /**
-   * 视觉风格,语义按 design token 走。
-   * @default "default"
-   */
-  variant?: ButtonVariant;
-  /**
-   * 语义色(ADR 0021)。与 `variant` 双 prop 组合表达"语义 × 视觉"两个维度,
-   * 例:`variant="outline" color="destructive"` 实现旧库 warning+outline 形态;
-   * `variant="ghost" color="destructive"` 实现轻量危险删除按钮。
-   * @default "default"
-   */
-  color?: ButtonColor;
-  /**
-   * 尺寸。`md` 与 `default` 等价,`icon` 为正方形纯图标按钮。
-   * 若包在 `<ButtonGroup size="..">` 中且本地未显式传值,自动继承 group 的 size。
-   * @default "default"
-   */
-  size?: ButtonSize;
-  /**
-   * 形状。`circle` / `square` 必须配 `size="icon"`。
-   * @default "default"
-   */
-  shape?: ButtonShape;
-  /**
-   * `true` 时撑满父容器宽度。
-   * @default false
-   */
-  block?: boolean;
-  /**
-   * 用 Radix Slot 模式渲染为子元素;此时 `loading` / `icon` / `iconRight` 被忽略。
-   * @default false
-   */
-  asChild?: boolean;
-  /**
-   * 显示自旋 spinner,自动 `disabled` + `aria-busy=true`,保留视觉宽度。
-   * @default false
-   */
-  loading?: boolean;
-  /**
-   * 文本左侧图标。推荐 `lucide-react`。loading 时被 spinner 替换。
-   */
-  icon?: React.ReactNode;
-  /**
-   * 文本右侧图标。推荐 `lucide-react`。
-   */
-  iconRight?: React.ReactNode;
-  /**
-   * 兼容旧 API:`icon` 相对文本的位置;新代码请直接使用 `icon` / `iconRight` 双 slot。
-   * @default "start"
-   * @deprecated 使用 `icon` 与 `iconRight` 双 slot。
-   */
-  iconPosition?: 'start' | 'end';
-  /**
-   * `disabled=true` 时的禁用解释文本。仅在 `disabled` 同时存在时生效:
-   * 内部包一层 `cursor-not-allowed` wrapper + Tooltip,把 button pointer-events 关闭后由 wrapper 拾取 hover。
-   * 不传则保持原生 disabled 行为。
-   */
-  disabledTooltip?: React.ReactNode;
-  /** 按钮文本 / 内容。 */
-  children?: React.ReactNode;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      color,
-      size,
-      shape,
-      block,
-      asChild = false,
-      loading = false,
-      icon,
-      iconRight,
-      iconPosition = 'start',
-      disabled,
-      disabledTooltip,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    // ButtonGroup 注入的 size 在本地未显式传值时生效
-    const groupCtx = React.useContext(ButtonGroupContext);
-    const resolvedSize = size ?? groupCtx?.size;
-
-    // 兼容旧 API:iconPosition="end" 时把 icon 视作 iconRight(若 iconRight 未显式传)
-    const resolvedIcon =
-      iconPosition === 'end' && !iconRight ? undefined : icon;
-    const resolvedIconRight =
-      iconPosition === 'end' && !iconRight ? icon : iconRight;
-
-    // icon-only 检测:无 children + 至少一个 icon slot,适合收紧 padding
-    const isIconOnly =
-      (children == null || children === false || children === '') &&
-      (resolvedIcon != null || resolvedIconRight != null || loading);
-
-    const composedClassName = cn(
-      buttonVariants({
-        variant,
-        color,
-        size: resolvedSize,
-        shape,
-        block,
-        iconOnly: isIconOnly,
-        className,
-      }),
-    );
-
-    if (asChild) {
-      return (
-        <Slot ref={ref} className={composedClassName} {...props}>
-          {children}
-        </Slot>
-      );
-    }
-
-    const leadingNode = loading ? (
-      <Loader2
-        className="animate-spin motion-reduce:animate-none"
-        aria-hidden="true"
-      />
-    ) : (
-      resolvedIcon
-    );
-
-    const buttonEl = (
-      <button
-        ref={ref}
-        data-slot="button"
-        data-variant={variant}
-        className={composedClassName}
-        disabled={disabled || loading}
-        aria-busy={loading || undefined}
-        {...props}
-      >
-        {leadingNode}
-        {children}
-        {resolvedIconRight}
-      </button>
-    );
-
-    // 禁用 + 提示文案 ⇒ 用 cursor-not-allowed wrapper 拾取 hover,关闭 button pointer-events
-    if (disabled && disabledTooltip != null) {
-      return (
-        <Tooltip title={disabledTooltip} withProvider>
-          <span className="inline-block cursor-not-allowed">
-            {React.cloneElement(buttonEl, {
-              className: cn(composedClassName, 'pointer-events-none'),
-            })}
-          </span>
-        </Tooltip>
-      );
-    }
-
-    return buttonEl;
-  },
-);
-Button.displayName = 'Button';
-
-// ─── ButtonGroup ─────────────────────────────────────────────────────────────
-
-const buttonGroupVariants = cva('inline-flex isolate', {
-  variants: {
-    orientation: {
-      horizontal:
-        'flex-row [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:-ml-px hover:[&>*]:z-10 focus-visible:[&>*]:z-10',
-      vertical:
-        'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:first-child)]:-mt-px hover:[&>*]:z-10 focus-visible:[&>*]:z-10',
-    },
-    attached: {
-      true: '',
-      false: 'gap-2',
-    },
-  },
-  defaultVariants: { orientation: 'horizontal', attached: true },
-});
-
-export interface ButtonGroupProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof buttonGroupVariants> {
-  /**
-   * 排列方向。
-   * @default "horizontal"
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * 是否把按钮"粘"在一起去除边距(antd `Space.Compact` 等价行为)— `false` 时按钮间留 8px gap。
-   * @default true
-   */
-  attached?: boolean;
-  /**
-   * 统一下发给子 Button 的尺寸;子 Button 若显式传了 `size` 则以子值优先。
-   * 通过 React.Context 注入,跨 Slot 透传无效(asChild 自定义渲染不会拿到)。
-   */
-  size?: ButtonSize;
-}
-
-/**
- * 按钮组容器 — 语义类似 antd `Space.Compact`(v6 替代旧 `Button.Group`):
- * 把多个 `Button` / `Input` 包在一起共享边线,典型场景:
- *   - Split button(左主操作 + 右下拉箭头)
- *   - Toolbar(同语义按钮集合)
- *   - Input + 按钮拼装(`<Input/><Button>搜索</Button>`)
- *
- * 通过 `size` prop + React.Context 把尺寸自顶向下注入未显式传 size 的子 Button。
- */
-const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
-  ({ orientation, attached, size, className, children, ...props }, ref) => {
-    const ctxValue = React.useMemo<ButtonGroupContextValue>(
-      () => ({ size }),
-      [size],
-    );
-
-    return (
-      <ButtonGroupContext.Provider value={ctxValue}>
-        <div
-          ref={ref}
-          role="group"
-          className={cn(
-            buttonGroupVariants({ orientation, attached }),
-            className,
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </ButtonGroupContext.Provider>
-    );
-  },
-);
-ButtonGroup.displayName = 'ButtonGroup';
-
-// ─── ButtonGroupText(antd-style addon text)─────────────────────────────────
-
-/**
- * ButtonGroupText 的高度走与 Button 一致的 size 档,通过 ButtonGroupContext 读取;
- * 不在 Group 内时回退到 default(32px),不再写死 `h-9`(36px),修复跟 Button 默认尺寸不齐的 bug。
- */
-const buttonGroupTextSizeClassMap: Record<ButtonSize, string> = {
-  sm: 'h-6 text-xs',
-  md: 'h-8 text-xs',
-  default: 'h-8 text-xs',
-  lg: 'h-9 text-sm',
-  // icon 在 addon 文本场景无意义,回退到 default
-  icon: 'h-8 text-xs',
-};
-
-const ButtonGroupText = React.forwardRef<
-  HTMLSpanElement,
-  React.HTMLAttributes<HTMLSpanElement>
->(({ className, ...props }, ref) => {
-  const groupCtx = React.useContext(ButtonGroupContext);
-  const sizeCls = buttonGroupTextSizeClassMap[groupCtx?.size ?? 'default'];
-  return (
-    <span
-      ref={ref}
-      className={cn(
-        'inline-flex select-none items-center border border-input bg-muted px-3 text-muted-foreground',
-        sizeCls,
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-ButtonGroupText.displayName = 'ButtonGroupText';
-
-export {
-  Button,
-  ButtonGroup,
-  ButtonGroupText,
-  ButtonGroupContext,
-  buttonVariants,
-  buttonGroupVariants,
-};

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

@@ -1,128 +0,0 @@
----
-id: calendar
-name: Calendar
-displayName: 日历
-type: component
-category: data-display
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Calendar 日历
-
-日期选择面板 — 基于 [`react-day-picker`](https://react-day-picker.js.org/),与 design tokens 对齐。
-**两种用法**:
-
-1. **inline**(裸 Calendar):嵌入页面或 Card
-2. **配 Popover** → `DatePicker`(单日)/ `DateRangePicker`(范围)
-
-## When to use
-
-- 日期 / 范围选择(配 `DatePicker`)
-- 日历视图(展示日程 / 假期 / 数据热力)
-- 月份导航器
-
-## When NOT to use
-
-- 时间选择 → 配 `Input type="time"` 或自定义 TimePicker
-- 模糊时间("近 7 天") → `Select` + 预设范围
-- 仅显示日期 → `<time>` 配 `date-fns`
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `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 -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add calendar` 时,以下 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 react-day-picker@^9.0.0 lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-> 透传所有 react-day-picker `<DayPicker>` props(`mode` / `selected` / `onSelect` / `disabled` / `fromYear` / `toYear` / `numberOfMonths` 等)。完整 API:[react-day-picker.js.org](https://react-day-picker.js.org/)。
-
-## AI 生成纪律
-
-- **`mode` 必传**:`'single'` / `'multiple'` / `'range'` 三选一,API 不同(`selected` 类型不同)
-- **disabled 日期**:用 `disabled={(date) => date < startOfDay(new Date())}` 而非自己过滤
-- **`fromYear` / `toYear` 限制可选范围**:不设置时年份下拉无界
-- **多日期范围**:`mode="range"` 时 `selected` 是 `{ from?: Date, to?: Date }`
-- **无障碍自带**:react-day-picker 完整 ARIA + 键盘导航,不要自行覆盖
-- **`classNames` 必须用 react-day-picker v9 的 slot key**:本组件依赖 `react-day-picker@^9`。v9 重命名了所有 slot,**v8 老 key 完全失效**(默认渲染会塌掉成 `<table>` 原生样式)。常见映射:
-  - `caption` → `month_caption`
-  - `nav_button` / `nav_button_previous` / `nav_button_next` → `button_previous` / `button_next`(`nav` 为容器)
-  - `table` → `month_grid`
-  - `head_row` / `head_cell` → `weekdays` / `weekday`
-  - `row` → `week`
-  - `cell` / `day` → `day`(td 外壳)/ `day_button`(真正的按钮)
-  - `day_selected` / `day_today` / `day_outside` / `day_disabled` / `day_hidden` / `day_range_*` → 去 `day_` 前缀:`selected` / `today` / `outside` / `disabled` / `hidden` / `range_*`
-- **nav 是 `<Months>` 直接子元素,与 `<Month>` 平级**(默认 `navLayout`):若 `nav` 用 absolute 定位横跨容器顶部覆盖到 caption 区域,**必须给 nav 加 `z-10`**,否则源码顺序在后的 `month_caption` 会盖住翻月按钮导致点击失效;同时 `month_caption` 不要自行加 `relative`(会创建 stacking context 反而把 nav 压在下面)
-- **状态类(selected/today/range\_\*)作用在 `day_button` 上,不是 `day` 外壳**:视觉态(背景色/圆角)需直接写到对应 slot;`day` 外壳负责 range 段连续背景,用 `[&:has([data-selected])]` / `[data-range-*]` 这种 v9 data attribute 选择器
-
-## Examples
-
-```tsx
-import { Calendar } from '@/components/ui/calendar';
-import * as React from 'react';
-
-// 单日
-const [date, setDate] = React.useState<Date | undefined>();
-<Calendar mode="single" selected={date} onSelect={setDate} />;
-
-// 多选
-const [days, setDays] = React.useState<Date[]>([]);
-<Calendar mode="multiple" selected={days} onSelect={setDays} />;
-
-// 范围
-const [range, setRange] = React.useState<{ from?: Date; to?: Date }>();
-<Calendar
-  mode="range"
-  selected={range}
-  onSelect={setRange}
-  numberOfMonths={2}
-/>;
-
-// 限制范围 + 禁用过去
-import { startOfDay } from 'date-fns';
-<Calendar
-  mode="single"
-  selected={date}
-  onSelect={setDate}
-  disabled={(d) => d < startOfDay(new Date())}
-  fromYear={2020}
-  toYear={2030}
-/>;
-```

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

@@ -1,68 +0,0 @@
-import * as React from '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: '数据展示 · Data Display/Calendar',
-  component: Calendar,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          '日历 — 内联日期选择面板。基于 react-day-picker@9 + design tokens，支持 `mode="single" | "multiple" | "range"` 三种选择模式、年份 / 月份导航、`disabled` 函数式禁用、`numberOfMonths` 多月并排；通常配 `Popover` 包装为 `DatePicker`。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Calendar>;
-
-export const Single: Story = {
-  render: () => {
-    const [date, setDate] = React.useState<Date | undefined>(new Date());
-    return (
-      <Calendar
-        mode="single"
-        selected={date}
-        onSelect={setDate}
-        className="rounded-md border border-border"
-      />
-    );
-  },
-};
-
-export const Multiple: Story = {
-  render: () => {
-    const [days, setDays] = React.useState<Date[] | undefined>([]);
-    return (
-      <Calendar
-        mode="multiple"
-        selected={days}
-        onSelect={setDays}
-        className="rounded-md border border-border"
-      />
-    );
-  },
-};
-
-export const Range: Story = {
-  render: () => {
-    const [range, setRange] = React.useState<DateRange | undefined>({
-      from: new Date(),
-      to: new Date(Date.now() + 7 * 24 * 3600 * 1000),
-    });
-    return (
-      <Calendar
-        mode="range"
-        selected={range}
-        onSelect={setRange}
-        numberOfMonths={2}
-        className="rounded-md border border-border"
-      />
-    );
-  },
-};