chore(site): update Base UI from beta to stable release (#610)

site/CLAUDE.md

@@ -546,7 +546,7 @@ vi.mock('@/types/docs', async () => {
 - **[React Compiler](https://react.dev/learn/react-compiler)**: Enabled via `babel-plugin-react-compiler` targeting React 19
 - **[Tailwind v4](https://tailwindcss.com)**: CSS utility classes via `@tailwindcss/vite`
 - **[Nanostores 1.0.1](https://github.com/nanostores/nanostores)**: Cross-island state
-- **[Base UI 1.0.0-beta.4](https://base-ui.com)**: Headless accessible components
+- **[Base UI 1.2.0](https://base-ui.com)**: Headless accessible components
 - **[Pagefind 1.4.0](https://pagefind.app)**: Static search with build-time indexing
 - **[Shiki 3.13.0](https://shiki.style)**: Syntax highlighting
 - **[Vitest 3.2.4](https://vitest.dev)**: Testing framework

site/package.json

@@ -20,7 +20,7 @@
     "@astrojs/react": "^4.4.0",
     "@astrojs/rss": "^4.0.12",
     "@astrojs/sitemap": "^3.6.0",
-    "@base-ui-components/react": "1.0.0-beta.4",
+    "@base-ui/react": "^1.2.0",
     "@mux/mux-node": "^12.8.1",
     "@mux/mux-uploader-react": "^1.4.1",
     "@nanostores/react": "^1.0.0",

site/src/components/ImageRadioGroup.tsx

@@ -1,5 +1,5 @@
-import { Radio } from '@base-ui-components/react/radio';
-import { RadioGroup } from '@base-ui-components/react/radio-group';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup } from '@base-ui/react/radio-group';
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import { twMerge } from 'tailwind-merge';

site/src/components/NavBar/MobileNav.tsx

@@ -1,4 +1,4 @@
-import { Dialog } from '@base-ui-components/react/dialog';
+import { Dialog } from '@base-ui/react/dialog';
 import clsx from 'clsx';
 import { ArrowUpRight, Menu, X } from 'lucide-react';
 import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';

site/src/components/Search/Search.tsx

@@ -1,4 +1,4 @@
-import { Dialog } from '@base-ui-components/react/dialog';
+import { Dialog } from '@base-ui/react/dialog';
 import { useStore } from '@nanostores/react';
 import { useEffect, useRef, useState } from 'react';
 import { currentFramework, currentStyle } from '@/stores/preferences';

site/src/components/Select.tsx

@@ -1,4 +1,4 @@
-import { Select as BaseSelect } from '@base-ui-components/react/select';
+import { Select as BaseSelect } from '@base-ui/react/select';
 import clsx from 'clsx';
 import { Check, ChevronDown } from 'lucide-react';
 import { twMerge } from 'tailwind-merge';
@@ -31,7 +31,7 @@ export function Select<T extends string = string>({
       <BaseSelect.Trigger
         className={twMerge(
           clsx(
-            'inline-flex items-center gap-2 bg-light-60 dark:bg-dark-90 dark:text-light-100 border border-light-40 dark:border-dark-80 rounded-lg text-sm p-2'
+            'inline-flex items-center gap-2 text-left bg-light-60 dark:bg-dark-90 dark:text-light-100 border border-light-40 dark:border-dark-80 rounded-lg text-sm p-2'
           ),
           className
         )}
@@ -50,24 +50,16 @@ export function Select<T extends string = string>({
           <BaseSelect.Popup
             className={clsx(
               'border border-light-40 dark:border-dark-80 rounded-lg bg-light-60 dark:bg-dark-80 shadow-xl text-sm',
-              'overflow-hidden'
+              'overflow-y-auto'
             )}
             style={
               {
                 minWidth: 'var(--anchor-width)',
+                maxHeight: 'var(--available-height)',
               } as React.CSSProperties
             }
           >
-            <BaseSelect.List
-              // TODO a slick transition
-              className={clsx('overflow-y-auto')}
-              style={
-                {
-                  maxHeight: 'calc(var(--available-height) - var(--spacing) * 2)',
-                  transformOrigin: 'var(--transform-origin)',
-                } as React.CSSProperties
-              }
-            >
+            <BaseSelect.List>
               {options.map((option) => (
                 <BaseSelect.Item
                   key={option.value}

site/src/components/ToggleGroup.tsx

@@ -1,5 +1,5 @@
-import { Toggle } from '@base-ui-components/react/toggle';
-import { ToggleGroup as BaseToggleGroup } from '@base-ui-components/react/toggle-group';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 

site/src/components/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
 import clsx from 'clsx';
 import type { ReactElement, ReactNode } from 'react';