@xirang/ui

封装 Base UI（@base-ui/react），对外提供交互与样式一致的 React 组件。

定位

| 层级 | 职责 | |------|------| | @base-ui/react | 无样式、可访问性完备的原语（行为、键盘、ARIA） | | @xirang/ui | 统一 variant / size、Tailwind 视觉、设计 token | | 业务 / Studio 预览工程 | 只消费 @xirang/ui，不直接写 Base UI className |

与 @xirang/antd（Ant Design 主题封装）并列，面向 Tailwind + Base UI 技术栈。

Studio Editor 双栈

| 区域 | UI 栈 | |------|--------| | Editor 壳、属性面板 @xirang/setting | @xirang/antd | | 左侧物料、设计画布、默认预览工程 | @xirang/ui + @xirang/ui/setting |

物料原型见 src/settings/；editor 通过 @xirang/ui/setting 注册，render.tsx 与生成代码均 import 本包。Legacy 模板仍使用 @xirang/antd 物料。

组件

已封装 Base UI 全部公开组件（与 @base-ui/react 子路径一一对应），统一 Tailwind 视觉与 data-* 状态样式：

| 分类 | 导出示例 | |------|----------| | 通用 | Button, Separator, Avatar, ScrollArea, Progress, Meter, Toggle, ToggleGroup, Toolbar | | 表单 | Input, Textarea, Label, Field*, Checkbox, CheckboxGroup, Switch, Radio, RadioGroup, Select*, NumberField*, OTPField*, Slider*, Form, Fieldset* | | 布局 | Tabs*, Accordion*, Collapsible*, NavigationMenu* | | 浮层 | Dialog*, AlertDialog*, Drawer*, Popover*, Tooltip*, PreviewCard*, Menu*, ContextMenu*, Menubar, Toast* | | 输入增强 | Combobox*, Autocomplete* | | 提供者 | DirectionProvider, CSPProvider |

完整列表见 src/index.ts。低代码物料见 @xirang/ui/setting 的 category 分组。

样式

组件使用 Tailwind 工具类，需引入编译后的样式（与预览工程 src/index.css 同源 token）：

import "@xirang/ui/styles.css";

Editor 设计画布在 studio-canvas-root 内加载；构建：pnpm --filter @xirang/ui build（含 build:css）。

使用

import {
  Button,
  Field,
  Input,
  Label,
  Checkbox,
  Switch,
} from "@xirang/ui";

function ProfileForm() {
  return (
    <Field.Root name="email">
      <Field.Label>邮箱</Field.Label>
      <Input placeholder="[email protected]" />
      <Field.Description>用于登录与通知</Field.Description>
      <Field.Error />
    </Field.Root>
  );
}

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@xirang/ui";

<Tabs defaultValue="general">
  <TabsList>
    <TabsTrigger value="general">常规</TabsTrigger>
    <TabsTrigger value="security">安全</TabsTrigger>
  </TabsList>
  <TabsContent value="general">…</TabsContent>
</Tabs>

开发

cd studio
pnpm install
pnpm --filter @xirang/ui build

新增组件：在 src/components/ 封装对应 @base-ui/react/* 原语，经 src/index.ts 导出。