feat(docs): add bilingual package documentation site

2026-09-20 15:53:28 +08:00
parent 60f6f1fb1a
commit dc80bd8ae0
111 changed files with 6531 additions and 0 deletions
@@ -0,0 +1,37 @@
+---
+title: Compose a form
+description: Combine field, input, and button primitives while keeping domain state in the application.
+order: 30
+toc:
+  - id: create-the-form
+    title: Create the form
+  - id: validation
+    title: Validation
+  - id: styling
+    title: Styling
+---
+
+## Create the form {#create-the-form}
+
+```tsx
+import { Button } from "@workspace/ui/components/button"
+import { Field, FieldError, FieldLabel } from "@workspace/ui/components/field"
+import { Input } from "@workspace/ui/components/input"
+
+;<form onSubmit={saveProfile}>
+  <Field>
+    <FieldLabel htmlFor="display-name">Display name</FieldLabel>
+    <Input id="display-name" name="displayName" />
+    <FieldError>{errors.displayName}</FieldError>
+  </Field>
+  <Button type="submit">Save profile</Button>
+</form>
+```
+
+## Validation {#validation}
+
+The UI package renders validation state but does not select a form library or schema. Connect native form data, React state, or a form framework at the application boundary.
+
+## Styling {#styling}
+
+Use component variants for supported semantic changes and `className` for local layout. Use `cn` from `@workspace/ui/lib/utils` when conditional classes or consumer overrides must be merged.