@makolabs/ripple 1.2.2 → 1.2.4

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',
@@ -7,7 +8,7 @@ export const table = tv({
         thead: '',
         tbody: 'divide-y divide-default-200',
         tr: 'transition-colors hover:bg-default-50',
-        th: 'font-semibold whitespace-nowrap',
+        th: 'text-xs font-medium tracking-wider text-gray-500 uppercase whitespace-nowrap',
         td: 'whitespace-nowrap',
         footer: 'p-4',
         pagination: 'flex items-center justify-between',
@@ -46,27 +47,27 @@ export const table = tv({
             default: {
                 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'
             }
@@ -135,7 +136,7 @@ export const table = tv({
     defaultVariants: {
         size: 'base',
         color: 'default',
-        bordered: true,
+        bordered: false,
         striped: false
     }
 });

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}