@abhivarde/svelte-drawer 0.0.11 → 0.0.13

package/README.md

@@ -1,10 +1,14 @@
 # Svelte Drawer
 
+[![npm version](https://img.shields.io/npm/v/@abhivarde/svelte-drawer)](https://www.npmjs.com/package/@abhivarde/svelte-drawer)
+![GitHub Repo Views](https://gitviews.com/repo/AbhiVarde/svelte-drawer.svg)
+
 A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowalski/vaul).
 
 ## Features
 
-- ✅ Smooth animations using Svelte 5's Tween motion
+- ✅ Smooth animations and **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)
 - ✅ Nested drawers support

package/dist/components/DrawerHandle.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+
+  type DrawerContext = {
+    direction: "bottom" | "top" | "left" | "right";
+  };
+
+  let { class: className = "", ...restProps } = $props();
+
+  const drawer = getContext<DrawerContext>("drawer");
+
+  const isVertical = $derived(
+    drawer.direction === "bottom" || drawer.direction === "top"
+  );
+
+  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"
+  );
+
+  const combinedClass = $derived(
+    className ? `${defaultClasses} ${className}` : defaultClasses
+  );
+</script>
+
+<div
+  data-drawer-drag
+  class={combinedClass}
+  aria-hidden="true"
+  role="presentation"
+  {...restProps}
+></div>

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

@@ -0,0 +1,5 @@
+declare const DrawerHandle: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type DrawerHandle = ReturnType<typeof DrawerHandle>;
+export default DrawerHandle;

package/dist/index.d.ts

@@ -2,4 +2,5 @@ export { default as Drawer } from "./components/Drawer.svelte";
 export { default as DrawerContent } from "./components/DrawerContent.svelte";
 export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
 export { default as DrawerVariants } from "./components/DrawerVariants.svelte";
-export type { DrawerProps, DrawerContentProps, DrawerOverlayProps, } from "./types";
+export { default as DrawerHandle } from "./components/DrawerHandle.svelte";
+export type { DrawerProps, DrawerContentProps, DrawerOverlayProps, DrawerHandleProps, DrawerVariant, DrawerVariantsProps, } from "./types";

package/dist/index.js

@@ -2,3 +2,4 @@ export { default as Drawer } from "./components/Drawer.svelte";
 export { default as DrawerContent } from "./components/DrawerContent.svelte";
 export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
 export { default as DrawerVariants } from "./components/DrawerVariants.svelte";
+export { default as DrawerHandle } from "./components/DrawerHandle.svelte";

package/dist/types.d.ts

@@ -11,6 +11,9 @@ export interface DrawerContentProps {
 export interface DrawerOverlayProps {
     class?: string;
 }
+export interface DrawerHandleProps {
+    class?: string;
+}
 export type DrawerVariant = "default" | "sheet" | "dialog" | "minimal" | "sidebar";
 export interface DrawerVariantsProps {
     variant?: DrawerVariant;

package/package.json

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