@makolabs/ripple 0.4.1-0 → 1.0.1

package/dist/layout/card/Card.svelte

@@ -14,11 +14,7 @@
 		bodyclass: bodyClass = ''
 	}: CardProps = $props();
 
-	const {
-		base,
-		title: titleSlot,
-		body: bodySlot
-	} = $derived(card({ color }));
+	const { base, title: titleSlot, body: bodySlot } = $derived(card({ color }));
 
 	const baseClass = $derived(cn(base(), className));
 	const titleClasses = $derived(cn(titleSlot(), titleClass));

package/dist/layout/card/metric-card.d.ts

@@ -1,21 +1,21 @@
 export declare const metricCard: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            value?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
-            progress?: import("tailwind-merge").ClassNameValue;
-            detail?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            value?: import("tailwind-variants").ClassValue;
+            progress?: import("tailwind-variants").ClassValue;
+            detail?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            value?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
-            progress?: import("tailwind-merge").ClassNameValue;
-            detail?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            value?: import("tailwind-variants").ClassValue;
+            progress?: import("tailwind-variants").ClassValue;
+            detail?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -26,12 +26,12 @@ export declare const metricCard: import("tailwind-variants").TVReturnType<{
     progress: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            value?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
-            progress?: import("tailwind-merge").ClassNameValue;
-            detail?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
+            value?: import("tailwind-variants").ClassValue;
+            progress?: import("tailwind-variants").ClassValue;
+            detail?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

package/dist/layout/table/Cells.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">
 	import type { StatusType, KeyType, DataRow } from './table.js';
+	import { formatTime } from '../../helper/date.js';
 
 	export { DateCell, Currency, Percentage, PhoneNumber, Email, Status, Time };
 
@@ -24,13 +25,6 @@
 		return match ? `(${match[1]}) ${match[2]}-${match[3]}` : String(phoneNumber);
 	}
 
-	function formatTime(time: string | number | Date): KeyType {
-		return new Date(time).toLocaleTimeString('en-US', {
-			hour: '2-digit',
-			minute: '2-digit'
-		});
-	}
-
 	function formatCurrency(value: number): KeyType {
 		return new Intl.NumberFormat('en-US', {
 			style: 'currency',

package/dist/layout/table/Cells.svelte.d.ts

@@ -1,5 +1,4 @@
 import type { KeyType, DataRow } from './table.js';
-export { DateCell, Currency, Percentage, PhoneNumber, Email, Status, Time };
 declare const DateCell: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
 declare const Currency: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
 declare const Percentage: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
@@ -7,6 +6,7 @@ declare const PhoneNumber: (row: DataRow, key: KeyType) => ReturnType<import("sv
 declare const Email: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
 declare const Status: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
 declare const Time: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+export { DateCell, Currency, Percentage, PhoneNumber, Email, Status, Time };
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/modal/Modal.svelte

@@ -1,207 +1,107 @@
 <script lang="ts">
-	import { onMount, onDestroy, tick } from 'svelte';
-	import { browser } from '$app/environment';
 	import { fade, scale } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
-	import { cn } from '../helper/cls.js';
-	import { modal } from './modal.js';
-	import type { MakeModalProps } from '../index.js';
-
+	import { modal, type ModalProps } from './modal.js';
+	
 	let {
 		open = $bindable(false),
-		onclose: onClose = () => {},
+		onclose = () => {},
 		title,
 		description,
-		position = 'center',
-		children,
-		header,
-		custom,
+		size,
+		hideCloseButton = false,
 		class: className = '',
-		backdropclass: backdropClassName = '',
-		contentclass: contentClassName = '',
-		headerclass: headerClassName = '',
-		titleclass: titleClass = '',
-		bodyclass: bodyClassName = ''
-	}: MakeModalProps = $props();
-
-	let modalElement: HTMLDivElement | undefined = $state();
-
-	const {
-		base,
-		backdrop,
-		contentWrapper,
-		content,
-		header: headerVClass,
-		title: titleVClass,
-		closeButton,
-		body
-	} = $derived(
-		modal({
-			open,
-			position
-		})
-	);
-
-	const closeButtonClasses = $derived(closeButton());
-	const contentItemClass = $derived(content());
-	const baseClass = $derived(cn(base(), className));
-	const backdropClass = $derived(cn(backdrop(), backdropClassName));
-	const contentWrapperClass = $derived(cn(contentWrapper(), contentClassName));
-	const headerClass = $derived(cn(headerVClass(), headerClassName));
-	const titleClasses = $derived(cn(titleVClass(), titleClass));
-	const bodyClasses = $derived(cn(body(), bodyClassName));
+		children,
+		footer
+	}: ModalProps = $props();
 
-	function handleBackdropClick(e: MouseEvent) {
-		if (e.target === e.currentTarget) {
-			onClose();
-		}
+	const styles = $derived(modal({ size }));
+	
+	function handleBackdropClick() {
+		onclose();
 	}
-
-	function handleEscapeKey(e: KeyboardEvent) {
+	
+	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Escape' && open) {
-			onClose();
-			e.preventDefault();
-			e.stopPropagation();
+			onclose();
 		}
 	}
-
-	function handleCloseClick() {
-		onClose();
-	}
-
-	// Focus trap functionality
-	let previouslyFocusedElement: HTMLElement | null = null;
-
-	function trapFocus(element: HTMLElement) {
-		const focusableElements = element.querySelectorAll(
-			'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
-		);
-
-		if (focusableElements.length === 0) return;
-
-		const firstElement = focusableElements[0] as HTMLElement;
-		const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
-
-		function handleTabKey(e: KeyboardEvent) {
-			if (e.key !== 'Tab') return;
-
-			if (e.shiftKey) {
-				if (document.activeElement === firstElement) {
-					lastElement.focus();
-					e.preventDefault();
-				}
-			} else {
-				if (document.activeElement === lastElement) {
-					firstElement.focus();
-					e.preventDefault();
-				}
-			}
-		}
-
-		element.addEventListener('keydown', handleTabKey);
-		firstElement.focus();
-
-		return () => {
-			element.removeEventListener('keydown', handleTabKey);
-		};
-	}
-
-	onMount(() => {
-		document.addEventListener('keydown', handleEscapeKey);
-		return () => {
-			document.removeEventListener('keydown', handleEscapeKey);
-		};
-	});
-
+	
 	$effect(() => {
-		if (!browser) return;
 		if (open) {
-			previouslyFocusedElement = document.activeElement as HTMLElement;
 			document.body.style.overflow = 'hidden';
-
-			tick().then(() => {
-				if (modalElement) {
-					trapFocus(modalElement);
-				}
-			});
+			document.addEventListener('keydown', handleKeydown);
 		} else {
 			document.body.style.overflow = '';
-			if (previouslyFocusedElement) {
-				previouslyFocusedElement.focus();
-			}
+			document.removeEventListener('keydown', handleKeydown);
 		}
-	});
-
-	onDestroy(() => {
-		if (browser && document.body.style.overflow === 'hidden') {
+		
+		return () => {
 			document.body.style.overflow = '';
-		}
+			document.removeEventListener('keydown', handleKeydown);
+		};
 	});
 </script>
 
-{#if browser}
-	<div
-		class={baseClass}
-		bind:this={modalElement}
-		role="dialog"
-		aria-modal="true"
-		aria-labelledby={title ? 'modal-title' : undefined}
-		aria-describedby={description ? 'modal-description' : undefined}
-	>
+{#if open}
+	<div class={styles.base()} role="dialog" aria-modal="true">
 		<!-- Backdrop -->
-		<button
-			class={backdropClass}
+		<div 
+			class={styles.backdrop()}
 			onclick={handleBackdropClick}
 			transition:fade={{ duration: 200 }}
-			aria-label="Close modal"
-		></button>
-
-		<!-- Modal content -->
-		<div
-			class={contentWrapperClass}
+			role="presentation"></div>
+		
+		<!-- Modal Container -->
+		<div 
+			class="{styles.container()} {className}"
 			transition:scale={{ duration: 200, easing: quintOut, start: 0.95 }}
 		>
-			{#if custom}
-				{@render custom()}
-			{:else}
-				<div class={contentItemClass}>
-					{#if header || title}
-						<div class={headerClass}>
-							{#if header}
-								{@render header()}
-							{:else}
-								{#if title}
-									<h3 id="modal-title" class={titleClasses}>{title}</h3>
-								{/if}
-								<button
-									type="button"
-									class={closeButtonClasses}
-									onclick={handleCloseClick}
-									aria-label="Close modal"
-								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										width="12"
-										height="12"
-										viewBox="0 0 12 12"
-									>
-										<path
-											fill="currentColor"
-											d="m1.897 2.054l.073-.084a.75.75 0 0 1 .976-.073l.084.073L6 4.939l2.97-2.97a.75.75 0 1 1 1.06 1.061L7.061 6l2.97 2.97a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L6 7.061l-2.97 2.97A.75.75 0 1 1 1.97 8.97L4.939 6l-2.97-2.97a.75.75 0 0 1-.072-.976l.073-.084z"
-										/>
-									</svg>
-								</button>
-							{/if}
-						</div>
-					{/if}
-
-					{#if children}
-						<div class={bodyClasses}>
-							{@render children()}
-						</div>
+			<!-- Header -->
+			{#if title || !hideCloseButton}
+				<header class={styles.header()}>
+					<div class="flex-1">
+						{#if title}
+							<h2 class={styles.title()}>{title}</h2>
+						{/if}
+						{#if description}
+							<p class={styles.description()}>{description}</p>
+						{/if}
+					</div>
+					
+					{#if !hideCloseButton}
+						<button
+							type="button"
+							class={styles.close()}
+							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}
+				</header>
+			{/if}
+			
+			<!-- Body -->
+			{#if children}
+				<div class={styles.body()}>
+					{@render children()}
 				</div>
 			{/if}
+			
+			<!-- Footer -->
+			{#if footer}
+				<footer class={styles.footer()}>
+					{@render footer()}
+				</footer>
+			{/if}
 		</div>
 	</div>
-{/if}
+{/if}

package/dist/modal/Modal.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { MakeModalProps } from '../index.js';
-declare const Modal: import("svelte").Component<MakeModalProps, {}, "open">;
+import { type ModalProps } from './modal.js';
+declare const Modal: import("svelte").Component<ModalProps, {}, "open">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/modal/modal.d.ts

@@ -1,211 +1,107 @@
+import { Size, type VariantSizes } from '../index.js';
+import type { Snippet } from 'svelte';
 export declare const modal: import("tailwind-variants").TVReturnType<{
-    open: {
-        true: {
-            base: string;
-            backdrop: string;
-            contentWrapper: string;
-        };
-        false: {
-            base: string;
-            backdrop: string;
-            contentWrapper: string;
-        };
-    };
-    position: {
-        center: {
-            contentWrapper: string;
-        };
-        top: {
-            contentWrapper: string;
-        };
-        bottom: {
-            contentWrapper: string;
-        };
-        left: {
-            contentWrapper: string;
-        };
-        right: {
-            contentWrapper: string;
-        };
-    };
     size: {
-        xs: {
-            contentWrapper: string;
-        };
-        sm: {
-            contentWrapper: string;
+        [Size.XS]: {
+            container: string;
         };
-        base: {
-            contentWrapper: string;
+        [Size.SM]: {
+            container: string;
         };
-        lg: {
-            contentWrapper: string;
+        [Size.BASE]: {
+            container: string;
         };
-        xl: {
-            contentWrapper: string;
+        [Size.LG]: {
+            container: string;
         };
-        '2xl': {
-            contentWrapper: string;
+        [Size.XL]: {
+            container: string;
         };
-    };
-    border: {
-        none: {
-            content: string;
-        };
-        default: {
-            content: string;
-        };
-        colored: {
-            content: string;
+        [Size.XXL]: {
+            container: string;
         };
     };
 }, {
     base: string;
     backdrop: string;
-    contentWrapper: string;
-    content: string;
+    container: string;
     header: string;
     body: string;
+    footer: string;
     title: string;
-    closeButton: string;
+    description: string;
+    close: string;
 }, undefined, {
-    open: {
-        true: {
-            base: string;
-            backdrop: string;
-            contentWrapper: string;
-        };
-        false: {
-            base: string;
-            backdrop: string;
-            contentWrapper: string;
-        };
-    };
-    position: {
-        center: {
-            contentWrapper: string;
-        };
-        top: {
-            contentWrapper: string;
-        };
-        bottom: {
-            contentWrapper: string;
-        };
-        left: {
-            contentWrapper: string;
-        };
-        right: {
-            contentWrapper: string;
-        };
-    };
     size: {
-        xs: {
-            contentWrapper: string;
-        };
-        sm: {
-            contentWrapper: string;
-        };
-        base: {
-            contentWrapper: string;
-        };
-        lg: {
-            contentWrapper: string;
+        [Size.XS]: {
+            container: string;
         };
-        xl: {
-            contentWrapper: string;
+        [Size.SM]: {
+            container: string;
         };
-        '2xl': {
-            contentWrapper: string;
+        [Size.BASE]: {
+            container: string;
         };
-    };
-    border: {
-        none: {
-            content: string;
+        [Size.LG]: {
+            container: string;
         };
-        default: {
-            content: string;
+        [Size.XL]: {
+            container: string;
         };
-        colored: {
-            content: string;
+        [Size.XXL]: {
+            container: string;
         };
     };
 }, {
     base: string;
     backdrop: string;
-    contentWrapper: string;
-    content: string;
+    container: string;
     header: string;
     body: string;
+    footer: string;
     title: string;
-    closeButton: string;
+    description: string;
+    close: string;
 }, import("tailwind-variants").TVReturnType<{
-    open: {
-        true: {
-            base: string;
-            backdrop: string;
-            contentWrapper: string;
-        };
-        false: {
-            base: string;
-            backdrop: string;
-            contentWrapper: string;
-        };
-    };
-    position: {
-        center: {
-            contentWrapper: string;
-        };
-        top: {
-            contentWrapper: string;
-        };
-        bottom: {
-            contentWrapper: string;
-        };
-        left: {
-            contentWrapper: string;
-        };
-        right: {
-            contentWrapper: string;
-        };
-    };
     size: {
-        xs: {
-            contentWrapper: string;
+        [Size.XS]: {
+            container: string;
         };
-        sm: {
-            contentWrapper: string;
+        [Size.SM]: {
+            container: string;
         };
-        base: {
-            contentWrapper: string;
+        [Size.BASE]: {
+            container: string;
         };
-        lg: {
-            contentWrapper: string;
-        };
-        xl: {
-            contentWrapper: string;
-        };
-        '2xl': {
-            contentWrapper: string;
-        };
-    };
-    border: {
-        none: {
-            content: string;
+        [Size.LG]: {
+            container: string;
         };
-        default: {
-            content: string;
+        [Size.XL]: {
+            container: string;
         };
-        colored: {
-            content: string;
+        [Size.XXL]: {
+            container: string;
         };
     };
 }, {
     base: string;
     backdrop: string;
-    contentWrapper: string;
-    content: string;
+    container: string;
     header: string;
     body: string;
+    footer: string;
     title: string;
-    closeButton: string;
+    description: string;
+    close: string;
 }, undefined, unknown, unknown, undefined>>;
+export type ModalProps = {
+    open?: boolean;
+    onclose?: () => void;
+    title?: string;
+    description?: string;
+    size?: VariantSizes;
+    hideCloseButton?: boolean;
+    class?: string;
+    children?: Snippet;
+    footer?: Snippet;
+};