@douglasneuroinformatics/libui 3.9.0 → 4.0.0

package/src/components/ListboxDropdown/ListboxDropdown.stories.tsx

@@ -6,10 +6,6 @@ import { ListboxDropdown } from './ListboxDropdown';
 
 type Story = StoryObj<typeof ListboxDropdown>;
 
-const meta: Meta<typeof ListboxDropdown> = { component: ListboxDropdown };
-
-export default meta;
-
 const options = [
   {
     key: 'o1',
@@ -25,6 +21,10 @@ const options = [
   }
 ];
 
+export default {
+  component: ListboxDropdown
+} satisfies Meta<typeof ListboxDropdown>;
+
 export const Default: Story = {
   decorators: [
     (Story) => {

package/src/components/ListboxDropdown/ListboxDropdown.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 
 import { cn } from '@/utils';
 
-import { type ButtonProps } from '../Button';
 import { DropdownButton } from '../DropdownButton';
 import { DropdownMenu } from '../DropdownMenu';
 
+import type { ButtonProps } from '../Button';
+
 export type ListboxDropdownOption = {
   key: string;
   label: string;

package/src/components/MenuBar/MenuBarCheckboxItem.tsx

@@ -13,7 +13,7 @@ export const MenuBarCheckboxItem = forwardRef<
     <CheckboxItem
       checked={checked}
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className
       )}
       ref={ref}

package/src/components/MenuBar/MenuBarItem.tsx

@@ -13,7 +13,7 @@ export const MenuBarItem = forwardRef<
   return (
     <Item
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         inset && 'pl-8',
         className
       )}

package/src/components/MenuBar/MenuBarRadioItem.tsx

@@ -12,7 +12,7 @@ export const MenuBarRadioItem = forwardRef<
   return (
     <RadioItem
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className
       )}
       ref={ref}

package/src/components/MenuBar/MenuBarRoot.tsx

@@ -8,7 +8,7 @@ export const MenuBarRoot = forwardRef<React.ElementRef<typeof Root>, React.Compo
   function MenuBarRoot({ className, ...props }, ref) {
     return (
       <Root
-        className={cn('flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm', className)}
+        className={cn('bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-xs', className)}
         ref={ref}
         {...props}
       />

package/src/components/MenuBar/MenuBarSubTrigger.tsx

@@ -14,7 +14,7 @@ export const MenuBarSubTrigger = forwardRef<
   return (
     <SubTrigger
       className={cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none',
         inset && 'pl-8',
         className
       )}

package/src/components/MenuBar/MenuBarTrigger.tsx

@@ -10,7 +10,7 @@ export const MenuBarTrigger = forwardRef<
   return (
     <Trigger
       className={cn(
-        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-xs px-3 py-1 text-sm font-medium outline-hidden select-none',
         className
       )}
       ref={ref}

package/src/components/NotificationHub/NotificationHub.tsx

@@ -33,11 +33,11 @@ const NotificationHub = ({ timeout = 5000 }: NotificationHubProps) => {
                 <div className="p-4">
                   <div className="mb-2 flex items-center">
                     <NotificationIcon type={item.type} />
-                    <h5 className="ml-3 flex-grow font-medium text-slate-900 dark:text-slate-100">
+                    <h5 className="ml-3 grow font-medium text-slate-900 dark:text-slate-100">
                       {item.title ?? t(`notifications.types.${item.type}`)}
                     </h5>
                     <button
-                      className="inline-flex rounded-md text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:focus:ring-sky-600"
+                      className="inline-flex rounded-md text-slate-400 hover:text-slate-500 focus:ring-1 focus:ring-sky-500 focus:outline-hidden dark:focus:ring-sky-600"
                       type="button"
                       onClick={() => {
                         dismissNotification(item.id);
@@ -46,7 +46,7 @@ const NotificationHub = ({ timeout = 5000 }: NotificationHubProps) => {
                       <XIcon aria-hidden="true" className="h-5 w-5" />
                     </button>
                   </div>
-                  <p className="my-2 text-muted-foreground">{item.message}</p>
+                  <p className="text-muted-foreground my-2">{item.message}</p>
                 </div>
                 <motion.div
                   animate={{ width: '100%' }}

package/src/components/NotificationHub/NotificationIcon.tsx

@@ -1,4 +1,4 @@
-import { type NotificationInterface } from '@/hooks/useNotificationsStore';
+import type { NotificationInterface } from '@/hooks/useNotificationsStore';
 
 export type NotificationIconProps = {
   type: NotificationInterface['type'];

package/src/components/Pagination/PaginationLink.tsx

@@ -4,7 +4,9 @@ import type { Simplify } from 'type-fest';
 
 import { cn } from '@/utils';
 
-import { type ButtonProps, buttonVariants } from '../Button';
+import { buttonVariants } from '../Button';
+
+import type { ButtonProps } from '../Button';
 
 export type PaginationLinkProps = Simplify<
   Pick<ButtonProps, 'size'> &

package/src/components/Pagination/PaginationPrevious.tsx

@@ -3,7 +3,9 @@ import { ChevronLeftIcon } from 'lucide-react';
 import { useTranslation } from '@/hooks';
 import { cn } from '@/utils';
 
-import { PaginationLink, type PaginationLinkProps } from './PaginationLink';
+import { PaginationLink } from './PaginationLink';
+
+import type { PaginationLinkProps } from './PaginationLink';
 
 export const PaginationPrevious = ({ className, ...props }: PaginationLinkProps) => {
   const { t } = useTranslation('libui');

package/src/components/Popover/PopoverContent.tsx

@@ -32,7 +32,7 @@ export const PopoverContent = React.forwardRef<React.ElementRef<typeof Content>,
           align={align}
           asChild={asChild}
           className={cn(
-            'z-50 w-72 rounded-md border bg-popover px-3 py-1.5 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border px-3 py-1.5 shadow-md outline-hidden',
             className
           )}
           collisionPadding={collisionPadding}

package/src/components/RadioGroup/RadioGroup.spec.tsx

@@ -3,7 +3,9 @@ import { userEvent } from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
 import { Label } from '../Label';
-import { RadioGroup, type RadioGroupProps } from './RadioGroup';
+import { RadioGroup } from './RadioGroup';
+
+import type { RadioGroupProps } from './RadioGroup';
 
 const TEST_ID = 'radio-group';
 

package/src/components/RadioGroup/RadioGroupItem.tsx

@@ -12,7 +12,7 @@ export const RadioGroupItem = forwardRef<
   return (
     <RadioGroupPrimitive.Item
       className={cn(
-        'flex aspect-square h-4 w-4 items-center justify-center rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        'border-primary text-primary focus-visible:ring-ring flex aspect-square h-4 w-4 items-center justify-center rounded-full border shadow-sm focus:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       ref={ref}

package/src/components/Resizable/Resizable.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react';
 
-import { Panel, type PanelProps } from 'react-resizable-panels';
+import { Panel } from 'react-resizable-panels';
+import type { PanelProps } from 'react-resizable-panels';
 
-import { ResizableHandle, type ResizableHandleProps } from './ResizableHandle';
-import { ResizablePanelGroup, type ResizablePanelGroupProps } from './ResizablePanelGroup';
+import { ResizableHandle } from './ResizableHandle';
+import { ResizablePanelGroup } from './ResizablePanelGroup';
+
+import type { ResizableHandleProps } from './ResizableHandle';
+import type { ResizablePanelGroupProps } from './ResizablePanelGroup';
 
 type ResizableRootType = React.FC<{ children: React.ReactNode }>;
 type ResizableType = ResizableRootType & {

package/src/components/Resizable/ResizableHandle.tsx

@@ -12,13 +12,13 @@ export type ResizableHandleProps = React.ComponentProps<typeof PanelResizeHandle
 export const ResizableHandle = ({ className, withHandle, ...props }: ResizableHandleProps) => (
   <PanelResizeHandle
     className={cn(
-      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
       className
     )}
     {...props}
   >
     {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+      <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
         <GripVertical className="h-2.5 w-2.5" />
       </div>
     )}

package/src/components/SearchBar/SearchBar.tsx

@@ -5,7 +5,7 @@ import { cn } from '@/utils';
 
 import { Input } from '../Input';
 
-export type BaseSearchBarProps = {
+type BaseSearchBarProps = {
   [key: `data-${string}`]: unknown;
   /** Additional CSS classes to add to the wrapper form component, potentially overriding default styling */
   className?: string;
@@ -60,3 +60,5 @@ export const SearchBar = ({
     </form>
   );
 };
+
+export type { BaseSearchBarProps };

package/src/components/Select/SelectItem.tsx

@@ -12,7 +12,7 @@ export const SelectItem = forwardRef<
   return (
     <SelectPrimitive.Item
       className={cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className
       )}
       ref={ref}

package/src/components/Sheet/SheetContent.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 
 import { Close, Content, Portal } from '@radix-ui/react-dialog';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
 import { XIcon } from 'lucide-react';
 
 import { cn } from '@/utils';
@@ -38,7 +39,7 @@ export const SheetContent = React.forwardRef<React.ElementRef<typeof Content>, S
       <SheetOverlay />
       <Content className={cn(sheetVariants({ side }), className)} ref={ref} {...props}>
         {children}
-        <Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
           <XIcon className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </Close>

package/src/components/Slider/Slider.tsx

@@ -8,21 +8,21 @@ export const Slider = forwardRef<React.ElementRef<typeof Root>, React.ComponentP
   function Slider({ className, disabled, ...props }, ref) {
     return (
       <Root
-        className={cn('relative flex w-full touch-none select-none items-center py-1.5', className)}
+        className={cn('relative flex w-full touch-none items-center py-1.5 select-none', className)}
         disabled={disabled}
         ref={ref}
         {...props}
       >
         <Track
           aria-disabled={disabled}
-          className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary opacity-15 aria-disabled:cursor-not-allowed aria-disabled:opacity-10"
+          className="bg-primary relative h-1.5 w-full grow overflow-hidden rounded-full opacity-15 aria-disabled:cursor-not-allowed aria-disabled:opacity-10"
           data-testid="slider-track"
         >
-          <Range className="absolute h-full bg-primary" />
+          <Range className="bg-primary absolute h-full" />
         </Track>
         <Thumb
           aria-disabled={disabled}
-          className="block h-4 w-4 rounded-full border border-slate-500 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:cursor-not-allowed"
+          className="bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border border-slate-500 shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-hidden aria-disabled:cursor-not-allowed"
           data-testid="slider-thumb"
         />
       </Root>

package/src/components/StatisticCard/StatisticCard.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import type { ReactElement } from 'react';
 
 import { motion, useSpring, useTransform } from 'motion/react';
 
@@ -9,7 +10,7 @@ import { Card } from '../Card';
 type StatisticCardProps = {
   [key: `data-${string}`]: unknown;
   className?: string;
-  icon?: JSX.Element;
+  icon?: ReactElement;
   label: string;
   value: number;
 };

package/src/components/Switch/Switch.tsx

@@ -11,7 +11,7 @@ export const Switch = forwardRef<
   return (
     <SwitchPrimitives.Root
       className={cn(
-        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        'peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}
@@ -19,7 +19,7 @@ export const Switch = forwardRef<
     >
       <SwitchPrimitives.Thumb
         className={cn(
-          'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+          'bg-background pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
         )}
       />
     </SwitchPrimitives.Root>

package/src/components/Tabs/TabsContent.tsx

@@ -11,7 +11,7 @@ export const TabsContent = forwardRef<
   return (
     <TabsPrimitive.Content
       className={cn(
-        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',
         className
       )}
       ref={ref}

package/src/components/Tabs/TabsTrigger.tsx

@@ -11,7 +11,7 @@ export const TabsTrigger = forwardRef<
   return (
     <TabsPrimitive.Trigger
       className={cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+        'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow',
         className
       )}
       ref={ref}

package/src/components/TextArea/TextArea.tsx

@@ -12,7 +12,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(fun
     <textarea
       autoComplete="off"
       className={cn(
-        'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground placeholder:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs placeholder:opacity-80 focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       data-testid="text-area"

package/src/components/ThemeToggle/ThemeToggle.tsx

@@ -2,7 +2,9 @@ import { MoonIcon, SunIcon } from 'lucide-react';
 
 import { useTheme } from '@/hooks/useTheme';
 
-import { Button, type ButtonProps } from '../Button';
+import { Button } from '../Button';
+
+import type { ButtonProps } from '../Button';
 
 export type ThemeToggleProps = Omit<ButtonProps, 'children' | 'size'>;
 

package/src/components/Tooltip/TooltipTrigger.tsx

@@ -2,7 +2,9 @@ import { forwardRef } from 'react';
 
 import { Trigger } from '@radix-ui/react-tooltip';
 
-import { Button, type ButtonProps } from '../Button';
+import { Button } from '../Button';
+
+import type { ButtonProps } from '../Button';
 
 export type TooltipTriggerProps = Omit<ButtonProps, 'asChild'>;
 

package/src/hooks/useEventListener/useEventListener.ts

@@ -1,4 +1,5 @@
-import { type RefObject, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
+import type { RefObject } from 'react';
 
 import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
 

package/src/hooks/useOnClickOutside/useOnClickOutside.ts

@@ -1,4 +1,4 @@
-import { type RefObject } from 'react';
+import type { RefObject } from 'react';
 
 import { useEventListener } from '../useEventListener';
 

package/src/hooks/useStorage/useLocalStorage.ts

@@ -1,6 +1,8 @@
 import type { Dispatch, SetStateAction } from 'react';
 
-import { useStorage, type UseStorageOptions } from './useStorage';
+import { useStorage } from './useStorage';
+
+import type { UseStorageOptions } from './useStorage';
 
 /** Custom hook that uses local storage to persist state across page reloads */
 export function useLocalStorage<T>(

package/src/hooks/useStorage/useSessionStorage.ts

@@ -1,6 +1,8 @@
 import type { Dispatch, SetStateAction } from 'react';
 
-import { useStorage, type UseStorageOptions } from './useStorage';
+import { useStorage } from './useStorage';
+
+import type { UseStorageOptions } from './useStorage';
 
 /** Custom hook that uses session storage to persist state across page reloads */
 export function useSessionStorage<T>(

package/src/hooks/useTheme/useTheme.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { mockMatchMedia, mockStorage } from '@/testing/mocks';
@@ -47,29 +47,32 @@ describe('useTheme', () => {
   it('should change the theme when updated', async () => {
     window.localStorage.setItem(THEME_KEY, 'light');
     const { result } = renderHook(() => useTheme());
-    await act(async () => {
+    expect(result.current[0]).toBe('light');
+    act(() => {
       result.current[1]('dark');
-      return Promise.resolve();
     });
-    expect(result.current[0]).toBe('dark');
+    await waitFor(() => {
+      expect(result.current[0]).toBe('dark');
+    });
   });
 
   it('should save the theme to localStorage', async () => {
     window.localStorage.setItem(THEME_KEY, 'light');
     const { result } = renderHook(() => useTheme());
-    await act(async () => {
+    act(() => {
       result.current[1]('dark');
-      return Promise.resolve();
     });
-    expect(window.localStorage.getItem(THEME_KEY)).toBe('dark');
+    await waitFor(() => {
+      expect(window.localStorage.getItem(THEME_KEY)).toBe('dark');
+    });
   });
+
   it('should print to stderr if there is an unexpected theme mutation', async () => {
     renderHook(() => useTheme());
     vi.spyOn(console, 'error');
-    await act(async () => {
-      document.documentElement.setAttribute(THEME_ATTRIBUTE, 'INVALID_THEME');
-      return Promise.resolve();
+    document.documentElement.setAttribute(THEME_ATTRIBUTE, 'INVALID_THEME');
+    await waitFor(() => {
+      expect(console.error).toHaveBeenLastCalledWith(expect.stringContaining('INVALID_THEME'));
     });
-    expect(console.error).toHaveBeenLastCalledWith(expect.stringContaining('INVALID_THEME'));
   });
 });

package/src/i18n/internal.ts

@@ -5,7 +5,7 @@ import type { Primitive } from 'type-fest';
 import type { Language } from './types';
 
 export function getTranslation(
-  target: { [L in Language]?: string } | string,
+  target: string | { [L in Language]?: string },
   state: {
     fallbackLanguage: Language;
     resolvedLanguage: Language;

package/src/i18n/types.ts

@@ -11,10 +11,10 @@ export declare namespace UserConfig {
   }
   interface Translations {
     [key: string]:
+      | Translations
       | {
           [L in Language]?: string;
-        }
-      | Translations;
+        };
   }
 }