arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 00:15:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Drawer): handle direction + handle props

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-27 11:44:52 +02:00
parent 5b62a8c8ca
commit 5f77aac368
10 changed files with 312 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/theme/drawer.ts
View File

@@ -1,13 +1,46 @@
export default {
slots: {
overlay: 'fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75',
content: 'fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none',
handle: 'mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700',
container: 'mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto',
content: 'fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none',
handle: 'shrink-0 rounded-full bg-gray-200 dark:bg-gray-700',
container: 'w-full flex flex-col gap-4 p-4 overflow-y-auto',
header: '',
title: 'text-gray-900 dark:text-white font-semibold',
description: 'mt-1 text-gray-500 dark:text-gray-400 text-sm',
body: 'flex-1',
footer: 'flex flex-col gap-1.5'
}
},
variants: {
direction: {
top: {
content: 'top-0 mb-24 flex-col-reverse rounded-b-lg',
handle: 'mb-4'
},
right: {
content: 'right-4 flex-row',
handle: 'ml-4'
},
bottom: {
content: 'bottom-0 mt-24 flex-col rounded-t-lg',
handle: 'mt-4'
},
left: {
content: 'left-4 flex-row-reverse',
handle: 'mr-4'
}
}
},
compoundVariants: [{
direction: ['top', 'bottom'],
class: {
content: 'inset-x-0 h-auto max-h-[96%]',
handle: 'w-12 h-1.5 mx-auto'
}
}, {
direction: ['right', 'left'],
class: {
content: 'inset-y-4 w-auto max-w-[96%] rounded-lg after:hidden',
handle: 'h-12 w-1.5 mt-auto mb-auto'
}
}]
}