docs: initial concepts and recipes (#147)

site/src/content/docs/reference/fullscreen-button.mdx

@@ -0,0 +1,96 @@
+---
+title: FullscreenButton
+frameworkTitle:
+  html: fullscreen-button
+description: A button component for toggling fullscreen mode
+---
+
+import { FullscreenButtonDemo } from '@/examples/react/FullscreenButton/FullscreenButtonDemo';
+import componentModuleStr from '@/examples/react/FullscreenButton/BasicFullscreenButton.tsx?raw';
+import cssModuleStr from '@/examples/react/FullscreenButton/FullscreenButton.module.css?raw';
+import htmlStr from '@/examples/html/fullscreen-button/snippet.html?raw';
+import htmlCssStr from '@/examples/html/fullscreen-button/fullscreen-button.css?raw';
+import htmlJsStr from '@/examples/html/fullscreen-button/fullscreen-button.js?raw';
+import FrameworkCase from '@/components/docs/FrameworkCase.astro';
+import ServerCode from '@/components/Code/ServerCode.astro';
+import { TabsRoot, TabsPanel } from '@/components/Tabs';
+
+## Features
+
+- Automatically switches icons based on fullscreen state
+- Works with browser Fullscreen API
+- Falls back gracefully when fullscreen not supported
+- Accessible keyboard navigation
+
+## Example
+
+<FrameworkCase frameworks={["react"]}>
+  <TabsRoot
+    aria-label="React implementation"
+    titles={{ component: 'Component', css: 'CSS Module' }}
+    client:load
+  >
+    <TabsPanel value="component" client:load>
+      <ServerCode code={componentModuleStr} lang="tsx" />
+    </TabsPanel>
+
+    <TabsPanel value="css" client:load>
+      <ServerCode code={cssModuleStr} lang="css" />
+    </TabsPanel>
+
+    <FullscreenButtonDemo client:load />
+  </TabsRoot>
+</FrameworkCase>
+
+<FrameworkCase frameworks={["html"]}>
+  <TabsRoot
+    aria-label="HTML implementation"
+    titles={{ html: 'HTML', css: 'CSS', javascript: 'JS' }}
+    client:load
+  >
+    <TabsPanel value="html" client:load>
+      <ServerCode code={htmlStr} lang="html" />
+    </TabsPanel>
+
+    <TabsPanel value="css" client:load>
+      <ServerCode code={htmlCssStr} lang="css" />
+    </TabsPanel>
+
+    <TabsPanel value="javascript" client:load>
+      <ServerCode code={htmlJsStr} lang="js" />
+    </TabsPanel>
+
+    <FullscreenButtonDemo client:load />
+  </TabsRoot>
+</FrameworkCase>
+
+## Data Attributes
+
+The FullscreenButton automatically sets data attributes based on fullscreen state:
+
+- `data-fullscreen` - Present when in fullscreen, absent when not
+
+Use these attributes for state-based styling in your CSS.
+
+<FrameworkCase frameworks={["react"]}>
+
+## Props
+
+All standard button props are supported, plus:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `children` | `ReactNode` | Button content (typically icons) |
+| `className` | `string` | CSS class name |
+
+</FrameworkCase>
+
+## Accessibility
+
+- Automatically includes proper ARIA labels
+- Keyboard accessible (Space/Enter)
+- Announces fullscreen state changes to screen readers
+
+## Browser Support
+
+The FullscreenButton uses the standard Fullscreen API, which is supported in all modern browsers.