@makolabs/ripple 0.0.1-dev.16 → 0.0.1-dev.17

package/dist/elements/progress/DividedProgress.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { Color, Size } from '../../variants.js';
-	import type { DividedProgressProps, VariantColors } from '../../index.js';
+	import type { DividedProgressProps, ProgressSegment, VariantColors } from '../../index.js';
 
 	let {
 		segments,
@@ -14,20 +14,28 @@
 		labelClass = ''
 	}: DividedProgressProps = $props();
 
-	// Calculate total value of all segments
-	const totalValue = $derived(segments.reduce((sum, segment) => sum + segment.value, 0));
-	
-	// Calculate percentages for each segment
-	const segmentPercentages = $derived(
-		segments.map(segment => ({
+	// Calculate derived values
+	const totalValue = $derived(calculateTotalValue(segments));
+	const segmentPercentages = $derived(calculateSegmentPercentages(segments, max));
+
+	// Function composition - each function has a single responsibility
+	function calculateTotalValue(segments: ProgressSegment[]): number {
+		return segments.reduce((sum, segment) => sum + segment.value, 0);
+	}
+
+	function calculatePercentage(value: number, max: number): number {
+		return Math.min(Math.round((value / max) * 100), 100);
+	}
+
+	function calculateSegmentPercentages(segments: ProgressSegment[], max: number) {
+		return segments.map(segment => ({
 			...segment,
-			percentage: Math.min(Math.round((segment.value / max) * 100), 100)
-		}))
-	);
+			percentage: calculatePercentage(segment.value, max)
+		}));
+	}
 
-	const containerClass = $derived(
-		cn('relative w-full', className)
-	);
+	// Class compositions
+	const containerClass = $derived(cn('relative w-full', className));
 
 	const progressClass = $derived(
 		cn('w-full rounded-full bg-gray-200 flex overflow-hidden', {
@@ -39,37 +47,28 @@
 		})
 	);
 
-	const getColorClass = (color: VariantColors) => {
-		switch (color) {
-			case Color.PRIMARY:
-				return 'bg-primary-600';
-			case Color.SECONDARY:
-				return 'bg-secondary-600';
-			case Color.SUCCESS:
-				return 'bg-success-600';
-			case Color.DANGER:
-				return 'bg-danger-600';
-			case Color.WARNING:
-				return 'bg-warning-600';
-			case Color.INFO:
-				return 'bg-info-600';
-			case Color.DEFAULT:
-				return 'bg-gray-600';
-			default:
-				return 'bg-primary-600';
-		}
-	};
+	function getColorClass(color: VariantColors): string {
+		const colorMap = {
+			[Color.PRIMARY]: 'bg-primary-600',
+			[Color.SECONDARY]: 'bg-secondary-600',
+			[Color.SUCCESS]: 'bg-success-600',
+			[Color.DANGER]: 'bg-danger-600',
+			[Color.WARNING]: 'bg-warning-600',
+			[Color.INFO]: 'bg-info-600',
+			[Color.DEFAULT]: 'bg-gray-600'
+		};
+
+		return colorMap[color] || 'bg-primary-600';
+	}
+
+	function getSizeTextClass(size: string): string {
+		if (size === Size.XS || size === Size.SM) return 'text-xs';
+		if (size === Size.BASE) return 'text-sm';
+		return 'text-base'; // For Size.LG, Size.XL, and any other sizes
+	}
 
 	const labelTextClass = $derived(
-		cn(
-			'text-gray-500 mt-1',
-			{
-				'text-xs': size === Size.XS || size === Size.SM,
-				'text-sm': size === Size.BASE,
-				'text-base': size === Size.LG || size === Size.XL
-			},
-			labelClass
-		)
+		cn('text-gray-500 mt-1', getSizeTextClass(size), labelClass)
 	);
 </script>
 
@@ -81,7 +80,7 @@
 		aria-valuemin="0"
 		aria-valuemax={max}
 	>
-		{#each segmentPercentages as segment, i}
+		{#each segmentPercentages as segment}
 			{#if segment.percentage > 0}
 				<div 
 					class={cn(getColorClass(segment.color), barClass)}
@@ -94,7 +93,7 @@
 	
 	{#if showLabels || showValues}
 		<div class="flex justify-between mt-1">
-			{#each segmentPercentages as segment, i}
+			{#each segmentPercentages as segment}
 				{#if segment.percentage > 0}
 					<div class={labelTextClass}>
 						{#if showLabels && segment.label}

package/package.json

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