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

package/dist/elements/progress/DividedProgress.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { Color, Size } from '../../variants.js';
+	import type { DividedProgressProps, VariantColors } from '../../index.js';
+
+	let {
+		segments,
+		max = 100,
+		size = Size.BASE,
+		showLabels = false,
+		showValues = true,
+		class: className = '',
+		barClass = '',
+		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 => ({
+			...segment,
+			percentage: Math.min(Math.round((segment.value / max) * 100), 100)
+		}))
+	);
+
+	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
+		})
+	);
+
+	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';
+		}
+	};
+
+	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
+		)
+	);
+</script>
+
+<div class={containerClass}>
+	<div
+		class={progressClass}
+		role="progressbar"
+		aria-valuenow={totalValue}
+		aria-valuemin="0"
+		aria-valuemax={max}
+	>
+		{#each segmentPercentages as segment, i}
+			{#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, i}
+				{#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

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

package/dist/index.d.ts

@@ -711,7 +711,23 @@ export type ProgressProps = {
     labelClass?: string;
     barClass?: string;
 };
+export type ProgressSegment = {
+    value: number;
+    color: VariantColors;
+    label?: string;
+};
+export type DividedProgressProps = {
+    segments: ProgressSegment[];
+    max?: number;
+    size?: VariantSizes;
+    showLabels?: boolean;
+    showValues?: boolean;
+    class?: string;
+    barClass?: string;
+    labelClass?: 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,4 +62,5 @@ 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.15",
+	"version": "0.0.1-dev.16",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",