@teamix-evo/ui 0.2.0 → 0.4.0

package/src/components/button/button.tsx

@@ -4,50 +4,186 @@ 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 items-center justify-center gap-2 whitespace-nowrap text-sm font-medium 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',
+  '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 shadow hover:bg-primary/90',
+          'bg-primary text-primary-foreground transition-shadow duration-150 hover:bg-primary/90',
         secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+          'bg-secondary text-secondary-foreground transition-shadow duration-150 hover:bg-secondary/80',
         destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+          'bg-destructive text-destructive-foreground transition-shadow duration-150 hover:bg-destructive/90',
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-input bg-card transition-shadow duration-150 hover:bg-muted hover:text-foreground',
         dashed:
-          'border border-dashed border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          '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 hover:underline',
+        link: 'text-primary underline-offset-4',
+      },
+      // ADR 0021 语义色 — 与 `variant` 双 prop 组合,覆盖语义而非视觉骨架。
+      // 典型组合: `variant="outline" color="destructive"` ⇒ 旧库 warning + outline 形态。
+      color: {
+        default: '',
+        primary: '',
+        destructive: '',
       },
       size: {
-        sm: 'h-8 px-3 text-xs',
-        default: 'h-9 px-4 py-2',
-        lg: 'h-10 px-8',
-        icon: 'h-9 w-9',
+        // 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: 'rounded-md',
+        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> {
@@ -55,48 +191,60 @@ export interface ButtonProps
    * 视觉风格,语义按 design token 走。
    * @default "default"
    */
-  variant?:
-    | 'default'
-    | 'secondary'
-    | 'destructive'
-    | 'outline'
-    | 'dashed'
-    | 'ghost'
-    | 'link';
+  variant?: ButtonVariant;
   /**
-   * 尺寸,`icon` 为正方形纯图标按钮。
+   * 语义色(ADR 0021)。与 `variant` 双 prop 组合表达"语义 × 视觉"两个维度,
+   * 例:`variant="outline" color="destructive"` 实现旧库 warning+outline 形态;
+   * `variant="ghost" color="destructive"` 实现轻量危险删除按钮。
    * @default "default"
    */
-  size?: 'sm' | 'default' | 'lg' | 'icon';
+  color?: ButtonColor;
   /**
-   * 形状,`circle` 配 `size="icon"` 得圆形按钮。
+   * 尺寸。`md` 与 `default` 等价,`icon` 为正方形纯图标按钮。
+   * 若包在 `<ButtonGroup size="..">` 中且本地未显式传值,自动继承 group 的 size。
    * @default "default"
    */
-  shape?: 'default' | 'round' | 'circle';
+  size?: ButtonSize;
+  /**
+   * 形状。`circle` / `square` 必须配 `size="icon"`。
+   * @default "default"
+   */
+  shape?: ButtonShape;
   /**
    * `true` 时撑满父容器宽度。
    * @default false
    */
   block?: boolean;
   /**
-   * 用 Radix Slot 模式渲染为子元素;此时 `loading` / `icon` 被忽略。
+   * 用 Radix Slot 模式渲染为子元素;此时 `loading` / `icon` / `iconRight` 被忽略。
    * @default false
    */
   asChild?: boolean;
   /**
-   * 显示自旋 spinner,自动 disabled,保留视觉宽度。
+   * 显示自旋 spinner,自动 `disabled` + `aria-busy=true`,保留视觉宽度。
    * @default false
    */
   loading?: boolean;
   /**
-   * 前置 / 后置图标(来自 `lucide-react`)。loading 时被 spinner 替换。
+   * 文本左侧图标。推荐 `lucide-react`。loading 时被 spinner 替换。
    */
   icon?: React.ReactNode;
   /**
-   * 图标 / spinner 相对文本的位置。
+   * 文本右侧图标。推荐 `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;
 }
@@ -106,21 +254,47 @@ 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, size, shape, block, className }),
+      buttonVariants({
+        variant,
+        color,
+        size: resolvedSize,
+        shape,
+        block,
+        iconOnly: isIconOnly,
+        className,
+      }),
     );
 
     if (asChild) {
@@ -131,30 +305,162 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       );
     }
 
-    const leading = loading ? (
+    const leadingNode = loading ? (
       <Loader2
         className="animate-spin motion-reduce:animate-none"
         aria-hidden="true"
       />
     ) : (
-      icon
+      resolvedIcon
     );
 
-    return (
+    const buttonEl = (
       <button
         ref={ref}
+        data-slot="button"
+        data-variant={variant}
         className={composedClassName}
         disabled={disabled || loading}
         aria-busy={loading || undefined}
         {...props}
       >
-        {iconPosition === 'start' && leading}
+        {leadingNode}
         {children}
-        {iconPosition === 'end' && leading}
+        {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';
 
-export { Button, buttonVariants };
+// ─── 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

@@ -3,7 +3,7 @@ id: calendar
 name: Calendar
 displayName: 日历
 type: component
-category: form
+category: data-display
 since: 0.1.0
 package: '@teamix-evo/ui'
 ---
@@ -33,13 +33,20 @@ package: '@teamix-evo/ui'
 > 以下表格由 `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` | –    | 是否显示当月范围外的日期(灰色填充,占位补齐周表格)。                             |
-
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `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 -->
 
 ## 依赖
@@ -47,15 +54,14 @@ package: '@teamix-evo/ui'
 > 以下表格由 `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 实现 + 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 依赖
 
@@ -64,7 +70,6 @@ package: '@teamix-evo/ui'
 ```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/)。

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: {
@@ -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"
       />
     );
   },