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

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

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

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

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