@makolabs/ripple 1.0.5 → 1.0.7

package/dist/modal/Modal.svelte

@@ -2,6 +2,7 @@
 	import { fade, scale } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 	import { modal, type ModalProps } from './modal.js';
+	import { cn } from 'tailwind-variants';
 	
 	let {
 		open = $bindable(false),
@@ -11,7 +12,12 @@
 		size,
 		hideCloseButton = false,
 		class: className = '',
-		contentClass = '',
+		contentclass: contentClassName = '',
+		bodyclass: bodyClassName = '',
+		titleclass: titleClassName = '',
+		headerclass: headerClassName = '',
+		backdropclass: backdropClassName = '',
+		footerclass: footerClassName = '',
 		children,
 		footer
 	}: ModalProps = $props();
@@ -42,28 +48,37 @@
 			document.removeEventListener('keydown', handleKeydown);
 		};
 	});
+
+	const computedClassName = $derived(cn(styles.base(), className));
+	const computedBackdropClassName = $derived(cn(styles.backdrop(), backdropClassName));
+	const computedContentClassName = $derived(cn(styles.container(), contentClassName));
+	const computedHeaderClassName = $derived(cn(styles.header(), headerClassName));
+	const computedBodyClassName = $derived(cn(styles.body(), bodyClassName));
+	const computedTitleClassName = $derived(cn(styles.title(), titleClassName));
+	const computedCloseClassName = $derived(cn(styles.close(), ''));
+	const computedFooterClassName = $derived(cn(styles.footer(), 'mt-auto', footerClassName));
 </script>
 
 {#if open}
-	<div class={styles.base()} role="dialog" aria-modal="true">
+	<div class={computedClassName} role="dialog" aria-modal="true">
 		<!-- Backdrop -->
 		<div 
-			class={styles.backdrop()}
+			class={computedBackdropClassName}
 			onclick={handleBackdropClick}
 			transition:fade={{ duration: 200 }}
 			role="presentation"></div>
 		
 		<!-- Modal Container -->
 		<div 
-			class="{styles.container()} {contentClass || className}"
+			class={computedContentClassName}
 			transition:scale={{ duration: 200, easing: quintOut, start: 0.95 }}
 		>
 			<!-- Header -->
 			{#if title || !hideCloseButton}
-				<header class={styles.header()}>
+				<header class={computedHeaderClassName}>
 					<div class="flex-1">
 						{#if title}
-							<h2 class={styles.title()}>{title}</h2>
+							<h2 class={computedTitleClassName}>{title}</h2>
 						{/if}
 						{#if description}
 							<p class={styles.description()}>{description}</p>
@@ -73,7 +88,7 @@
 					{#if !hideCloseButton}
 						<button
 							type="button"
-							class={styles.close()}
+							class={computedCloseClassName}
 							onclick={onclose}
 							aria-label="Close"
 						>
@@ -92,14 +107,14 @@
 			
 			<!-- Body -->
 			{#if children}
-				<div class={styles.body()}>
+				<div class={computedBodyClassName}>
 					{@render children()}
 				</div>
 			{/if}
 			
 			<!-- Footer -->
 			{#if footer}
-				<footer class={styles.footer()}>
+				<footer class={computedFooterClassName}>
 					{@render footer()}
 				</footer>
 			{/if}

package/dist/modal/modal.d.ts

@@ -102,7 +102,12 @@ export type ModalProps = {
     size?: VariantSizes;
     hideCloseButton?: boolean;
     class?: string;
-    contentClass?: string;
+    contentclass?: string;
+    bodyclass?: string;
+    titleclass?: string;
+    headerclass?: string;
+    backdropclass?: string;
+    footerclass?: string;
     children?: Snippet;
     footer?: Snippet;
 };

package/package.json

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