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

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';