From 0fcbeb19db6b76038c0394ee3d335ffe6c689a75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Casal?= <andre@andrecasal.com>
Date: Wed, 8 Nov 2023 13:01:30 +0000
Subject: [PATCH] add drawer component

---
 app/routes/_marketing+/ui+/_layout.tsx        |   2 +-
 .../ui+/components/modals/alert-dialog.tsx    |  10 +-
 .../ui+/components/modals/dialog.tsx          |   6 +-
 .../ui+/components/modals/drawer.tsx          |  61 ++++++
 .../_marketing+/ui+/modals+/alert-dialog.tsx  |  27 ++-
 app/routes/_marketing+/ui+/modals+/dialog.tsx |  45 +++--
 app/routes/_marketing+/ui+/modals+/drawer.tsx | 183 ++++++++++++++++++
 app/styles/tailwind.css                       |  29 ++-
 8 files changed, 316 insertions(+), 47 deletions(-)
 create mode 100644 app/routes/_marketing+/ui+/components/modals/drawer.tsx
 create mode 100644 app/routes/_marketing+/ui+/modals+/drawer.tsx

diff --git a/app/routes/_marketing+/ui+/_layout.tsx b/app/routes/_marketing+/ui+/_layout.tsx
index b3e747a..9dfe81b 100644
--- a/app/routes/_marketing+/ui+/_layout.tsx
+++ b/app/routes/_marketing+/ui+/_layout.tsx
@@ -46,7 +46,7 @@ const SideMenu = ({ setIsOpen }: { setIsOpen?: (a: boolean) => void }) => {
 			items: [
 				{ name: 'Dialog', href: '/ui/modals/dialog', done: true },
 				{ name: 'Alert Dialog', href: '/ui/modals/alert-dialog', done: true },
-				{ name: 'Drawer', href: '/ui/modals/drawer', done: false },
+				{ name: 'Drawer', href: '/ui/modals/drawer', done: true },
 				{ name: 'Dropdown Menu', href: '/ui/modals/dropdown-menu', done: false },
 				{ name: 'Upload Dialog', href: '/ui/modals/upload-dialog', done: false },
 				{ name: 'Search Dialog', href: '/ui/modals/search-dialog', done: false },
diff --git a/app/routes/_marketing+/ui+/components/modals/alert-dialog.tsx b/app/routes/_marketing+/ui+/components/modals/alert-dialog.tsx
index 909b319..2037951 100644
--- a/app/routes/_marketing+/ui+/components/modals/alert-dialog.tsx
+++ b/app/routes/_marketing+/ui+/components/modals/alert-dialog.tsx
@@ -9,7 +9,7 @@ const AlertDialog = AlertDialogPrimitive.Root
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 
 const AlertDialogOverlay = forwardRef<ElementRef<typeof AlertDialogPrimitive.Overlay>, ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>>(({ className, ...props }, ref) => (
-	<AlertDialogPrimitive.Overlay ref={ref} className={cn('overlay fixed inset-0 z-50', className)} {...props} />
+	<AlertDialogPrimitive.Overlay ref={ref} className={cn('alert-dialog-overlay fixed inset-0 z-50', className)} {...props} />
 ))
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 
@@ -17,9 +17,9 @@ const AlertDialogContent = forwardRef<ElementRef<typeof AlertDialogPrimitive.Con
 	({ className, children, ...props }, ref) => (
 		<AlertDialogPrimitive.Portal>
 			<AlertDialogOverlay />
-			<AlertDialogPrimitive.Content ref={ref} className={cn('dialog fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]', className)} {...props}>
+			<AlertDialogPrimitive.Content ref={ref} className={cn('alert-dialog fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]', className)} {...props}>
 				{children}
-				<AlertDialogPrimitive.Cancel className="dialog-x-button">
+				<AlertDialogPrimitive.Cancel className="alert-dialog-x-button">
 					<Icon name="x-mark" />
 					<VisuallyHidden>Close</VisuallyHidden>
 				</AlertDialogPrimitive.Cancel>
@@ -30,12 +30,12 @@ const AlertDialogContent = forwardRef<ElementRef<typeof AlertDialogPrimitive.Con
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
 const AlertDialogTitle = forwardRef<ElementRef<typeof AlertDialogPrimitive.Title>, ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>>(({ className, ...props }, ref) => (
-	<AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
+	<AlertDialogPrimitive.Title ref={ref} className={cn('text-size-lg font-semibold', className)} {...props} />
 ))
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 
 const AlertDialogDescription = forwardRef<ElementRef<typeof AlertDialogPrimitive.Description>, ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>>(
-	({ className, ...props }, ref) => <AlertDialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />,
+	({ className, ...props }, ref) => <AlertDialogPrimitive.Description ref={ref} className={cn('text-size-sm text-muted-500', className)} {...props} />,
 )
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
 
diff --git a/app/routes/_marketing+/ui+/components/modals/dialog.tsx b/app/routes/_marketing+/ui+/components/modals/dialog.tsx
index b23a4fd..12e645b 100644
--- a/app/routes/_marketing+/ui+/components/modals/dialog.tsx
+++ b/app/routes/_marketing+/ui+/components/modals/dialog.tsx
@@ -9,7 +9,7 @@ const Dialog = DialogPrimitive.Root
 const DialogTrigger = DialogPrimitive.Trigger
 
 const DialogOverlay = forwardRef<ElementRef<typeof DialogPrimitive.Overlay>, ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>>(({ className, ...props }, ref) => (
-	<DialogPrimitive.Overlay ref={ref} className={cn('overlay fixed inset-0 z-50', className)} {...props} />
+	<DialogPrimitive.Overlay ref={ref} className={cn('dialog-overlay fixed inset-0 z-50', className)} {...props} />
 ))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
@@ -28,12 +28,12 @@ const DialogContent = forwardRef<ElementRef<typeof DialogPrimitive.Content>, Com
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogTitle = forwardRef<ElementRef<typeof DialogPrimitive.Title>, ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(({ className, ...props }, ref) => (
-	<DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
+	<DialogPrimitive.Title ref={ref} className={cn('text-size-lg font-semibold', className)} {...props} />
 ))
 DialogTitle.displayName = DialogPrimitive.Title.displayName
 
 const DialogDescription = forwardRef<ElementRef<typeof DialogPrimitive.Description>, ComponentPropsWithoutRef<typeof DialogPrimitive.Description>>(({ className, ...props }, ref) => (
-	<DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+	<DialogPrimitive.Description ref={ref} className={cn('text-size-sm text-muted-500', className)} {...props} />
 ))
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 
diff --git a/app/routes/_marketing+/ui+/components/modals/drawer.tsx b/app/routes/_marketing+/ui+/components/modals/drawer.tsx
new file mode 100644
index 0000000..0ed9d13
--- /dev/null
+++ b/app/routes/_marketing+/ui+/components/modals/drawer.tsx
@@ -0,0 +1,61 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react'
+import { Icon } from '~/components/ui/icon.tsx'
+import { cn } from '~/utils/tailwind-merge.ts'
+import { VisuallyHidden } from '../layout/visually-hidden.tsx'
+
+const Drawer = DialogPrimitive.Root
+
+const DrawerTrigger = DialogPrimitive.Trigger
+
+const DrawerClose = DialogPrimitive.Close
+
+const DrawerPortal = DialogPrimitive.Portal
+
+const DrawerOverlay = forwardRef<ElementRef<typeof DialogPrimitive.Overlay>, ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Overlay className={cn('drawer-overlay fixed inset-0 z-50', className)} {...props} ref={ref} />
+))
+DrawerOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const drawerVariants = cva('fixed z-50 drawer', {
+	variants: {
+		side: {
+			top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+			bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+			left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+			right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+		},
+	},
+	defaultVariants: {
+		side: 'right',
+	},
+})
+
+interface DrawerContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof drawerVariants> {}
+
+const DrawerContent = forwardRef<ElementRef<typeof DialogPrimitive.Content>, DrawerContentProps>(({ side = 'right', className, children, ...props }, ref) => (
+	<DrawerPortal>
+		<DrawerOverlay />
+		<DialogPrimitive.Content ref={ref} className={cn(drawerVariants({ side }), className)} {...props}>
+			{children}
+			<DialogPrimitive.Close className="drawer-x-button">
+				<Icon name="x-mark" />
+				<VisuallyHidden>Close</VisuallyHidden>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DrawerPortal>
+))
+DrawerContent.displayName = DialogPrimitive.Content.displayName
+
+const DrawerTitle = forwardRef<ElementRef<typeof DialogPrimitive.Title>, ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Title ref={ref} className={cn('text-size-lg font-semibold', className)} {...props} />
+))
+DrawerTitle.displayName = DialogPrimitive.Title.displayName
+
+const DrawerDescription = forwardRef<ElementRef<typeof DialogPrimitive.Description>, ComponentPropsWithoutRef<typeof DialogPrimitive.Description>>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Description ref={ref} className={cn('text-size-sm text-muted-500', className)} {...props} />
+))
+DrawerDescription.displayName = DialogPrimitive.Description.displayName
+
+export { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerDescription, DrawerClose }
diff --git a/app/routes/_marketing+/ui+/modals+/alert-dialog.tsx b/app/routes/_marketing+/ui+/modals+/alert-dialog.tsx
index b62afa2..0ddc750 100644
--- a/app/routes/_marketing+/ui+/modals+/alert-dialog.tsx
+++ b/app/routes/_marketing+/ui+/modals+/alert-dialog.tsx
@@ -2,7 +2,7 @@ import { json } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import { Text } from '~/routes/_marketing+/ui+/components/typography/text.tsx'
 import { Code } from '../components/typography/code.tsx'
-import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogCancel, AlertDialogAction } from '../components/modals/alert-dialog.tsx'
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogCancel, AlertDialogAction, AlertDialogDescription } from '../components/modals/alert-dialog.tsx'
 import { Button } from '~/components/ui/button.tsx'
 import { Flex } from '../components/layout/flex.tsx'
 import { Description, Features, Source, readSource, type componentProps, Usage, Keyboard, Styling, PartsTitle, Part } from '../sections/sections.tsx'
@@ -84,8 +84,8 @@ const component: componentProps = {
 	</AlertDialogTrigger>
 	<AlertDialogContent>
 		<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-		<Text className="mt-4">This action cannot be undone. This will permanently delete your account and all your data.</Text>
-		<form>
+		<AlertDialogDescription>Deleting your account cannot be undone. This will permanently delete your account and all your data.</AlertDialogDescription>
+		<form className="mt-10">
 			<Flex justify="end" gap="6">
 				<AlertDialogCancel asChild>
 					<Button variant="secondary">Cancel</Button>
@@ -99,22 +99,17 @@ const component: componentProps = {
 		</form>
 	</AlertDialogContent>
 </AlertDialog>`,
-	styling: `/* ### Layout ### */
+	styling: `/* ### Modals ### */
 @layer components {
-	...
-
-	/* Modal Overlay */
-	.overlay {
+	/* Alert Dialog */
+	.alert-dialog-overlay {
 		@apply bg-background/80 backdrop-blur-sm;
 	}
-
-	/* Dialog */
-	.dialog {
+	.alert-dialog {
 		@apply grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full;
 	}
-
-	.dialog-x-button {
-		@apply 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-foreground data-[state=open]:text-muted-500;
+	.alert-dialog-x-button {
+		@apply absolute right-4 top-4 min-h-tap min-w-tap 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-foreground data-[state=open]:text-muted-500;
 	}
 }`,
 }
@@ -157,8 +152,8 @@ const AlertDialogRoute = () => {
 				</AlertDialogTrigger>
 				<AlertDialogContent>
 					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-					<Text className="mt-4">This action cannot be undone. This will permanently delete your account and all your data.</Text>
-					<form>
+					<AlertDialogDescription>Deleting your account cannot be undone. This will permanently delete your account and all your data.</AlertDialogDescription>
+					<form className="mt-10">
 						<Flex justify="end" gap="6">
 							<AlertDialogCancel asChild>
 								<Button variant="secondary">Cancel</Button>
diff --git a/app/routes/_marketing+/ui+/modals+/dialog.tsx b/app/routes/_marketing+/ui+/modals+/dialog.tsx
index a96bfc1..15201ce 100644
--- a/app/routes/_marketing+/ui+/modals+/dialog.tsx
+++ b/app/routes/_marketing+/ui+/modals+/dialog.tsx
@@ -2,11 +2,11 @@ import { json } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import { Text } from '~/routes/_marketing+/ui+/components/typography/text.tsx'
 import { Code } from '../components/typography/code.tsx'
-import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from '../components/modals/dialog.tsx'
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from '../components/modals/dialog.tsx'
 import { Button } from '~/components/ui/button.tsx'
 import { Input } from '~/components/ui/input.tsx'
 import { Flex } from '../components/layout/flex.tsx'
-import { Description, Features, Source, readSource, type componentProps, Parts, Usage, Keyboard, Styling } from '../sections/sections.tsx'
+import { Description, Features, Source, readSource, type componentProps, Usage, Keyboard, Styling, PartsTitle, Part } from '../sections/sections.tsx'
 
 const component: componentProps = {
 	name: 'Dialog',
@@ -68,13 +68,14 @@ const component: componentProps = {
 			props: [{ name: 'asChild', type: 'boolean', default: 'false' }],
 		},
 		{
-			name: 'DialogClose',
-			description: 'The button that closes the dialog.',
+			name: 'DialogDescription',
+			description: 'An optional accessible description to be announced when the dialog is opened.',
 			props: [{ name: 'asChild', type: 'boolean', default: 'false' }],
 		},
 		{
-			name: 'DialogAction',
+			name: 'DialogClose',
 			description: 'The button that closes the dialog.',
+			props: [{ name: 'asChild', type: 'boolean', default: 'false' }],
 		},
 	],
 	usage: `<Dialog>
@@ -108,22 +109,17 @@ const component: componentProps = {
 		</form>
 	</DialogContent>
 </Dialog>`,
-	styling: `/* ### Layout ### */
+	styling: `/* ### Modals ### */
 @layer components {
-	...
-
-	/* Modal Overlay */
-	.overlay {
+	/* Dialog */
+	.dialog-overlay {
 		@apply bg-background/80 backdrop-blur-sm;
 	}
-
-	/* Dialog */
 	.dialog {
 		@apply grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full;
 	}
-
-	.dialog-close-button {
-		@apply 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-foreground data-[state=open]:text-muted-500;
+	.dialog-x-button {
+		@apply absolute right-4 top-4 min-h-tap min-w-tap 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-foreground data-[state=open]:text-muted-500;
 	}
 }`,
 }
@@ -139,7 +135,20 @@ const DialogRoute = () => {
 			<Description name={name} description={description} />
 			<Features features={features} />
 			<Keyboard keyboard={keyboard} />
-			<Parts parts={parts} />
+			{/* <Parts parts={parts} /> */}
+			<PartsTitle />
+			<Part {...parts.find(({ name }) => name === 'Dialog')!} />
+			<Part {...parts.find(({ name }) => name === 'DialogTrigger')!} />
+			<Part {...parts.find(({ name }) => name === 'DialogContent')!} />
+			<Part {...parts.find(({ name }) => name === 'DialogTitle')!} />
+			<Text className="mt-4">
+				If you want to hide the title, wrap it with <Code>{'<VisuallyHidden asChild>'}</Code>.
+			</Text>
+			<Part {...parts.find(({ name }) => name === 'DialogDescription')!} />
+			<Text className="mt-4">
+				If you want to hide the description, wrap it with <Code>{'<VisuallyHidden asChild>'}</Code>.
+			</Text>
+			<Part {...parts.find(({ name }) => name === 'DialogClose')!} />
 			<Usage usage={usage} shortName={shortName} />
 			<Dialog>
 				<DialogTrigger asChild>
@@ -147,8 +156,8 @@ const DialogRoute = () => {
 				</DialogTrigger>
 				<DialogContent>
 					<DialogTitle>Edit profile</DialogTitle>
-					<Text className="mt-4">Make changes to your profile here. Click save when you're done.</Text>
-					<form>
+					<DialogDescription className="mt-4">Make changes to your profile here. Click save when you're done.</DialogDescription>
+					<form className="mt-10">
 						<fieldset className="mb-5 flex items-center gap-5">
 							<label htmlFor="name" className="w-48 text-right">
 								Name
diff --git a/app/routes/_marketing+/ui+/modals+/drawer.tsx b/app/routes/_marketing+/ui+/modals+/drawer.tsx
new file mode 100644
index 0000000..71dee14
--- /dev/null
+++ b/app/routes/_marketing+/ui+/modals+/drawer.tsx
@@ -0,0 +1,183 @@
+import { json } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
+import { Text } from '~/routes/_marketing+/ui+/components/typography/text.tsx'
+import { Code } from '../components/typography/code.tsx'
+
+import { Button } from '~/components/ui/button.tsx'
+import { Input } from '~/components/ui/input.tsx'
+import { Flex } from '../components/layout/flex.tsx'
+import { Description, Features, Source, readSource, type componentProps, Parts, Usage, Keyboard, Styling } from '../sections/sections.tsx'
+import { Drawer, DrawerClose, DrawerContent, DrawerTitle, DrawerTrigger } from '../components/modals/drawer.tsx'
+
+const component: componentProps = {
+	name: 'Drawer',
+	shortName: 'Drawer',
+	fileName: 'drawer',
+	category: 'modals',
+	description: [
+		'A contextual dialog that slides in from the edge of the screen.',
+		"Use it when you need users to complete a task or view details without leaving the current context. Because it's contextual, the overlay should not visually obscure the underlying content.",
+	],
+	features: [
+		'Supports modal and non-modal modes.',
+		'Focus is automatically trapped when modal.',
+		'Can be controlled or uncontrolled.',
+		'Manages screen reader announcements with Title and Description components.',
+		'Esc closes the component automatically.',
+	],
+	keyboard: [
+		{ key: 'Space', description: 'Opens/closes the dialog.' },
+		{ key: 'Enter', description: 'Opens/closes the dialog.' },
+		{ key: 'Tab', description: 'Moves focus to the next focusable element.' },
+		{ key: 'Shift + Tab', description: 'Moves focus to the previous focusable element.' },
+		{ key: 'Esc', description: 'Closes the dialog and moves focus to the Trigger.' },
+	],
+	parts: [
+		{
+			name: 'Drawer',
+			description: 'Contains all the parts of a drawer.',
+			props: [
+				{ name: 'defaultOpen', type: 'boolean', default: 'undefined' },
+				{ name: 'open', type: 'boolean', default: 'undefined' },
+				{ name: 'onOpenChange', type: 'function', default: 'undefined' },
+				{ name: 'modal', type: 'boolean', default: 'true' },
+			],
+		},
+		{
+			name: 'DrawerTrigger',
+			description: 'The button that opens the drawer.',
+			props: [{ name: 'asChild', type: 'boolean', default: 'false' }],
+			data: [{ name: 'state', values: ['open', 'closed'] }],
+		},
+		{
+			name: 'DrawerContent',
+			description: 'Contains content to be rendered when the drawer is open.',
+			props: [
+				{ name: 'side', type: 'string', default: 'right' },
+				{ name: 'asChild', type: 'boolean', default: 'false' },
+				{ name: 'forceMount', type: 'boolean', default: 'undefined' },
+				{ name: 'onOpenAutoFocus', type: 'function', default: 'undefined' },
+				{ name: 'onCloseAutoFocus', type: 'function', default: 'undefined' },
+				{ name: 'onEscapeKeyDown', type: 'function', default: 'undefined' },
+				{ name: 'onOutsideClick', type: 'function', default: 'undefined' },
+				{ name: 'onInteractOutside', type: 'function', default: 'undefined' },
+			],
+			data: [{ name: 'state', values: ['open', 'closed'] }],
+		},
+		{
+			name: 'DrawerTitle',
+			description: 'An accessible name to be announced when the drawer is opened.',
+			props: [{ name: 'asChild', type: 'boolean', default: 'false' }],
+		},
+		{
+			name: 'DrawerDescription',
+			description: 'An optional accessible description to be announced when the drawer is opened.',
+			props: [{ name: 'asChild', type: 'boolean', default: 'false' }],
+		},
+		{
+			name: 'DrawerClose',
+			description: 'A single button that closes the drawer.',
+			props: [{ name: 'asChild', type: 'boolean', default: 'false' }],
+		},
+	],
+	usage: `<Drawer>
+	<DrawerTrigger asChild>
+		<Button variant="secondary">Open Drawer</Button>
+	</DrawerTrigger>
+	<DrawerContent>
+		<DrawerTitle>Edit profile</DrawerTitle>
+		<Text className="mt-4">Make changes to your profile here. Click save when you're done.</Text>
+		<form>
+			<fieldset className="mb-5 flex items-center gap-5">
+				<label htmlFor="name" className="w-48 text-right">
+					Name
+				</label>
+				<Input id="name" type="text" defaultValue="André Casal" />
+			</fieldset>
+			<fieldset className="mb-5 flex items-center gap-5">
+				<label htmlFor="twitter-handle" className="w-48 text-right">
+					Username
+				</label>
+				<Input id="twitter-handle" type="text" defaultValue="@theandrecasal" />
+			</fieldset>
+			<Flex justify="end" gap="6">
+				<DrawerClose asChild>
+					<Button variant="secondary">Cancel</Button>
+				</DrawerClose>
+				<Button variant="primary" type="submit">
+					Save
+				</Button>
+			</Flex>
+		</form>
+	</DrawerContent>
+</Drawer>`,
+	styling: `/* ### Modals ### */
+@layer components {
+	/* Drawer */
+	.drawer-overlay {
+		/* Don't obscure the content underneath */
+		@apply bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+	}
+	.drawer {
+		@apply gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500;
+	}
+	.drawer-x-button {
+		@apply absolute right-4 top-4 min-h-tap min-w-tap 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-foreground data-[state=open]:text-muted-500;
+	}
+}`,
+}
+
+export const loader = async () => json({ source: await readSource({ category: component.category, fileName: component.fileName }) })
+
+const DialogRoute = () => {
+	const { source } = useLoaderData<typeof loader>()
+	const { name, description, features, keyboard, parts, usage, shortName, fileName, styling } = component
+
+	return (
+		<>
+			<Description name={name} description={description} />
+			<Features features={features} />
+			<Keyboard keyboard={keyboard} />
+			<Parts parts={parts} />
+			<Usage usage={usage} shortName={shortName} />
+			<Drawer>
+				<DrawerTrigger asChild>
+					<Button variant="secondary">Open Drawer</Button>
+				</DrawerTrigger>
+				<DrawerContent>
+					<DrawerTitle>Edit profile</DrawerTitle>
+					<Text className="mt-4">Make changes to your profile here. Click save when you're done.</Text>
+					<form className="mt-10">
+						<fieldset className="mb-5 flex items-center gap-5">
+							<label htmlFor="name" className="w-48 text-right">
+								Name
+							</label>
+							<Input id="name" type="text" defaultValue="André Casal" />
+						</fieldset>
+						<fieldset className="mb-5 flex items-center gap-5">
+							<label htmlFor="twitter-handle" className="w-48 text-right">
+								Username
+							</label>
+							<Input id="twitter-handle" type="text" defaultValue="@theandrecasal" />
+						</fieldset>
+						<Flex justify="end" gap="6">
+							<DrawerClose asChild>
+								<Button variant="secondary">Cancel</Button>
+							</DrawerClose>
+							<Button variant="primary" type="submit">
+								Save
+							</Button>
+						</Flex>
+					</form>
+				</DrawerContent>
+			</Drawer>
+			<Text className="mt-4">
+				Note: Because I wanted to show you an accurate example, the save button will actually submit the form, but because this page doesn't handle any <Code>POST</Code> requests, it
+				will just reload.
+			</Text>
+			<Source source={source} fileName={fileName} />
+			<Styling styling={styling} />
+		</>
+	)
+}
+export default DialogRoute
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index f75e08c..b62086c 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -326,18 +326,39 @@
 
 /* ### Modals ### */
 @layer components {
-	/* Modal Overlay */
-	.overlay {
+	/* Dialog */
+	.dialog-overlay {
 		@apply bg-background/80 backdrop-blur-sm;
 	}
-
-	/* Dialog and Alert Dialog */
 	.dialog {
 		@apply grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full;
 	}
 	.dialog-x-button {
 		@apply absolute right-4 top-4 min-h-tap min-w-tap 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-foreground data-[state=open]:text-muted-500;
 	}
+
+	/* Alert Dialog */
+	.alert-dialog-overlay {
+		@apply bg-background/80 backdrop-blur-sm;
+	}
+	.alert-dialog {
+		@apply grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full;
+	}
+	.alert-dialog-x-button {
+		@apply absolute right-4 top-4 min-h-tap min-w-tap 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-foreground data-[state=open]:text-muted-500;
+	}
+
+	/* Drawer */
+	.drawer-overlay {
+		/* Don't obscure the content underneath */
+		@apply bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+	}
+	.drawer {
+		@apply gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500;
+	}
+	.drawer-x-button {
+		@apply absolute right-4 top-4 min-h-tap min-w-tap 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-foreground data-[state=open]:text-muted-500;
+	}
 }
 
 /* ### Overlays ### */