@makolabs/ripple 1.0.1 → 1.0.2

package/dist/index.d.ts

@@ -317,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/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": "1.0.1",
+	"version": "1.0.2",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {