@abhivarde/svelte-drawer 0.0.1 → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Abhi Varde
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -117,7 +117,8 @@ Visit [drawer.abhivarde.in](https://drawer.abhivarde.in) to see live examples.
 
 ## License
 
-MIT
+This project is licensed under the MIT License.  
+See the [LICENSE](./LICENSE) file for details.
 
 ## Credits
 

package/dist/assets.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

package/dist/components/Drawer.svelte

@@ -1,42 +1,48 @@
-<script>
-	import { Spring } from 'svelte/motion';
-	import { setContext } from 'svelte';
-	
-	let {
-		open = $bindable(false),
-		onOpenChange = undefined,
-		direction = 'bottom',
-		children
-	} = $props();
-	
-	let overlayOpacity = new Spring(0, { stiffness: 0.32, damping: 0.72 });
-	let drawerPosition = new Spring(100, { stiffness: 0.32, damping: 0.72 });
-	
-	$effect(() => {
-		if (open) {
-			overlayOpacity.target = 1;
-			drawerPosition.target = 0;
-		} else {
-			overlayOpacity.target = 0;
-			drawerPosition.target = 100;
-		}
-	});
-	
-	function closeDrawer() {
-		open = false;
-		if (onOpenChange) {
-			onOpenChange(false);
-		}
-	}
-	
-	// Provide context to child components
-	setContext('drawer', {
-		get open() { return open; },
-		get overlayOpacity() { return overlayOpacity; },
-		get drawerPosition() { return drawerPosition; },
-		get direction() { return direction; },
-		closeDrawer
-	});
+<script lang="ts">
+  import { Tween } from "svelte/motion";
+  import { cubicOut } from "svelte/easing";
+  import { setContext } from "svelte";
+
+  let {
+    open = $bindable(false),
+    onOpenChange = undefined,
+    direction = "bottom",
+    children,
+  } = $props();
+
+  let overlayOpacity = new Tween(0, { duration: 300, easing: cubicOut });
+  let drawerPosition = new Tween(100, { duration: 300, easing: cubicOut });
+
+  $effect(() => {
+    if (open) {
+      overlayOpacity.set(1);
+      drawerPosition.set(0);
+    } else {
+      overlayOpacity.set(0);
+      drawerPosition.set(100);
+    }
+  });
+
+  function closeDrawer() {
+    open = false;
+    if (onOpenChange) onOpenChange(false);
+  }
+
+  setContext("drawer", {
+    get open() {
+      return open;
+    },
+    get overlayOpacity() {
+      return overlayOpacity;
+    },
+    get drawerPosition() {
+      return drawerPosition;
+    },
+    get direction() {
+      return direction;
+    },
+    closeDrawer,
+  });
 </script>
 
-{@render children()}
+{@render children()}

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

@@ -1,17 +1,8 @@
-export default Drawer;
-type Drawer = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
 declare const Drawer: import("svelte").Component<{
     open?: boolean;
     onOpenChange?: any;
     direction?: string;
     children: any;
 }, {}, "open">;
-type $$ComponentProps = {
-    open?: boolean;
-    onOpenChange?: any;
-    direction?: string;
-    children: any;
-};
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/DrawerContent.svelte

@@ -1,37 +1,100 @@
-<script>
-	import { getContext } from 'svelte';
-	
-	let {
-		class: className = '',
-		children,
-		...restProps
-	} = $props();
-	
-	const drawer = getContext('drawer');
-	
-	function getTransform() {
-		const pos = drawer.drawerPosition.current;
-		switch (drawer.direction) {
-			case 'bottom':
-				return `translateY(${pos}%)`;
-			case 'top':
-				return `translateY(-${pos}%)`;
-			case 'left':
-				return `translateX(-${pos}%)`;
-			case 'right':
-				return `translateX(${pos}%)`;
-			default:
-				return `translateY(${pos}%)`;
-		}
-	}
+<script lang="ts">
+  import { getContext } from "svelte";
+
+  // Minimal inline type just to fix TypeScript
+  type DrawerContext = {
+    open: boolean;
+    overlayOpacity: { current: number; set: (v: number) => void };
+    drawerPosition: { current: number; set: (v: number) => void };
+    direction: "bottom" | "top" | "left" | "right";
+    closeDrawer: () => void;
+  };
+
+  let { class: className = "", children, ...restProps } = $props();
+
+  // Tell TypeScript that context has this shape
+  const drawer = getContext<DrawerContext>("drawer");
+
+  let startPos = 0;
+  let dragging = false;
+
+  function getTransform(): string {
+    const pos = drawer.drawerPosition.current;
+    switch (drawer.direction) {
+      case "bottom":
+        return `translateY(${pos}%)`;
+      case "top":
+        return `translateY(-${pos}%)`;
+      case "left":
+        return `translateX(-${pos}%)`;
+      case "right":
+        return `translateX(${pos}%)`;
+      default:
+        return `translateY(${pos}%)`;
+    }
+  }
+
+  function onPointerDown(e: PointerEvent | TouchEvent) {
+    dragging = true;
+    startPos =
+      drawer.direction === "bottom" || drawer.direction === "top"
+        ? "clientY" in e
+          ? e.clientY
+          : (e.touches[0]?.clientY ?? 0)
+        : "clientX" in e
+          ? e.clientX
+          : (e.touches[0]?.clientX ?? 0);
+
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+  }
+
+  function onPointerMove(e: PointerEvent | TouchEvent) {
+    if (!dragging) return;
+    const current =
+      drawer.direction === "bottom" || drawer.direction === "top"
+        ? "clientY" in e
+          ? e.clientY
+          : (e.touches[0]?.clientY ?? 0)
+        : "clientX" in e
+          ? e.clientX
+          : (e.touches[0]?.clientX ?? 0);
+
+    const delta = current - startPos;
+
+    if (drawer.direction === "bottom")
+      drawer.drawerPosition.set(
+        Math.max(0, (delta / window.innerHeight) * 100)
+      );
+    else if (drawer.direction === "top")
+      drawer.drawerPosition.set(
+        Math.max(0, (-delta / window.innerHeight) * 100)
+      );
+    else if (drawer.direction === "left")
+      drawer.drawerPosition.set(
+        Math.max(0, (-delta / window.innerWidth) * 100)
+      );
+    else if (drawer.direction === "right")
+      drawer.drawerPosition.set(Math.max(0, (delta / window.innerWidth) * 100));
+  }
+
+  function onPointerUp() {
+    dragging = false;
+    if (drawer.drawerPosition.current > 30) drawer.closeDrawer();
+    else drawer.drawerPosition.set(0);
+
+    window.removeEventListener("pointermove", onPointerMove);
+    window.removeEventListener("pointerup", onPointerUp);
+  }
 </script>
 
 {#if drawer.open}
-	<div
-		class={className}
-		style="transform: {getTransform()}; z-index: 50;"
-		{...restProps}
-	>
-		{@render children()}
-	</div>
-{/if}
+  <div
+    class={className}
+    style="transform: {getTransform()}; z-index: 50;"
+    onpointerdown={onPointerDown}
+    {...restProps}
+  >
+    {@render children()}
+  </div>
+{/if}

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

@@ -1,13 +1,6 @@
-export default DrawerContent;
-type DrawerContent = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
 declare const DrawerContent: import("svelte").Component<{
     class?: string;
     children: any;
 } & Record<string, any>, {}, "">;
-type $$ComponentProps = {
-    class?: string;
-    children: any;
-} & Record<string, any>;
+type DrawerContent = ReturnType<typeof DrawerContent>;
+export default DrawerContent;

package/package.json

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