hamzus-ui 0.0.12 → 0.0.13

package/index.d.ts

@@ -21,6 +21,9 @@ export { default as TextArea } from "./src/components/hamzus-ui/TextArea/TextAre
 export { default as Checkbox } from "./src/components/hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte"
 export { default as Switch } from "./src/components/hamzus-ui/Swicth/Swicth.svelte"
 
+// data
+export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCircle/ProgressCircle.svelte"
+
 
 export * as DropdownMenu from "./src/components/hamzus-ui/DropdownMenu";
 export * as Popover from "./src/components/hamzus-ui/Popover";

package/index.js

@@ -16,7 +16,8 @@ export { default as DatePicker } from "./src/components/hamzus-ui/DatePicker/Dat
 export { default as TextArea } from "./src/components/hamzus-ui/TextArea/TextArea.svelte"
 export { default as Checkbox } from "./src/components/hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte"
 export { default as Switch } from "./src/components/hamzus-ui/Swicth/Swicth.svelte"
-
+// data
+export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCircle/ProgressCircle.svelte"
 
 export * as DropdownMenu from "./src/components/hamzus-ui/DropdownMenu"
 export * as Popover from "./src/components/hamzus-ui/Popover"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hamzus-ui",
-	"version": "0.0.12",
+	"version": "0.0.13",
 	"type": "module",
     "main": "index.js",
     "svelte": "index.js",

package/src/components/hamzus-ui/CopyCode/CopyCode.svelte

@@ -32,7 +32,7 @@
             </svg>            
         {/if}            
     </IconButton>
-    <TinyScrollArea>
+    <TinyScrollArea style="justify-content:center;">
         <h4 class="code" style="text-align: left;">{displayedText}</h4>
     </TinyScrollArea>
 </div>

package/src/components/hamzus-ui/ProgressCircle/ProgressCircle.svelte

@@ -0,0 +1,167 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let size = 100;
+	export let thickness = 10;
+	export let progress = 100; // 0–100
+	export let gapPixels = 4; // Écart visuel minimal
+	export let color = null;
+	export let colorPercentBased = {
+		0: 'var(--red)',
+		40: 'var(--orange)',
+		60: 'var(--green)'
+	};
+	export let bgColor = 'var(--bg-2)';
+	export let showLabel = false;
+	export let animated = true;
+	export let linecap = 'round';
+
+	const r = (size - thickness) / 2;
+	const cx = size / 2;
+	const cy = size / 2;
+	const circumference = 2 * Math.PI * r;
+
+	let dynamicColor = color === null;
+	let copyColor = dynamicColor
+		? animated
+			? colorPercentBased[0]
+			: getCorrectColor(progress)
+		: color;
+	let copyProgress = animated ? 0 : progress === 100 ? 99.99 : progress;
+
+	// Fonction ease-out (courbe cubic)
+	function easeOutCubic(t) {
+		return 1 - Math.pow(1 - t, 3);
+	}
+
+	onMount(() => {
+		if (!animated) return;
+
+		const duration = 800; // en ms
+		const start = performance.now();
+
+		function animate(now) {
+			const elapsed = now - start;
+			const t = Math.min(elapsed / duration, 1); // clamp entre 0 et 1
+
+			const eased = easeOutCubic(t);
+
+			let newValue = Math.round(progress * eased);
+
+			copyProgress = newValue === 100 ? 99.99 : newValue;
+
+			// determiner la couleur si il y a dynamic color
+			if (dynamicColor) {
+				let finalColor = colorPercentBased[0];
+				for (const step in colorPercentBased) {
+					const color = colorPercentBased[step];
+
+					if (copyProgress > step) {
+						finalColor = color;
+						continue;
+					}
+
+					break;
+				}
+
+				copyColor = finalColor;
+			}
+
+			if (t < 1) {
+				requestAnimationFrame(animate);
+			}
+		}
+
+		requestAnimationFrame(animate);
+	});
+
+	function getCorrectColor(progress) {
+		let finalColor = colorPercentBased[0];
+		for (const step in colorPercentBased) {
+			const color = colorPercentBased[step];
+
+			if (progress > step) {
+				finalColor = color;
+				continue;
+			}
+
+			break;
+		}
+
+		return finalColor;
+	}
+
+	// Progrès en angle
+	$: progressAngle = (copyProgress / 100) * 360;
+
+	// ➕ Compensation du stroke-linecap (ajoute une demi-thickness de chaque côté de l'arc)
+	const capVisualOverlap = thickness; // total débordement = thickness (2 * thickness/2)
+
+	$: totalGapPx = gapPixels + capVisualOverlap;
+	$: gapAngle = (totalGapPx / circumference) * 360;
+
+	$: startAngleProgress = -90;
+	$: endAngleProgress = startAngleProgress + progressAngle;
+
+	$: startAngleBg = endAngleProgress + gapAngle;
+	$: endAngleBg = 270 - gapAngle;
+
+	function polarToCartesian(cx, cy, r, angleDeg) {
+		const angleRad = (angleDeg * Math.PI) / 180;
+		return {
+			x: cx + r * Math.cos(angleRad),
+			y: cy + r * Math.sin(angleRad)
+		};
+	}
+
+	function describeArc(cx, cy, r, startAngle, endAngle) {
+		const start = polarToCartesian(cx, cy, r, endAngle);
+		const end = polarToCartesian(cx, cy, r, startAngle);
+		const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
+
+		return ['M', start.x, start.y, 'A', r, r, 0, largeArcFlag, 0, end.x, end.y].join(' ');
+	}
+</script>
+
+<svg class="progress-circle" width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+	<!-- Arc de progression -->
+	<path
+		d={describeArc(cx, cy, r, startAngleProgress, endAngleProgress)}
+		stroke={copyColor}
+		stroke-width={thickness}
+		fill="none"
+		stroke-linecap={linecap}
+	/>
+
+	{#if showLabel}
+		<text
+			x="50%"
+			y="50%"
+			text-anchor="middle"
+			dominant-baseline="central"
+			fill={copyColor}
+			style="font-size: {size / 3.5}px;"
+			class="h4">{Math.round(copyProgress)}%</text
+		>
+	{/if}
+
+	<!-- Arc de fond, après le progress + gap -->
+	{#if copyProgress < 96}
+		<path
+			d={describeArc(cx, cy, r, startAngleBg, endAngleBg)}
+			stroke={bgColor}
+			stroke-width={thickness}
+			fill="none"
+			stroke-linecap={linecap}
+		/>
+	{/if}
+</svg>
+
+<style>
+	.progress-circle path {
+		transition: stroke 0.3s ease-out;
+	}
+	.progress-circle text {
+		transition: color 0.3s ease-out;
+	}
+</style>