@makolabs/ripple 0.0.1-dev.30 → 0.0.1-dev.32

package/dist/charts/Chart.svelte

@@ -26,7 +26,13 @@
 	} from 'echarts/components';
 	// @ts-expect-error - ECharts types are not available
 	import { SVGRenderer } from 'echarts/renderers';
-	import type { ChartProps, ChartColors, ChartColorString } from '../index.js';
+	import {
+		type ChartProps,
+		type ChartColorString,
+		type ChartColors,
+		type SeriesConfig
+	} from '../index.js';
+	import { defaultChartColors } from '../variants.js';
 
 	// @ts-expect-error - ECharts types are not available
 	echarts.use([
@@ -104,31 +110,52 @@
 	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 };
+	const baseColors = [
+		chartColors.health,
+		chartColors.other,
+		chartColors.property,
+		chartColors.auto,
+		chartColors.life,
+		chartColors.default
+	];
 
 	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
-		];
+	function getAreaStyle(seriesConfig: SeriesConfig<any>) {
+		if (!seriesConfig.color) return undefined;
+		const baseLinearAreaStyle = {
+			type: 'linear',
+			x: 0,
+			y: 0,
+			x2: 0,
+			y2: 1
+		};
+		const color = getColor(seriesConfig.color);
+		const opacity = seriesConfig.areaOpacity || 0.2;
+		const opacityHex = Math.floor(opacity * 255)
+			.toString(16)
+			.padStart(2, '0');
+		return {
+			color: {
+				...baseLinearAreaStyle,
+				colorStops: [
+					{
+						offset: 0,
+						color: color + opacityHex
+					},
+					{
+						offset: 1,
+						color: color + '00'
+					}
+				]
+			}
+		};
+	}
 
+	function getSeriesColors(count: number): string[] {
 		let colors = [...baseColors];
 		while (colors.length < count) {
 			const index = colors.length % baseColors.length;
@@ -228,29 +255,7 @@
 						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
+					areaStyle: getAreaStyle(seriesConfig)
 				}),
 
 				...(actualType === 'bar' && {

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

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

package/dist/index.d.ts

@@ -1,7 +1,19 @@
-import { Color, Size } from './variants.js';
-export type VariantColors = (typeof Color)[keyof typeof Color];
+import { ChartColor, Color, Size } from './variants.js';
+/**
+ * Size System:
+ * - Size.*: Component dimensions (XS, SM, BASE, LG, XL, XXL)
+ */
 export type VariantSizes = (typeof Size)[keyof typeof Size];
-export { Color, Size };
+export type VariantColors = (typeof Color)[keyof typeof Color];
+/**
+ * Color System:
+ * - Color.*: UI component colors (buttons, text, backgrounds)
+ *   Options: DEFAULT, PRIMARY, SECONDARY, INFO, SUCCESS, WARNING, DANGER
+ * - ChartColor.*: Chart-specific colors, only supported within series configurations (lines, areas, bars)
+ *   Options: HEALTH, PROPERTY, AUTO, LIFE, OTHER, DEFAULT
+ * - ChartColors: Record type mapping ChartColor enum to string values
+ */
+export { Color, Size, ChartColor };
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 import type { Component } from 'svelte';
@@ -336,13 +348,10 @@ export { modal } from './modal/modal.js';
 export { drawer } from './drawer/drawer.js';
 export { selectTV } from './elements/dropdown/select.js';
 export { breadcrumbs } from './header/breadcrumbs.js';
+export type ChartColorKey = keyof typeof ChartColor;
+export type ChartColorValue = typeof ChartColor[ChartColorKey];
 export type ChartColors = {
-    health: string;
-    property: string;
-    auto: string;
-    life: string;
-    other: string;
-    default: string;
+    [K in ChartColorValue]: string;
 };
 export type ChartType = 'line' | 'bar' | 'horizontal-bar' | 'pie';
 export type ChartColorString = `#${string}` | keyof ChartColors;

package/dist/index.js

@@ -1,8 +1,13 @@
-import { Color, Size } from './variants.js';
-/*
-All colors and sizes, will be assign via this enum, else it will be considered against the convention
-*/
-export { Color, Size };
+import { ChartColor, Color, Size } from './variants.js';
+/**
+ * Color System:
+ * - Color.*: UI component colors (buttons, text, backgrounds)
+ *   Options: DEFAULT, PRIMARY, SECONDARY, INFO, SUCCESS, WARNING, DANGER
+ * - ChartColor.*: Chart-specific colors, only supported within series configurations (lines, areas, bars)
+ *   Options: HEALTH, PROPERTY, AUTO, LIFE, OTHER, DEFAULT
+ * - ChartColors: Record type mapping ChartColor enum to string values
+ */
+export { Color, Size, ChartColor };
 // Helper utilities
 export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';

package/dist/variants.d.ts

@@ -1,4 +1,4 @@
-import type { VariantColors, VariantSizes } from './index.js';
+import type { ChartColors, VariantColors, VariantSizes } from './index.js';
 export declare const Color: {
     DEFAULT: string;
     PRIMARY: string;
@@ -16,5 +16,15 @@ export declare const Size: {
     XL: string;
     XXL: string;
 };
+export declare const ChartColor: {
+    readonly HEALTH: "health";
+    readonly PROPERTY: "property";
+    readonly AUTO: "auto";
+    readonly LIFE: "life";
+    readonly OTHER: "other";
+    readonly DEFAULT: "default";
+};
+export declare const defaultChartColors: ChartColors;
 export declare const colors: VariantColors[];
 export declare const sizes: VariantSizes[];
+export declare const chartColors: ("default" | "health" | "property" | "auto" | "life" | "other")[];

package/dist/variants.js

@@ -15,5 +15,22 @@ export const Size = {
     XL: 'xl',
     XXL: '2xl'
 };
+export const ChartColor = {
+    HEALTH: 'health',
+    PROPERTY: 'property',
+    AUTO: 'auto',
+    LIFE: 'life',
+    OTHER: 'other',
+    DEFAULT: 'default'
+};
+export const defaultChartColors = {
+    [ChartColor.HEALTH]: '#1F69FF',
+    [ChartColor.PROPERTY]: '#2D9D78',
+    [ChartColor.AUTO]: '#E8A317',
+    [ChartColor.LIFE]: '#E34974',
+    [ChartColor.OTHER]: '#7B3FE4',
+    [ChartColor.DEFAULT]: '#6B7280'
+};
 export const colors = Object.values(Color);
 export const sizes = Object.values(Size);
+export const chartColors = Object.values(ChartColor);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "0.0.1-dev.30",
+	"version": "0.0.1-dev.32",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",