@teamix-evo/ui 0.1.1

package/src/components/checkbox/checkbox.meta.md

@@ -0,0 +1,99 @@
+---
+id: checkbox
+name: Checkbox
+type: component
+category: form
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Checkbox
+
+复选框 — Radix Checkbox(原生支持 indeterminate)+ antd `Checkbox.Group`(`options` 数组驱动)。
+
+## When to use
+
+- 多选场景(待提交,如表单)
+- 单独的开关(同意条款)
+- 列表多选 + 全选(配 indeterminate)
+
+## When NOT to use
+
+- 立即生效 → 用 `Switch`
+- 互斥单选 → 用 `RadioGroup`
+- 工具栏图标按钮 → 用 `Toggle`
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
+
+<!-- auto:props:begin -->
+_(no props)_
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add checkbox` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add @radix-ui/react-checkbox@^1.1.0 lucide-react@^0.460.0
+```
+<!-- auto:deps:end -->
+
+> 透传 Radix Checkbox.Root 所有 props(`checked` / `defaultChecked` / `onCheckedChange` / `disabled` / `required` / `name` / `value` 等)。
+> 子组件 `CheckboxGroup` 的 props 详见 [`checkbox.tsx`](./checkbox.tsx) 的 `CheckboxGroupProps`。
+
+## AI 生成纪律
+
+- **`checked="indeterminate"` 不是布尔**:Radix 用字面量 `'indeterminate'` 表示半选,**不要**传 number 或其他值
+- **全选 + 半选模式**:列表全选场景 — 全选用 `checked={all}`,部分选用 `checked="indeterminate"`,父级 onCheckedChange 触发批量选/全清
+- **必带 Label**:Checkbox 单独无文字,必须 `<label>...<Checkbox /></label>` 或 `<Checkbox id /> + <Label htmlFor>`
+- **`CheckboxGroup` options 必须有稳定的 `value`**:不要用 index 或动态值;否则 controlled diff 失效
+- **disabled 优先级**:整组 `disabled={true}` 会覆盖单项的 `disabled={false}`
+
+## Examples
+
+```tsx
+import { Checkbox, CheckboxGroup } from '@/components/ui/checkbox';
+
+// 单个
+<label className="flex items-center gap-2">
+  <Checkbox /> 接受用户协议
+</label>
+
+// 半选(全选模式的父框)
+const all = items.length > 0 && items.every(i => i.checked);
+const some = items.some(i => i.checked);
+<Checkbox
+  checked={all ? true : some ? 'indeterminate' : false}
+  onCheckedChange={(c) => setAll(c === true)}
+/>
+
+// Group
+const [v, setV] = React.useState(['apple']);
+<CheckboxGroup
+  value={v}
+  onChange={setV}
+  options={[
+    { label: '苹果', value: 'apple' },
+    { label: '香蕉', value: 'banana' },
+    { label: '橘子', value: 'orange', disabled: true },
+  ]}
+/>
+
+// Group 纵向
+<CheckboxGroup orientation="vertical" options={...} defaultValue={[]} />
+```

package/src/components/checkbox/checkbox.stories.tsx

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox, CheckboxGroup } from './checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: '表单与输入 · Form/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '复选框 — 在一组选项中进行多选，或单独切换某个布尔状态。基于 Radix Checkbox(原生可访问 + indeterminate 三态) + antd `Checkbox.Group` 批量管理；支持受控 / 非受控、`disabled`、中间态。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+      },
+    },
+  },
+  argTypes: {
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Playground: Story = {
+  args: { defaultChecked: false },
+  render: (args) => (
+    <label className="flex items-center gap-2 text-sm">
+      <Checkbox {...args} />
+      接受用户协议
+    </label>
+  ),
+};
+
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-2 text-sm">
+      <label className="flex items-center gap-2">
+        <Checkbox /> 默认
+      </label>
+      <label className="flex items-center gap-2">
+        <Checkbox defaultChecked /> 已选
+      </label>
+      <label className="flex items-center gap-2 opacity-60">
+        <Checkbox disabled /> 禁用
+      </label>
+      <label className="flex items-center gap-2 opacity-60">
+        <Checkbox disabled defaultChecked /> 禁用已选
+      </label>
+    </div>
+  ),
+};
+
+export const Indeterminate: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [items, setItems] = React.useState([
+      { id: 1, label: '苹果', checked: true },
+      { id: 2, label: '香蕉', checked: false },
+      { id: 3, label: '橘子', checked: true },
+    ]);
+    const all = items.every((i) => i.checked);
+    const some = items.some((i) => i.checked);
+    return (
+      <div className="flex flex-col gap-2 text-sm">
+        <label className="flex items-center gap-2 font-medium">
+          <Checkbox
+            checked={all ? true : some ? 'indeterminate' : false}
+            onCheckedChange={(c) =>
+              setItems(items.map((it) => ({ ...it, checked: c === true })))
+            }
+          />
+          全选
+        </label>
+        <div className="ml-6 flex flex-col gap-1">
+          {items.map((it) => (
+            <label key={it.id} className="flex items-center gap-2">
+              <Checkbox
+                checked={it.checked}
+                onCheckedChange={(c) =>
+                  setItems(
+                    items.map((x) =>
+                      x.id === it.id ? { ...x, checked: c === true } : x,
+                    ),
+                  )
+                }
+              />
+              {it.label}
+            </label>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Group: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [v, setV] = React.useState<string[]>(['apple']);
+    return (
+      <CheckboxGroup
+        value={v}
+        onChange={setV}
+        options={[
+          { label: '苹果', value: 'apple' },
+          { label: '香蕉', value: 'banana' },
+          { label: '橘子', value: 'orange', disabled: true },
+        ]}
+      />
+    );
+  },
+};
+
+export const VerticalGroup: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <CheckboxGroup
+      orientation="vertical"
+      defaultValue={['email']}
+      options={[
+        { label: '邮件', value: 'email' },
+        { label: '短信', value: 'sms' },
+        { label: '推送', value: 'push' },
+      ]}
+    />
+  ),
+};

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check, Minus } from 'lucide-react';
+
+import { cn } from '@/utils/cn';
+
+export interface CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {}
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer size-4 shrink-0 rounded-sm border border-primary shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      {/* Radix sets data-state="indeterminate" automatically when checked === "indeterminate" */}
+      {props.checked === 'indeterminate' ? (
+        <Minus className="size-3" />
+      ) : (
+        <Check className="size-3" />
+      )}
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+// ─── CheckboxGroup(antd 并集)─────────────────────────────────────────────
+
+export interface CheckboxGroupOption {
+  label: React.ReactNode;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface CheckboxGroupProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  /** 选项数据。 */
+  options: CheckboxGroupOption[];
+  /** 受控值;`string[]` 表示当前选中的 value 集合。 */
+  value?: string[];
+  /** uncontrolled 初值。 */
+  defaultValue?: string[];
+  /** 整组禁用。 */
+  disabled?: boolean;
+  /** 整组的 name(submitted form 用)。 */
+  name?: string;
+  /**
+   * 排列方向。
+   * @default "horizontal"
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /** 选中变化回调。 */
+  onChange?: (next: string[]) => void;
+}
+
+const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  (
+    {
+      className,
+      options,
+      value,
+      defaultValue,
+      disabled,
+      name,
+      orientation = 'horizontal',
+      onChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<string[]>(defaultValue ?? []);
+    const current = isControlled ? value! : internal;
+
+    const toggle = (val: string, checked: boolean) => {
+      const next = checked ? [...current, val] : current.filter((v) => v !== val);
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        className={cn(
+          'flex gap-4',
+          orientation === 'vertical' && 'flex-col gap-2',
+          className,
+        )}
+        {...props}
+      >
+        {options.map((opt) => (
+          <label
+            key={opt.value}
+            className={cn(
+              'flex items-center gap-2 text-sm',
+              (disabled || opt.disabled) && 'cursor-not-allowed opacity-60',
+            )}
+          >
+            <Checkbox
+              name={name}
+              value={opt.value}
+              checked={current.includes(opt.value)}
+              disabled={disabled || opt.disabled}
+              onCheckedChange={(c) => toggle(opt.value, c === true)}
+            />
+            <span>{opt.label}</span>
+          </label>
+        ))}
+      </div>
+    );
+  },
+);
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+export { Checkbox, CheckboxGroup };

package/src/components/collapsible/collapsible.meta.md

@@ -0,0 +1,80 @@
+---
+id: collapsible
+name: Collapsible
+type: component
+category: navigation
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Collapsible
+
+单区域展开收起 — Radix Collapsible 薄包装。**shadcn-only**(antd Collapse 单 item 也可以模拟,但语义粗糙)。
+
+## When to use
+
+- 详情页"查看更多 / 收起"
+- 行内"展开评论"按钮 + 折叠区
+- 表单的"高级选项"开关折叠
+
+## When NOT to use
+
+- 多个折叠项 → `Accordion`
+- 平级 tab 切换 → `Tabs`
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。`Collapsible` 是 `CollapsibleRoot` 别名,接受 Radix 的 `open / defaultOpen / onOpenChange / disabled`。
+
+<!-- auto:props:begin -->
+_(组件无 `<Name>Props` interface — props 详见 [`collapsible.tsx`](./collapsible.tsx))_
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+_无 — 本组件不依赖其他 ui entry。_
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add @radix-ui/react-collapsible@^1.1.0
+```
+<!-- auto:deps:end -->
+
+> 子组件:`Collapsible` / `CollapsibleTrigger`(触发器)/ `CollapsibleContent`(可折叠内容)。
+
+## AI 生成纪律
+
+- **Trigger 用 `asChild`**:把已有按钮 wrap,而不是新增层级
+- **`defaultOpen` 给初始视觉**:首次访问就该展开的内容显式声明 `defaultOpen`
+- **不嵌套 Collapsible**:嵌套折叠是反模式;改用 `Accordion type="multiple"`
+
+## Examples
+
+```tsx
+import {
+  Collapsible, CollapsibleTrigger, CollapsibleContent,
+} from '@/components/ui/collapsible';
+import { Button } from '@/components/ui/button';
+import { ChevronsUpDown } from 'lucide-react';
+
+<Collapsible className="w-72">
+  <CollapsibleTrigger asChild>
+    <Button variant="ghost" size="sm" className="w-full justify-between">
+      高级选项
+      <ChevronsUpDown />
+    </Button>
+  </CollapsibleTrigger>
+  <CollapsibleContent className="space-y-2 pt-2">
+    <p className="text-sm text-muted-foreground">高级配置 1</p>
+    <p className="text-sm text-muted-foreground">高级配置 2</p>
+  </CollapsibleContent>
+</Collapsible>
+```

package/src/components/collapsible/collapsible.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChevronsUpDown } from 'lucide-react';
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from './collapsible';
+import { Button } from '@/components/button/button';
+
+const meta: Meta<typeof Collapsible> = {
+  title: '导航 · Navigation/Collapsible',
+  component: Collapsible,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+
+export const Default: Story = {
+  render: () => (
+    <Collapsible className="w-72">
+      <CollapsibleTrigger asChild>
+        <Button variant="ghost" size="sm" className="w-full justify-between">
+          高级选项
+          <ChevronsUpDown />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="space-y-2 pt-2 px-2">
+        <p className="text-sm text-muted-foreground">- 自动重启策略</p>
+        <p className="text-sm text-muted-foreground">- 容器健康检查</p>
+        <p className="text-sm text-muted-foreground">- 资源限制</p>
+      </CollapsibleContent>
+    </Collapsible>
+  ),
+};

package/src/components/collapsible/collapsible.tsx

@@ -0,0 +1,18 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+/**
+ * 单区域展开 / 收起 — Radix Collapsible 的薄包装。
+ *
+ * 与 `Accordion` 的差异:Accordion 是多 item 列表(支持互斥单展开 / 多展开);
+ * Collapsible 是**单个**区域,语义最简单 —— "更多内容" / "查看详情"。
+ *
+ * shadcn-only(antd Collapse 单 item 也可以模拟,但语义粗糙)。
+ */
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+export type CollapsibleProps = React.ComponentPropsWithoutRef<
+  typeof CollapsiblePrimitive.Root
+>;

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

@@ -0,0 +1,84 @@
+---
+id: color-picker
+name: ColorPicker
+type: component
+category: form
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# ColorPicker
+
+颜色选择 — antd 独有补足。**等价 antd `ColorPicker`**(v5.5+)。基于原生 `<input type="color">` + alpha 滑块 + hex 文本输入 + 预设色块,提供"触发器(色块)→ 弹出面板"的标准交互。可选透明度(8 位 hex)。
+
+## When to use
+
+- 主题色 / 品牌色配置
+- 文档 / 笔记的文字 / 高亮色选择
+- 设计工具的填充色 / 描边色
+- 标签 / 分类的色彩自定义
+
+## When NOT to use
+
+- 仅几个预设色 → `RadioGroup` 配色块更简洁
+- 渐变 / 多色阶 → 当前不支持,需配合第三方 picker
+- HSL / RGB 各通道独立调节 → 当前仅 hex + alpha,复杂场景建议引入专业 picker
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `value` | `string` | – | – | 受控值 — `#RRGGBB` 或 `#RRGGBBAA`(开 `allowAlpha` 时)。 |
+| `defaultValue` | `string` | `"#000000"` | – | uncontrolled 初值。 |
+| `onChange` | `(value: string) => void` | – | – | 值变化回调。 |
+| `allowAlpha` | `boolean` | `false` | – | 是否允许透明度(antd `format=hex8` 类似行为) — 启用后展示 alpha 滑块,value 变为 8 位 hex。 |
+| `presets` | `string[]` | – | – | 预设色块(antd `presets` 并集) — 一组常用颜色快捷选择。 |
+| `disabled` | `boolean` | – | – | 整体禁用。 |
+| `size` | `'sm' \| 'default' \| 'lg'` | `"default"` | – | 触发器尺寸。 |
+| `className` | `string` | – | – | 触发器 className。 |
+<!-- auto:props:end -->
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add color-picker` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+| `input` | component | 文本输入 — shadcn 简洁基底 + antd prefix/suffix/clearable/showCount/addonBefore/addonAfter/size |
+| `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集 |
+
+### npm 依赖
+
+_无 — 本组件不依赖任何 npm 包。_
+<!-- auto:deps:end -->
+
+## AI 生成纪律
+
+- **value 必须是 `#RRGGBB`(6位)或 `#RRGGBBAA`(8位 + 透明度)** — 不接受 `rgb()` / `hsl()` / 命名色
+- **`allowAlpha=true`** 时 value 自动变为 8 位 hex;关闭时即使有 alpha 也会被截断到 6 位
+- **`presets`** 应是品牌色板而非随手凑数 — 6-12 个 stable 颜色为佳,避免视觉混乱
+- **`disabled`** 是只读语义 — 配 value 展示当前选中色;**不要**用做"暂时锁定"等业务态(用 form-level 控制)
+- **触发器是色块本身**,内部 padding 留出 2px 边框 — 不要在外面再裹一层 border
+- **不要在 Popover 关闭时清空 value** — onChange 已是单一真值,无需 commit/cancel 区分
+
+## Examples
+
+```tsx
+import { ColorPicker } from '@/components/ui/color-picker';
+import * as React from 'react';
+
+// 基础
+<ColorPicker defaultValue="#f43f5e" />
+
+// 受控 + 预设色
+const [c, setC] = React.useState('#3b82f6');
+<ColorPicker
+  value={c}
+  onChange={setC}
+  presets={['#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ec4899']}
+/>
+
+// 带透明度
+<ColorPicker allowAlpha defaultValue="#3b82f680" />
+```

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

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ColorPicker } from './color-picker';
+
+const meta: Meta<typeof ColorPicker> = {
+  title: '表单与输入 · Form/ColorPicker',
+  component: ColorPicker,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '颜色选择 — 触发器色块 → Popover 面板(原生 color input + alpha + hex 输入 + 预设色板)。可选 8 位 hex(含透明度)。等价 antd `ColorPicker`(v5.5+)。视觉走 OpenTrek tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
+      },
+    },
+  },
+  argTypes: {
+    size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
+    allowAlpha: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  args: { size: 'default', allowAlpha: false, disabled: false },
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPicker>;
+
+export const Playground: Story = {
+  render: (args) => <ColorPicker {...args} defaultValue="#f43f5e" />,
+};
+
+export const Controlled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [c, setC] = React.useState('#3b82f6');
+    return (
+      <div className="flex items-center gap-3">
+        <ColorPicker value={c} onChange={setC} />
+        <span className="text-sm tabular-nums">{c}</span>
+      </div>
+    );
+  },
+};
+
+export const WithPresets: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <ColorPicker
+      defaultValue="#3b82f6"
+      presets={[
+        '#ef4444',
+        '#f59e0b',
+        '#eab308',
+        '#10b981',
+        '#06b6d4',
+        '#3b82f6',
+        '#8b5cf6',
+        '#ec4899',
+        '#000000',
+        '#ffffff',
+      ]}
+    />
+  ),
+};
+
+export const WithAlpha: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <ColorPicker allowAlpha defaultValue="#3b82f680" />,
+};
+
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      <ColorPicker size="sm" defaultValue="#ef4444" />
+      <ColorPicker size="default" defaultValue="#10b981" />
+      <ColorPicker size="lg" defaultValue="#3b82f6" />
+    </div>
+  ),
+};