@abhivarde/svelte-drawer 0.0.22 → 0.0.24

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)
@@ -53,6 +55,42 @@ npm install @abhivarde/svelte-drawer
 </Drawer>
 ```
 
+
+### Backdrop Blur
+
+Add a premium blur effect to the overlay background:
+```svelte
+<script>
+	import { Drawer, DrawerOverlay, DrawerContent, DrawerHandle } from '@abhivarde/svelte-drawer';
+
+	let open = $state(false);
+</script>
+
+<Drawer bind:open>
+	<!-- Default medium blur -->
+	<DrawerOverlay blur class="fixed inset-0 bg-black/40" />
+	
+	<!-- Or specify blur intensity -->
+	<!-- <DrawerOverlay blur="sm" class="fixed inset-0 bg-black/40" /> -->
+	<!-- <DrawerOverlay blur="lg" class="fixed inset-0 bg-black/40" /> -->
+	<!-- <DrawerOverlay blur="xl" 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>Blurred Backdrop</h2>
+		<p>Notice the premium blur effect behind this drawer.</p>
+	</DrawerContent>
+</Drawer>
+```
+
+**Available blur intensities:**
+- `blur={true}` or `blur="md"` - Medium blur (default)
+- `blur="sm"` - Small blur
+- `blur="lg"` - Large blur
+- `blur="xl"` - Extra large blur
+- `blur="2xl"` - 2x extra large blur
+- `blur="3xl"` - 3x extra large blur
+
 ### Side Drawer
 
 ```svelte
@@ -401,6 +439,7 @@ Overlay component that appears behind the drawer.
 **Props:**
 
 - `class` (string, optional) - CSS classes for styling
+- `blur` (boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl', optional) - Enable backdrop blur effect
 
 ### DrawerContent
 
@@ -485,6 +524,10 @@ Optional pre-styled footer component.
 
 Visit [drawer.abhivarde.in](https://drawer.abhivarde.in) to see live examples.
 
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=AbhiVarde/svelte-drawer&type=Date)](https://star-history.com/#AbhiVarde/svelte-drawer&Date)
+
 ## License
 
 This project is licensed under the MIT License.  
@@ -492,4 +535,4 @@ See the [LICENSE](./LICENSE) file for details.
 
 ## Credits
 
-Inspired by [Vaul](https://github.com/emilkowalski/vaul) by Emil Kowalski.
+Inspired by [Vaul](https://github.com/emilkowalski/vaul) by Emil Kowalski.

package/dist/components/DrawerFooter.svelte

@@ -12,11 +12,11 @@
   } = $props();
 </script>
 
-<div class="p-4 border-t border-gray-200 mt-auto {className}" {...restProps}>
+<div class="border-t border-gray-200 p-4 mt-auto {className}" {...restProps}>
   {#if children}
     {@render children()}
   {:else if actions}
-    <div class="flex gap-3 justify-end">
+    <div class="flex justify-end gap-3">
       {@render actions()}
     </div>
   {/if}

package/dist/components/DrawerHeader.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { getContext } from "svelte";
+
   let {
     title,
     description,
@@ -17,55 +19,49 @@
     [key: string]: any;
   } = $props();
 
-  import { getContext } from "svelte";
-
   const drawer = getContext<any>("drawer");
 
   function handleClose() {
-    if (onClose) {
-      onClose();
-    } else {
-      drawer?.closeDrawer();
-    }
+    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>
+<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"
+      {#if showCloseButton}
+        <button
+          onclick={handleClose}
+          class="p-2 rounded-md hover:bg-gray-100 transition-colors"
+          aria-label="Close drawer"
         >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M6 18L18 6M6 6l12 12"
-          />
-        </svg>
-      </button>
+          <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}
-  {/if}
+  </div>
 </div>

package/dist/components/DrawerOverlay.svelte

@@ -1,33 +1,47 @@
 <script>
-	import { getContext } from 'svelte';
-	
-	let {
-		class: className = '',
-		...restProps
-	} = $props();
-	
-	const drawer = getContext('drawer');
-	
-	/**
-	 * @param {KeyboardEvent} e
-	 */
-	function handleKeydown(e) {
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			drawer.closeDrawer();
-		}
-	}
+  import { getContext } from "svelte";
+
+  let { class: className = "", blur = false, ...restProps } = $props();
+
+  const drawer = getContext("drawer");
+
+  const blurClass = $derived(() => {
+    if (!blur) return "";
+
+    if (blur === true) return "backdrop-blur-md";
+
+    const blurMap = {
+      sm: "backdrop-blur-sm",
+      md: "backdrop-blur-md",
+      lg: "backdrop-blur-lg",
+      xl: "backdrop-blur-xl",
+      "2xl": "backdrop-blur-2xl",
+      "3xl": "backdrop-blur-3xl",
+    };
+
+    return blurMap[blur] || "backdrop-blur-md";
+  });
+
+  /**
+   * @param {KeyboardEvent} e
+   */
+  function handleKeydown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      drawer.closeDrawer();
+    }
+  }
 </script>
 
 {#if drawer.open}
-	<div
-		class="fixed inset-0 bg-black/40 cursor-pointer {className}"
-		style="opacity: {drawer.overlayOpacity.current}; z-index: 40;"
-		onclick={drawer.closeDrawer}
-		onkeydown={handleKeydown}
-		role="button"
-		tabindex="0"
-		aria-label="Close drawer"
-		{...restProps}
-	></div>
-{/if}
+  <div
+    class="fixed inset-0 bg-black/40 cursor-pointer {blurClass()} {className}"
+    style="opacity: {drawer.overlayOpacity.current}; z-index: 40;"
+    onclick={drawer.closeDrawer}
+    onkeydown={handleKeydown}
+    role="button"
+    tabindex="0"
+    aria-label="Close drawer"
+    {...restProps}
+  ></div>
+{/if}

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

@@ -5,7 +5,9 @@ type DrawerOverlay = {
 };
 declare const DrawerOverlay: import("svelte").Component<{
     class?: string;
+    blur?: boolean;
 } & Record<string, any>, {}, "">;
 type $$ComponentProps = {
     class?: string;
+    blur?: boolean;
 } & Record<string, any>;

package/dist/types.d.ts

@@ -15,6 +15,7 @@ export interface DrawerContentProps {
 }
 export interface DrawerOverlayProps {
     class?: string;
+    blur?: boolean | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 }
 export interface DrawerHandleProps {
     class?: string;

package/package.json

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