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

package/dist/index.js

@@ -1 +1,66 @@
-"use strict";
+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 };
+// Helper utilities
+export { tv, cn } from './helper/cls.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';
+// Elements - Tabs
+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 Timeline } from './elements/timeline/Timeline.svelte';

package/dist/layout/card/Card.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { card } from './card.js';
+	import type { CardProps } from '../../index.js';
+	import { Color } from '../../variants.js';
+
+	let {
+		children,
+		custom,
+		title,
+		color = Color.DEFAULT,
+		class: className = '',
+		titleclass: titleClass = '',
+		bodyclass: bodyClass = ''
+	}: CardProps = $props();
+
+	const {
+		base,
+		title: titleSlot,
+		body: bodySlot
+	} = $derived(card({ color }));
+
+	const baseClass = $derived(cn(base(), className));
+	const titleClasses = $derived(cn(titleSlot(), titleClass));
+	const bodyClasses = $derived(cn(bodySlot(), bodyClass));
+</script>
+
+<div class={baseClass}>
+	{#if custom}
+		{@render custom()}
+	{:else}
+		{#if title}
+			<h3 class={titleClasses}>{title}</h3>
+		{/if}
+		{#if children}
+			<div class={bodyClasses}>
+				{@render children()}
+			</div>
+		{/if}
+	{/if}
+</div>

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,266 @@
+<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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,128 @@
+import { Color } from '../../variants.js';
+export declare const card: import("tailwind-variants").TVReturnType<{
+    color: {
+        [Color.DEFAULT]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.PRIMARY]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.SECONDARY]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.INFO]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.SUCCESS]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.WARNING]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.DANGER]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+    };
+}, {
+    base: string;
+    title: string;
+    body: string;
+}, undefined, {
+    color: {
+        [Color.DEFAULT]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.PRIMARY]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.SECONDARY]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.INFO]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.SUCCESS]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.WARNING]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.DANGER]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+    };
+}, {
+    base: string;
+    title: string;
+    body: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        [Color.DEFAULT]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.PRIMARY]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.SECONDARY]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.INFO]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.SUCCESS]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.WARNING]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        [Color.DANGER]: {
+            base: string;
+            title: string;
+            body: string;
+        };
+    };
+}, {
+    base: string;
+    title: string;
+    body: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/layout/card/card.js

@@ -0,0 +1,51 @@
+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',
+        title: 'text-base font-semibold',
+        body: 'text-base'
+    },
+    variants: {
+        color: {
+            [Color.DEFAULT]: {
+                base: 'bg-default-50 border-default-200',
+                title: 'text-default-900',
+                body: 'text-default-700'
+            },
+            [Color.PRIMARY]: {
+                base: 'bg-primary-50 border-primary-200',
+                title: 'text-primary-900',
+                body: 'text-primary-700'
+            },
+            [Color.SECONDARY]: {
+                base: 'bg-secondary-50 border-secondary-200',
+                title: 'text-secondary-900',
+                body: 'text-secondary-700'
+            },
+            [Color.INFO]: {
+                base: 'bg-info-50 border-info-200',
+                title: 'text-info-900',
+                body: 'text-info-700'
+            },
+            [Color.SUCCESS]: {
+                base: 'bg-success-50 border-success-200',
+                title: 'text-success-900',
+                body: 'text-success-700'
+            },
+            [Color.WARNING]: {
+                base: 'bg-warning-50 border-warning-200',
+                title: 'text-warning-900',
+                body: 'text-warning-700'
+            },
+            [Color.DANGER]: {
+                base: 'bg-danger-50 border-danger-200',
+                title: 'text-danger-900',
+                body: 'text-danger-700'
+            }
+        }
+    },
+    defaultVariants: {
+        color: Color.DEFAULT
+    }
+});