@abhivarde/svelte-drawer 0.0.23 → 0.0.24

package/README.md

@@ -55,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
@@ -403,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
 
@@ -487,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.  
@@ -494,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/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.23",
+  "version": "0.0.24",
   "description": "A drawer component for Svelte 5, inspired by Vaul",
   "author": "Abhi Varde",
   "license": "MIT",