@makolabs/ripple 0.0.1 → 0.0.4

package/dist/layout/tabs/tabs.js

@@ -0,0 +1,298 @@
+import { tv } from 'tailwind-variants';
+import { Color, Size } from '../../index.js';
+export const tabs = tv({
+    slots: {
+        base: 'w-full',
+        list: 'flex border-b border-default-200',
+        trigger: 'inline-flex items-center px-3 py-2 text-sm transition-all duration-200 ease-in-out cursor-pointer -mb-px border-b-2 border-transparent',
+        panel: 'mt-4 px-3'
+    },
+    variants: {
+        color: {
+            [Color.PRIMARY]: {},
+            [Color.SECONDARY]: {},
+            [Color.SUCCESS]: {},
+            [Color.WARNING]: {},
+            [Color.DANGER]: {},
+            [Color.INFO]: {},
+            [Color.DEFAULT]: {}
+        },
+        size: {
+            [Size.XS]: {
+                trigger: 'px-2 py-1 text-xs'
+            },
+            [Size.SM]: {
+                trigger: 'px-2 py-1 text-xs'
+            },
+            [Size.BASE]: {
+                trigger: 'px-3 py-2 text-sm'
+            },
+            [Size.LG]: {
+                trigger: 'px-4 py-2.5 text-base'
+            },
+            [Size.XL]: {
+                trigger: 'px-5 py-3 text-lg'
+            },
+            [Size.XXL]: {
+                trigger: 'px-6 py-4 text-xl'
+            }
+        },
+        variant: {
+            line: {},
+            pill: {
+                list: 'flex border-none gap-2 p-1',
+                trigger: 'inline-flex items-center px-3 py-2 text-sm transition-all duration-200 ease-in-out cursor-pointer rounded-full border-0'
+            }
+        },
+        selected: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        // LINE VARIANT - PRIMARY
+        {
+            variant: 'line',
+            color: Color.PRIMARY,
+            selected: true,
+            class: {
+                trigger: 'text-primary-600 border-b-2 border-primary-500'
+            }
+        },
+        {
+            variant: 'line',
+            color: Color.PRIMARY,
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-primary-500'
+            }
+        },
+        // LINE VARIANT - SECONDARY
+        {
+            variant: 'line',
+            color: Color.SECONDARY,
+            selected: true,
+            class: {
+                trigger: 'text-secondary-600 border-b-2 border-secondary-500'
+            }
+        },
+        {
+            variant: 'line',
+            color: Color.SECONDARY,
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-secondary-500'
+            }
+        },
+        // LINE VARIANT - SUCCESS
+        {
+            variant: 'line',
+            color: Color.SUCCESS,
+            selected: true,
+            class: {
+                trigger: 'text-success-600 border-b-2 border-success-500'
+            }
+        },
+        {
+            variant: 'line',
+            color: Color.SUCCESS,
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-success-500'
+            }
+        },
+        // LINE VARIANT - WARNING
+        {
+            variant: 'line',
+            color: Color.WARNING,
+            selected: true,
+            class: {
+                trigger: 'text-warning-600 border-b-2 border-warning-500'
+            }
+        },
+        {
+            variant: 'line',
+            color: Color.WARNING,
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-warning-500'
+            }
+        },
+        // LINE VARIANT - DANGER
+        {
+            variant: 'line',
+            color: Color.DANGER,
+            selected: true,
+            class: {
+                trigger: 'text-danger-600 border-b-2 border-danger-500'
+            }
+        },
+        {
+            variant: 'line',
+            color: Color.DANGER,
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-danger-500'
+            }
+        },
+        // LINE VARIANT - INFO
+        {
+            variant: 'line',
+            color: Color.INFO,
+            selected: true,
+            class: {
+                trigger: 'text-info-600 border-b-2 border-info-500'
+            }
+        },
+        {
+            variant: 'line',
+            color: Color.INFO,
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-info-500'
+            }
+        },
+        // LINE VARIANT - DEFAULT
+        {
+            variant: 'line',
+            color: Color.DEFAULT,
+            selected: true,
+            class: {
+                trigger: 'text-default-600 border-b-2 border-default-500'
+            }
+        },
+        {
+            variant: 'line',
+            color: Color.DEFAULT,
+            selected: false,
+            class: {
+                trigger: 'text-default-500 hover:text-default-700'
+            }
+        },
+        // PILL VARIANT - PRIMARY
+        {
+            variant: 'pill',
+            color: Color.PRIMARY,
+            selected: true,
+            class: {
+                trigger: 'bg-primary-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.PRIMARY,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - SECONDARY
+        {
+            variant: 'pill',
+            color: Color.SECONDARY,
+            selected: true,
+            class: {
+                trigger: 'bg-secondary-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.SECONDARY,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - SUCCESS
+        {
+            variant: 'pill',
+            color: Color.SUCCESS,
+            selected: true,
+            class: {
+                trigger: 'bg-success-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.SUCCESS,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - WARNING
+        {
+            variant: 'pill',
+            color: Color.WARNING,
+            selected: true,
+            class: {
+                trigger: 'bg-warning-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.WARNING,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - DANGER
+        {
+            variant: 'pill',
+            color: Color.DANGER,
+            selected: true,
+            class: {
+                trigger: 'bg-danger-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.DANGER,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - INFO
+        {
+            variant: 'pill',
+            color: Color.INFO,
+            selected: true,
+            class: {
+                trigger: 'bg-info-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.INFO,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        },
+        // PILL VARIANT - DEFAULT
+        {
+            variant: 'pill',
+            color: Color.DEFAULT,
+            selected: true,
+            class: {
+                trigger: 'bg-default-500 text-white'
+            }
+        },
+        {
+            variant: 'pill',
+            color: Color.DEFAULT,
+            selected: false,
+            class: {
+                trigger: 'text-default-600 hover:bg-default-100'
+            }
+        }
+    ],
+    defaultVariants: {
+        color: Color.PRIMARY,
+        size: 'base',
+        variant: 'line',
+        selected: false
+    }
+});

package/dist/modal/Modal.svelte

@@ -0,0 +1,207 @@
+<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';
+
+	let {
+		open = $bindable(false),
+		onclose: onClose = () => {},
+		title,
+		description,
+		position = 'center',
+		children,
+		header,
+		custom,
+		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));
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			onClose();
+		}
+	}
+
+	function handleEscapeKey(e: KeyboardEvent) {
+		if (e.key === 'Escape' && open) {
+			onClose();
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	}
+
+	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);
+				}
+			});
+		} else {
+			document.body.style.overflow = '';
+			if (previouslyFocusedElement) {
+				previouslyFocusedElement.focus();
+			}
+		}
+	});
+
+	onDestroy(() => {
+		if (browser && document.body.style.overflow === 'hidden') {
+			document.body.style.overflow = '';
+		}
+	});
+</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}
+	>
+		<!-- Backdrop -->
+		<button
+			class={backdropClass}
+			onclick={handleBackdropClick}
+			transition:fade={{ duration: 200 }}
+			aria-label="Close modal"
+		></button>
+
+		<!-- Modal content -->
+		<div
+			class={contentWrapperClass}
+			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>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}

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

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

package/dist/modal/modal.d.ts

@@ -0,0 +1,211 @@
+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;
+        };
+        base: {
+            contentWrapper: string;
+        };
+        lg: {
+            contentWrapper: string;
+        };
+        xl: {
+            contentWrapper: string;
+        };
+        '2xl': {
+            contentWrapper: string;
+        };
+    };
+    border: {
+        none: {
+            content: string;
+        };
+        default: {
+            content: string;
+        };
+        colored: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+    contentWrapper: string;
+    content: string;
+    header: string;
+    body: string;
+    title: string;
+    closeButton: 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;
+        };
+        xl: {
+            contentWrapper: string;
+        };
+        '2xl': {
+            contentWrapper: string;
+        };
+    };
+    border: {
+        none: {
+            content: string;
+        };
+        default: {
+            content: string;
+        };
+        colored: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+    contentWrapper: string;
+    content: string;
+    header: string;
+    body: string;
+    title: string;
+    closeButton: 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;
+        };
+        sm: {
+            contentWrapper: string;
+        };
+        base: {
+            contentWrapper: string;
+        };
+        lg: {
+            contentWrapper: string;
+        };
+        xl: {
+            contentWrapper: string;
+        };
+        '2xl': {
+            contentWrapper: string;
+        };
+    };
+    border: {
+        none: {
+            content: string;
+        };
+        default: {
+            content: string;
+        };
+        colored: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+    contentWrapper: string;
+    content: string;
+    header: string;
+    body: string;
+    title: string;
+    closeButton: string;
+}, undefined, unknown, unknown, undefined>>;