@makolabs/ripple 1.2.3 → 1.2.4

package/dist/layout/table/Table.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { table } from './table.js';
-	import type { TableProps, SortDirection, SortState } from '../../index.js';
+	import type { TableProps, SortDirection, SortState, DataRow } from '../../index.js';
 	import Pagination from '../../elements/pagination/Pagination.svelte';
 	import Card from '../../layout/card/Card.svelte';
 
@@ -42,6 +42,7 @@
 		title,
 		subtitle,
 		headerActions
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	}: TableProps<any> = $props();
 
 	// Determine if we should use Card wrapper
@@ -70,12 +71,11 @@
 	const showPaginationControls = $derived(
 		pagination &&
 			showPagination &&
-			(data.length > internalPageSize || totalItems > internalPageSize)
+			(data.length > internalPageSize || (totalItems ?? 0) > internalPageSize)
 	);
 
 	// Calculate total items and pages
 	const effectiveTotalItems = $derived(totalItems !== undefined ? totalItems : data.length);
-	const totalPages = $derived(Math.ceil(effectiveTotalItems / internalPageSize));
 
 	const {
 		base: baseClass,
@@ -154,7 +154,7 @@
 		onsort(newSortState);
 	}
 
-	function toggleRowSelection(row: any) {
+	function toggleRowSelection(row: DataRow) {
 		if (!selectable) return;
 
 		const index = selected.findIndex((r) => r === row);
@@ -167,11 +167,11 @@
 		onselect(selected);
 	}
 
-	function isRowSelected(row: any) {
+	function isRowSelected(row: DataRow) {
 		return selected.includes(row);
 	}
 
-	function handleRowClick(row: any, index: number) {
+	function handleRowClick(row: DataRow, index: number) {
 		onrowclick?.(row, index);
 	}
 
@@ -367,7 +367,7 @@
 									</td>
 								</tr>
 							{:else}
-								{#each getPaginatedData() as row, rowIndex}
+								{#each getPaginatedData() as row, rowIndex (rowIndex)}
 									<tr
 										class={cn(trClasses, rowclass(row, rowIndex), {
 											'bg-primary-100': selectable && isRowSelected(row),
@@ -595,7 +595,7 @@
 							</td>
 						</tr>
 					{:else}
-						{#each getPaginatedData() as row, rowIndex}
+						{#each getPaginatedData() as row, rowIndex (rowIndex)}
 							<tr
 								class={cn(trClasses, rowclass(row, rowIndex), {
 									'bg-primary-100': selectable && isRowSelected(row),

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

@@ -1,3 +1,4 @@
+import { Color } from '../../variants.js';
 export declare const table: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
@@ -26,32 +27,32 @@ export declare const table: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        default: {
+        [Color.PRIMARY]: {
             th: string;
+            tr: string;
         };
-        primary: {
+        [Color.SECONDARY]: {
             th: string;
             tr: string;
         };
-        secondary: {
+        [Color.INFO]: {
             th: string;
             tr: string;
         };
-        info: {
+        [Color.SUCCESS]: {
             th: string;
             tr: string;
         };
-        success: {
+        [Color.WARNING]: {
             th: string;
             tr: string;
         };
-        warning: {
+        [Color.DANGER]: {
             th: string;
             tr: string;
         };
-        danger: {
+        default: {
             th: string;
-            tr: string;
         };
     };
     bordered: {
@@ -111,32 +112,32 @@ export declare const table: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        default: {
+        [Color.PRIMARY]: {
             th: string;
+            tr: string;
         };
-        primary: {
+        [Color.SECONDARY]: {
             th: string;
             tr: string;
         };
-        secondary: {
+        [Color.INFO]: {
             th: string;
             tr: string;
         };
-        info: {
+        [Color.SUCCESS]: {
             th: string;
             tr: string;
         };
-        success: {
+        [Color.WARNING]: {
             th: string;
             tr: string;
         };
-        warning: {
+        [Color.DANGER]: {
             th: string;
             tr: string;
         };
-        danger: {
+        default: {
             th: string;
-            tr: string;
         };
     };
     bordered: {
@@ -196,32 +197,32 @@ export declare const table: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        default: {
+        [Color.PRIMARY]: {
             th: string;
+            tr: string;
         };
-        primary: {
+        [Color.SECONDARY]: {
             th: string;
             tr: string;
         };
-        secondary: {
+        [Color.INFO]: {
             th: string;
             tr: string;
         };
-        info: {
+        [Color.SUCCESS]: {
             th: string;
             tr: string;
         };
-        success: {
+        [Color.WARNING]: {
             th: string;
             tr: string;
         };
-        warning: {
+        [Color.DANGER]: {
             th: string;
             tr: string;
         };
-        danger: {
+        default: {
             th: string;
-            tr: string;
         };
     };
     bordered: {
@@ -254,3 +255,6 @@ export declare const table: import("tailwind-variants").TVReturnType<{
     sortButton: string;
     sortIcon: string;
 }, undefined, unknown, unknown, undefined>>;
+export type StatusType = 'active' | 'inactive' | 'pending' | 'error' | 'default';
+export type KeyType = string;
+export type DataRow = Record<string, unknown>;

package/dist/layout/table/table.js

@@ -1,4 +1,5 @@
 import { tv } from 'tailwind-variants';
+import { Color } from '../../variants.js';
 export const table = tv({
     slots: {
         base: 'w-full',
@@ -18,55 +19,55 @@ export const table = tv({
     variants: {
         size: {
             xs: {
-                th: 'px-2 py-1.5',
+                th: 'px-2 py-1.5 text-xs',
                 td: 'px-2 py-1.5 text-xs'
             },
             sm: {
-                th: 'px-3 py-2',
+                th: 'px-3 py-2 text-xs',
                 td: 'px-3 py-2 text-sm'
             },
             base: {
-                th: 'px-3 py-2',
+                th: 'px-4 py-3 text-sm',
                 td: 'px-4 py-3 text-sm'
             },
             lg: {
-                th: 'px-4 py-3',
+                th: 'px-6 py-4 text-sm',
                 td: 'px-6 py-4 text-base'
             },
             xl: {
-                th: 'px-5 py-4',
+                th: 'px-8 py-5 text-base',
                 td: 'px-8 py-5 text-base'
             },
             '2xl': {
-                th: 'px-6 py-5',
+                th: 'px-10 py-6 text-lg',
                 td: 'px-10 py-6 text-lg'
             }
         },
         color: {
             default: {
-                th: 'bg-gray-50'
+                th: 'text-default-700 bg-default-50'
             },
-            primary: {
+            [Color.PRIMARY]: {
                 th: 'text-primary-700 bg-primary-50',
                 tr: 'hover:bg-primary-50'
             },
-            secondary: {
+            [Color.SECONDARY]: {
                 th: 'text-secondary-700 bg-secondary-50',
                 tr: 'hover:bg-secondary-50'
             },
-            info: {
+            [Color.INFO]: {
                 th: 'text-info-700 bg-info-50',
                 tr: 'hover:bg-info-50'
             },
-            success: {
+            [Color.SUCCESS]: {
                 th: 'text-success-700 bg-success-50',
                 tr: 'hover:bg-success-50'
             },
-            warning: {
+            [Color.WARNING]: {
                 th: 'text-warning-700 bg-warning-50',
                 tr: 'hover:bg-warning-50'
             },
-            danger: {
+            [Color.DANGER]: {
                 th: 'text-danger-700 bg-danger-50',
                 tr: 'hover:bg-danger-50'
             }

package/dist/modal/Modal.svelte

@@ -40,6 +40,7 @@
 	);
 	const footerClass = $derived(cn(styles.footer(), ''));
 	const closeClass = $derived(cn(styles.close(), ''));
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	const descriptionClass = $derived(cn(styles.description(), ''));
 
 	function handleBackdropClick() {
@@ -89,7 +90,6 @@
 				</button>
 			{/if}
 		</header>
-
 	{/if}
 
 	<!-- Close button only (positioned absolutely when no header) -->

package/dist/modal/ModalTestWrapper.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Modal from './Modal.svelte';
+	import type { ModalProps } from '../index.js';
+
+	let {
+		bodyText = '',
+		footerText = '',
+		...modalProps
+	}: ModalProps & { bodyText?: string; footerText?: string } = $props();
+</script>
+
+<Modal {...modalProps}>
+	<div>{bodyText}</div>
+	{#if footerText}
+		<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+		{#snippet footer()}
+			<div>{footerText}</div>
+		{/snippet}
+	{/if}
+</Modal>

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

@@ -0,0 +1,8 @@
+import type { ModalProps } from '../index.js';
+type $$ComponentProps = ModalProps & {
+    bodyText?: string;
+    footerText?: string;
+};
+declare const ModalTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModalTestWrapper = ReturnType<typeof ModalTestWrapper>;
+export default ModalTestWrapper;

package/dist/modal/modal.d.ts

@@ -1,5 +1,4 @@
-import { Size, type VariantSizes } from '../index.js';
-import type { Snippet } from 'svelte';
+import { Size } from '../index.js';
 export declare const modal: import("tailwind-variants").TVReturnType<{
     size: {
         [Size.XS]: {
@@ -94,21 +93,3 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     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;
-    contentclass?: string;
-    bodyclass?: string;
-    titleclass?: string;
-    headerclass?: string;
-    backdropclass?: string;
-    footerclass?: string;
-    children?: Snippet;
-    footer?: Snippet;
-    header?: Snippet;
-};

package/dist/pipeline/Pipeline.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { tv } from 'tailwind-variants';
 	import type { Snippet } from 'svelte';
-	
+
 	export type PipelineStage = {
 		label: string;
 		count?: number | string;
 		color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
 		active?: boolean;
 	};
-	
+
 	interface Props {
 		stages: PipelineStage[];
 		class?: string;
@@ -17,7 +17,7 @@
 		children?: Snippet<[PipelineStage, number]>;
 		beneathChildren?: Snippet<[PipelineStage, number]>;
 	}
-	
+
 	let {
 		stages = [],
 		class: className = '',
@@ -26,7 +26,7 @@
 		children,
 		beneathChildren
 	}: Props = $props();
-	
+
 	const pipeline = tv({
 		slots: {
 			container: 'flex items-center gap-0 w-full',
@@ -109,9 +109,9 @@
 			}
 		}
 	});
-	
+
 	const styles = $derived(pipeline({ size, equalWidth }));
-	
+
 	function getStageStyles(stage: PipelineStage) {
 		return pipeline({
 			size,
@@ -123,22 +123,34 @@
 </script>
 
 <div class="{styles.container()} {className}">
-	{#each stages as stage, index}
+	{#each stages as stage, index (stage.label + index)}
 		{@const isFirst = index === 0}
-		{@const isLast = index === stages.length - 1}
 		{@const chevronWidth = 20}
-		
-		<div class="flex flex-col {getStageStyles(stage).stage()}" style="{!isFirst ? `margin-left: -${chevronWidth}px; z-index: ${stages.length - index}` : `z-index: ${stages.length - index}`}">
+
+		<div
+			class="flex flex-col {getStageStyles(stage).stage()}"
+			style={!isFirst
+				? `margin-left: -${chevronWidth}px; z-index: ${stages.length - index}`
+				: `z-index: ${stages.length - index}`}
+		>
 			<!-- BACKGROUND LAYER (Border color - larger) -->
-			<div 
-				class="{getStageStyles(stage).borderLayer()}"
-				style="clip-path: polygon({isFirst ? '0' : '0'} 0%, calc(100% - {chevronWidth}px) 0%, 100% 50%, calc(100% - {chevronWidth}px) 100%, {isFirst ? '0' : '0'} 100%, {isFirst ? '0' : `${chevronWidth}px`} 50%);"
+			<div
+				class={getStageStyles(stage).borderLayer()}
+				style="clip-path: polygon({isFirst
+					? '0'
+					: '0'} 0%, calc(100% - {chevronWidth}px) 0%, 100% 50%, calc(100% - {chevronWidth}px) 100%, {isFirst
+					? '0'
+					: '0'} 100%, {isFirst ? '0' : `${chevronWidth}px`} 50%);"
 			></div>
-			
+
 			<!-- FOREGROUND LAYER (White - smaller, creates border effect) -->
-			<div 
-				class="{getStageStyles(stage).innerLayer()}"
-				style="clip-path: polygon({isFirst ? '2px' : '2px'} 2px, calc(100% - {chevronWidth}px - 2px) 2px, calc(100% - 2px) 50%, calc(100% - {chevronWidth}px - 2px) calc(100% - 2px), {isFirst ? '2px' : '2px'} calc(100% - 2px), {isFirst ? '2px' : `${chevronWidth + 2}px`} 50%);"
+			<div
+				class={getStageStyles(stage).innerLayer()}
+				style="clip-path: polygon({isFirst
+					? '2px'
+					: '2px'} 2px, calc(100% - {chevronWidth}px - 2px) 2px, calc(100% - 2px) 50%, calc(100% - {chevronWidth}px - 2px) calc(100% - 2px), {isFirst
+					? '2px'
+					: '2px'} calc(100% - 2px), {isFirst ? '2px' : `${chevronWidth + 2}px`} 50%);"
 			>
 				<div class={getStageStyles(stage).content()}>
 					{#if children}