@orbit-work/ui 0.1.0

package/src/components/composite/Tag/Tag.stories.tsx

@@ -0,0 +1,279 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Tag } from "./index"
+
+const meta: Meta<typeof Tag> = {
+  title: "Composite/Tag",
+  component: Tag,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Tag>
+
+export const DefaultMd: Story = {
+  args: {
+    children: "默认标签",
+  },
+}
+
+export const DefaultSm: Story = {
+  args: {
+    variant: "default",
+    size: "sm",
+    children: "小标签",
+  },
+}
+
+export const Success: Story = {
+  args: {
+    variant: "success",
+    children: "成功标签",
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    variant: "warning",
+    children: "警告标签",
+  },
+}
+
+export const Error: Story = {
+  args: {
+    variant: "error",
+    children: "错误标签",
+  },
+}
+
+export const Info: Story = {
+  args: {
+    variant: "info",
+    children: "信息标签",
+  },
+}
+
+export const PillWithDot: Story = {
+  args: {
+    variant: "success",
+    dot: true,
+    children: "运行正常",
+  },
+}
+
+export const PillWithCount: Story = {
+  args: {
+    variant: "default",
+    count: 12,
+    children: "未读",
+  },
+}
+
+export const PillDotAndCount: Story = {
+  args: {
+    variant: "info",
+    dot: true,
+    count: 3,
+    children: "同步中",
+  },
+}
+
+export const ExplicitPill: Story = {
+  args: {
+    variant: "default",
+    shape: "pill",
+    children: "显式胶囊",
+  },
+}
+
+export const Closable: Story = {
+  args: {
+    closable: true,
+    children: "可关闭",
+    onClose: () => console.log("Tag closed"),
+  },
+}
+
+export const Clickable: Story = {
+  args: {
+    variant: "default",
+    children: "可点击",
+    onClick: () => console.log("Tag clicked"),
+  },
+}
+
+export const ClosableAndClickable: Story = {
+  args: {
+    closable: true,
+    children: "点击或关闭",
+    onClick: () => console.log("Tag clicked"),
+    onClose: () => console.log("Tag closed"),
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    variant: "default",
+    disabled: true,
+    children: "禁用标签",
+  },
+}
+
+export const DisabledClosable: Story = {
+  args: {
+    closable: true,
+    disabled: true,
+    children: "禁用可关闭",
+    onClose: () => console.log("Tag closed"),
+  },
+}
+
+export const DisabledClickable: Story = {
+  args: {
+    variant: "success",
+    disabled: true,
+    children: "禁用可点击",
+    onClick: () => console.log("Tag clicked"),
+  },
+}
+
+export const LongText: Story = {
+  args: {
+    variant: "default",
+    children: "这是一个包含很长文本内容的标签示例",
+  },
+}
+
+export const CustomAriaLabel: Story = {
+  args: {
+    variant: "error",
+    closable: true,
+    closeAriaLabel: "Remove filter",
+    children: "Critical",
+    onClose: () => console.log("Tag closed"),
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
+      <Tag variant="default">Default</Tag>
+      <Tag variant="success">Success</Tag>
+      <Tag variant="warning">Warning</Tag>
+      <Tag variant="error">Error</Tag>
+      <Tag variant="info">Info</Tag>
+      <Tag variant="primary">Primary（遗留）</Tag>
+      <Tag variant="violet">Violet（遗留→info）</Tag>
+    </div>
+  ),
+}
+
+export const ShapeMatrix: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start" }}>
+      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+        <Tag variant="default">纯分类 · 直角 6</Tag>
+        <Tag variant="info">筛选值 · 直角 6</Tag>
+      </div>
+      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+        <Tag variant="success" dot>
+          带状态点 · 胶囊
+        </Tag>
+        <Tag variant="default" count={28}>
+          带计数 · 胶囊
+        </Tag>
+        <Tag variant="warning" dot count={4}>
+          点＋计数 · 胶囊
+        </Tag>
+      </div>
+    </div>
+  ),
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+      <Tag size="sm">Small</Tag>
+      <Tag size="md">Medium</Tag>
+      <Tag size="sm" dot variant="success">
+        Small 胶囊
+      </Tag>
+      <Tag size="md" dot variant="success">
+        Medium 胶囊
+      </Tag>
+    </div>
+  ),
+}
+
+export const InteractiveStates: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexDirection: "column", alignItems: "flex-start" }}>
+      <div style={{ display: "flex", gap: 8 }}>
+        <Tag>不可交互</Tag>
+        <Tag onClick={() => console.log("clicked")}>可点击</Tag>
+        <Tag closable onClose={() => console.log("closed")}>
+          可关闭
+        </Tag>
+        <Tag closable onClick={() => console.log("clicked")} onClose={() => console.log("closed")}>
+          两者皆可
+        </Tag>
+      </div>
+      <div style={{ display: "flex", gap: 8 }}>
+        <Tag variant="success" onClick={() => console.log("clicked")}>
+          语义可点击
+        </Tag>
+        <Tag variant="error" closable onClose={() => console.log("closed")}>
+          语义可关闭
+        </Tag>
+      </div>
+      <div style={{ display: "flex", gap: 8 }}>
+        <Tag variant="success" disabled>
+          禁用
+        </Tag>
+        <Tag variant="success" disabled onClick={() => console.log("clicked")}>
+          禁用点击
+        </Tag>
+        <Tag variant="success" disabled closable onClose={() => console.log("closed")}>
+          禁用关闭
+        </Tag>
+        <Tag disabled dot count={5}>
+          禁用胶囊
+        </Tag>
+      </div>
+    </div>
+  ),
+}
+
+export const FilterChips: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+      <Tag size="sm" closable onClose={() => console.log("removed")}>
+        TypeScript
+      </Tag>
+      <Tag size="sm" closable onClose={() => console.log("removed")}>
+        React
+      </Tag>
+      <Tag size="sm" closable onClose={() => console.log("removed")}>
+        Storybook
+      </Tag>
+      <Tag size="sm" closable onClose={() => console.log("removed")}>
+        Frontend
+      </Tag>
+      <Tag size="sm" closable onClose={() => console.log("removed")}>
+        UI Components
+      </Tag>
+    </div>
+  ),
+}
+
+export const CategoryLabels: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+      <Tag variant="info">Feature</Tag>
+      <Tag variant="error">Bug</Tag>
+      <Tag variant="warning">Enhancement</Tag>
+      <Tag variant="success">Documentation</Tag>
+      <Tag variant="default">Duplicate</Tag>
+    </div>
+  ),
+}

package/src/components/composite/Tag/TagSource.test.mjs

@@ -0,0 +1,67 @@
+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")
+
+test("closable Tag uses the public Close icon with an accessible label", () => {
+  assert.match(source, /import \{ Close \} from ['"]\.\.\/Icons['"]/)
+  assert.match(source, /closeAriaLabel\?: string/)
+  assert.match(source, /closeAriaLabel = ["']移除["']/)
+  assert.match(source, /aria-label=\{closeAriaLabel\}/)
+  assert.match(source, /<Close[^/]*aria-hidden="true" \/>/)
+  assert.doesNotMatch(source, /&times;/)
+})
+
+test("closable Tag keeps a compact neutral remove action with a >=24px hit area", () => {
+  assert.match(source, /disabled\?: boolean/)
+  assert.match(source, /data-ow-part="close"[\s\S]*?w-3\.5 h-3\.5/)
+  assert.match(source, /data-ow-part="close"[\s\S]*?hover:bg-\[var\(--ow-hover\)\]/)
+  // 命中区 ≥24：14px 视觉 + 四向 5px 外扩热区
+  assert.match(source, /data-ow-part="close"[\s\S]*?after:-inset-\[5px\]/)
+  assert.doesNotMatch(source, /data-ow-part="close"[^}]*(?:danger|error)/s)
+})
+
+test("Tag dual shape follows ui-shapes: square 6 for taxonomy, pill 999 with dot/count", () => {
+  assert.match(source, /square: "\[border-radius:var\(--ow-radius-tag\)\]"/)
+  assert.match(source, /pill: "\[border-radius:var\(--ow-radius-chip\)\]"/)
+  assert.match(source, /shape \?\? \(dot \|\| count != null \? "pill" : "square"\)/)
+  // 裸 Tailwind 圆角类不再出现
+  assert.doesNotMatch(source, /rounded-md|"rounded"|rounded /)
+})
+
+test("Tag semantic variants use the functional tint families", () => {
+  for (const tone of ["success", "warning", "error", "info"]) {
+    assert.match(
+      source,
+      new RegExp(
+        `bg-\\[var\\(--ow-${tone}-tint\\)\\] text-\\[color:var\\(--ow-${tone}-on-tint\\)\\] border-\\[color:var\\(--ow-${tone}-tint-border\\)\\]`,
+      ),
+    )
+  }
+  // violet 为遗留别名，映射 info tint
+  assert.match(source, /violet:\s*\n?\s*"bg-\[var\(--ow-info-tint\)\]/)
+})
+
+test("Tag interaction states use surface-relative hover/press and motion tokens", () => {
+  assert.match(source, /hover:bg-\[var\(--ow-hover\)\] active:bg-\[var\(--ow-press\)\]/)
+  assert.match(source, /--ow-success-tint-hover/)
+  assert.match(source, /ow-focus-ring/)
+  assert.match(source, /duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.doesNotMatch(source, /duration-200|transition-all/)
+})
+
+test("Tag count readout is mono with tabular figures", () => {
+  assert.match(source, /data-ow-part="count"[\s\S]*?font-\[family-name:var\(--ow-font-mono\)\] tabular-nums/)
+})
+
+test("Tag pressed writes aria-pressed for two-state filter values (R1 双编码：面色 + 字重 + 语义)", () => {
+  assert.match(source, /pressed\?: boolean/)
+  assert.match(source, /aria-pressed=\{Wrapper === "button" && pressed !== undefined \? pressed : undefined\}/)
+})
+
+// ── R2 复审 ────────────────────────────────────────────────────────────────
+test("字号一律走 --ow-fs-* / text-ow-fs-*：md 档不留 Tailwind 默认阶 text-xs", () => {
+  assert.match(source, /md: "text-ow-fs-body-sm px-2 py-1"/)
+  assert.doesNotMatch(source, /text-xs/)
+})

package/src/components/composite/Tag/index.tsx

@@ -0,0 +1,229 @@
+"use client"
+
+import { cva } from "class-variance-authority"
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+import { Close } from "../Icons"
+
+/**
+ * 语义变体走功能色 tint 族（tint / tint-border / on-tint）。
+ * `primary` 与 `violet` 为 1.x 遗留别名：primary=中性次级面，violet 映射到 info。
+ */
+export type TagVariant = "default" | "primary" | "success" | "warning" | "error" | "info" | "violet"
+export type TagSize = "sm" | "md"
+/** square=直角 6（纯分类/筛选）；pill=胶囊 999（带状态点/计数时自动切换）。 */
+export type TagShape = "square" | "pill"
+
+/**
+ * 状态点色族。R2 裁决（与 primitives/Chip、Badge 同口径）：功能色点一律 `--ow-{v}-on-tint`，
+ * 不再用 `--ow-{v}-fill`——暗档 fill 是深底色，坐在 tint 面上几乎看不见
+ * （success fill #27775A vs on-tint #7ED2A4）。中性档仍取 `--ow-progress-fill`（墨/纸极）。
+ */
+const DOT_COLOR: Record<TagVariant, string> = {
+  default: "var(--ow-progress-fill)",
+  primary: "var(--ow-progress-fill)",
+  success: "var(--ow-success-on-tint)",
+  warning: "var(--ow-warning-on-tint)",
+  error: "var(--ow-error-on-tint)",
+  info: "var(--ow-info-on-tint)",
+  violet: "var(--ow-info-on-tint)",
+}
+
+const tagVariants = cva(
+  "font-medium leading-none border inline-flex items-center gap-1 whitespace-nowrap transition-[background-color,border-color,color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+  {
+    variants: {
+      variant: {
+        default: "bg-ow-surface text-ow-text-2 border-ow-border-strong",
+        primary: "bg-ow-surface-2 text-ow-text-2 border-ow-border",
+        success:
+          "bg-[var(--ow-success-tint)] text-[color:var(--ow-success-on-tint)] border-[color:var(--ow-success-tint-border)]",
+        warning:
+          "bg-[var(--ow-warning-tint)] text-[color:var(--ow-warning-on-tint)] border-[color:var(--ow-warning-tint-border)]",
+        error:
+          "bg-[var(--ow-error-tint)] text-[color:var(--ow-error-on-tint)] border-[color:var(--ow-error-tint-border)]",
+        info: "bg-[var(--ow-info-tint)] text-[color:var(--ow-info-on-tint)] border-[color:var(--ow-info-tint-border)]",
+        violet:
+          "bg-[var(--ow-info-tint)] text-[color:var(--ow-info-on-tint)] border-[color:var(--ow-info-tint-border)]",
+      },
+      size: {
+        sm: "text-ow-fs-mark-sm px-1.5 py-0.5",
+        md: "text-ow-fs-body-sm px-2 py-1",
+      },
+      shape: {
+        square: "[border-radius:var(--ow-radius-tag)]",
+        pill: "[border-radius:var(--ow-radius-chip)]",
+      },
+      interactive: {
+        true: "cursor-pointer",
+        false: "",
+      },
+      disabled: {
+        true: "cursor-not-allowed text-[color:var(--ow-disabled-text)] border-[color:var(--ow-disabled-border)] bg-[var(--ow-disabled-bg)]",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        interactive: true,
+        disabled: false,
+        variant: ["default", "primary"],
+        className: "hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]",
+      },
+      {
+        interactive: true,
+        disabled: false,
+        variant: "success",
+        className: "hover:bg-[var(--ow-success-tint-hover)] active:bg-[var(--ow-success-tint-hover)]",
+      },
+      {
+        interactive: true,
+        disabled: false,
+        variant: "warning",
+        className: "hover:bg-[var(--ow-warning-tint-hover)] active:bg-[var(--ow-warning-tint-hover)]",
+      },
+      {
+        interactive: true,
+        disabled: false,
+        variant: "error",
+        className: "hover:bg-[var(--ow-error-tint-hover)] active:bg-[var(--ow-error-tint-hover)]",
+      },
+      {
+        interactive: true,
+        disabled: false,
+        variant: ["info", "violet"],
+        className: "hover:bg-[var(--ow-info-tint-hover)] active:bg-[var(--ow-info-tint-hover)]",
+      },
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      shape: "square",
+      interactive: false,
+      disabled: false,
+    },
+  },
+)
+
+export interface TagProps {
+  variant?: TagVariant
+  size?: TagSize
+  /** 缺省时自动裁定：带 dot/count=胶囊，否则直角 6（ui-shapes 口径）。 */
+  shape?: TagShape
+  /** 状态点：色随 variant 功能色 fill；R1 双编码——点色永远伴随 label 文字。 */
+  dot?: boolean
+  /** 计数读数：mono + tabular-nums。 */
+  count?: ReactNode
+  closable?: boolean
+  closeAriaLabel?: string
+  disabled?: boolean
+  /** 双态筛选值：写出 aria-pressed（选中同时由面色 + 字重双编码，R1）。仅 onClick 存在时生效。 */
+  pressed?: boolean
+  onClose?: () => void
+  onClick?: () => void
+  className?: string
+  children: ReactNode
+}
+
+/**
+ * Tag — compact label for categorization, filtering, or keyword display.
+ *
+ * 直角 6=纯分类/筛选；胶囊 999=带状态点/计数（自动切换，或用 `shape` 显式指定）。
+ * Use `Badge` for status indicators; use `Chip`（primitives/Chip）for removable
+ * selected-context capsules.
+ */
+export function Tag({
+  variant = "default",
+  size = "md",
+  shape,
+  dot = false,
+  count,
+  closable = false,
+  closeAriaLabel = "移除",
+  disabled = false,
+  pressed,
+  onClose,
+  onClick,
+  className = "",
+  children,
+}: TagProps) {
+  const interactive = !!onClick
+  // 与关闭钮共存时根元素保持 span、主体自成按钮，避免 button 嵌套。
+  const Wrapper = interactive && !closable ? "button" : "span"
+  const resolvedShape: TagShape = shape ?? (dot || count != null ? "pill" : "square")
+
+  const body = (
+    <>
+      {dot && (
+        <span
+          data-ow-part="dot"
+          className="w-1.5 h-1.5 shrink-0 [border-radius:var(--ow-radius-pill)]"
+          style={{ background: disabled ? "var(--ow-disabled-text)" : DOT_COLOR[variant] }}
+          aria-hidden="true"
+        />
+      )}
+      <span data-ow-part="content" className="inline-flex items-center">
+        {children}
+      </span>
+      {count != null && (
+        <span data-ow-part="count" className="shrink-0 font-[family-name:var(--ow-font-mono)] tabular-nums">
+          {count}
+        </span>
+      )}
+    </>
+  )
+
+  return (
+    <Wrapper
+      type={Wrapper === "button" ? "button" : undefined}
+      data-slot="tag"
+      data-variant={variant}
+      data-size={size}
+      data-shape={resolvedShape}
+      data-ow-part="surface"
+      className={cn(
+        tagVariants({ variant, size, shape: resolvedShape, interactive, disabled }),
+        Wrapper === "button" && "ow-focus-ring",
+        className,
+      )}
+      aria-disabled={disabled || undefined}
+      aria-pressed={Wrapper === "button" && pressed !== undefined ? pressed : undefined}
+      onClick={disabled || (interactive && closable) ? undefined : onClick}
+    >
+      {interactive && closable ? (
+        <button
+          type="button"
+          data-ow-part="body-action"
+          className="inline-flex items-center gap-[inherit] min-w-0 cursor-pointer bg-transparent border-0 p-0 m-0 [font:inherit] text-inherit [border-radius:inherit] ow-focus-ring"
+          disabled={disabled}
+          onClick={onClick}
+        >
+          {body}
+        </button>
+      ) : (
+        body
+      )}
+      {closable && (
+        <button
+          type="button"
+          data-ow-part="close"
+          className={cn(
+            "relative inline-flex w-3.5 h-3.5 -mr-0.5 p-0 shrink-0 items-center justify-center bg-transparent border-0 text-current",
+            "[border-radius:var(--ow-radius-key)] opacity-60 hover:opacity-100 hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]",
+            "ow-focus-ring disabled:cursor-not-allowed disabled:text-[color:var(--ow-disabled-text)] disabled:pointer-events-none",
+            // 命中区 ≥24：视觉 14px + 四向外扩 5px 热区
+            "after:absolute after:content-[''] after:-inset-[5px]",
+          )}
+          disabled={disabled}
+          onClick={(e) => {
+            e.stopPropagation()
+            onClose?.()
+          }}
+          aria-label={closeAriaLabel}
+        >
+          <Close className="w-2.5 h-2.5" aria-hidden="true" />
+        </button>
+      )}
+    </Wrapper>
+  )
+}

package/src/components/composite/TimePicker/TimePicker.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { TimePicker } from "./index"
+
+const meta = {
+  title: "Composite/TimePicker",
+  component: TimePicker,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof TimePicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function Live({ initial = "09:00", timezone = "Asia/Shanghai", disabled = false }) {
+  const [value, setValue] = useState(initial)
+  return (
+    <div style={{ width: 240 }}>
+      <TimePicker value={value} timezone={timezone} onChange={setValue} disabled={disabled} aria-label="提醒时刻" />
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState("09:00")
+    return (
+      <div style={{ width: 240 }}>
+        <TimePicker value={value} timezone="Asia/Shanghai" onChange={setValue} aria-label="提醒时刻" />
+        <p
+          style={{
+            marginTop: 16,
+            fontSize: "var(--ow-fs-ui)",
+            color: "var(--ow-text-2)",
+            fontFamily: "var(--ow-font-mono)",
+            fontVariantNumeric: "tabular-nums",
+          }}
+        >
+          已选：{value}
+        </p>
+      </div>
+    )
+  },
+}
+
+export const Afternoon: Story = {
+  name: "下午时刻",
+  render: () => <Live initial="14:30" />,
+}
+
+export const UTCTimezone: Story = {
+  name: "UTC 时区",
+  render: () => <Live initial="12:00" timezone="UTC" />,
+}
+
+export const NewYorkTimezone: Story = {
+  name: "纽约时区",
+  render: () => <Live initial="10:00" timezone="America/New_York" />,
+}
+
+export const Disabled: Story = {
+  name: "禁用（逐 token）",
+  render: () => <Live disabled />,
+}
+
+/** 弹层立面 pop 档：--ow-popover-bg + 1px 边 + --ow-shadow-pop；层内行 hover 走 --ow-hover-pop。 */
+export const OpenPopover: Story = {
+  name: "弹层展开（pop 档）",
+  render: () => (
+    <div style={{ height: 300 }}>
+      <Live initial="18:45" />
+    </div>
+  ),
+}
+
+/** 双主题对照：同一份 demo 逐字复制，主题由 data-theme 局部驱动，组件内不写死主题。 */
+export const ThemePair: Story = {
+  name: "双主题对照",
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+      <div data-theme="light" style={{ background: "var(--ow-bg)", padding: 16 }}>
+        <Live />
+      </div>
+      <div data-theme="dark" style={{ background: "var(--ow-bg)", padding: 16 }}>
+        <Live />
+      </div>
+    </div>
+  ),
+}