@lapismd/design-core 0.1.0

package/src/shared/shadcn/drawer/drawer-content.svelte

@@ -0,0 +1,440 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from "vaul-svelte";
+  import type { WithoutChildrenOrChild } from "../../../lib/utils.js";
+  import DrawerOverlay from "./drawer-overlay.svelte";
+  import DrawerPortal from "./drawer-portal.svelte";
+  import type { ComponentProps } from "svelte";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    portalProps,
+    children,
+    ...restProps
+  }: DrawerPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
+  } = $props();
+</script>
+
+<DrawerPortal {...portalProps}>
+  <DrawerOverlay />
+  <DrawerPrimitive.Content
+    bind:ref
+    data-ui-component="drawer"
+    data-ui-part="drawer-content"
+    data-slot="drawer-content"
+    class={className}
+    {...restProps}
+  >
+    <div
+      data-ui-component="drawer"
+      data-ui-part="drawer-content-anon-0"
+      data-slot="drawer-content-anon-0"
+    ></div>
+    {@render children?.()}
+  </DrawerPrimitive.Content>
+</DrawerPortal>
+
+<style>
+  /* Semantic selectors must be global: they target data attributes and descendants. */
+  :global {
+    /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+    @layer properties {
+    }
+    @layer base {
+      @supports (not ((-webkit-appearance: -apple-pay-button))) or
+        (contain-intrinsic-size: 1px) {
+      }
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"],
+    [data-ui-component="drawer"][data-ui-part="drawer-overlay"] {
+      position: fixed;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-overlay"] {
+      inset: 0;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"],
+    [data-ui-component="drawer"][data-ui-part="drawer-overlay"] {
+      z-index: 50;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content-anon-0"] {
+      margin-inline: auto;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content-anon-0"] {
+      margin-top: calc(var(--spacing) * 4);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-footer"] {
+      margin-top: auto;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"],
+    [data-ui-component="drawer"][data-ui-part="drawer-footer"],
+    [data-ui-component="drawer"][data-ui-part="drawer-header"] {
+      display: flex;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content-anon-0"] {
+      display: none;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content-anon-0"] {
+      height: calc(var(--spacing) * 1.5);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"] {
+      height: auto;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content-anon-0"] {
+      width: 100px;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content-anon-0"] {
+      flex-shrink: 0;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"],
+    [data-ui-component="drawer"][data-ui-part="drawer-footer"],
+    [data-ui-component="drawer"][data-ui-part="drawer-header"] {
+      flex-direction: column;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-header"] {
+      gap: calc(var(--spacing) * 0.5);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-footer"] {
+      gap: calc(var(--spacing) * 2);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content-anon-0"] {
+      border-radius: 3.40282e38px;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-overlay"] {
+      background-color: #0000001a;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      [data-ui-component="drawer"][data-ui-part="drawer-overlay"] {
+        background-color: color-mix(
+          in oklab,
+          var(--color-black) 10%,
+          transparent
+        );
+      }
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content-anon-0"] {
+      background-color: var(--muted);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"] {
+      background-color: var(--popover);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-footer"],
+    [data-ui-component="drawer"][data-ui-part="drawer-header"] {
+      padding: calc(var(--spacing) * 4);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"],
+    [data-ui-component="drawer"][data-ui-part="drawer-description"] {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-title"] {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-title"] {
+      color: var(--foreground);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-description"] {
+      color: var(--muted-foreground);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"] {
+      color: var(--popover-foreground);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content-anon-0"]:is(
+        :where(
+            [data-ui-component="drawer"][data-ui-part="drawer-content"]
+          )[data-vaul-drawer-direction="bottom"]
+          *
+      ) {
+      display: block;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-header"]:is(
+        :where(
+            [data-ui-component="drawer"][data-ui-part="drawer-content"]
+          )[data-vaul-drawer-direction="bottom"]
+          *
+      ),
+    [data-ui-component="drawer"][data-ui-part="drawer-header"]:is(
+        :where(
+            [data-ui-component="drawer"][data-ui-part="drawer-content"]
+          )[data-vaul-drawer-direction="top"]
+          *
+      ) {
+      text-align: center;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="bottom"] {
+      inset-inline: 0;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="bottom"] {
+      bottom: 0;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="bottom"] {
+      margin-top: calc(var(--spacing) * 24);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="bottom"] {
+      max-height: 80vh;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="bottom"] {
+      border-top-left-radius: calc(var(--radius) * 1.4);
+      border-top-right-radius: calc(var(--radius) * 1.4);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="bottom"] {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="left"] {
+      inset-block: 0;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="left"] {
+      left: 0;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="left"] {
+      width: 75%;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="left"] {
+      border-top-right-radius: calc(var(--radius) * 1.4);
+      border-bottom-right-radius: calc(var(--radius) * 1.4);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="left"] {
+      border-right-style: var(--tw-border-style);
+      border-right-width: 1px;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="right"] {
+      inset-block: 0;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="right"] {
+      right: 0;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="right"] {
+      width: 75%;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="right"] {
+      border-top-left-radius: calc(var(--radius) * 1.4);
+      border-bottom-left-radius: calc(var(--radius) * 1.4);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="right"] {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="top"] {
+      inset-inline: 0;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="top"] {
+      top: 0;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="top"] {
+      margin-bottom: calc(var(--spacing) * 24);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="top"] {
+      max-height: 80vh;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="top"] {
+      border-bottom-right-radius: calc(var(--radius) * 1.4);
+      border-bottom-left-radius: calc(var(--radius) * 1.4);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="top"] {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+    @supports (
+      (-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))
+    ) {
+      [data-ui-component="drawer"][data-ui-part="drawer-overlay"] {
+        --tw-backdrop-blur: blur(var(--blur-xs));
+        -webkit-backdrop-filter: var(--tw-backdrop-blur,)
+          var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
+          var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
+          var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
+          var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
+          var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
+          var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
+          var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
+          var(--tw-backdrop-sepia,);
+      }
+    }
+    @media (min-width: 40rem) {
+      [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="left"],
+      [data-ui-component="drawer"][data-ui-part="drawer-content"][data-vaul-drawer-direction="right"] {
+        max-width: var(--container-sm);
+      }
+    }
+    @media (min-width: 48rem) {
+      [data-ui-component="drawer"][data-ui-part="drawer-header"] {
+        gap: calc(var(--spacing) * 1.5);
+      }
+      [data-ui-component="drawer"][data-ui-part="drawer-header"] {
+        text-align: left;
+      }
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-overlay"]:where(
+        [data-state="open"]
+      ),
+    [data-ui-component="drawer"][data-ui-part="drawer-overlay"]:where(
+        [data-open]:not([data-open="false"])
+      ) {
+      animation: enter var(--tw-animation-duration, var(--tw-duration, 0.15s))
+        var(--tw-ease, ease) var(--tw-animation-delay, 0s)
+        var(--tw-animation-iteration-count, 1)
+        var(--tw-animation-direction, normal)
+        var(--tw-animation-fill-mode, none);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-overlay"]:where(
+        [data-state="open"]
+      ),
+    [data-ui-component="drawer"][data-ui-part="drawer-overlay"]:where(
+        [data-open]:not([data-open="false"])
+      ) {
+      --tw-enter-opacity: 0;
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-overlay"]:where(
+        [data-state="closed"]
+      ),
+    [data-ui-component="drawer"][data-ui-part="drawer-overlay"]:where(
+        [data-closed]:not([data-closed="false"])
+      ) {
+      animation: exit var(--tw-animation-duration, var(--tw-duration, 0.15s))
+        var(--tw-ease, ease) var(--tw-animation-delay, 0s)
+        var(--tw-animation-iteration-count, 1)
+        var(--tw-animation-direction, normal)
+        var(--tw-animation-fill-mode, none);
+    }
+    [data-ui-component="drawer"][data-ui-part="drawer-overlay"]:where(
+        [data-state="closed"]
+      ),
+    [data-ui-component="drawer"][data-ui-part="drawer-overlay"]:where(
+        [data-closed]:not([data-closed="false"])
+      ) {
+      --tw-exit-opacity: 0;
+    }
+    @property --tw-animation-delay {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0s;
+    }
+    @property --tw-animation-direction {
+      syntax: "*";
+      inherits: false;
+      initial-value: normal;
+    }
+    @property --tw-animation-duration {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-animation-fill-mode {
+      syntax: "*";
+      inherits: false;
+      initial-value: none;
+    }
+    @property --tw-animation-iteration-count {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-enter-blur {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-enter-opacity {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-enter-rotate {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-enter-scale {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-enter-translate-x {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-enter-translate-y {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-exit-blur {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-exit-opacity {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-exit-rotate {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-exit-scale {
+      syntax: "*";
+      inherits: false;
+      initial-value: 1;
+    }
+    @property --tw-exit-translate-x {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-exit-translate-y {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0;
+    }
+    @property --tw-font-weight {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-border-style {
+      syntax: "*";
+      inherits: false;
+      initial-value: solid;
+    }
+    @property --tw-backdrop-blur {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-backdrop-brightness {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-backdrop-contrast {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-backdrop-grayscale {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-backdrop-hue-rotate {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-backdrop-invert {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-backdrop-opacity {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-backdrop-saturate {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --tw-backdrop-sepia {
+      syntax: "*";
+      inherits: false;
+    }
+  }
+</style>

package/src/shared/shadcn/drawer/drawer-description.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DrawerPrimitive.DescriptionProps = $props();
+</script>
+
+<DrawerPrimitive.Description
+  bind:ref
+  data-ui-component="drawer"
+  data-ui-part="drawer-description"
+  data-slot="drawer-description"
+  class={className}
+  {...restProps}
+/>

package/src/shared/shadcn/drawer/drawer-footer.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { type WithElementRef } from "../../../lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  {...restProps}
+  data-ui-component="drawer"
+  data-ui-part="drawer-footer"
+  data-slot="drawer-footer"
+  class={className}
+>
+  {@render children?.()}
+</div>

package/src/shared/shadcn/drawer/drawer-header.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { type WithElementRef } from "../../../lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  {...restProps}
+  data-ui-component="drawer"
+  data-ui-part="drawer-header"
+  data-slot="drawer-header"
+  class={className}
+>
+  {@render children?.()}
+</div>

package/src/shared/shadcn/drawer/drawer-nested.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+  let {
+    shouldScaleBackground = true,
+    open = $bindable(false),
+    activeSnapPoint = $bindable(null),
+    ...restProps
+  }: DrawerPrimitive.RootProps = $props();
+</script>
+
+<DrawerPrimitive.NestedRoot
+  {shouldScaleBackground}
+  bind:open
+  bind:activeSnapPoint
+  {...restProps}
+/>

package/src/shared/shadcn/drawer/drawer-overlay.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DrawerPrimitive.OverlayProps = $props();
+</script>
+
+<DrawerPrimitive.Overlay
+  bind:ref
+  data-ui-component="drawer"
+  data-ui-part="drawer-overlay"
+  data-slot="drawer-overlay"
+  class={className}
+  {...restProps}
+/>

package/src/shared/shadcn/drawer/drawer-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+  let { ...restProps }: DrawerPrimitive.PortalProps = $props();
+</script>
+
+<DrawerPrimitive.Portal {...restProps} />

package/src/shared/shadcn/drawer/drawer-title.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DrawerPrimitive.TitleProps = $props();
+</script>
+
+<DrawerPrimitive.Title
+  bind:ref
+  data-ui-component="drawer"
+  data-ui-part="drawer-title"
+  data-slot="drawer-title"
+  class={className}
+  {...restProps}
+/>

package/src/shared/shadcn/drawer/drawer-trigger.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+  let { ref = $bindable(null), ...restProps }: DrawerPrimitive.TriggerProps =
+    $props();
+</script>
+
+<DrawerPrimitive.Trigger bind:ref data-slot="drawer-trigger" {...restProps} />

package/src/shared/shadcn/drawer/drawer.docs-body.md

@@ -0,0 +1,92 @@
+## About
+
+Drawer is built on top of [Vaul Svelte](https://vaul-svelte.com), which is a Svelte port of [Vaul](https://vaul.emilkowal.ski) by [Emil Kowalski](https://twitter.com/emilkowalski_).
+
+## Installation
+
+```bash
+pnpm ui:add drawer
+```
+
+## Usage
+
+```html
+<script lang="ts">
+  import * as Drawer from "@lapismd/design-core/shadcn/drawer";
+</script>
+```
+
+```html
+<Drawer.Root>
+  <Drawer.Trigger>Open</Drawer.Trigger>
+  <Drawer.Content>
+    <Drawer.Header>
+      <Drawer.Title>Are you sure absolutely sure?</Drawer.Title>
+      <Drawer.Description>This action cannot be undone.</Drawer.Description>
+    </Drawer.Header>
+    <Drawer.Footer>
+      <button>Submit</button>
+      <Drawer.Close>Cancel</Drawer.Close>
+    </Drawer.Footer>
+  </Drawer.Content>
+</Drawer.Root>
+```
+
+## Examples
+
+### Sides
+
+Use the `direction` prop to set the side of the drawer. Available options are `top`, `right`, `bottom`, and `left`.
+
+```html
+<script lang="ts">
+  import * as Drawer from "@lapismd/design-core/shadcn/drawer";
+  import { Button, buttonVariants } from "@lapismd/design-core/shadcn/button";
+  import { cn } from "../../../../lib/utils.js";
+
+  const DRAWER_SIDES = ["top", "right", "bottom", "left"] as const;
+</script>
+
+<div class="flex flex-wrap gap-2">
+  {#each DRAWER_SIDES as side (side)}
+    <Drawer.Root direction={side === "bottom" ? undefined : side}>
+      <Drawer.Trigger
+        class={cn(buttonVariants({ variant: "outline" }), "capitalize")}
+      >
+        {side}
+      </Drawer.Trigger>
+      <Drawer.Content
+        class="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]"
+      >
+        <Drawer.Header>
+          <Drawer.Title>Move Goal</Drawer.Title>
+          <Drawer.Description>Set your daily activity goal.</Drawer.Description>
+        </Drawer.Header>
+        <div class="no-scrollbar overflow-y-auto px-4">
+          {#each Array.from({ length: 10 }) as _, i (i)}
+            <p class="mb-4 leading-normal">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          {/each}
+        </div>
+        <Drawer.Footer>
+          <Button>Submit</Button>
+          <Drawer.Close class={buttonVariants({ variant: "outline" })}>
+            Cancel
+          </Drawer.Close>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer.Root>
+  {/each}
+</div>
+```
+
+### Responsive Dialog
+
+You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` on desktop and a `Drawer` on mobile.