@makolabs/ripple 2.2.0 → 2.3.0

package/dist/charts/Chart.svelte

@@ -19,7 +19,10 @@
 		type ChartProps,
 		type ChartColorString,
 		type ChartColors,
-		type SeriesConfig
+		type ChartThreshold,
+		type ChartAnnotation,
+		type SeriesConfig,
+		type TooltipConfig
 	} from '../index.js';
 	import { defaultChartColors } from '../variants.js';
 
@@ -71,13 +74,12 @@
 		orient: 'horizontal',
 		...(config.legend || {})
 	});
-	const tooltip = $derived(
-		config.tooltip || {
-			show: true,
-			trigger: 'axis',
-			formatter: undefined
-		}
-	);
+	const tooltip = $derived({
+		show: true,
+		trigger: 'axis' as const,
+		formatter: undefined as TooltipConfig['formatter'],
+		...(config.tooltip || {})
+	});
 	const toolbox = $derived(
 		config.toolbox || {
 			show: false,
@@ -113,35 +115,106 @@
 		return color ? chartColors[color as keyof ChartColors] || color : undefined;
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	function getAreaStyle(seriesConfig: SeriesConfig<any>) {
-		if (!seriesConfig.color) return undefined;
-		if (!seriesConfig.showArea) return undefined;
+	function hexToRgb(hex: string): [number, number, number] {
+		const h = hex.replace('#', '');
+		return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+	}
+
+	function rgbToHex(r: number, g: number, b: number): string {
+		return (
+			'#' +
+			[r, g, b]
+				.map((v) =>
+					Math.max(0, Math.min(255, Math.round(v)))
+						.toString(16)
+						.padStart(2, '0')
+				)
+				.join('')
+		);
+	}
+
+	function lighten(hex: string, amount: number): string {
+		const [r, g, b] = hexToRgb(hex);
+		return rgbToHex(r + (255 - r) * amount, g + (255 - g) * amount, b + (255 - b) * amount);
+	}
+
+	function darken(hex: string, amount: number): string {
+		const [r, g, b] = hexToRgb(hex);
+		return rgbToHex(r * (1 - amount), g * (1 - amount), b * (1 - amount));
+	}
 
-		const baseLinearAreaStyle = {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function barGradient(baseHex: string, stacked: boolean): any {
+		if (stacked) {
+			// Horizontal sheen — same light direction for all segments
+			return {
+				type: 'linear',
+				x: 0,
+				y: 0,
+				x2: 1,
+				y2: 0,
+				colorStops: [
+					{ offset: 0, color: baseHex },
+					{ offset: 0.5, color: lighten(baseHex, 0.1) },
+					{ offset: 1, color: baseHex }
+				]
+			};
+		}
+		// Standalone bars — top-to-bottom depth
+		return {
 			type: 'linear',
 			x: 0,
 			y: 0,
 			x2: 0,
-			y2: 1
+			y2: 1,
+			colorStops: [
+				{ offset: 0, color: lighten(baseHex, 0.2) },
+				{ offset: 0.6, color: baseHex },
+				{ offset: 1, color: darken(baseHex, 0.15) }
+			]
+		};
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function lineGradient(baseHex: string): any {
+		return {
+			type: 'linear',
+			x: 0,
+			y: 0,
+			x2: 1,
+			y2: 0,
+			colorStops: [
+				{ offset: 0, color: darken(baseHex, 0.05) },
+				{ offset: 0.5, color: baseHex },
+				{ offset: 1, color: lighten(baseHex, 0.1) }
+			]
 		};
-		const color = getColor(seriesConfig.color);
-		const opacity = seriesConfig.areaOpacity || 0.2;
-		const opacityHex = Math.floor(opacity * 255)
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function getAreaStyle(seriesConfig: SeriesConfig<any>) {
+		if (!seriesConfig.color) return undefined;
+		if (!seriesConfig.showArea) return undefined;
+
+		const color = getColor(seriesConfig.color) ?? '#6366f1';
+		const opacity = seriesConfig.areaOpacity || 0.25;
+		const opHigh = Math.floor(opacity * 255)
+			.toString(16)
+			.padStart(2, '0');
+		const opMid = Math.floor(opacity * 0.4 * 255)
 			.toString(16)
 			.padStart(2, '0');
 		return {
 			color: {
-				...baseLinearAreaStyle,
+				type: 'linear',
+				x: 0,
+				y: 0,
+				x2: 0,
+				y2: 1,
 				colorStops: [
-					{
-						offset: 0,
-						color: color + opacityHex
-					},
-					{
-						offset: 1,
-						color: color + '00'
-					}
+					{ offset: 0, color: color + opHigh },
+					{ offset: 0.6, color: color + opMid },
+					{ offset: 1, color: color + '00' }
 				]
 			}
 		};
@@ -182,16 +255,128 @@
 		return String(value);
 	}
 
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function buildMarkLineFromThresholds(axis: 'x' | 'y'): any {
+		const axisCfgs = axis === 'x' ? [xAxis] : yAxis;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const lines: any[] = [];
+		let lineIdx = 0;
+
+		for (const cfg of axisCfgs) {
+			if (!cfg.thresholds) continue;
+			for (const t of cfg.thresholds) {
+				// Alternate label positions to reduce overlap
+				const pos =
+					axis === 'x' ? 'insideEndTop' : lineIdx % 2 === 0 ? 'insideStartTop' : 'insideEndTop';
+
+				if (t === 'average') {
+					lines.push({
+						type: 'average',
+						name: 'Avg',
+						label: { formatter: 'Avg', position: pos, fontSize: 11 },
+						lineStyle: { type: 'dashed', color: '#6b7280', width: 1 }
+					});
+				} else {
+					const resolved = t as ChartThreshold;
+					const color = getColor(resolved.color) ?? '#6b7280';
+					const entry = axis === 'x' ? { xAxis: resolved.value } : { yAxis: resolved.value };
+					lines.push({
+						...entry,
+						label: resolved.label
+							? {
+									formatter: resolved.label,
+									position: pos,
+									fontSize: 11,
+									color,
+									...(axis === 'x' && { rotate: 0 })
+								}
+							: { show: false },
+						lineStyle: {
+							type: resolved.style ?? 'dashed',
+							color,
+							width: 2
+						}
+					});
+				}
+				lineIdx++;
+			}
+		}
+		if (lines.length === 0) return undefined;
+		return { silent: true, symbol: 'none', data: lines };
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function buildMarkPointsFromData(seriesDataKey: string | number | symbol): any {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const points: any[] = [];
+		data.forEach((item) => {
+			const annotation = item.annotation as ChartAnnotation | undefined;
+			if (!annotation) return;
+			const xVal = String(item[xAxis.dataKey]);
+			const yVal = item[seriesDataKey as keyof typeof item];
+			if (yVal === undefined) return;
+			const color = getColor(annotation.color) ?? undefined;
+			// Use category name string for x — matches the xAxis.data categories
+			points.push({
+				coord: [xVal, yVal],
+				symbol: 'circle',
+				symbolSize: 12,
+				...(color && { itemStyle: { color } }),
+				label: annotation.label
+					? {
+							formatter: annotation.label,
+							position: 'top',
+							distance: 8,
+							color: color ?? '#374151',
+							fontSize: 11,
+							fontWeight: 500
+						}
+					: { show: false }
+			});
+		});
+		if (points.length === 0) return undefined;
+		return { data: points };
+	}
+
+	function mergeMarkLine(
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		a: any | undefined,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		b: any | undefined
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	): any | undefined {
+		if (!a && !b) return undefined;
+		if (!a) return b;
+		if (!b) return a;
+		return { ...a, data: [...(a.data ?? []), ...(b.data ?? [])] };
+	}
+
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	function configureSeries(): any[] {
 		return series.map((seriesConfig) => {
 			const seriesType = seriesConfig.type || 'line';
 
 			if (seriesType === 'pie') {
-				const pieData = data.map((item) => ({
-					value: item[seriesConfig.dataKey],
-					name: item[xAxis?.dataKey] || item.label
-				}));
+				const sliceColors = getSeriesColors(data.length);
+				const pieData = data.map((item, i) => {
+					const baseHex = getColor(seriesConfig.color) ?? sliceColors[i % sliceColors.length];
+					return {
+						value: item[seriesConfig.dataKey],
+						name: item[xAxis?.dataKey] || item.label,
+						itemStyle: {
+							color: {
+								type: 'radial',
+								x: 0.4,
+								y: 0.35,
+								r: 0.8,
+								colorStops: [
+									{ offset: 0, color: lighten(baseHex, 0.15) },
+									{ offset: 1, color: darken(baseHex, 0.1) }
+								]
+							}
+						}
+					};
+				});
 
 				return {
 					name: seriesConfig.name || seriesConfig.dataKey,
@@ -201,19 +386,24 @@
 					itemStyle: {
 						borderRadius: 4,
 						borderWidth: 2,
-						borderColor: '#fff',
-						color: getColor(seriesConfig.color)
+						borderColor: '#fff'
 					},
 					label: {
-						show: seriesConfig.showLabel !== undefined ? seriesConfig.showLabel : true
+						show: seriesConfig.showLabel !== undefined ? seriesConfig.showLabel : true,
+						color: '#374151',
+						fontSize: 12
 					},
 					labelLine: {
-						show: seriesConfig.showLabel !== undefined ? seriesConfig.showLabel : true
+						show: seriesConfig.showLabel !== undefined ? seriesConfig.showLabel : true,
+						lineStyle: { color: '#d1d5db' }
 					},
 					data: pieData,
 					animation: true,
 					animationDuration: AnimationDuration,
-					emphasis: seriesConfig.emphasis || { focus: 'series' }
+					emphasis: seriesConfig.emphasis || {
+						focus: 'self',
+						itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0,0,0,0.15)' }
+					}
 				};
 			}
 
@@ -229,6 +419,13 @@
 				(s) => s.type === 'bar' || s.type === 'horizontal-bar'
 			).length;
 
+			// Thresholds attach to the first non-pie series; annotations attach per-series
+			const isFirstNonPie = series.filter((s) => s.type !== 'pie').indexOf(seriesConfig) === 0;
+			const xMarkLine = isFirstNonPie ? buildMarkLineFromThresholds('x') : undefined;
+			const yMarkLine = isFirstNonPie ? buildMarkLineFromThresholds('y') : undefined;
+			const axisMarkLine = mergeMarkLine(xMarkLine, yMarkLine);
+			const pointAnnotations = buildMarkPointsFromData(seriesConfig.dataKey);
+
 			return {
 				name: seriesConfig.name || seriesConfig.dataKey,
 				type: actualType,
@@ -236,17 +433,30 @@
 				data: seriesData,
 				stack: seriesConfig.stack,
 				color: getColor(seriesConfig.color),
-				emphasis: seriesConfig.emphasis || { focus: 'series' },
+				emphasis: seriesConfig.emphasis || {
+					focus: 'series',
+					blurScope: 'global'
+				},
+				blur: { itemStyle: { opacity: 0.25 }, lineStyle: { opacity: 0.25 } },
 				animation: true,
 				animationDuration: AnimationDuration,
+				...(axisMarkLine && { markLine: axisMarkLine }),
+				...(pointAnnotations && { markPoint: pointAnnotations }),
 
 				...(actualType === 'line' && {
 					smooth: seriesConfig.smooth !== undefined ? seriesConfig.smooth : true,
 					showSymbol: seriesConfig.showSymbol !== undefined ? seriesConfig.showSymbol : true,
-					symbolSize: 6,
-					lineStyle: {
-						width: seriesConfig.lineWidth || 2,
+					symbolSize: 8,
+					itemStyle: {
 						color: getColor(seriesConfig.color),
+						borderColor: '#fff',
+						borderWidth: 2,
+						shadowColor: (getColor(seriesConfig.color) ?? '#6366f1') + '40',
+						shadowBlur: 6
+					},
+					lineStyle: {
+						width: seriesConfig.lineWidth || 2.5,
+						color: lineGradient(getColor(seriesConfig.color) ?? '#6366f1'),
 						type: seriesConfig.lineStyle?.type || 'solid'
 					},
 					areaStyle: getAreaStyle(seriesConfig)
@@ -264,11 +474,18 @@
 					barCategoryGap: '20%',
 					barGap: '10%',
 					color: getColor(seriesConfig.color),
-					itemStyle: {
-						color: getColor(seriesConfig.color),
-						borderRadius: [0, 0, 0, 0],
-						opacity: seriesConfig.opacity || 1
-					}
+					itemStyle: (() => {
+						const baseHex = getColor(seriesConfig.color) ?? '#6366f1';
+						const isStacked = !!seriesConfig.stack;
+						const isLastInStack = isStacked
+							? series.filter((s) => s.stack === seriesConfig.stack).at(-1) === seriesConfig
+							: true;
+						return {
+							color: barGradient(baseHex, isStacked),
+							borderRadius: isLastInStack ? [4, 4, 0, 0] : [0, 0, 0, 0],
+							opacity: seriesConfig.opacity ?? 1
+						};
+					})()
 				}),
 
 				label: {
@@ -384,19 +601,41 @@
 			// Regular chart configuration
 			const categories = data.map((item) => item[xAxis.dataKey]);
 
+			const systemFont =
+				"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
 			const options = {
 				color: colorPalette,
+				textStyle: { fontFamily: systemFont },
 
 				tooltip: {
 					show: tooltip.show,
 					trigger: tooltip.trigger,
-					formatter: tooltip.formatter || defaultFormatter
+					formatter: tooltip.formatter || defaultFormatter,
+					backgroundColor: 'rgba(255, 255, 255, 0.96)',
+					borderColor: 'transparent',
+					borderRadius: 8,
+					padding: [10, 14],
+					textStyle: { color: '#374151', fontSize: 12 },
+					extraCssText: 'box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);',
+					axisPointer: {
+						type: 'line',
+						lineStyle: {
+							color: '#d1d5db',
+							width: 1,
+							type: 'solid'
+						},
+						crossStyle: { color: '#d1d5db' }
+					}
 				},
 
 				legend: {
 					show: legend.show,
 					type: 'scroll',
 					orient: legend.orient,
+					textStyle: { color: '#6b7280', fontSize: 12 },
+					itemWidth: 14,
+					itemHeight: 8,
+					itemGap: 16,
 					...(legend.position === 'top' && { top: 0, left: 'center' }),
 					...(legend.position === 'bottom' && { bottom: 0, left: 'center' }),
 					...(legend.position === 'left' && { left: 0, top: 'middle' }),
@@ -404,17 +643,22 @@
 				},
 
 				grid: {
-					top: legend.position === 'top' ? '15%' : grid.top || '10%',
-					right: grid.right || '3%',
+					top: legend.position === 'top' ? '18%' : grid.top || '12%',
+					right: grid.right || '4%',
 					bottom: legend.position === 'bottom' ? '15%' : grid.bottom || '10%',
-					left: grid.left || '3%',
-					containLabel: grid.containLabel !== undefined ? grid.containLabel : true
+					left: grid.left || '4%',
+					containLabel: grid.containLabel !== undefined ? grid.containLabel : true,
+					backgroundColor: 'rgba(249, 250, 251, 0.5)',
+					show: true,
+					borderColor: 'transparent'
 				},
 
 				xAxis: {
 					type: 'category',
 					data: categories,
 					axisLabel: {
+						color: '#6b7280',
+						fontSize: 12,
 						...(xAxis.tick && {
 							fontSize: xAxis.tick.fontSize,
 							rotate: xAxis.tick.rotate,
@@ -422,6 +666,7 @@
 						}),
 						formatter: xAxis.format || '{value}'
 					},
+					axisTick: { show: false },
 					boundaryGap: series.every((s) => s.type === 'line')
 						? false
 						: series.some((s) => s.type === 'bar' || s.type === 'horizontal-bar')
@@ -430,11 +675,14 @@
 					name: xAxis.label,
 					nameLocation: 'middle',
 					nameGap: 30,
+					nameTextStyle: { color: '#6b7280', fontSize: 12 },
 					splitLine: {
-						show: grid.vertical || false
+						show: grid.vertical || false,
+						lineStyle: { color: '#f3f4f6' }
 					},
 					axisLine: xAxis.axisLine || {
-						show: false
+						show: true,
+						lineStyle: { color: '#e5e7eb', width: 1 }
 					}
 				},
 
@@ -444,18 +692,24 @@
 					nameLocation: 'middle',
 					nameGap: 50,
 					nameRotate: 90,
+					nameTextStyle: { color: '#6b7280', fontSize: 12 },
 					position: axis.position || (index === 0 ? 'left' : 'right'),
 					min: axis.min,
 					max: axis.max,
 					axisLine: axis.axisLine || {
-						show: false
+						show: true,
+						lineStyle: { color: '#e5e7eb', width: 1 }
 					},
+					axisTick: { show: false },
 					axisLabel: {
+						color: '#9ca3af',
+						fontSize: 11,
 						// eslint-disable-next-line @typescript-eslint/no-explicit-any
 						formatter: (value: any) => formatValue(value, axis.format, axis.unit)
 					},
 					splitLine: {
-						show: index === 0 ? grid.horizontal || true : false
+						show: index === 0 ? grid.horizontal || true : false,
+						lineStyle: { color: '#f3f4f6', type: 'dashed' }
 					}
 				})),
 

package/dist/charts/chart-types.d.ts

@@ -8,6 +8,16 @@ export type ChartColors = {
 };
 export type ChartType = 'line' | 'bar' | 'horizontal-bar' | 'pie' | 'stacked-bar';
 export type ChartColorString = `#${string}` | keyof ChartColors;
+export type ChartThreshold = {
+    value: number | string;
+    label?: string;
+    color?: ChartColorString;
+    style?: 'solid' | 'dashed' | 'dotted';
+};
+export type ChartAnnotation = {
+    label?: string;
+    color?: ChartColorString;
+};
 export type XAxisConfig<T> = {
     dataKey: keyof T;
     label?: string;
@@ -25,6 +35,7 @@ export type XAxisConfig<T> = {
             type?: 'solid' | 'dashed' | 'dotted';
         };
     };
+    thresholds?: Array<ChartThreshold | 'average'>;
 };
 export type YAxisConfig<T> = {
     dataKey: keyof T;
@@ -42,6 +53,7 @@ export type YAxisConfig<T> = {
             type?: 'solid' | 'dashed' | 'dotted';
         };
     };
+    thresholds?: Array<ChartThreshold | 'average'>;
 };
 export interface SeriesConfig<T> {
     dataKey: keyof T;

package/dist/elements/accordion/Accordion.svelte

@@ -12,16 +12,20 @@
 		bordered,
 		color,
 		open = $bindable(false),
+		disabled = false,
 		onexpand,
 		oncollapse,
+		ontoggle,
 		class: className,
 		titleclass,
 		titleClass = titleclass ?? '',
 		bodyclass,
 		bodyClass = bodyclass ?? '',
+		contentClass,
 		headerclass,
 		headerClass = headerclass ?? '',
 		summary,
+		header,
 		children,
 		icon: Icon,
 		testId
@@ -47,13 +51,11 @@
 	);
 
 	function handleClick() {
-		if (!children) return; // Don't toggle if no children
+		if (!children || disabled) return;
 		open = !open;
-		if (open && onexpand) {
-			onexpand();
-		} else if (!open && oncollapse) {
-			oncollapse();
-		}
+		ontoggle?.(open);
+		if (open) onexpand?.();
+		else oncollapse?.();
 	}
 
 	const baseClasses = $derived(cn(styles.base(), className));
@@ -62,13 +64,24 @@
 <div class={baseClasses}>
 	{#if children}
 		<button
-			class={cn(styles.header(), 'flex gap-3', headerClass)}
+			class={cn(
+				styles.header(),
+				'flex gap-3',
+				headerClass,
+				disabled && 'cursor-not-allowed opacity-50'
+			)}
 			aria-expanded={open}
 			aria-controls={id}
+			aria-disabled={disabled ? 'true' : undefined}
+			{disabled}
 			onclick={handleClick}
 			data-testid={buildTestId('accordion', 'trigger', testId)}
 		>
-			{@render accordionHeaderContent()}
+			{#if header}
+				{@render header({ open })}
+			{:else}
+				{@render accordionHeaderContent()}
+			{/if}
 			<div class="flex items-center">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -87,7 +100,7 @@
 		</button>
 		{#if open}
 			<div
-				class={cn(styles.body(), bodyClass)}
+				class={cn(styles.body(), bodyClass, contentClass)}
 				{id}
 				data-testid={buildTestId('accordion', 'content', testId)}
 			>
@@ -96,7 +109,11 @@
 		{/if}
 	{:else}
 		<div class={cn(styles.header(), 'flex gap-3', headerClass)}>
-			{@render accordionHeaderContent()}
+			{#if header}
+				{@render header({ open })}
+			{:else}
+				{@render accordionHeaderContent()}
+			{/if}
 		</div>
 	{/if}
 </div>

package/dist/elements/accordion/accordion-types.d.ts

@@ -8,7 +8,11 @@ export type AccordionProps = {
     description?: string;
     children?: Snippet;
     summary?: Snippet;
+    header?: Snippet<[{
+        open: boolean;
+    }]>;
     open?: boolean;
+    disabled?: boolean;
     color?: VariantColors;
     class?: ClassValue;
     /** @deprecated Use titleClass instead */
@@ -17,6 +21,7 @@ export type AccordionProps = {
     /** @deprecated Use bodyClass instead */
     bodyclass?: ClassValue;
     bodyClass?: ClassValue;
+    contentClass?: ClassValue;
     /** @deprecated Use headerClass instead */
     headerclass?: ClassValue;
     headerClass?: ClassValue;
@@ -25,5 +30,6 @@ export type AccordionProps = {
     bordered?: boolean;
     onexpand?: () => void;
     oncollapse?: () => void;
+    ontoggle?: (open: boolean) => void;
     testId?: string;
 };