@abhivarde/svelte-drawer 0.0.24 → 1.0.0

package/README.md

@@ -398,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:
@@ -431,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
 

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,16 +1,20 @@
-<script>
+<script lang="ts">
   import { getContext } from "svelte";
+  import type { DrawerOverlayProps } from "../types";
 
-  let { class: className = "", blur = false, ...restProps } = $props();
+  let {
+    class: className = "",
+    blur = false,
+    ...restProps
+  }: DrawerOverlayProps = $props();
 
-  const drawer = getContext("drawer");
+  const drawer = getContext<any>("drawer");
 
   const blurClass = $derived(() => {
     if (!blur) return "";
-
     if (blur === true) return "backdrop-blur-md";
 
-    const blurMap = {
+    const blurMap: Record<string, string> = {
       sm: "backdrop-blur-sm",
       md: "backdrop-blur-md",
       lg: "backdrop-blur-lg",
@@ -19,13 +23,10 @@
       "3xl": "backdrop-blur-3xl",
     };
 
-    return blurMap[blur] || "backdrop-blur-md";
+    return blurMap[blur as string] || "backdrop-blur-md";
   });
 
-  /**
-   * @param {KeyboardEvent} e
-   */
-  function handleKeydown(e) {
+  function handleKeydown(e: KeyboardEvent) {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       drawer.closeDrawer();

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

@@ -1,13 +1,4 @@
+import type { DrawerOverlayProps } from "../types";
+declare const DrawerOverlay: import("svelte").Component<DrawerOverlayProps, {}, "">;
+type DrawerOverlay = ReturnType<typeof DrawerOverlay>;
 export default DrawerOverlay;
-type DrawerOverlay = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-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;

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.24",
+  "version": "1.0.0",
   "description": "A drawer component for Svelte 5, inspired by Vaul",
   "author": "Abhi Varde",
   "license": "MIT",
@@ -29,18 +29,18 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.0.0"
+    "svelte": "^5.46.4"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/kit": "^2.53.0",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "publint": "^0.2.12",
-    "svelte": "^5.45.6",
+    "svelte": "^5.46.4",
     "svelte-check": "^4.3.4",
     "typescript": "^5.9.3",
-    "vite": "^7.2.6"
+    "vite": "^8.0.0"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",