@makolabs/ripple 0.0.1-dev.65 → 0.0.1-dev.66

package/dist/index.d.ts

@@ -177,6 +177,20 @@ export type StatsCardProps = {
     class?: ClassValue;
     formatLargeNumbers?: boolean;
 };
+export type MetricDetail = {
+    label: string;
+    value: string | number;
+    color?: string;
+};
+export type MetricCardProps = {
+    title: string;
+    value: string | number;
+    details?: MetricDetail[];
+    percent?: number;
+    primaryColor?: string;
+    secondaryColor?: string;
+    class?: ClassValue;
+};
 export type DataRow = Record<string, any>;
 export type KeyType = keyof DataRow;
 export type StatusType = 'active' | 'inactive' | 'pending' | 'error' | 'default';
@@ -341,6 +355,7 @@ 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 = {
     value: string;
@@ -388,6 +403,7 @@ 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 { metricCard } from './layout/card/metric-card.js';
 export type ChartColorKey = keyof typeof ChartColor;
 export type ChartColorValue = typeof ChartColor[ChartColorKey];
 export type ChartColors = {

package/dist/index.js

@@ -28,6 +28,7 @@ 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';
 export { default as Tab } from './layout/tabs/Tab.svelte';
@@ -50,6 +51,7 @@ 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 { metricCard } from './layout/card/metric-card.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';

package/dist/layout/card/MetricCard.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { metricCard } from './metric-card.js';
+	import type { MetricCardProps } from '../../index.js';
+
+	let { 
+		title, 
+		value, 
+		details = [], 
+		percent,
+		primaryColor = 'text-green-700',
+		secondaryColor = 'text-red-600',
+		class: className = ''
+	}: MetricCardProps = $props();
+
+	// Get the first two details for the breakdown display
+	const primaryDetail = $derived(details[0]);
+	const secondaryDetail = $derived(details[1]);
+
+	const { base, title: titleSlot, value: valueSlot, detail: detailSlot, progress: progressSlot } = $derived(
+		metricCard()
+	);
+
+	const baseClasses = $derived(cn(base(), className));
+</script>
+
+<div class={baseClasses}>
+	<div class={titleSlot()}>{title}</div>
+	<div class={valueSlot()}>
+		{typeof value === 'number' ? value.toLocaleString('de-DE') : value}
+	</div>
+	
+	{#if primaryDetail}
+		<div class={cn(detailSlot(), primaryColor)}>
+			<span>{primaryDetail.label}</span>
+			<span class="font-medium">
+				{primaryDetail.value}
+			</span>
+		</div>
+	{/if}
+	
+	{#if secondaryDetail}
+		<div class={cn(detailSlot(), secondaryColor)}>
+			<span>{secondaryDetail.label}</span>
+			<span class="font-medium">
+				{secondaryDetail.value}
+			</span>
+		</div>
+	{/if}
+	
+	{#if percent !== undefined}
+		<div class={progressSlot()}>
+			<div
+				class="h-2 rounded-full bg-green-500"
+				style="width: {Math.min(100, percent)}%"
+			></div>
+		</div>
+	{/if}
+</div> 

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

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

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

@@ -0,0 +1,49 @@
+export declare const metricCard: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            progress?: import("tailwind-merge").ClassNameValue;
+            detail?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            progress?: import("tailwind-merge").ClassNameValue;
+            detail?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    title: string;
+    value: string;
+    detail: string;
+    progress: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
+            progress?: import("tailwind-merge").ClassNameValue;
+            detail?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    title: string;
+    value: string;
+    detail: string;
+    progress: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    title: string;
+    value: string;
+    detail: string;
+    progress: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+export const metricCard = tv({
+    slots: {
+        base: 'border-default-200 rounded-xl border bg-white p-6 shadow-sm',
+        title: 'text-default-500 text-sm',
+        value: 'text-default-900 mt-2 text-3xl font-bold',
+        detail: 'mt-2 flex justify-between text-xs',
+        progress: 'mt-2 h-2 w-full rounded-full bg-gray-200'
+    }
+});

package/package.json

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