@orbit-work/ui 0.1.0

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

@@ -0,0 +1,386 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { NativeCheckbox as Checkbox, NativeRadio as Radio, NativeSelect as Select, TextField, Textarea } from "./index"
+
+const meta = {
+  title: "Composite/NativeControls",
+  component: TextField,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof TextField>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const TextFieldDefault: Story = {
+  render: () => <TextField placeholder="Enter text..." />,
+}
+
+export const TextFieldWithValue: Story = {
+  render: () => <TextField defaultValue="Hello World" />,
+}
+
+export const TextFieldDisabled: Story = {
+  render: () => <TextField placeholder="Disabled field" disabled />,
+}
+
+export const TextFieldUnstyled: Story = {
+  render: () => <TextField placeholder="Unstyled field" unstyled />,
+}
+
+export const TextFieldTypes: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 400 }}>
+      <TextField type="text" placeholder="Text input" />
+      <TextField type="email" placeholder="Email input" />
+      <TextField type="password" placeholder="Password input" />
+      <TextField type="number" placeholder="Number input" />
+      <TextField type="url" placeholder="URL input" />
+      <TextField type="search" placeholder="Search input" />
+    </div>
+  ),
+}
+
+export const TextareaDefault: Story = {
+  render: () => <Textarea placeholder="Enter multiple lines..." />,
+}
+
+export const TextareaWithValue: Story = {
+  render: () => <Textarea defaultValue="Line 1\nLine 2\nLine 3" rows={5} />,
+}
+
+export const TextareaDisabled: Story = {
+  render: () => <Textarea placeholder="Disabled textarea" disabled rows={4} />,
+}
+
+export const TextareaUnstyled: Story = {
+  render: () => <Textarea placeholder="Unstyled textarea" unstyled rows={4} />,
+}
+
+export const SelectDefault: Story = {
+  render: () => (
+    <Select>
+      <option value="">Choose an option...</option>
+      <option value="1">Option 1</option>
+      <option value="2">Option 2</option>
+      <option value="3">Option 3</option>
+    </Select>
+  ),
+}
+
+export const SelectWithValue: Story = {
+  render: () => (
+    <Select defaultValue="2">
+      <option value="1">Option 1</option>
+      <option value="2">Option 2</option>
+      <option value="3">Option 3</option>
+    </Select>
+  ),
+}
+
+export const SelectDisabled: Story = {
+  render: () => (
+    <Select disabled>
+      <option value="">Disabled select...</option>
+      <option value="1">Option 1</option>
+    </Select>
+  ),
+}
+
+export const SelectUnstyled: Story = {
+  render: () => (
+    <Select unstyled>
+      <option value="">Unstyled select...</option>
+      <option value="1">Option 1</option>
+      <option value="2">Option 2</option>
+    </Select>
+  ),
+}
+
+export const AllControlsUnstyled: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 400 }}>
+      <TextField
+        placeholder="Unstyled text field"
+        unstyled
+        style={{ padding: 8, border: "2px solid var(--ow-sky-500)", borderRadius: 4 }}
+      />
+      <Textarea
+        placeholder="Unstyled textarea"
+        unstyled
+        rows={3}
+        style={{ padding: 8, border: "2px solid var(--ow-cyan-500)", borderRadius: 4 }}
+      />
+      <Select unstyled style={{ padding: 8, border: "2px solid var(--ow-orange-500)", borderRadius: 4 }}>
+        <option value="">Unstyled select...</option>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+      </Select>
+    </div>
+  ),
+}
+
+export const FormExample: Story = {
+  render: () => (
+    <div
+      style={{
+        background: "var(--ow-surface)",
+        border: "1px solid var(--ow-border)",
+        borderRadius: 8,
+        padding: 24,
+        maxWidth: 500,
+      }}
+    >
+      <h3 style={{ margin: "0 0 20px 0", fontSize: 18, fontWeight: 600, color: "var(--ow-text)" }}>User Profile</h3>
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div>
+          <label style={{ display: "block", marginBottom: 8, fontSize: 14, fontWeight: 500, color: "var(--ow-text)" }}>
+            Full Name
+          </label>
+          <TextField placeholder="John Doe" />
+        </div>
+        <div>
+          <label style={{ display: "block", marginBottom: 8, fontSize: 14, fontWeight: 500, color: "var(--ow-text)" }}>
+            Email
+          </label>
+          <TextField type="email" placeholder="john@example.com" />
+        </div>
+        <div>
+          <label style={{ display: "block", marginBottom: 8, fontSize: 14, fontWeight: 500, color: "var(--ow-text)" }}>
+            Role
+          </label>
+          <Select>
+            <option value="">Select a role...</option>
+            <option value="dev">Developer</option>
+            <option value="designer">Designer</option>
+            <option value="pm">Product Manager</option>
+          </Select>
+        </div>
+        <div>
+          <label style={{ display: "block", marginBottom: 8, fontSize: 14, fontWeight: 500, color: "var(--ow-text)" }}>
+            About
+          </label>
+          <Textarea placeholder="Brief introduction..." rows={4} />
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const MigrationExample: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 24 }}>
+      <div style={{ flex: 1 }}>
+        <h4 style={{ margin: "0 0 12px 0", fontSize: 14, fontWeight: 600, color: "var(--ow-text)" }}>
+          During Migration (unstyled)
+        </h4>
+        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          <TextField
+            unstyled
+            placeholder="Keep existing styles"
+            className="legacy-input"
+            style={{ padding: "10px 12px", border: "1px solid #ddd", borderRadius: 6, background: "#fafafa" }}
+          />
+          <Select
+            unstyled
+            className="legacy-select"
+            style={{ padding: "10px 12px", border: "1px solid #ddd", borderRadius: 6, background: "#fafafa" }}
+          >
+            <option>Keep existing styles</option>
+          </Select>
+        </div>
+      </div>
+      <div style={{ flex: 1 }}>
+        <h4 style={{ margin: "0 0 12px 0", fontSize: 14, fontWeight: 600, color: "var(--ow-text)" }}>
+          After Migration (styled)
+        </h4>
+        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          <TextField placeholder="Orbitwork design system" />
+          <Select>
+            <option>Orbitwork design system</option>
+          </Select>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const CheckboxDefault: Story = {
+  render: () => (
+    <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text)" }}>
+      <Checkbox />
+      Accept terms and conditions
+    </label>
+  ),
+}
+
+export const CheckboxChecked: Story = {
+  render: () => (
+    <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text)" }}>
+      <Checkbox defaultChecked />
+      Accept terms and conditions
+    </label>
+  ),
+}
+
+export const CheckboxDisabled: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text-3)" }}>
+        <Checkbox disabled />
+        Disabled unchecked
+      </label>
+      <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text-3)" }}>
+        <Checkbox disabled defaultChecked />
+        Disabled checked
+      </label>
+    </div>
+  ),
+}
+
+export const CheckboxUnstyled: Story = {
+  render: () => (
+    <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text)" }}>
+      <Checkbox unstyled />
+      Unstyled checkbox (native appearance)
+    </label>
+  ),
+}
+
+export const CheckboxGroupExample: Story = {
+  render: () => (
+    <fieldset style={{ border: "none", padding: 0, margin: 0 }}>
+      <legend style={{ marginBottom: 12, fontSize: 14, fontWeight: 600, color: "var(--ow-text)" }}>
+        Notification preferences
+      </legend>
+      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+        {[
+          { value: "email", label: "Email notifications" },
+          { value: "push", label: "Push notifications" },
+          { value: "sms", label: "SMS notifications" },
+        ].map((option) => (
+          <label
+            key={option.value}
+            style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text)" }}
+          >
+            <Checkbox name="notifications" value={option.value} defaultChecked={option.value === "email"} />
+            {option.label}
+          </label>
+        ))}
+      </div>
+    </fieldset>
+  ),
+}
+
+export const RadioDefault: Story = {
+  render: () => (
+    <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text)" }}>
+      <Radio name="radio-default" value="a" />
+      Option A
+    </label>
+  ),
+}
+
+export const RadioChecked: Story = {
+  render: () => (
+    <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text)" }}>
+      <Radio name="radio-checked" value="a" defaultChecked />
+      Option A
+    </label>
+  ),
+}
+
+export const RadioDisabled: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text-3)" }}>
+        <Radio name="radio-disabled" value="a" disabled />
+        Disabled unchecked
+      </label>
+      <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text-3)" }}>
+        <Radio name="radio-disabled" value="b" disabled defaultChecked />
+        Disabled checked
+      </label>
+    </div>
+  ),
+}
+
+export const RadioUnstyled: Story = {
+  render: () => (
+    <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text)" }}>
+      <Radio name="radio-unstyled" value="a" unstyled />
+      Unstyled radio (native appearance)
+    </label>
+  ),
+}
+
+export const RadioGroupExample: Story = {
+  render: () => (
+    <fieldset style={{ border: "none", padding: 0, margin: 0 }}>
+      <legend style={{ marginBottom: 12, fontSize: 14, fontWeight: 600, color: "var(--ow-text)" }}>
+        Choose a plan
+      </legend>
+      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+        {[
+          { value: "starter", label: "Starter" },
+          { value: "pro", label: "Pro", defaultChecked: true },
+          { value: "enterprise", label: "Enterprise" },
+        ].map((option) => (
+          <label
+            key={option.value}
+            style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text)" }}
+          >
+            <Radio name="plan" value={option.value} defaultChecked={option.defaultChecked} />
+            {option.label}
+          </label>
+        ))}
+      </div>
+    </fieldset>
+  ),
+}
+
+export const AllControlsStyled: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 400 }}>
+      <div>
+        <label style={{ display: "block", marginBottom: 8, fontSize: 14, fontWeight: 500, color: "var(--ow-text)" }}>
+          Username
+        </label>
+        <TextField placeholder="Enter your username" />
+      </div>
+      <div>
+        <label style={{ display: "block", marginBottom: 8, fontSize: 14, fontWeight: 500, color: "var(--ow-text)" }}>
+          Bio
+        </label>
+        <Textarea placeholder="Tell us about yourself" rows={4} />
+      </div>
+      <div>
+        <label style={{ display: "block", marginBottom: 8, fontSize: 14, fontWeight: 500, color: "var(--ow-text)" }}>
+          Country
+        </label>
+        <Select>
+          <option value="">Select a country...</option>
+          <option value="us">United States</option>
+          <option value="uk">United Kingdom</option>
+          <option value="ca">Canada</option>
+          <option value="au">Australia</option>
+        </Select>
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+        <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text)" }}>
+          <Checkbox defaultChecked />
+          Subscribe to newsletter
+        </label>
+        <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text)" }}>
+          <Radio name="role" value="developer" defaultChecked />
+          Developer
+        </label>
+        <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--ow-text)" }}>
+          <Radio name="role" value="designer" />
+          Designer
+        </label>
+      </div>
+    </div>
+  ),
+}

package/src/components/composite/NativeControls/NativeControlsStyleSource.test.mjs

@@ -0,0 +1,63 @@
+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 styles = await readFile(new URL("../../../../styles/components.css", import.meta.url), "utf8")
+
+const shell = styles.match(/\.ow-input:where\(:not\(\.ow-input--checkbox\):not\(\.ow-input--radio\)\) \{[^}]*\}/s)?.[0]
+
+test("每个 !unstyled 挂出的 .ow-input 类都有本体规则兜底", () => {
+  for (const cls of source.match(/ow-input(?:--[a-z]+)?/g) ?? []) {
+    assert.ok(styles.includes(`.${cls}`), `${cls} 无 CSS 本体规则`)
+  }
+})
+
+test("输入壳口径对齐 primitives/Field：32 高 · radius-control · 1px 边 · input-bg", () => {
+  assert.ok(shell)
+  assert.match(shell, /height: var\(--ow-h-md, 32px\);/)
+  assert.match(shell, /border: var\(--ow-border-width-default, 1px\) solid var\(--ow-input-border\);/)
+  assert.match(shell, /border-radius: var\(--ow-radius-control\);/)
+  assert.match(shell, /background: var\(--ow-input-bg\);/)
+  assert.match(shell, /color: var\(--ow-input-text\);/)
+  assert.match(styles, /\.ow-input::placeholder \{ color: var\(--ow-placeholder\); \}/)
+})
+
+test("三态边框 rest→hover→focus，focus 只变边框色、不画任何外环（R3）", () => {
+  assert.doesNotMatch(shell, /box-shadow:/)
+  assert.match(styles, /:hover:not\(:disabled\):not\(:focus\) \{\n\s*border-color: var\(--ow-input-border-hover\);/)
+  // R3（2026-09-04）：输入类 focus 只剩 1px 边框变 --ow-input-border-focus，不画
+  // box-shadow 外环也不画 outline 三件套——键盘 focus-visible 环只属按钮与链接
+  // （同 primitives/Field 的 R3 收口）。本条原断言 focus 给 --ow-input-focus-shadow
+  // 环，是 R3 之前的旧制式，按 CSS 源注释的 R3 裁决订正。
+  const focusRule = styles.match(
+    /\.ow-input:where\(:not\(\.ow-input--checkbox\):not\(\.ow-input--radio\)\):focus \{[^}]*\}/s,
+  )?.[0]
+  assert.ok(focusRule)
+  assert.match(focusRule, /border-color: var\(--ow-input-border-focus\);/)
+  assert.doesNotMatch(focusRule, /box-shadow:|outline:/)
+})
+
+test("disabled 逐 token，不整块 opacity", () => {
+  const disabled = styles.match(
+    /\.ow-input:where\(:not\(\.ow-input--checkbox\):not\(\.ow-input--radio\)\):disabled \{[^}]*\}/s,
+  )?.[0]
+  assert.ok(disabled)
+  assert.match(disabled, /border-color: var\(--ow-disabled-border\);/)
+  assert.match(disabled, /background: var\(--ow-input-disabled-bg\);/)
+  assert.match(disabled, /color: var\(--ow-input-disabled-text\);/)
+  assert.doesNotMatch(disabled, /opacity:/)
+})
+
+test("textarea 放开高度、select 留箭头位、勾选类走 accent-color", () => {
+  const textarea = styles.match(/\.ow-input--textarea \{[^}]*\}/s)?.[0]
+  assert.match(textarea ?? "", /height: auto;/)
+  assert.match(textarea ?? "", /resize: vertical;/)
+  assert.match(styles, /\.ow-input--select \{[^}]*padding-right: var\(--ow-space-6, 24px\);/s)
+  assert.match(styles, /\.ow-input--checkbox,\n\.ow-input--radio \{[^}]*accent-color: var\(--ow-control-on\);/s)
+})
+
+test("composer-menu 提示走 --ow-font-mono，不写死 mono 字族栈", () => {
+  assert.match(styles, /\[data-ow-part="hint"\] \{[^}]*font: 500 var\(--ow-fs-mark-md\)\/1\.2 var\(--ow-font-mono\);/s)
+  assert.doesNotMatch(styles, /ui-monospace/)
+})

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

@@ -0,0 +1,97 @@
+import { type InputHTMLAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes, forwardRef } from "react"
+
+/** Native-compatible controls for incremental consumer migration.
+ *
+ * They provide one design-system ownership boundary while accepting the full
+ * platform attribute surface needed by rich desktop forms. `unstyled` keeps a
+ * consumer's existing layout class during migration; omit it for Orbitwork's
+ * standard field appearance.
+ */
+export type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & { unstyled?: boolean }
+/**
+ * @deprecated DS 2.0 起单行文本控件归口 Field（primitives/Field，值语义 onChange＋壳承担三态边框）。
+ * 保留原生事件 API 供 apps/desktop 渐进迁移；批次⑤ 产品面逐视图替换后移除。
+ */
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextField(
+  { unstyled = false, className = "", ...props },
+  ref,
+) {
+  return <input ref={ref} className={[!unstyled && "ow-input", className].filter(Boolean).join(" ")} {...props} />
+})
+
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & { unstyled?: boolean }
+/**
+ * @deprecated DS 2.0 起多行文本控件归口 Field 的 multiline 形态（primitives/Field）。
+ * 保留原生事件 API 供 apps/desktop 渐进迁移；批次⑤ 产品面逐视图替换后移除。
+ */
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { unstyled = false, className = "", ...props },
+  ref,
+) {
+  return (
+    <textarea
+      ref={ref}
+      className={[!unstyled && "ow-input ow-input--textarea", className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  )
+})
+
+export type NativeSelectProps = SelectHTMLAttributes<HTMLSelectElement> & { unstyled?: boolean }
+/**
+ * @deprecated DS 2.0 起下拉选择归口 Select（primitives/Select：Field 式三态触发器 ＋
+ * popover 档菜单面 ＋ 勾选表达选中）。原生 select 的字形/圆角/焦点写法都与 DS2 对不齐。
+ * 保留原生事件 API 供 apps/desktop 渐进迁移；批次⑤ 产品面逐视图替换后移除。
+ */
+export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(function NativeSelect(
+  { unstyled = false, className = "", ...props },
+  ref,
+) {
+  return (
+    <select
+      ref={ref}
+      className={[!unstyled && "ow-input ow-input--select", className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  )
+})
+
+export type NativeCheckboxProps = InputHTMLAttributes<HTMLInputElement> & { unstyled?: boolean }
+/**
+ * @deprecated DS 2.0 起勾选件归口 Checkbox（primitives/Checkbox：--ow-control-on 无彩选中 ＋
+ * .ow-focus-ring 焦点 ＋ 4px 框）。本件是 accent-color 的第二实现，两套字形/圆角/焦点写法。
+ * 保留原生事件 API 供 apps/desktop 渐进迁移；批次⑤ 产品面逐视图替换后移除。
+ */
+export const NativeCheckbox = forwardRef<HTMLInputElement, NativeCheckboxProps>(function NativeCheckbox(
+  { unstyled = false, className = "", ...props },
+  ref,
+) {
+  return (
+    <input
+      type="checkbox"
+      ref={ref}
+      className={[!unstyled && "ow-input ow-input--checkbox", className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  )
+})
+
+export type NativeRadioProps = InputHTMLAttributes<HTMLInputElement> & { unstyled?: boolean }
+/**
+ * @deprecated DS 2.0 起单选件归口 Radio / RadioGroup（primitives/Radio）。同 NativeCheckbox，
+ * 本件是 accent-color 的第二实现。保留原生事件 API 供 apps/desktop 渐进迁移；
+ * 批次⑤ 产品面逐视图替换后移除。
+ */
+export const NativeRadio = forwardRef<HTMLInputElement, NativeRadioProps>(function NativeRadio(
+  { unstyled = false, className = "", ...props },
+  ref,
+) {
+  return (
+    <input
+      type="radio"
+      ref={ref}
+      className={[!unstyled && "ow-input ow-input--radio", className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  )
+})