@abhivarde/svelte-drawer 0.0.4 → 0.0.6

package/README.md

@@ -4,8 +4,9 @@ A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowal
 
 ## Features
 
-- ✅ Smooth animations using Svelte 5's Spring motion
+- ✅ Smooth animations using Svelte 5's Tween motion
 - ✅ Multiple directions (bottom, top, left, right)
+- ✅ Prebuilt variants (default, sheet, dialog, minimal, sidebar)
 - ✅ Nested drawers support
 - ✅ Scrollable content
 - ✅ Keyboard shortcuts (Escape to close, Tab navigation)
@@ -111,6 +112,59 @@ npm install @abhivarde/svelte-drawer
 </Drawer>
 ```
 
+### Using Variants
+
+```svelte
+<script>
+	import { Drawer, DrawerOverlay, DrawerVariants } from '@abhivarde/svelte-drawer';
+
+	let open = $state(false);
+</script>
+
+<!-- Sheet variant (iOS-style bottom sheet) -->
+<Drawer bind:open>
+	<DrawerOverlay class="fixed inset-0 bg-black/40" />
+	<DrawerVariants variant="sheet">
+		<div class="p-6">
+			<h2>iOS-style Sheet</h2>
+			<p>Clean and modern bottom sheet design</p>
+		</div>
+	</DrawerVariants>
+</Drawer>
+
+<!-- Dialog variant (center modal) -->
+<Drawer bind:open>
+	<DrawerOverlay class="fixed inset-0 bg-black/40" />
+	<DrawerVariants variant="dialog">
+		<div class="p-6">
+			<h2>Dialog Style</h2>
+			<p>Center-positioned modal dialog</p>
+		</div>
+	</DrawerVariants>
+</Drawer>
+
+<!-- Sidebar variant (navigation drawer) -->
+<Drawer bind:open direction="right">
+	<DrawerOverlay class="fixed inset-0 bg-black/40" />
+	<DrawerVariants variant="sidebar">
+		<div class="p-6">
+			<h2>Sidebar Navigation</h2>
+			<p>Side navigation drawer</p>
+		</div>
+	</DrawerVariants>
+</Drawer>
+```
+
+## Variants
+
+Available variants for `DrawerVariants` component:
+
+- `default` - Standard bottom drawer with gray background
+- `sheet` - iOS-style bottom sheet (white, rounded, 85vh height)
+- `dialog` - Center modal dialog style
+- `minimal` - Simple bottom drawer without extra styling
+- `sidebar` - Side navigation drawer (full height)
+
 ## Keyboard Shortcuts
 
 - **Escape** - Close the drawer (can be disabled with `closeOnEscape={false}`)
@@ -147,6 +201,16 @@ Content container for the drawer.
 - `class` (string, optional) - CSS classes for styling
 - `trapFocus` (boolean, optional, default: true) - Whether to trap focus inside drawer
 
+### DrawerVariants
+
+Pre-styled drawer content with built-in variants.
+
+**Props:**
+
+- `variant` ('default' | 'sheet' | 'dialog' | 'minimal' | 'sidebar', default: 'default') - Preset style variant
+- `class` (string, optional) - Additional CSS classes for styling
+- `trapFocus` (boolean, optional, default: true) - Whether to trap focus inside drawer
+
 ## Demo
 
 Visit [drawer.abhivarde.in](https://drawer.abhivarde.in) to see live examples.

package/dist/components/DrawerVariants.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import DrawerContent from "./DrawerContent.svelte";
+
+  type Variant = "default" | "sheet" | "dialog" | "minimal" | "sidebar";
+
+  let {
+    variant = "default",
+    class: className = "",
+    children,
+    ...restProps
+  }: {
+    variant?: Variant;
+    class?: string;
+    children?: any;
+    [key: string]: any;
+  } = $props();
+
+  const variantStyles: Record<Variant, string> = {
+    default:
+      "bg-gray-100 flex flex-col rounded-t-[10px] mt-24 h-fit fixed bottom-0 left-0 right-0 outline-none",
+    sheet:
+      "bg-white flex flex-col rounded-t-3xl h-[85vh] fixed bottom-0 left-0 right-0 outline-none shadow-2xl",
+    dialog:
+      "bg-white flex flex-col rounded-lg h-fit max-h-[90vh] fixed inset-0 m-auto max-w-lg outline-none shadow-xl",
+    minimal:
+      "bg-white flex flex-col h-fit fixed bottom-0 left-0 right-0 outline-none",
+    sidebar:
+      "bg-white h-full w-full max-w-sm fixed top-0 bottom-0 outline-none shadow-2xl",
+  };
+
+  const combinedClass = $derived(
+    `${variantStyles[variant]} ${className}`.trim()
+  );
+</script>
+
+<DrawerContent class={combinedClass} {...restProps}>
+  {@render children?.()}
+</DrawerContent>

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

@@ -0,0 +1,10 @@
+type Variant = "default" | "sheet" | "dialog" | "minimal" | "sidebar";
+type $$ComponentProps = {
+    variant?: Variant;
+    class?: string;
+    children?: any;
+    [key: string]: any;
+};
+declare const DrawerVariants: import("svelte").Component<$$ComponentProps, {}, "">;
+type DrawerVariants = ReturnType<typeof DrawerVariants>;
+export default DrawerVariants;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Drawer } from "./components/Drawer.svelte";
-export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
 export { default as DrawerContent } from "./components/DrawerContent.svelte";
-export * from "./types";
+export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
+export { default as DrawerVariants } from "./components/DrawerVariants.svelte";
+export type { DrawerProps, DrawerContentProps, DrawerOverlayProps, } from "./types";

package/dist/index.js

@@ -1,4 +1,4 @@
 export { default as Drawer } from "./components/Drawer.svelte";
-export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
 export { default as DrawerContent } from "./components/DrawerContent.svelte";
-export * from "./types";
+export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
+export { default as DrawerVariants } from "./components/DrawerVariants.svelte";

package/dist/types.d.ts

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

package/package.json

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