@makolabs/ripple 0.0.1-dev.7 → 0.0.1-dev.9

package/dist/button/button.js

@@ -1,4 +1,5 @@
-import { tv } from '../helper/cls.js';
+import { tv } from 'tailwind-variants';
+import { Color, Size } from '../variants.js';
 export const buttonVariants = tv({
     base: `
 		inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none
@@ -12,21 +13,21 @@ export const buttonVariants = tv({
             link: 'bg-transparent underline-offset-4 hover:underline shadow-none'
         },
         color: {
-            default: 'bg-default-900 text-white hover:bg-default-800 focus-visible:ring-default-500',
-            primary: 'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500',
-            secondary: 'bg-secondary-600 text-white hover:bg-secondary-700 focus-visible:ring-secondary-500',
-            info: 'bg-info-600 text-white hover:bg-info-700 focus-visible:ring-info-500',
-            success: 'bg-success-600 text-white hover:bg-success-700 focus-visible:ring-success-500',
-            warning: 'bg-warning-600 text-white hover:bg-warning-700 focus-visible:ring-warning-500',
-            danger: 'bg-danger-600 text-white hover:bg-danger-700 focus-visible:ring-danger-500'
+            [Color.DEFAULT]: 'bg-default-900 text-white hover:bg-default-800 focus-visible:ring-default-500',
+            [Color.PRIMARY]: 'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500',
+            [Color.SECONDARY]: 'bg-secondary-600 text-white hover:bg-secondary-700 focus-visible:ring-secondary-500',
+            [Color.INFO]: 'bg-info-600 text-white hover:bg-info-700 focus-visible:ring-info-500',
+            [Color.SUCCESS]: 'bg-success-600 text-white hover:bg-success-700 focus-visible:ring-success-500',
+            [Color.WARNING]: 'bg-warning-600 text-white hover:bg-warning-700 focus-visible:ring-warning-500',
+            [Color.DANGER]: 'bg-danger-600 text-white hover:bg-danger-700 focus-visible:ring-danger-500'
         },
         size: {
-            xs: 'h-7 px-2 text-xs',
-            sm: 'h-8 px-3 text-sm',
-            base: 'h-9 px-4 text-sm',
-            lg: 'h-10 px-5 text-base',
-            xl: 'h-12 px-6 text-lg',
-            '2xl': 'h-14 px-8 text-xl'
+            [Size.XS]: 'h-7 px-2 text-xs',
+            [Size.SM]: 'h-8 px-3 text-sm',
+            [Size.BASE]: 'h-9 px-4 text-sm',
+            [Size.LG]: 'h-10 px-5 text-base',
+            [Size.XL]: 'h-12 px-6 text-lg',
+            [Size.XXL]: 'h-14 px-8 text-xl'
         },
         rounded: {
             none: 'rounded-none',

package/dist/charts/Chart.svelte

@@ -0,0 +1,533 @@
+<script lang="ts">
+	import { onMount, onDestroy, tick } from 'svelte';
+	import { cn } from '../helper/cls.js';
+	import * as echarts from 'echarts/core';
+	// @ts-expect-error - ECharts types are not available
+	import { LineChart, BarChart, PieChart } from 'echarts/charts';
+	import {
+		// @ts-expect-error - ECharts types are not available
+		GridComponent,
+		// @ts-expect-error - ECharts types are not available
+		TooltipComponent,
+		// @ts-expect-error - ECharts types are not available
+		TitleComponent,
+		// @ts-expect-error - ECharts types are not available
+		LegendComponent,
+		// @ts-expect-error - ECharts types are not available
+		DataZoomComponent,
+		// @ts-expect-error - ECharts types are not available
+		ToolboxComponent,
+		// @ts-expect-error - ECharts types are not available
+		MarkLineComponent,
+		// @ts-expect-error - ECharts types are not available
+		MarkPointComponent,
+		// @ts-expect-error - ECharts types are not available
+		GraphicComponent
+	} from 'echarts/components';
+	// @ts-expect-error - ECharts types are not available
+	import { SVGRenderer } from 'echarts/renderers';
+	import type { ChartProps, ChartColors, ChartColorString } from '../index.js';
+
+	// @ts-expect-error - ECharts types are not available
+	echarts.use([
+		LineChart,
+		BarChart,
+		PieChart,
+		GridComponent,
+		TooltipComponent,
+		TitleComponent,
+		LegendComponent,
+		DataZoomComponent,
+		ToolboxComponent,
+		MarkLineComponent,
+		MarkPointComponent,
+		SVGRenderer,
+		GraphicComponent
+	]);
+
+	let {
+		data = [],
+		config,
+		height = '400px',
+		width = '100%',
+		class: className = '',
+		colors = {},
+		onpointclick,
+		onchartrender
+	}: ChartProps<any> = $props();
+
+	const theme = 'light';
+	const AnimationDuration = 1200;
+
+	const xAxis = $derived(config.xAxis);
+	const yAxis = $derived(config.yAxis);
+	const series = $derived(config.series);
+
+	const grid = $derived(
+		config.grid || {
+			horizontal: true,
+			vertical: false,
+			containLabel: true
+		}
+	);
+	const legend = $derived({
+		show: true,
+		position: 'top',
+		orient: 'horizontal',
+		...(config.legend || {})
+	});
+	const tooltip = $derived(
+		config.tooltip || {
+			show: true,
+			trigger: 'axis',
+			formatter: undefined
+		}
+	);
+	const toolbox = $derived(
+		config.toolbox || {
+			show: false,
+			features: {
+				saveAsImage: true,
+				dataView: false,
+				dataZoom: false,
+				magicType: true,
+				restore: true
+			}
+		}
+	);
+
+	// Check if we have a pie/donut chart
+	const hasPieChart = $derived(series.some((s) => s.type === 'pie'));
+
+	let chartContainer: HTMLDivElement;
+	// @ts-expect-error - ECharts types are not available
+	let chart: echarts.ECharts;
+	let resizeObserver: ResizeObserver;
+
+	const defaultChartColors: ChartColors = {
+		health: '#1F69FF',
+		property: '#2D9D78',
+		auto: '#E8A317',
+		life: '#E34974',
+		other: '#7B3FE4',
+		default: '#6B7280'
+	};
+
+	const chartColors: ChartColors = { ...defaultChartColors, ...colors };
+
+	function getColor(color?: ChartColorString): string | undefined {
+		return color ? chartColors[color as keyof ChartColors] || color : undefined;
+	}
+
+	function getSeriesColors(count: number): string[] {
+		const baseColors = [
+			chartColors.health,
+			chartColors.other,
+			chartColors.property,
+			chartColors.auto,
+			chartColors.life,
+			chartColors.default
+		];
+
+		let colors = [...baseColors];
+		while (colors.length < count) {
+			const index = colors.length % baseColors.length;
+			const baseColor = baseColors[index];
+			const r = parseInt(baseColor.slice(1, 3), 16);
+			const g = parseInt(baseColor.slice(3, 5), 16);
+			const b = parseInt(baseColor.slice(5, 7), 16);
+			const factor = 0.8 + (colors.length / baseColors.length) * 0.4;
+			const newColor = `#${Math.min(255, Math.floor(r * factor))
+				.toString(16)
+				.padStart(2, '0')}${Math.min(255, Math.floor(g * factor))
+				.toString(16)
+				.padStart(2, '0')}${Math.min(255, Math.floor(b * factor))
+				.toString(16)
+				.padStart(2, '0')}`;
+			colors.push(newColor);
+		}
+
+		return colors.slice(0, count);
+	}
+
+	function formatValue(value: any, format?: (value: any) => string, unit?: string): string {
+		if (format) {
+			return format(value);
+		}
+
+		if (unit) {
+			return `${value}${unit}`;
+		}
+
+		return String(value);
+	}
+
+	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
+				}));
+
+				return {
+					name: seriesConfig.name || seriesConfig.dataKey,
+					type: 'pie',
+					radius: seriesConfig.radius || ['0%', '70%'],
+					avoidLabelOverlap: true,
+					itemStyle: {
+						borderRadius: 4,
+						borderWidth: 2,
+						borderColor: '#fff',
+						color: getColor(seriesConfig.color)
+					},
+					label: {
+						show: seriesConfig.showLabel !== undefined ? seriesConfig.showLabel : true
+					},
+					labelLine: {
+						show: seriesConfig.showLabel !== undefined ? seriesConfig.showLabel : true
+					},
+					data: pieData,
+					animation: true,
+					animationDuration: AnimationDuration,
+					emphasis: seriesConfig.emphasis || { focus: 'series' }
+				};
+			}
+
+			const isHorizontalBar = seriesType === 'horizontal-bar';
+			const actualType = isHorizontalBar ? 'bar' : seriesType;
+
+			const seriesData = data.map((item) => ({
+				value: item[seriesConfig.dataKey],
+				name: item[xAxis.dataKey]
+			}));
+
+			const barSeriesCount = series.filter(
+				(s) => s.type === 'bar' || s.type === 'horizontal-bar'
+			).length;
+
+			return {
+				name: seriesConfig.name || seriesConfig.dataKey,
+				type: actualType,
+				yAxisIndex: seriesConfig.yAxisIndex || 0,
+				data: seriesData,
+				stack: seriesConfig.stack,
+				color: getColor(seriesConfig.color),
+				emphasis: seriesConfig.emphasis || { focus: 'series' },
+				animation: true,
+				animationDuration: AnimationDuration,
+
+				...(actualType === 'line' && {
+					smooth: seriesConfig.smooth !== undefined ? seriesConfig.smooth : true,
+					showSymbol: seriesConfig.showSymbol !== undefined ? seriesConfig.showSymbol : true,
+					symbolSize: 6,
+					lineStyle: {
+						width: seriesConfig.lineWidth || 2,
+						color: getColor(seriesConfig.color),
+						type: seriesConfig.lineStyle?.type || 'solid'
+					},
+					areaStyle: seriesConfig.showArea
+						? {
+								color: {
+									type: 'linear',
+									x: 0,
+									y: 0,
+									x2: 0,
+									y2: 1,
+									colorStops: [
+										{
+											offset: 0,
+											color:
+												getColor(seriesConfig.color) +
+												Math.floor((seriesConfig.areaOpacity || 0.2) * 255).toString(16)
+										},
+										{
+											offset: 1,
+											color: getColor(seriesConfig.color) + '00'
+										}
+									]
+								}
+							}
+						: undefined
+				}),
+
+				...(actualType === 'bar' && {
+					name: seriesConfig.name || seriesConfig.dataKey,
+					type: actualType,
+					yAxisIndex: seriesConfig.yAxisIndex || 0,
+					data: seriesData,
+					stack: null,
+					barWidth:
+						seriesConfig.barWidth ||
+						(barSeriesCount > 3 ? '15%' : barSeriesCount > 1 ? '25%' : '60%'),
+					barCategoryGap: '20%',
+					barGap: '10%',
+					color: getColor(seriesConfig.color),
+					itemStyle: {
+						color: getColor(seriesConfig.color),
+						borderRadius: [4, 4, 0, 0],
+						opacity: seriesConfig.opacity || 1
+					}
+				}),
+
+				label: {
+					show: seriesConfig.showLabel || false,
+					position: actualType === 'line' ? 'top' : 'inside',
+					// @ts-expect-error - ECharts types are not available
+					formatter: (params) => {
+						const yAxisIndex = seriesConfig.yAxisIndex || 0;
+						const axisConfig = yAxis[yAxisIndex];
+						return formatValue(params.value, axisConfig.format, axisConfig.unit);
+					}
+				}
+			};
+		});
+	}
+
+	function defaultFormatter(params: any) {
+		if (Array.isArray(params)) {
+			const item = params[0];
+			let html = `<div style="font-weight: bold; margin-bottom: 5px;">${item.name}</div>`;
+
+			params.forEach((param) => {
+				const seriesItem = series.find(
+					(s) => s.name === param.seriesName || s.dataKey === param.seriesName
+				);
+
+				if (seriesItem?.type === 'pie') {
+					html += `<div style="display: flex; align-items: center; margin: 3px 0;">
+						<span style="display: inline-block; width: 10px; height: 10px; background: ${param.color}; border-radius: 50%; margin-right: 5px;"></span>
+						<span>${param.seriesName}: ${param.value} (${param.percent}%)</span>
+					</div>`;
+				} else {
+					const yAxisIndex = seriesItem?.yAxisIndex || 0;
+					const axisConfig = yAxis[yAxisIndex];
+					const formattedValue = formatValue(param.value, axisConfig.format, axisConfig.unit);
+
+					html += `<div style="display: flex; align-items: center; margin: 3px 0;">
+						<span style="display: inline-block; width: 10px; height: 10px; background: ${param.color}; border-radius: 50%; margin-right: 5px;"></span>
+						<span>${param.seriesName}: ${formattedValue}</span>
+					</div>`;
+				}
+			});
+
+			return html;
+		} else {
+			if (params.seriesType === 'pie') {
+				return `${params.name}: ${params.value} (${params.percent}%)`;
+			}
+
+			const seriesItem = series.find(
+				(s) => s.name === params.seriesName || s.dataKey === params.seriesName
+			);
+			const yAxisIndex = seriesItem?.yAxisIndex || 0;
+			const axisConfig = yAxis[yAxisIndex];
+			const formattedValue = formatValue(params.value, axisConfig.format, axisConfig.unit);
+
+			return `${params.seriesName}: ${formattedValue}`;
+		}
+	}
+
+	function updateChart() {
+		if (!chart || !data || !series) return;
+
+		const colorPalette = getSeriesColors(series.length);
+
+		if (hasPieChart) {
+			// Configure for pie chart
+			const pieOptions = {
+				color: colorPalette,
+
+				tooltip: {
+					show: tooltip.show,
+					trigger: 'item',
+					formatter: tooltip.formatter || '{b}: {c} ({d}%)'
+				},
+
+				legend: {
+					show: legend.show,
+					type: 'scroll',
+					orient: legend.orient,
+					...(legend.position === 'top' && { top: 0, left: 'center' }),
+					...(legend.position === 'bottom' && { bottom: 0, left: 'center' }),
+					...(legend.position === 'left' && { left: 0, top: 'middle' }),
+					...(legend.position === 'right' && { right: 0, top: 'middle' })
+				},
+
+				series: configureSeries()
+			};
+
+			// Add center text if specified in the first pie series
+			const pieSeriesWithCenterText = series.find((s) => s.type === 'pie' && s.centerText);
+			if (pieSeriesWithCenterText?.centerText) {
+				// @ts-expect-error - ECharts types are not available
+				pieOptions.graphic = {
+					elements: [
+						{
+							type: 'text',
+							left: 'center',
+							top: 'center',
+							style: {
+								text: pieSeriesWithCenterText.centerText,
+								fontSize: 20,
+								fontWeight: 'bold'
+							}
+						}
+					]
+				};
+			}
+
+			chart.setOption(pieOptions, true);
+		} else {
+			// Regular chart configuration
+			const categories = data.map((item) => item[xAxis.dataKey]);
+
+			const options = {
+				color: colorPalette,
+
+				tooltip: {
+					show: tooltip.show,
+					trigger: tooltip.trigger,
+					formatter: tooltip.formatter || defaultFormatter
+				},
+
+				legend: {
+					show: legend.show,
+					type: 'scroll',
+					orient: legend.orient,
+					...(legend.position === 'top' && { top: 0, left: 'center' }),
+					...(legend.position === 'bottom' && { bottom: 0, left: 'center' }),
+					...(legend.position === 'left' && { left: 0, top: 'middle' }),
+					...(legend.position === 'right' && { right: 0, top: 'middle' })
+				},
+
+				grid: {
+					top: legend.position === 'top' ? '15%' : grid.top || '10%',
+					right: grid.right || '3%',
+					bottom: legend.position === 'bottom' ? '15%' : grid.bottom || '10%',
+					left: grid.left || '3%',
+					containLabel: grid.containLabel !== undefined ? grid.containLabel : true
+				},
+
+				xAxis: {
+					type: 'category',
+					data: categories,
+					axisLabel: {
+						...(xAxis.tick && {
+							fontSize: xAxis.tick.fontSize,
+							rotate: xAxis.tick.rotate,
+							interval: xAxis.tick.interval
+						}),
+						formatter: xAxis.format || '{value}'
+					},
+					name: xAxis.label,
+					nameLocation: 'middle',
+					nameGap: 30,
+					splitLine: {
+						show: grid.vertical || false
+					}
+				},
+
+				yAxis: yAxis.map((axis, index) => ({
+					type: 'value',
+					name: axis.label,
+					nameLocation: 'middle',
+					nameGap: 50,
+					nameRotate: 90,
+					position: axis.position || (index === 0 ? 'left' : 'right'),
+					min: axis.min,
+					max: axis.max,
+					axisLine: {
+						show: true,
+						lineStyle: {
+							color: getColor(axis.color)
+						}
+					},
+					axisLabel: {
+						// @ts-expect-error - ECharts types are not available
+						formatter: (value) => formatValue(value, axis.format, axis.unit)
+					},
+					splitLine: {
+						show: index === 0 ? grid.horizontal || true : false
+					}
+				})),
+
+				toolbox: toolbox.show
+					? {
+							feature: {
+								...(toolbox.features?.saveAsImage && { saveAsImage: {} }),
+								...(toolbox.features?.dataView && { dataView: { readOnly: false } }),
+								...(toolbox.features?.dataZoom && { dataZoom: { yAxisIndex: 'none' } }),
+								...(toolbox.features?.magicType && {
+									magicType: { type: ['line', 'bar', 'stack'] }
+								}),
+								...(toolbox.features?.restore && { restore: {} })
+							}
+						}
+					: undefined,
+
+				series: configureSeries()
+			};
+
+			chart.setOption(options, true);
+		}
+
+		if (onchartrender) {
+			onchartrender({
+				detail: {
+					chart,
+					options: chart.getOption()
+				}
+			});
+		}
+	}
+
+	onMount(() => {
+		// @ts-expect-error - ECharts types are not available
+		chart = echarts.init(chartContainer, theme);
+
+		// Instantly triggering resizes disables animation, hence the timeout
+		setTimeout(() => {
+			resizeObserver = new ResizeObserver(() => {
+				chart?.resize();
+			});
+			resizeObserver.observe(chartContainer);
+		}, AnimationDuration);
+
+		updateChart();
+		// @ts-expect-error - ECharts types are not available
+		chart.on('click', (params) => {
+			if (onpointclick) {
+				onpointclick({
+					detail: {
+						seriesIndex: params.seriesIndex,
+						dataIndex: params.dataIndex,
+						seriesName: params.seriesName,
+						name: params.name,
+						value: params.value,
+						originalData: data[params.dataIndex]
+					}
+				});
+			}
+		});
+	});
+
+	$effect(() => {
+		if (chart && data && series) {
+			updateChart();
+		}
+	});
+
+	onDestroy(() => {
+		resizeObserver?.disconnect();
+		chart?.dispose();
+	});
+</script>
+
+<div
+	class={cn('advanced-chart', className)}
+	style="height: {height}; width: {width}"
+	bind:this={chartContainer}
+></div>

package/dist/charts/Chart.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChartProps } from '../index.js';
+declare const Chart: import("svelte").Component<ChartProps<any>, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

package/dist/drawer/Drawer.svelte

@@ -4,7 +4,8 @@
 	import { fade, fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 	import { cn } from '../helper/cls.js';
-	import { drawer, type DrawerProps } from './drawer.js';
+	import { drawer } from './drawer.js';
+	import type { DrawerProps } from '../index.js';
 
 	let {
 		open = $bindable(false),
@@ -14,12 +15,14 @@
 		size = 'sm',
 		children,
 		header,
+		footer,
 		class: className = '',
 		backdropclass: backdropClassName = '',
 		contentclass: contentClassName = '',
 		headerclass: headerClassName = '',
 		bodyclass: bodyClassName = '',
-		titleclass: titleClassName = ''
+		titleclass: titleClassName = '',
+		footerclass: footerClassName = ''
 	}: DrawerProps = $props();
 
 	let drawerElement: HTMLDivElement | undefined = $state();
@@ -50,6 +53,7 @@
 	const bodyClass = $derived(cn(body(), bodyClassName));
 	const titleClasses = $derived(cn(titleClass(), titleClassName));
 	const closeButtonClasses = $derived(cn(closeButton(), ''));
+	const footerClass = $derived(cn(footerVClass(), 'mt-auto', footerClassName));
 
 	function handleBackdropClick(e: MouseEvent) {
 		if (e.target === e.currentTarget) {
@@ -206,6 +210,13 @@
 							{@render children()}
 						{/if}
 					</div>
+
+					<!-- Add footer section -->
+					{#if footer}
+						<div class={footerClass}>
+							{@render footer()}
+						</div>
+					{/if}
 				</div>
 			</div>
 		{/key}

package/dist/drawer/Drawer.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type DrawerProps } from './drawer.js';
+import type { DrawerProps } from '../index.js';
 declare const Drawer: import("svelte").Component<DrawerProps, {}, "open">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

package/dist/drawer/drawer.d.ts

@@ -1,5 +1,3 @@
-import type { VariantSizes } from '../types/variants.js';
-import type { Snippet } from 'svelte';
 export declare const drawer: import("tailwind-variants").TVReturnType<{
     open: {
         true: {
@@ -160,18 +158,3 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
     title: string;
     closeButton: string;
 }, undefined, unknown, unknown, undefined>>;
-export type DrawerProps = {
-    open?: boolean;
-    onclose?: () => void;
-    title?: string;
-    position?: keyof typeof drawer.variants.position;
-    size?: VariantSizes;
-    class?: string;
-    backdropclass?: string;
-    contentclass?: string;
-    headerclass?: string;
-    bodyclass?: string;
-    titleclass?: string;
-    children?: Snippet;
-    header?: Snippet;
-};