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.
2026-07-25 06:03:17 +08:00
parent b3a7a2a8f5
commit 4efe3f3c64
185 changed files with 18809 additions and 0 deletions
@@ -0,0 +1,78 @@
+# Radio
+
+Radio wraps Base UI's radio primitive with the Tailwind classes from the official Base UI example.
+
+::example{src="components/radio/radio.tsx"}
+
+## Anatomy
+
+### Base UI Style
+
+```tsx
+import { RadioGroup } from "@base-ui/react/radio-group"
+import Radio from "@/components/ui/radio"
+
+function ExampleRadioGroup() {
+  const id = React.useId()
+
+  return (
+    <RadioGroup aria-labelledby={id} defaultValue="fuji-apple" className="flex flex-col items-start gap-1">
+      <div id={id} className="text-sm font-bold">Best apple</div>
+      <label className="flex items-center gap-2 text-sm">
+        <Radio.Root value="fuji-apple">
+          <Radio.Indicator />
+        </Radio.Root>
+        Fuji
+      </label>
+    </RadioGroup>
+  )
+}
+```
+
+### Shadcn Style
+
+```tsx
+import { Radio, RadioIndicator } from "@/components/ui/radio"
+
+<Radio value="fuji-apple">
+  <RadioIndicator />
+</Radio>
+```
+
+## Composition
+
+Use the following composition to build `Radio`:
+
+```txt
+Radio
+└── RadioIndicator
+```
+
+
+## API Reference
+
+Official API: [Base UI Radio API](https://base-ui.com/react/components/radio#api-reference).
+
+This wrapper preserves the underlying Base UI Radio API. Styled parts forward `className`, `style`, and `render` where Base UI supports them.
+
+### Root
+
+`Radio` 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. |
+
+### Indicator
+
+`Radio.Indicator` 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. |