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

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

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

@@ -1,24 +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, "")
-
-// 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

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

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

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

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

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

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

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

@@ -1,38 +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("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\}/)
-})