@abhivarde/svelte-drawer 0.0.23 → 0.0.25

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
@@ -362,6 +398,61 @@ Optional pre-styled header and footer components for quick setup.
 
 **Note:** These components are **optional**. You can still build custom headers and footers using plain HTML/Svelte markup without importing these components.
 
+### Persistent State
+
+Automatically save and restore drawer state across page reloads.
+```svelte
+<script>
+  import { Drawer, DrawerOverlay, DrawerContent } from '@abhivarde/svelte-drawer';
+
+  let open = $state(false);
+</script>
+
+<Drawer 
+  bind:open 
+  persistState={true}
+  persistKey="main-drawer"
+>
+  <DrawerOverlay />
+  <DrawerContent class="...">
+    <h2>This drawer remembers if it was open!</h2>
+    <p>Reload the page and it will restore its state.</p>
+  </DrawerContent>
+</Drawer>
+```
+
+**With snap points:**
+```svelte
+<Drawer 
+  bind:open 
+  snapPoints={[0.25, 0.5, 0.9]}
+  bind:activeSnapPoint
+  persistState={true}
+  persistKey="snap-drawer"
+  persistSnapPoint={true}
+>
+  <DrawerOverlay />
+  <DrawerContent class="...">
+    <h2>Position is saved too!</h2>
+    <p>The snap point will be restored on reload.</p>
+  </DrawerContent>
+</Drawer>
+```
+
+**Clear saved state programmatically:**
+```svelte
+<script>
+  import { clearDrawerState } from '@abhivarde/svelte-drawer';
+
+  function resetDrawer() {
+    clearDrawerState('main-drawer');
+    // Drawer will reset to default state on next load
+  }
+</script>
+
+<button onclick={resetDrawer}>Reset Drawer State</button>
+```
+
 ## Variants
 
 Available variants for `DrawerVariants` component:
@@ -395,6 +486,9 @@ Main wrapper component that manages drawer state and animations.
 - `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
+- `persistState` (boolean, optional, default: false) - Enable persistent state
+- `persistKey` (string, optional, default: "default") - Unique identifier for this drawer
+- `persistSnapPoint` (boolean, optional, default: false) - Whether to persist snap point position
 
 ### DrawerOverlay
 
@@ -403,6 +497,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 +582,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 +593,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/Drawer.svelte

@@ -3,6 +3,7 @@
   import { expoOut } from "svelte/easing";
   import { setContext, onMount } from "svelte";
   import DrawerPortal from "./DrawerPortal.svelte";
+  import { saveDrawerState, loadDrawerState } from "../utils/storage"; // NEW
 
   let {
     open = $bindable(false),
@@ -14,6 +15,9 @@
     onSnapPointChange = undefined,
     portal = false,
     portalContainer = undefined,
+    persistState = false, 
+    persistKey = "default", 
+    persistSnapPoint = false, 
     children,
   } = $props();
 
@@ -30,6 +34,43 @@
   let previouslyFocusedElement: HTMLElement | null = null;
   let visible = false;
   let previousSnapPoint: number | undefined = undefined;
+  let stateLoaded = false; 
+
+  onMount(() => {
+    if (persistState && !stateLoaded) {
+      const savedState = loadDrawerState(persistKey);
+
+      if (savedState) {
+        open = savedState.open;
+
+        if (
+          persistSnapPoint &&
+          savedState.snapPoint !== undefined &&
+          snapPoints
+        ) {
+          activeSnapPoint = savedState.snapPoint;
+        }
+      }
+
+      stateLoaded = true;
+    }
+
+    window.addEventListener("keydown", handleKeydown);
+    return () => {
+      window.removeEventListener("keydown", handleKeydown);
+      document.body.style.overflow = "";
+    };
+  });
+
+  $effect(() => {
+    if (persistState && stateLoaded) {
+      saveDrawerState(
+        persistKey,
+        open,
+        persistSnapPoint ? activeSnapPoint : undefined
+      );
+    }
+  });
 
   $effect(() => {
     if (
@@ -108,14 +149,6 @@
     }
   }
 
-  onMount(() => {
-    window.addEventListener("keydown", handleKeydown);
-    return () => {
-      window.removeEventListener("keydown", handleKeydown);
-      document.body.style.overflow = "";
-    };
-  });
-
   setContext("drawer", {
     get open() {
       return open;

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

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

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/index.d.ts

@@ -6,4 +6,5 @@ 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";
+export { saveDrawerState, loadDrawerState, clearDrawerState, } from "./utils/storage";
 export type { DrawerProps, DrawerContentProps, DrawerOverlayProps, DrawerHandleProps, DrawerVariant, DrawerVariantsProps, DrawerPortalProps, DrawerHeaderProps, DrawerFooterProps, } from "./types";

package/dist/index.js

@@ -6,3 +6,4 @@ 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";
+export { saveDrawerState, loadDrawerState, clearDrawerState, } from "./utils/storage";

package/dist/types.d.ts

@@ -8,6 +8,9 @@ export interface DrawerProps {
     onSnapPointChange?: (snapPoint: number) => void;
     portal?: boolean;
     portalContainer?: HTMLElement | string;
+    persistState?: boolean;
+    persistKey?: string;
+    persistSnapPoint?: boolean;
 }
 export interface DrawerContentProps {
     class?: string;
@@ -15,6 +18,7 @@ export interface DrawerContentProps {
 }
 export interface DrawerOverlayProps {
     class?: string;
+    blur?: boolean | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 }
 export interface DrawerHandleProps {
     class?: string;

package/dist/utils/storage.d.ts

@@ -0,0 +1,8 @@
+interface DrawerState {
+    open: boolean;
+    snapPoint?: number;
+}
+export declare function saveDrawerState(key: string, open: boolean, snapPoint?: number): void;
+export declare function loadDrawerState(key: string): DrawerState | null;
+export declare function clearDrawerState(key: string): void;
+export {};

package/dist/utils/storage.js

@@ -0,0 +1,39 @@
+const STORAGE_PREFIX = "svelte-drawer-";
+export function saveDrawerState(key, open, snapPoint) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        const state = { open };
+        if (snapPoint !== undefined) {
+            state.snapPoint = snapPoint;
+        }
+        localStorage.setItem(`${STORAGE_PREFIX}${key}`, JSON.stringify(state));
+    }
+    catch (error) {
+        console.warn("Failed to save drawer state:", error);
+    }
+}
+export function loadDrawerState(key) {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const stored = localStorage.getItem(`${STORAGE_PREFIX}${key}`);
+        if (!stored)
+            return null;
+        return JSON.parse(stored);
+    }
+    catch (error) {
+        console.warn("Failed to load drawer state:", error);
+        return null;
+    }
+}
+export function clearDrawerState(key) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        localStorage.removeItem(`${STORAGE_PREFIX}${key}`);
+    }
+    catch (error) {
+        console.warn("Failed to clear drawer state:", error);
+    }
+}

package/package.json

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