@orbit-work/ui 0.1.2-preview.0 → 0.1.2

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

@@ -1,186 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,137 +0,0 @@
-"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

@@ -1,79 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,87 +0,0 @@
-"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>
-  )
-}