@makolabs/ripple 0.5.0 → 1.0.2

package/dist/index.d.ts

@@ -48,27 +48,7 @@ export type AnchorHTMLProps = {
     href: string;
 } & Record<string, unknown>;
 export type ButtonProps = BaseButtonProps & (ButtonHTMLProps | AnchorHTMLProps);
-export type MakeModalProps = {
-    open?: boolean;
-    onclose?: () => void;
-    title?: string;
-    description?: string;
-    hideCloseButton?: boolean;
-    closeOnBackdropClick?: boolean;
-    closeOnEsc?: boolean;
-    position?: 'top' | 'center' | 'bottom';
-    size?: VariantSizes;
-    class?: string;
-    backdropclass?: string;
-    contentclass?: string;
-    headerclass?: string;
-    bodyclass?: string;
-    titleclass?: string;
-    children?: Snippet;
-    header?: Snippet;
-    footer?: Snippet;
-    custom?: Snippet;
-};
+export type { ModalProps } from './modal/modal.js';
 export type DrawerProps = {
     open?: boolean;
     onclose?: () => void;
@@ -337,6 +317,8 @@ export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
 export { default as Button } from './button/Button.svelte';
 export { default as Modal } from './modal/Modal.svelte';
+export { default as Pipeline } from './pipeline/Pipeline.svelte';
+export type { PipelineStage } from './pipeline/Pipeline.svelte';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as PageHeader } from './header/PageHeader.svelte';
 export { default as Breadcrumbs } from './header/Breadcrumbs.svelte';

package/dist/index.js

@@ -16,6 +16,8 @@ export { isRouteActive } from './helper/nav.svelte.js';
 export { default as Button } from './button/Button.svelte';
 // Modal
 export { default as Modal } from './modal/Modal.svelte';
+// Pipeline
+export { default as Pipeline } from './pipeline/Pipeline.svelte';
 // Drawer
 export { default as Drawer } from './drawer/Drawer.svelte';
 // Header

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

@@ -2,8 +2,8 @@ export declare const metricCard: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            value?: import("tailwind-variants").ClassValue;
             title?: import("tailwind-variants").ClassValue;
+            value?: import("tailwind-variants").ClassValue;
             progress?: import("tailwind-variants").ClassValue;
             detail?: import("tailwind-variants").ClassValue;
         };
@@ -12,8 +12,8 @@ export declare const metricCard: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            value?: import("tailwind-variants").ClassValue;
             title?: import("tailwind-variants").ClassValue;
+            value?: import("tailwind-variants").ClassValue;
             progress?: import("tailwind-variants").ClassValue;
             detail?: import("tailwind-variants").ClassValue;
         };
@@ -28,8 +28,8 @@ export declare const metricCard: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            value?: 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/modal/Modal.svelte

@@ -1,209 +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 { Size, type MakeModalProps } from '../index.js';
-
+	import { modal, type ModalProps } from './modal.js';
+	
 	let {
 		open = $bindable(false),
-		onclose: onClose = () => {},
+		onclose = () => {},
 		title,
 		description,
-		position = 'center',
-		size = Size.BASE,
-		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,
-			size
-		})
-	);
-
-	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,212 +1,107 @@
-import { Size } from '../index.js';
+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: {
         [Size.XS]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.SM]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.BASE]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.LG]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.XL]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.XXL]: {
-            contentWrapper: string;
-        };
-    };
-    border: {
-        none: {
-            content: string;
-        };
-        default: {
-            content: string;
-        };
-        colored: {
-            content: string;
+            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: {
         [Size.XS]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.SM]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.BASE]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.LG]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.XL]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.XXL]: {
-            contentWrapper: string;
-        };
-    };
-    border: {
-        none: {
-            content: string;
-        };
-        default: {
-            content: string;
-        };
-        colored: {
-            content: string;
+            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: {
         [Size.XS]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.SM]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.BASE]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.LG]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.XL]: {
-            contentWrapper: string;
+            container: string;
         };
         [Size.XXL]: {
-            contentWrapper: string;
-        };
-    };
-    border: {
-        none: {
-            content: string;
-        };
-        default: {
-            content: string;
-        };
-        colored: {
-            content: string;
+            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;
+};

package/dist/modal/modal.js

@@ -2,81 +2,39 @@ import { tv } from 'tailwind-variants';
 import { Size } from '../index.js';
 export const modal = tv({
     slots: {
-        base: 'fixed inset-0 z-50 flex items-center justify-center overflow-y-auto',
-        backdrop: 'fixed inset-0 transition-opacity bg-black/50',
-        contentWrapper: 'absolute transform overflow-hidden transition-all px-2',
-        content: 'bg-white overflow-hidden rounded-lg',
-        header: 'px-4 py-3 flex items-center justify-between border-b border-default-200',
-        body: 'px-3 py-2 max-h-[70dvh] overflow-y-auto',
-        title: 'text-default-900 leading-6 text-base font-semibold',
-        closeButton: 'text-default-400 hover:text-default-500 rounded-md cursor-pointer'
+        base: 'fixed inset-0 z-50 flex items-center justify-center p-4',
+        backdrop: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
+        container: 'relative w-full flex flex-col bg-white rounded-xl shadow-2xl overflow-hidden',
+        header: 'px-6 py-4 border-b border-gray-200 flex items-center justify-between shrink-0',
+        body: 'flex-1 px-6 py-4 overflow-y-auto',
+        footer: 'px-6 py-4 border-t border-gray-200 bg-gray-50/80 shrink-0',
+        title: 'text-lg font-semibold text-gray-900',
+        description: 'text-sm text-gray-600 mt-1',
+        close: 'p-2 -mr-2 ml-4 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors'
     },
     variants: {
-        open: {
-            true: {
-                base: 'visible',
-                backdrop: 'visible opacity-100',
-                contentWrapper: 'visible scale-100 opacity-100'
-            },
-            false: {
-                base: 'invisible',
-                backdrop: 'invisible opacity-0',
-                contentWrapper: 'invisible scale-95 opacity-0'
-            }
-        },
-        position: {
-            center: {
-                contentWrapper: 'mx-auto'
-            },
-            top: {
-                contentWrapper: 'mx-auto top-7'
-            },
-            bottom: {
-                contentWrapper: 'mx-auto bottom-7'
-            },
-            left: {
-                contentWrapper: 'left-7'
-            },
-            right: {
-                contentWrapper: 'right-7'
-            }
-        },
         size: {
             [Size.XS]: {
-                contentWrapper: 'w-full max-w-xs'
+                container: 'max-w-xs max-h-[80vh]'
             },
             [Size.SM]: {
-                contentWrapper: 'w-full max-w-sm'
+                container: 'max-w-sm max-h-[85vh]'
             },
             [Size.BASE]: {
-                contentWrapper: 'w-full max-w-md'
+                container: 'max-w-md max-h-[85vh]'
             },
             [Size.LG]: {
-                contentWrapper: 'w-full max-w-lg'
+                container: 'max-w-lg max-h-[90vh]'
             },
             [Size.XL]: {
-                contentWrapper: 'w-full max-w-xl'
+                container: 'max-w-xl max-h-[90vh]'
             },
             [Size.XXL]: {
-                contentWrapper: 'w-full max-w-2xl'
-            }
-        },
-        border: {
-            none: {
-                content: 'border-0'
-            },
-            default: {
-                content: 'border border-default-200'
-            },
-            colored: {
-                content: 'border'
+                container: 'max-w-2xl max-h-[90vh]'
             }
         }
     },
     defaultVariants: {
-        open: false,
-        position: 'center',
-        size: 'base',
-        color: 'default'
+        size: Size.BASE
     }
 });

package/dist/pipeline/Pipeline.svelte

@@ -0,0 +1,186 @@
+<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;
+		size?: 'sm' | 'base' | 'lg';
+		equalWidth?: boolean;
+		children?: Snippet<[PipelineStage, number]>;
+	}
+	
+	let {
+		stages = [],
+		class: className = '',
+		size = 'base',
+		equalWidth = true,
+		children
+	}: Props = $props();
+	
+	const pipeline = tv({
+		slots: {
+			container: 'flex items-center gap-0 w-full',
+			stage: 'relative flex items-center justify-center transition-all duration-200',
+			content: 'relative z-10 flex flex-col items-center justify-center px-4 text-center',
+			label: 'font-medium text-gray-700 leading-tight',
+			count: 'font-bold text-gray-900',
+			chevron: 'absolute inset-0',
+			chevronPath: 'fill-current'
+		},
+		variants: {
+			size: {
+				sm: {
+					stage: 'h-16 min-w-[120px]',
+					label: 'text-xs',
+					count: 'text-lg mt-1',
+					content: 'px-3'
+				},
+				base: {
+					stage: 'h-20 min-w-[150px]',
+					label: 'text-sm',
+					count: 'text-2xl mt-1',
+					content: 'px-4'
+				},
+				lg: {
+					stage: 'h-24 min-w-[180px]',
+					label: 'text-base',
+					count: 'text-3xl mt-2',
+					content: 'px-5'
+				}
+			},
+			color: {
+				default: {
+					chevronPath: 'text-gray-100'
+				},
+				primary: {
+					chevronPath: 'text-blue-100',
+					label: 'text-blue-900',
+					count: 'text-blue-900'
+				},
+				success: {
+					chevronPath: 'text-green-100',
+					label: 'text-green-900',
+					count: 'text-green-900'
+				},
+				warning: {
+					chevronPath: 'text-orange-100',
+					label: 'text-orange-900',
+					count: 'text-orange-900'
+				},
+				danger: {
+					chevronPath: 'text-red-100',
+					label: 'text-red-900',
+					count: 'text-red-900'
+				},
+				info: {
+					chevronPath: 'text-purple-100',
+					label: 'text-purple-900',
+					count: 'text-purple-900'
+				}
+			},
+			active: {
+				true: {
+					stage: 'ring-2 ring-offset-2',
+					chevronPath: 'brightness-110'
+				}
+			},
+			equalWidth: {
+				true: {
+					stage: 'flex-1'
+				},
+				false: {
+					stage: ''
+				}
+			}
+		}
+	});
+	
+	const styles = $derived(pipeline({ size, equalWidth }));
+	
+	function getStageStyles(stage: PipelineStage) {
+		return pipeline({
+			size,
+			color: stage.color || 'default',
+			active: stage.active,
+			equalWidth
+		});
+	}
+</script>
+
+<div class="{styles.container()} {className}">
+	{#each stages as stage, index}
+		<div 
+			class={getStageStyles(stage).stage()}
+		>
+			<!-- Chevron SVG Background -->
+			<svg 
+				class={getStageStyles(stage).chevron()}
+				viewBox="0 0 200 80" 
+				preserveAspectRatio="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				{#if index === 0}
+					<!-- First item - no tail -->
+					<path
+						d="M 0 0 L 160 0 L 200 40 L 160 80 L 0 80 Z"
+						class={getStageStyles(stage).chevronPath()}
+					/>
+					<path
+						d="M 0 0 L 160 0 L 200 40 L 160 80 L 0 80 Z"
+						fill="none"
+						stroke={stage.active ? 'rgb(59 130 246)' : 'rgb(209 213 219)'}
+						stroke-width="2"
+					/>
+				{:else if index === stages.length - 1}
+					<!-- Last item - no arrow -->
+					<path
+						d="M 0 0 L 200 0 L 200 80 L 0 80 L 40 40 Z"
+						class={getStageStyles(stage).chevronPath()}
+					/>
+					<path
+						d="M 0 0 L 200 0 L 200 80 L 0 80 L 40 40 Z"
+						fill="none"
+						stroke={stage.active ? 'rgb(59 130 246)' : 'rgb(209 213 219)'}
+						stroke-width="2"
+					/>
+				{:else}
+					<!-- Middle items - full chevron -->
+					<path
+						d="M 0 0 L 160 0 L 200 40 L 160 80 L 0 80 L 40 40 Z"
+						class={getStageStyles(stage).chevronPath()}
+					/>
+					<path
+						d="M 0 0 L 160 0 L 200 40 L 160 80 L 0 80 L 40 40 Z"
+						fill="none"
+						stroke={stage.active ? 'rgb(59 130 246)' : 'rgb(209 213 219)'}
+						stroke-width="2"
+					/>
+				{/if}
+			</svg>
+			
+			<!-- Content -->
+			<div class={getStageStyles(stage).content()}>
+				{#if children}
+					{@render children(stage, index)}
+				{:else}
+					<span class={getStageStyles(stage).label()}>
+						{stage.label}
+					</span>
+					{#if stage.count !== undefined}
+						<span class={getStageStyles(stage).count()}>
+							{stage.count}
+						</span>
+					{/if}
+				{/if}
+			</div>
+		</div>
+	{/each}
+</div>

package/dist/pipeline/Pipeline.svelte.d.ts

@@ -0,0 +1,17 @@
+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;
+    size?: 'sm' | 'base' | 'lg';
+    equalWidth?: boolean;
+    children?: Snippet<[PipelineStage, number]>;
+}
+declare const Pipeline: import("svelte").Component<Props, {}, "">;
+type Pipeline = ReturnType<typeof Pipeline>;
+export default Pipeline;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "0.5.0",
+	"version": "1.0.2",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {