@abhivarde/svelte-drawer 0.0.14 → 0.0.16

package/README.md

@@ -7,18 +7,19 @@ A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowal
 
 ## Features
 
-- ✅ Smooth animations and **gesture-driven dragging** (mouse & touch)
+- ✅ Smooth animations with **gesture-driven dragging** (mouse & touch)
 - ✅ Mobile-optimized drag handling with **scroll prevention**
-- ✅ Multiple directions (bottom, top, left, right)
-- ✅ Prebuilt variants (default, sheet, dialog, minimal, sidebar)
+- ✅ Support for multiple directions (**bottom, top, left, right**)
+- ✅ Prebuilt variants (**default, sheet, dialog, minimal, sidebar**)
 - ✅ **Drag handle component** with auto-adaptive orientation
-- ✅ Nested drawers support
-- ✅ Scrollable content
-- ✅ Keyboard shortcuts (Escape to close, Tab navigation)
-- ✅ Focus management (auto-focus, focus trap, focus restoration)
+- ✅ **Snap points** for iOS-like multi-height drawers
+- ✅ Nested drawer support
+- ✅ Scrollable content areas
+- ✅ Keyboard shortcuts (**Escape to close**, Tab navigation)
+- ✅ Focus management (**auto-focus, focus trap, focus restoration**)
 - ✅ Fully accessible with keyboard navigation
-- ✅ TypeScript support
-- ✅ Customizable styling with Tailwind CSS
+- ✅ Full **TypeScript** support
+- ✅ Customizable styling with **Tailwind CSS**
 
 ## Installation
 
@@ -192,6 +193,44 @@ npm install @abhivarde/svelte-drawer
 </Drawer>
 ```
 
+### Snap Points
+
+Snap points allow the drawer to rest at predefined heights, creating an iOS-like sheet experience.
+
+```svelte
+<script>
+	import { Drawer, DrawerOverlay, DrawerContent, DrawerHandle } from '@abhivarde/svelte-drawer';
+
+	let open = $state(false);
+	let activeSnapPoint = $state(undefined);
+</script>
+
+<Drawer
+	bind:open
+	snapPoints={[0.25, 0.5, 0.9]}
+	bind:activeSnapPoint
+	onSnapPointChange={(point) => console.log('Snapped to:', point)}
+>
+	<DrawerOverlay 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>Drawer with Snap Points</h2>
+		<p>Drag to see snapping behavior at 25%, 50%, and 90%</p>
+
+		<!-- Programmatically change snap point -->
+		<button onclick={() => activeSnapPoint = 0.5}>Jump to 50%</button>
+	</DrawerContent>
+</Drawer>
+```
+
+**How it works:**
+
+- Snap point values range from 0 to 1 (e.g., `0.5` = 50% of screen height)
+- The drawer automatically snaps to the nearest point when released
+- Dragging beyond the lowest snap point dismisses the drawer
+- Use `bind:activeSnapPoint` to programmatically control the current position
+- Use `onSnapPointChange` callback to react to snap changes
+
 ## Variants
 
 Available variants for `DrawerVariants` component:
@@ -220,6 +259,9 @@ Main wrapper component that manages drawer state and animations.
 - `onOpenChange` (function, optional) - Callback when open state changes
 - `direction` ('bottom' | 'top' | 'left' | 'right', default: 'bottom') - Direction from which drawer slides
 - `closeOnEscape` (boolean, optional, default: true) - Whether Escape key closes the drawer
+- `snapPoints` (number[], optional) - Array of snap positions between 0-1, where 1 is fully open (e.g., `[0.25, 0.5, 0.9]`)
+- `activeSnapPoint` (number, bindable, optional) - Current active snap point value
+- `onSnapPointChange` (function, optional) - Callback fired when the drawer snaps to a different point
 
 ### DrawerOverlay
 

package/dist/components/Drawer.svelte

@@ -8,6 +8,9 @@
     onOpenChange = undefined,
     direction = "bottom",
     closeOnEscape = true,
+    snapPoints = undefined,
+    activeSnapPoint = $bindable(undefined),
+    onSnapPointChange = undefined,
     children,
   } = $props();
 
@@ -33,6 +36,14 @@
 
       overlayOpacity.set(1);
       drawerPosition.set(0);
+
+      if (
+        snapPoints &&
+        snapPoints.length > 0 &&
+        activeSnapPoint === undefined
+      ) {
+        activeSnapPoint = snapPoints[snapPoints.length - 1];
+      }
     } else if (visible) {
       overlayOpacity.set(0, { duration: 120 });
       drawerPosition.set(100, { duration: 180 });
@@ -86,6 +97,16 @@
     get direction() {
       return direction;
     },
+    get snapPoints() {
+      return snapPoints;
+    },
+    get activeSnapPoint() {
+      return activeSnapPoint;
+    },
+    setActiveSnapPoint(point: number) {
+      activeSnapPoint = point;
+      onSnapPointChange?.(point);
+    },
     closeDrawer,
   });
 </script>

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

@@ -3,7 +3,10 @@ declare const Drawer: import("svelte").Component<{
     onOpenChange?: any;
     direction?: string;
     closeOnEscape?: boolean;
+    snapPoints?: any;
+    activeSnapPoint?: any;
+    onSnapPointChange?: any;
     children: any;
-}, {}, "open">;
+}, {}, "open" | "activeSnapPoint">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

package/dist/components/DrawerContent.svelte

@@ -8,6 +8,9 @@
     drawerPosition: { current: number; set: (v: number, opts?: any) => void };
     direction: "bottom" | "top" | "left" | "right";
     closeDrawer: () => void;
+    snapPoints?: number[];
+    activeSnapPoint?: number;
+    setActiveSnapPoint?: (point: number) => void;
   };
 
   let {
@@ -24,8 +27,53 @@
   let startDragPos = 0;
   let dragging = false;
 
+  function snapPointToPosition(snapPoint: number): number {
+    // snapPoint is 0-1 where 1 = fully open (0% position)
+    // Convert: 1 -> 0%, 0.5 -> 50%, 0 -> 100%
+    return (1 - snapPoint) * 100;
+  }
+
+  function findNearestSnapPoint(currentPos: number): number {
+    if (!drawer.snapPoints || drawer.snapPoints.length === 0) {
+      return currentPos;
+    }
+
+    const currentSnapValue = 1 - currentPos / 100;
+    let nearest = drawer.snapPoints[0];
+    let minDiff = Math.abs(currentSnapValue - nearest);
+
+    for (const snapPoint of drawer.snapPoints) {
+      const diff = Math.abs(currentSnapValue - snapPoint);
+      if (diff < minDiff) {
+        minDiff = diff;
+        nearest = snapPoint;
+      }
+    }
+
+    return nearest;
+  }
+
   function getTransform(): string {
     const pos = drawer.drawerPosition.current;
+
+    if (
+      drawer.snapPoints &&
+      drawer.activeSnapPoint !== undefined &&
+      !dragging
+    ) {
+      const snapPos = snapPointToPosition(drawer.activeSnapPoint);
+      switch (drawer.direction) {
+        case "bottom":
+          return `translateY(${snapPos}%)`;
+        case "top":
+          return `translateY(-${snapPos}%)`;
+        case "left":
+          return `translateX(-${snapPos}%)`;
+        case "right":
+          return `translateX(${snapPos}%)`;
+      }
+    }
+
     switch (drawer.direction) {
       case "bottom":
         return `translateY(${pos}%)`;
@@ -40,10 +88,10 @@
 
   function onPointerDown(e: PointerEvent | TouchEvent) {
     const target = e.target as HTMLElement;
-    
+
     if (
-      target.closest('button, a, input, textarea, select') &&
-      !target.closest('[data-drawer-drag]')
+      target.closest("button, a, input, textarea, select") &&
+      !target.closest("[data-drawer-drag]")
     ) {
       return;
     }
@@ -101,15 +149,30 @@
 
   function onPointerUp() {
     if (!dragging) return;
-    
+
     dragging = false;
 
     const pos = drawer.drawerPosition.current;
 
-    if (pos > 30) {
-      drawer.closeDrawer();
+    if (drawer.snapPoints && drawer.snapPoints.length > 0) {
+      const nearestSnapPoint = findNearestSnapPoint(pos);
+      const snapPos = snapPointToPosition(nearestSnapPoint);
+
+      const lowestSnapPoint = Math.min(...drawer.snapPoints);
+      const lowestSnapPos = snapPointToPosition(lowestSnapPoint);
+
+      if (pos > lowestSnapPos + 30) {
+        drawer.closeDrawer();
+      } else {
+        drawer.drawerPosition.set(snapPos);
+        drawer.setActiveSnapPoint?.(nearestSnapPoint);
+      }
     } else {
-      drawer.drawerPosition.set(0);
+      if (pos > 30) {
+        drawer.closeDrawer();
+      } else {
+        drawer.drawerPosition.set(0);
+      }
     }
 
     window.removeEventListener("pointermove", onPointerMove);
@@ -180,4 +243,4 @@
   >
     {@render children()}
   </div>
-{/if}
+{/if}

package/dist/components/DrawerHandle.svelte

@@ -15,8 +15,8 @@
 
   const defaultClasses = $derived(
     isVertical
-      ? "mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300"
-      : "my-auto w-1.5 h-12 flex-shrink-0 rounded-full bg-gray-300"
+      ? "mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 cursor-grab active:cursor-grabbing"
+      : "my-auto w-1.5 h-12 flex-shrink-0 rounded-full bg-gray-300 cursor-grab active:cursor-grabbing"
   );
 
   const combinedClass = $derived(

package/dist/types.d.ts

@@ -3,6 +3,9 @@ export interface DrawerProps {
     onOpenChange?: (open: boolean) => void;
     direction?: "bottom" | "top" | "left" | "right";
     closeOnEscape?: boolean;
+    snapPoints?: number[];
+    activeSnapPoint?: number;
+    onSnapPointChange?: (snapPoint: number) => void;
 }
 export interface DrawerContentProps {
     class?: string;

package/package.json

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