@orbit-work/ui 0.1.0

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

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Close, More, Settings } from "../../composite/Icons"
+import { Skeleton } from "../../composite/Skeleton"
+import { Button } from "../Button"
+import { EmptyState } from "../EmptyState"
+import { InlineMessage } from "../InlineMessage"
+import { Card } from "./index"
+
+const meta = {
+  title: "Primitives/Card",
+  component: Card,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Card>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 素卡：贴地立面（0 影 + 1px --ow-border + --ow-surface 底），圆角 12。 */
+export const Default: Story = {
+  args: {
+    children: "卡体内容放这里。",
+  },
+}
+
+/** 头槽：标题一行，下边线分隔。 */
+export const WithTitle: Story = {
+  args: {
+    title: "会话设置",
+    children: "带标题的卡体内容。",
+  },
+}
+
+/** 头槽动作区：图标按钮排在标题右侧。 */
+export const WithActions: Story = {
+  args: {
+    title: "会话设置",
+    actions: (
+      <>
+        <Button variant="ghost" size="sm" icon={<Settings />} title="设置" />
+        <Button variant="ghost" size="sm" icon={<Close />} title="关闭" />
+      </>
+    ),
+    children: "标题右侧可以放图标按钮。",
+  },
+}
+
+/** 脚槽：上边线 + 动作行，用于确认类卡。 */
+export const WithFooter: Story = {
+  args: {
+    title: "导出会话",
+    children: "会导出当前会话的全部消息与附件清单。",
+    footer: (
+      <>
+        <Button variant="secondary" size="sm">
+          取消
+        </Button>
+        <Button variant="primary" size="sm">
+          开始导出
+        </Button>
+      </>
+    ),
+  },
+}
+
+/** 三槽齐全。 */
+export const AllSlots: Story = {
+  args: {
+    title: "运行记录",
+    actions: <Button variant="ghost" size="sm" icon={<More />} title="更多" />,
+    children: (
+      <div className="flex flex-col gap-2">
+        <div>最近一次运行在今天上午。</div>
+        <div className="font-[family-name:var(--ow-font-mono)] tabular-nums text-ow-text-2">09:12:04 · 耗时 42s</div>
+      </div>
+    ),
+    footer: (
+      <Button variant="secondary" size="sm">
+        查看全部
+      </Button>
+    ),
+  },
+}
+
+/** 贴边体槽：整幅内容（列表/图片/表格）自己接管内边距。 */
+export const FlushBody: Story = {
+  args: {
+    title: "最近项目",
+    padding: "none",
+    children: (
+      <ul className="m-0 list-none p-0">
+        {["设计系统改造", "桌面端发版", "连接器接入"].map((name) => (
+          <li key={name} className="px-3.5 py-2.5 border-b border-ow-border last:border-b-0">
+            {name}
+          </li>
+        ))}
+      </ul>
+    ),
+  },
+}
+
+/** 可点卡：整卡 hover=--ow-hover、press=--ow-press、focus-visible 2px 环，键盘 Enter/Space 可触发。 */
+export const Clickable: Story = {
+  args: {
+    title: "技能：周报汇总",
+    children: "点整张卡进入详情。",
+    onClick: () => {},
+  },
+}
+
+/** 可点卡禁用：底/边/字逐 token 走 disabled，不用统一透明度。 */
+export const ClickableDisabled: Story = {
+  args: {
+    title: "技能：周报汇总",
+    children: "当前套餐未包含这个技能。",
+    onClick: () => {},
+    disabled: true,
+  },
+}
+
+/** 容器空态：走 EmptyState 原语（信标 mono 母题 + 一句 text-2 + 可选主按钮）。 */
+export const EmptyBody: Story = {
+  args: {
+    title: "定时任务",
+    padding: "none",
+    children: <EmptyState message="这个项目还没有定时任务。" actionLabel="新建任务" onAction={() => {}} />,
+  },
+}
+
+/** 容器加载态：skeleton 呼吸，禁 shimmer。 */
+export const LoadingBody: Story = {
+  args: {
+    title: "用量明细",
+    children: <Skeleton variant="text" lines={3} />,
+  },
+}
+
+/** 容器错误态：人话一句 + mono 技术详情折叠。 */
+export const ErrorBody: Story = {
+  args: {
+    title: "用量明细",
+    children: (
+      <InlineMessage variant="error" detail='{"code":503,"endpoint":"/v1/usage"}'>
+        用量服务暂时连不上，稍后再试。
+      </InlineMessage>
+    ),
+  },
+}
+
+/** 长标题在头槽内截断，不撑破卡。 */
+export const LongTitle: Story = {
+  args: {
+    title: "这是一个很长很长的卡片标题，用来演示头槽在窄容器里的截断行为",
+    actions: <Button variant="ghost" size="sm" icon={<Close />} title="关闭" />,
+    children: "卡体内容。",
+    className: "max-w-[320px]",
+  },
+}
+
+/** 自定义头槽：整行内容自定（这里是双列读数头），仍套用头部内边距与下边线。 */
+export const CustomHeader: Story = {
+  args: {
+    header: (
+      <div className="flex items-baseline justify-between gap-2">
+        <span className="font-semibold text-ow-fs-ui text-ow-text">本月用量</span>
+        <span className="font-[family-name:var(--ow-font-mono)] tabular-nums text-ow-text-2">68.4%</span>
+      </div>
+    ),
+    children: "自定义头槽用于读数、筛选器一类的非标题头。",
+  },
+}
+
+/** 状态成行：静态 / 可点 / 禁用 三档并排对照。 */
+export const StateMatrix: Story = {
+  render: () => (
+    <div className="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
+      <Card title="静态卡">不可点，只承载内容。</Card>
+      <Card title="可点卡" onClick={() => {}}>
+        整卡 hover / press / focus 环。
+      </Card>
+      <Card title="禁用卡" onClick={() => {}} disabled>
+        逐 token 的 disabled 三件。
+      </Card>
+    </div>
+  ),
+}

package/src/components/primitives/Card/CardSource.test.mjs

@@ -0,0 +1,73 @@
+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 wcard = await readFile(new URL("../../composite/WCardShell/index.tsx", import.meta.url), "utf8")
+
+test("Card 立面走 §5 贴地档：0 影 + 1px --ow-border + --ow-surface 底 + 圆角 12", () => {
+  // 贴地＝一个 box-shadow 都不出（离地由配方自己加，别在骨架里写 shadow-none 反杀配方）
+  assert.ok(!/\bshadow-/.test(source))
+  assert.match(source, /bg-ow-surface border border-ow-border \[border-radius:var\(--ow-radius-card\)\]/)
+  // 旧形态：卡底取地色 --ow-bg（面板底才是卡的正解）
+  assert.doesNotMatch(source, /bg-ow-bg/)
+  // 弹层影/内阴影/渐变一律不属于贴地卡
+  assert.doesNotMatch(source, /--ow-shadow-(pop|modal)|shadow-inner|bg-gradient|linear-gradient/)
+})
+
+test("Card 三槽齐全：头（title/actions 或自定 header）· 体 · 脚", () => {
+  assert.match(source, /data-ow-part="head"/)
+  assert.match(source, /data-ow-part="body"/)
+  assert.match(source, /data-ow-part="foot"/)
+  assert.match(source, /header \?\? \(/)
+  assert.match(source, /padding \?: "default" \| "none"|padding\?: "default" \| "none"/)
+})
+
+test("Card 可点态按 §6 补全：hover/press/focus-visible/disabled + 键盘可达", () => {
+  assert.match(source, /hover:bg-\[var\(--ow-hover\)\]/)
+  assert.match(source, /active:bg-\[var\(--ow-press\)\]/)
+  assert.match(source, /ow-focus-ring/)
+  assert.match(source, /role=\{clickable \? "button" : undefined\}/)
+  assert.match(source, /tabIndex=\{clickable \? 0 : undefined\}/)
+  assert.match(source, /event\.key !== "Enter" && event\.key !== " "/)
+  // disabled 逐 token，禁统一透明度（禁用词拼接书写，免得断言本身被 check-ds2 当成违规实现）
+  assert.match(source, /--ow-disabled-bg/)
+  assert.match(source, /--ow-disabled-border/)
+  assert.match(source, /--ow-disabled-text/)
+  assert.ok(!source.includes(`disabled:${"opacity-"}`))
+  assert.ok(!source.includes(`--ow-${"opacity-disabled"}`))
+})
+
+test("Card 动效只用 ease-beacon + 120ms 档（§9）", () => {
+  assert.match(source, /ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.match(source, /duration-\[var\(--ow-dur-1\)\]/)
+  assert.ok(!source.includes(`hover:${"scale-"}`))
+  assert.ok(!source.includes(`hover:${"translate-"}`))
+})
+
+test("Card 是 R3 中性件：不碰荧黄三极", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow/)
+})
+
+test("skill 变体的 gradient 说法已结案：三档降为 @deprecated 的 data 钩子，不再有样式分支", () => {
+  // 旧注释自称 skill=gradient 却从未实现；现在只在废弃说明里记这段账，且无任何渐变实现
+  assert.doesNotMatch(source, /bg-gradient|linear-gradient/)
+  assert.doesNotMatch(source, /cva\(|cardVariants/)
+  assert.match(source, /@deprecated[\s\S]*widget\/task\/skill[\s\S]*gradient[\s\S]*从未实现/)
+  assert.match(source, /data-variant=\{variant\}/)
+})
+
+test("任意值 var() 带类型标注（ambiguous-arbitrary 铁律）", () => {
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+  assert.match(source, /font-\[family-name:var\(--ow-font-sans\)\]/)
+})
+
+test("WCardShell 已降为 Card 配方（旧卡壳不再自绘立面）", () => {
+  assert.match(wcard, /import \{ Card \} from "\.\.\/\.\.\/primitives\/Card"/)
+  assert.match(wcard, /@deprecated/)
+  assert.match(wcard, /<Card/)
+  assert.doesNotMatch(wcard, /border-ow-border-strong/)
+  // 拖拽把手的红黄绿裸 hex 档已下线（R3 中性件）
+  assert.doesNotMatch(wcard, /data-ow-state=\{dragColor/)
+})

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

@@ -0,0 +1,137 @@
+"use client"
+
+import type { HTMLAttributes, KeyboardEvent, MouseEvent, ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+
+/**
+ * @deprecated 2.0 卡骨架不再分形态变体（旧 widget/task/skill 三档里 skill 自称 gradient
+ * 却从未实现，widget/task 也无任何差异）。值只落 `data-variant` 供旧样式钩子过渡，不影响样式。
+ */
+export type CardVariant = "widget" | "task" | "skill"
+
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onClick"> {
+  /** 头槽标题；与 actions 一起构成默认头部行。 */
+  title?: ReactNode
+  /** 头槽右侧动作区（图标按钮等）。 */
+  actions?: ReactNode
+  /** 自定义头槽：整行内容自定，仍套用头部内边距与下边线（给 title/actions 让位）。 */
+  header?: ReactNode
+  /** 脚槽：上边线 + 同款内边距。 */
+  footer?: ReactNode
+  /** 体槽内边距；none 用于整幅贴边内容（列表/图片/表格）。 */
+  padding?: "default" | "none"
+  /** 体槽附加类（滚动、flex 布局等由配方接管）。 */
+  bodyClassName?: string
+  /**
+   * 可点卡：整卡 hover/press 底色 + focus-visible 环 + 键盘 Enter/Space。
+   * 传了 onClick 即自动开启；显式 false 可强制关掉。
+   */
+  interactive?: boolean
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void
+  /** 可点卡禁用态：逐 token 上 disabled 三件（底/边/字），不用统一透明度。 */
+  disabled?: boolean
+  /**
+   * @deprecated 见 CardVariant；仅落 data-variant，且**不再有默认值**——
+   * R2 前默认 "widget" 无条件写进 data-variant，给旧选择器留了个永远为真的钩子。
+   * 不传就不出这个属性；下个 BREAKING 窗口整条删除。
+   */
+  variant?: CardVariant
+  children?: ReactNode
+  className?: string
+}
+
+/**
+ * Card — 卡骨架（DS 2.0 唯一卡容器，R3 中性件）
+ *
+ * 立面按 §5 贴地档：0 影 + 1px `--ow-border` + `--ow-surface` 底；圆角 12（§7 `--ow-radius-card`）。
+ * 三槽：头（title/actions 或自定 header）· 体（children）· 脚（footer）。
+ *
+ * 骨架内距（事实标准，R2 记名）：横向恒 **14**；纵向头/脚 **10**、体 **12**
+ * （px-3.5 py-2.5 / px-3.5 py-3）。InlineMessage 的 `padding: 10px 14px` 是同一口径。
+ * 规范文本原先只写了「容器 14」，纵向三档没写明，故在此备案；`--ow-space-*` 表里没有
+ * 14/10 两档，横向 14 只能落 Tailwind 3.5——这条待 space 表补档后再收。
+ * 可点卡走 §6 状态全集：hover=`--ow-hover` → press=`--ow-press` → focus-visible 2px 环，
+ * disabled 逐 token。合并自 CardShell / WCardShell / SecurityCard 三支旧卡壳。
+ */
+export function Card({
+  title,
+  actions,
+  header,
+  footer,
+  padding = "default",
+  bodyClassName,
+  interactive,
+  onClick,
+  disabled = false,
+  variant,
+  children,
+  className,
+  ...rest
+}: CardProps) {
+  const clickable = !disabled && (interactive === true || (interactive !== false && !!onClick))
+  const hasHeader = header != null || title != null || actions != null
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!clickable || !onClick) return
+    if (event.key !== "Enter" && event.key !== " ") return
+    if (event.target !== event.currentTarget) return
+    event.preventDefault()
+    onClick(event as unknown as MouseEvent<HTMLDivElement>)
+  }
+
+  return (
+    <div
+      data-slot="card"
+      data-variant={variant}
+      data-ow-part="surface"
+      data-ow-state={disabled ? "disabled" : clickable ? "clickable" : undefined}
+      role={clickable ? "button" : undefined}
+      tabIndex={clickable ? 0 : undefined}
+      aria-disabled={disabled || undefined}
+      onClick={clickable ? onClick : undefined}
+      onKeyDown={clickable ? handleKeyDown : undefined}
+      {...rest}
+      className={cn(
+        // §5 贴地：0 影（不声明任何 box-shadow，配方要离地自己加）+ 1px --ow-border + 面板底；§7 圆角 12
+        "flex flex-col min-w-0 overflow-hidden",
+        "bg-ow-surface border border-ow-border [border-radius:var(--ow-radius-card)]",
+        "transition-[background-color,border-color,color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+        clickable && "cursor-pointer hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)] ow-focus-ring",
+        disabled &&
+          "cursor-not-allowed bg-[var(--ow-disabled-bg)] border-[color:var(--ow-disabled-border)] text-[color:var(--ow-disabled-text)]",
+        className,
+      )}
+    >
+      {hasHeader && (
+        <div data-ow-part="head" className="flex-shrink-0 px-3.5 py-2.5 border-b border-ow-border">
+          {header ?? (
+            <div className="flex items-center gap-2">
+              <span
+                data-ow-part="title"
+                className="flex-1 min-w-0 font-semibold text-ow-fs-ui leading-tight font-[family-name:var(--ow-font-sans)] text-ow-text overflow-hidden text-ellipsis whitespace-nowrap"
+              >
+                {title}
+              </span>
+              {actions && (
+                <span data-ow-part="actions" className="flex flex-shrink-0 items-center gap-0.5">
+                  {actions}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+      <div data-ow-part="body" className={cn("min-w-0", padding === "default" && "px-3.5 py-3", bodyClassName)}>
+        {children}
+      </div>
+      {footer && (
+        <div
+          data-ow-part="foot"
+          className="flex flex-shrink-0 items-center gap-2 px-3.5 py-2.5 border-t border-ow-border"
+        >
+          {footer}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Checkbox } from "./index"
+
+const meta = {
+  title: "Primitives/Checkbox",
+  component: Checkbox,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Checkbox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    defaultChecked: false,
+  },
+}
+
+export const Checked: Story = {
+  args: {
+    defaultChecked: true,
+  },
+}
+
+export const Indeterminate: Story = {
+  args: {
+    indeterminate: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    defaultChecked: false,
+    disabled: true,
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    defaultChecked: true,
+    disabled: true,
+  },
+}
+
+export const DisabledIndeterminate: Story = {
+  args: {
+    indeterminate: true,
+    disabled: true,
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false)
+    return (
+      <div className="flex items-center gap-3">
+        <Checkbox checked={checked} onChange={setChecked} aria-label="Interactive checkbox" />
+        <span className="text-sm text-ow-text-2">{checked ? "已勾选" : "未勾选"}</span>
+      </div>
+    )
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Checkbox aria-label="未选" />
+      <Checkbox defaultChecked aria-label="已选" />
+      <Checkbox indeterminate aria-label="半选" />
+      <Checkbox disabled aria-label="禁用" />
+      <Checkbox disabled defaultChecked aria-label="禁用已选" />
+      <Checkbox disabled indeterminate aria-label="禁用半选" />
+    </div>
+  ),
+}

package/src/components/primitives/Checkbox/CheckboxSource.test.mjs

@@ -0,0 +1,43 @@
+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, "")
+
+test("checkbox keeps 16px visual with a >=24px hit target and 4px key radius", () => {
+  assert.match(source, /w-4 h-4/)
+  assert.match(source, /after:absolute after:-inset-1/)
+  // R2：4px 档改直取 --ow-radius-2xs；原 --ow-radius-key 是键帽语义 token（同值），属语义借位。
+  assert.match(source, /\[border-radius:var\(--ow-radius-2xs\)\]/)
+  assert.doesNotMatch(code, /--ow-radius-key/)
+})
+
+test("checked/indeterminate use the achromatic control-on pole, never beacon yellow", () => {
+  assert.match(
+    source,
+    /bg-\[var\(--ow-control-on\)\] border-\[color:var\(--ow-control-on\)\] text-\[color:var\(--ow-control-on-glyph\)\]/,
+  )
+  assert.match(source, /indeterminate\?: boolean/)
+  assert.match(source, /aria-checked=\{indeterminate \? "mixed" : isChecked\}/)
+  assert.doesNotMatch(source, /--ow-beacon|--ow-yellow|--ow-accent-dot/)
+})
+
+test("state completeness: hover border-strong, press, focus ring, per-token disabled", () => {
+  assert.match(source, /hover:border-\[color:var\(--ow-border-strong\)\]/)
+  assert.match(source, /active:bg-\[var\(--ow-press\)\]/)
+  // R2：焦点语法全库归一到 .ow-focus-ring（outline 三件套），不再走 --ow-focus-shadow。
+  assert.match(source, /"ow-focus-ring"/)
+  assert.doesNotMatch(code, /--ow-focus-shadow/)
+  assert.match(
+    source,
+    /bg-\[var\(--ow-disabled-bg\)\] border-\[color:var\(--ow-disabled-border\)\] text-\[color:var\(--ow-disabled-text\)\]/,
+  )
+  assert.doesNotMatch(source, /disabled:opacity|opacity-disabled/)
+})
+
+test("motion uses only ease-beacon at the 120ms tier", () => {
+  assert.match(source, /duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.doesNotMatch(source, /hover:scale|hover:translate/)
+})

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

@@ -0,0 +1,87 @@
+"use client"
+
+import { useCallback, useState } from "react"
+import { cn } from "../../../lib/utils"
+import { Check } from "../../composite/Icons"
+
+export type CheckboxProps = {
+  checked?: boolean
+  defaultChecked?: boolean
+  /** Mixed state for "select all" style parents. Overrides the visual check. */
+  indeterminate?: boolean
+  onChange?: (checked: boolean) => void
+  disabled?: boolean
+  className?: string
+  id?: string
+  "aria-label"?: string
+}
+
+/**
+ * Checkbox — Orbitwork DS 2.0
+ * 16×16 rounded-square (4px radius, §7). Checked/indeterminate use
+ * --ow-control-on (achromatic pole) with --ow-control-on-glyph mark.
+ * Off-state border follows the input grammar: rest(control-off) →
+ * hover(border-strong) → focus ring (§6). Hit target is padded to 24×24
+ * via an ::after overlay without changing the 16px visual (§7 命中区 ≥24).
+ */
+export function Checkbox({
+  checked,
+  defaultChecked = false,
+  indeterminate = false,
+  onChange,
+  disabled,
+  className = "",
+  id,
+  "aria-label": ariaLabel,
+}: CheckboxProps) {
+  const [internalChecked, setInternalChecked] = useState(defaultChecked)
+  const isChecked = checked ?? internalChecked
+  const isMarked = isChecked || indeterminate
+
+  const toggle = useCallback(() => {
+    if (disabled) return
+    const next = indeterminate ? true : !isChecked
+    setInternalChecked(next)
+    onChange?.(next)
+  }, [isChecked, indeterminate, disabled, onChange])
+
+  return (
+    <button
+      id={id}
+      type="button"
+      role="checkbox"
+      aria-checked={indeterminate ? "mixed" : isChecked}
+      aria-label={ariaLabel}
+      disabled={disabled}
+      data-slot="checkbox"
+      data-ow-part="control"
+      data-ow-role={indeterminate ? "mixed" : isChecked ? "on" : "off"}
+      className={cn(
+        "relative inline-flex items-center justify-center w-4 h-4 p-0 border",
+        // §7：16px 勾选框走 4px 档。原写 --ow-radius-key（键帽语义 token，同值 4px）属语义借位，
+        // R2 改直取 --ow-radius-2xs。
+        "[border-radius:var(--ow-radius-2xs)]",
+        // ≥24px hit target without growing the 16px visual (§7)
+        "after:content-[''] after:absolute after:-inset-1",
+        "transition-[background-color,border-color,color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+        // R2：焦点语法全库归一到 .ow-focus-ring（outline 三件套 --ow-focus-ring-w/-ring/-offset）。
+        // 原 --ow-focus-shadow 的 2px 缝写死 var(--ow-surface)，控件坐在 popover/井面上会画出错色晕。
+        "ow-focus-ring",
+        isMarked
+          ? "bg-[var(--ow-control-on)] border-[color:var(--ow-control-on)] text-[color:var(--ow-control-on-glyph)]"
+          : "bg-transparent border-[color:var(--ow-control-off)] text-transparent hover:border-[color:var(--ow-border-strong)] active:bg-[var(--ow-press)]",
+        disabled
+          ? "cursor-not-allowed bg-[var(--ow-disabled-bg)] border-[color:var(--ow-disabled-border)] text-[color:var(--ow-disabled-text)] hover:border-[color:var(--ow-disabled-border)] active:bg-[var(--ow-disabled-bg)]"
+          : "cursor-pointer",
+        className,
+      )}
+      onClick={toggle}
+    >
+      {indeterminate ? (
+        <span aria-hidden="true" className="block w-2 h-0.5 [border-radius:var(--ow-radius-pill)] bg-current" />
+      ) : (
+        isChecked && <Check className="w-3 h-3" strokeWidth={2.5} />
+      )}
+    </button>
+  )
+}