From 41c5ceb848b91ade81ed734551390af28fc52062 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 7 Feb 2026 18:00:38 +0300
Subject: [PATCH] feat(drawer): add shadcn drawer

---
 .../shadcn/ui/drawer/drawer-close.svelte      |  7 ++++
 .../shadcn/ui/drawer/drawer-content.svelte    | 39 +++++++++++++++++++
 .../ui/drawer/drawer-description.svelte       | 17 ++++++++
 .../shadcn/ui/drawer/drawer-footer.svelte     | 23 +++++++++++
 .../shadcn/ui/drawer/drawer-header.svelte     | 23 +++++++++++
 .../shadcn/ui/drawer/drawer-nested.svelte     | 12 ++++++
 .../shadcn/ui/drawer/drawer-overlay.svelte    | 20 ++++++++++
 .../shadcn/ui/drawer/drawer-portal.svelte     |  7 ++++
 .../shadcn/ui/drawer/drawer-title.svelte      | 17 ++++++++
 .../shadcn/ui/drawer/drawer-trigger.svelte    |  7 ++++
 src/shared/shadcn/ui/drawer/drawer.svelte     | 12 ++++++
 src/shared/shadcn/ui/drawer/index.ts          | 37 ++++++++++++++++++
 12 files changed, 221 insertions(+)
 create mode 100644 src/shared/shadcn/ui/drawer/drawer-close.svelte
 create mode 100644 src/shared/shadcn/ui/drawer/drawer-content.svelte
 create mode 100644 src/shared/shadcn/ui/drawer/drawer-description.svelte
 create mode 100644 src/shared/shadcn/ui/drawer/drawer-footer.svelte
 create mode 100644 src/shared/shadcn/ui/drawer/drawer-header.svelte
 create mode 100644 src/shared/shadcn/ui/drawer/drawer-nested.svelte
 create mode 100644 src/shared/shadcn/ui/drawer/drawer-overlay.svelte
 create mode 100644 src/shared/shadcn/ui/drawer/drawer-portal.svelte
 create mode 100644 src/shared/shadcn/ui/drawer/drawer-title.svelte
 create mode 100644 src/shared/shadcn/ui/drawer/drawer-trigger.svelte
 create mode 100644 src/shared/shadcn/ui/drawer/drawer.svelte
 create mode 100644 src/shared/shadcn/ui/drawer/index.ts

diff --git a/src/shared/shadcn/ui/drawer/drawer-close.svelte b/src/shared/shadcn/ui/drawer/drawer-close.svelte
new file mode 100644
index 0000000..7c31f53
--- /dev/null
+++ b/src/shared/shadcn/ui/drawer/drawer-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+
+let { ref = $bindable(null), ...restProps }: DrawerPrimitive.CloseProps = $props();
+</script>
+
+<DrawerPrimitive.Close bind:ref data-slot="drawer-close" {...restProps} />
diff --git a/src/shared/shadcn/ui/drawer/drawer-content.svelte b/src/shared/shadcn/ui/drawer/drawer-content.svelte
new file mode 100644
index 0000000..862416d
--- /dev/null
+++ b/src/shared/shadcn/ui/drawer/drawer-content.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { WithoutChildrenOrChild } from '$shared/shadcn/utils/shadcn-utils.js';
+import type { ComponentProps } from 'svelte';
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+import DrawerOverlay from './drawer-overlay.svelte';
+import DrawerPortal from './drawer-portal.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-slot="drawer-content"
+        class={cn(
+            'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+            'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
+            'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
+            'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=right]:sm:max-w-sm',
+            'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=left]:sm:max-w-sm',
+            className,
+        )}
+        {...restProps}
+    >
+        <div class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block">
+        </div>
+        {@render children?.()}
+    </DrawerPrimitive.Content>
+</DrawerPortal>
diff --git a/src/shared/shadcn/ui/drawer/drawer-description.svelte b/src/shared/shadcn/ui/drawer/drawer-description.svelte
new file mode 100644
index 0000000..bce0b9c
--- /dev/null
+++ b/src/shared/shadcn/ui/drawer/drawer-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: DrawerPrimitive.DescriptionProps = $props();
+</script>
+
+<DrawerPrimitive.Description
+    bind:ref
+    data-slot="drawer-description"
+    class={cn('text-muted-foreground text-sm', className)}
+    {...restProps}
+/>
diff --git a/src/shared/shadcn/ui/drawer/drawer-footer.svelte b/src/shared/shadcn/ui/drawer/drawer-footer.svelte
new file mode 100644
index 0000000..65009ce
--- /dev/null
+++ b/src/shared/shadcn/ui/drawer/drawer-footer.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-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}
+    data-slot="drawer-footer"
+    class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>
diff --git a/src/shared/shadcn/ui/drawer/drawer-header.svelte b/src/shared/shadcn/ui/drawer/drawer-header.svelte
new file mode 100644
index 0000000..1279de8
--- /dev/null
+++ b/src/shared/shadcn/ui/drawer/drawer-header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+import {
+    type WithElementRef,
+    cn,
+} from '$shared/shadcn/utils/shadcn-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}
+    data-slot="drawer-header"
+    class={cn('flex flex-col gap-1.5 p-4', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>
diff --git a/src/shared/shadcn/ui/drawer/drawer-nested.svelte b/src/shared/shadcn/ui/drawer/drawer-nested.svelte
new file mode 100644
index 0000000..0fcfd26
--- /dev/null
+++ b/src/shared/shadcn/ui/drawer/drawer-nested.svelte
@@ -0,0 +1,12 @@
+<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} />
diff --git a/src/shared/shadcn/ui/drawer/drawer-overlay.svelte b/src/shared/shadcn/ui/drawer/drawer-overlay.svelte
new file mode 100644
index 0000000..8da0b2d
--- /dev/null
+++ b/src/shared/shadcn/ui/drawer/drawer-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: DrawerPrimitive.OverlayProps = $props();
+</script>
+
+<DrawerPrimitive.Overlay
+    bind:ref
+    data-slot="drawer-overlay"
+    class={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+    )}
+    {...restProps}
+/>
diff --git a/src/shared/shadcn/ui/drawer/drawer-portal.svelte b/src/shared/shadcn/ui/drawer/drawer-portal.svelte
new file mode 100644
index 0000000..45762f4
--- /dev/null
+++ b/src/shared/shadcn/ui/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} />
diff --git a/src/shared/shadcn/ui/drawer/drawer-title.svelte b/src/shared/shadcn/ui/drawer/drawer-title.svelte
new file mode 100644
index 0000000..6e8a03c
--- /dev/null
+++ b/src/shared/shadcn/ui/drawer/drawer-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: DrawerPrimitive.TitleProps = $props();
+</script>
+
+<DrawerPrimitive.Title
+    bind:ref
+    data-slot="drawer-title"
+    class={cn('text-foreground font-semibold', className)}
+    {...restProps}
+/>
diff --git a/src/shared/shadcn/ui/drawer/drawer-trigger.svelte b/src/shared/shadcn/ui/drawer/drawer-trigger.svelte
new file mode 100644
index 0000000..a6b5620
--- /dev/null
+++ b/src/shared/shadcn/ui/drawer/drawer-trigger.svelte
@@ -0,0 +1,7 @@
+<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} />
diff --git a/src/shared/shadcn/ui/drawer/drawer.svelte b/src/shared/shadcn/ui/drawer/drawer.svelte
new file mode 100644
index 0000000..fba1699
--- /dev/null
+++ b/src/shared/shadcn/ui/drawer/drawer.svelte
@@ -0,0 +1,12 @@
+<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.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />
diff --git a/src/shared/shadcn/ui/drawer/index.ts b/src/shared/shadcn/ui/drawer/index.ts
new file mode 100644
index 0000000..bdc5e35
--- /dev/null
+++ b/src/shared/shadcn/ui/drawer/index.ts
@@ -0,0 +1,37 @@
+import Close from './drawer-close.svelte';
+import Content from './drawer-content.svelte';
+import Description from './drawer-description.svelte';
+import Footer from './drawer-footer.svelte';
+import Header from './drawer-header.svelte';
+import NestedRoot from './drawer-nested.svelte';
+import Overlay from './drawer-overlay.svelte';
+import Portal from './drawer-portal.svelte';
+import Title from './drawer-title.svelte';
+import Trigger from './drawer-trigger.svelte';
+import Root from './drawer.svelte';
+
+export {
+    Close,
+    Close as DrawerClose,
+    Content,
+    Content as DrawerContent,
+    Description,
+    Description as DrawerDescription,
+    Footer,
+    Footer as DrawerFooter,
+    Header,
+    Header as DrawerHeader,
+    NestedRoot,
+    NestedRoot as DrawerNestedRoot,
+    Overlay,
+    Overlay as DrawerOverlay,
+    Portal,
+    Portal as DrawerPortal,
+    Root,
+    //
+    Root as Drawer,
+    Title,
+    Title as DrawerTitle,
+    Trigger,
+    Trigger as DrawerTrigger,
+};