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

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

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

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

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

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