From bcbe48ee7532b9d5a2982e6cb3cfe7aefe50edbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20Bie=C5=84?= <artur.bien@gmail.com>
Date: Thu, 9 May 2024 19:52:39 +0200
Subject: [PATCH] feat(Sheet): add Sheet component

---
 .../stories/components/sheet.stories.tsx      | 399 ++++++++++++++++++
 packages/frosted-ui/package.json              |   3 +-
 packages/frosted-ui/src/components/index.ts   |   1 +
 packages/frosted-ui/src/components/sheet.css  |  77 ++++
 packages/frosted-ui/src/components/sheet.tsx  | 183 ++++++++
 packages/frosted-ui/src/styles/index.css      |   1 +
 pnpm-lock.yaml                                |  17 +
 7 files changed, 680 insertions(+), 1 deletion(-)
 create mode 100644 packages/frosted-ui/.storybook/stories/components/sheet.stories.tsx
 create mode 100644 packages/frosted-ui/src/components/sheet.css
 create mode 100644 packages/frosted-ui/src/components/sheet.tsx

diff --git a/packages/frosted-ui/.storybook/stories/components/sheet.stories.tsx b/packages/frosted-ui/.storybook/stories/components/sheet.stories.tsx
new file mode 100644
index 00000000..185b109f
--- /dev/null
+++ b/packages/frosted-ui/.storybook/stories/components/sheet.stories.tsx
@@ -0,0 +1,399 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import {
+  Badge,
+  Button,
+  Checkbox,
+  Flex,
+  Inset,
+  ScrollArea,
+  Sheet,
+  Table,
+  Text,
+  TextField,
+} from '../../../src/components';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Components/Sheet',
+  component: Sheet.Content,
+  args: {
+    // size: dialogContentPropDefs.size.default,
+  },
+
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof Sheet.Content>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  render: ({ children, ...args }) => (
+    <Sheet.Root>
+      <Sheet.Trigger>
+        <Button>Edit profile</Button>
+      </Sheet.Trigger>
+
+      <Sheet.Content {...args}>
+        <Sheet.Header>
+          <Sheet.Title>Edit profile</Sheet.Title>
+          <Sheet.Description>Make changes to your profile.</Sheet.Description>
+        </Sheet.Header>
+        <Sheet.Body>
+          <Flex direction="column" gap="3">
+            <label>
+              <Text as="div" size="2" mb="1" weight="bold">
+                Name
+              </Text>
+              <TextField.Input
+                size="3"
+                defaultValue="Freja Johnsen"
+                placeholder="Enter your full name"
+              />
+            </label>
+            <label>
+              <Text as="div" size="2" mb="1" weight="bold">
+                Email
+              </Text>
+              <TextField.Input
+                size="3"
+                defaultValue="freja@example.com"
+                placeholder="Enter your email"
+              />
+            </label>
+          </Flex>
+
+          <Flex gap="3" mt="4" justify="end">
+            <Sheet.Close>
+              <Button
+                variant="soft"
+                color="gray"
+                onClick={() => alert('Cancel')}
+              >
+                Cancel
+              </Button>
+            </Sheet.Close>
+            <Sheet.Close>
+              <Button onClick={() => alert('Save')}>Save</Button>
+            </Sheet.Close>
+          </Flex>
+        </Sheet.Body>
+      </Sheet.Content>
+    </Sheet.Root>
+  ),
+};
+
+export const InsetContent: Story = {
+  name: 'With inset content',
+  render: ({ children, ...args }) => (
+    <Sheet.Root>
+      <Sheet.Trigger>
+        <Button>View users</Button>
+      </Sheet.Trigger>
+      <Sheet.Content {...args}>
+        <Sheet.Header>
+          <Sheet.Title>Users</Sheet.Title>
+          <Sheet.Description>
+            The following users have access to this project.
+          </Sheet.Description>
+        </Sheet.Header>
+
+        <Sheet.Body>
+          <Inset side="x" mb="4">
+            <Table.Root variant="ghost" size="1">
+              <ScrollArea scrollbars="horizontal">
+                <Table.Table>
+                  <Table.Header>
+                    <Table.Row>
+                      <Table.ColumnHeaderCell>
+                        <Flex align="center" gap="3">
+                          <Checkbox />
+                          Full name
+                        </Flex>
+                      </Table.ColumnHeaderCell>
+                      <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
+                      <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
+                    </Table.Row>
+                  </Table.Header>
+
+                  <Table.Body>
+                    <Table.Row>
+                      <Table.RowHeaderCell>
+                        <Flex align="center" gap="3">
+                          <Checkbox />
+                          Danilo Sousa
+                        </Flex>
+                      </Table.RowHeaderCell>
+                      <Table.Cell>danilo@example.com</Table.Cell>
+                      <Table.Cell>
+                        <Badge color="green">Developer</Badge>
+                      </Table.Cell>
+                    </Table.Row>
+
+                    <Table.Row>
+                      <Table.RowHeaderCell>
+                        <Flex align="center" gap="3">
+                          <Checkbox />
+                          Zahra Ambessa
+                        </Flex>
+                      </Table.RowHeaderCell>
+                      <Table.Cell>zahra@example.com</Table.Cell>
+                      <Table.Cell>
+                        <Badge color="amber">Admin</Badge>
+                      </Table.Cell>
+                    </Table.Row>
+
+                    <Table.Row>
+                      <Table.RowHeaderCell>
+                        <Flex align="center" gap="3">
+                          <Checkbox />
+                          Jasper Eriksson
+                        </Flex>
+                      </Table.RowHeaderCell>
+                      <Table.Cell>jasper@example.com</Table.Cell>
+                      <Table.Cell>
+                        <Badge color="green">Developer</Badge>
+                      </Table.Cell>
+                    </Table.Row>
+                  </Table.Body>
+                </Table.Table>
+              </ScrollArea>
+            </Table.Root>
+          </Inset>
+
+          <Flex gap="3" justify="end">
+            <Sheet.Close>
+              <Button variant="soft" color="gray">
+                Close
+              </Button>
+            </Sheet.Close>
+          </Flex>
+        </Sheet.Body>
+      </Sheet.Content>
+    </Sheet.Root>
+  ),
+};
+
+export const ScrollableContent: Story = {
+  name: 'Scrollable content',
+  render: ({ children, ...args }) => (
+    <Sheet.Root>
+      <Sheet.Trigger>
+        <Button>View users</Button>
+      </Sheet.Trigger>
+      <Sheet.Content {...args}>
+        <Sheet.Header>
+          <Sheet.Title>Users</Sheet.Title>
+          <Sheet.Description>
+            The following users have access to this project.
+          </Sheet.Description>
+        </Sheet.Header>
+        <Sheet.Body>
+          <Inset
+            side="all"
+            px="current"
+            pt="current"
+            style={{
+              flex: 1,
+              overflowY: 'auto',
+              borderTop: '1px solid vaR(--gray-a4)',
+              borderBottom: '1px solid vaR(--gray-a4)',
+            }}
+          >
+            <Text as="p" size="2" mb="4">
+              Make changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes
+            </Text>
+            <Text as="p" size="2" mb="4">
+              Make changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes
+            </Text>
+            <Text as="p" size="2" mb="4">
+              Make changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes to your profile. Make
+              changes to your profile. Make changes
+            </Text>
+          </Inset>
+        </Sheet.Body>
+      </Sheet.Content>
+    </Sheet.Root>
+  ),
+};
+
+export const Controlled: Story = {
+  name: 'Controlled (non dismissable)',
+  render: ({ children, ...args }) => {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <Sheet.Root dismissible={false} open={open}>
+        <Sheet.Trigger onClick={() => setOpen(true)}>
+          <Button>Delete account</Button>
+        </Sheet.Trigger>
+        <Sheet.Content {...args}>
+          <Sheet.Header>
+            <Sheet.Title>Delete account</Sheet.Title>
+            <Sheet.Description color="gray">
+              Are you sure you want to delete your account?
+            </Sheet.Description>
+          </Sheet.Header>
+          <Sheet.Body>
+            <Flex direction="column" gap="3" style={{ width: '100%' }}>
+              <Sheet.Close onClick={() => setOpen(false)}>
+                <Button variant="surface" style={{ width: '100%' }} size="3">
+                  Cancel
+                </Button>
+              </Sheet.Close>
+              <Sheet.Close onClick={() => setOpen(false)}>
+                <Button
+                  variant="classic"
+                  color="danger"
+                  style={{ width: '100%' }}
+                  size="3"
+                >
+                  Delete account
+                </Button>
+              </Sheet.Close>
+            </Flex>
+          </Sheet.Body>
+        </Sheet.Content>
+      </Sheet.Root>
+    );
+  },
+};
+
+// TODO: add support for snapPoints
+// export const SnapPoints: Story = {
+//   name: 'Snap points',
+//   render: ({ children, ...args }) => {
+//     const snapPoints = ['120px', '240px', 1];
+//     const [snap, setSnap] = React.useState<string | number | null>('420px');
+
+//     return (
+//       <Sheet.Root
+//       snapPoints={snapPoints}
+//       activeSnapPoint={snap}
+//       setActiveSnapPoint={(a) => console.log({ a })}
+//       >
+//         <Sheet.Trigger>
+//           <Button>Open Sheet</Button>
+//         </Sheet.Trigger>
+//         <Sheet.Content {...args}>
+//           <Sheet.Header>
+//             <Sheet.Title>Delete account</Sheet.Title>
+//             <Sheet.Description>
+//               Are you sure you want to delete your account?
+//             </Sheet.Description>
+//           </Sheet.Header>
+//           <Sheet.Body>
+//             <div style={{ height: 120, width: '100%', background: 'red' }} />
+//             <div style={{ height: 120, width: '100%', background: 'blue' }} />
+//             <div style={{ height: 260, width: '100%', background: 'green' }} />
+//           </Sheet.Body>
+//         </Sheet.Content>
+//       </Sheet.Root>
+//     );
+//   },
+// };
diff --git a/packages/frosted-ui/package.json b/packages/frosted-ui/package.json
index 14f7f4aa..c4991aed 100644
--- a/packages/frosted-ui/package.json
+++ b/packages/frosted-ui/package.json
@@ -100,7 +100,8 @@
     "input-otp": "^1.1.0",
     "react-aria-components": "1.1.1",
     "tailwindcss": "^3.3.5",
-    "tslib": "^2.6.2"
+    "tslib": "^2.6.2",
+    "vaul": "^0.9.1"
   },
   "peerDependencies": {
     "@types/react": "*",
diff --git a/packages/frosted-ui/src/components/index.ts b/packages/frosted-ui/src/components/index.ts
index 7540c9aa..b0f82fb8 100644
--- a/packages/frosted-ui/src/components/index.ts
+++ b/packages/frosted-ui/src/components/index.ts
@@ -80,6 +80,7 @@ export * from './hover-card.props';
 export * as Accordion from './lab/accordion';
 export * as Popover from './popover';
 export * from './popover.props';
+export * as Sheet from './sheet';
 export * from './stacked-horizontal-bar-chart';
 export * from './tooltip';
 export * from './tooltip.props';
diff --git a/packages/frosted-ui/src/components/sheet.css b/packages/frosted-ui/src/components/sheet.css
new file mode 100644
index 00000000..3e9b001b
--- /dev/null
+++ b/packages/frosted-ui/src/components/sheet.css
@@ -0,0 +1,77 @@
+.fui-SheetOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.fui-SheetContent {
+  --sheet-content-padding: 20px;
+  --inset-padding: var(--sheet-content-padding);
+  --sheet-border-color: var(--gray-a3);
+
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-height: calc(100% - 48px);
+  z-index: 50;
+  /* margin-top: 96px; */
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
+  border: 1px solid var(--sheet-border-color);
+  background-color: var(--color-panel-solid);
+}
+.fui-SheetContent[vaul-drawer][vaul-drawer-direction='bottom']::after {
+  border-left: 1px solid var(--sheet-border-color);
+  border-right: 1px solid var(--sheet-border-color);
+  left: -1px;
+  right: -1px;
+}
+.fui-SheetBody {
+  padding: var(--inset-padding);
+}
+.fui-SheetContentHandle {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 16px;
+  margin-bottom: 12px;
+  height: 5px;
+  width: 40px;
+  border-radius: 999px;
+  background-color: var(--gray-a4);
+}
+
+.fui-SheetHeader {
+  display: grid;
+  padding: 0 var(--inset-padding) var(--inset-padding) var(--inset-padding);
+  gap: 12px;
+}
+
+.fui-SheetTitle {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  color: blue;
+}
+.fui-SheetDescription {
+  color: green;
+}
+
+.fui-SheetContentHandle,
+.fui-SheetHeader,
+.fui-SheetBody {
+  min-height: 0;
+}
+.fui-SheetContentHandle,
+.fui-SheetHeader {
+  flex-shrink: 0;
+}
+.fui-SheetBody {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/packages/frosted-ui/src/components/sheet.tsx b/packages/frosted-ui/src/components/sheet.tsx
new file mode 100644
index 00000000..56ec2029
--- /dev/null
+++ b/packages/frosted-ui/src/components/sheet.tsx
@@ -0,0 +1,183 @@
+'use client';
+
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import classNames from 'classnames';
+import { ExtractPropsForTag } from '../helpers';
+import { Theme } from '../theme';
+import { Heading } from './heading';
+import { Text } from './text';
+
+type SheetRootProps = Omit<
+  React.ComponentProps<typeof DrawerPrimitive.Root>,
+  | 'shouldScaleBackground'
+  | 'direction'
+  // TODO: add support for snap points
+  | 'fadeFromIndex'
+  | 'snapPoints'
+  | 'activeSnapPoint'
+>;
+
+const SheetRoot = ({ ...props }: SheetRootProps) => (
+  <DrawerPrimitive.Root {...props} />
+);
+SheetRoot.displayName = 'SheetRoot';
+
+type SheetTriggerElement = React.ElementRef<typeof DrawerPrimitive.Trigger>;
+interface SheetTriggerProps
+  extends Omit<
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Trigger>,
+    'asChild'
+  > {}
+const SheetTrigger = React.forwardRef<SheetTriggerElement, SheetTriggerProps>(
+  (props, forwardedRef) => (
+    <DrawerPrimitive.Trigger {...props} ref={forwardedRef} asChild />
+  ),
+);
+SheetTrigger.displayName = 'SheetTrigger';
+
+type SheetCloseElement = React.ElementRef<typeof DrawerPrimitive.Close>;
+interface SheetCloseProps
+  extends Omit<
+    React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close>,
+    'asChild'
+  > {}
+const SheetClose = React.forwardRef<SheetCloseElement, SheetCloseProps>(
+  (props, forwardedRef) => (
+    <DrawerPrimitive.Close {...props} ref={forwardedRef} asChild />
+  ),
+);
+SheetClose.displayName = 'SheetClose';
+
+const SheetPortal = DrawerPrimitive.Portal;
+SheetPortal.displayName = 'SheetPortal';
+
+type SheetOverlayElement = React.ElementRef<typeof DrawerPrimitive.Overlay>;
+interface SheetOverlayProps
+  extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> {}
+
+const SheetOverlay = React.forwardRef<SheetOverlayElement, SheetOverlayProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <DrawerPrimitive.Overlay
+      ref={forwardedRef}
+      className={classNames('fui-SheetOverlay', className)}
+      {...props}
+    />
+  ),
+);
+SheetOverlay.displayName = 'SheetOverlay';
+
+type SheetContentElement = React.ElementRef<typeof DrawerPrimitive.Content>;
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> {}
+
+const SheetContent = React.forwardRef<SheetContentElement, SheetContentProps>(
+  ({ className, children, ...props }, forwardedRef) => (
+    <SheetPortal>
+      <Theme asChild>
+        <SheetOverlay />
+      </Theme>
+      <Theme asChild>
+        <DrawerPrimitive.Content
+          ref={forwardedRef}
+          className={classNames('fui-SheetContent', className)}
+          {...props}
+        >
+          <div className="fui-SheetContentHandle" />
+          {children}
+        </DrawerPrimitive.Content>
+      </Theme>
+    </SheetPortal>
+  ),
+);
+SheetContent.displayName = 'SheetContent';
+
+type SheetHeaderElement = React.ElementRef<'div'>;
+type SheetHeaderProps = React.ComponentPropsWithoutRef<'div'>;
+const SheetHeader = React.forwardRef<SheetHeaderElement, SheetHeaderProps>(
+  ({ children, className, ...props }, forwardedRef) => (
+    <div
+      className={classNames('fui-SheetHeader', className)}
+      {...props}
+      ref={forwardedRef}
+    >
+      {children}
+    </div>
+  ),
+);
+SheetHeader.displayName = 'SheetHeader';
+
+type SheetBodyElement = React.ElementRef<'div'>;
+type SheetBodyProps = React.ComponentPropsWithoutRef<'div'>;
+const SheetBody = React.forwardRef<SheetBodyElement, SheetBodyProps>(
+  ({ children, className, ...props }, forwardedRef) => (
+    <div
+      className={classNames('fui-SheetBody', className)}
+      {...props}
+      ref={forwardedRef}
+    >
+      {children}
+    </div>
+  ),
+);
+SheetBody.displayName = 'SheetBody';
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={classNames('fui-SheetFooter', className)} {...props} />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+type SheetTitleElement = React.ElementRef<typeof Heading>;
+type SheetTitleProps = React.ComponentPropsWithoutRef<typeof Heading>;
+
+const SheetTitle = React.forwardRef<SheetTitleElement, SheetTitleProps>(
+  ({ size = '5', weight = 'bold', ...props }, forwardedRef) => {
+    return (
+      <DrawerPrimitive.Title asChild>
+        <Heading weight={weight} size={size} {...props} ref={forwardedRef} />
+      </DrawerPrimitive.Title>
+    );
+  },
+);
+SheetTitle.displayName = 'SheetTitle';
+
+type SheetDescriptionElement = HTMLParagraphElement;
+type SheetDescriptionProps = ExtractPropsForTag<typeof Text, 'p'>;
+
+const SheetDescription = React.forwardRef<
+  SheetDescriptionElement,
+  SheetDescriptionProps
+>(({ size = '3', weight = 'regular', ...props }, forwardedRef) => {
+  return (
+    <DrawerPrimitive.Description asChild>
+      <Text as="p" size={size} weight={weight} {...props} ref={forwardedRef} />
+    </DrawerPrimitive.Description>
+  );
+});
+SheetDescription.displayName = 'SheetDescription';
+
+export {
+  SheetBody as Body,
+  SheetClose as Close,
+  SheetContent as Content,
+  SheetDescription as Description,
+  SheetHeader as Header,
+  SheetRoot as Root,
+  SheetTitle as Title,
+  SheetTrigger as Trigger,
+};
+
+export {
+  SheetBodyProps as BodyProps,
+  SheetCloseProps as CloseProps,
+  SheetContentProps as ContentProps,
+  SheetDescriptionProps as DescriptionProps,
+  SheetHeaderProps as HeaderProps,
+  SheetRootProps as RootProps,
+  SheetTitleProps as TitleProps,
+  SheetTriggerProps as TriggerProps,
+};
diff --git a/packages/frosted-ui/src/styles/index.css b/packages/frosted-ui/src/styles/index.css
index 7f62a23c..2395abeb 100644
--- a/packages/frosted-ui/src/styles/index.css
+++ b/packages/frosted-ui/src/styles/index.css
@@ -30,6 +30,7 @@
 @import '../components/data-list.css';
 @import '../components/dialog.css';
 @import '../components/drawer.css';
+@import '../components/sheet.css';
 @import '../components/dropdown-menu.css';
 @import '../components/em.css';
 @import '../components/filter-chip.css';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5cfe08d8..b9f44fee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -263,6 +263,9 @@ importers:
       tslib:
         specifier: ^2.6.2
         version: 2.6.2
+      vaul:
+        specifier: ^0.9.1
+        version: 0.9.1(@types/react-dom@18.2.18)(@types/react@18.2.53)(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       '@frosted-ui/icons':
         specifier: workspace:*
@@ -13652,6 +13655,20 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /vaul@0.9.1(@types/react-dom@18.2.18)(@types/react@18.2.53)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.18)(@types/react@18.2.53)(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+    dev: false
+
   /vite@4.4.11(@types/node@17.0.45):
     resolution: {integrity: sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==}
     engines: {node: ^14.18.0 || >=16.0.0}