feat: completely nuke headlessui and consolidate to aria

app/components/Attribute.tsx

@@ -1,5 +1,6 @@
 import { ClipboardIcon } from '@heroicons/react/24/outline'
-import toast from 'react-hot-toast/headless'
+
+import { toast } from './Toaster'
 
 type Properties = {
 	readonly name: string;

app/components/Dialog.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/no-keyword-prefix */
 import { type Dispatch, type ReactNode, type SetStateAction } from 'react'
 import {
 	Button as AriaButton,
@@ -20,7 +21,9 @@ function Button(properties: ButtonProperties) {
 			{...properties}
 			aria-label='Dialog'
 			className={cn(
-				'outline-none',
+				'w-fit text-sm rounded-lg px-4 py-2',
+				'bg-main-700 dark:bg-main-800 text-white',
+				properties.isDisabled && 'opacity-50 cursor-not-allowed',
 				properties.className
 			)}
 			// If control is passed, set the state value
@@ -42,11 +45,12 @@ function Action(properties: ActionProperties) {
 			type={properties.variant === 'confirm' ? 'submit' : 'button'}
 			className={cn(
 				'px-4 py-2 rounded-lg',
+				properties.isDisabled && 'opacity-50 cursor-not-allowed',
 				properties.variant === 'cancel'
 					? 'text-ui-700 dark:text-ui-300'
-					: 'text-ui-950 dark:text-ui-50',
+					: 'text-ui-300 dark:text-ui-300',
 				properties.variant === 'confirm'
-					? 'bg-blue-500 hover:bg-blue-600 pressed:bg-blue-700 text-white'
+					? 'bg-main-700 dark:bg-main-700 pressed:bg-main-800 dark:pressed:bg-main-800'
 					: 'bg-ui-200 dark:bg-ui-800 pressed:bg-ui-300 dark:pressed:bg-ui-700',
 				properties.className
 			)}
@@ -82,9 +86,10 @@ function Text(properties: React.HTMLProps<HTMLParagraphElement>) {
 type PanelProperties = {
 	readonly children: (close: () => void) => ReactNode;
 	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
+	readonly className?: string;
 }
 
-function Panel({ children, control }: PanelProperties) {
+function Panel({ children, control, className }: PanelProperties) {
 	return (
 		<ModalOverlay
 			aria-hidden='true'
@@ -92,8 +97,9 @@ function Panel({ children, control }: PanelProperties) {
 				'fixed inset-0 h-screen w-screen z-50 bg-black/30',
 				'flex items-center justify-center dark:bg-black/70',
 				'entering:animate-in exiting:animate-out',
-				'entering:fade-in entering:duration-300 entering:ease-out',
-				'exiting:fade-out exiting:duration-200 exiting:ease-in'
+				'entering:fade-in entering:duration-200 entering:ease-out',
+				'exiting:fade-out exiting:duration-100 exiting:ease-in',
+				className
 			)}
 			isOpen={control ? control[0] : undefined}
 			onOpenChange={control ? control[1] : undefined}
@@ -104,8 +110,8 @@ function Panel({ children, control }: PanelProperties) {
 					'bg-ui-50 dark:bg-ui-900 shadow-lg',
 					'entering:animate-in exiting:animate-out',
 					'dark:border dark:border-ui-700',
-					'entering:zoom-in-95 entering:ease-out entering:duration-300',
-					'exiting:zoom-out-95 exiting:ease-in exiting:duration-200'
+					'entering:zoom-in-95 entering:ease-out entering:duration-200',
+					'exiting:zoom-out-95 exiting:ease-in exiting:duration-100'
 				)}
 			>
 				<AriaDialog role='alertdialog' className='outline-none relative'>

app/components/Error.tsx

@@ -1,66 +1,52 @@
-import { Transition } from '@headlessui/react'
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
 import { isRouteErrorResponse, useRouteError } from '@remix-run/react'
-import clsx from 'clsx'
-import { Fragment, useEffect, useState } from 'react'
+import { useState } from 'react'
+
+import { cn } from '~/utils/cn'
 
 import Code from './Code'
+import Dialog from './Dialog'
 
 type Properties = {
 	readonly type?: 'full' | 'embedded';
 }
 
 export function ErrorPopup({ type = 'full' }: Properties) {
-	const [isOpen, setIsOpen] = useState(false)
+	// eslint-disable-next-line react/hook-use-state
+	const open = useState(true)
+
 	const error = useRouteError()
 	const routing = isRouteErrorResponse(error)
 	const message = (error instanceof Error ? error.message : 'An unexpected error occurred')
-	console.error(error)
-
-	// Debounce the error modal so it doesn't show up for a split second
-	// when the user navigates to a new page.
-	useEffect(() => {
-		setTimeout(() => {
-			setIsOpen(true)
-		}, 150)
-	}, [])
 
 	return (
-		<Transition as={Fragment} show={isOpen}>
-			<Transition.Child
-				as={Fragment}
-				enter='ease-out duration-150'
-				enterFrom='opacity-0 scale-95'
-				enterTo='opacity-100 scale-100'
-			>
-
-				<div className={clsx(
-					'flex items-center justify-center overflow-clip',
-					type === 'full' ? 'min-h-screen' : 'mt-24'
+		<Dialog>
+			<Dialog.Panel
+				className={cn(
+					type === 'embedded' ? 'pointer-events-none bg-transparent dark:bg-transparent' : '',
 				)}
-				>
-					<div className={clsx(
-						'flex flex-col items-center justify-center space-y-2 w-full sm:w-1/2 xl:w-1/3',
-						'bg-white dark:bg-zinc-800 rounded-lg py-8 px-4 md:px-16',
-						'border border-gray-200 dark:border-zinc-700 text-center'
-					)}
-					>
-						<ExclamationTriangleIcon className='w-12 h-12 text-red-500'/>
-						<h1 className='text-2xl font-semibold text-gray-800 dark:text-gray-100'>
-							{routing ? error.status : 'Error'}
-						</h1>
-						{routing ? (
-							<p className='text-gray-500 dark:text-gray-400'>
-								{error.statusText}
-							</p>
-						) : (
-							<Code className='text-sm'>
-								{message}
-							</Code>
-						)}
-					</div>
-				</div>
-			</Transition.Child>
-		</Transition>
+				control={open}
+			>
+				{() => (
+					<>
+						<div className='flex items-center justify-between'>
+							<Dialog.Title className='text-3xl mb-0'>
+								{routing ? error.status : 'Error'}
+							</Dialog.Title>
+							<ExclamationTriangleIcon className='w-12 h-12 text-red-500'/>
+						</div>
+						<Dialog.Text className='mt-4 text-lg'>
+							{routing ? (
+								error.statusText
+							) : (
+								<Code>
+									{message}
+								</Code>
+							)}
+						</Dialog.Text>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
 	)
 }

app/components/Menu.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react'
+import { type Dispatch, type ReactNode, type SetStateAction } from 'react'
 import {
 	Button as AriaButton,
 	Menu as AriaMenu,
@@ -49,6 +49,31 @@ function Items(properties: Parameters<typeof AriaMenu>[0]) {
 	)
 }
 
+type ButtonProperties = Parameters<typeof AriaButton>[0] & {
+	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
+}
+
+function ItemButton(properties: ButtonProperties) {
+	return (
+		<MenuItem className='outline-none'>
+			<AriaButton
+				{...properties}
+				className={cn(
+					'px-4 py-2 w-full outline-none text-left',
+					'hover:bg-ui-200 dark:hover:bg-ui-700',
+					properties.className
+				)}
+				aria-label='Menu Dialog'
+				// If control is passed, set the state value
+				onPress={event => {
+					properties.onPress?.(event)
+					properties.control?.[1](true)
+				}}
+			/>
+		</MenuItem>
+	)
+}
+
 function Item(properties: Parameters<typeof MenuItem>[0]) {
 	return (
 		<MenuItem
@@ -70,4 +95,4 @@ function Menu({ children }: { readonly children: ReactNode }) {
 	)
 }
 
-export default Object.assign(Menu, { Button, Item, Items })
+export default Object.assign(Menu, { Button, Item, ItemButton, Items })

app/components/Switch.tsx

@@ -0,0 +1,40 @@
+import { Switch as AriaSwitch } from 'react-aria-components'
+
+import { cn } from '~/utils/cn'
+
+type SwitchProperties = Parameters<typeof AriaSwitch>[0] & {
+	readonly label: string;
+}
+
+export default function Switch(properties: SwitchProperties) {
+	return (
+		<AriaSwitch
+			{...properties}
+			aria-label={properties.label}
+			className='group flex gap-2 items-center'
+		>
+			<div
+				className={cn(
+					'flex h-[26px] w-[44px] shrink-0 cursor-default',
+					'rounded-full shadow-inner bg-clip-padding',
+					'border border-solid border-white/30 p-[3px]',
+					'box-border transition duration-100 ease-in-out',
+					'outline-none group-focus-visible:ring-2 ring-black',
+
+					'bg-main-700 dark:bg-main-800',
+					'group-pressed:bg-main-800 dark:group-pressed:bg-main-900',
+					'group-selected:bg-main-900 group-selected:group-pressed:bg-main-900',
+					properties.isDisabled && 'opacity-50 cursor-not-allowed',
+					properties.className
+				)}
+			>
+				<span className={cn(
+					'h-[18px] w-[18px] transform rounded-full',
+					'bg-white shadow transition duration-100',
+					'ease-in-out translate-x-0 group-selected:translate-x-[100%]'
+				)}
+				/>
+			</div>
+		</AriaSwitch>
+	)
+}

app/components/TextField.tsx

@@ -26,6 +26,7 @@ export default function TextField(properties: TextFieldProperties) {
 				className={cn(
 					'block px-2.5 py-1.5 w-full rounded-lg my-1',
 					'border border-ui-200 dark:border-ui-600',
+					'dark:bg-ui-800 dark:text-ui-300',
 					properties.className
 				)}
 				onChange={event => {

app/components/Toaster.tsx

@@ -1,47 +1,79 @@
-import { useToaster } from 'react-hot-toast/headless'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import { type AriaToastProps, useToast, useToastRegion } from '@react-aria/toast'
+import { ToastQueue, type ToastState, useToastQueue } from '@react-stately/toast'
+import { type ReactNode, useRef } from 'react'
+import { Button } from 'react-aria-components'
+import { createPortal } from 'react-dom'
+import { ClientOnly } from 'remix-utils/client-only'
 
-export default function Toaster() {
-	const { toasts, handlers } = useToaster()
-	const { startPause, endPause, calculateOffset, updateHeight } = handlers
+import { cn } from '~/utils/cn'
+
+type ToastProperties = AriaToastProps<ReactNode> & {
+	readonly state: ToastState<ReactNode>;
+}
+
+function Toast({ state, ...properties }: ToastProperties) {
+	const reference = useRef(null)
+	const { toastProps, titleProps, closeButtonProps } = useToast(properties, state, reference)
 
 	return (
 		<div
-			className='fixed bottom-0 right-0 p-4 w-80 h-1/2 overflow-hidden pointer-events-none'
-			onMouseEnter={startPause}
-			onMouseLeave={endPause}
+			{...toastProps}
+			ref={reference}
+			className={cn(
+				'bg-main-700 dark:bg-main-800 rounded-lg',
+				'text-main-100 dark:text-main-200 z-50',
+				'border border-main-600 dark:border-main-700',
+				'flex items-center justify-between p-3 pl-4 w-80'
+			)}
 		>
-			{toasts.slice(0, 6).map(toast => {
-				const offset = calculateOffset(toast, {
-					reverseOrder: false,
-					gutter: -8
-				})
-
-				// eslint-disable-next-line @typescript-eslint/ban-types
-				const reference = (element: HTMLDivElement | null) => {
-					if (element && typeof toast.height !== 'number') {
-						const { height } = element.getBoundingClientRect()
-						updateHeight(toast.id, -height)
-					}
-				}
-
-				return (
-					<div
-						key={toast.id}
-						ref={reference}
-						className='fixed bottom-4 right-4 p-4 bg-gray-800 rounded-lg text-white transition-all duration-300'
-						{...toast.ariaProps}
-						style={{
-							transform: `translateY(${offset}px) translateX(${toast.visible ? 0 : 200}%)`
-						}}
-					>
-						{typeof toast.message === 'function' ? (
-							toast.message(toast)
-						) : (
-							toast.message
-						)}
-					</div>
-				)
-			})}
+			<div {...titleProps}>{properties.toast.content}</div>
+			<Button
+				{...closeButtonProps}
+				className={cn(
+					'outline-none rounded-full p-1',
+					'hover:bg-main-600 dark:hover:bg-main-700'
+				)}
+			>
+				<XMarkIcon className='w-4 h-4'/>
+			</Button>
 		</div>
 	)
 }
+
+const toasts = new ToastQueue<ReactNode>({
+	maxVisibleToasts: 5
+})
+
+export function toast(text: string) {
+	return toasts.add(text, { timeout: 5000 })
+}
+
+export function Toaster() {
+	const reference = useRef(null)
+	const state = useToastQueue(toasts)
+	const { regionProps } = useToastRegion({}, state, reference)
+
+	return (
+		<ClientOnly>
+			{() => createPortal(
+				state.visibleToasts.length >= 0 ? (
+					<div
+						className={cn(
+							'fixed bottom-4 right-4',
+							'flex flex-col gap-4'
+						)}
+						{...regionProps}
+						ref={reference}
+					>
+						{state.visibleToasts.map(toast => (
+							<Toast key={toast.key} toast={toast} state={state}/>
+						))}
+					</div>
+				) : undefined,
+				document.body
+			)}
+		</ClientOnly>
+	)
+}
+