@makolabs/ripple 0.0.1-dev.6 → 0.0.1-dev.60

package/dist/index.js

@@ -1,18 +1,71 @@
-// Button components
-export * from './button/index.js';
-// Modal components
-export * from './modal/index.js';
-// Drawer components
-export * from './drawer/index.js';
-// Header components
-export * from './header/index.js';
-// Layout components
-export * from './layout/index.js';
-// Elements
-export * from './elements/dropdown/index.js';
-export * from './elements/badge/index.js';
-// Types
-export * from './types/variants.js';
+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 * from './helper/nav.svelte.js';
+export { isRouteActive } from './helper/nav.svelte.js';
+// Direct Component Exports
+// Button
+export { default as Button } from './button/Button.svelte';
+// Modal
+export { default as Modal } from './modal/Modal.svelte';
+// Drawer
+export { default as Drawer } from './drawer/Drawer.svelte';
+// Header
+export { default as PageHeader } from './header/PageHeader.svelte';
+export { default as Breadcrumbs } from './header/Breadcrumbs.svelte';
+// Elements
+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';
+// Elements - Card
+export { default as Card } from './layout/card/Card.svelte';
+export { default as StatsCard } from './layout/card/StatsCard.svelte';
+// Elements - Alert
+export { default as Alert } from './elements/alert/Alert.svelte';
+export { default as Tab } from './layout/tabs/Tab.svelte';
+export { default as TabContent } from './layout/tabs/TabContent.svelte';
+export { default as TabGroup } from './layout/tabs/TabGroup.svelte';
+// Elements - Table
+export { default as Table } from './layout/table/Table.svelte';
+export { default as Cells } from './layout/table/Cells.svelte';
+// Elements - Navbar
+export { default as Navbar } from './layout/navbar/Navbar.svelte';
+// Elements - Sidebar
+export { default as Sidebar } from './layout/sidebar/Sidebar.svelte';
+export { default as NavItem } from './layout/sidebar/NavItem.svelte';
+export { default as NavGroup } from './layout/sidebar/NavGroup.svelte';
+// Component Variant Utilities
+export { dropdownMenu } from './elements/dropdown/dropdown.js';
+export { badge } from './elements/badge/badge.js';
+export { buttonVariants } from './button/button.js';
+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 { default as Chart } from './charts/Chart.svelte';
+export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
+export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
+// Toaster: Should be registered in +layout.svelte
+export { default as Toaster } from './sonner/sonner.svelte';
+// Form Component Exports
+export { default as Form } from './forms/Form.svelte';
+export { default as Input } from './forms/Input.svelte';
+export { default as RadioInputs } from './forms/RadioInputs.svelte';
+export { default as Checkbox } from './forms/Checkbox.svelte';
+export { default as Toggle } from './forms/Toggle.svelte';
+export { default as Slider } from './forms/Slider.svelte';
+export { default as NumberInput } from './forms/NumberInput.svelte';
+export { default as DateRange } from './forms/DateRange.svelte';
+export { default as Tags } from './forms/Tags.svelte';
+export { default as RadioPill } from './forms/RadioPill.svelte';
+export { default as Progress } from './elements/progress/Progress.svelte';
+export { default as Accordion } from './elements/accordion/Accordion.svelte';
+export { default as Timeline } from './elements/timeline/Timeline.svelte';

package/dist/layout/card/Card.svelte

@@ -1,27 +1,24 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
-	import { card, type CardProps } from './card.js';
+	import { card } from './card.js';
+	import type { CardProps } from '../../index.js';
+	import { Color } from '../../variants.js';
 
 	let {
 		children,
 		custom,
 		title,
-		color = 'default',
+		color = Color.DEFAULT,
 		class: className = '',
 		titleclass: titleClass = '',
 		bodyclass: bodyClass = ''
 	}: CardProps = $props();
 
-	// Get the slots from the card with fixed default settings
 	const {
 		base,
 		title: titleSlot,
 		body: bodySlot
-	} = $derived(
-		card({
-			color
-		})
-	);
+	} = $derived(card({ color }));
 
 	const baseClass = $derived(cn(base(), className));
 	const titleClasses = $derived(cn(titleSlot(), titleClass));

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

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

package/dist/layout/card/StatsCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
-	import { statsCard, type StatsCardProps } from './stats-card.js';
+	import { statsCard } from './stats-card.js';
 	import { onMount } from 'svelte';
 	import * as echarts from 'echarts/core';
 
@@ -11,6 +11,8 @@
 	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]);
@@ -21,11 +23,11 @@
 		previousValue,
 		previousValuePrefix = 'from',
 		trend,
-		color = 'default',
+		color = Color.PRIMARY,
 		chartData,
 		children,
 		class: className = '',
-		formatLargeNumbers = true,
+		formatLargeNumbers = true
 	}: StatsCardProps = $props();
 
 	// Chart container reference
@@ -37,8 +39,7 @@
 		if (trendX === undefined || trendX === null) return 'neutral';
 		if (trendX > 0) {
 			return 'up';
-		}
-		else if (trendX < 0) {
+		} else if (trendX < 0) {
 			return 'down';
 		}
 		return 'neutral';
@@ -46,56 +47,84 @@
 
 	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') {
-			const cleanedStr = val.replace(/,/g, '');
+			// 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)) {
-				const numValue = parseFloat(cleanedStr);
-				return formatValue(numValue);
+				numValue = parseFloat(cleanedStr);
+			} else {
+				// Not a number we can format
+				return val;
 			}
-			return val;
+		} else {
+			// Already a number
+			numValue = val;
 		}
 
-		if (!formatLargeNumbers) return val.toString();
-
-		if (Math.abs(val) >= 1_000_000) {
-			return (val / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
-		} else if (Math.abs(val) >= 1_000) {
-			return (val / 1_000).toFixed(1).replace(/\.0$/, '') + 'K';
+		// 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);
 		}
-
-		return val.toString();
 	}
 
-	function getChartColor() {
-		switch (color) {
-			case 'primary':
-				return '#4F46E5';
-			case 'secondary':
-				return '#6B7280';
-			case 'info':
-				return '#3B82F6';
-			case 'success':
-				return '#10B981';
-			case 'warning':
-				return '#F59E0B';
-			case 'danger':
-				return '#EF4444';
-			default:
-				return '#6B7280';
-		}
+	// 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 formattedPreviousValue = $derived(
+		previousValue !== undefined ? formatValue(previousValue) : undefined
+	);
 
 	const {
 		base,
 		label: labelSlot,
 		value: valueSlot,
 		trend: trendSlot,
-		previousValue: previousValueSlot,
-		chartContainer: chartContainerSlot
+		previousValue: previousValueSlot
 	} = $derived(
 		statsCard({
 			color,
@@ -103,12 +132,10 @@
 		})
 	);
 
-	const baseClass = $derived(cn(base(), 'flex flex-col p-6 rounded-lg border border-gray-200 bg-white shadow-sm', className));
 	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-gray-500 mt-1'));
-	const chartContainerClasses = $derived(cn(chartContainerSlot(), 'ml-auto h-10 w-32'));
+	const previousValueClasses = $derived(cn(previousValueSlot(), 'text-sm text-default-500 mt-1'));
 
 	const trendFormatted = $derived.by(() => {
 		if (trend === undefined || trend === null) return '';
@@ -117,8 +144,7 @@
 		return trend >= 0 ? `+${formattedValue}%` : `-${formattedValue}%`;
 	});
 
-	// Chart color based on card color
-	const chartColor = $derived(getChartColor());
+	const chartColor = $derived(chartColorMap[color] || chartColorMap[Color.DEFAULT]);
 
 	onMount(() => {
 		if (!chartData || chartData.length < 2 || !chartContainer) return;
@@ -143,41 +169,43 @@
 				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
+			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);
 
-		// Handle resize
 		const resizeObserver = new ResizeObserver(() => {
 			chart && chart.resize();
 		});
@@ -191,40 +219,42 @@
 	});
 </script>
 
-<div class={baseClass}>
-	<!-- Header with label and trend -->
-	<div class="flex justify-between items-center">
+<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>
+			<span class={trendClasses}>
+				{trendFormatted}
+			</span>
 		{/if}
 	</div>
 
-	<!-- Main content area with value and optional chart -->
-	<div class="flex items-center mt-1">
-		<!-- Value section -->
-		<div class="flex-grow">
+	<div class="mt-1 flex flex-row items-center overflow-clip">
+		<div class="w-full flex-grow">
 			{#if value !== undefined}
-				<dd class={valueClasses}>
+				<dd class={valueClasses} title={value}>
 					{formattedValue}
 				</dd>
 			{/if}
 
-			<!-- Previous value or tagline underneath -->
 			{#if previousValue !== undefined}
 				<div class={previousValueClasses}>
-					{previousValuePrefix} {formattedPreviousValue}
+					{previousValuePrefix}
+					{formattedPreviousValue}
 				</div>
 			{/if}
 		</div>
 
-		<!-- ECharts chart -->
 		{#if chartData && chartData.length > 1}
-			<div class={chartContainerClasses} bind:this={chartContainer}></div>
+			<div class="h-10 w-full min-w-32 @max-[212.862px]:hidden" bind:this={chartContainer}></div>
 		{/if}
 	</div>
 
@@ -233,4 +263,4 @@
 			{@render children()}
 		</div>
 	{/if}
-</div>
+</div>

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

@@ -1,4 +1,4 @@
-import { type StatsCardProps } from './stats-card.js';
+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/card.d.ts

@@ -1,39 +1,37 @@
-import type { ClassValue } from 'tailwind-variants';
-import type { Snippet } from 'svelte';
-import type { VariantColors } from '../../types/variants.js';
+import { Color } from '../../variants.js';
 export declare const card: import("tailwind-variants").TVReturnType<{
     color: {
-        default: {
+        [Color.DEFAULT]: {
             base: string;
             title: string;
             body: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             base: string;
             title: string;
             body: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             base: string;
             title: string;
             body: string;
         };
-        info: {
+        [Color.INFO]: {
             base: string;
             title: string;
             body: string;
         };
-        success: {
+        [Color.SUCCESS]: {
             base: string;
             title: string;
             body: string;
         };
-        warning: {
+        [Color.WARNING]: {
             base: string;
             title: string;
             body: string;
         };
-        danger: {
+        [Color.DANGER]: {
             base: string;
             title: string;
             body: string;
@@ -45,37 +43,37 @@ export declare const card: import("tailwind-variants").TVReturnType<{
     body: string;
 }, undefined, {
     color: {
-        default: {
+        [Color.DEFAULT]: {
             base: string;
             title: string;
             body: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             base: string;
             title: string;
             body: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             base: string;
             title: string;
             body: string;
         };
-        info: {
+        [Color.INFO]: {
             base: string;
             title: string;
             body: string;
         };
-        success: {
+        [Color.SUCCESS]: {
             base: string;
             title: string;
             body: string;
         };
-        warning: {
+        [Color.WARNING]: {
             base: string;
             title: string;
             body: string;
         };
-        danger: {
+        [Color.DANGER]: {
             base: string;
             title: string;
             body: string;
@@ -87,37 +85,37 @@ export declare const card: import("tailwind-variants").TVReturnType<{
     body: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        default: {
+        [Color.DEFAULT]: {
             base: string;
             title: string;
             body: string;
         };
-        primary: {
+        [Color.PRIMARY]: {
             base: string;
             title: string;
             body: string;
         };
-        secondary: {
+        [Color.SECONDARY]: {
             base: string;
             title: string;
             body: string;
         };
-        info: {
+        [Color.INFO]: {
             base: string;
             title: string;
             body: string;
         };
-        success: {
+        [Color.SUCCESS]: {
             base: string;
             title: string;
             body: string;
         };
-        warning: {
+        [Color.WARNING]: {
             base: string;
             title: string;
             body: string;
         };
-        danger: {
+        [Color.DANGER]: {
             base: string;
             title: string;
             body: string;
@@ -128,12 +126,3 @@ export declare const card: import("tailwind-variants").TVReturnType<{
     title: string;
     body: string;
 }, undefined, unknown, unknown, undefined>>;
-export type CardProps = {
-    color?: VariantColors;
-    title?: string;
-    class?: ClassValue;
-    titleclass?: ClassValue;
-    bodyclass?: ClassValue;
-    children?: Snippet;
-    custom?: Snippet;
-};

package/dist/layout/card/card.js

@@ -1,4 +1,5 @@
 import { tv } from 'tailwind-variants';
+import { Color } from '../../variants.js';
 export const card = tv({
     slots: {
         base: 'flex flex-col p-4 gap-2 border rounded-md shadow-sm',
@@ -7,37 +8,37 @@ export const card = tv({
     },
     variants: {
         color: {
-            default: {
+            [Color.DEFAULT]: {
                 base: 'bg-default-50 border-default-200',
                 title: 'text-default-900',
                 body: 'text-default-700'
             },
-            primary: {
+            [Color.PRIMARY]: {
                 base: 'bg-primary-50 border-primary-200',
                 title: 'text-primary-900',
                 body: 'text-primary-700'
             },
-            secondary: {
+            [Color.SECONDARY]: {
                 base: 'bg-secondary-50 border-secondary-200',
                 title: 'text-secondary-900',
                 body: 'text-secondary-700'
             },
-            info: {
+            [Color.INFO]: {
                 base: 'bg-info-50 border-info-200',
                 title: 'text-info-900',
                 body: 'text-info-700'
             },
-            success: {
+            [Color.SUCCESS]: {
                 base: 'bg-success-50 border-success-200',
                 title: 'text-success-900',
                 body: 'text-success-700'
             },
-            warning: {
+            [Color.WARNING]: {
                 base: 'bg-warning-50 border-warning-200',
                 title: 'text-warning-900',
                 body: 'text-warning-700'
             },
-            danger: {
+            [Color.DANGER]: {
                 base: 'bg-danger-50 border-danger-200',
                 title: 'text-danger-900',
                 body: 'text-danger-700'
@@ -45,6 +46,6 @@ export const card = tv({
         }
     },
     defaultVariants: {
-        color: 'default'
+        color: Color.DEFAULT
     }
 });