hamzus-ui 0.0.11 → 0.0.13

package/index.d.ts

@@ -1,5 +1,4 @@
 // index.d.ts
-import type { SvelteComponentTyped } from "svelte";
 
 // button
 export { default as Button } from "./src/components/hamzus-ui/Button/Button.svelte"
@@ -18,6 +17,12 @@ export { default as Dialog } from "./src/components/hamzus-ui/Dialog/Dialog.svel
 // form
 export { default as Input } from "./src/components/hamzus-ui/Input/Input.svelte"
 export { default as DatePicker } from "./src/components/hamzus-ui/DatePicker/DatePicker.svelte"
+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";

package/index.js

@@ -13,7 +13,11 @@ export { default as Dialog } from "./src/components/hamzus-ui/Dialog/Dialog.svel
 // form
 export { default as Input } from "./src/components/hamzus-ui/Input/Input.svelte"
 export { default as DatePicker } from "./src/components/hamzus-ui/DatePicker/DatePicker.svelte"
-
+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.11",
+	"version": "0.0.13",
 	"type": "module",
     "main": "index.js",
     "svelte": "index.js",

package/src/components/hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte

@@ -1,41 +1,116 @@
 <script>
-    export let size = "24px"
-    export let name = '';
-    export let label = '';
-    export let disabled = false;
-    export let fullWidth = false;
-    export let checked = false;
-    export let onChange = null;
+	export let size = 24;
+	export let name = '';
+	export let label = '';
+	export let disabled = false;
+	export let fullWidth = false;
+	export let checked = false;
+	export let direction = 'ltr';
+	export let onChange = null;
 
-    import "./index.css"
+	function handleCheckboxChange() {
+		if (disabled) {
+			checked = checked;
+			return;
+		}
 
-    function handleCheckboxChange() {
-        if (disabled) {
-            checked = checked
-            return
-        }
-        
-        checked = !checked
+		checked = !checked;
 
-        if (onChange) {
-            onChange(checked)
-        }
-    }
+		if (onChange) {
+			onChange(checked);
+		}
+	}
 </script>
-<label class="checkbox-label {disabled ? "disabled" : ""} {fullWidth ? "full-width" : ""}" >
-    {#if label}
-        <h4>{label}</h4>
-    {/if}
-    <div class="checkbox-box" style="width:{size};height:{size};">
-        <input
-            {disabled} 
-            type="checkbox" 
-            {name}
-            {checked}
-            on:change={handleCheckboxChange}
-            style="display:none;" />
-        <svg width="20px" height="20px" viewBox="0 0 20 20">
-          <polyline points="4 11 8 15 16 6"></polyline>
-        </svg>
-    </div>
-</label>
+
+<label class="checkbox-label {disabled ? 'disabled' : ''} {fullWidth ? 'full-width' : ''}">
+	{#if label && direction === 'ltr'}
+		<h4>{label}</h4>
+	{/if}
+	<div class="checkbox-box" style="width:{size}px;height:{size}px;--width:{size}px;">
+		<input
+			{disabled}
+			type="checkbox"
+			{name}
+			{checked}
+			on:change={handleCheckboxChange}
+			style="display:none;"
+		/>
+		<svg width="20px" height="20px" viewBox="0 0 20 20">
+			<polyline points="4 11 8 15 16 6"></polyline>
+		</svg>
+	</div>
+	{#if label && direction === 'rtl'}
+		<h4>{label}</h4>
+	{/if}
+</label>
+
+<style>
+	.checkbox-label {
+		display: flex;
+		align-items: center;
+		column-gap: 7px;
+		cursor: pointer;
+		user-select: none;
+	}
+	.checkbox-label.full-width {
+		width: 100%;
+		justify-content: space-between;
+	}
+	.checkbox-box {
+		width: 22px;
+		height: 22px;
+		display: flex;
+		flex-shrink: 0;
+		border-radius: calc(var(--width) / 3.5);
+		border: 2px solid var(--stroke);
+		position: relative;
+		cursor: pointer;
+		transition: background-color 0.2s ease-out;
+	}
+	.checkbox-box:hover {
+		background-color: var(--bg-2);
+	}
+	.checkbox-box svg {
+		position: absolute;
+		width: 70%;
+		height: auto;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%) scale(0.6);
+		user-select: none;
+		pointer-events: none;
+		transition-property: transform;
+		transition-duration: 0.2s;
+		transition-timing-function: ease-out;
+	}
+	.checkbox-box svg polyline {
+		fill: none;
+		stroke: #fff;
+		stroke-width: 2;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		stroke-dasharray: 50px;
+		stroke-dashoffset: 50px;
+		transition: stroke-dashoffset 0.2s ease-out;
+	}
+
+	.checkbox-box:has(input:checked) {
+		background-color: var(--accent);
+		border: 2px solid var(--accent);
+	}
+	.checkbox-box:has(input:checked) svg {
+		user-select: initial;
+		pointer-events: initial;
+		transform: translate(-50%, -50%) scale(1);
+	}
+	.checkbox-box:has(input:checked) svg polyline {
+		stroke-dashoffset: 0;
+	}
+	.checkbox-label.disabled {
+		opacity: 0.9;
+		cursor: not-allowed;
+	}
+	.checkbox-label.disabled .checkbox-box {
+		cursor: not-allowed;
+	}
+</style>

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>

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

@@ -1,28 +1,26 @@
 <script>
 	export let style;
-	export let size = 24;
+	export let size = 20;
 	export let checked = false;
 	export let disabled = false;
 	export let disabledIcon = false;
-	export let onChange  = undefined;
+	export let onChange = undefined;
+	export let fullWidth = false;
 	export let label;
 
-	import './index.css';
-
 	function handleChange() {
-        
 		if (disabled) {
 			return;
 		}
 
-        checked = !checked;
-        if (onChange && typeof onChange === 'function') {
-            onChange(checked)
-        }
+		checked = !checked;
+		if (onChange && typeof onChange === 'function') {
+			onChange(checked);
+		}
 	}
 </script>
 
-<label class="label-switch">
+<label class="label-switch {fullWidth ? 'full-width' : ''}">
 	{#if label}
 		<h4>{label}</h4>
 	{/if}
@@ -30,55 +28,204 @@
 		style="width:{size * 2 + 4}px;height:{size + 4}px;--size:{size + 4}px; {style ? style : ''}"
 		class="switch {checked ? 'active' : ''} {disabled ? 'disabled' : ''}"
 	>
-		<input type="checkbox" {checked} style="display:none;" on:change={handleChange}/>
+		<input type="checkbox" {checked} style="display:none;" on:change={handleChange} />
 		<div
 			style="width:{size}px;height:{size}px;transform:{checked
 				? `translateX(${size + 2}px) translateY(2px)`
 				: 'translateX(2px) translateY(2px)'};"
 			class="head"
 		>
-            {#if disabledIcon}
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M18 10.75C17.59 10.75 17.25 10.41 17.25 10V8C17.25 4.85 16.36 2.75 12 2.75C7.64 2.75 6.75 4.85 6.75 8V10C6.75 10.41 6.41 10.75 6 10.75C5.59 10.75 5.25 10.41 5.25 10V8C5.25 5.1 5.95 1.25 12 1.25C18.05 1.25 18.75 5.1 18.75 8V10C18.75 10.41 18.41 10.75 18 10.75Z" fill="#292D32"/>
-                <path d="M12 19.25C10.21 19.25 8.75 17.79 8.75 16C8.75 14.21 10.21 12.75 12 12.75C13.79 12.75 15.25 14.21 15.25 16C15.25 17.79 13.79 19.25 12 19.25ZM12 14.25C11.04 14.25 10.25 15.04 10.25 16C10.25 16.96 11.04 17.75 12 17.75C12.96 17.75 13.75 16.96 13.75 16C13.75 15.04 12.96 14.25 12 14.25Z" fill="#292D32"/>
-                <path d="M17 22.75H7C2.59 22.75 1.25 21.41 1.25 17V15C1.25 10.59 2.59 9.25 7 9.25H17C21.41 9.25 22.75 10.59 22.75 15V17C22.75 21.41 21.41 22.75 17 22.75ZM7 10.75C3.42 10.75 2.75 11.43 2.75 15V17C2.75 20.57 3.42 21.25 7 21.25H17C20.58 21.25 21.25 20.57 21.25 17V15C21.25 11.43 20.58 10.75 17 10.75H7Z" fill="#292D32"/>
-                </svg>
-            {/if}
-            
-        </div>
-		<div class="state">
-			<div class="active">
+			{#if disabledIcon}
 				<svg
-					width="31"
-					height="31"
-					viewBox="0 0 31 31"
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
 					fill="none"
 					xmlns="http://www.w3.org/2000/svg"
 				>
 					<path
-						fill-rule="evenodd"
-						clip-rule="evenodd"
-						d="M15.5 5.97668C16.0523 5.97668 16.5 6.4244 16.5 6.97668L16.5 24.0233C16.5 24.5756 16.0523 25.0233 15.5 25.0233C14.9477 25.0233 14.5 24.5756 14.5 24.0233L14.5 6.97668C14.5 6.4244 14.9477 5.97668 15.5 5.97668Z"
-						fill="black"
+						d="M18 10.75C17.59 10.75 17.25 10.41 17.25 10V8C17.25 4.85 16.36 2.75 12 2.75C7.64 2.75 6.75 4.85 6.75 8V10C6.75 10.41 6.41 10.75 6 10.75C5.59 10.75 5.25 10.41 5.25 10V8C5.25 5.1 5.95 1.25 12 1.25C18.05 1.25 18.75 5.1 18.75 8V10C18.75 10.41 18.41 10.75 18 10.75Z"
+						fill="#292D32"
 					/>
-				</svg>
-			</div>
-			<div class="not-active">
-				<svg
-					width="31"
-					height="31"
-					viewBox="0 0 31 31"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
 					<path
-						fill-rule="evenodd"
-						clip-rule="evenodd"
-						d="M15.5 5.58868C10.0261 5.58868 5.58868 10.0261 5.58868 15.5C5.58868 20.9739 10.0261 25.4113 15.5 25.4113C20.9739 25.4113 25.4113 20.9739 25.4113 15.5C25.4113 10.0261 20.9739 5.58868 15.5 5.58868ZM3.58868 15.5C3.58868 8.92156 8.92156 3.58868 15.5 3.58868C22.0784 3.58868 27.4113 8.92156 27.4113 15.5C27.4113 22.0784 22.0784 27.4113 15.5 27.4113C8.92156 27.4113 3.58868 22.0784 3.58868 15.5Z"
-						fill="black"
+						d="M12 19.25C10.21 19.25 8.75 17.79 8.75 16C8.75 14.21 10.21 12.75 12 12.75C13.79 12.75 15.25 14.21 15.25 16C15.25 17.79 13.79 19.25 12 19.25ZM12 14.25C11.04 14.25 10.25 15.04 10.25 16C10.25 16.96 11.04 17.75 12 17.75C12.96 17.75 13.75 16.96 13.75 16C13.75 15.04 12.96 14.25 12 14.25Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M17 22.75H7C2.59 22.75 1.25 21.41 1.25 17V15C1.25 10.59 2.59 9.25 7 9.25H17C21.41 9.25 22.75 10.59 22.75 15V17C22.75 21.41 21.41 22.75 17 22.75ZM7 10.75C3.42 10.75 2.75 11.43 2.75 15V17C2.75 20.57 3.42 21.25 7 21.25H17C20.58 21.25 21.25 20.57 21.25 17V15C21.25 11.43 20.58 10.75 17 10.75H7Z"
+						fill="#292D32"
 					/>
 				</svg>
+			{/if}
+		</div>
+		<div class="state">
+			<div class="active">
+				{#if $$slots.activeIcon}
+					<slot name="activeIcon" />
+				{:else}
+					<svg
+						width="31"
+						height="31"
+						viewBox="0 0 31 31"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							fill-rule="evenodd"
+							clip-rule="evenodd"
+							d="M15.5 5.97668C16.0523 5.97668 16.5 6.4244 16.5 6.97668L16.5 24.0233C16.5 24.5756 16.0523 25.0233 15.5 25.0233C14.9477 25.0233 14.5 24.5756 14.5 24.0233L14.5 6.97668C14.5 6.4244 14.9477 5.97668 15.5 5.97668Z"
+							fill="black"
+						/>
+					</svg>
+				{/if}
+			</div>
+			<div class="not-active">
+				{#if $$slots.disabledIcon}
+					<slot name="disabledIcon" />
+				{:else}
+					<svg
+						width="31"
+						height="31"
+						viewBox="0 0 31 31"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							fill-rule="evenodd"
+							clip-rule="evenodd"
+							d="M15.5 5.58868C10.0261 5.58868 5.58868 10.0261 5.58868 15.5C5.58868 20.9739 10.0261 25.4113 15.5 25.4113C20.9739 25.4113 25.4113 20.9739 25.4113 15.5C25.4113 10.0261 20.9739 5.58868 15.5 5.58868ZM3.58868 15.5C3.58868 8.92156 8.92156 3.58868 15.5 3.58868C22.0784 3.58868 27.4113 8.92156 27.4113 15.5C27.4113 22.0784 22.0784 27.4113 15.5 27.4113C8.92156 27.4113 3.58868 22.0784 3.58868 15.5Z"
+							fill="black"
+						/>
+					</svg>
+				{/if}
 			</div>
 		</div>
 	</div>
 </label>
+
+<style>
+	.label-switch {
+		display: flex;
+		align-items: center;
+		column-gap: 7px;
+		cursor: pointer;
+	}
+
+	.label-switch.full-width {
+		justify-content: space-between;
+		width: 100%;
+	}
+	.switch {
+		position: relative;
+		border-radius: 1000px;
+		background-color: var(--bg-2);
+		transition: background-color 0.2s ease-out;
+		cursor: pointer;
+		transition-property: transform, opacity, background-color;
+		transition-duration: 0.2s;
+		transition-timing-function: ease-out;
+	}
+
+	.switch:active {
+		transform: scale(0.95);
+		opacity: 0.8;
+	}
+
+	.switch:hover:not(.disabled) {
+		background-color: var(--bg-3);
+	}
+	.switch .head {
+		border-radius: 1000px;
+		background-color: var(--white);
+		transform: translateX(2px) translateY(2px);
+		transition: transform 0.2s ease-out;
+		z-index: 2;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 5px;
+	}
+	.switch .head svg {
+		width: 100%;
+		height: 100%;
+		flex-shrink: 0;
+	}
+	.switch .head svg path {
+		fill: var(--red);
+	}
+	.switch.active {
+		background-color: var(--accent) !important;
+	}
+	.switch .state {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: space-between;
+		user-select: none;
+		pointer-events: none;
+		z-index: 1;
+	}
+	.switch .state .active {
+		width: var(--size);
+		height: var(--size);
+		padding: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--font-3);
+		transform: scale(0.6) translateX(5px);
+		opacity: 0;
+		transition-property: transform, opacity;
+		transition-duration: 0.2s;
+		transition-timing-function: ease-out;
+	}
+	.switch .state .active svg {
+		width: 100%;
+		height: 100%;
+		flex-shrink: 0;
+	}
+	.switch.active .state .active {
+		transform: scale(1);
+		opacity: 1;
+	}
+	.switch.active .state .active * {
+		color: var(--white);
+		fill: var(--white);
+	}
+	.switch .state .not-active {
+		width: var(--size);
+		height: var(--size);
+		padding: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--font-3);
+		transform: scale(0.6) translateX(-5px);
+		opacity: 0;
+		transition-property: transform, opacity;
+		transition-duration: 0.2s;
+		transition-timing-function: ease-out;
+	}
+	.switch .state .not-active svg {
+		width: 100%;
+		height: 100%;
+		flex-shrink: 0;
+	}
+	.switch:not(.active) .state .not-active {
+		transform: scale(1);
+		opacity: 1;
+	}
+	.switch:not(.active) .state .not-active * {
+		color: var(--font-1);
+		fill: var(--font-1);
+	}
+	.label-switch:has(.switch.disabled),
+	.switch.disabled {
+		opacity: 0.9;
+		cursor: not-allowed;
+	}
+</style>

package/src/components/hamzus-ui/Tabs/TabButton.svelte

@@ -0,0 +1,34 @@
+<script>
+	import Button from '@hamzus-ui/Button/Button.svelte';
+	import { onMount } from 'svelte';
+	export let activeButton = null;
+	export let link = null;
+	export let variant = 'ghost';
+	export let style = "flex-shrink:0;{link.active ? activeStyle : ''}";
+	export let label = 'exemple';
+	export let onClick = (link) => {};
+
+	let el;
+
+	onMount(() => {
+		if (link.active) {
+            activeButton = el;
+		}
+	});
+
+	function handleClick() {
+		activeButton = el;
+		onClick(link);
+	}
+</script>
+
+<div bind:this={el} class="active">
+	<Button {variant} {style} {label} onClick={handleClick} />
+</div>
+
+<style>
+	.active {
+		all: unset;
+		min-width: max-content;
+	}
+</style>

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

@@ -7,6 +7,7 @@
 	import Button from '@hamzus-ui/Button/Button.svelte';
 
 	import { page } from '$app/stores';
+	import TabButton from './TabButton.svelte';
 
 	let activeButton = null;
 
@@ -30,7 +31,7 @@
 	<div class="tabs" style="--left:{left}px;--width:{width}px;">
 		{#each links as link}
 			{#if link.label}
-				{#if link.active}
+				<!-- {#if link.active}
 					<div bind:this={activeButton} class="active">
 						<Button
 							variant="ghost"
@@ -50,7 +51,17 @@
 							handleClick(link);
 						}}
 					></Button>
-				{/if}
+				{/if} -->
+				<TabButton
+					bind:activeButton
+                    link={link}
+					variant="ghost"
+					style="flex-shrink:0;{link.active ? activeStyle : ''}"
+					label={link.label}
+					onClick={() => {
+						handleClick(link);
+					}}
+				></TabButton>
 				<span class="active-line"></span>
 			{/if}
 		{/each}

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

@@ -0,0 +1,105 @@
+<script>
+	export let name = '';
+	export let label = '';
+	export let variant = 'default';
+	export let value = '';
+	export let onChange = undefined;
+	export let minHeight = '200px';
+	export let style = '';
+	export let maxChar = null;
+
+    $: {
+		if (maxChar && value.length > maxChar) {
+			value = value.slice(0, maxChar);
+		}
+	}
+
+	function handleChange(event) {
+		value = event.target.value;
+
+		if (onChange !== undefined) {
+			onChange(value);
+		}
+	}
+</script>
+
+<label class="parent-text-area {variant}">
+	<h5 class="label">{label}</h5>
+	<textarea
+		on:input={handleChange}
+		{...$$restProps}
+		style="--min-height:{minHeight};{style}"
+		class="text-area p"
+		{name}
+		bind:value
+	></textarea>
+    {#if maxChar !== null}
+        <h5 class="max-char">{value.length}/{maxChar}</h5>
+    {/if}
+</label>
+
+<style>
+	.parent-text-area {
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		row-gap: var(--pad-s);
+        position: relative;
+	}
+
+	.text-area {
+		padding: var(--pad-m);
+		resize: vertical;
+		white-space: pre-wrap;
+		min-height: var(--min-height);
+	}
+
+    .max-char {
+        position: absolute;
+        top: 0;
+        right: var(--pad-m);
+        color: var(--accent);
+    }
+
+    .parent-text-area.collapse .max-char {
+        top: var(--pad-m);
+    }
+
+	.parent-text-area.collapse {
+		border: 2px solid var(--bg-2);
+		border-radius: var(--radius-m);
+		background-color: var(--bg-2);
+		padding: calc(var(--pad-m) * 2 + 15px) 0 0 0;
+		white-space: pre-wrap;
+		position: relative;
+	}
+	.parent-text-area.collapse > .label {
+		position: absolute;
+		top: var(--pad-m);
+		left: var(--pad-m);
+	}
+	.parent-text-area.collapse:hover {
+		background-color: var(--bg-3);
+	}
+	.parent-text-area.collapse:has(.text-area:focus) {
+		background-color: var(--bg-1);
+	}
+	.parent-text-area.collapse:has(.text-area:user-invalid) {
+		border: 2px solid var(--red);
+	}
+
+	.parent-text-area:not(.collapse) .text-area {
+		border: 2px solid var(--bg-2);
+		border-radius: var(--radius-m);
+		background-color: var(--bg-2);
+	}
+	.parent-text-area:not(.collapse) .text-area:hover {
+		background-color: var(--bg-3);
+	}
+	.parent-text-area:not(.collapse) .text-area:focus {
+		background-color: var(--bg-1);
+	}
+	.parent-text-area:not(.collapse) .text-area:user-invalid {
+		border: 2px solid var(--red);
+	}
+</style>

package/src/styles/global.css

@@ -1,3 +1,92 @@
+@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');
+
+/* variable */
+
+:root {
+    /* palet */
+    --green: #2fcc5c;
+    --green-b: #80f8a233;
+    --red: #cc3737;
+    --red-b: #e1737328;
+    --blue: #1459C1;
+    --blue-b: #1459c136;
+    --orange: #e0a21d;
+    --orange-b: #e0a21d3d;
+    --mauve: #7342FF;
+    --mauve-b: #7442ff31;
+    --yellow: #d8b816;
+    --yellow-b: #FFD60033;
+    --violet: #FA8DE2;
+    --violet-b: #fa8de22d;
+    --white: #F6F6F6;
+    --white-b: #ffffff4d;
+    --white-2: #d6dedf;
+    /* font color */
+    --font-1: #121212;
+    --font-2: #666666;
+    --font-3: #93939B;
+    /* background */
+    --bg-1: #F6F6F6;
+    --bg-2: #dddddd;
+    --bg-3: #bebebe;
+    --bg-blur: #b3b3b334;
+    /* stroke color */
+    --stroke: #C3CDD2;
+    /* default accent */
+    --accent: var(--blue);
+    --accent-b: var(--blue-b);
+    /* box-shadow */
+    --box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
+    /* Valeur par défaut du curseur */
+    --default-cursor: initial;
+    /* radius */
+    --radius-xs: 3px;
+    --radius-s: 5px;
+    --radius-m: 8px;
+    --radius-l: 10px;
+    --radius-xl: 12px;
+    --radius-xxl: 16px;
+    /* padding */
+    --pad-xs: 3px;
+    --pad-s: 5px;
+    --pad-m: 7px;
+    --pad-l: 9px;
+    --pad-xl: 12px;
+    --pad-xxl: 16px;
+    /* gradient */
+    --ripple-gradient:radial-gradient(#ffffff31, #ffffff9a);
+
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* font color */
+        --font-1: #ECEBFF;
+        --font-2: #899098;
+        --font-3: #454545;
+        /* background */
+        --bg-1: #161616;
+        --bg-2: #1F1F1F;
+        --bg-3: #292929;
+        --bg-blur: #03030334;
+        /* stroke color */
+        --stroke: #2A2C32;
+        /* box-shadow */
+        --box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px;
+        /* gradient */
+        --ripple-gradient:radial-gradient(#ffffff31, #ffffff9a);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        color-scheme: dark;
+        background-color: var(--bg-1);
+    }
+}
+
+/* desable global style */
+
 * {
   box-sizing: border-box;
   padding: 0;
@@ -35,3 +124,74 @@ input, textarea {
 .force-cursor * {
   cursor: var(--default-cursor) !important;
 }
+
+/* font */
+
+:root {
+    /* text size */
+    --text-1: 70px;
+    --text-2: 24px;
+    --text-3: 20px;
+    --text-4: 16px;
+    --text-5: 14px;
+    --text-6: 12px;
+    --text-p: 16px;
+}
+
+.h1, h1 {
+    font-size: var(--text-1);
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: bold;
+    color: var(--font-1);
+}
+
+.h2, h2 {
+    font-size: var(--text-2);
+    line-height: 2rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: bold;
+    color: var(--font-1);
+}
+
+.h3, h3 {
+    font-size: var(--text-3);
+    line-height: 1.75rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: bold;
+    color: var(--font-1);
+}
+
+.h4, h4 {
+    font-size: var(--text-4);
+    line-height: 1.5rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: 500;
+    color: var(--font-2);
+}
+
+.h5, h5 {
+    font-size: var(--text-5);
+    line-height: 1.25rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: 400;
+    color: var(--font-2);
+}
+
+.h6, h6 {
+    font-size: var(--text-6);
+    line-height: 1rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: 300;
+    color: var(--font-1);
+}
+
+.p, p {
+    font-size: var(--text-p);
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: 300;
+    color: var(--font-2);
+}
+
+.mono {
+    font-family:"Geist Mono", 'Inter', sans-serif;
+}

package/src/components/hamzus-ui/Checkboxes/Checkbox/index.css

@@ -1,68 +0,0 @@
-.checkbox-label{
-    display: flex;
-    align-items: center;
-    column-gap: 7px;
-    cursor: pointer;
-    user-select: none;
-}
-    .checkbox-label.full-width{
-        width: 100%;
-        flex-direction: row-reverse;
-        justify-content: start;
-    }
-.checkbox-box{
-    width: 22px;
-    height: 22px;
-    display: flex;
-    flex-shrink: 0;
-    border-radius: var(--radius-m);
-    border: 2px solid var(--stroke);
-    position: relative;
-    cursor: pointer;
-    transition: background-color .2s ease-out;
-}
-.checkbox-box:hover{
-    background-color: var(--bg-2);
-}
-.checkbox-box svg {
-    position: absolute;
-    width: 70%;
-    height: auto;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%) scale(.6);
-    user-select: none;
-    pointer-events: none;
-    transition-property: transform;
-    transition-duration: .2s;
-    transition-timing-function: ease-out;
-}
-    .checkbox-box svg polyline{fill: none;
-        stroke: #FFF;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-dasharray: 50px;
-        stroke-dashoffset: 50px;
-        transition: stroke-dashoffset .2s ease-out;
-    }
-
-.checkbox-box:has(input:checked){
-    background-color: var(--accent);
-    border: 2px solid var(--accent);
-}
-    .checkbox-box:has(input:checked) svg{
-        user-select: initial;
-        pointer-events: initial;
-        transform: translate(-50%, -50%) scale(1);
-    }
-        .checkbox-box:has(input:checked) svg polyline{
-            stroke-dashoffset: 0; 
-        }
-.checkbox-label.disabled {
-    opacity: .9;
-    cursor: not-allowed;
-}
-    .checkbox-label.disabled .checkbox-box {
-        cursor: not-allowed;
-    } 

package/src/components/hamzus-ui/Swicth/index.css

@@ -1,120 +0,0 @@
-.label-switch{
-    display: flex;
-    align-items: center;
-    column-gap: 7px;
-    cursor: pointer;
-}
-.switch{
-    position: relative;
-    border-radius: var(--radius-xxl);
-    background-color: var(--bg-2);
-    transition: background-color .2s ease-out;
-    cursor: pointer;
-    transition-property:transform, opacity, background-color ;
-    transition-duration: .2s;
-    transition-timing-function: ease-out;
-}
-
-.switch:active{
-    transform: scale(.95);
-    opacity: .8;
-}
-
-.switch:hover:not(.disabled){
-    background-color: var(--bg-3);
-}
-    .switch .head{
-        border-radius: var(--radius-xl);
-        background-color: var(--white);
-        transform: translateX(2px) translateY(2px);
-        transition: transform .2s ease-out;
-        z-index: 2;
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 5px;
-
-    }
-        .switch .head svg{
-            width: 100%;
-            height: 100%;
-            flex-shrink: 0;
-        }
-            .switch .head svg path{
-                fill: var(--red);
-            }
-    .switch.active{
-        background-color: var(--accent) !important;
-    }
-    .switch .state{
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: space-between;
-        user-select: none;
-        pointer-events: none;
-        z-index: 1;
-    }
-        .switch .state .active{
-            width: var(--size);
-            height: var(--size);
-            padding: 4px;
-            display:flex;
-            align-items:center;
-            justify-content:center;
-            color: var(--font-3);
-            transform: scale(.6) translateX(5px);
-            opacity: 0;
-            transition-property:transform, opacity ;
-            transition-duration: .2s;
-            transition-timing-function: ease-out;
-        }
-            .switch .state .active svg {
-                width: 100%;
-                height: 100%;
-                flex-shrink: 0;
-            }
-        .switch.active .state .active{
-            transform: scale(1);
-            opacity: 1;
-        }
-            .switch.active .state .active *{
-                color: var(--white);
-                fill: var(--white);
-            }
-        .switch .state .not-active{
-            width: var(--size);
-            height: var(--size);
-            padding: 4px;
-            display:flex;
-            align-items:center;
-            justify-content:center;
-            color: var(--font-3);
-            transform: scale(.6)  translateX(-5px);
-            opacity: 0;
-            transition-property:transform, opacity ;
-            transition-duration: .2s;
-            transition-timing-function: ease-out;
-            
-        }
-            .switch .state .not-active svg {
-                width: 100%;
-                height: 100%;
-                flex-shrink: 0;
-            }
-        .switch:not(.active) .state .not-active{
-            transform: scale(1);
-            opacity: 1;
-        }
-            .switch:not(.active) .state .not-active *{
-                color: var(--font-1);
-                fill: var(--font-1);
-            }
-.label-switch:has(.switch.disabled), .switch.disabled{
-    opacity: .9;
-    cursor: not-allowed;
-}

package/src/styles/font.css

@@ -1,71 +0,0 @@
-/* font */
-@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');
-/* font */
-:root {
-    /* text size */
-    --text-1: 70px;
-    --text-2: 24px;
-    --text-3: 20px;
-    --text-4: 16px;
-    --text-5: 14px;
-    --text-6: 12px;
-    --text-p: 16px;
-}
-
-.h1, h1 {
-    font-size: var(--text-1);
-    font-family: 'Geist', 'Inter', sans-serif;
-    font-weight: bold;
-    color: var(--font-1);
-}
-
-.h2, h2 {
-    font-size: var(--text-2);
-    line-height: 2rem;
-    font-family: 'Geist', 'Inter', sans-serif;
-    font-weight: bold;
-    color: var(--font-1);
-}
-
-.h3, h3 {
-    font-size: var(--text-3);
-    line-height: 1.75rem;
-    font-family: 'Geist', 'Inter', sans-serif;
-    font-weight: bold;
-    color: var(--font-1);
-}
-
-.h4, h4 {
-    font-size: var(--text-4);
-    line-height: 1.5rem;
-    font-family: 'Geist', 'Inter', sans-serif;
-    font-weight: 500;
-    color: var(--font-2);
-}
-
-.h5, h5 {
-    font-size: var(--text-5);
-    line-height: 1.25rem;
-    font-family: 'Geist', 'Inter', sans-serif;
-    font-weight: 400;
-    color: var(--font-2);
-}
-
-.h6, h6 {
-    font-size: var(--text-6);
-    line-height: 1rem;
-    font-family: 'Geist', 'Inter', sans-serif;
-    font-weight: 300;
-    color: var(--font-1);
-}
-
-.p, p {
-    font-size: var(--text-p);
-    font-family: 'Geist', 'Inter', sans-serif;
-    font-weight: 300;
-    color: var(--font-2);
-}
-
-.mono {
-    font-family:"Geist Mono", 'Inter', sans-serif;
-}

package/src/styles/variables.css

@@ -1,82 +0,0 @@
-:root {
-    /* palet */
-    --green: #2fcc5c;
-    --green-b: #80f8a233;
-    --red: #cc3737;
-    --red-b: #e1737328;
-    --blue: #1459C1;
-    --blue-b: #1459c136;
-    --orange: #e0a21d;
-    --orange-b: #e0a21d3d;
-    --mauve: #7342FF;
-    --mauve-b: #7442ff31;
-    --yellow: #d8b816;
-    --yellow-b: #FFD60033;
-    --violet: #FA8DE2;
-    --violet-b: #fa8de22d;
-    --white: #F6F6F6;
-    --white-b: #ffffff4d;
-    --white-2: #d6dedf;
-    /* font color */
-    --font-1: #121212;
-    --font-2: #666666;
-    --font-3: #93939B;
-    /* background */
-    --bg-1: #F6F6F6;
-    --bg-2: #dddddd;
-    --bg-3: #bebebe;
-    --bg-blur: #b3b3b334;
-    /* stroke color */
-    --stroke: #C3CDD2;
-    /* default accent */
-    --accent: var(--blue);
-    --accent-b: var(--blue-b);
-    /* box-shadow */
-    --box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
-    /* Valeur par défaut du curseur */
-    --default-cursor: initial;
-    /* radius */
-    --radius-xs: 3px;
-    --radius-s: 5px;
-    --radius-m: 8px;
-    --radius-l: 10px;
-    --radius-xl: 12px;
-    --radius-xxl: 16px;
-    /* padding */
-    --pad-xs: 3px;
-    --pad-s: 5px;
-    --pad-m: 7px;
-    --pad-l: 9px;
-    --pad-xl: 12px;
-    --pad-xxl: 16px;
-    /* gradient */
-    --ripple-gradient:radial-gradient(#ffffff31, #ffffff9a);
-
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        /* font color */
-        --font-1: #ECEBFF;
-        --font-2: #899098;
-        --font-3: #454545;
-        /* background */
-        --bg-1: #161616;
-        --bg-2: #1F1F1F;
-        --bg-3: #292929;
-        --bg-blur: #03030334;
-        /* stroke color */
-        --stroke: #2A2C32;
-        /* box-shadow */
-        --box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px;
-        /* gradient */
-        --ripple-gradient:radial-gradient(#ffffff31, #ffffff9a);
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    html {
-        color-scheme: dark;
-        background-color: var(--bg-1);
-    }
-}