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,31 @@
+---
+title: Add responsive behavior
+description: Use shared breakpoint and interaction hooks when CSS alone cannot express the behavior.
+order: 20
+toc:
+  - id: breakpoints
+    title: Breakpoints
+  - id: server-rendering
+    title: Server rendering
+  - id: ripple
+    title: Ripple interaction
+---
+
+## Breakpoints {#breakpoints}
+
+```tsx
+import { useBreakpoint, useIsMobile } from "@workspace/ui/hooks/use-breakpoint"
+
+const breakpoint = useBreakpoint()
+const isMobile = useIsMobile()
+```
+
+Prefer CSS responsive variants for visual changes. Use these hooks only when component behavior or mounted content must change.
+
+## Server rendering {#server-rendering}
+
+The breakpoint store uses a deterministic desktop server snapshot. `getBreakpointInitializationScript` can assign the matching root class before hydration when the application needs CSS and behavioral breakpoints to agree immediately.
+
+## Ripple interaction {#ripple}
+
+`useRipple` returns a ref callback that adds pointer-driven feedback to an interactive element. The element should establish a positioned containing block so the generated overlay uses the correct bounds.