@orbit-work/ui 0.1.0

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

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Pagination } from "./index"
+
+const meta = {
+  title: "Primitives/Pagination",
+  component: Pagination,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Pagination>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const FirstPage: Story = {
+  args: {
+    current: 1,
+    total: 100,
+    pageSize: 10,
+    onChange: (page) => console.log("goto page", page),
+  },
+}
+
+export const MiddlePage: Story = {
+  args: {
+    current: 5,
+    total: 100,
+    pageSize: 10,
+    onChange: (page) => console.log("goto page", page),
+  },
+}
+
+export const LastPage: Story = {
+  args: {
+    current: 10,
+    total: 100,
+    pageSize: 10,
+    onChange: (page) => console.log("goto page", page),
+  },
+}
+
+export const FewPages: Story = {
+  args: {
+    current: 2,
+    total: 30,
+    pageSize: 10,
+    onChange: (page) => console.log("goto page", page),
+  },
+}
+
+export const ManyPages: Story = {
+  args: {
+    current: 12,
+    total: 500,
+    pageSize: 10,
+    onChange: (page) => console.log("goto page", page),
+  },
+}
+
+export const LargePageSize: Story = {
+  args: {
+    current: 3,
+    total: 500,
+    pageSize: 50,
+    onChange: (page) => console.log("goto page", page),
+  },
+}
+
+export const SinglePage: Story = {
+  args: {
+    current: 1,
+    total: 5,
+    pageSize: 10,
+    onChange: (page) => console.log("goto page", page),
+  },
+}

package/src/components/primitives/Pagination/PaginationSource.test.mjs

@@ -0,0 +1,24 @@
+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, "")
+
+// W5 终扫：页码是读数（§7 判据 9）。原写裸 `font-mono`，落到 Tailwind 的 --font-mono 别名上，
+// 与同库读数写法（Badge / Chip / Keycap 的 font-[family-name:var(--ow-font-mono)]）不一致。
+test("page numbers are a mono readout wired straight to the DS token", () => {
+  assert.match(code, /font-\[family-name:var\(--ow-font-mono\)\]/)
+  assert.match(code, /tabular-nums/)
+  // 裸的 Tailwind `font-mono` 工具类（不是 --ow-font-mono 里的那截）
+  assert.doesNotMatch(code, /(?<![-\w])font-mono\b/)
+})
+
+// 形状/高度由 Button 原语承担：ghost + size="sm"（28 档、--ow-radius-action），不自绘壳。
+test("pagination hands shape and state coverage to the Button primitive", () => {
+  assert.match(code, /variant="ghost"/)
+  assert.match(code, /size="sm"/)
+  assert.doesNotMatch(code, /rounded-full|--ow-radius-pill/)
+  assert.doesNotMatch(code, /box-shadow|shadow-\[/)
+})

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

@@ -0,0 +1,85 @@
+"use client"
+
+import { useCallback } from "react"
+import { cn } from "../../../lib/utils"
+import { ChevLeft, ChevRight } from "../../composite/Icons"
+import { Button } from "../Button"
+import { getPaginationItems } from "./pagination"
+
+export type PaginationProps = {
+  current: number
+  total: number
+  pageSize?: number
+  onChange?: (page: number) => void
+  className?: string
+}
+
+/**
+ * Simple pagination — prev/next + page numbers.
+ *
+ * 页码是读数（§7 判据 9）：mono + tabular-nums。W5 终扫：原写裸 `font-mono`，
+ * 与同库读数写法（Badge/Chip 的 font-[family-name:var(--ow-font-mono)]）不一致，
+ * 且不因 Tailwind @theme 映射与否而摇摆——统一直引 DS token。
+ */
+export function Pagination({ current, total, pageSize = 10, onChange, className }: PaginationProps) {
+  const totalPages = Math.ceil(total / pageSize)
+  const handlePrev = useCallback(() => {
+    if (current > 1) onChange?.(current - 1)
+  }, [current, onChange])
+  const handleNext = useCallback(() => {
+    if (current < totalPages) onChange?.(current + 1)
+  }, [current, totalPages, onChange])
+
+  if (totalPages <= 1) return null
+
+  const pages = getPaginationItems(totalPages, current)
+
+  return (
+    <div data-slot="pagination" data-ow-part="navigation" className={cn("flex items-center gap-1", className)}>
+      <Button
+        variant="ghost"
+        size="sm"
+        icon={<ChevLeft style={{ width: 14, height: 14 }} />}
+        className="text-ow-text-2"
+        disabled={current <= 1}
+        onClick={handlePrev}
+        aria-label="上一页"
+      />
+      {pages.map((page) =>
+        typeof page === "number" ? (
+          <Button
+            key={page}
+            data-ow-role={page === current ? "active" : "inactive"}
+            variant="ghost"
+            size="sm"
+            className={cn(
+              "w-7 min-w-7 px-0 text-ow-text-2 font-normal tabular-nums font-[family-name:var(--ow-font-mono)]",
+              // 既定态「无彩选中」三件套：surface 递进 ＋ border-strong ＋ 500 字重。
+              // R2 前当前页只有前两件，缺 1px border-strong，与 Tabs/SegmentedControl 的选中表达法不同套。
+              page === current &&
+                "bg-ow-surface-2 text-ow-text font-medium border border-[color:var(--ow-border-strong)]",
+            )}
+            onClick={() => onChange?.(page)}
+            aria-current={page === current ? "page" : undefined}
+            aria-label={`第 ${page} 页`}
+          >
+            {page}
+          </Button>
+        ) : (
+          <span key={page} className="w-7 text-center text-ow-text-3 text-ow-fs-ui font-normal" aria-hidden="true">
+            …
+          </span>
+        ),
+      )}
+      <Button
+        variant="ghost"
+        size="sm"
+        icon={<ChevRight style={{ width: 14, height: 14 }} />}
+        className="text-ow-text-2"
+        disabled={current >= totalPages}
+        onClick={handleNext}
+        aria-label="下一页"
+      />
+    </div>
+  )
+}

package/src/components/primitives/Pagination/pagination.ts

@@ -0,0 +1,25 @@
+export type PaginationItem = number | "ellipsis-start" | "ellipsis-end"
+
+export function getPaginationItems(totalPages: number, currentPage: number): PaginationItem[] {
+  const normalizedTotal = Math.max(0, Math.trunc(totalPages))
+  if (normalizedTotal <= 7) {
+    return Array.from({ length: normalizedTotal }, (_, index) => index + 1)
+  }
+
+  const current = Math.min(Math.max(1, Math.trunc(currentPage)), normalizedTotal)
+  if (current <= 4) {
+    return [1, 2, 3, 4, 5, "ellipsis-end", normalizedTotal]
+  }
+  if (current >= normalizedTotal - 3) {
+    return [
+      1,
+      "ellipsis-start",
+      normalizedTotal - 4,
+      normalizedTotal - 3,
+      normalizedTotal - 2,
+      normalizedTotal - 1,
+      normalizedTotal,
+    ]
+  }
+  return [1, "ellipsis-start", current - 1, current, current + 1, "ellipsis-end", normalizedTotal]
+}

package/src/components/primitives/Pagination/paginationModel.test.mjs

@@ -0,0 +1,18 @@
+import assert from "node:assert/strict"
+import test from "node:test"
+
+import { getPaginationItems } from "./pagination.ts"
+
+test("shows every page when the total fits the compact pagination", () => {
+  assert.deepEqual(getPaginationItems(5, 3), [1, 2, 3, 4, 5])
+})
+
+test("keeps the current page visible in long page ranges", () => {
+  assert.deepEqual(getPaginationItems(12, 1), [1, 2, 3, 4, 5, "ellipsis-end", 12])
+  assert.deepEqual(getPaginationItems(12, 7), [1, "ellipsis-start", 6, 7, 8, "ellipsis-end", 12])
+  assert.deepEqual(getPaginationItems(12, 12), [1, "ellipsis-start", 8, 9, 10, 11, 12])
+})
+
+test("clamps an out-of-range current page", () => {
+  assert.deepEqual(getPaginationItems(8, 99), [1, "ellipsis-start", 4, 5, 6, 7, 8])
+})

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

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ProgressBar } from "./index"
+
+const meta = {
+  title: "Primitives/ProgressBar",
+  component: ProgressBar,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "DS2 进度条原语：轨道 --ow-progress-track / 进度 --ow-progress-fill（墨/月白两极，永不荧黄）；高 4/6 两档、胶囊圆角；读数 mono+tabular-nums；indeterminate 用 --ow-ease-beacon 循环，reduced-motion 停。",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ProgressBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { value: 42, "aria-label": "下载进度" },
+  render: (args) => (
+    <div style={{ maxWidth: 360 }}>
+      <ProgressBar {...args} />
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  args: { "aria-label": "进度" },
+  render: () => (
+    <div style={{ maxWidth: 360, display: "flex", flexDirection: "column", gap: 16 }}>
+      <ProgressBar size="sm" value={30} aria-label="sm 4px" />
+      <ProgressBar size="md" value={30} aria-label="md 6px" />
+    </div>
+  ),
+}
+
+export const WithValue: Story = {
+  args: { value: 68, showValue: true, "aria-label": "上传进度" },
+  render: (args) => (
+    <div style={{ maxWidth: 360 }}>
+      <ProgressBar {...args} />
+    </div>
+  ),
+}
+
+export const Extremes: Story = {
+  args: { "aria-label": "进度" },
+  render: () => (
+    <div style={{ maxWidth: 360, display: "flex", flexDirection: "column", gap: 16 }}>
+      <ProgressBar value={0} showValue aria-label="空" />
+      <ProgressBar value={100} showValue aria-label="满" />
+    </div>
+  ),
+}
+
+export const Indeterminate: Story = {
+  args: { indeterminate: true, "aria-label": "处理中" },
+  render: (args) => (
+    <div style={{ maxWidth: 360 }}>
+      <ProgressBar {...args} />
+    </div>
+  ),
+}
+
+export const OnSurface: Story = {
+  args: { "aria-label": "进度" },
+  render: () => (
+    <div
+      style={{
+        maxWidth: 400,
+        padding: 16,
+        background: "var(--ow-surface)",
+        border: "1px solid var(--ow-border)",
+        borderRadius: "var(--ow-radius-card)",
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+      }}
+    >
+      <div style={{ font: "500 var(--ow-fs-ui)/1.4 var(--ow-font-sans)", color: "var(--ow-text)" }}>正在同步工作区</div>
+      <ProgressBar value={73} showValue aria-label="同步进度" />
+    </div>
+  ),
+}
+
+/**
+ * 预警档（R2 · T4）：`tone="warning"` 只换填充为 `--ow-warning`，轨道不动。
+ * 给「额度快用完」这类读数条用；§4 颜色只当第二编码——调用方必须同时给出数字，
+ * 去色也读得懂（账户菜单的积分行就是这么摆的：`1,880 / 2,000` 一直在）。
+ */
+export const WarningTone: Story = {
+  args: { "aria-label": "额度用量" },
+  render: () => (
+    <div style={{ maxWidth: 400, display: "flex", flexDirection: "column", gap: 12 }}>
+      <ProgressBar value={62} aria-label="额度用量 1,240 / 2,000" />
+      <ProgressBar value={94} tone="warning" aria-label="额度用量 1,880 / 2,000" />
+    </div>
+  ),
+}

package/src/components/primitives/ProgressBar/ProgressBarSource.test.mjs

@@ -0,0 +1,44 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const css = await readFile(new URL("../../../../styles/components.css", import.meta.url), "utf8")
+const segment = css.slice(css.indexOf("/* --- ProgressBar --- */"), css.indexOf("/* --- ProgressBar --- */") + 2200)
+
+// W5 终扫：§2「时长必须走 var(--ow-*)」+ §9 词表。滑段循环原写 1.2s——三条循环例外
+// （skeleton 1.6s / 小转子 0.9s / splash 1250ms）都对不上，tokens.css 也无该档，
+// 属未经词表背书的自造时长；归到呼吸档 --ow-dur-spin，词表不外扩。
+test("progress motion is fully tokenised — no literal durations in the segment", () => {
+  assert.match(
+    segment,
+    /\[data-ow-state="indeterminate"\] \[data-ow-part="fill"\] \{[^}]*animation: ow-progress-indeterminate var\(--ow-dur-spin\) var\(--ow-ease-beacon\) infinite;/s,
+  )
+  assert.match(segment, /transition: width var\(--ow-dur-2\) var\(--ow-ease-beacon\);/)
+  // 段内不再出现裸时长字面量（注释里点名旧值作文档，故只查声明行）
+  const decls = segment
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .split("\n")
+    .filter((line) => /animation:|transition:/.test(line))
+  for (const line of decls) {
+    assert.doesNotMatch(line, /\d+(\.\d+)?(ms|s)\b/, line.trim())
+  }
+})
+
+// 轨道/填充永不荧黄（§4 R2），高 4/6 属度量档非控件档，读数 mono + tabular-nums。
+test("progress bar keeps the neutral fill, metric heights, and mono readout", () => {
+  assert.match(segment, /background: var\(--ow-progress-track\)/)
+  assert.match(segment, /background: var\(--ow-progress-fill\)/)
+  assert.doesNotMatch(segment, /--ow-beacon|--ow-accent-dot/)
+  assert.match(segment, /\[data-ow-size="sm"\] \[data-ow-part="track"\] \{ height: 4px; \}/)
+  assert.match(segment, /\[data-ow-size="md"\] \[data-ow-part="track"\] \{ height: 6px; \}/)
+  assert.match(segment, /font: 500 var\(--ow-fs-ui\)\/1 var\(--ow-font-mono\)/)
+  assert.match(segment, /font-variant-numeric: tabular-nums/)
+})
+
+// §9 reduced-motion 兜底：循环停，落静态段。
+test("indeterminate sweep has a reduced-motion fallback", () => {
+  assert.match(
+    segment,
+    /@media \(prefers-reduced-motion: reduce\)[\s\S]*\[data-ow-state="indeterminate"\] \[data-ow-part="fill"\] \{ animation: none;/,
+  )
+})

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

@@ -0,0 +1,68 @@
+import type { CSSProperties } from "react"
+import { cn } from "../../../lib/utils"
+
+export type ProgressBarProps = {
+  /** 进度 0–100；indeterminate 时忽略 */
+  value?: number
+  /** 高度档位：sm=4px / md=6px（§7 度量，非控件高度表） */
+  size?: "sm" | "md"
+  /**
+   * 语气档（R2 · T4）：`default` 走 `--ow-progress-fill`（墨/月白两极）；
+   * `warning` 只把**填充**换成 `--ow-warning`，轨道仍是 `--ow-progress-track`。
+   * 用在「额度快用完」这类需要预警的读数条上（§4：颜色只当第二编码，
+   * 调用方必须同时给出数字/文字，见 DesktopAccountMenuView 的积分行）。永不荧黄。
+   */
+  tone?: "default" | "warning"
+  /** 不确定进度：滑动段循环（--ow-ease-beacon），reduced-motion 停为静态段 */
+  indeterminate?: boolean
+  /** 右侧 mono 读数（tabular-nums），indeterminate 时不显示 */
+  showValue?: boolean
+  /** 无可见标签时必传的可访问名 */
+  "aria-label"?: string
+  className?: string
+  style?: CSSProperties
+}
+
+/**
+ * ProgressBar — DS2 进度条原语（中性件，永不荧黄）。
+ *
+ * 轨道 `--ow-progress-track`、进度 `--ow-progress-fill`（墨/月白两极）；
+ * `tone="warning"` 只换填充为 `--ow-warning`（预警档，仍非荧黄）；
+ * 高 4/6 两档、胶囊圆角（radius-pill）；读数 mono + tabular-nums；
+ * indeterminate 段循环用 `--ow-ease-beacon`，prefers-reduced-motion 停动画。
+ * 样式在 styles/components.css 的 ProgressBar 段（data-slot="progress-bar"）。
+ */
+export function ProgressBar({
+  value = 0,
+  size = "md",
+  tone = "default",
+  indeterminate = false,
+  showValue = false,
+  "aria-label": ariaLabel,
+  className,
+  style,
+}: ProgressBarProps) {
+  const clamped = Math.min(100, Math.max(0, value))
+  return (
+    <div
+      data-slot="progress-bar"
+      data-ow-size={size}
+      data-ow-tone={tone}
+      data-ow-state={indeterminate ? "indeterminate" : "determinate"}
+      className={cn("flex items-center gap-2 w-full", className)}
+      style={style}
+    >
+      <div
+        data-ow-part="track"
+        role="progressbar"
+        aria-label={ariaLabel}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={indeterminate ? undefined : Math.round(clamped)}
+      >
+        <div data-ow-part="fill" style={indeterminate ? undefined : { width: `${clamped}%` }} />
+      </div>
+      {showValue && !indeterminate && <span data-ow-part="value">{Math.round(clamped)}%</span>}
+    </div>
+  )
+}

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

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Radio, RadioGroup } from "./index"
+
+const meta = {
+  title: "Primitives/Radio",
+  component: Radio,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Radio>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    checked: false,
+    value: "option-1",
+  },
+}
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+    value: "option-1",
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    checked: false,
+    disabled: true,
+    value: "option-1",
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+    value: "option-1",
+  },
+}
+
+export const InGroup: Story = {
+  render: () => {
+    const [value, setValue] = useState("option-1")
+    return (
+      <RadioGroup value={value} onChange={setValue} aria-label="示例单选组（支持方向键切换）">
+        <div className="flex flex-col gap-3">
+          {["option-1", "option-2", "option-3"].map((option) => (
+            <label key={option} className="flex items-center gap-2 text-sm text-ow-text">
+              <Radio value={option} aria-label={option} />
+              {option}
+            </label>
+          ))}
+        </div>
+      </RadioGroup>
+    )
+  },
+}
+
+export const GroupWithDisabledItem: Story = {
+  render: () => {
+    const [value, setValue] = useState("a")
+    return (
+      <RadioGroup value={value} onChange={setValue} aria-label="含禁用项的单选组">
+        <div className="flex flex-col gap-3">
+          <label className="flex items-center gap-2 text-sm text-ow-text">
+            <Radio value="a" aria-label="选项 A" /> 选项 A
+          </label>
+          <label className="flex items-center gap-2 text-sm text-[color:var(--ow-disabled-text)]">
+            <Radio value="b" disabled aria-label="选项 B（禁用）" /> 选项 B（禁用，键盘跳过）
+          </label>
+          <label className="flex items-center gap-2 text-sm text-ow-text">
+            <Radio value="c" aria-label="选项 C" /> 选项 C
+          </label>
+        </div>
+      </RadioGroup>
+    )
+  },
+}

package/src/components/primitives/Radio/RadioSource.test.mjs

@@ -0,0 +1,38 @@
+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("radio keeps 16px circular visual with a >=24px round hit target", () => {
+  assert.match(source, /w-4 h-4 rounded-full border-\[1\.5px\]/)
+  assert.match(source, /after:absolute after:-inset-1 after:rounded-full/)
+})
+
+test("checked ring and dot use the achromatic control-on pole, never beacon yellow", () => {
+  assert.match(source, /border-\[color:var\(--ow-control-on\)\]/)
+  assert.match(source, /bg-\[var\(--ow-control-on\)\]/)
+  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, /border-\[color:var\(--ow-disabled-border\)\] bg-\[var\(--ow-disabled-bg\)\]/)
+  assert.doesNotMatch(source, /disabled:opacity|opacity-disabled/)
+})
+
+test("radio group provides roving tabindex and arrow-key navigation", () => {
+  assert.match(source, /role="radiogroup"/)
+  assert.match(source, /ArrowRight/)
+  assert.match(source, /ArrowLeft/)
+  assert.match(source, /Home/)
+  assert.match(source, /End/)
+  assert.match(source, /tabIndex/)
+  assert.match(source, /data-ow-value=\{value\}/)
+})