@makolabs/ripple 0.0.1-dev.74 → 0.0.1-dev.76

package/dist/file-browser/FileBrowser.svelte

@@ -393,12 +393,26 @@
 
 	// Ensure our selectedFiles state is updated when the Table selection changes
 	function onselect(selectedItems: FileItem[]) {
-		// We need to differentiate between what's a user action and what's our programmatic update
-		// Get keys from currently selected items
-		const newSelectedKeys = selectedItems.map((item) => item.key);
+		// Filter out files that aren't allowed to be selected based on actions' isAllowed logic
+		const allowedItems = selectedItems.filter((item) => {
+			// Check if any single action allows this file
+			const hasAllowedAction = actions.some((action: FileAction) => {
+				// Only check single file actions for individual file selection
+				if ('action' in action && typeof action.action === 'function') {
+					return action.isAllowed(item);
+				}
+				return false;
+			});
+			
+			// Always allow folders to be selected (for recursive selection)
+			return item.isFolder || hasAllowedAction;
+		});
+
+		// Get keys from allowed selected items
+		const newSelectedKeys = allowedItems.map((item) => item.key);
 
-		// Update the global selection state
-		handleSelectByKeys(newSelectedKeys, selectedItems);
+		// Update the global selection state with only allowed items
+		handleSelectByKeys(newSelectedKeys, allowedItems);
 	}
 
 	// Handle selection based on keys to avoid redundant code

package/dist/layout/card/MetricCard.svelte

@@ -14,31 +14,40 @@
 		class: className = ''
 	}: MetricCardProps = $props();
 
-	const { base, title: titleSlot, value: valueSlot, detail: detailSlot, progress: progressSlot } = $derived(
-		metricCard()
-	);
+	const {
+		base,
+		title: titleSlot,
+		value: valueSlot,
+		detail: detailSlot,
+		progress: progressSlot
+	} = $derived(metricCard());
 
 	const baseClass = $derived(cn(base(), 'flex flex-col h-full', className));
 </script>
 
 <div class={baseClass}>
-	<h3 class={titleSlot()}>{title}</h3>
-	<div class={valueSlot()}>{value}</div>
+	{#if title}
+		<div class={titleSlot()}>{title}</div>
+	{/if}
+
+	{#if value !== undefined}
+		<div class={valueSlot()}>{value}</div>
+	{/if}
 
 	{#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.color || 'text-default-900'}">{detail.value}</span>
+			{#each details as detail, index (detail.label + index)}
+				<div class="flex justify-between text-xs">
+					<span class="text-default-500">{detail.label}</span>
+					<span class="font-medium {detail.color || 'text-default-900'}">{detail.value}</span>
 				</div>
 			{/each}
 		</div>
 	{/if}
 
 	{#if segments}
-		<div class={progressSlot()}>
-			<Progress 
+		<div class={cn(progressSlot(), details.length > 0 ? 'pt-2' : '')}>
+			<Progress
 				value={0}
 				{segments}
 				size={Size.SM}
@@ -48,13 +57,8 @@
 			/>
 		</div>
 	{:else if percent !== undefined}
-		<div class={progressSlot()}>
-			<Progress 
-				value={percent} 
-				size={Size.SM} 
-				color={Color.SUCCESS}
-				showLabel={false}
-			/>
+		<div class={cn(progressSlot(), details.length > 0 ? 'pt-2' : '')}>
+			<Progress value={percent} size={Size.SM} color={Color.SUCCESS} showLabel={false} />
 		</div>
 	{/if}
-</div> 
+</div>

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

@@ -2,9 +2,9 @@ import { tv } from 'tailwind-variants';
 export const metricCard = tv({
     slots: {
         base: 'bg-white rounded-lg border border-default-200 p-6 shadow-sm hover:shadow-md transition-shadow',
-        title: 'text-sm font-medium text-default-600 mb-2',
-        value: 'text-2xl font-bold text-default-900 mb-4',
-        detail: 'space-y-3 mb-4',
+        title: 'text-sm text-default-500',
+        value: 'text-3xl font-bold text-default-900 mt-2',
+        detail: 'mt-3 space-y-1',
         progress: 'mt-auto'
     }
 });

package/package.json

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