@makolabs/ripple 1.7.11 → 1.9.0

package/dist/layout/table/table-types.d.ts

@@ -0,0 +1,82 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+export type DataRow = Record<string, any>;
+export type KeyType = keyof DataRow;
+export type StatusType = 'active' | 'inactive' | 'pending' | 'error' | 'default';
+export type TableColumn<T extends DataRow = any> = {
+    key: KeyType;
+    header: string;
+    cell?: Snippet<[row: T, key: KeyType, index?: number]>;
+    sortable?: boolean;
+    sortKey?: string;
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+    class?: ClassValue;
+};
+export type SortDirection = 'asc' | 'desc' | null;
+export type SortState = {
+    column: string | null;
+    direction: SortDirection;
+};
+export type TableProps<T extends DataRow = any> = {
+    data: T[];
+    columns: TableColumn<T>[];
+    bordered?: boolean;
+    striped?: boolean;
+    pageSize?: number;
+    currentPage?: number;
+    totalItems?: number;
+    selectable?: boolean;
+    selected?: T[];
+    class?: ClassValue;
+    /** @deprecated Use wrapperClass instead */
+    wrapperclass?: ClassValue;
+    wrapperClass?: ClassValue;
+    /** @deprecated Use tableClass instead */
+    tableclass?: ClassValue;
+    tableClass?: ClassValue;
+    /** @deprecated Use theadClass instead */
+    theadclass?: ClassValue;
+    theadClass?: ClassValue;
+    /** @deprecated Use tbodyClass instead */
+    tbodyclass?: ClassValue;
+    tbodyClass?: ClassValue;
+    /** @deprecated Use trClass instead */
+    trclass?: ClassValue;
+    trClass?: ClassValue;
+    /** @deprecated Use thClass instead */
+    thclass?: ClassValue;
+    thClass?: ClassValue;
+    /** @deprecated Use tdClass instead */
+    tdclass?: ClassValue;
+    tdClass?: ClassValue;
+    /** @deprecated Use footerClass instead */
+    footerclass?: ClassValue;
+    footerClass?: ClassValue;
+    /** @deprecated Use paginationClass instead */
+    paginationclass?: ClassValue;
+    paginationClass?: ClassValue;
+    onrowclick?: (row: T, index: number) => void;
+    onsort?: (sortState: SortState) => void;
+    onselect?: (selected: T[]) => void;
+    onpagechange?: (page: number) => void;
+    /** @deprecated Use rowClass instead */
+    rowclass?: (row: T, index: number) => ClassValue;
+    rowClass?: (row: T, index: number) => ClassValue;
+    loading?: boolean;
+    expandedContent?: Snippet<[T]>;
+    pagination?: boolean;
+    showPagination?: boolean;
+    showPageSize?: boolean;
+    pageSizeOptions?: number[];
+    onpagesizechange?: (pageSize: number) => void;
+    paginationPosition?: 'top' | 'bottom' | 'both';
+    paginationTemplate?: 'simple' | 'full';
+    title?: string;
+    subtitle?: string;
+    headerActions?: Snippet;
+    selectAllScope?: 'page' | 'all';
+    rowKey?: string;
+    expandable?: boolean;
+    testId?: string;
+};

package/dist/layout/table/table-types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,3 @@
-import { Color } from '../../variants.js';
 export declare const table: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
@@ -27,32 +26,32 @@ export declare const table: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        [Color.PRIMARY]: {
+        default: {
             th: string;
-            tr: string;
         };
-        [Color.SECONDARY]: {
+        primary: {
             th: string;
             tr: string;
         };
-        [Color.INFO]: {
+        secondary: {
             th: string;
             tr: string;
         };
-        [Color.SUCCESS]: {
+        info: {
             th: string;
             tr: string;
         };
-        [Color.WARNING]: {
+        success: {
             th: string;
             tr: string;
         };
-        [Color.DANGER]: {
+        warning: {
             th: string;
             tr: string;
         };
-        default: {
+        danger: {
             th: string;
+            tr: string;
         };
     };
     bordered: {
@@ -112,32 +111,32 @@ export declare const table: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        [Color.PRIMARY]: {
+        default: {
             th: string;
-            tr: string;
         };
-        [Color.SECONDARY]: {
+        primary: {
             th: string;
             tr: string;
         };
-        [Color.INFO]: {
+        secondary: {
             th: string;
             tr: string;
         };
-        [Color.SUCCESS]: {
+        info: {
             th: string;
             tr: string;
         };
-        [Color.WARNING]: {
+        success: {
             th: string;
             tr: string;
         };
-        [Color.DANGER]: {
+        warning: {
             th: string;
             tr: string;
         };
-        default: {
+        danger: {
             th: string;
+            tr: string;
         };
     };
     bordered: {
@@ -197,32 +196,32 @@ export declare const table: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        [Color.PRIMARY]: {
+        default: {
             th: string;
-            tr: string;
         };
-        [Color.SECONDARY]: {
+        primary: {
             th: string;
             tr: string;
         };
-        [Color.INFO]: {
+        secondary: {
             th: string;
             tr: string;
         };
-        [Color.SUCCESS]: {
+        info: {
             th: string;
             tr: string;
         };
-        [Color.WARNING]: {
+        success: {
             th: string;
             tr: string;
         };
-        [Color.DANGER]: {
+        warning: {
             th: string;
             tr: string;
         };
-        default: {
+        danger: {
             th: string;
+            tr: string;
         };
     };
     bordered: {

package/dist/layout/tabs/Tab.svelte

@@ -12,7 +12,8 @@
 		color = Color.PRIMARY,
 		size = Size.BASE,
 		onclick = () => {},
-		variant = 'line'
+		variant = 'line',
+		testId
 	}: TabProps = $props();
 
 	function handleClick(event: Event & { currentTarget: EventTarget & HTMLButtonElement }) {
@@ -43,6 +44,7 @@
 	id={`tab-${value}`}
 	aria-controls={`panel-${value}`}
 	aria-selected={selected ? 'true' : 'false'}
+	data-testid={testId}
 	onclick={handleClick}
 	onkeydown={(e) => {
 		if (e.key === 'Enter' || e.key === ' ') {

package/dist/layout/tabs/TabGroup.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import Tab from './Tab.svelte';
 	import { tabs } from './tabs.js';
 	import type { TabsGroupProps } from '../../index.js';
@@ -16,7 +17,8 @@
 		listClass = '',
 		panelClass = '',
 		onchange = () => {},
-		children
+		children,
+		testId
 	}: TabsGroupProps = $props();
 
 	const { base, list, panel } = $derived(
@@ -40,8 +42,8 @@
 </script>
 
 <div class={baseClass}>
-	<div class={listClass_} role="tablist">
-		{#each tabItems as tab (tab.value)}
+	<div class={listClass_} role="tablist" data-testid={buildTestId('tabgroup', 'list', testId)}>
+		{#each tabItems as tab, index (tab.value)}
 			<Tab
 				value={tab.value}
 				label={tab.label}
@@ -51,12 +53,13 @@
 				{color}
 				{size}
 				{variant}
+				testId={buildTestId('tabgroup', 'tab', testId, index)}
 				onclick={() => handleTabClick(tab.value)}
 			/>
 		{/each}
 	</div>
 
-	<div class={panelClass_}>
+	<div class={panelClass_} data-testid={buildTestId('tabgroup', 'panel', testId)}>
 		{@render children?.(selected)}
 	</div>
 </div>

package/dist/layout/tabs/tabs-types.d.ts

@@ -0,0 +1,43 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+import type { VariantColors, VariantSizes } from '../../index.js';
+export type TabItem = {
+    value: string;
+    label: string;
+    icon?: Component;
+    disabled?: boolean;
+};
+export type TabProps = {
+    value: string;
+    label: string;
+    icon?: Component;
+    selected?: boolean;
+    disabled?: boolean;
+    color?: VariantColors;
+    size?: VariantSizes;
+    variant?: 'line' | 'pill';
+    onclick?: (event: Event) => void;
+    testId?: string;
+};
+export type TabsGroupProps = {
+    tabs: TabItem[];
+    selected?: string;
+    color?: VariantColors;
+    size?: VariantSizes;
+    variant?: 'line' | 'pill';
+    class?: ClassValue;
+    listClass?: ClassValue;
+    triggerClass?: ClassValue;
+    panelClass?: ClassValue;
+    children?: Snippet<[active: string]>;
+    onchange?: (value: string) => void;
+    testId?: string;
+};
+export type TabContentProps = {
+    value: string;
+    persisted?: boolean;
+    panelClass?: ClassValue;
+    children?: Snippet<[value: string]>;
+    testId?: string;
+};

package/dist/layout/tabs/tabs-types.js

@@ -0,0 +1 @@
+export {};

package/dist/layout/tabs/tabs.d.ts

@@ -1,31 +1,30 @@
-import { Color, Size } from '../../index.js';
 export declare const tabs: import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.PRIMARY]: {};
-        [Color.SECONDARY]: {};
-        [Color.SUCCESS]: {};
-        [Color.WARNING]: {};
-        [Color.DANGER]: {};
-        [Color.INFO]: {};
-        [Color.DEFAULT]: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+        default: {};
     };
     size: {
-        [Size.XS]: {
+        xs: {
             trigger: string;
         };
-        [Size.SM]: {
+        sm: {
             trigger: string;
         };
-        [Size.BASE]: {
+        base: {
             trigger: string;
         };
-        [Size.LG]: {
+        lg: {
             trigger: string;
         };
-        [Size.XL]: {
+        xl: {
             trigger: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             trigger: string;
         };
     };
@@ -47,31 +46,31 @@ export declare const tabs: import("tailwind-variants").TVReturnType<{
     panel: string;
 }, undefined, {
     color: {
-        [Color.PRIMARY]: {};
-        [Color.SECONDARY]: {};
-        [Color.SUCCESS]: {};
-        [Color.WARNING]: {};
-        [Color.DANGER]: {};
-        [Color.INFO]: {};
-        [Color.DEFAULT]: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+        default: {};
     };
     size: {
-        [Size.XS]: {
+        xs: {
             trigger: string;
         };
-        [Size.SM]: {
+        sm: {
             trigger: string;
         };
-        [Size.BASE]: {
+        base: {
             trigger: string;
         };
-        [Size.LG]: {
+        lg: {
             trigger: string;
         };
-        [Size.XL]: {
+        xl: {
             trigger: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             trigger: string;
         };
     };
@@ -93,31 +92,31 @@ export declare const tabs: import("tailwind-variants").TVReturnType<{
     panel: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.PRIMARY]: {};
-        [Color.SECONDARY]: {};
-        [Color.SUCCESS]: {};
-        [Color.WARNING]: {};
-        [Color.DANGER]: {};
-        [Color.INFO]: {};
-        [Color.DEFAULT]: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+        default: {};
     };
     size: {
-        [Size.XS]: {
+        xs: {
             trigger: string;
         };
-        [Size.SM]: {
+        sm: {
             trigger: string;
         };
-        [Size.BASE]: {
+        base: {
             trigger: string;
         };
-        [Size.LG]: {
+        lg: {
             trigger: string;
         };
-        [Size.XL]: {
+        xl: {
             trigger: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             trigger: string;
         };
     };

package/dist/modal/Modal.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
+	import { 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 { buildTestId } from '../helper/testid.js';
+	import { warnDeprecatedProps } from '../helper/deprecation.js';
 	import { modal } from './modal.js';
 	import type { ModalProps } from '../index.js';
 
@@ -13,32 +17,55 @@
 		size,
 		hideCloseButton = false,
 		class: className = '',
-		contentclass: contentClassName = '',
-		bodyclass: bodyClassName = '',
-		titleclass: titleClassName = '',
-		headerclass: headerClassName = '',
-		backdropclass: backdropClassName = '',
+		contentclass,
+		contentClass = contentclass ?? '',
+		bodyclass,
+		bodyClass = bodyclass ?? '',
+		titleclass,
+		titleClass = titleclass ?? '',
+		headerclass,
+		headerClass = headerclass ?? '',
+		backdropclass,
+		backdropClass = backdropclass ?? '',
+		footerclass,
+		footerClass = footerclass ?? '',
 		children,
 		footer,
-		header
+		header,
+		testId
 	}: ModalProps = $props();
 
+	warnDeprecatedProps(
+		'Modal',
+		{ contentclass, bodyclass, titleclass, headerclass, backdropclass, footerclass },
+		{
+			contentclass: 'contentClass',
+			bodyclass: 'bodyClass',
+			titleclass: 'titleClass',
+			headerclass: 'headerClass',
+			backdropclass: 'backdropClass',
+			footerclass: 'footerClass'
+		}
+	);
+
+	let modalElement: HTMLDivElement | undefined = $state();
+
 	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(
+	const backdropClasses = $derived(cn(styles.backdrop(), backdropClass));
+	const containerClass = $derived(cn(styles.container(), contentClass));
+	const headerClasses = $derived(cn(styles.header(), headerClass));
+	const titleClasses = $derived(cn(styles.title(), titleClass));
+	const bodyClasses = $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
+			bodyClass
 		)
 	);
-	const footerClass = $derived(cn(styles.footer(), ''));
+	const footerClasses = $derived(cn(styles.footer(), footerClass));
 	const closeClass = $derived(cn(styles.close(), ''));
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	const descriptionClass = $derived(cn(styles.description(), ''));
@@ -53,13 +80,59 @@
 		}
 	}
 
+	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);
+		};
+	}
+
 	$effect(() => {
 		if (open) {
+			previouslyFocusedElement = document.activeElement as HTMLElement;
 			document.body.style.overflow = 'hidden';
 			document.addEventListener('keydown', handleKeydown);
+
+			tick().then(() => {
+				if (modalElement) {
+					trapFocus(modalElement);
+				}
+			});
 		} else {
 			document.body.style.overflow = '';
 			document.removeEventListener('keydown', handleKeydown);
+			if (previouslyFocusedElement) {
+				previouslyFocusedElement.focus();
+			}
 		}
 
 		return () => {
@@ -67,18 +140,36 @@
 			document.removeEventListener('keydown', handleKeydown);
 		};
 	});
+
+	onDestroy(() => {
+		if (browser && document.body.style.overflow === 'hidden') {
+			document.body.style.overflow = '';
+		}
+	});
 </script>
 
 {#snippet predefinedHeader()}
 	{#if title || description}
-		<header class={headerClass}>
+		<header class={headerClasses}>
 			<div class="flex-1">
 				{#if title}
-					<h2 class={titleClass}>{title}</h2>
+					<h2
+						id="modal-title"
+						class={titleClasses}
+						data-testid={buildTestId('modal', 'title', testId)}
+					>
+						{title}
+					</h2>
 				{/if}
 			</div>
 			{#if !hideCloseButton}
-				<button type="button" class={closeClass} onclick={onclose} aria-label="Close">
+				<button
+					type="button"
+					class={closeClass}
+					onclick={onclose}
+					aria-label="Close"
+					data-testid={buildTestId('modal', 'close', testId)}
+				>
 					<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
 						<path
 							d="M15 5L5 15M5 5L15 15"
@@ -99,6 +190,7 @@
 			class="text-default-400 hover:bg-default-100 hover:text-default-600 absolute top-4 right-4 z-10 rounded-lg p-2 transition-colors"
 			onclick={onclose}
 			aria-label="Close"
+			data-testid={buildTestId('modal', 'close', testId)}
 		>
 			<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
 				<path
@@ -113,17 +205,28 @@
 {/snippet}
 
 {#if open}
-	<div class={baseClass} role="dialog" aria-modal="true">
+	<div
+		class={baseClass}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby={title ? 'modal-title' : undefined}
+		bind:this={modalElement}
+	>
 		<!-- Backdrop -->
 		<div
-			class={backdropClass}
+			class={backdropClasses}
 			onclick={handleBackdropClick}
 			transition:fade={{ duration: 200 }}
 			role="presentation"
+			data-testid={buildTestId('modal', 'backdrop', testId)}
 		></div>
 
 		<!-- Modal Container -->
-		<div class={containerClass} transition:scale={{ duration: 200, easing: quintOut, start: 0.95 }}>
+		<div
+			class={containerClass}
+			transition:scale={{ duration: 200, easing: quintOut, start: 0.95 }}
+			data-testid={buildTestId('modal', 'dialog', testId)}
+		>
 			<!-- Header -->
 			{#if header}
 				{@render header()}
@@ -133,14 +236,14 @@
 
 			<!-- Body -->
 			{#if children}
-				<div class={bodyClass}>
+				<div class={bodyClasses} data-testid={buildTestId('modal', 'body', testId)}>
 					{@render children()}
 				</div>
 			{/if}
 
 			<!-- Footer -->
 			{#if footer}
-				<footer class={footerClass}>
+				<footer class={footerClasses} data-testid={buildTestId('modal', 'footer', testId)}>
 					{@render footer()}
 				</footer>
 			{/if}