@makolabs/ripple 0.2.2-0 → 0.3.0

package/dist/charts/Chart.svelte

@@ -127,7 +127,7 @@
 	function getAreaStyle(seriesConfig: SeriesConfig<any>) {
 		if (!seriesConfig.color) return undefined;
 		if (!seriesConfig.showArea) return undefined;
-		
+
 		const baseLinearAreaStyle = {
 			type: 'linear',
 			x: 0,
@@ -265,7 +265,7 @@
 					type: actualType,
 					yAxisIndex: seriesConfig.yAxisIndex || 0,
 					data: seriesData,
-					stack: null,
+					stack: seriesConfig.stack,
 					barWidth:
 						seriesConfig.barWidth ||
 						(barSeriesCount > 3 ? '15%' : barSeriesCount > 1 ? '25%' : '60%'),
@@ -274,7 +274,7 @@
 					color: getColor(seriesConfig.color),
 					itemStyle: {
 						color: getColor(seriesConfig.color),
-						borderRadius: [4, 4, 0, 0],
+						borderRadius: [0, 0, 0, 0],
 						opacity: seriesConfig.opacity || 1
 					}
 				}),

package/dist/index.d.ts

@@ -165,18 +165,6 @@ export type AlertProps = {
     footer?: Snippet;
     icon?: Component;
 };
-export type StatsCardProps = {
-    label?: string;
-    value?: string | number;
-    previousValue?: string | number;
-    previousValuePrefix?: string;
-    trend?: number;
-    color?: VariantColors;
-    chartData?: number[];
-    children?: Snippet;
-    class?: ClassValue;
-    formatLargeNumbers?: boolean;
-};
 export type MetricDetail = {
     label: string;
     value: string | number;
@@ -355,7 +343,6 @@ export { default as Badge } from './elements/badge/Badge.svelte';
 export { default as Dropdown } from './elements/dropdown/Dropdown.svelte';
 export { default as Select } from './elements/dropdown/Select.svelte';
 export { default as Card } from './layout/card/Card.svelte';
-export { default as StatsCard } from './layout/card/StatsCard.svelte';
 export { default as MetricCard } from './layout/card/MetricCard.svelte';
 export { default as Alert } from './elements/alert/Alert.svelte';
 export type TabProps = {

package/dist/index.js

@@ -27,7 +27,6 @@ export { default as Dropdown } from './elements/dropdown/Dropdown.svelte';
 export { default as Select } from './elements/dropdown/Select.svelte';
 // Elements - Card
 export { default as Card } from './layout/card/Card.svelte';
-export { default as StatsCard } from './layout/card/StatsCard.svelte';
 export { default as MetricCard } from './layout/card/MetricCard.svelte';
 // Elements - Alert
 export { default as Alert } from './elements/alert/Alert.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "0.2.2-0",
+	"version": "0.3.0",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",

package/dist/layout/card/StatsCard.svelte

@@ -1,266 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../helper/cls.js';
-	import { statsCard } from './stats-card.js';
-	import { onMount } from 'svelte';
-	import * as echarts from 'echarts/core';
-
-	// @ts-expect-error - ECharts types are not available
-	import { LineChart } from 'echarts/charts';
-
-	// @ts-expect-error - ECharts types are not available
-	import { GridComponent } from 'echarts/components';
-	// @ts-expect-error - ECharts types are not available
-	import { SVGRenderer } from 'echarts/renderers';
-	import { Color } from '../../variants.js';
-	import type { StatsCardProps } from '../../index.js';
-
-	// @ts-expect-error - ECharts types are not available
-	echarts.use([LineChart, GridComponent, SVGRenderer]);
-
-	let {
-		label,
-		value,
-		previousValue,
-		previousValuePrefix = 'from',
-		trend,
-		color = Color.PRIMARY,
-		chartData,
-		children,
-		class: className = '',
-		formatLargeNumbers = true
-	}: StatsCardProps = $props();
-
-	// Chart container reference
-	let chartContainer: HTMLDivElement | undefined = $state();
-	// @ts-expect-error - ECharts types are not available
-	let chart: echarts.ECharts | undefined = $state();
-
-	function getTrendDirection(trendX?: number): 'up' | 'down' | 'neutral' {
-		if (trendX === undefined || trendX === null) return 'neutral';
-		if (trendX > 0) {
-			return 'up';
-		} else if (trendX < 0) {
-			return 'down';
-		}
-		return 'neutral';
-	}
-
-	function formatValue(val?: string | number): string {
-		if (val === undefined || val === null) return '';
-
-		let numValue: number;
-		let currencySymbol: string | null = null;
-
-		// Handle string inputs
-		if (typeof val === 'string') {
-			// Check for currency symbols
-			const currencyMatch = val.match(/^(\$|€|£|¥)/);
-			if (currencyMatch) {
-				currencySymbol = currencyMatch[0];
-			}
-
-			// Extract the numeric value
-			const cleanedStr = val.replace(/[^0-9.-]/g, '');
-			if (/^-?\d+(\.\d+)?$/.test(cleanedStr)) {
-				numValue = parseFloat(cleanedStr);
-			} else {
-				// Not a number we can format
-				return val;
-			}
-		} else {
-			// Already a number
-			numValue = val;
-		}
-
-		// Format based on whether it's currency and size
-		if (currencySymbol) {
-			// Currency formatting with compact notation if needed
-			return new Intl.NumberFormat('en-US', {
-				style: 'currency',
-				currency: currencySymbolToCode(currencySymbol),
-				notation: formatLargeNumbers ? 'compact' : 'standard',
-				compactDisplay: 'short',
-				maximumFractionDigits: 1
-			}).format(numValue);
-		} else {
-			// Regular number formatting with compact notation if needed
-			return new Intl.NumberFormat('en-US', {
-				notation: formatLargeNumbers ? 'compact' : 'standard',
-				compactDisplay: 'short',
-				maximumFractionDigits: 1
-			}).format(numValue);
-		}
-	}
-
-	// Helper function to convert currency symbols to ISO codes
-	function currencySymbolToCode(symbol: string): string {
-		const map: Record<string, string> = {
-			$: 'USD',
-			'€': 'EUR',
-			'£': 'GBP',
-			'¥': 'JPY'
-		};
-		return map[symbol] || 'USD';
-	}
-
-	const chartColorMap = {
-		[Color.PRIMARY]: '#4F46E5',
-		[Color.SECONDARY]: '#6B7280',
-		[Color.INFO]: '#3B82F6',
-		[Color.SUCCESS]: '#10B981',
-		[Color.WARNING]: '#F59E0B',
-		[Color.DANGER]: '#EF4444',
-		[Color.DEFAULT]: '#6B7280'
-	};
-
-	const trendDirection = $derived(getTrendDirection(trend));
-	const formattedValue = $derived(formatValue(value));
-	const formattedPreviousValue = $derived(
-		previousValue !== undefined ? formatValue(previousValue) : undefined
-	);
-
-	const {
-		base,
-		label: labelSlot,
-		value: valueSlot,
-		trend: trendSlot,
-		previousValue: previousValueSlot
-	} = $derived(
-		statsCard({
-			color,
-			trendDirection
-		})
-	);
-
-	const labelClasses = $derived(cn(labelSlot(), 'text-sm font-medium mb-1'));
-	const valueClasses = $derived(cn(valueSlot(), 'text-4xl font-bold'));
-	const trendClasses = $derived(cn(trendSlot(), 'text-sm font-medium ml-2'));
-	const previousValueClasses = $derived(cn(previousValueSlot(), 'text-sm text-default-500 mt-1'));
-
-	const trendFormatted = $derived.by(() => {
-		if (trend === undefined || trend === null) return '';
-		const absValue = Math.abs(trend);
-		const formattedValue = absValue.toFixed(1).replace(/\.0$/, '');
-		return trend >= 0 ? `+${formattedValue}%` : `-${formattedValue}%`;
-	});
-
-	const chartColor = $derived(chartColorMap[color] || chartColorMap[Color.DEFAULT]);
-
-	onMount(() => {
-		if (!chartData || chartData.length < 2 || !chartContainer) return;
-
-		// @ts-expect-error - ECharts types are not available
-		chart = echarts.init(chartContainer);
-
-		// Set chart options
-		const options = {
-			grid: {
-				left: 0,
-				right: 0,
-				top: 0,
-				bottom: 0
-			},
-			xAxis: {
-				type: 'category',
-				show: false,
-				data: Array.from({ length: chartData.length }, (_, i) => i)
-			},
-			yAxis: {
-				type: 'value',
-				show: false
-			},
-			series: [
-				{
-					data: chartData,
-					type: 'line',
-					symbol: 'none',
-					lineStyle: {
-						color: chartColor,
-						width: 2
-					},
-					areaStyle: {
-						color: {
-							type: 'linear',
-							x: 0,
-							y: 0,
-							x2: 0,
-							y2: 1,
-							colorStops: [
-								{
-									offset: 0,
-									color: chartColor + '40' // 25% opacity
-								},
-								{
-									offset: 1,
-									color: chartColor + '00' // 0% opacity
-								}
-							]
-						}
-					},
-					smooth: true
-				}
-			],
-			animation: false,
-			animationDuration: 1000
-		};
-
-		chart.setOption(options);
-
-		const resizeObserver = new ResizeObserver(() => {
-			chart && chart.resize();
-		});
-
-		resizeObserver.observe(chartContainer);
-
-		return () => {
-			resizeObserver.disconnect();
-			chart.dispose();
-		};
-	});
-</script>
-
-<div
-	class={cn(
-		base(),
-		'@container flex flex-col rounded-lg border border-default-200 bg-white p-6 shadow-sm',
-		className
-	)}
->
-	<div class="flex items-center justify-between">
-		{#if label}
-			<dt class={labelClasses}>{label}</dt>
-		{/if}
-		{#if trend !== undefined && trend !== null}
-			<span class={trendClasses}>
-				{trendFormatted}
-			</span>
-		{/if}
-	</div>
-
-	<div class="mt-1 flex flex-row items-center overflow-clip">
-		<div class="w-full flex-grow">
-			{#if value !== undefined}
-				<dd class={valueClasses} title={value}>
-					{formattedValue}
-				</dd>
-			{/if}
-
-			{#if previousValue !== undefined}
-				<div class={previousValueClasses}>
-					{previousValuePrefix}
-					{formattedPreviousValue}
-				</div>
-			{/if}
-		</div>
-
-		{#if chartData && chartData.length > 1}
-			<div class="h-10 w-full min-w-32 @max-[212.862px]:hidden" bind:this={chartContainer}></div>
-		{/if}
-	</div>
-
-	{#if children}
-		<div class="mt-4">
-			{@render children()}
-		</div>
-	{/if}
-</div>

package/dist/layout/card/StatsCard.svelte.d.ts

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

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

@@ -1,191 +0,0 @@
-import { Color } from '../../variants.js';
-export declare const statsCard: import("tailwind-variants").TVReturnType<{
-    color: {
-        [Color.DEFAULT]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.PRIMARY]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.SECONDARY]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.INFO]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.SUCCESS]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.WARNING]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.DANGER]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-    };
-    trendDirection: {
-        up: {
-            trend: string;
-        };
-        down: {
-            trend: string;
-        };
-        neutral: {
-            trend: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-    value: string;
-    trend: string;
-    previousValue: string;
-    unit: string;
-}, undefined, {
-    color: {
-        [Color.DEFAULT]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.PRIMARY]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.SECONDARY]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.INFO]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.SUCCESS]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.WARNING]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.DANGER]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-    };
-    trendDirection: {
-        up: {
-            trend: string;
-        };
-        down: {
-            trend: string;
-        };
-        neutral: {
-            trend: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-    value: string;
-    trend: string;
-    previousValue: string;
-    unit: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        [Color.DEFAULT]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.PRIMARY]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.SECONDARY]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.INFO]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.SUCCESS]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.WARNING]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.DANGER]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-    };
-    trendDirection: {
-        up: {
-            trend: string;
-        };
-        down: {
-            trend: string;
-        };
-        neutral: {
-            trend: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-    value: string;
-    trend: string;
-    previousValue: string;
-    unit: string;
-}, undefined, unknown, unknown, undefined>>;

package/dist/layout/card/stats-card.js

@@ -1,73 +0,0 @@
-import { tv } from 'tailwind-variants';
-import { Color } from '../../variants.js';
-export const statsCard = tv({
-    slots: {
-        base: '',
-        label: '',
-        value: '',
-        trend: '',
-        previousValue: '',
-        unit: '',
-    },
-    variants: {
-        color: {
-            [Color.DEFAULT]: {
-                label: 'text-default-500',
-                value: 'text-default-900',
-                trend: 'text-default-600',
-                previousValue: 'text-default-500'
-            },
-            [Color.PRIMARY]: {
-                label: 'text-primary-500',
-                value: 'text-primary-600',
-                trend: 'text-primary-600',
-                previousValue: 'text-primary-400'
-            },
-            [Color.SECONDARY]: {
-                label: 'text-secondary-500',
-                value: 'text-secondary-600',
-                trend: 'text-secondary-600',
-                previousValue: 'text-secondary-400'
-            },
-            [Color.INFO]: {
-                label: 'text-info-500',
-                value: 'text-info-600',
-                trend: 'text-info-600',
-                previousValue: 'text-info-400'
-            },
-            [Color.SUCCESS]: {
-                label: 'text-success-500',
-                value: 'text-success-600',
-                trend: 'text-success-600',
-                previousValue: 'text-success-400'
-            },
-            [Color.WARNING]: {
-                label: 'text-warning-500',
-                value: 'text-warning-600',
-                trend: 'text-warning-600',
-                previousValue: 'text-warning-400'
-            },
-            [Color.DANGER]: {
-                label: 'text-danger-500',
-                value: 'text-danger-600',
-                trend: 'text-danger-600',
-                previousValue: 'text-danger-400'
-            }
-        },
-        trendDirection: {
-            up: {
-                trend: 'text-success-600'
-            },
-            down: {
-                trend: 'text-danger-600'
-            },
-            neutral: {
-                trend: 'text-default-600'
-            }
-        }
-    },
-    defaultVariants: {
-        color: Color.DEFAULT,
-        trendDirection: 'neutral'
-    }
-});