@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/calendar/index.tsx

@@ -0,0 +1,240 @@
+/**
+ * 日历 Calendar
+ *
+ * 单月日历面板，支持单选 / 多选 / 范围选择，基于 react-day-picker。
+ *
+ * @when
+ * - DatePicker 的内嵌日历面板
+ * - 独立的日期选择器
+ * - 日程展示
+ */
+'use client';
+
+import * as React from 'react';
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+  type Locale,
+} from 'react-day-picker';
+
+import { cn } from '@/lib/utils';
+import { Button, buttonVariants } from '@/components/button';
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronDownIcon,
+} from 'lucide-react';
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  locale,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        'group/calendar bg-background p-2 [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      locale={locale}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code, { month: 'short' }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn(
+          'relative flex flex-col gap-4 md:flex-row',
+          defaultClassNames.months,
+        ),
+        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
+        nav: cn(
+          'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-xs font-medium',
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          'relative rounded-md',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn(
+          'absolute inset-0 bg-popover opacity-0',
+          defaultClassNames.dropdown,
+        ),
+        caption_label: cn(
+          'font-medium select-none',
+          captionLayout === 'label'
+            ? 'text-xs'
+            : 'flex items-center gap-1 rounded-md text-xs [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        weekday: cn(
+          'flex-1 rounded-md text-xs font-normal text-muted-foreground select-none',
+          defaultClassNames.weekday,
+        ),
+        week: cn('mt-2 flex w-full', defaultClassNames.week),
+        week_number_header: cn(
+          'w-(--cell-size) select-none',
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          'text-xs text-muted-foreground select-none',
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          'group/day relative aspect-square h-full w-full rounded-md p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md',
+          props.showWeekNumber
+            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-md'
+            : '[&:first-child[data-selected=true]_button]:rounded-l-md',
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          'relative isolate z-0 rounded-l-md bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn(
+          'relative isolate z-0 rounded-r-md bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted',
+          defaultClassNames.range_end,
+        ),
+        today: cn(
+          'rounded-md bg-muted text-foreground data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          'text-muted-foreground aria-selected:text-muted-foreground',
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          'text-muted-foreground opacity-50',
+          defaultClassNames.disabled,
+        ),
+        hidden: cn('invisible', defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          );
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === 'left') {
+            return (
+              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
+            );
+          }
+
+          if (orientation === 'right') {
+            return (
+              <ChevronRightIcon
+                className={cn('size-4', className)}
+                {...props}
+              />
+            );
+          }
+
+          return (
+            <ChevronDownIcon className={cn('size-4', className)} {...props} />
+          );
+        },
+        DayButton: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  locale,
+  color: _color,
+  ...props
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString(locale?.code)}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 text-xs leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-1 group-data-[focused=true]/day:ring-ring data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground hover:text-foreground [&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };

package/src/components/calendar/meta.md

@@ -0,0 +1,36 @@
+# Calendar
+
+> 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
+
+## 描述
+
+日历 Calendar
+单月日历面板，支持单选 / 多选 / 范围选择，基于 react-day-picker。
+
+## 使用场景
+
+- DatePicker 的内嵌日历面板
+- 独立的日期选择器
+- 日程展示
+
+## 示例
+
+### Range
+
+范围选择模式。
+
+```tsx
+<Calendar
+  mode="range"
+  numberOfMonths={2}
+  className="rounded-lg border border-border"
+/>
+```
+
+### Multiple
+
+多选模式。
+
+```tsx
+<Calendar mode="multiple" className="rounded-lg border border-border" />
+```

package/src/components/calendar/stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Calendar } from './index';
+
+const meta = {
+  title: '数据展示 · Data Display/Calendar 日历',
+  component: Calendar,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Calendar>;
+export default meta;
+
+type Story = StoryObj<typeof Calendar>;
+
+/** 基础单日选择日历。 */
+export const Default: Story = {
+  render: () => (
+    <Calendar mode="single" className="rounded-lg border border-border" />
+  ),
+};
+
+/** 范围选择模式。 */
+export const Range: Story = {
+  render: () => (
+    <Calendar
+      mode="range"
+      numberOfMonths={2}
+      className="rounded-lg border border-border"
+    />
+  ),
+};
+
+/** 多选模式。 */
+export const Multiple: Story = {
+  render: () => (
+    <Calendar mode="multiple" className="rounded-lg border border-border" />
+  ),
+};

package/src/components/card/index.tsx

@@ -0,0 +1,262 @@
+/**
+ * 卡片 Card
+ *
+ * 将相关内容和操作分组展示的容器，支持 Header/Title/Description/Action/Content/Footer/Media/Divider 子组件组合。
+ *
+ * @when
+ * - 展示信息摘要（统计数据、用户信息、任务卡片）
+ * - 作为表单或内容的包裹容器
+ * - 列表 / 网格布局中的单元
+ * - 整卡作为入口链接（asChild + interactive）
+ * - 数据加载中需要骨架屏占位（loading）
+ *
+ * 折叠场景请改用 Accordion / Collapsible 与 Card 组合，不在 Card 内部内置。
+ */
+
+import * as React from 'react';
+import { Slot } from 'radix-ui';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+import { Skeleton } from '@/components/skeleton';
+
+// ─── Card cva ───────────────────────────────────────────────────────────────
+
+// 对齐 cloud-design 规范：
+// - 圆角 `rounded-md` 走 token（opentrek=8px / uni-manager=2px）
+// - 边框 `border border-border` (g10)
+// - 垂直 padding 20px (`py-5`) / sm 16px (`py-4`)
+// - normal 无阴影，hover 抬升
+const cardVariants = cva(
+  'group/card flex flex-col overflow-hidden rounded-md bg-card text-card-foreground text-sm has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-md *:[img:last-child]:rounded-b-md',
+  {
+    variants: {
+      variant: {
+        default: 'border border-border transition-shadow hover:shadow-md',
+        elevated:
+          'border border-border shadow-sm transition-shadow hover:shadow-md',
+        outlined: 'border border-border',
+        ghost: '',
+      },
+      size: {
+        default:
+          'gap-4 py-5 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0',
+        sm: 'gap-3 py-4 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0',
+      },
+      interactive: {
+        true: 'cursor-pointer transition-shadow hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+      interactive: false,
+    },
+  },
+);
+
+export type CardVariant = 'default' | 'elevated' | 'outlined' | 'ghost';
+export type CardSize = 'default' | 'sm';
+
+export interface CardProps
+  extends Omit<React.ComponentProps<'div'>, 'color'>,
+    VariantProps<typeof cardVariants> {
+  /** 视觉风格。default 带细描边、elevated 带阴影、outlined 仅描边、ghost 无修饰。 @default default */
+  variant?: CardVariant;
+  /** 尺寸：影响内边距与 gap。 @default default */
+  size?: CardSize;
+  /** 可交互态：hover 抬升 + cursor-pointer + focus ring，常配合 asChild 使用。 @default false */
+  interactive?: boolean;
+  /** Slot 模式：将容器渲染为子元素（如 `<a>` / `<button>`），实现整卡链接。 @default false */
+  asChild?: boolean;
+  /** 加载状态：true 时容器内渲染骨架屏占位，外层 size/variant 仍生效。 @default false */
+  loading?: boolean;
+}
+
+function Card({
+  className,
+  variant = 'default',
+  size = 'default',
+  interactive = false,
+  asChild = false,
+  loading = false,
+  children,
+  ...props
+}: CardProps) {
+  const Comp = asChild ? Slot.Root : 'div';
+
+  return (
+    <Comp
+      data-slot="card"
+      data-variant={variant}
+      data-size={size}
+      data-interactive={interactive || undefined}
+      data-loading={loading || undefined}
+      aria-busy={loading || undefined}
+      className={cn(cardVariants({ variant, size, interactive, className }))}
+      {...props}
+    >
+      {loading ? <CardLoadingFallback /> : children}
+    </Comp>
+  );
+}
+
+function CardLoadingFallback() {
+  return (
+    <div
+      data-slot="card-loading"
+      className="flex flex-col gap-3 px-5 group-data-[size=sm]/card:px-4"
+    >
+      <Skeleton className="h-4 w-2/5" />
+      <Skeleton className="h-3 w-full" />
+      <Skeleton className="h-3 w-4/5" />
+      <Skeleton className="h-3 w-3/5" />
+    </div>
+  );
+}
+
+// ─── Card Header / Title / Description / Action ─────────────────────────────
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-md px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        'font-heading text-sm leading-snug font-bold group-data-[size=sm]/card:text-xs',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-xs text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// ─── Card Content / Footer ──────────────────────────────────────────────────
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-5 text-xs group-data-[size=sm]/card:px-4', className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        'flex items-center rounded-b-md border-t border-border px-4 py-3 group-data-[size=sm]/card:px-3 group-data-[size=sm]/card:py-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// ─── Card Media ─────────────────────────────────────────────────────────────
+
+export interface CardMediaProps extends React.ComponentProps<'div'> {
+  /** 媒体位置：top 时清除卡片顶部内边距并启用顶部圆角，bottom 同理处理底部。 @default top */
+  position?: 'top' | 'bottom';
+  /** Slot 模式：将容器渲染为子元素（如 `<img>` / `<video>` 直接接管）。 @default false */
+  asChild?: boolean;
+}
+
+function CardMedia({
+  className,
+  position = 'top',
+  asChild = false,
+  ...props
+}: CardMediaProps) {
+  const Comp = asChild ? Slot.Root : 'div';
+  return (
+    <Comp
+      data-slot="card-media"
+      data-position={position}
+      className={cn(
+        'overflow-hidden',
+        position === 'top' &&
+          '-mt-5 rounded-t-md group-data-[size=sm]/card:-mt-4',
+        position === 'bottom' &&
+          '-mb-5 rounded-b-md group-data-[size=sm]/card:-mb-4',
+        '[&>img]:block [&>img]:w-full [&>video]:block [&>video]:w-full',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// ─── Card Divider ───────────────────────────────────────────────────────────
+
+export interface CardDividerProps extends React.ComponentProps<'hr'> {
+  /** 分割线是否向内缩进，缩进后两侧留出与内边距等宽的留白。 @default false */
+  inset?: boolean;
+}
+
+function CardDivider({ className, inset = false, ...props }: CardDividerProps) {
+  return (
+    <hr
+      data-slot="card-divider"
+      data-inset={inset || undefined}
+      className={cn(
+        'my-0 border-t border-border',
+        inset ? 'mx-4 group-data-[size=sm]/card:mx-3' : 'mx-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+  CardMedia,
+  CardDivider,
+  cardVariants,
+};