@teamix-evo/ui 0.4.0 → 0.5.0

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

@@ -1,88 +0,0 @@
----
-id: collapsible
-name: Collapsible
-type: component
-category: data-display
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 折叠面板
----
-
-# 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 -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `open` | `boolean` | – | – | 受控展开状态(等价 antd Collapse `activeKey` 单项模式)。 与 `defaultOpen` 二选一,不同时传。 |
-| `defaultOpen` | `boolean` | `false` | – | 非受控初始展开态。 |
-| `onOpenChange` | `(open: boolean) => void` | – | – | 展开状态变化回调 — Radix 命名。 |
-| `disabled` | `boolean` | `false` | – | 禁用展开/收起交互(灰化 Trigger + 不响应点击)。 |
-<!-- 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

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ChevronsUpDown } from 'lucide-react';
-import {
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-} from './collapsible';
-import { Button } from '@/components/button/button';
-
-const meta: Meta<typeof Collapsible> = {
-  title: '数据展示 · Data Display/Collapsible',
-  component: Collapsible,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '折叠面板 — 单区域展开收起，常用于“查看更多 / 收起”、表单高级选项开关等场景。Radix Collapsible 实现，shadcn 专有（antd Collapse 单 item 可模拟但语义粗糙）。',
-      },
-    },
-  },
-};
-
-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

@@ -1,105 +0,0 @@
-import * as React from 'react';
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-
-import { cn } from '@/utils/cn';
-
-// ─── CollapsibleProps(ADR 0025 合规:显式声明交互 props)─────────────────
-
-export interface CollapsibleProps
-  extends Omit<
-    React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>,
-    'open' | 'defaultOpen' | 'onOpenChange' | 'disabled'
-  > {
-  /**
-   * 受控展开状态(等价 antd Collapse `activeKey` 单项模式)。
-   * 与 `defaultOpen` 二选一,不同时传。
-   */
-  open?: boolean;
-  /**
-   * 非受控初始展开态。
-   * @default false
-   */
-  defaultOpen?: boolean;
-  /**
-   * 展开状态变化回调 — Radix 命名。
-   */
-  onOpenChange?: (open: boolean) => void;
-  /**
-   * 禁用展开/收起交互(灰化 Trigger + 不响应点击)。
-   * @default false
-   */
-  disabled?: boolean;
-}
-
-/**
- * 单区域展开 / 收起 — Radix Collapsible 的薄包装。
- *
- * 与 `Accordion` 的差异:Accordion 是多 item 列表(支持互斥单展开 / 多展开);
- * Collapsible 是**单个**区域,语义最简单 —— "更多内容" / "查看详情"。
- *
- * shadcn-only(antd Collapse 单 item 也可以模拟,但语义粗糙)。
- */
-const Collapsible = React.forwardRef<
-  React.ElementRef<typeof CollapsiblePrimitive.Root>,
-  CollapsibleProps
->(({ className, ...props }, ref) => (
-  <CollapsiblePrimitive.Root ref={ref} className={cn(className)} {...props} />
-));
-Collapsible.displayName = 'Collapsible';
-
-// ─── CollapsibleTrigger ─────────────────────────────────────────────────
-
-export interface CollapsibleTriggerProps
-  extends Omit<
-    React.ComponentPropsWithoutRef<
-      typeof CollapsiblePrimitive.CollapsibleTrigger
-    >,
-    'asChild'
-  > {
-  /**
-   * Slot 模式 — 子元素作为 trigger(不额外包裹 DOM)。
-   * @default false
-   */
-  asChild?: boolean;
-}
-
-const CollapsibleTrigger = React.forwardRef<
-  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleTrigger>,
-  CollapsibleTriggerProps
->(({ className, ...props }, ref) => (
-  <CollapsiblePrimitive.CollapsibleTrigger
-    ref={ref}
-    className={cn('cursor-pointer', className)}
-    {...props}
-  />
-));
-CollapsibleTrigger.displayName =
-  CollapsiblePrimitive.CollapsibleTrigger.displayName;
-
-// ─── CollapsibleContent ─────────────────────────────────────────────────
-
-export interface CollapsibleContentProps
-  extends React.ComponentPropsWithoutRef<
-    typeof CollapsiblePrimitive.CollapsibleContent
-  > {
-  /**
-   * 强制挂载(即使收起也保留 DOM,利于 SEO 或保持内部组件状态)。
-   * @default false
-   */
-  forceMount?: true;
-}
-
-const CollapsibleContent = React.forwardRef<
-  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
-  CollapsibleContentProps
->(({ className, ...props }, ref) => (
-  <CollapsiblePrimitive.CollapsibleContent
-    ref={ref}
-    className={cn(className)}
-    {...props}
-  />
-));
-CollapsibleContent.displayName =
-  CollapsiblePrimitive.CollapsibleContent.displayName;
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };

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

@@ -1,89 +0,0 @@
----
-id: color-picker
-name: ColorPicker
-displayName: 颜色选择
-type: component
-category: data-entry
-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
-
-## Props
-
-<!-- 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' \| 'md' \| '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 | 单行文本输入 — clearable / showCount / size(sm 24 / md 32 / lg 36,与 Button 同档)/ error 四档内建能力。前缀/后缀/addon 等复合形态已拆出独立 InputGroup;多行已拆出独立 Textarea |
-| `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集,使用 showArrow 控制尖角(与 Tooltip / HoverCard 命名统一) |
-
-### 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

@@ -1,159 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ColorPicker } from './color-picker';
-
-const meta: Meta<typeof ColorPicker> = {
-  title: '数据录入 · Data Entry/ColorPicker',
-  component: ColorPicker,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '颜色选择 —— 触发器色块 → Popover 面板,选取一个 `#RRGGBB` 或 `#RRGGBBAA` 颜色。基于原生 `<input type="color">` + Radix `Popover` + `Input` 组合,等价 antd `ColorPicker`(v5.5+):`value` / `defaultValue` / `onChange` 受控双轨、`allowAlpha` 透明度档(8 位 hex)、`presets` 预设色板、`size`(`sm`/`default`/`lg`)三档触发器、`disabled`。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 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 = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '基础颜色选择 —— uncontrolled,内部维护当前色,点击触发器弹出原生 color input + hex 文本输入双通道。',
-      },
-    },
-  },
-  render: (args) => <ColorPicker {...args} defaultValue="#f43f5e" />,
-};
-
-export const Controlled: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '受控形态 —— `value` + `onChange` 由消费侧持有真值,常用于"主题色配置 + 实时预览"场景。',
-      },
-    },
-  },
-  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 },
-    docs: {
-      description: {
-        story:
-          '预设色板 —— `presets` 数组渲染为面板底部色块,点击即写入 value。建议给 6~12 个品牌色,避免视觉混乱。',
-      },
-    },
-  },
-  render: () => (
-    <ColorPicker
-      defaultValue="#3b82f6"
-      presets={[
-        '#ef4444',
-        '#f59e0b',
-        '#eab308',
-        '#10b981',
-        '#06b6d4',
-        '#3b82f6',
-        '#8b5cf6',
-        '#ec4899',
-        '#000000',
-        '#ffffff',
-      ]}
-    />
-  ),
-};
-
-export const WithAlpha: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '透明度档 —— `allowAlpha` 启用后 value 自动变 8 位 hex,面板内多出 `Alpha` 滑块与百分比读数。',
-      },
-    },
-  },
-  render: () => <ColorPicker allowAlpha defaultValue="#3b82f680" />,
-};
-
-export const HexInput: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '自定义 hex 输入 —— 面板内嵌的 `Input` 接受手动 hex(`#RRGGBB` 或 `#RRGGBBAA`),不合法字符自动剥除,长度按 `allowAlpha` 截断。',
-      },
-    },
-  },
-  render: () => {
-    const [c, setC] = React.useState('#10b981');
-    return (
-      <div className="flex items-center gap-3">
-        <ColorPicker value={c} onChange={setC} allowAlpha />
-        <code className="rounded bg-muted px-2 py-1 text-xs">{c}</code>
-      </div>
-    );
-  },
-};
-
-export const Sizes: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '三档触发器尺寸 —— `sm` / `default` / `lg`,对齐其它表单控件高度档位。',
-      },
-    },
-  },
-  render: () => (
-    <div className="flex items-center gap-3">
-      <ColorPicker size="sm" defaultValue="#ef4444" />
-      <ColorPicker size="default" defaultValue="#10b981" />
-      <ColorPicker size="lg" defaultValue="#3b82f6" />
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '禁用态 —— 整组 `disabled`,点击不弹面板,触发器降透明度。仅用于只读语义,业务态锁定建议在 form 层处理。',
-      },
-    },
-  },
-  render: () => (
-    <div className="flex items-center gap-3">
-      <ColorPicker defaultValue="#3b82f6" disabled />
-      <ColorPicker defaultValue="#10b981" allowAlpha disabled />
-    </div>
-  ),
-};

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

@@ -1,171 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/utils/cn';
-import { Input } from '@/components/input/input';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/popover/popover';
-
-export interface ColorPickerProps {
-  /** 受控值 — `#RRGGBB` 或 `#RRGGBBAA`(开 `allowAlpha` 时)。 */
-  value?: string;
-  /** uncontrolled 初值。 @default "#000000" */
-  defaultValue?: string;
-  /** 值变化回调。 */
-  onChange?: (value: string) => void;
-  /**
-   * 是否允许透明度(antd `format=hex8` 类似行为) — 启用后展示 alpha 滑块,value 变为 8 位 hex。
-   * @default false
-   */
-  allowAlpha?: boolean;
-  /**
-   * 预设色块(antd `presets` 并集) — 一组常用颜色快捷选择。
-   */
-  presets?: string[];
-  /** 整体禁用。 */
-  disabled?: boolean;
-  /** 触发器尺寸。 @default "default" */
-  size?: 'sm' | 'md' | 'default' | 'lg';
-  /** 触发器 className。 */
-  className?: string;
-}
-
-function clampHex(hex: string, allowAlpha: boolean): string {
-  const cleaned = hex.replace(/[^0-9a-fA-F#]/g, '');
-  const withHash = cleaned.startsWith('#') ? cleaned : `#${cleaned}`;
-  const expected = allowAlpha ? 9 : 7;
-  return withHash.slice(0, expected);
-}
-
-/**
- * 颜色选择 — antd 独有补足。**等价 antd `ColorPicker`**(v5.5+)。基于原生
- * `<input type="color">` + alpha range 输入 + hex 文本输入 + 预设色块,
- * 提供"触发器(色块)→ 弹出面板"的标准交互。
- */
-const ColorPicker = React.forwardRef<HTMLButtonElement, ColorPickerProps>(
-  (
-    {
-      value,
-      // eslint-disable-next-line teamix-evo/no-color-literal -- ColorPicker default value is a hex literal by API contract (antd parity); not a styling decision.
-      defaultValue = '#000000',
-      onChange,
-      allowAlpha = false,
-      presets,
-      disabled = false,
-      size = 'md',
-      className,
-    },
-    ref,
-  ) => {
-    const isControlled = value !== undefined;
-    const [internal, setInternal] = React.useState<string>(defaultValue);
-    const current = isControlled ? value! : internal;
-
-    const update = (next: string) => {
-      const v = clampHex(next, allowAlpha);
-      if (!isControlled) setInternal(v);
-      onChange?.(v);
-    };
-
-    const baseHex = current.slice(0, 7);
-    const alphaHex =
-      allowAlpha && current.length >= 9 ? current.slice(7, 9) : 'ff';
-    const alphaInt = parseInt(alphaHex, 16);
-
-    const swatchSize =
-      size === 'sm' ? 'size-7' : size === 'lg' ? 'size-11' : 'size-9';
-
-    return (
-      <Popover>
-        <PopoverTrigger asChild>
-          <button
-            ref={ref}
-            type="button"
-            disabled={disabled}
-            className={cn(
-              'inline-flex cursor-pointer items-center justify-center rounded-md border border-input bg-background shadow-sm transition-colors',
-              'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-              'disabled:cursor-not-allowed disabled:opacity-50',
-              swatchSize,
-              className,
-            )}
-            aria-label="选择颜色"
-            style={{ padding: 2 }}
-          >
-            <span
-              className="block size-full rounded-sm"
-              style={{ backgroundColor: current }}
-            />
-          </button>
-        </PopoverTrigger>
-        <PopoverContent className="w-64 p-3" align="start">
-          <div className="flex flex-col gap-3">
-            <input
-              type="color"
-              value={baseHex}
-              disabled={disabled}
-              onChange={(e) =>
-                update(
-                  allowAlpha ? `${e.target.value}${alphaHex}` : e.target.value,
-                )
-              }
-              className="h-10 w-full cursor-pointer rounded-md border border-input bg-transparent"
-            />
-            {allowAlpha ? (
-              <div className="flex items-center gap-2">
-                <span className="w-12 text-xs text-muted-foreground">
-                  Alpha
-                </span>
-                <input
-                  type="range"
-                  min={0}
-                  max={255}
-                  value={alphaInt}
-                  disabled={disabled}
-                  onChange={(e) => {
-                    const a = Number(e.target.value)
-                      .toString(16)
-                      .padStart(2, '0');
-                    update(`${baseHex}${a}`);
-                  }}
-                  className="flex-1"
-                />
-                <span className="w-10 text-right text-xs tabular-nums">
-                  {Math.round((alphaInt / 255) * 100)}%
-                </span>
-              </div>
-            ) : null}
-            <Input
-              value={current}
-              disabled={disabled}
-              onChange={(e) => update(e.target.value)}
-              placeholder={allowAlpha ? '#RRGGBBAA' : '#RRGGBB'}
-            />
-            {presets && presets.length > 0 ? (
-              <div className="flex flex-wrap gap-1.5">
-                {presets.map((p) => (
-                  <button
-                    key={p}
-                    type="button"
-                    aria-label={p}
-                    onClick={() => update(p)}
-                    className={cn(
-                      'size-6 cursor-pointer rounded-sm border border-border ring-offset-background transition-all',
-                      'hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                    )}
-                    style={{ backgroundColor: p }}
-                  />
-                ))}
-              </div>
-            ) : null}
-          </div>
-        </PopoverContent>
-      </Popover>
-    );
-  },
-);
-ColorPicker.displayName = 'ColorPicker';
-
-export { ColorPicker };