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

package/dist/header/index.js

@@ -0,0 +1,2 @@
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';

package/dist/header/pageheaders.d.ts

@@ -0,0 +1,10 @@
+import { type ClassValue } from 'tailwind-variants';
+import type { BreadcrumbItem } from './breadcrumbs.js';
+import type { Snippet } from 'svelte';
+export type PageHeaderProps = {
+    title: string;
+    breadcrumbs?: BreadcrumbItem[];
+    children?: Snippet;
+    class?: ClassValue;
+    titleclass?: ClassValue;
+};

package/dist/header/pageheaders.js

@@ -0,0 +1 @@
+import {} from 'tailwind-variants';

package/dist/helper/cls.d.ts

@@ -1,2 +1,3 @@
 import { type ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
+export declare const tv: import("tailwind-variants").CreateTV;

package/dist/helper/cls.js

@@ -1,5 +1,9 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { createTV } from 'tailwind-variants';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
+export const tv = createTV({
+    twMerge: true
+});

package/dist/helper/nav.svelte.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Check if a URL matches the current route
+ * @param href - The URL to check
+ * @param exact - Whether to require an exact match
+ */
+export declare function isRouteActive(href: string, exact?: boolean): boolean;

package/dist/helper/nav.svelte.js

@@ -0,0 +1,23 @@
+import { page } from '$app/state';
+/**
+ * Check if a URL matches the current route
+ * @param href - The URL to check
+ * @param exact - Whether to require an exact match
+ */
+export function isRouteActive(href, exact = false) {
+    const currentPath = page.url.pathname;
+    if (exact) {
+        return currentPath === href;
+    }
+    // Home page special case
+    if (href === '/' && currentPath === '/') {
+        return true;
+    }
+    // Check if the current path starts with href, but ensure it's a complete segment
+    if (href !== '/' && currentPath.startsWith(href)) {
+        // Check if the next character after href is a slash or the end of the string
+        const nextChar = currentPath.charAt(href.length);
+        return nextChar === '' || nextChar === '/';
+    }
+    return false;
+}

package/dist/index.d.ts

@@ -1 +1,10 @@
-export {};
+export * from './button/index.js';
+export * from './modal/index.js';
+export * from './drawer/index.js';
+export * from './header/index.js';
+export * from './layout/index.js';
+export * from './elements/dropdown/index.js';
+export * from './elements/badge/index.js';
+export * from './types/variants.js';
+export { tv, cn } from './helper/cls.js';
+export * from './helper/nav.svelte.js';

package/dist/index.js

@@ -1 +1,18 @@
-"use strict";
+// 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';
+// Helper utilities
+export { tv, cn } from './helper/cls.js';
+export * from './helper/nav.svelte.js';

package/dist/layout/card/Card.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { card, type CardProps } from './card.js';
+
+	let {
+		children,
+		custom,
+		title,
+		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
+		})
+	);
+
+	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 './card.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,236 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { statsCard, type StatsCardProps } 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';
+
+	// @ts-expect-error - ECharts types are not available
+	echarts.use([LineChart, GridComponent, SVGRenderer]);
+
+	let {
+		label,
+		value,
+		previousValue,
+		previousValuePrefix = 'from',
+		trend,
+		color = 'default',
+		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 '';
+		if (typeof val === 'string') {
+			const cleanedStr = val.replace(/,/g, '');
+			if (/^-?\d+(\.\d+)?$/.test(cleanedStr)) {
+				const numValue = parseFloat(cleanedStr);
+				return formatValue(numValue);
+			}
+			return 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';
+		}
+
+		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';
+		}
+	}
+
+	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,
+		chartContainer: chartContainerSlot
+	} = $derived(
+		statsCard({
+			color,
+			trendDirection
+		})
+	);
+
+	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 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}%`;
+	});
+
+	// Chart color based on card color
+	const chartColor = $derived(getChartColor());
+
+	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
+		};
+
+		chart.setOption(options);
+
+		// Handle resize
+		const resizeObserver = new ResizeObserver(() => {
+			chart && chart.resize();
+		});
+
+		resizeObserver.observe(chartContainer);
+
+		return () => {
+			resizeObserver.disconnect();
+			chart.dispose();
+		};
+	});
+</script>
+
+<div class={baseClass}>
+	<!-- Header with label and trend -->
+	<div class="flex justify-between items-center">
+		{#if label}
+			<dt class={labelClasses}>{label}</dt>
+		{/if}
+		{#if trend !== undefined && trend !== null}
+      <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">
+			{#if value !== undefined}
+				<dd class={valueClasses}>
+					{formattedValue}
+				</dd>
+			{/if}
+
+			<!-- Previous value or tagline underneath -->
+			{#if previousValue !== undefined}
+				<div class={previousValueClasses}>
+					{previousValuePrefix} {formattedPreviousValue}
+				</div>
+			{/if}
+		</div>
+
+		<!-- ECharts chart -->
+		{#if chartData && chartData.length > 1}
+			<div class={chartContainerClasses} 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 './stats-card.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,139 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { VariantColors } from '../../types/variants.js';
+export declare const card: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        primary: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        secondary: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        info: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        success: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        warning: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        danger: {
+            base: string;
+            title: string;
+            body: string;
+        };
+    };
+}, {
+    base: string;
+    title: string;
+    body: string;
+}, undefined, {
+    color: {
+        default: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        primary: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        secondary: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        info: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        success: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        warning: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        danger: {
+            base: string;
+            title: string;
+            body: string;
+        };
+    };
+}, {
+    base: string;
+    title: string;
+    body: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        primary: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        secondary: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        info: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        success: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        warning: {
+            base: string;
+            title: string;
+            body: string;
+        };
+        danger: {
+            base: string;
+            title: string;
+            body: string;
+        };
+    };
+}, {
+    base: string;
+    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

@@ -0,0 +1,50 @@
+import { tv } from 'tailwind-variants';
+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: {
+            default: {
+                base: 'bg-default-50 border-default-200',
+                title: 'text-default-900',
+                body: 'text-default-700'
+            },
+            primary: {
+                base: 'bg-primary-50 border-primary-200',
+                title: 'text-primary-900',
+                body: 'text-primary-700'
+            },
+            secondary: {
+                base: 'bg-secondary-50 border-secondary-200',
+                title: 'text-secondary-900',
+                body: 'text-secondary-700'
+            },
+            info: {
+                base: 'bg-info-50 border-info-200',
+                title: 'text-info-900',
+                body: 'text-info-700'
+            },
+            success: {
+                base: 'bg-success-50 border-success-200',
+                title: 'text-success-900',
+                body: 'text-success-700'
+            },
+            warning: {
+                base: 'bg-warning-50 border-warning-200',
+                title: 'text-warning-900',
+                body: 'text-warning-700'
+            },
+            danger: {
+                base: 'bg-danger-50 border-danger-200',
+                title: 'text-danger-900',
+                body: 'text-danger-700'
+            }
+        }
+    },
+    defaultVariants: {
+        color: 'default'
+    }
+});

package/dist/layout/card/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Card } from './Card.svelte';
+export type { CardProps } from './card.js';
+export { default as StatsCard } from './StatsCard.svelte';
+export type { StatsCardProps } from './stats-card.js';

package/dist/layout/card/index.js

@@ -0,0 +1,2 @@
+export { default as Card } from './Card.svelte';
+export { default as StatsCard } from './StatsCard.svelte';