@teamix-evo/ui 0.1.1

package/src/components/tag/tag.stories.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tag } from './tag';
+
+const meta: Meta<typeof Tag> = {
+  title: '基础原语 · Foundation/Tag',
+  component: Tag,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '标签 — 用户可关闭的关键词 / 分类标签(分类、筛选条件、博客标签)。6 种语义色 + closable + onClose。OpenTrek tokens 适配,等价 antd Tag(与 Badge 互补,Badge 偏状态徽标)。',
+      },
+    },
+  },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['default', 'primary', 'success', 'warning', 'error', 'info'],
+    },
+    closable: { control: 'boolean' },
+  },
+  args: { color: 'default', children: '标签', closable: false },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tag>;
+
+export const Playground: Story = {};
+
+export const Colors: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Tag>Default</Tag>
+      <Tag color="primary">Primary</Tag>
+      <Tag color="success">Success</Tag>
+      <Tag color="warning">Warning</Tag>
+      <Tag color="error">Error</Tag>
+      <Tag color="info">Info</Tag>
+    </div>
+  ),
+};
+
+export const Closable: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [tags, setTags] = React.useState(['React', 'Vue', 'Angular', 'Svelte']);
+    return (
+      <div className="flex flex-wrap gap-2">
+        {tags.map((t) => (
+          <Tag
+            key={t}
+            color="primary"
+            closable
+            onClose={() => setTags(tags.filter((x) => x !== t))}
+          >
+            {t}
+          </Tag>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Filters: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <span className="text-sm text-muted-foreground">已选筛选:</span>
+      <Tag closable>状态: 运行中</Tag>
+      <Tag closable>类型: 服务</Tag>
+      <Tag closable>地区: 杭州</Tag>
+    </div>
+  ),
+};

package/src/components/tag/tag.tsx

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+
+const tagVariants = cva(
+  'inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium transition-colors',
+  {
+    variants: {
+      color: {
+        default: 'border-border bg-muted text-foreground',
+        primary: 'border-primary/30 bg-primary/10 text-primary',
+        success: 'border-emerald-200 bg-emerald-50 text-emerald-700',
+        warning: 'border-amber-200 bg-amber-50 text-amber-700',
+        error: 'border-destructive/30 bg-destructive/10 text-destructive',
+        info: 'border-blue-200 bg-blue-50 text-blue-700',
+      },
+    },
+    defaultVariants: { color: 'default' },
+  },
+);
+
+export interface TagProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>,
+    VariantProps<typeof tagVariants> {
+  /**
+   * 语义颜色(antd `color` 并集) — 与 Badge 不同,Tag 偏向**用户可关闭的标签**(关键词 / 分类),Badge 偏向状态徽标。
+   * @default "default"
+   */
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+  /**
+   * 显示关闭按钮(antd `closable` 并集)。
+   * @default false
+   */
+  closable?: boolean;
+  /**
+   * 关闭回调。
+   */
+  onClose?: () => void;
+}
+
+const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
+  (
+    { color, closable = false, onClose, className, children, ...props },
+    ref,
+  ) => {
+    const [open, setOpen] = React.useState(true);
+    if (!open) return null;
+    return (
+      <span
+        ref={ref}
+        className={cn(tagVariants({ color }), className)}
+        {...props}
+      >
+        {children}
+        {closable ? (
+          <button
+            type="button"
+            aria-label="Close"
+            onClick={() => {
+              setOpen(false);
+              onClose?.();
+            }}
+            className="rounded-sm opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            <X className="size-3" />
+          </button>
+        ) : null}
+      </span>
+    );
+  },
+);
+Tag.displayName = 'Tag';
+
+// ─── CheckableTag(antd `Tag.CheckableTag` 并集)──────────────────────────
+
+export interface CheckableTagProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'> {
+  /** 是否选中(受控)。 */
+  checked: boolean;
+  /** 选中态变化回调。 */
+  onChange?: (next: boolean) => void;
+  /** 禁用。 */
+  disabled?: boolean;
+}
+
+const CheckableTag = React.forwardRef<HTMLSpanElement, CheckableTagProps>(
+  ({ checked, onChange, disabled, className, children, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="checkbox"
+      aria-checked={checked}
+      aria-disabled={disabled}
+      tabIndex={disabled ? -1 : 0}
+      onClick={() => {
+        if (!disabled) onChange?.(!checked);
+      }}
+      onKeyDown={(e) => {
+        if (!disabled && (e.key === ' ' || e.key === 'Enter')) {
+          e.preventDefault();
+          onChange?.(!checked);
+        }
+      }}
+      className={cn(
+        'inline-flex cursor-pointer items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium transition-colors',
+        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+        checked
+          ? 'border-primary bg-primary text-primary-foreground hover:bg-primary/90'
+          : 'border-border bg-muted text-foreground hover:bg-accent',
+        disabled && 'cursor-not-allowed opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  ),
+);
+CheckableTag.displayName = 'CheckableTag';
+
+// ─── CheckableTagGroup(antd v6 新增) ────────────────────────────────────
+
+export interface CheckableTagGroupOption {
+  /** 显示文本。 */
+  label: React.ReactNode;
+  /** 真实 value(受控集合的比对依据)。 */
+  value: string;
+  /** 禁用此项。 */
+  disabled?: boolean;
+}
+
+export interface CheckableTagGroupProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  /** 候选项数组。 */
+  options: CheckableTagGroupOption[];
+  /** 受控选中 value 集合。 */
+  value?: string[];
+  /** uncontrolled 初值。 */
+  defaultValue?: string[];
+  /** 选中变化回调。 */
+  onChange?: (next: string[]) => void;
+  /** 整组禁用。 */
+  disabled?: boolean;
+}
+
+const CheckableTagGroup = React.forwardRef<HTMLDivElement, CheckableTagGroupProps>(
+  (
+    { options, value, defaultValue, onChange, disabled, className, ...props },
+    ref,
+  ) => {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<string[]>(defaultValue ?? []);
+    const current = isControlled ? value! : internal;
+
+    const toggle = (v: string, next: boolean) => {
+      const arr = next ? [...current, v] : current.filter((x) => x !== v);
+      if (!isControlled) setInternal(arr);
+      onChange?.(arr);
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        className={cn('flex flex-wrap gap-2', className)}
+        {...props}
+      >
+        {options.map((opt) => (
+          <CheckableTag
+            key={opt.value}
+            checked={current.includes(opt.value)}
+            disabled={disabled || opt.disabled}
+            onChange={(c) => toggle(opt.value, c)}
+          >
+            {opt.label}
+          </CheckableTag>
+        ))}
+      </div>
+    );
+  },
+);
+CheckableTagGroup.displayName = 'CheckableTagGroup';
+
+export { Tag, CheckableTag, CheckableTagGroup, tagVariants };

package/src/components/textarea/textarea.meta.md

@@ -0,0 +1,83 @@
+---
+id: textarea
+name: Textarea
+type: component
+category: form
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Textarea
+
+多行文本输入 — shadcn 简洁基底 + antd 的 `autoSize / showCount`。
+
+## When to use
+
+- 多行内容输入(评论 / 反馈 / 描述 / 备注)
+- 配 `autoSize` 给"动态高度"输入
+- 配 `showCount + maxLength` 控制长度
+
+## When NOT to use
+
+- 单行 → `Input`
+- 富文本编辑 → 用 Tiptap / Lexical 等编辑器(超出本组件库范围)
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `autoSize` | `boolean \| { minRows?: number; maxRows?: number }` | `false` | – | 自动高度。`true` 时无上下限;传 `{ minRows, maxRows }` 时受限。 实现:监听 input 事件,把 textarea 设为 auto 后再读 scrollHeight。 |
+| `showCount` | `boolean` | `false` | – | 显示字符计数(antd `showCount` 并集);需配合 `maxLength`。 |
+| `value` | `string` | – | – | 受控值。 |
+| `defaultValue` | `string` | – | – | uncontrolled 初始值。 |
+| `rows` | `number` | `3` | – | 行数(autoSize 关闭时生效)。 |
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add textarea` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+_无 — 本组件不依赖任何 npm 包。_
+<!-- auto:deps:end -->
+
+> 透传所有 `<textarea>` 原生属性(`name` / `placeholder` / `disabled` / `onChange` / ...)。
+
+## AI 生成纪律
+
+- **`autoSize` 替代 `rows`**:autoSize 启用后 rows 被忽略;两者不要同时传
+- **autoSize 配 `maxRows` 防止失控**:不限的 autoSize 在长内容下会撑爆容器,推荐 `{ minRows: 3, maxRows: 8 }`
+- **`showCount` 必须配 `maxLength`**:无 maxLength 时 showCount 不显示
+- **粘贴长内容时 ResizeObserver**:autoSize 用 effect 监听 value 触发,粘贴大文本会自动调整;无需业务侧介入
+
+## Examples
+
+```tsx
+import { Textarea } from '@/components/ui/textarea';
+
+// 基础
+<Textarea placeholder="留下你的反馈..." />
+
+// 自动高度
+<Textarea autoSize={{ minRows: 3, maxRows: 8 }} placeholder="..." />
+
+// 字数统计
+<Textarea showCount maxLength={500} placeholder="不超过 500 字" />
+
+// 受控
+const [v, setV] = React.useState('');
+<Textarea value={v} onChange={(e) => setV(e.target.value)} />
+```

package/src/components/textarea/textarea.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Textarea } from './textarea';
+
+const meta: Meta<typeof Textarea> = {
+  title: '表单与输入 · Form/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '多行文本输入 — 用于输入多行文本信息。shadcn `Textarea` 原子 + antd `Input.TextArea` 的并集能力：支持 `autoSize`（传 `{ minRows, maxRows }` 随内容自适应高度）、`showCount` 发表字数计数、`maxLength` 限制。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+  argTypes: {
+    rows: { control: 'number' },
+    maxLength: { control: 'number' },
+    showCount: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    placeholder: { control: 'text' },
+  },
+  args: {
+    rows: 3,
+    placeholder: '请输入...',
+    showCount: false,
+    disabled: false,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Playground: Story = {};
+
+export const AutoSize: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Textarea
+      autoSize={{ minRows: 3, maxRows: 8 }}
+      placeholder="试试粘贴一段长文本看看高度变化..."
+    />
+  ),
+};
+
+export const ShowCount: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Textarea showCount maxLength={500} placeholder="不超过 500 字" />
+  ),
+};
+
+export const Disabled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <Textarea disabled defaultValue="这是只读的内容,不可编辑。" />,
+};

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+
+import { cn } from '@/utils/cn';
+
+export interface TextareaProps
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'rows'> {
+  /**
+   * 自动高度。`true` 时无上下限;传 `{ minRows, maxRows }` 时受限。
+   * 实现:监听 input 事件,把 textarea 设为 auto 后再读 scrollHeight。
+   * @default false
+   */
+  autoSize?: boolean | { minRows?: number; maxRows?: number };
+  /**
+   * 显示字符计数(antd `showCount` 并集);需配合 `maxLength`。
+   * @default false
+   */
+  showCount?: boolean;
+  /** 受控值。 */
+  value?: string;
+  /** uncontrolled 初始值。 */
+  defaultValue?: string;
+  /** 行数(autoSize 关闭时生效)。 @default 3 */
+  rows?: number;
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      className,
+      autoSize = false,
+      showCount = false,
+      value,
+      defaultValue,
+      rows = 3,
+      onChange,
+      maxLength,
+      ...props
+    },
+    ref,
+  ) => {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<string>(
+      defaultValue ?? '',
+    );
+    const current = isControlled ? value : internal;
+
+    const innerRef = React.useRef<HTMLTextAreaElement | null>(null);
+    React.useImperativeHandle(
+      ref,
+      () => innerRef.current as HTMLTextAreaElement,
+    );
+
+    const resize = React.useCallback(() => {
+      if (!autoSize) return;
+      const el = innerRef.current;
+      if (!el) return;
+      const cs = window.getComputedStyle(el);
+      const lineHeight =
+        parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.5;
+      const padTop = parseFloat(cs.paddingTop) || 0;
+      const padBottom = parseFloat(cs.paddingBottom) || 0;
+      el.style.height = 'auto';
+      const next = el.scrollHeight;
+      const opts = typeof autoSize === 'object' ? autoSize : {};
+      const minH =
+        (opts.minRows ?? 0) * lineHeight + padTop + padBottom;
+      const maxH = opts.maxRows
+        ? opts.maxRows * lineHeight + padTop + padBottom
+        : Number.POSITIVE_INFINITY;
+      el.style.height = `${Math.max(minH, Math.min(next, maxH))}px`;
+      el.style.overflowY = next > maxH ? 'auto' : 'hidden';
+    }, [autoSize]);
+
+    React.useEffect(resize, [resize, current]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      if (!isControlled) setInternal(e.target.value);
+      onChange?.(e);
+    };
+
+    const textarea = (
+      <textarea
+        ref={innerRef}
+        rows={autoSize ? undefined : rows}
+        value={isControlled ? value : undefined}
+        defaultValue={!isControlled ? defaultValue : undefined}
+        maxLength={maxLength}
+        onChange={handleChange}
+        className={cn(
+          'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          autoSize ? 'resize-none' : 'min-h-[80px]',
+          className,
+        )}
+        {...props}
+      />
+    );
+
+    if (showCount && maxLength) {
+      return (
+        <div className="space-y-1">
+          {textarea}
+          <div className="text-right text-xs text-muted-foreground tabular-nums">
+            {current?.length ?? 0} / {maxLength}
+          </div>
+        </div>
+      );
+    }
+    return textarea;
+  },
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/src/components/time-picker/time-picker.meta.md

@@ -0,0 +1,83 @@
+---
+id: time-picker
+name: TimePicker
+type: component
+category: form
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# TimePicker
+
+时间选择 — antd 独有补足。**等价 antd `TimePicker`** 的基础能力,基于原生 `<input type="time">` 样式封装(零 JS、移动端友好、SSR safe)。配 `DatePicker` 完成日期 + 时间填写。
+
+## When to use
+
+- 表单字段需要时分(可选秒)输入(会议预约、闹钟、营业时间)
+- 配 `DatePicker` 完整时间戳填写(日期 + 时间)
+
+## When NOT to use
+
+- 时间区间(开始 - 结束)→ 用两个 TimePicker 并排,或后续基于 Popover 自实现 RangeTimePicker
+- 日期 → `DatePicker`(日期 + 时间二合一也可在 DatePicker 上拓展)
+- 复杂禁用规则 / 自定义面板:当前实现走原生,**不支持** `disabledHours` / `disabledMinutes` 等 antd 高级 API — 需要时基于 Popover + ListBox 自实现
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `value` | `string` | – | – | 受控值(`HH:mm` 或 `HH:mm:ss`)— 空串表示未选。 |
+| `defaultValue` | `string` | – | – | uncontrolled 初值。 |
+| `onChange` | `(value: string) => void` | – | – | 值变化回调(实时,跟随原生 input)。 |
+| `showSeconds` | `boolean` | `false` | – | 是否显示秒(antd `showSeconds` 并集)— 关闭时原生 input 仅显示 HH:mm。 |
+| `step` | `number` | `60` | – | 步长(秒) — 影响原生 picker 的滚动粒度,e.g. 60 = 一分钟一档。 |
+| `size` | `'sm' \| 'default' \| 'lg'` | `"default"` | – | 尺寸。 |
+<!-- auto:props:end -->
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add time-picker` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add lucide-react@^0.460.0
+```
+<!-- auto:deps:end -->
+
+## AI 生成纪律
+
+- **value 格式必为 `HH:mm` 或 `HH:mm:ss`** — 与原生 input[type=time] 一致,**不要**传 ISO 字符串
+- **`showSeconds=true` 才会显示秒** — 默认隐藏,绝大多数场景不需要秒
+- **`step`** 单位是**秒**(原生规范) — `step=900` 表示 15 分钟一档
+- **空状态用空字符串** `""`,不要传 `null` / `undefined`(原生 input 不接受 null)
+- **当前实现不支持 12 小时制 / AM-PM** — 浏览器根据系统 locale 自动决定显示格式;**不要**手动加 AM/PM 字段
+
+## Examples
+
+```tsx
+import { TimePicker } from '@/components/ui/time-picker';
+import * as React from 'react';
+
+// 基础(HH:mm)
+<TimePicker defaultValue="09:30" />
+
+// 受控 + 秒
+const [t, setT] = React.useState('09:30:00');
+<TimePicker value={t} onChange={setT} showSeconds />
+
+// 15 分钟一档
+<TimePicker step={15 * 60} />
+
+// 与 DatePicker 配对
+<div className="flex gap-2">
+  <DatePicker />
+  <TimePicker />
+</div>
+```

package/src/components/time-picker/time-picker.stories.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { TimePicker } from './time-picker';
+
+const meta: Meta<typeof TimePicker> = {
+  title: '表单与输入 · Form/TimePicker',
+  component: TimePicker,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '时间选择 — 基于原生 input[type=time] 样式封装(零 JS、移动端友好、SSR safe)。等价 antd `TimePicker` 基础能力,复杂禁用规则需自实现。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+      },
+    },
+  },
+  argTypes: {
+    size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
+    showSeconds: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  args: { size: 'default', showSeconds: false, disabled: false },
+};
+
+export default meta;
+type Story = StoryObj<typeof TimePicker>;
+
+export const Playground: Story = {
+  render: (args) => <TimePicker {...args} defaultValue="09:30" />,
+};
+
+export const Controlled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [t, setT] = React.useState('09:30:00');
+    return (
+      <div className="flex items-center gap-3">
+        <TimePicker value={t} onChange={setT} showSeconds />
+        <span className="text-sm text-muted-foreground tabular-nums">{t || '(空)'}</span>
+      </div>
+    );
+  },
+};
+
+export const QuarterHourStep: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <TimePicker showSeconds step={15 * 60} defaultValue="10:00:00" />,
+};
+
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      <TimePicker size="sm" defaultValue="09:00" />
+      <TimePicker size="default" defaultValue="09:00" />
+      <TimePicker size="lg" defaultValue="09:00" />
+    </div>
+  ),
+};