@makolabs/ripple 0.0.1-dev.66 → 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

@@ -187,6 +187,7 @@ export type MetricCardProps = {
     value: string | number;
     details?: MetricDetail[];
     percent?: number;
+    segments?: ProgressSegment[];
     primaryColor?: string;
     secondaryColor?: string;
     class?: ClassValue;

package/dist/layout/card/MetricCard.svelte

@@ -2,58 +2,60 @@
 	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 = [], 
+	let {
+		title,
+		value,
+		details = [],
 		percent,
-		primaryColor = 'text-green-700',
-		secondaryColor = 'text-red-600',
+		segments,
+		primaryColor = 'primary',
+		secondaryColor = 'default',
 		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));
+	const baseClass = $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 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 secondaryDetail}
-		<div class={cn(detailSlot(), secondaryColor)}>
-			<span>{secondaryDetail.label}</span>
-			<span class="font-medium">
-				{secondaryDetail.value}
-			</span>
+
+	{#if segments}
+		<div class={progressSlot()}>
+			<Progress 
+				value={0}
+				{segments}
+				size={Size.SM}
+				showLabels={true}
+				showValues={true}
+			/>
 		</div>
-	{/if}
-	
-	{#if percent !== undefined}
+	{:else if percent !== undefined}
 		<div class={progressSlot()}>
-			<div
-				class="h-2 rounded-full bg-green-500"
-				style="width: {Math.min(100, percent)}%"
-			></div>
+			<Progress 
+				value={percent} 
+				size={Size.SM} 
+				color={Color.SUCCESS}
+				showLabel={false}
+			/>
 		</div>
 	{/if}
 </div> 

package/package.json

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