fix: restore focus behavior and playground interactions

docs/app/docs/components/scroll-area/content.mdx

@@ -1,6 +1,6 @@
 import Documentation from '@/components/layout/Documentation/Documentation';
 import ScrollAreaExample from "./docs/example_1"
-import { code, anatomy, api_documentation, ariaReferences, fullPageRestoration, keyboardShortcuts } from "./docs/codeUsage"
+import { code, anatomy, api_documentation, ariaReferences, keyboardShortcuts } from "./docs/codeUsage"
 
 <Documentation
     title="ScrollArea"
@@ -10,16 +10,6 @@ import { code, anatomy, api_documentation, ariaReferences, fullPageRestoration,
         <ScrollAreaExample />
     </Documentation.ComponentHero>
 
-    <Documentation.Section title="Full-page scroll containers">
-        Use `scrollRestoration="manual"` when ScrollArea is the page-level scroller and the viewport should reset after navigation.
-        Keep the default `auto` behavior for nested scroll regions, code blocks, chat panes, virtualized lists, and other areas that should preserve their current scroll offset across rerenders.
-        Pass a stable `restoreKey`, such as the current pathname, to choose when the reset happens.
-
-        <Documentation.CodeBlock language="tsx">
-            {fullPageRestoration.javascript.code}
-        </Documentation.CodeBlock>
-    </Documentation.Section>
-
     <Documentation.ApiReference
         anatomy={anatomy.code}
         tables={api_documentation}

docs/app/docs/components/scroll-area/docs/codeUsage.js

@@ -23,33 +23,6 @@ export const code = {
 
 export const anatomy = { code: anatomy_SourceCode };
 
-export const fullPageRestoration = {
-    javascript: {
-        code: `import { usePathname } from 'next/navigation';
-import ScrollArea from '@radui/ui/ScrollArea';
-
-export function PageScroller({ children }) {
-    const pathname = usePathname();
-
-    return (
-        <ScrollArea.Root
-            customRootClass="rad-ui"
-            scrollRestoration="manual"
-            restoreKey={pathname}
-            style={{ height: '100%', width: '100%' }}
-        >
-            <ScrollArea.Viewport style={{ height: '100%' }}>
-                {children}
-            </ScrollArea.Viewport>
-            <ScrollArea.Scrollbar orientation="vertical">
-                <ScrollArea.Thumb />
-            </ScrollArea.Scrollbar>
-        </ScrollArea.Root>
-    );
-}`
-    }
-};
-
 export const api_documentation = {
     root: root_api,
     scrollbar: scrollbar_api

docs/app/docs/components/scroll-area/docs/component_api/root.tsx

@@ -8,8 +8,6 @@ const data = {
     ],
     data: [
         { prop: { name: "type", info_tooltips: "Controls when the scrollbar is visible." }, type: "enum", enum_values: ["auto", "always", "scroll", "hover"], default: "hover" },
-        { prop: { name: "scrollRestoration", info_tooltips: "Use manual for full-page scroll containers that should reset their viewport on route changes." }, type: "enum", enum_values: ["auto", "manual"], default: "auto" },
-        { prop: { name: "restoreKey", info_tooltips: "Key that triggers a manual scroll reset when it changes, such as a pathname." }, type: "React.Key", default: "undefined" },
         { prop: { name: "customRootClass", info_tooltips: "Override the root CSS class." }, type: "string", default: '""' }
     ]
 }

docs/app/playground/components/BadgePlayground.js

@@ -3,25 +3,29 @@
 import ColorLooper from "../helpers/ColorLooper"
 import Badge from "@radui/ui/Badge"
 
+const variants = ["solid", "soft", "surface", "outline", "ghost"]
+const colors = ["gray", "blue", "green", "red", "plum", "gold"]
+const sizes = ["small", "medium", "large", "x-large"]
+
 const Playground = () => (
     <div className='mt-4 space-y-2'>
         <ColorLooper
             title="Badge"
             docsLink="/docs/components/badge"
             description="Variants, sizes, and semantic labels with current badge props."
         >
-            <div className='flex flex-wrap items-center gap-2'>
-                <Badge>Stable</Badge>
-                <Badge variant="soft">Beta</Badge>
-                <Badge variant="surface">Preview</Badge>
-                <Badge variant="outline">Docs</Badge>
-                <Badge variant="ghost">Ghost</Badge>
-            </div>
-            <div className='mt-4 flex flex-wrap items-center gap-2'>
-                <Badge size="small">Small</Badge>
-                <Badge size="medium">Medium</Badge>
-                <Badge size="large">Large</Badge>
-                <Badge size="x-large">XL</Badge>
+            <div className="grid gap-5">
+                {variants.map((variant) => (
+                    <div key={variant} className="grid gap-3 border-t border-gray-200 pt-3 lg:grid-cols-[7rem_1fr] lg:items-center">
+                        <span className="text-xs font-semibold uppercase text-gray-600">{variant}</span>
+                        <div className="flex flex-wrap items-center gap-2">
+                            {colors.map((color) => <Badge key={color} variant={variant} color={color}>{color}</Badge>)}
+                        </div>
+                    </div>
+                ))}
+                <div className="flex flex-wrap items-center gap-2 border-t border-gray-200 pt-3">
+                    {sizes.map((size) => <Badge key={size} size={size}>{size}</Badge>)}
+                </div>
             </div>
         </ColorLooper>
     </div>

docs/app/playground/components/ButtonPlayground.js

@@ -1,39 +1,30 @@
 'use client'
 
-import { ArrowRight } from "lucide-react"
+import { ArrowRight, LoaderCircle } from "lucide-react"
 import ColorLooper from "../helpers/ColorLooper"
 import Button from "@radui/ui/Button"
 
+const variants = ["solid", "soft", "outline", "ghost", "destructive"]
+const sizes = ["small", "medium", "large", "x-large"]
+
 const Playground = () => (
     <div className='mt-4 space-y-2'>
         <ColorLooper
-            title="Buttons"
+            title="Button"
             docsLink="/docs/components/button"
             description="Current button variants and sizes, including icon composition."
         >
-            <div className='flex flex-wrap gap-2'>
-                <Button variant="solid">
-                    Create
-                    <ArrowRight size={16} />
-                </Button>
-                <Button variant="outline">
-                    Review
-                    <ArrowRight size={16} />
-                </Button>
-                <Button variant="soft">
-                    Continue
-                    <ArrowRight size={16} />
-                </Button>
-                <Button variant="ghost">
-                    Skip
-                    <ArrowRight size={16} />
-                </Button>
-            </div>
-            <div className='mt-4 flex flex-wrap items-center gap-2'>
-                <Button size="small">Small</Button>
-                <Button size="medium">Medium</Button>
-                <Button size="large">Large</Button>
-                <Button size="x-large">XL</Button>
+            <div className="grid gap-5">
+                {variants.map((variant) => (
+                    <div key={variant} className="grid gap-3 border-t border-gray-200 pt-3 lg:grid-cols-[7rem_1fr] lg:items-center">
+                        <span className="text-xs font-semibold uppercase text-gray-600">{variant}</span>
+                        <div className="flex flex-wrap items-center gap-2">
+                            {sizes.map((size) => <Button key={size} variant={variant} size={size}>{size}<ArrowRight size={16} /></Button>)}
+                            <Button variant={variant} disabled>Disabled</Button>
+                            <Button variant={variant} disabled><LoaderCircle size={16} /> Loading</Button>
+                        </div>
+                    </div>
+                ))}
             </div>
         </ColorLooper>
     </div>