@abhivarde/svelte-drawer 0.0.20 → 0.0.22

package/README.md

@@ -231,6 +231,135 @@ Snap points allow the drawer to rest at predefined heights, creating an iOS-like
 - Use `bind:activeSnapPoint` to programmatically control the current position
 - Use `onSnapPointChange` callback to react to snap changes
 
+### Portal Support
+
+Render the drawer in a portal to avoid z-index conflicts in complex layouts.
+```svelte
+<script>
+	import { Drawer, DrawerOverlay, DrawerContent, DrawerHandle } from '@abhivarde/svelte-drawer';
+
+	let open = $state(false);
+</script>
+
+<!-- Enable portal (renders at end of body) -->
+<Drawer bind:open portal={true}>
+	<DrawerOverlay class="fixed inset-0 bg-black/40" />
+	<DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
+		<DrawerHandle class="mb-8" />
+		<h2>Portal Drawer</h2>
+		<p>This drawer is rendered in a portal, preventing z-index issues.</p>
+	</DrawerContent>
+</Drawer>
+
+<!-- Custom portal container -->
+<Drawer bind:open portal={true} portalContainer="#custom-portal">
+	<DrawerOverlay />
+	<DrawerContent>
+		<h2>Custom Portal</h2>
+	</DrawerContent>
+</Drawer>
+
+<div id="custom-portal"></div>
+```
+
+**When to use portals:**
+- Complex layouts with nested z-index contexts
+- Third-party component libraries with fixed positioning
+- Modals inside scrollable containers
+- Preventing overflow: hidden conflicts
+
+### Header & Footer Components
+
+Optional pre-styled header and footer components for quick setup.
+
+#### DrawerHeader
+```svelte
+<script>
+	import { Drawer, DrawerOverlay, DrawerContent, DrawerHeader, DrawerHandle } from '@abhivarde/svelte-drawer';
+
+	let open = $state(false);
+</script>
+
+<!-- With title and description -->
+<Drawer bind:open>
+	<DrawerOverlay class="fixed inset-0 bg-black/40" />
+	<DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg">
+		<DrawerHeader 
+			title="Drawer Title" 
+			description="Optional description text"
+			showCloseButton={true}
+		/>
+		<div class="p-4">
+			<p>Drawer content here</p>
+		</div>
+	</DrawerContent>
+</Drawer>
+
+<!-- Custom header content -->
+<Drawer bind:open>
+	<DrawerOverlay />
+	<DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg">
+		<DrawerHeader>
+			<div class="flex items-center gap-3">
+				<img src="/icon.png" alt="Icon" class="w-8 h-8" />
+				<div>
+					<h2 class="font-semibold">Custom Header</h2>
+					<p class="text-sm text-gray-600">Your custom content</p>
+				</div>
+			</div>
+		</DrawerHeader>
+		<div class="p-4">
+			<p>Drawer content</p>
+		</div>
+	</DrawerContent>
+</Drawer>
+```
+
+#### DrawerFooter
+```svelte
+<script>
+	import { Drawer, DrawerOverlay, DrawerContent, DrawerFooter } from '@abhivarde/svelte-drawer';
+
+	let open = $state(false);
+</script>
+
+<!-- Simple footer with custom content -->
+<Drawer bind:open>
+	<DrawerOverlay class="fixed inset-0 bg-black/40" />
+	<DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg flex flex-col">
+		<div class="p-4 flex-1">
+			<h2>Drawer Content</h2>
+		</div>
+		<DrawerFooter>
+			<button onclick={() => open = false} class="px-4 py-2 bg-gray-200 rounded">
+				Cancel
+			</button>
+			<button class="px-4 py-2 bg-black text-white rounded">
+				Confirm
+			</button>
+		</DrawerFooter>
+	</DrawerContent>
+</Drawer>
+
+<!-- Custom footer with links -->
+<Drawer bind:open>
+	<DrawerOverlay />
+	<DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg flex flex-col">
+		<div class="p-4 flex-1">
+			<h2>Content</h2>
+		</div>
+		<DrawerFooter class="bg-gray-50">
+			<div class="flex justify-between w-full">
+				<a href="/privacy" class="text-sm text-gray-600 hover:text-gray-900">Privacy</a>
+				<a href="/terms" class="text-sm text-gray-600 hover:text-gray-900">Terms</a>
+			</div>
+		</DrawerFooter>
+	</DrawerContent>
+</Drawer>
+```
+
+**Note:** These components are **optional**. You can still build custom headers and footers using plain HTML/Svelte markup without importing these components.
+
 ## Variants
 
 Available variants for `DrawerVariants` component:
@@ -259,9 +388,11 @@ Main wrapper component that manages drawer state and animations.
 - `onOpenChange` (function, optional) - Callback when open state changes
 - `direction` ('bottom' | 'top' | 'left' | 'right', default: 'bottom') - Direction from which drawer slides
 - `closeOnEscape` (boolean, optional, default: true) - Whether Escape key closes the drawer
-- `snapPoints` (number[], optional) - Array of snap positions between 0-1, where 1 is fully open (e.g., `[0.25, 0.5, 0.9]`)
+- `snapPoints` (number[], optional) - Array of snap positions between 0-1
 - `activeSnapPoint` (number, bindable, optional) - Current active snap point value
-- `onSnapPointChange` (function, optional) - Callback fired when the drawer snaps to a different point
+- `onSnapPointChange` (function, optional) - Callback fired when snap changes
+- `portal` (boolean, optional, default: false) - Render drawer in a portal
+- `portalContainer` (HTMLElement | string, optional) - Custom portal container element or selector
 
 ### DrawerOverlay
 
@@ -318,6 +449,38 @@ Pre-styled drawer content with built-in variants.
 - `class` (string, optional) - Additional CSS classes for styling
 - `trapFocus` (boolean, optional, default: true) - Whether to trap focus inside drawer
 
+### DrawerHeader
+
+Optional pre-styled header component.
+
+**Props:**
+
+- `title` (string, optional) - Header title text
+- `description` (string, optional) - Description text below title
+- `showCloseButton` (boolean, optional, default: true) - Show close button
+- `onClose` (function, optional) - Custom close handler
+- `class` (string, optional) - CSS classes for styling
+
+**Features:**
+
+- Automatic close button with drawer context
+- Customizable via children render
+- Border and padding included
+
+### DrawerFooter
+
+Optional pre-styled footer component.
+
+**Props:**
+
+- `class` (string, optional) - CSS classes for styling
+
+**Features:**
+
+- Automatic border and spacing
+- Flexible content via children
+- Works with mt-auto for bottom positioning
+
 ## Demo
 
 Visit [drawer.abhivarde.in](https://drawer.abhivarde.in) to see live examples.

package/dist/components/Drawer.svelte

@@ -2,6 +2,7 @@
   import { Tween } from "svelte/motion";
   import { expoOut } from "svelte/easing";
   import { setContext, onMount } from "svelte";
+  import DrawerPortal from "./DrawerPortal.svelte";
 
   let {
     open = $bindable(false),
@@ -11,6 +12,8 @@
     snapPoints = undefined,
     activeSnapPoint = $bindable(undefined),
     onSnapPointChange = undefined,
+    portal = false,
+    portalContainer = undefined,
     children,
   } = $props();
 
@@ -143,4 +146,10 @@
   });
 </script>
 
-{@render children()}
+{#if portal}
+  <DrawerPortal container={portalContainer}>
+    {@render children()}
+  </DrawerPortal>
+{:else}
+  {@render children()}
+{/if}

package/dist/components/Drawer.svelte.d.ts

@@ -6,6 +6,8 @@ declare const Drawer: import("svelte").Component<{
     snapPoints?: any;
     activeSnapPoint?: any;
     onSnapPointChange?: any;
+    portal?: boolean;
+    portalContainer?: any;
     children: any;
 }, {}, "open" | "activeSnapPoint">;
 type Drawer = ReturnType<typeof Drawer>;

package/dist/components/DrawerFooter.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  let {
+    class: className = "",
+    children,
+    actions,
+    ...restProps
+  }: {
+    class?: string;
+    children?: any;
+    actions?: any;
+    [key: string]: any;
+  } = $props();
+</script>
+
+<div class="p-4 border-t border-gray-200 mt-auto {className}" {...restProps}>
+  {#if children}
+    {@render children()}
+  {:else if actions}
+    <div class="flex gap-3 justify-end">
+      {@render actions()}
+    </div>
+  {/if}
+</div>

package/dist/components/DrawerFooter.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    class?: string;
+    children?: any;
+    actions?: any;
+    [key: string]: any;
+};
+declare const DrawerFooter: import("svelte").Component<$$ComponentProps, {}, "">;
+type DrawerFooter = ReturnType<typeof DrawerFooter>;
+export default DrawerFooter;

package/dist/components/DrawerHeader.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  let {
+    title,
+    description,
+    showCloseButton = true,
+    onClose,
+    class: className = "",
+    children,
+    ...restProps
+  }: {
+    title?: string;
+    description?: string;
+    showCloseButton?: boolean;
+    onClose?: () => void;
+    class?: string;
+    children?: any;
+    [key: string]: any;
+  } = $props();
+
+  import { getContext } from "svelte";
+
+  const drawer = getContext<any>("drawer");
+
+  function handleClose() {
+    if (onClose) {
+      onClose();
+    } else {
+      drawer?.closeDrawer();
+    }
+  }
+</script>
+
+<div
+  class="flex items-center justify-between p-4 border-b border-gray-200 {className}"
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    <div class="flex-1">
+      {#if title}
+        <h2 class="text-lg font-semibold text-gray-900">{title}</h2>
+      {/if}
+      {#if description}
+        <p class="text-sm text-gray-600 mt-1">{description}</p>
+      {/if}
+    </div>
+
+    {#if showCloseButton}
+      <button
+        onclick={handleClose}
+        class="p-2 rounded-md hover:bg-gray-100 transition-colors"
+        aria-label="Close drawer"
+      >
+        <svg
+          class="w-5 h-5 text-gray-500"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    {/if}
+  {/if}
+</div>

package/dist/components/DrawerHeader.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    title?: string;
+    description?: string;
+    showCloseButton?: boolean;
+    onClose?: () => void;
+    class?: string;
+    children?: any;
+    [key: string]: any;
+};
+declare const DrawerHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type DrawerHeader = ReturnType<typeof DrawerHeader>;
+export default DrawerHeader;

package/dist/components/DrawerPortal.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let {
+    children,
+    container = undefined,
+  }: {
+    children?: any;
+    container?: HTMLElement | string;
+  } = $props();
+
+  let portalContainer = $state<HTMLElement | null>(null);
+  let mounted = $state(false);
+
+  onMount(() => {
+    if (container) {
+      if (typeof container === "string") {
+        portalContainer = document.querySelector(container);
+      } else {
+        portalContainer = container;
+      }
+    } else {
+      portalContainer = document.createElement("div");
+      portalContainer.setAttribute("data-drawer-portal", "");
+      document.body.appendChild(portalContainer);
+    }
+
+    mounted = true;
+
+    return () => {
+      if (
+        !container &&
+        portalContainer &&
+        document.body.contains(portalContainer)
+      ) {
+        document.body.removeChild(portalContainer);
+      }
+    };
+  });
+</script>
+
+{#if mounted && portalContainer}
+  {#each [children] as child}
+    {@render child?.()}
+  {/each}
+{/if}
+
+<style>
+  :global([data-drawer-portal]) {
+    position: relative;
+    z-index: 9999;
+  }
+</style>

package/dist/components/DrawerPortal.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    children?: any;
+    container?: HTMLElement | string;
+};
+declare const DrawerPortal: import("svelte").Component<$$ComponentProps, {}, "">;
+type DrawerPortal = ReturnType<typeof DrawerPortal>;
+export default DrawerPortal;

package/dist/index.d.ts

@@ -3,4 +3,7 @@ export { default as DrawerContent } from "./components/DrawerContent.svelte";
 export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
 export { default as DrawerVariants } from "./components/DrawerVariants.svelte";
 export { default as DrawerHandle } from "./components/DrawerHandle.svelte";
-export type { DrawerProps, DrawerContentProps, DrawerOverlayProps, DrawerHandleProps, DrawerVariant, DrawerVariantsProps, } from "./types";
+export { default as DrawerPortal } from "./components/DrawerPortal.svelte";
+export { default as DrawerHeader } from "./components/DrawerHeader.svelte";
+export { default as DrawerFooter } from "./components/DrawerFooter.svelte";
+export type { DrawerProps, DrawerContentProps, DrawerOverlayProps, DrawerHandleProps, DrawerVariant, DrawerVariantsProps, DrawerPortalProps, DrawerHeaderProps, DrawerFooterProps, } from "./types";

package/dist/index.js

@@ -3,3 +3,6 @@ export { default as DrawerContent } from "./components/DrawerContent.svelte";
 export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
 export { default as DrawerVariants } from "./components/DrawerVariants.svelte";
 export { default as DrawerHandle } from "./components/DrawerHandle.svelte";
+export { default as DrawerPortal } from "./components/DrawerPortal.svelte";
+export { default as DrawerHeader } from "./components/DrawerHeader.svelte";
+export { default as DrawerFooter } from "./components/DrawerFooter.svelte";

package/dist/types.d.ts

@@ -6,6 +6,8 @@ export interface DrawerProps {
     snapPoints?: number[];
     activeSnapPoint?: number;
     onSnapPointChange?: (snapPoint: number) => void;
+    portal?: boolean;
+    portalContainer?: HTMLElement | string;
 }
 export interface DrawerContentProps {
     class?: string;
@@ -17,6 +19,19 @@ export interface DrawerOverlayProps {
 export interface DrawerHandleProps {
     class?: string;
 }
+export interface DrawerPortalProps {
+    container?: HTMLElement | string;
+}
+export interface DrawerHeaderProps {
+    title?: string;
+    description?: string;
+    showCloseButton?: boolean;
+    onClose?: () => void;
+    class?: string;
+}
+export interface DrawerFooterProps {
+    class?: string;
+}
 export type DrawerVariant = "default" | "sheet" | "dialog" | "minimal" | "sidebar";
 export interface DrawerVariantsProps {
     variant?: DrawerVariant;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abhivarde/svelte-drawer",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "A drawer component for Svelte 5, inspired by Vaul",
   "author": "Abhi Varde",
   "license": "MIT",