基础原语

这些组件使用现有 Base UI 运行时与 Vibecape 设计 token，不引入 Shadcn 视觉样式或运行时依赖。

<Accordion><AccordionItem value="details"><AccordionTrigger>详情</AccordionTrigger><AccordionContent>内容</AccordionContent></AccordionItem></Accordion>
<Alert variant="destructive"><AlertTitle>删除项目</AlertTitle></Alert>
<Progress value={60}><ProgressTrack><ProgressIndicator /></ProgressTrack></Progress>
<Avatar><AvatarImage src={avatar_url} /><AvatarFallback>DC</AvatarFallback></Avatar>
<InputGroup><InputGroupAddon>⌕</InputGroupAddon><InputGroupInput placeholder="搜索" /></InputGroup>

同时提供 AlertDialog、Drawer、Pagination、RadioGroup、ScrollArea 和 Table。

高复用交互原语

FileUpload 只将浏览器 File 对象回传给宿主。DataTable 接收数据与列定义，排序、请求和选择状态仍由应用管理。HoverCard 提供延迟展示的紧凑摘要，ResizablePanelGroup 用于组合可调整的工作区。

<FileUpload files={files} onFilesChange={set_files} accept="image/*" />
<DataTable data={rows} columns={columns} getRowId={(row) => row.id} />
<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="30%">导航</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel>内容</ResizablePanel>
</ResizablePanelGroup>

颜色主题

所有原语共用同一组语义变量：background、foreground、surface-subtle、control-surface、divider、interaction-hover、interaction-selected 和 primary。宿主通过 ThemeContainer 设置主题，不需要修改任何组件 class。

<ThemeContainer variant="slate" mode="dark">
  <Application />
</ThemeContainer>

展示站保持页面框架不变，只用 ThemeContainer 包裹组件展示区域。内置 neutral、zinc、slate、stone、blue 五套预设，且每套都同时支持浅色与深色外观。

主题容器

ThemeContainer 是整棵组件树的主题边界。它统一提供颜色、控件表面、边界、交互状态和浮层 token，具体组件不需要接收主题属性或增加主题 class。

import { Button, Input, ThemeContainer } from "@downcity/ui";

export function ThemedApplication() {
  return (
    <ThemeContainer variant="slate" mode="dark">
      <Input placeholder="项目名称" />
      <Button variant="primary">保存</Button>
    </ThemeContainer>
  );
}

variant 支持 neutral、zinc、slate、stone 和 blue，mode 支持 light 与 dark。Dropdown、ContextMenu、Select、Popover、Tooltip、HoverCard、Dialog、AlertDialog、Sheet、Drawer 与 ImagePreview 的浮层都会自动挂载到 ThemeContainer 内部，无需额外同步主题。Showcase 中每个组件使用 Neutral Light、Neutral Dark、Blue Light、Blue Dark 四个 ThemeContainer 对照块验证同一调用在不同环境中的表现。

基础原语

基础原语

高复用交互原语

颜色主题

主题容器

目录