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

package/dist/elements/dropdown/Select.svelte

@@ -208,6 +208,8 @@
 		{disabled}
 		aria-expanded={open}
 		onclick={handleToggle}
+		class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+		tabindex={disabled ? -1 : 0}
 	></button>
 	<span class="flex min-h-[1.5rem] flex-1 flex-wrap items-center gap-1 overflow-hidden">
 		{#if multiple && selectedItems.length > 0}

package/dist/elements/dropdown/select.js

@@ -3,10 +3,10 @@ import { Size } from '../../variants.js';
 export const selectTV = tv({
     slots: {
         base: '',
-        trigger: `flex items-center justify-between w-full text-left bg-white border
-			border-default-200 text-default-700 hover:border-default-300 rounded-md cursor-pointer`,
+        trigger: `relative flex items-center justify-between w-full text-left bg-white border
+			border-default-300 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:border-primary-500 focus-within:ring-primary-500 rounded-lg shadow-xs cursor-pointer transition-colors hover:border-default-400`,
         triggerIcon: 'transition-transform duration-200 text-default-500',
-        container: 'absolute z-50 w-full mt-1 bg-white overflow-clip border border-default-200 rounded-md shadow-md origin-top-left top-full left-0 mt-2',
+        container: 'absolute z-50 w-full mt-1 bg-white overflow-clip border border-default-200 rounded-md shadow-sm origin-top-left top-full left-0 mt-2',
         searchInput: 'flex items-center gap-x-3 w-full outline-none px-2 h-10 border-b border-b-default-200',
         list: 'py-1 max-h-60 overflow-x-clip overflow-y-auto h-full',
         item: `w-full px-3 py-2 text-sm text-left
@@ -26,21 +26,21 @@ export const selectTV = tv({
                 base: 'w-24'
             },
             [Size.SM]: {
-                trigger: 'h-8 px-2.5 py-1.5 text-xs gap-1.5',
+                trigger: 'h-8 px-3 py-2 text-sm gap-1.5',
                 triggerIcon: 'h-3.5 w-3.5',
                 container: 'max-h-48',
                 item: 'px-2.5 py-1.5 text-xs',
                 base: 'w-32'
             },
             [Size.BASE]: {
-                trigger: 'h-10 px-3 py-2 text-sm gap-2',
+                trigger: 'h-10 px-3 py-2 text-base gap-2',
                 triggerIcon: 'h-4 w-4',
                 container: 'max-h-60',
                 item: 'px-3 py-2 text-sm',
                 base: 'w-40'
             },
             [Size.LG]: {
-                trigger: 'h-11 px-4 py-2.5 text-base gap-2.5',
+                trigger: 'h-12 px-3 py-2 text-lg gap-2.5',
                 triggerIcon: 'h-5 w-5',
                 container: 'max-h-72',
                 item: 'px-4 py-2.5 text-base',
@@ -63,7 +63,7 @@ export const selectTV = tv({
         },
         disabled: {
             true: {
-                trigger: 'opacity-50 cursor-not-allowed hover:border-default-200',
+                trigger: 'opacity-50 cursor-not-allowed hover:border-default-300',
                 container: 'pointer-events-none',
                 item: 'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent'
             }

package/dist/forms/Input.svelte

@@ -22,7 +22,7 @@
 		cn(
 			'transition-colors',
 			{
-				'border rounded-lg shadow-sm w-full bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2':
+				'border rounded-lg shadow-xs w-full bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2':
 					BASIC_TYPES.includes(type),
 				'w-full bg-white px-3 py-2 text-sm resize-y min-h-[100px]': type === 'textarea',
 				'border-red-300 focus:border-red-500 focus:ring-red-500': errors.length,

package/dist/index.d.ts

@@ -177,6 +177,21 @@ 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;
+    segments?: ProgressSegment[];
+    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 +356,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 +404,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,61 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { metricCard } from './metric-card.js';
+	import type { MetricCardProps } from '../../index.js';
+	import Progress from '../../elements/progress/Progress.svelte';
+	import { Size, Color } from '../../variants.js';
+
+	let {
+		title,
+		value,
+		details = [],
+		percent,
+		segments,
+		primaryColor = 'primary',
+		secondaryColor = 'default',
+		class: className = ''
+	}: MetricCardProps = $props();
+
+	const { base, title: titleSlot, value: valueSlot, detail: detailSlot, progress: progressSlot } = $derived(
+		metricCard()
+	);
+
+	const baseClass = $derived(cn(base(), className));
+</script>
+
+<div class={baseClass}>
+	<h3 class={titleSlot()}>{title}</h3>
+	<div class={valueSlot()}>{value}</div>
+
+	{#if details.length > 0}
+		<div class={detailSlot()}>
+			{#each details as detail}
+				<div class="flex items-center justify-between">
+					<span class="text-sm text-default-600">{detail.label}</span>
+					<span class="text-sm font-medium">{detail.value}</span>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	{#if segments}
+		<div class={progressSlot()}>
+			<Progress 
+				value={0}
+				{segments}
+				size={Size.SM}
+				showLabels={true}
+				showValues={true}
+			/>
+		</div>
+	{:else if percent !== undefined}
+		<div class={progressSlot()}>
+			<Progress 
+				value={percent} 
+				size={Size.SM} 
+				color={Color.SUCCESS}
+				showLabel={false}
+			/>
+		</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.67",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",