@makolabs/ripple 0.2.2-0 → 0.4.0

package/LICENSE

@@ -0,0 +1,43 @@
+Ripple UI License
+
+Copyright (c) 2024 MakoLabs AI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to use
+the Software for personal, educational, and non-commercial purposes, subject 
+to the following conditions:
+
+PERSONAL AND NON-COMMERCIAL USE:
+- Personal projects and educational use are permitted free of charge
+- Open source projects are permitted free of charge
+- Non-profit organizations are permitted free of charge
+
+COMMERCIAL USE RESTRICTIONS:
+- Any commercial use of this Software requires a separate commercial license
+- Commercial use includes, but is not limited to:
+  - Use in commercial products or services
+  - Use by for-profit organizations
+  - Use in products that generate revenue
+  - Integration into commercial applications
+
+COMMERCIAL LICENSING:
+For commercial use, please contact MakoLabs AI to obtain a commercial license:
+- Email: licensing@makolabs.ai
+- Website: https://makolabs.ai
+
+CONDITIONS FOR ALL USE:
+- The above copyright notice and this permission notice shall be included in 
+  all copies or substantial portions of the Software
+- Attribution to MakoLabs AI must be maintained in any derivative works
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+VIOLATION OF LICENSE:
+Any commercial use without a proper commercial license constitutes copyright
+infringement and may result in legal action.

package/dist/charts/Chart.svelte

@@ -127,7 +127,7 @@
 	function getAreaStyle(seriesConfig: SeriesConfig<any>) {
 		if (!seriesConfig.color) return undefined;
 		if (!seriesConfig.showArea) return undefined;
-		
+
 		const baseLinearAreaStyle = {
 			type: 'linear',
 			x: 0,
@@ -265,7 +265,7 @@
 					type: actualType,
 					yAxisIndex: seriesConfig.yAxisIndex || 0,
 					data: seriesData,
-					stack: null,
+					stack: seriesConfig.stack,
 					barWidth:
 						seriesConfig.barWidth ||
 						(barSeriesCount > 3 ? '15%' : barSeriesCount > 1 ? '25%' : '60%'),
@@ -274,7 +274,7 @@
 					color: getColor(seriesConfig.color),
 					itemStyle: {
 						color: getColor(seriesConfig.color),
-						borderRadius: [4, 4, 0, 0],
+						borderRadius: [0, 0, 0, 0],
 						opacity: seriesConfig.opacity || 1
 					}
 				}),

package/dist/elements/dropdown/Dropdown.svelte

@@ -114,12 +114,17 @@
 	}
 
 	function handleClickOutside(event: MouseEvent) {
+		// Only handle if this specific dropdown is open
+		if (!isOpen) return;
+		
+		const target = event.target as Node;
+		
+		// Check if click is outside both the dropdown and trigger
 		if (
-			isOpen &&
 			dropdownRef &&
-			!dropdownRef.contains(event.target as Node) &&
+			!dropdownRef.contains(target) &&
 			triggerRef &&
-			!triggerRef.contains(event.target as Node)
+			!triggerRef.contains(target)
 		) {
 			isOpen = false;
 		}

package/dist/index.d.ts

@@ -17,7 +17,7 @@ export { Color, Size, ChartColor };
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 import type { Component } from 'svelte';
-import type { HTMLButtonAttributes, HTMLAttributeAnchorTarget } from 'svelte/elements';
+import type { HTMLButtonAttributes, HTMLAttributeAnchorTarget, HTMLInputAttributes } from 'svelte/elements';
 import type { ECharts } from 'echarts/types/src/export/core.js';
 import type { SuperForm } from 'sveltekit-superforms';
 import type { FileAction, StorageAdapter } from './adapters/storage/types.js';
@@ -165,18 +165,6 @@ export type AlertProps = {
     footer?: Snippet;
     icon?: Component;
 };
-export type StatsCardProps = {
-    label?: string;
-    value?: string | number;
-    previousValue?: string | number;
-    previousValuePrefix?: string;
-    trend?: number;
-    color?: VariantColors;
-    chartData?: number[];
-    children?: Snippet;
-    class?: ClassValue;
-    formatLargeNumbers?: boolean;
-};
 export type MetricDetail = {
     label: string;
     value: string | number;
@@ -355,7 +343,6 @@ 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';
 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 = {
@@ -616,7 +603,9 @@ export interface FormProps<T extends Record<string, unknown>> {
     novalidate?: boolean;
     children?: Snippet;
 }
-export type BaseInputProps = {
+export type InputProps = {
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'date' | 'textarea';
+    value?: string | number;
     name: string;
     label?: string;
     placeholder?: string;
@@ -627,11 +616,7 @@ export type BaseInputProps = {
     color?: VariantColors;
     id?: string;
     errors?: string[];
-};
-export type InputProps = {
-    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'date' | 'textarea';
-    value?: string | number;
-} & BaseInputProps;
+} & HTMLInputAttributes;
 export type RadioOption = {
     value: string;
     label: string;

package/dist/index.js

@@ -27,7 +27,6 @@ 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';
 export { default as MetricCard } from './layout/card/MetricCard.svelte';
 // Elements - Alert
 export { default as Alert } from './elements/alert/Alert.svelte';

package/package.json

@@ -1,114 +1,123 @@
 {
-	"name": "@makolabs/ripple",
-	"version": "0.2.2-0",
-	"description": "Simple Svelte 5 powered component library ✨",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/makolabsai/ripple-ui.git"
-	},
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
-		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run && npm run test:e2e",
-		"test:e2e": "playwright test",
-		"pub:minor": "git add . && git commit -m \"chore: prepare for publish minor\" && npm version minor && git push --follow-tags && npm publish",
-		"pub:patch": "git add . && git commit -m \"chore: prepare for publish patch\" && npm version patch && git push --follow-tags && npm publish",
-		"pub:prelish": "git add . && git commit -m \"chore: prepare for publish premajor\" && npm version premajor && git push --follow-tags && npm publish",
-		"pub:major": "git add . && git commit -m \"chore: prepare for publish major\" && npm version major && git push --follow-tags && npm publish",
-		"pub:preminor": "git add . && git commit -m \"chore: prepare for publish preminor\" && npm version preminor && git push --follow-tags && npm publish",
-		"pub:prepatch": "git add . && git commit -m \"chore: prepare for publish prepatch\" && npm version prepatch && git push --follow-tags && npm publish",
-		"pub:prerelease": "git add . && git commit -m \"chore: prepare for publish prerelease\" && npm version prerelease && git push --follow-tags && npm publish",
-		"pub:from-git": "git add . && git commit -m \"chore: prepare for publish from-git\" && npm version from-git && git push --follow-tags && npm publish"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@eslint/compat": "^1.2.5",
-		"@eslint/js": "^9.18.0",
-		"@playwright/test": "^1.49.1",
-		"@sveltejs/adapter-cloudflare": "^5.0.1",
-		"@sveltejs/kit": "^2.16.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"@tailwindcss/vite": "^4.0.14",
-		"@testing-library/jest-dom": "^6.6.3",
-		"@testing-library/svelte": "^5.2.4",
-		"@types/node": "^22.13.10",
-		"eslint": "^9.18.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^3.0.0",
-		"globals": "^16.0.0",
-		"jsdom": "^26.0.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"prettier-plugin-tailwindcss": "^0.6.11",
-		"publint": "^0.3.2",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"sveltekit-superforms": "^2.24.0",
-		"tailwindcss": "^4.0.0",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.20.0",
-		"vite": "^6.0.0",
-		"vitest": "^3.0.0",
-		"zod": "^3.24.2"
-	},
-	"keywords": [
-		"svelte",
-		"ui",
-		"svelte5",
-		"modal",
-		"navigation",
-		"ripple",
-		"button",
-		"sidebar",
-		"card",
-		"select",
-		"tooltip",
-		"accordion",
-		"tabs",
-		"alert",
-		"badge",
-		"breadcrumb",
-		"carousel",
-		"collapse",
-		"list-group",
-		"pagination",
-		"progress",
-		"spinner",
-		"toast"
-	],
-	"dependencies": {
-		"dayjs": "^1.11.13",
-		"echarts": "^5.6.0",
-		"svelte-sonner": "^0.3.28",
-		"tailwind-merge": "^3.0.2",
-		"tailwind-variants": "^1.0.0"
-	}
+  "name": "@makolabs/ripple",
+  "version": "0.4.0",
+  "description": "Simple Svelte 5 powered component library ✨",
+  "license": "SEE LICENSE IN LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/makolabsai/ripple-ui.git"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "prepack": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "npm run test:unit -- --run && npm run test:e2e",
+    "test:e2e": "playwright test",
+    "pub:minor": "git add . && git commit -m \"chore: prepare for publish minor\" && npm version minor && git push --follow-tags && npm publish",
+    "pub:patch": "git add . && git commit -m \"chore: prepare for publish patch\" && npm version patch && git push --follow-tags && npm publish",
+    "pub:prelish": "git add . && git commit -m \"chore: prepare for publish premajor\" && npm version premajor && git push --follow-tags && npm publish",
+    "pub:major": "git add . && git commit -m \"chore: prepare for publish major\" && npm version major && git push --follow-tags && npm publish",
+    "pub:preminor": "git add . && git commit -m \"chore: prepare for publish preminor\" && npm version preminor && git push --follow-tags && npm publish",
+    "pub:prepatch": "git add . && git commit -m \"chore: prepare for publish prepatch\" && npm version prepatch && git push --follow-tags && npm publish",
+    "pub:prerelease": "git add . && git commit -m \"chore: prepare for publish prerelease\" && npm version prerelease && git push --follow-tags && npm publish",
+    "pub:from-git": "git add . && git commit -m \"chore: prepare for publish from-git\" && npm version from-git && git push --follow-tags && npm publish",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
+    "@playwright/test": "^1.49.1",
+    "@storybook/addon-a11y": "^9.0.18",
+    "@storybook/addon-docs": "^9.0.18",
+    "@storybook/addon-svelte-csf": "^5.0.7",
+    "@storybook/sveltekit": "^9.0.18",
+    "@sveltejs/adapter-cloudflare": "^5.0.1",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tailwindcss/vite": "^4.0.14",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.4",
+    "@types/node": "^22.13.10",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-storybook": "^9.0.18",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "publint": "^0.3.2",
+    "storybook": "^9.0.18",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "sveltekit-superforms": "^2.24.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0",
+    "zod": "^3.24.2"
+  },
+  "keywords": [
+    "svelte",
+    "ui",
+    "svelte5",
+    "modal",
+    "navigation",
+    "ripple",
+    "button",
+    "sidebar",
+    "card",
+    "select",
+    "tooltip",
+    "accordion",
+    "tabs",
+    "alert",
+    "badge",
+    "breadcrumb",
+    "carousel",
+    "collapse",
+    "list-group",
+    "pagination",
+    "progress",
+    "spinner",
+    "toast"
+  ],
+  "dependencies": {
+    "dayjs": "^1.11.13",
+    "echarts": "^5.6.0",
+    "svelte-sonner": "^0.3.28",
+    "tailwind-merge": "^3.0.2",
+    "tailwind-variants": "^1.0.0"
+  }
 }

package/dist/layout/card/StatsCard.svelte

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

@@ -1,4 +0,0 @@
-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/stats-card.d.ts

@@ -1,191 +0,0 @@
-import { Color } from '../../variants.js';
-export declare const statsCard: import("tailwind-variants").TVReturnType<{
-    color: {
-        [Color.DEFAULT]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.PRIMARY]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.SECONDARY]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.INFO]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.SUCCESS]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.WARNING]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.DANGER]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-    };
-    trendDirection: {
-        up: {
-            trend: string;
-        };
-        down: {
-            trend: string;
-        };
-        neutral: {
-            trend: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-    value: string;
-    trend: string;
-    previousValue: string;
-    unit: string;
-}, undefined, {
-    color: {
-        [Color.DEFAULT]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.PRIMARY]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.SECONDARY]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.INFO]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.SUCCESS]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.WARNING]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.DANGER]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-    };
-    trendDirection: {
-        up: {
-            trend: string;
-        };
-        down: {
-            trend: string;
-        };
-        neutral: {
-            trend: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-    value: string;
-    trend: string;
-    previousValue: string;
-    unit: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        [Color.DEFAULT]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.PRIMARY]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.SECONDARY]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.INFO]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.SUCCESS]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.WARNING]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-        [Color.DANGER]: {
-            label: string;
-            value: string;
-            trend: string;
-            previousValue: string;
-        };
-    };
-    trendDirection: {
-        up: {
-            trend: string;
-        };
-        down: {
-            trend: string;
-        };
-        neutral: {
-            trend: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-    value: string;
-    trend: string;
-    previousValue: string;
-    unit: string;
-}, undefined, unknown, unknown, undefined>>;

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

@@ -1,73 +0,0 @@
-import { tv } from 'tailwind-variants';
-import { Color } from '../../variants.js';
-export const statsCard = tv({
-    slots: {
-        base: '',
-        label: '',
-        value: '',
-        trend: '',
-        previousValue: '',
-        unit: '',
-    },
-    variants: {
-        color: {
-            [Color.DEFAULT]: {
-                label: 'text-default-500',
-                value: 'text-default-900',
-                trend: 'text-default-600',
-                previousValue: 'text-default-500'
-            },
-            [Color.PRIMARY]: {
-                label: 'text-primary-500',
-                value: 'text-primary-600',
-                trend: 'text-primary-600',
-                previousValue: 'text-primary-400'
-            },
-            [Color.SECONDARY]: {
-                label: 'text-secondary-500',
-                value: 'text-secondary-600',
-                trend: 'text-secondary-600',
-                previousValue: 'text-secondary-400'
-            },
-            [Color.INFO]: {
-                label: 'text-info-500',
-                value: 'text-info-600',
-                trend: 'text-info-600',
-                previousValue: 'text-info-400'
-            },
-            [Color.SUCCESS]: {
-                label: 'text-success-500',
-                value: 'text-success-600',
-                trend: 'text-success-600',
-                previousValue: 'text-success-400'
-            },
-            [Color.WARNING]: {
-                label: 'text-warning-500',
-                value: 'text-warning-600',
-                trend: 'text-warning-600',
-                previousValue: 'text-warning-400'
-            },
-            [Color.DANGER]: {
-                label: 'text-danger-500',
-                value: 'text-danger-600',
-                trend: 'text-danger-600',
-                previousValue: 'text-danger-400'
-            }
-        },
-        trendDirection: {
-            up: {
-                trend: 'text-success-600'
-            },
-            down: {
-                trend: 'text-danger-600'
-            },
-            neutral: {
-                trend: 'text-default-600'
-            }
-        }
-    },
-    defaultVariants: {
-        color: Color.DEFAULT,
-        trendDirection: 'neutral'
-    }
-});