@makolabs/ripple 1.10.0 → 1.12.0

package/dist/index.d.ts

@@ -49,7 +49,8 @@ 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 { pipelineVariants } from './pipeline/pipeline.js';
+export type { PipelineStage, PipelineStageColor, PipelineStageEvent, PipelineStageClickEvent, PipelineStagePointerEvent, PipelineProps } from './pipeline/pipeline-types.js';
 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

@@ -26,6 +26,7 @@ export { default as Button } from './button/Button.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 // Pipeline
 export { default as Pipeline } from './pipeline/Pipeline.svelte';
+export { pipelineVariants } from './pipeline/pipeline.js';
 // Drawer
 export { default as Drawer } from './drawer/Drawer.svelte';
 // Header

package/dist/pipeline/Pipeline.svelte

@@ -1,174 +1,138 @@
 <script lang="ts">
-	import { tv } from 'tailwind-variants';
-	import type { Snippet } from 'svelte';
+	import { cn } from '../helper/cls.js';
+	import { pipelineVariants } from './pipeline.js';
+	import type { PipelineProps, PipelineStage } from '../index.js';
 
-	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]>;
-		beneathChildren?: Snippet<[PipelineStage, number]>;
-	}
+	const CHEVRON_WIDTH = 20;
 
 	let {
 		stages = [],
 		class: className = '',
 		size = 'base',
 		equalWidth = true,
+		chevronGap = 0,
+		selectedClass,
+		unselectedClass,
+		disabledClass,
+		onstageclick,
+		onstagehover,
+		onstageleave,
 		children,
 		beneathChildren
-	}: Props = $props();
-
-	const pipeline = tv({
-		slots: {
-			container: 'flex items-center gap-0 w-full',
-			stage: 'relative transition-all duration-300',
-			borderLayer: 'absolute inset-0 transition-all duration-300',
-			innerLayer: 'relative flex items-center justify-center bg-white transition-all duration-300',
-			content: 'text-center flex flex-col items-center justify-center',
-			label: 'font-medium text-default-600 leading-tight break-words',
-			count: 'font-bold text-default-900'
-		},
-		variants: {
-			size: {
-				sm: {
-					stage: 'min-w-[130px]',
-					borderLayer: 'h-20',
-					innerLayer: 'h-20',
-					label: 'text-[11px] max-w-[100px]',
-					count: 'text-xl mt-0.5',
-					content: 'px-4'
-				},
-				base: {
-					stage: 'min-w-[150px]',
-					borderLayer: 'h-24',
-					innerLayer: 'h-24',
-					label: 'text-xs max-w-[120px]',
-					count: 'text-2xl mt-1',
-					content: 'px-5'
-				},
-				lg: {
-					stage: 'min-w-[180px]',
-					borderLayer: 'h-28',
-					innerLayer: 'h-28',
-					label: 'text-sm max-w-[150px]',
-					count: 'text-3xl mt-1',
-					content: 'px-6'
-				}
-			},
-			color: {
-				default: {
-					borderLayer: 'bg-default-200'
-				},
-				primary: {
-					borderLayer: 'bg-blue-500',
-					label: 'text-default-700',
-					count: 'text-default-900'
-				},
-				success: {
-					borderLayer: 'bg-green-500',
-					label: 'text-default-700',
-					count: 'text-default-900'
-				},
-				warning: {
-					borderLayer: 'bg-amber-500',
-					label: 'text-default-700',
-					count: 'text-default-900'
-				},
-				danger: {
-					borderLayer: 'bg-rose-500',
-					label: 'text-default-700',
-					count: 'text-default-900'
-				},
-				info: {
-					borderLayer: 'bg-purple-500',
-					label: 'text-default-700',
-					count: 'text-default-900'
-				}
-			},
-			active: {
-				true: {
-					borderLayer: 'ring-2 ring-blue-500 ring-offset-2'
-				}
-			},
-			equalWidth: {
-				true: {
-					stage: 'flex-1'
-				},
-				false: {
-					stage: ''
-				}
-			}
-		}
-	});
+	}: PipelineProps = $props();
 
-	const styles = $derived(pipeline({ size, equalWidth }));
+	const containerStyles = $derived(pipelineVariants({ size, equalWidth }));
 
 	function getStageStyles(stage: PipelineStage) {
-		return pipeline({
+		return pipelineVariants({
 			size,
-			color: stage.color || 'default',
+			color: stage.color ?? 'default',
 			active: stage.active,
-			equalWidth
+			equalWidth,
+			interactive: !!onstageclick && !stage.disabled,
+			disabled: stage.disabled
 		});
 	}
+
+	function stateClassesFor(stage: PipelineStage): string | undefined {
+		if (stage.disabled) return undefined; // disabledClass applied separately
+		return stage.active
+			? (selectedClass as string | undefined)
+			: (unselectedClass as string | undefined);
+	}
+
+	function borderClipPath(isFirst: boolean): string {
+		const leftTip = isFirst ? '0' : `${CHEVRON_WIDTH}px`;
+		return `polygon(0 0%, calc(100% - ${CHEVRON_WIDTH}px) 0%, 100% 50%, calc(100% - ${CHEVRON_WIDTH}px) 100%, 0 100%, ${leftTip} 50%)`;
+	}
+
+	function innerClipPath(isFirst: boolean): string {
+		const leftTip = isFirst ? '2px' : `${CHEVRON_WIDTH + 2}px`;
+		return `polygon(2px 2px, calc(100% - ${CHEVRON_WIDTH}px - 2px) 2px, calc(100% - 2px) 50%, calc(100% - ${CHEVRON_WIDTH}px - 2px) calc(100% - 2px), 2px calc(100% - 2px), ${leftTip} 50%)`;
+	}
+
+	function handleStageClick(stage: PipelineStage, index: number, event: MouseEvent) {
+		if (stage.disabled || !onstageclick) return;
+		onstageclick({ stage, index, event });
+	}
+
+	function handleStageMouseEnter(stage: PipelineStage, index: number, event: MouseEvent) {
+		if (stage.disabled || !onstagehover) return;
+		onstagehover({ stage, index, event });
+	}
+
+	function handleStageMouseLeave(stage: PipelineStage, index: number, event: MouseEvent) {
+		if (stage.disabled || !onstageleave) return;
+		onstageleave({ stage, index, event });
+	}
 </script>
 
-<div class="{styles.container()} {className}">
+{#snippet stageContent(stage: PipelineStage, index: number, s: ReturnType<typeof getStageStyles>)}
+	<div class={s.content()}>
+		{#if children}
+			{@render children(stage, index)}
+		{:else}
+			<span class={s.label()}>{stage.label}</span>
+			{#if stage.count !== undefined}
+				<span class={s.count()}>{stage.count}</span>
+			{/if}
+		{/if}
+	</div>
+{/snippet}
+
+<div class={cn(containerStyles.container(), className)}>
 	{#each stages as stage, index (stage.label + index)}
+		{@const s = getStageStyles(stage)}
 		{@const isFirst = index === 0}
-		{@const chevronWidth = 20}
+		{@const renderAsButton = !!onstageclick}
+		{@const marginLeft = chevronGap - CHEVRON_WIDTH}
+		{@const stageStyle = isFirst
+			? `z-index: ${stages.length - index}`
+			: `margin-left: ${marginLeft}px; 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}`}
+			class={cn(
+				'flex flex-col',
+				s.stage(),
+				stateClassesFor(stage),
+				stage.disabled ? disabledClass : undefined
+			)}
+			style={stageStyle}
+			data-pipeline-stage=""
+			role={onstagehover || onstageleave ? 'group' : undefined}
+			aria-label={onstagehover || onstageleave ? stage.label : undefined}
+			aria-disabled={stage.disabled ? 'true' : undefined}
+			onmouseenter={onstagehover ? (e) => handleStageMouseEnter(stage, index, e) : undefined}
+			onmouseleave={onstageleave ? (e) => handleStageMouseLeave(stage, index, e) : undefined}
 		>
-			<!-- 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%);"
+				class={s.borderLayer()}
+				data-pipeline-border=""
+				style="clip-path: {borderClipPath(isFirst)};"
 			></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).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}
+			{#if renderAsButton}
+				<button
+					type="button"
+					class={s.innerLayer()}
+					style="clip-path: {innerClipPath(isFirst)};"
+					data-pipeline-inner=""
+					disabled={stage.disabled}
+					aria-disabled={stage.disabled ? 'true' : undefined}
+					onclick={(e) => handleStageClick(stage, index, e)}
+				>
+					{@render stageContent(stage, index, s)}
+				</button>
+			{:else}
+				<div
+					class={s.innerLayer()}
+					style="clip-path: {innerClipPath(isFirst)};"
+					data-pipeline-inner=""
+				>
+					{@render stageContent(stage, index, s)}
 				</div>
-			</div>
+			{/if}
 
-			<!-- Beneath Children - Rendered directly below this stage -->
 			{#if beneathChildren}
 				<div class="mt-4">
 					{@render beneathChildren(stage, index)}

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

@@ -1,18 +1,4 @@
-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]>;
-    beneathChildren?: Snippet<[PipelineStage, number]>;
-}
-declare const Pipeline: import("svelte").Component<Props, {}, "">;
+import type { PipelineProps } from '../index.js';
+declare const Pipeline: import("svelte").Component<PipelineProps, {}, "">;
 type Pipeline = ReturnType<typeof Pipeline>;
 export default Pipeline;

package/dist/pipeline/pipeline-types.d.ts

@@ -0,0 +1,38 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+export type PipelineStageColor = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type PipelineStage = {
+    label: string;
+    count?: number | string;
+    color?: PipelineStageColor;
+    active?: boolean;
+    disabled?: boolean;
+};
+export type PipelineStageEvent<E extends Event = Event> = {
+    stage: PipelineStage;
+    index: number;
+    event: E;
+};
+export type PipelineStageClickEvent = PipelineStageEvent<MouseEvent>;
+export type PipelineStagePointerEvent = PipelineStageEvent<MouseEvent>;
+export type PipelineProps = {
+    stages: PipelineStage[];
+    class?: ClassValue;
+    size?: 'sm' | 'base' | 'lg';
+    equalWidth?: boolean;
+    /**
+     * Pixels of visible gap between chevrons. Independent of the chevron tip width.
+     * - `0` (default): tips tuck into notches, no visible gap
+     * - positive: visible gap between stages (reduces overlap)
+     * - negative: more overlap than default (tips extend past notches)
+     */
+    chevronGap?: number;
+    children?: Snippet<[PipelineStage, number]>;
+    beneathChildren?: Snippet<[PipelineStage, number]>;
+    selectedClass?: ClassValue;
+    unselectedClass?: ClassValue;
+    disabledClass?: ClassValue;
+    onstageclick?: (e: PipelineStageClickEvent) => void;
+    onstagehover?: (e: PipelineStagePointerEvent) => void;
+    onstageleave?: (e: PipelineStagePointerEvent) => void;
+};

package/dist/pipeline/pipeline-types.js

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

package/dist/pipeline/pipeline.d.ts

@@ -0,0 +1,256 @@
+export declare const pipelineVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+        base: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+        lg: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+    };
+    color: {
+        default: {
+            borderLayer: string;
+        };
+        primary: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        success: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        warning: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        danger: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        info: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+    };
+    active: {
+        true: {
+            innerLayer: string;
+        };
+    };
+    equalWidth: {
+        true: {
+            stage: string;
+        };
+    };
+    interactive: {
+        true: {
+            innerLayer: string;
+        };
+    };
+    disabled: {
+        true: {
+            stage: string;
+        };
+    };
+}, {
+    container: string;
+    stage: string;
+    borderLayer: string;
+    innerLayer: string;
+    content: string;
+    label: string;
+    count: string;
+}, undefined, {
+    size: {
+        sm: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+        base: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+        lg: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+    };
+    color: {
+        default: {
+            borderLayer: string;
+        };
+        primary: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        success: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        warning: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        danger: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        info: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+    };
+    active: {
+        true: {
+            innerLayer: string;
+        };
+    };
+    equalWidth: {
+        true: {
+            stage: string;
+        };
+    };
+    interactive: {
+        true: {
+            innerLayer: string;
+        };
+    };
+    disabled: {
+        true: {
+            stage: string;
+        };
+    };
+}, {
+    container: string;
+    stage: string;
+    borderLayer: string;
+    innerLayer: string;
+    content: string;
+    label: string;
+    count: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+        base: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+        lg: {
+            stage: string;
+            borderLayer: string;
+            innerLayer: string;
+            label: string;
+            count: string;
+            content: string;
+        };
+    };
+    color: {
+        default: {
+            borderLayer: string;
+        };
+        primary: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        success: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        warning: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        danger: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+        info: {
+            borderLayer: string;
+            label: string;
+            count: string;
+        };
+    };
+    active: {
+        true: {
+            innerLayer: string;
+        };
+    };
+    equalWidth: {
+        true: {
+            stage: string;
+        };
+    };
+    interactive: {
+        true: {
+            innerLayer: string;
+        };
+    };
+    disabled: {
+        true: {
+            stage: string;
+        };
+    };
+}, {
+    container: string;
+    stage: string;
+    borderLayer: string;
+    innerLayer: string;
+    content: string;
+    label: string;
+    count: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/pipeline/pipeline.js

@@ -0,0 +1,91 @@
+import { tv } from 'tailwind-variants';
+export const pipelineVariants = tv({
+    slots: {
+        container: 'flex items-center gap-0 w-full',
+        stage: 'relative transition-all duration-300',
+        borderLayer: 'absolute inset-0 transition-all duration-300',
+        innerLayer: 'relative flex items-center justify-center bg-white transition-all duration-300 focus:outline-none',
+        content: 'text-center flex flex-col items-center justify-center',
+        label: 'font-medium text-default-600 leading-tight break-words',
+        count: 'font-bold text-default-900'
+    },
+    variants: {
+        size: {
+            sm: {
+                stage: 'min-w-[130px]',
+                borderLayer: 'h-20',
+                innerLayer: 'h-20',
+                label: 'text-[11px] max-w-[100px]',
+                count: 'text-xl mt-0.5',
+                content: 'px-4'
+            },
+            base: {
+                stage: 'min-w-[150px]',
+                borderLayer: 'h-24',
+                innerLayer: 'h-24',
+                label: 'text-xs max-w-[120px]',
+                count: 'text-2xl mt-1',
+                content: 'px-5'
+            },
+            lg: {
+                stage: 'min-w-[180px]',
+                borderLayer: 'h-28',
+                innerLayer: 'h-28',
+                label: 'text-sm max-w-[150px]',
+                count: 'text-3xl mt-1',
+                content: 'px-6'
+            }
+        },
+        color: {
+            default: { borderLayer: 'bg-default-200' },
+            primary: {
+                borderLayer: 'bg-blue-500',
+                label: 'text-default-700',
+                count: 'text-default-900'
+            },
+            success: {
+                borderLayer: 'bg-green-500',
+                label: 'text-default-700',
+                count: 'text-default-900'
+            },
+            warning: {
+                borderLayer: 'bg-amber-500',
+                label: 'text-default-700',
+                count: 'text-default-900'
+            },
+            danger: {
+                borderLayer: 'bg-rose-500',
+                label: 'text-default-700',
+                count: 'text-default-900'
+            },
+            info: {
+                borderLayer: 'bg-purple-500',
+                label: 'text-default-700',
+                count: 'text-default-900'
+            }
+        },
+        active: {
+            true: {
+                innerLayer: 'bg-blue-50 hover:bg-blue-100'
+            }
+        },
+        equalWidth: {
+            true: { stage: 'flex-1' }
+        },
+        interactive: {
+            true: {
+                innerLayer: 'cursor-pointer hover:bg-default-100 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+            }
+        },
+        disabled: {
+            true: {
+                stage: 'opacity-50 cursor-not-allowed'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'base',
+        color: 'default',
+        equalWidth: true
+    }
+});

package/package.json

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