@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/menubar/menubar.tsx

@@ -1,232 +0,0 @@
-import * as React from 'react';
-import * as MenubarPrimitive from '@radix-ui/react-menubar';
-import { Check, ChevronRight, Circle } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-// Explicit `typeof` annotations sidestep TS2742 — without them the inferred
-// types reference deep `.pnpm/@radix-ui/react-context/...` paths which are
-// "not portable" and break declaration emit / consumer typechecks.
-const MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu;
-const MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group;
-const MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal;
-const MenubarSub: typeof MenubarPrimitive.Sub = MenubarPrimitive.Sub;
-const MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup =
-  MenubarPrimitive.RadioGroup;
-
-const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
-    ref={ref}
-    className={cn(
-      'flex h-9 items-center gap-1 rounded-md border border-border bg-background p-1 shadow-sm',
-      className,
-    )}
-    {...props}
-  />
-));
-Menubar.displayName = MenubarPrimitive.Root.displayName;
-
-const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex cursor-pointer select-none items-center rounded-sm px-3 py-1 text-xs font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-      className,
-    )}
-    {...props}
-  />
-));
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-
-const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto size-4" />
-  </MenubarPrimitive.SubTrigger>
-));
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-
-const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-50 min-w-menu overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-      className,
-    )}
-    {...props}
-  />
-));
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-
-const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-  (
-    { className, align = 'start', alignOffset = -4, sideOffset = 8, ...props },
-    ref,
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          'z-50 min-w-menu-md overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-          className,
-        )}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  ),
-);
-MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-
-const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  />
-));
-MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-
-const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Check className="size-4" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.CheckboxItem>
-));
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-
-const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Circle className="size-2 fill-current" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.RadioItem>
-));
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-
-const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn(
-      'px-2 py-1.5 text-xs font-semibold',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  />
-));
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-
-const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
-
-const MenubarShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => (
-  <span
-    className={cn(
-      'ml-auto text-xs tracking-widest text-muted-foreground',
-      className,
-    )}
-    {...props}
-  />
-);
-MenubarShortcut.displayName = 'MenubarShortcut';
-
-export {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarPortal,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
-};

package/src/components/native-select/native-select.meta.md

@@ -1,93 +0,0 @@
----
-id: native-select
-name: NativeSelect
-type: component
-category: deprecated
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 原生下拉
----
-
-# NativeSelect 原生下拉
-
-原生下拉选择 — shadcn 2025-10 新增。**原生 `<select>` 元素**的样式封装,零 JS 开销,移动端弹起系统 picker,直接参与 form `submit`。与 `Select`(Radix)互为补充,分别面向"原生友好"与"可定制项 UI"两种诉求。
-
-## When to use
-
-- 移动端表单(系统原生 picker 更熟悉,触屏体验更好)
-- 无 JS / SSR-first 场景
-- 不需要自定义选项 UI 的简单下拉(国家、省份、单位等)
-- 表单数据靠原生 `submit` 收集,不想引入受控状态
-
-## When NOT to use
-
-- 需要搜索 / 虚拟列表 / 自定义选项渲染 → `Select`(Radix)/ `Combobox`
-- 多选 → `Select multiple`(原生 multi 体验差)→ 用 Radix 版
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `wrapperClassName` | `string` | – | – | 容器额外 className(给外层 wrapper,而非 `<select>` 本身)。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add native-select` 时,以下 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 生成纪律
-
-- **用 children `<option>`** 而非 `options` 数组 — 保留原生 `<optgroup>` / `disabled` / `selected` 表达力
-- **`appearance-none`** 已禁掉浏览器默认箭头,我们用 lucide ChevronDown 替代 — **不要**自己再加箭头
-- **不要做受控** — 原生 select 在受控时不流畅(光标位置 / 滚动会跳);需要受控时直接用 Radix `Select`
-- **可访问性**:本组件无需额外 aria,原生 `<select>` 是最 accessible 的下拉之一
-- **移动端**:不要给 `<select>` 加自定义 `onTouchStart` / `onClick`,会破坏系统 picker
-
-## Examples
-
-```tsx
-import { NativeSelect } from '@/components/ui/native-select';
-
-// 基础
-<NativeSelect defaultValue="apple">
-  <option value="apple">苹果</option>
-  <option value="banana">香蕉</option>
-  <option value="cherry">樱桃</option>
-</NativeSelect>
-
-// 分组
-<NativeSelect>
-  <optgroup label="水果">
-    <option value="apple">苹果</option>
-    <option value="banana">香蕉</option>
-  </optgroup>
-  <optgroup label="蔬菜">
-    <option value="carrot">胡萝卜</option>
-  </optgroup>
-</NativeSelect>
-
-// 表单 submit
-<form action="/api/sort">
-  <NativeSelect name="sort" defaultValue="date">
-    <option value="date">按日期</option>
-    <option value="name">按名称</option>
-  </NativeSelect>
-</form>
-```

package/src/components/native-select/native-select.stories.tsx

@@ -1,83 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { NativeSelect } from './native-select';
-
-const meta: Meta<typeof NativeSelect> = {
-  title: '废弃 · Deprecated/NativeSelect',
-  component: NativeSelect,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n原生下拉选择 — 原生 `<select>` 元素的样式封装，零 JS 开销，移动端弹起系统 picker，直接参与 form submit。与 Radix `Select` 互为补充：NativeSelect 面向原生 / 移动端友好，Radix Select 面向自定义项 UI / 受控复杂表单。shadcn 2025-10 新增。',
-      },
-    },
-  },
-  argTypes: {
-    disabled: { control: 'boolean' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof NativeSelect>;
-
-export const Playground: Story = {
-  render: (args) => (
-    <NativeSelect {...args} defaultValue="apple" wrapperClassName="w-48">
-      <option value="apple">苹果</option>
-      <option value="banana">香蕉</option>
-      <option value="cherry">樱桃</option>
-    </NativeSelect>
-  ),
-};
-
-export const Grouped: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <NativeSelect defaultValue="apple" wrapperClassName="w-48">
-      <optgroup label="水果">
-        <option value="apple">苹果</option>
-        <option value="banana">香蕉</option>
-      </optgroup>
-      <optgroup label="蔬菜">
-        <option value="carrot">胡萝卜</option>
-        <option value="celery">芹菜</option>
-      </optgroup>
-    </NativeSelect>
-  ),
-};
-
-export const Disabled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <NativeSelect disabled defaultValue="apple" wrapperClassName="w-48">
-      <option value="apple">不可改</option>
-    </NativeSelect>
-  ),
-};
-
-export const InForm: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        const fd = new FormData(e.currentTarget);
-
-        alert(`提交: sort=${fd.get('sort')}`);
-      }}
-      className="flex items-center gap-2"
-    >
-      <NativeSelect name="sort" defaultValue="date" wrapperClassName="w-40">
-        <option value="date">按日期</option>
-        <option value="name">按名称</option>
-      </NativeSelect>
-      <button
-        type="submit"
-        className="rounded-md border border-border px-3 py-1 text-sm hover:bg-accent"
-      >
-        提交
-      </button>
-    </form>
-  ),
-};

package/src/components/native-select/native-select.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { ChevronDown } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-export interface NativeSelectProps
-  extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  /**
-   * 容器额外 className(给外层 wrapper,而非 `<select>` 本身)。
-   */
-  wrapperClassName?: string;
-}
-
-/**
- * 原生 `<select>` 包装 — shadcn 2025-10 新增。
- * 与 Radix `Select` 的区别:
- *   - **零 JS 开销**,移动端弹起系统原生 picker(更熟悉)
- *   - 表单 `submit` 直接带 value,不需要受控
- *   - 不支持自定义选项渲染(那是 Radix Select 的活)
- *
- * 用 `<NativeSelect><option>...</option></NativeSelect>` 而非 `options` 数组,
- * 保留原生标签的灵活性(`<optgroup>` 嵌套、disabled / selected 属性等)。
- */
-const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
-  ({ className, wrapperClassName, children, disabled, ...props }, ref) => (
-    <div
-      className={cn(
-        'relative inline-flex w-full items-center',
-        wrapperClassName,
-      )}
-    >
-      <select
-        ref={ref}
-        disabled={disabled}
-        className={cn(
-          'flex h-9 w-full appearance-none rounded-md border border-input bg-background py-1 pl-3 pr-8 text-xs shadow-sm',
-          'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-          'disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </select>
-      <ChevronDown
-        aria-hidden="true"
-        className="pointer-events-none absolute right-2 size-4 text-muted-foreground"
-      />
-    </div>
-  ),
-);
-NativeSelect.displayName = 'NativeSelect';
-
-export { NativeSelect };

package/src/components/navigation-menu/navigation-menu.meta.md

@@ -1,118 +0,0 @@
----
-id: navigation-menu
-name: NavigationMenu
-type: component
-category: deprecated
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 导航菜单
----
-
-# NavigationMenu 导航菜单
-
-主导航菜单 — Radix NavigationMenu。**用于网站 / 营销页 / 应用顶部主导航**(产品 / 文档 / 定价 / 关于)。
-**与 Menubar 区别**:NavigationMenu 是**网页级横向导航**(每项可有富 Content 面板,展示子页面预览);Menubar 是**应用级菜单**(文件 / 编辑等)。
-
-## When to use
-
-- 网站顶部主导航(产品 / 解决方案 / 资源 / 公司)
-- 后台应用顶栏页面级跳转
-- 多产品矩阵的入口面板
-
-## When NOT to use
-
-- 应用功能菜单 → `Menubar`
-- 单按钮下拉 → `DropdownMenu`
-- 侧边导航 → `Sidebar`
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `NavigationMenu`(Root) 的 props。
-
-<!-- auto:props:begin -->
-_(组件无 `<Name>Props` interface — props 详见 [`navigation-menu.tsx`](./navigation-menu.tsx))_
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add navigation-menu` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-navigation-menu@^1.2.0 class-variance-authority@^0.7.0 lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-> 完整子组件:`NavigationMenu` / `NavigationMenuList` / `NavigationMenuItem` / `NavigationMenuTrigger` / `NavigationMenuContent` / `NavigationMenuLink` / `NavigationMenuIndicator` / `NavigationMenuViewport` + `navigationMenuTriggerStyle`(给独立 Link 复用 trigger 视觉)。
-
-## AI 生成纪律
-
-- **`<NavigationMenuLink asChild>` 配 router**:Next.js / React Router 的 Link 嵌入,asChild 透传
-- **Content 面板内容富但克制**:常见结构是 grid + 条目卡片,**不要**塞表单 / 长文本
-- **Triger 文字 ≤ 4 字**:主导航文案极简
-- **不嵌套 NavigationMenu**:嵌套主导航是反模式
-
-## Examples
-
-```tsx
-import * as React from 'react';
-import {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuTrigger,
-  NavigationMenuContent,
-  NavigationMenuLink,
-  navigationMenuTriggerStyle,
-} from '@/components/ui/navigation-menu';
-
-<NavigationMenu>
-  <NavigationMenuList>
-    <NavigationMenuItem>
-      <NavigationMenuTrigger>产品</NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2">
-          <li>
-            <NavigationMenuLink asChild>
-              <a
-                href="/design"
-                className="block rounded-md p-3 hover:bg-accent"
-              >
-                <div className="text-sm font-medium">Design</div>
-                <p className="text-xs text-muted-foreground">
-                  设计体系与 tokens
-                </p>
-              </a>
-            </NavigationMenuLink>
-          </li>
-          <li>
-            <NavigationMenuLink asChild>
-              <a href="/ui" className="block rounded-md p-3 hover:bg-accent">
-                <div className="text-sm font-medium">UI</div>
-                <p className="text-xs text-muted-foreground">源码注入式组件</p>
-              </a>
-            </NavigationMenuLink>
-          </li>
-        </ul>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-    <NavigationMenuItem>
-      <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-        <a href="/docs">文档</a>
-      </NavigationMenuLink>
-    </NavigationMenuItem>
-  </NavigationMenuList>
-</NavigationMenu>;
-```