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

package/dist/elements/progress/Progress.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { Color, Size } from '../../variants.js';
-	import type { ProgressProps } from '../../index.js';
+	import type { ProgressProps, ProgressSegment, VariantColors } from '../../index.js';
 
 	let {
 		value,
@@ -10,19 +10,55 @@
 		color = Color.PRIMARY,
 		showLabel = true,
 		labelPosition = 'right',
+		segments = undefined,
+		showValues = false,
+		showLabels = false,
 		class: className = '',
 		labelClass = '',
 		barClass = ''
 	}: ProgressProps = $props();
 
-	const percentage = $derived(Math.min(Math.round((value / max) * 100), 100));
+	// Function composition for better readability and maintainability
+	function calculatePercentage(val: number, maximum: number): number {
+		return Math.min(Math.round((val / maximum) * 100), 100);
+	}
 
+	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] || colorMap[Color.PRIMARY];
+	}
+
+	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
+	}
+
+	// Derived values
+	const percentage = $derived(segments ? 100 : calculatePercentage(value, max));
+	const segmentPercentages = $derived(
+		segments?.map(segment => ({
+			...segment,
+			percentage: calculatePercentage(segment.value, max)
+		})) || []
+	);
+
+	// Class compositions
 	const containerClass = $derived(
 		cn(
-			'relative flex items-center',
+			'relative',
 			{
-				'flex-col gap-1': labelPosition === 'top' || labelPosition === 'bottom',
-				'flex-row gap-3': labelPosition === 'right'
+				'flex items-center': !segments,
+				'flex-col gap-1': !segments && (labelPosition === 'top' || labelPosition === 'bottom'),
+				'flex-row gap-3': !segments && labelPosition === 'right'
 			},
 			className
 		)
@@ -35,23 +71,16 @@
 			'h-2.5': size === Size.BASE,
 			'h-3': size === Size.LG,
 			'h-4': size === Size.XL,
-			'order-2': labelPosition === 'top',
-			'order-1': labelPosition === 'bottom'
+			'order-2': !segments && labelPosition === 'top',
+			'order-1': !segments && labelPosition === 'bottom',
+			'flex overflow-hidden': segments
 		})
 	);
 
 	const fillClass = $derived(
 		cn(
 			'h-full rounded-full transition-all',
-			{
-				'bg-primary-600': color === Color.PRIMARY,
-				'bg-secondary-600': color === Color.SECONDARY,
-				'bg-success-600': color === Color.SUCCESS,
-				'bg-danger-600': color === Color.DANGER,
-				'bg-warning-600': color === Color.WARNING,
-				'bg-info-600': color === Color.INFO,
-				'bg-gray-600': color === Color.DEFAULT
-			},
+			segments ? '' : getColorClass(color),
 			barClass
 		)
 	);
@@ -59,12 +88,11 @@
 	const labelTextClass = $derived(
 		cn(
 			'text-gray-500',
+			getSizeTextClass(size),
 			{
-				'text-xs': size === Size.XS || size === Size.SM,
-				'text-sm': size === Size.BASE,
-				'text-base': size === Size.LG || size === Size.XL,
-				'order-1': labelPosition === 'top',
-				'order-2': labelPosition === 'bottom'
+				'order-1': !segments && labelPosition === 'top',
+				'order-2': !segments && labelPosition === 'bottom',
+				'mt-1': segments
 			},
 			labelClass
 		)
@@ -79,9 +107,39 @@
 		aria-valuemin="0"
 		aria-valuemax="100"
 	>
-		<div class={fillClass} style="width: {percentage}%"></div>
+		{#if segments}
+			{#each segmentPercentages as segment}
+				{#if segment.percentage > 0}
+					<div 
+						class={cn(getColorClass(segment.color), barClass)}
+						style="width: {segment.percentage}%"
+						title={segment.label || `${segment.value} (${segment.percentage}%)`}
+					></div>
+				{/if}
+			{/each}
+		{:else}
+			<div class={fillClass} style="width: {percentage}%"></div>
+		{/if}
 	</div>
-	{#if showLabel}
+	
+	{#if segments && (showLabels || showValues)}
+		<div class="flex justify-between mt-1">
+			{#each segmentPercentages as segment}
+				{#if segment.percentage > 0}
+					<div class={labelTextClass}>
+						{#if showLabels && segment.label}
+							{segment.label}
+						{/if}
+						{#if showValues}
+							{#if showLabels && segment.label} ({/if}
+							{segment.percentage}%
+							{#if showLabels && segment.label}){/if}
+						{/if}
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{:else if showLabel}
 		<span class={labelTextClass}>{percentage}%</span>
 	{/if}
 </div>

package/dist/index.d.ts

@@ -177,7 +177,7 @@ export type TableColumn = {
     sortable?: boolean;
     align?: 'left' | 'center' | 'right';
     width?: string;
-    cell?: (value: any, row: DataRow) => string | Snippet;
+    cell?: (value: any, row: DataRow) => string | ReturnType<import("svelte").Snippet>;
 };
 export type TableProps = {
     data: DataRow[];
@@ -700,34 +700,26 @@ export interface SliderProps {
         notation?: NotationType;
     };
 }
-export type ProgressProps = {
-    value: number;
-    max?: number;
-    size?: VariantSizes;
-    color?: VariantColors;
-    showLabel?: boolean;
-    labelPosition?: 'top' | 'bottom' | 'right';
-    class?: string;
-    labelClass?: string;
-    barClass?: string;
-};
 export type ProgressSegment = {
     value: number;
     color: VariantColors;
     label?: string;
 };
-export type DividedProgressProps = {
-    segments: ProgressSegment[];
+export type ProgressProps = {
+    value: number;
     max?: number;
     size?: VariantSizes;
+    color?: VariantColors;
+    showLabel?: boolean;
+    labelPosition?: 'top' | 'bottom' | 'right';
+    segments?: ProgressSegment[];
     showLabels?: boolean;
     showValues?: boolean;
-    class?: string;
-    barClass?: string;
+    class?: ClassValue;
     labelClass?: string;
+    barClass?: string;
 };
 export { default as Progress } from './elements/progress/Progress.svelte';
-export { default as DividedProgress } from './elements/progress/DividedProgress.svelte';
 export interface TimelineItem {
     title: string;
     time: Date | string;

package/dist/index.js

@@ -62,5 +62,4 @@ export { default as DateRange } from './forms/DateRange.svelte';
 export { default as Tags } from './forms/Tags.svelte';
 export { default as RadioPill } from './forms/RadioPill.svelte';
 export { default as Progress } from './elements/progress/Progress.svelte';
-export { default as DividedProgress } from './elements/progress/DividedProgress.svelte';
 export { default as Timeline } from './elements/timeline/Timeline.svelte';

package/package.json

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

package/dist/elements/progress/DividedProgress.svelte

@@ -1,112 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../helper/cls.js';
-	import { Color, Size } from '../../variants.js';
-	import type { DividedProgressProps, ProgressSegment, VariantColors } from '../../index.js';
-
-	let {
-		segments,
-		max = 100,
-		size = Size.BASE,
-		showLabels = false,
-		showValues = true,
-		class: className = '',
-		barClass = '',
-		labelClass = ''
-	}: DividedProgressProps = $props();
-
-	// 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: calculatePercentage(segment.value, max)
-		}));
-	}
-
-	// Class compositions
-	const containerClass = $derived(cn('relative w-full', className));
-
-	const progressClass = $derived(
-		cn('w-full rounded-full bg-gray-200 flex overflow-hidden', {
-			'h-1.5': size === Size.XS,
-			'h-2': size === Size.SM,
-			'h-2.5': size === Size.BASE,
-			'h-3': size === Size.LG,
-			'h-4': size === Size.XL
-		})
-	);
-
-	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', getSizeTextClass(size), labelClass)
-	);
-</script>
-
-<div class={containerClass}>
-	<div
-		class={progressClass}
-		role="progressbar"
-		aria-valuenow={totalValue}
-		aria-valuemin="0"
-		aria-valuemax={max}
-	>
-		{#each segmentPercentages as segment}
-			{#if segment.percentage > 0}
-				<div 
-					class={cn(getColorClass(segment.color), barClass)}
-					style="width: {segment.percentage}%"
-					title={segment.label || `${segment.value} (${segment.percentage}%)`}
-				></div>
-			{/if}
-		{/each}
-	</div>
-	
-	{#if showLabels || showValues}
-		<div class="flex justify-between mt-1">
-			{#each segmentPercentages as segment}
-				{#if segment.percentage > 0}
-					<div class={labelTextClass}>
-						{#if showLabels && segment.label}
-							{segment.label}
-						{/if}
-						{#if showValues}
-							{#if showLabels && segment.label} ({/if}
-							{segment.percentage}%
-							{#if showLabels && segment.label}){/if}
-						{/if}
-					</div>
-				{/if}
-			{/each}
-		</div>
-	{/if}
-</div>

package/dist/elements/progress/DividedProgress.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { DividedProgressProps } from '../../index.js';
-declare const DividedProgress: import("svelte").Component<DividedProgressProps, {}, "">;
-type DividedProgress = ReturnType<typeof DividedProgress>;
-export default DividedProgress;