@orbit-work/ui 0.1.0

package/src/components/primitives/Switch/index.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import { useCallback, useState } from "react"
+import { cn } from "../../../lib/utils"
+
+export type SwitchProps = {
+  checked?: boolean
+  defaultChecked?: boolean
+  onChange?: (checked: boolean) => void
+  disabled?: boolean
+  className?: string
+  id?: string
+  "aria-label"?: string
+}
+
+/**
+ * Switch — Orbitwork DS 2.0
+ * 36×20px track, 16px knob travelling 2 → 18（A2-B3 · 原型 2553–2555；原为 34×20，
+ * 旋钮走 2 → 16）。ON track = --ow-control-on (achromatic pole, never beacon
+ * yellow), knob = --ow-control-on-glyph; OFF track = --ow-control-off,
+ * knob = --ow-control-knob. Knob travel: 200ms (--ow-dur-2) with
+ * --ow-ease-beacon (§9). Disabled is per-token (§6)：底 --ow-disabled-bg ＋ 1px
+ * --ow-disabled-border ＋ 14 的钝旋钮（原型 2452 的假开关就是 14），旋钮色留
+ * --ow-disabled-text 不取原型的 --ow-control-knob —— 浅档 control-knob 是纯白，
+ * 压在 --ow-disabled-bg(gray-05) 上等于看不见，禁用行会读成「没有控件」。
+ * Hit target padded to 36×24 via ::after without changing the 20px visual (§7 命中区 ≥24).
+ */
+export function Switch({
+  checked,
+  defaultChecked = false,
+  onChange,
+  disabled,
+  className = "",
+  id,
+  "aria-label": ariaLabel,
+}: SwitchProps) {
+  const [internalChecked, setInternalChecked] = useState(defaultChecked)
+  const isChecked = checked ?? internalChecked
+
+  const toggle = useCallback(() => {
+    if (disabled) return
+    const next = !isChecked
+    setInternalChecked(next)
+    onChange?.(next)
+  }, [isChecked, disabled, onChange])
+
+  return (
+    <button
+      id={id}
+      type="button"
+      role="switch"
+      aria-checked={isChecked}
+      aria-label={ariaLabel}
+      disabled={disabled}
+      data-slot="switch"
+      data-ow-part="control"
+      data-ow-role={isChecked ? "on" : "off"}
+      className={cn(
+        "relative inline-flex items-center w-9 h-5 rounded-full border-none p-0",
+        // ≥24px vertical hit target without growing the 20px visual (§7)
+        "after:content-[''] after:absolute after:-inset-y-0.5 after:inset-x-0",
+        "transition-[background-color] duration-[var(--ow-dur-2)] ease-[var(--ow-ease-beacon)]",
+        // R2：焦点语法归一到 .ow-focus-ring（同 Checkbox/Radio/Button）。
+        "ow-focus-ring",
+        isChecked ? "bg-[var(--ow-control-on)]" : "bg-[var(--ow-control-off)] hover:bg-[var(--ow-border-strong)]",
+        disabled
+          ? "cursor-not-allowed bg-[var(--ow-disabled-bg)] hover:bg-[var(--ow-disabled-bg)] border border-solid border-[color:var(--ow-disabled-border)]"
+          : "cursor-pointer",
+        className,
+      )}
+      onClick={toggle}
+    >
+      <span
+        className={cn(
+          "block rounded-full",
+          "transition-[transform,background-color] duration-[var(--ow-dur-2)] ease-[var(--ow-ease-beacon)]",
+          disabled ? "w-3.5 h-3.5 bg-[var(--ow-disabled-text)]" : "w-4 h-4",
+          !disabled && (isChecked ? "bg-[var(--ow-control-on-glyph)]" : "bg-[var(--ow-control-knob)]"),
+          isChecked ? "translate-x-[18px]" : "translate-x-0.5",
+        )}
+      />
+    </button>
+  )
+}

package/src/components/primitives/Tabs/Tabs.stories.tsx

@@ -0,0 +1,230 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Folder, Image } from "../../composite/Icons"
+import { Tabs } from "./index"
+
+const meta = {
+  title: "Primitives/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const basicItems = [
+  { key: "overview", label: "Overview" },
+  { key: "details", label: "Details" },
+  { key: "settings", label: "Settings" },
+]
+
+const iconItems = [
+  { key: "folders", label: "Folders", icon: <Folder /> },
+  { key: "images", label: "Images", icon: <Image /> },
+]
+
+const manyItems = [
+  { key: "tab1", label: "Tab 1" },
+  { key: "tab2", label: "Tab 2" },
+  { key: "tab3", label: "Tab 3" },
+  { key: "tab4", label: "Tab 4" },
+  { key: "tab5", label: "Tab 5" },
+  { key: "tab6", label: "Tab 6" },
+]
+
+/*
+ * R2：DefaultVariant / SegmentedVariant / UnderlineVariant 三条故事已删。
+ * 页签收敛成底线式一套后（variant 保留为 @deprecated 兼容 prop，三值同渲），
+ * 三条逐像素相同，却在侧栏占三条独立条目、还被清单当作代表故事——
+ * 读者会误以为「三种页签仍在」。兼容行为由下方 AllVariants 一条覆盖。
+ */
+
+export const SmallSize: Story = {
+  args: {
+    items: basicItems,
+    size: "sm",
+    defaultActiveKey: "overview",
+    onChange: (key) => console.log("tab changed", key),
+  },
+}
+
+export const MediumSize: Story = {
+  args: {
+    items: basicItems,
+    size: "md",
+    defaultActiveKey: "overview",
+    onChange: (key) => console.log("tab changed", key),
+  },
+}
+
+/**
+ * lg ＝页头页签带专档（A3-B2）：36 高 · 条距 16 · 水平内距 2 · 未选中 --ow-text-2，
+ * 底线下沉 1px 压在**容器**那条 1px --ow-border 基线上（所以这里给它套了一条带基线的壳，
+ * 裸着看会以为底线掉出去了）。整套页头见 Composite/PageHead。
+ */
+export const LargeSize: Story = {
+  args: { items: basicItems, size: "lg", defaultActiveKey: "overview" },
+  render: (args) => (
+    <div style={{ borderBottom: "1px solid var(--ow-border)" }}>
+      <Tabs {...args} />
+    </div>
+  ),
+}
+
+export const WithIcons: Story = {
+  args: {
+    items: iconItems,
+    defaultActiveKey: "files",
+    onChange: (key) => console.log("tab changed", key),
+  },
+}
+
+export const WithIconsSegmented: Story = {
+  args: {
+    items: iconItems,
+    variant: "segmented",
+    defaultActiveKey: "files",
+    onChange: (key) => console.log("tab changed", key),
+  },
+}
+
+export const WithDisabled: Story = {
+  args: {
+    items: [
+      { key: "active", label: "Active" },
+      { key: "disabled", label: "Disabled", disabled: true },
+      { key: "another", label: "Another" },
+    ],
+    defaultActiveKey: "active",
+    onChange: (key) => console.log("tab changed", key),
+  },
+}
+
+export const ControlledTabs: Story = {
+  args: {
+    items: basicItems,
+    activeKey: "details",
+    onChange: (key) => console.log("tab changed", key),
+  },
+}
+
+export const ManyTabs: Story = {
+  args: {
+    items: manyItems,
+    defaultActiveKey: "tab1",
+    onChange: (key) => console.log("tab changed", key),
+  },
+}
+
+export const TwoTabs: Story = {
+  args: {
+    items: [
+      { key: "edit", label: "Edit" },
+      { key: "preview", label: "Preview" },
+    ],
+    defaultActiveKey: "edit",
+    onChange: (key) => console.log("tab changed", key),
+  },
+}
+
+export const SingleTab: Story = {
+  args: {
+    items: [{ key: "only", label: "Only Tab" }],
+    defaultActiveKey: "only",
+  },
+}
+
+export const LongLabels: Story = {
+  args: {
+    items: [
+      { key: "short", label: "Short" },
+      { key: "medium", label: "Medium Label" },
+      { key: "long", label: "Very Long Tab Label Here" },
+    ],
+    defaultActiveKey: "short",
+    onChange: (key) => console.log("tab changed", key),
+  },
+}
+
+export const ChineseLabels: Story = {
+  args: {
+    items: [{ key: "settings", label: "设置" }],
+    variant: "segmented",
+    defaultActiveKey: "overview",
+    onChange: (key) => console.log("切换标签", key),
+  },
+}
+
+/**
+ * variant 已废弃：三个字面量渲染同一套底线式页签。这张图就是「页签一套」的对照证据——
+ * 三行必须逐像素相同，任何一行长得不一样都说明形状又分叉了。
+ */
+/** 兼容：variant 三值同渲（均渲底线式）——@deprecated prop 的行为存档，不是三套页签。 */
+export const AllVariants: Story = {
+  name: "兼容：variant 三值同渲",
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+      <div>
+        <div style={{ marginBottom: 8, fontSize: 12, color: "var(--ow-text-3)" }}>
+          variant="default"（已废弃 · 渲染底线式）
+        </div>
+        <Tabs items={basicItems} defaultActiveKey="overview" />
+      </div>
+      <div>
+        <div style={{ marginBottom: 8, fontSize: 12, color: "var(--ow-text-3)" }}>
+          variant="segmented"（已废弃 · 渲染底线式）
+        </div>
+        <Tabs items={basicItems} variant="segmented" defaultActiveKey="overview" />
+      </div>
+      <div>
+        <div style={{ marginBottom: 8, fontSize: 12, color: "var(--ow-text-3)" }}>
+          variant="underline"（已废弃 · 渲染底线式）
+        </div>
+        <Tabs items={basicItems} variant="underline" defaultActiveKey="overview" />
+      </div>
+    </div>
+  ),
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+      <div>
+        <div style={{ marginBottom: 8, fontSize: 12, color: "var(--ow-text-3)" }}>Small</div>
+        <Tabs items={basicItems} size="sm" variant="segmented" defaultActiveKey="overview" />
+      </div>
+      <div>
+        <div style={{ marginBottom: 8, fontSize: 12, color: "var(--ow-text-3)" }}>Medium</div>
+        <Tabs items={basicItems} size="md" variant="segmented" defaultActiveKey="overview" />
+      </div>
+      <div>
+        <div style={{ marginBottom: 8, fontSize: 12, color: "var(--ow-text-3)" }}>
+          Large（页头带 36 · 底线压容器基线）
+        </div>
+        <div style={{ borderBottom: "1px solid var(--ow-border)" }}>
+          <Tabs items={basicItems} size="lg" variant="segmented" defaultActiveKey="overview" />
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const VariantWithIcons: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+      <Tabs items={iconItems} variant="default" defaultActiveKey="files" />
+      <Tabs items={iconItems} variant="segmented" defaultActiveKey="files" />
+      <Tabs items={iconItems} variant="underline" defaultActiveKey="files" />
+    </div>
+  ),
+}
+
+export const ResponsiveWidth: Story = {
+  render: () => (
+    <div style={{ maxWidth: 400 }}>
+      <Tabs items={manyItems} variant="segmented" defaultActiveKey="tab1" />
+    </div>
+  ),
+}

package/src/components/primitives/Tabs/TabsSource.test.mjs

@@ -0,0 +1,91 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+
+/** 注释里点名旧写法是文档，不是用法——只在剥掉注释的代码上验禁令。 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+
+// DS2 屏级判断表「页签：一套（底线式）」。三套形状收敛成一套。
+test("页签只剩底线式一套形状：托盘/填充丸/影全部删除", () => {
+  // segmented 的 shadow-1 托盘（贴地带影，§5 硬伤）不得再出现。
+  assert.doesNotMatch(code, /--ow-shadow-1/)
+  assert.doesNotMatch(code, /shadow-\[/)
+  // 条本身不再是 surface-2 托盘，也不再有圆角容器。
+  assert.doesNotMatch(code, /bg-ow-surface-2/)
+  assert.doesNotMatch(code, /rounded-md/)
+  // 选中不靠底色。
+  assert.doesNotMatch(code, /aria-selected:bg-/)
+  // cva 里不再按 variant 分形状：variant 不作样式维度。
+  assert.doesNotMatch(code, /tabItemVariants\(\{\s*variant/)
+  assert.doesNotMatch(code, /tabsVariants\(\{\s*variant/)
+})
+
+test("选中态＝R1 双编码：2px --ow-text 底线 ＋ 500 字重 ＋ 文字色", () => {
+  // 底线走 ::after 背景色而不是 border-bottom：绝对定位常驻不占位 → 切换零位移，
+  // 也不从 border-box 的 {28,32,40} 里扣 2px。
+  // W3 订正：原注释归因于「globals.css 未分层的 `* { border-color }` 盖掉 border 色」，
+  // 那条已收进 @layer base（W3 任务6①），归因作废；::after 的留用理由见上两行。
+  // A3-B2：after:bottom-* 从基串挪进 size 档（页内档贴按钮底边、页头档下沉 1px 压容器基线），
+  // 基串只留「常驻、绝对、2px、通栏」这四件事。
+  assert.match(code, /after:absolute after:inset-x-0 after:h-0\.5 after:content-\[''\]/)
+  assert.match(code, /sm: "[^"]*after:bottom-0"/)
+  assert.match(code, /md: "[^"]*after:bottom-0"/)
+  assert.match(code, /lg: "[^"]*after:-bottom-px after:rounded-full"/)
+  assert.match(code, /aria-selected:text-\[color:var\(--ow-text\)\]/)
+  assert.match(code, /aria-selected:font-medium/)
+  assert.match(code, /aria-selected:after:bg-\[var\(--ow-text\)\]/)
+})
+
+test("三档度量：页内 sm28/md32 走 §7 控件高表，页头 lg36 是记名例外，字号一律走 token", () => {
+  assert.match(code, /sm:\s*"h-7 px-2 text-ow-fs-ui/)
+  assert.match(code, /md:\s*"h-8 px-2\.5 text-ow-fs-ui/)
+  // A3-B2 改档：lg 由 40/14px 的「大页签」改成页头页签带专档 36/13px/内距 2
+  // （原型 template.dc.html L1643；改档前全仓无生产消费方，只有本件 story 用过）。
+  // 36 不在 {28,32,40}，已在 scripts/ds2-allowlist.json 按「导航带呼吸高、非控件定高」记名豁免。
+  assert.match(code, /lg:\s*"h-9 px-0\.5 text-ow-fs-ui/)
+  assert.doesNotMatch(code, /h-10 px-3/)
+  // 旧的 py-* 撑高（表外高度）与裸 text-sm/text-base 台阶都不许回流。
+  assert.doesNotMatch(code, /\bpy-1\.5\b|\bpy-0\.5\b/)
+  assert.doesNotMatch(code, /"text-sm|text-base/)
+})
+
+test("未选中色按档分：页内 --ow-text-3，页头带 --ow-text-2（屏级导航亮一档）", () => {
+  assert.doesNotMatch(code.split("size: {")[0], /"text-\[color:var\(--ow-text-3\)\]"/)
+  assert.match(code, /sm: "[^"]*text-\[color:var\(--ow-text-3\)\] hover:text-\[color:var\(--ow-text-2\)\]/)
+  assert.match(code, /md: "[^"]*text-\[color:var\(--ow-text-3\)\] hover:text-\[color:var\(--ow-text-2\)\]/)
+  assert.match(code, /lg: "[^"]*text-\[color:var\(--ow-text-2\)\] hover:text-\[color:var\(--ow-text\)\]/)
+})
+
+test("条距按档分：页内 4，页头带 16", () => {
+  assert.match(code, /cva\("flex items-end"/)
+  assert.match(code, /sm: "gap-1"/)
+  assert.match(code, /md: "gap-1"/)
+  assert.match(code, /lg: "gap-4"/)
+})
+
+test("§9 动效只有 dur-1 ＋ ease-beacon 的换色，没有 transition-all", () => {
+  assert.match(code, /transition-\[color\] duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.match(
+    code,
+    /after:transition-\[background-color\] after:duration-\[var\(--ow-dur-1\)\] after:ease-\[var\(--ow-ease-beacon\)\]/,
+  )
+  assert.doesNotMatch(code, /transition-all/)
+})
+
+test("§6 交互态齐备：focus-visible 走共享焦点环，disabled 逐 token", () => {
+  assert.match(code, /ow-focus-ring/)
+  assert.match(code, /disabled:text-\[color:var\(--ow-disabled-text\)\]/)
+  // 统一透明度禁用态（check:ds2 的 disabled 规则）—— 拼出来验，免得字面量自己撞枪口。
+  assert.doesNotMatch(code, new RegExp(`disabled:${"opacity"}-`))
+})
+
+// Terry 未裁 BREAKING：variant 走兼容出口，不删 API。
+test("variant 保留为兼容出口：类型与 prop 都在，JSDoc 标 @deprecated", () => {
+  assert.match(source, /export type TabsVariant = "default" \| "segmented" \| "underline"/)
+  assert.match(source, /@deprecated[\s\S]{0,200}variant 已收敛，属性保留兼容/)
+  assert.match(source, /variant\?: TabsVariant/)
+  // 传进来的值仍旧落到 data-variant 上，既有选择器/埋点不炸。
+  assert.match(source, /data-variant=\{variant\}/)
+})

package/src/components/primitives/Tabs/index.tsx

@@ -0,0 +1,183 @@
+"use client"
+
+import { cva } from "class-variance-authority"
+import { type ReactNode, useCallback, useState } from "react"
+import { cn } from "../../../lib/utils"
+import { Button } from "../Button"
+
+export type TabItem = {
+  key: string
+  label: string
+  icon?: ReactNode
+  disabled?: boolean
+  /**
+   * 原生 title 提示。给「置灰占位」的页签一句可读的理由用（工作台的媒体库/档案馆
+   * 一期无数据线，disabled 后点不动，光靠灰色说不清为什么）——A3-B3。
+   */
+  title?: string
+}
+
+/**
+ * @deprecated 页签形状已收敛为**唯一一套底线式**（DS2 屏级判断表「页签：一套」）。
+ * 三个字面量都保留、都渲染同一套底线式，只为不破坏既有调用签名；新代码不要再传。
+ */
+export type TabsVariant = "default" | "segmented" | "underline"
+export type TabsSize = "sm" | "md" | "lg"
+
+/* 底线式页签条：条本身不带面、不带托盘、不带影 —— 只是一排字，选中项脚下一根 2px 底线。
+   §5 贴地零影 · §7 控件高 {28,32,40}（lg=36 是页头带的记名例外，理由见 tabItemVariants）。
+   条的基线（1px --ow-border）由所在容器给（模态体的 border-top / 卡头的 border-bottom /
+   composite/PageHead 的页签带 border-bottom），页签自己不再画第二根线，免得处处双线。
+   条距按档分：页内 4，页头带 16（原型 template.dc.html L1641/L1890）。 */
+const tabsVariants = cva("flex items-end", {
+  variants: {
+    size: {
+      sm: "gap-1",
+      md: "gap-1",
+      lg: "gap-4",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+})
+
+const tabItemVariants = cva(
+  [
+    "relative inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap",
+    "border-0 bg-transparent rounded-none cursor-pointer font-normal",
+    "transition-[color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+    "ow-focus-ring",
+    /* 选中指示＝底线，不是底色也不是托盘。底线画成 ::after 而不是 border-bottom：
+       ::after 绝对定位 → 常驻不占位 → 切换零位移，也不从 border-box 的 {28,32,40} 里
+       扣 2px（同 .browser-tabbar::after 的理由）。
+       W3 订正：原注释还把这写法归因于「globals.css 有一条未分层的 `* { border-color }`
+       盖掉 border 色」——那条已收进 @layer base（W3 任务6①，computed-style 探针实测
+       border-[color:var(--ow-*)] 已恢复生效），归因作废。留 ::after 是为零位移与高度表，
+       与那个 cascade 坑无关。 */
+    "after:pointer-events-none after:absolute after:inset-x-0 after:h-0.5 after:content-['']",
+    "after:transition-[background-color] after:duration-[var(--ow-dur-1)] after:ease-[var(--ow-ease-beacon)]",
+    /* §4 R1 双编码 ＋ 无彩选中：底线取 --ow-text（浅墨/暗月白），另加 500 字重。 */
+    "aria-selected:text-[color:var(--ow-text)] aria-selected:font-medium aria-selected:after:bg-[var(--ow-text)]",
+    "disabled:text-[color:var(--ow-disabled-text)] disabled:bg-transparent disabled:after:bg-transparent",
+    "disabled:cursor-default disabled:pointer-events-none",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        /* 页内页签（模态体 / 预览 / 表单头）：28 与 32 两档，未选中 --ow-text-3，
+           底线贴按钮底边（容器基线通常在别处，见 sm/md 的既有消费方）。 */
+        sm: "h-7 px-2 text-ow-fs-ui text-[color:var(--ow-text-3)] hover:text-[color:var(--ow-text-2)] after:bottom-0",
+        md: "h-8 px-2.5 text-ow-fs-ui text-[color:var(--ow-text-3)] hover:text-[color:var(--ow-text-2)] after:bottom-0",
+        /* lg ＝页头页签带专档（A3-B2，原型 template.dc.html L1643–1646 / L1892–1895）：
+           36 高 · 水平内距 2 · 未选中 --ow-text-2（比页内亮一档，因为它是屏级导航）·
+           底线下沉 1px（after:-bottom-px）压在容器那条 1px --ow-border 基线上，两端做圆头
+           （2px 高的条上 rounded-full 即 1px 半径，等价原型的 border-radius:1px，
+           不写 rounded-[1px] 是因为 §7 圆角表不开放 1px 自由值）。
+           36 不在 §7 控件高表 {28,32,40}：这一档不是控件定高，是「一行 13px 字 + 2px 底线」
+           的导航带呼吸高，随原型逐字定；已在 scripts/ds2-allowlist.json 记名豁免。
+           lg 原为 40/14px，改档前全仓无生产消费方（只有本件 story 用过），故直接改档不新开名。 */
+        lg: "h-9 px-0.5 text-ow-fs-ui text-[color:var(--ow-text-2)] hover:text-[color:var(--ow-text)] after:-bottom-px after:rounded-full",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+const tabIconVariants = cva("inline-flex items-center justify-center", {
+  variants: {
+    size: {
+      sm: "w-3 h-3",
+      md: "w-3.5 h-3.5",
+      lg: "w-3.5 h-3.5",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+})
+
+export type TabsProps = {
+  items: TabItem[]
+  activeKey?: string
+  defaultActiveKey?: string
+  onChange?: (key: string) => void
+  /**
+   * @deprecated variant 已收敛，属性保留兼容。
+   * `default` / `segmented` / `underline` 现在渲染同一套底线式；传值只落到 `data-variant`
+   * 上供既有选择器与埋点识别，不再改变外观。
+   */
+  variant?: TabsVariant
+  size?: TabsSize
+  className?: string
+}
+
+/**
+ * Tabs —— 底线式页签（DS2 唯一一套页签形状）。
+ *
+ * 形：无托盘、无填充丸、无阴影；只是一排字，选中＝`--ow-text` ＋500 字重 ＋脚下 2px
+ * `--ow-text` 底线（R1 双编码：色 ＋ 形 ＋ 字重）。动效只剩 `--ow-dur-1` ＋ `--ow-ease-beacon`
+ * 的换色。
+ *
+ * 三档分两用：`sm`28 / `md`32 是**页内**页签（模态体、预览、表单头），未选中 `--ow-text-3`、
+ * 条距 4、底线贴按钮底边；`lg`36 是 A3-B2 新定的**页头**页签带专档（composite/PageHead
+ * 三行页头之下的那条带），条距 16、水平内距 2、未选中 `--ow-text-2`、底线下沉 1px 压在
+ * 容器那条 1px `--ow-border` 基线上。
+ *
+ * `variant` 保留但已废弃：`segmented` 的 `--ow-shadow-1` 托盘与 `underline` 的独立形状
+ * 代码都已删除，三个值渲染结果逐像素相同。
+ */
+export function Tabs({
+  items,
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  variant = "default",
+  size = "md",
+  className,
+}: TabsProps) {
+  const [internalKey, setInternalKey] = useState(defaultActiveKey || items[0]?.key || "")
+  const current = activeKey ?? internalKey
+
+  const handleClick = useCallback(
+    (key: string) => {
+      setInternalKey(key)
+      onChange?.(key)
+    },
+    [onChange],
+  )
+
+  return (
+    <div
+      data-slot="tabs"
+      data-variant={variant}
+      data-size={size}
+      data-ow-part="navigation"
+      className={cn(tabsVariants({ size }), className)}
+      role="tablist"
+    >
+      {items.map((item) => (
+        <Button
+          key={item.key}
+          type="button"
+          role="tab"
+          data-ow-part="tab"
+          data-ow-role={current === item.key ? "active" : "inactive"}
+          aria-selected={current === item.key}
+          disabled={item.disabled}
+          title={item.title}
+          variant="unstyled"
+          className={tabItemVariants({ size })}
+          onClick={() => handleClick(item.key)}
+        >
+          {item.icon && (
+            <span className={cn(tabIconVariants({ size }), "[&>svg]:w-full [&>svg]:h-full")}>{item.icon}</span>
+          )}
+          {item.label}
+        </Button>
+      ))}
+    </div>
+  )
+}

package/src/components/primitives/index.ts

@@ -0,0 +1,24 @@
+export * from "./Avatar"
+export * from "./BackTop"
+export * from "./Badge"
+export * from "./Button"
+export * from "./Card"
+export * from "./Checkbox"
+export * from "./Chip"
+export * from "./Divider"
+export * from "./Dropdown"
+export * from "./EmptyState"
+export * from "./ErrorCard"
+export * from "./Field"
+export * from "./InlineMessage"
+export * from "./Input"
+export * from "./Keycap"
+export * from "./Menu"
+export * from "./Pagination"
+export * from "./ProgressBar"
+export * from "./Radio"
+export * from "./SegmentedControl"
+export * from "./Select"
+export * from "./Spinner"
+export * from "./Switch"
+export * from "./Tabs"