gsadmin/headplane
1
0
Fork 0
mirror of https://github.com/tale/headplane.git synced 2026-08-28 16:07:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: completely nuke headlessui and consolidate to aria

Browse Source
This commit is contained in:
Aarnav Tale
2024-05-01 02:21:54 -04:00
parent 8205f2b99b
commit a57e777a6b
16 changed files with 336 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Dialog.tsx
+14 -8
View File
@@ -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'>