@abhivarde/svelte-drawer 0.0.21 → 0.0.23

package/README.md

@@ -13,6 +13,8 @@ A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowal
 - ✅ Prebuilt variants (**default, sheet, dialog, minimal, sidebar**)
 - ✅ **Drag handle component** with auto-adaptive orientation
 - ✅ **Snap points** for iOS-like multi-height drawers
+- ✅ **Portal rendering** to escape z-index conflicts
+- ✅ **Optional header & footer** components for quick setup
 - ✅ Nested drawer support
 - ✅ Scrollable content areas
 - ✅ Keyboard shortcuts (**Escape to close**, Tab navigation)
@@ -268,6 +270,98 @@ Render the drawer in a portal to avoid z-index conflicts in complex layouts.
 - 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:
@@ -357,6 +451,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/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="border-t border-gray-200 p-4 mt-auto {className}" {...restProps}>
+  {#if children}
+    {@render children()}
+  {:else if actions}
+    <div class="flex justify-end gap-3">
+      {@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,67 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+
+  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();
+
+  const drawer = getContext<any>("drawer");
+
+  function handleClose() {
+    if (onClose) onClose();
+    else drawer?.closeDrawer();
+  }
+</script>
+
+<div class="border-b border-gray-200 p-4 {className}" {...restProps}>
+  <div class="flex items-start justify-between gap-4">
+    {#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>
+</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/index.d.ts

@@ -4,4 +4,6 @@ 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 type { DrawerProps, DrawerContentProps, DrawerOverlayProps, DrawerHandleProps, DrawerVariant, DrawerVariantsProps, DrawerPortalProps, } from "./types";
+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

@@ -4,3 +4,5 @@ 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

@@ -22,6 +22,16 @@ export interface DrawerHandleProps {
 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.21",
+  "version": "0.0.23",
   "description": "A drawer component for Svelte 5, inspired by Vaul",
   "author": "Abhi Varde",
   "license": "MIT",