feat(site): add component documentation site

Add Vite, React, MDX, and Tailwind documentation infrastructure.

Document component, handbook, overview, and utility routes.

Add interactive examples for every component family.

Deduplicate React resolution and load the Tailwind 4 theme configuration.
This commit is contained in:
Maofeng
2026-07-25 06:03:17 +08:00
parent b3a7a2a8f5
commit 4efe3f3c64
185 changed files with 18809 additions and 0 deletions
+66
View File
@@ -0,0 +1,66 @@
# Fieldset
Fieldset wraps Base UI's fieldset primitive with the Tailwind classes from the official Base UI example.
::example{src="components/fieldset/fieldset.tsx"}
## Anatomy
### Base UI Style
```tsx
import Field from "@/components/ui/field"
import Fieldset from "@/components/ui/fieldset"
<Fieldset.Root>
<Fieldset.Legend>Billing details</Fieldset.Legend>
<Field.Root>
<Field.Label>Company</Field.Label>
<Field.Control />
</Field.Root>
</Fieldset.Root>
```
### Shadcn Style
```tsx
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset"
```
## Composition
Use the following composition to build `Fieldset`:
```txt
Fieldset
└── FieldsetLegend
```
## API Reference
Official API: [Base UI Fieldset API](https://base-ui.com/react/components/fieldset#api-reference).
This wrapper preserves the underlying Base UI Fieldset API. Styled parts forward `className`, `style`, and `render` where Base UI supports them.
### Root
`Fieldset` exposes the corresponding Base UI part with the wrapper's Tailwind styles.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` / `defaultOpen` | `any` | - | Initial uncontrolled value or open state when supported. |
| `value` / `open` | `any` | - | Controlled value or open state when supported. |
| `onValueChange` / `onOpenChange` | `function` | - | Called when controlled state changes. |
| `children` | `React.ReactNode` | - | Child parts rendered inside the root. |
### Legend
`Fieldset.Legend` exposes the corresponding Base UI part with the wrapper's Tailwind styles.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| (state) => string` | - | Classes for the part state. |
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |