@makolabs/ripple 1.0.9 → 1.1.1

package/dist/forms/DateRange.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
 	import type { DateRangeProps } from '../index.js';
+	import Portal from '../utils/Portal.svelte';
 
 	let {
 		startDate = $bindable(),
@@ -21,13 +22,17 @@
 	let isOpen = $state(false);
 	let hoveredDate = $state<Date | null>(null);
 	let datePickerRef = $state<HTMLDivElement | null>(null);
+	let calendarRef = $state<HTMLDivElement | null>(null);
 
 	let viewMode = $state<'days' | 'months' | 'years'>('days');
 	let viewDate = $state(new Date());
 
 	const handleOutsideClick = (event: MouseEvent) => {
-		if (isOpen && datePickerRef && !datePickerRef.contains(event.target as Node)) {
-			isOpen = false;
+		if (isOpen && datePickerRef && calendarRef) {
+			const target = event.target as Node;
+			if (!datePickerRef.contains(target) && !calendarRef.contains(target)) {
+				isOpen = false;
+			}
 		}
 	};
 
@@ -290,9 +295,11 @@
 	</div>
 
 	{#if isOpen}
-		<div
-			class="ring-opacity-5 absolute z-10 mt-1 w-full origin-top-left rounded-md bg-white p-4 shadow-lg ring-1 ring-black focus:outline-none"
-		>
+		<Portal target={datePickerRef}>
+			<div
+				bind:this={calendarRef}
+				class="ring-opacity-5 absolute z-10 mt-1 w-full origin-top-left rounded-md bg-white p-4 shadow-lg ring-1 ring-default-300 focus:outline-none"
+			>
 			<div class="mb-2 flex items-center justify-between">
 				{#if viewMode === 'days'}
 					<button
@@ -490,6 +497,7 @@
 					</div>
 				</div>
 			{/if}
-		</div>
+			</div>
+		</Portal>
 	{/if}
 </div>

package/dist/modal/Modal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { fade, scale } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
+	import { cn } from '../helper/cls.js';
 	import { modal, type ModalProps } from './modal.js';
 	
 	let {
@@ -21,6 +22,21 @@
 	}: ModalProps = $props();
 
 	const styles = $derived(modal({ size }));
+
+	const baseClass = $derived(cn(styles.base(), className));
+	const backdropClass = $derived(cn(styles.backdrop(), backdropClassName));
+	const containerClass = $derived(cn(styles.container(), contentClassName));
+	const headerClass = $derived(cn(styles.header(), headerClassName));
+	const titleClass = $derived(cn(styles.title(), titleClassName));
+	const bodyClass = $derived(cn(
+		'flex-1 px-6 overflow-y-auto',
+		// Adjust top padding based on header presence
+		title || description ? 'py-4' : 'pt-6 pb-4',
+		bodyClassName
+	));
+	const footerClass = $derived(cn(styles.footer(), ''));
+	const closeClass = $derived(cn(styles.close(), ''));
+	const descriptionClass = $derived(cn(styles.description(), ''));
 	
 	function handleBackdropClick() {
 		onclose();
@@ -49,35 +65,35 @@
 </script>
 
 {#if open}
-	<div class="{styles.base()} {className}" role="dialog" aria-modal="true">
+	<div class={baseClass} role="dialog" aria-modal="true">
 		<!-- Backdrop -->
 		<div 
-			class="{styles.backdrop()} {backdropClassName}"
+			class={backdropClass}
 			onclick={handleBackdropClick}
 			transition:fade={{ duration: 200 }}
 			role="presentation"></div>
 		
 		<!-- Modal Container -->
 		<div 
-			class="{styles.container()} {contentClassName}"
+			class={containerClass}
 			transition:scale={{ duration: 200, easing: quintOut, start: 0.95 }}
 		>
 			<!-- Header -->
-			{#if title || !hideCloseButton}
-				<header class="{styles.header()} {headerClassName}">
+			{#if title || description}
+				<header class={headerClass}>
 					<div class="flex-1">
 						{#if title}
-							<h2 class="{styles.title()} {titleClassName}">{title}</h2>
+							<h2 class={titleClass}>{title}</h2>
 						{/if}
 						{#if description}
-							<p class={styles.description()}>{description}</p>
+							<p class={descriptionClass}>{description}</p>
 						{/if}
 					</div>
 					
 					{#if !hideCloseButton}
 						<button
 							type="button"
-							class={styles.close()}
+							class={closeClass}
 							onclick={onclose}
 							aria-label="Close"
 						>
@@ -94,16 +110,35 @@
 				</header>
 			{/if}
 			
+			<!-- Close button only (positioned absolutely when no header) -->
+			{#if !title && !description && !hideCloseButton}
+				<button
+					type="button"
+					class="absolute top-4 right-4 p-2 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors z-10"
+					onclick={onclose}
+					aria-label="Close"
+				>
+					<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+						<path 
+							d="M15 5L5 15M5 5L15 15" 
+							stroke="currentColor" 
+							stroke-width="2" 
+							stroke-linecap="round"
+						/>
+					</svg>
+				</button>
+			{/if}
+			
 			<!-- Body -->
 			{#if children}
-				<div class="{styles.body()} {bodyClassName}">
+				<div class={bodyClass}>
 					{@render children()}
 				</div>
 			{/if}
 			
 			<!-- Footer -->
 			{#if footer}
-				<footer class={styles.footer()}>
+				<footer class={footerClass}>
 					{@render footer()}
 				</footer>
 			{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "1.0.9",
+	"version": "1.1.1",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {