hamzus-ui 0.0.94 → 0.0.96

package/index.d.ts

@@ -2,6 +2,7 @@
 
 // button
 export { default as Button } from "./src/components/hamzus-ui/Button/Button.svelte"
+export { default as ButtonGroup } from "./src/components/hamzus-ui/ButtonGroup/ButtonGroup.svelte"
 export { default as IconButton } from "./src/components/hamzus-ui/IconButton/IconButton.svelte"
 // text
 export { default as Chips } from "./src/components/hamzus-ui/Chips/Chips.svelte"

package/index.js

@@ -1,5 +1,6 @@
 // button
 export { default as Button } from "./src/components/hamzus-ui/Button/Button.svelte"
+export { default as ButtonGroup } from "./src/components/hamzus-ui/ButtonGroup/ButtonGroup.svelte"
 export { default as IconButton } from "./src/components/hamzus-ui/IconButton/IconButton.svelte"
 // text
 export { default as Chips } from "./src/components/hamzus-ui/Chips/Chips.svelte"

package/package.json

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

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

@@ -58,6 +58,7 @@
 </script>
 
 <div
+    class="parent-button-hamzus"
 	style="
         --button-default-bg:var({colorConfig[variant].defaultBg});
         --button-default-border:var({colorConfig[variant].defaultBorder});

package/src/components/hamzus-ui/Button/Button_default.svelte

@@ -76,6 +76,7 @@
 		text-overflow: ellipsis;
 		overflow: hidden;
 		position: relative;
+        flex-shrink: 0;
 	}
 	.button > :global(*) {
 		color: var(--button-default-color);

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

@@ -0,0 +1,41 @@
+
+
+<div class="button-group">
+    <slot></slot>
+</div>
+
+<style>
+    .button-group {
+        display: flex;
+        height: fit-content;
+    }
+    .button-group :global(.button) {
+        border-radius: 0px !important;
+    }
+    /* tout les element sauf le premier doivent avoir une ligne a gauche */
+    .button-group :global(> .parent-button-hamzus:not(.parent-button-hamzus:first-child) > .button) {
+        border-left: 0px solid var(--button-hover-border) !important;
+    }
+
+    .button-group :global(> .parent-button-hamzus:first-child > .button) {
+        border-top-left-radius: var(--radius-m)  !important;
+        border-bottom-left-radius: var(--radius-m)  !important;
+    }
+    .button-group :global(> .parent-button-hamzus:last-child > .button) {
+        border-top-right-radius: var(--radius-m)  !important;
+        border-bottom-right-radius: var(--radius-m)  !important;
+    }
+    /* tout les element sauf le premier doivent avoir une ligne a gauche */
+    .button-group :global(> .parent-popover-hamzus:not(.parent-popover-hamzus:first-child) .button) {
+        border-left: 0px solid var(--button-hover-border) !important;
+    }
+
+    .button-group :global(> .parent-popover-hamzus:first-child .button) {
+        border-top-left-radius: var(--radius-m)  !important;
+        border-bottom-left-radius: var(--radius-m)  !important;
+    }
+    .button-group :global(> .parent-popover-hamzus:last-child .button) {
+        border-top-right-radius: var(--radius-m)  !important;
+        border-bottom-right-radius: var(--radius-m)  !important;
+    }
+</style>

package/src/components/hamzus-ui/DropdownMenu/Content.svelte

@@ -18,6 +18,8 @@
         border-radius: var(--radius-l);
         border: 1px solid var(--bg-3);
         width: min(100vw, var(--width));
+        max-width: var(--hamzus-max-content-width);
+        overflow-x: auto;
         max-height: 100vh;
     }
 </style>

package/src/components/hamzus-ui/DropdownMenu/Root.svelte

@@ -1,6 +1,6 @@
 <script>
 	import Portal from '../Portal/Portal.svelte';
-import { onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 
 	// import
 
@@ -8,8 +8,12 @@ import { onDestroy, onMount } from 'svelte';
 	export let triggerFullWidth = false;
 	export let direction = 'bottom';
 	export let onOpen = undefined;
-    export let avoidOpening = false
-    export let style = ""
+	export let avoidOpening = false;
+	export let avoidClosing = false;
+	export let forceOpen = false;
+	export let forceClose = false;
+	export let style = '';
+	export let parentTag = null;
 	// locale var
 	let display = false;
 	let exit = false;
@@ -19,40 +23,70 @@ import { onDestroy, onMount } from 'svelte';
 	let content;
 	let contentContainer;
 
+	let interval = null;
+
+	let maxContentHeight = null;
+	let maxContentWidth = null;
+	let triggerHeight = 0;
+	let triggerWidth = 0;
 	let top = 0;
 	let left = 0;
 
 	const padding = 7;
 
+    $: if (forceOpen === true) {
+        open()
+
+
+        forceOpen = false
+    } 
+    $: if (forceClose === true) {
+        close()
+
+
+        forceClose = false
+    } 
+    
 	const entryPosition = {
 		bottom: ['-12px', '0px'],
+		[`bottom-right`]: ['-12px', '-12px'],
+		[`bottom-left`]: ['-12px', '12px'],
 		top: ['12px', '0px'],
+		[`top-right`]: ['12px', '12px'],
+		[`top-left`]: ['12px', '-12px'],
 		left: ['0px', '12px'],
-		right: ['0px', '-12px']
+		[`left-top`]: ['-12px', '12px'],
+		[`left-bottom`]: ['12px', '12px'],
+		right: ['0px', '-12px'],
+		[`right-top`]: ['-12px', '-12px'],
+		[`right-bottom`]: ['12px', '-12px']
 	};
 	// function
-	function handleDisplay(e) {
-        if (avoidOpening) {
-            return
-        }
-		if (!calc[direction]) {
+	function handleDisplay(e, force) {
+		if (!force && avoidOpening) {
+			return;
+		}
+		if (!entryPosition[direction]) {
 			console.error('Error : direction props not found !');
-            return
+			return;
 		}
 
 		if (!display) {
-			[top, left] = calc[direction]();
+			calculate();
 		}
 
 		toggleDisplay();
 
-        if (onOpen !== undefined && typeof onOpen === 'function') {
-            onOpen(e)
-        }
+		if (onOpen !== undefined && typeof onOpen === 'function') {
+			onOpen(e);
+		}
 	}
 
 	export let toggleDisplay = () => {
 		if (display) {
+			clearInterval(interval);
+			interval = null;
+
 			// appliquer une animation
 			exit = true;
 			setTimeout(() => {
@@ -62,167 +96,221 @@ import { onDestroy, onMount } from 'svelte';
 			disableExitEvent();
 			enableScroll();
 		} else {
+            
+			interval = setInterval(() => {
+				calculate();
+			}, 100);
+
 			enableExitEvent();
 			disableScroll();
 		}
-
+        
 		display = !display;
-	}
+	};
 
-    export let open = ()=>{
-        if (display) {
-            return
-        }
+	let open = () => {
+		if (display) {
+			return;
+		}
+        calculate();
 
-        toggleDisplay()
-    }
-    export let close = ()=>{
-        if (!display) {
-            return
-        }
+		toggleDisplay();
+	};
+	let close = () => {
+		if (!display) {
+			return;
+		}
 
-        toggleDisplay()
-    }
-
-	const calc = {
-		bottom: () => {
-			// recuperer la taille du content
-			const contentWidth = content.offsetWidth;
-			const contentHeight = content.offsetHeight;
-			// recuperer la taille du trigger
-			const triggerWidth = trigger.offsetWidth;
-			const triggerHeight = trigger.offsetHeight;
-			// recuperer la position du trigger par rapport a la fenetre
-			const triggerRect = trigger.getBoundingClientRect();
-			const triggerTop = triggerRect.top;
-			const triggerLeft = triggerRect.left;
-			const triggerBottom = window.innerHeight - triggerTop - triggerHeight;
-			const triggerRight = window.innerWidth - triggerLeft - triggerWidth;
-
-			// return values
-			let topCalc = triggerTop + triggerHeight + padding;
-			let leftCalc = triggerLeft - (contentWidth - triggerWidth) / 2;
-
-			// verifier si il y a assez de la place en bas
-			if (triggerBottom < contentHeight) {
-				topCalc = window.innerHeight - contentHeight - padding;
-			}
-			// verifier si il y a assez de place a droite
-			if (triggerRight < (contentWidth - triggerWidth) / 2) {
-				leftCalc = window.innerWidth - contentWidth - padding;
-			}
-			// verifier si il y a assez de place a gauche
+		toggleDisplay();
+	};
 
-			if (triggerLeft < (contentWidth - triggerWidth) / 2) {
-				leftCalc = padding;
+	function calculate() {
+        
+		// recuperer les données
+		maxContentHeight = null;
+		maxContentWidth = null;
+
+		// recuperer le contenue du trigger
+		const triggerContent = getFirstChild(trigger);
+
+		// recuperer la position du trigger par rapport a la fenetre
+		const triggerRect = triggerContent.getBoundingClientRect();
+
+		// recuperer la taille du trigger
+		triggerWidth = triggerContent.offsetWidth;
+		triggerHeight = triggerContent.offsetHeight;
+
+		// recuperer l'espace autour du trigger
+		const triggerTop = triggerRect.top;
+		const triggerLeft = triggerRect.left;
+		const triggerBottom = window.innerHeight - triggerTop - triggerHeight;
+		const triggerRight = window.innerWidth - triggerLeft - triggerWidth;
+
+		const calc = {
+			bottom: () => {
+				// limiter la height par la height disponible en dessous du trigger
+				maxContentHeight = triggerBottom - padding;
+
+				// recuperer le contenue du dropdown
+				const contentContent = getFirstChild(content);
+
+				// recuperer la taille du content
+				const contentWidth = contentContent.offsetWidth;
+				const contentHeight = contentContent.scrollHeight;
+
+				// return values
+				let topCalc = triggerTop + triggerHeight + padding;
+				let leftCalc = triggerLeft - (contentWidth - triggerWidth) / 2; // centrer
+
+				// si il y a pas assez de place en bas on verifie si ya plus de place en haut, si ya plus de place en haut on display en haut
+				if (triggerBottom < contentHeight) {
+					// y a pas assez de place si il y a plus de place en haut on display en haut
+					if (triggerBottom < triggerTop) {
+						calc['top']();
+						return;
+					}
+					// ya plus de place ne bas du coup on display en bas et on contraint la hauteur du content
+				}
+
+				top = topCalc;
+				left = leftCalc;
+			},
+			top: () => {
+				// contraindre la hauteur maximum disponible pour afficher le dropdown
+				maxContentHeight = triggerTop - padding;
+
+				// recuperer le contenue du dropdown
+				const contentContent = getFirstChild(content);
+
+				// recuperer la taille du content
+				const contentWidth = contentContent.offsetWidth;
+				const contentHeight = contentContent.offsetHeight;
+
+				// return values
+				let topCalc = triggerTop - contentHeight - padding;
+				let leftCalc = triggerLeft - (contentWidth - triggerWidth) / 2; // centrer
+
+				// verifier si il y a assez de la place en haut
+				if (triggerTop < contentHeight) {
+					// si y a plus de place en bas que en haut on display en bas
+					if (triggerTop < triggerBottom) {
+						calc['bottom']();
+						return;
+					}
+
+					// on contraint la max height du dropdown
+				}
+
+				top = topCalc;
+				left = leftCalc;
+			},
+			left: () => {
+				// limiter la height par la height disponible en dessous du trigger
+				maxContentHeight = triggerBottom - padding;
+				maxContentWidth = triggerLeft - padding;
+
+				// recuperer le contenue du dropdown
+				const contentContent = getFirstChild(content);
+
+				// recuperer la taille du content
+				const contentWidth = contentContent.offsetWidth;
+				const contentHeight = contentContent.scrollHeight;
+
+				// return values
+				let topCalc = triggerTop - (contentHeight - triggerHeight) / 2; // centrer;
+				let leftCalc = triggerLeft - contentWidth - padding;
+
+				// verifier si il y a assez de place a gauche
+				if (triggerLeft < contentWidth + padding) {
+					// si y a plus de place a droite que gauche on display a droite
+					if (triggerLeft < triggerRight) {
+						calc['right']();
+						return;
+					}
+
+					// la width est contraint pour l'affichage
+				}
+
+				top = topCalc;
+				left = leftCalc;
+			},
+			right: () => {
+				// limiter la height par la height disponible en dessous du trigger
+				maxContentHeight = triggerBottom - padding;
+				maxContentWidth = triggerRight - padding;
+
+				// recuperer le contenue du dropdown
+				const contentContent = getFirstChild(content);
+
+				// recuperer la taille du content
+				const contentWidth = contentContent.offsetWidth;
+				const contentHeight = contentContent.scrollHeight;
+
+				// return values
+				let topCalc = triggerTop - (contentHeight - triggerHeight) / 2; // centrer;
+				let leftCalc = triggerLeft + triggerWidth + padding;
+
+				// verifier si il y a assez de place a droite
+				if (triggerRight < contentWidth + padding) {
+					// si y a pas assez de place a droite on verifie si y a plus de place a gauche on display a gauche
+					if (triggerRight < triggerLeft) {
+						calc['left']();
+						return;
+					}
+
+					// la width est contraint pour l'affichage
+				}
+
+				top = topCalc;
+				left = leftCalc;
 			}
+		};
 
-			return [topCalc, leftCalc];
-		},
-		top: () => {
-			// recuperer la taille du content
-			const contentWidth = content.offsetWidth;
-			const contentHeight = content.offsetHeight;
-			// recuperer la taille du trigger
-			const triggerWidth = trigger.offsetWidth;
-			const triggerHeight = trigger.offsetHeight;
-			// recuperer la position du trigger par rapport a la fenetre
-			const triggerRect = trigger.getBoundingClientRect();
-			const triggerTop = triggerRect.top;
-			const triggerBottom = window.innerHeight - triggerTop - triggerHeight;
-			const triggerLeft = triggerRect.left;
-			const triggerRight = window.innerWidth - triggerLeft - triggerWidth;
-
-			// return values
-			let topCalc = triggerTop - contentHeight - padding;
-			let leftCalc = triggerLeft - (contentWidth - triggerWidth) / 2;
-
-			// verifier si il y a assez de la place en haut
-			if (triggerTop < contentHeight) {
-				topCalc = padding;
-			}
-			// verifier si il y a assez de la place en bas
-			if (triggerBottom + triggerHeight < contentHeight) {
-				topCalc = padding;
-			}
-			// verifier si il y a assez de place a gauche
-			if (triggerLeft < (contentWidth - triggerWidth) / 2) {
-				leftCalc = padding;
-			}
-			// verifier si il y a assez de place a droite
-			if (triggerRight < (contentWidth - triggerWidth) / 2) {
-				leftCalc = window.innerWidth - contentWidth - padding;
+		const subCalc = {
+			bottom: () => {
+
+
+                // aligner le contenue au bas du trigger
+				top = triggerTop;
+			},
+			top: () => {
+				// recuperer le contenue du dropdown
+				const contentContent = getFirstChild(content);
+
+				// recuperer la taille du content
+				const contentWidth = contentContent.offsetWidth;
+				const contentHeight = contentContent.offsetHeight;
+
+                // aligner le contenue au bas du trigger
+				top = triggerTop - (contentHeight - triggerHeight);
+			},
+			left: () => {
+				// recuperer le contenue du dropdown
+				const contentContent = getFirstChild(content);
+
+				// recuperer la taille du content
+				const contentWidth = contentContent.offsetWidth;
+				const contentHeight = contentContent.offsetHeight;
+
+				// aligner le contenue a la droite du trigger
+				left = triggerLeft - (contentWidth - triggerWidth);
+			},
+			right: () => {
+				left = triggerLeft;
 			}
+		};
 
-			return [topCalc, leftCalc];
-		},
-		left: () => {
-			// recuperer la taille du content
-			const contentWidth = content.offsetWidth;
-			const contentHeight = content.offsetHeight;
-			// recuperer la taille du trigger
-			const triggerWidth = trigger.offsetWidth;
-			const triggerHeight = trigger.offsetHeight;
-			// recuperer la position du trigger par rapport a la fenetre
-			const triggerRect = trigger.getBoundingClientRect();
-			const triggerTop = triggerRect.top;
-			const triggerBottom = window.innerHeight - triggerTop - triggerHeight;
-			const triggerLeft = triggerRect.left;
-			const triggerRight = window.innerWidth - triggerLeft - triggerWidth;
-
-			// return values
-			let topCalc = triggerTop;
-			let leftCalc = triggerLeft - contentWidth - padding;
-
-			// verifier si il y a assez de la place en haut
-			if (triggerTop < 0) {
-				topCalc = padding;
-			}
-			// verifier si il y a assez de la place en bas
-			if (triggerBottom < (contentHeight - triggerHeight)) {
-				topCalc = window.innerHeight - contentHeight - padding;
-			}
-			// verifier si il y a assez de place a gauche
-			if (triggerLeft < contentWidth + padding) {
-				leftCalc = padding;
-			}
+		const directionData = direction.split('-');
 
-			return [topCalc, leftCalc];
-		},
-		right: () => {
-			// recuperer la taille du content
-			const contentWidth = content.offsetWidth;
-			const contentHeight = content.offsetHeight;
-			// recuperer la taille du trigger
-			const triggerWidth = trigger.offsetWidth;
-			const triggerHeight = trigger.offsetHeight;
-			// recuperer la position du trigger par rapport a la fenetre
-			const triggerRect = trigger.getBoundingClientRect();
-			const triggerTop = triggerRect.top;
-			const triggerBottom = window.innerHeight - triggerTop - triggerHeight;
-			const triggerLeft = triggerRect.left;
-			const triggerRight = window.innerWidth - triggerLeft - triggerWidth;
-
-			// return values
-			let topCalc = triggerTop;
-			let leftCalc = triggerLeft + triggerWidth + padding;
-
-			// verifier si il y a assez de la place en haut
-			if (triggerTop < 0) {
-				topCalc = padding;
-			}
-			// verifier si il y a assez de la place en bas
-			if (triggerBottom < (contentHeight - triggerHeight)) {
-				topCalc = window.innerHeight - contentHeight - padding;
-			}
-			// verifier si il y a assez de place a droite
-			if (triggerRight < contentWidth + padding) {
-				leftCalc = window.innerWidth - contentWidth - padding - triggerWidth;
-			}
+		const axe = directionData[0];
+		const subDirection = directionData[1];
 
-			return [topCalc, leftCalc];
-		}
-	};
+		calc[axe]();
+
+        if (subDirection) {
+            subCalc[subDirection]()
+        }
+	}
 
 	// Bloquer le scroll
 	function disableScroll() {
@@ -237,13 +325,14 @@ import { onDestroy, onMount } from 'svelte';
 	}
 	function updatePos(e) {
 		// recalculer la position
-        if (!display) {
-            return
-        }
-		[top, left] = calc[direction]();
+		if (!display) {
+			return;
+		}
+		calculate();
 	}
 
 	function enableExitEvent() {
+
 		document.addEventListener('click', checkClick);
 	}
 	function disableExitEvent() {
@@ -252,17 +341,64 @@ import { onDestroy, onMount } from 'svelte';
 
 	function checkClick(event) {
         
-		if (event.target.closest('.parent-popover-hamzus') && event.target.closest('.parent-popover-hamzus') === originalParent) {
-			return 
-		}
-        if (event.target.closest('.content-popover-hamzus')) {
+        // si avoidClosing est true on skip
+        if (avoidClosing) {
             return
         }
+        
+		// si il click sur le trigger alors on skip
+		if (
+			event.target.closest('.parent-popover-hamzus') &&
+			event.target.closest('.parent-popover-hamzus') === originalParent
+		) {
+			const triggerContent = getFirstChild(event.target.closest('.parent-popover-hamzus'));
+
+			// si le curseur a cliquer dans le triggerContent on skip
+			// si le curseur a cliquer dans le triggerContent on skip
+			if (triggerContent && triggerContent.contains(event.target)) {
+				return; // on skip
+			}
+		}
+
+		// si il clique sur un contenue on skip
+        
+		if (event.target.closest('.content-popover-hamzus')) {
 
-        handleDisplay();
+			return;
+		}
+
+		handleDisplay(null, true);
+	}
+
+	function getFirstChild(node) {
+		if (!node) return null;
+
+		for (const child of node.children) {
+			const display = getComputedStyle(child).display;
+
+			if (display !== 'contents') {
+				return child; // trouvé !
+			} else {
+				// le child est "contents", on cherche dans ses enfants
+				const realChild = getFirstChild(child);
+				if (realChild) return realChild;
+			}
+		}
+
+		return null; // aucun enfant réel trouvé
 	}
 
 	onMount(() => {
+		// recuperer le contenue du trigger
+		const triggerContent = getFirstChild(trigger);
+		// recuperer la position du trigger par rapport a la fenetre
+		const triggerRect = triggerContent.getBoundingClientRect();
+
+		// recuperer la taille du trigger
+		triggerWidth = triggerContent.offsetWidth;
+		triggerHeight = triggerContent.offsetHeight;
+
+        
 		return () => {
 			document.removeEventListener('userScroll', updatePos);
 			window.removeEventListener('scroll', updatePos);
@@ -271,32 +407,44 @@ import { onDestroy, onMount } from 'svelte';
 	});
 </script>
 
-<dropdown bind:this={originalParent} style="{triggerFullWidth ? "width:100%;" : ""} {style}" class="parent-popover-hamzus">
-	<div bind:this={trigger} class="trigger" style="{triggerFullWidth ? "width:100%;" : ""}" on:click={handleDisplay}>
+<dropdown
+	bind:this={originalParent}
+	style="{triggerFullWidth ? 'width:100%;' : ''} {style}"
+	class="parent-popover-hamzus"
+>
+	<div bind:this={trigger} class="trigger" on:click={handleDisplay}>
 		<slot name="trigger" />
 	</div>
 	<Portal disabled={!display} target="body">
-        <content-container bind:this={contentContainer} class="content-container {!display ? "hidden" : ""}">
-            <content
-                bind:this={content}
-                class="content content-popover-hamzus"
-                class:display
-                class:exit
-                style="--left:{left}px;--top:{top}px;--transform-x:{entryPosition[
-                    direction
-                ][1]};--transform-y:{entryPosition[direction][0]};"
-            >
-                <slot name="content" />
-            </content>
-        </content-container>
-    </Portal>
+		<content-container
+			bind:this={contentContainer}
+			class="content-container {!display ? 'hidden' : ''}"
+			style="
+                --hamzus-tigger-width:{triggerWidth}px;
+                {maxContentHeight ? `--hamzus-max-content-height:${maxContentHeight}px;` : ''}
+                {maxContentWidth ? `--hamzus-max-content-width:${maxContentWidth}px;` : ''}
+
+
+            "
+		>
+			<content
+				bind:this={content}
+				class="content content-popover-hamzus {parentTag}"
+				class:display
+				class:exit
+				style="--left:{left}px;--top:{top}px;--transform-x:{entryPosition[
+					direction
+				][1]};--transform-y:{entryPosition[direction][0]};"
+			>
+				<slot name="content" />
+			</content>
+		</content-container>
+	</Portal>
 </dropdown>
 
 <style>
 	.trigger {
-		all: unset;
-        width: max-content;
-        display: inline-block;
+		display: contents;
 	}
 
 	.content {

package/src/components/hamzus-ui/DropdownMenu/Separator.svelte

@@ -1,12 +1,21 @@
 
-<span class="separator"></span>
+<div class="separator-container">
+    <span class="separator"></span>
+</div>
 
 <style>
-    .separator{
+    .separator-container {
         width: 100%;
         height: 1px;
+        position: relative;
+    }
+    .separator{
+        width: calc(100% + 2 * var(--pad-m));
+        height: 1px;
+        top: 0;
+        left: calc(0 - var(--pad-m));
         background-color: var(--stroke);
-        width: calc(100% + var(--pad-m) * 2);
         transform: translateX(calc(-1 * var(--pad-m))) ;
+        position: absolute;
     }
 </style>

package/src/components/hamzus-ui/DropdownMenu copy/Button.svelte

@@ -0,0 +1,46 @@
+<script>
+    export let onClick = undefined
+    export let label = ""
+    function handleClick() {
+        if (onClick && typeof onClick === 'function') {
+            onClick()
+        }
+    }
+</script>
+
+<button class="button" on:click={handleClick} {...$$restProps}>
+    {#if label}
+        <h4>{label}</h4>
+    {:else}
+        <slot/>
+    {/if}
+</button>
+
+<style>
+    .button{
+        width: 100%;
+        display: flex;
+        align-items: center;
+        column-gap: var(--pad-m);
+        padding: var(--pad-s) var(--pad-m);
+        border-radius: var(--radius-m);
+        color: var(--font-2);
+        cursor: pointer;
+        transition: transform .2s ease-out;
+    }
+    .button:active {
+        transform: scale(.98);
+    }
+    .button :global(> *) {
+        color: var(--font-2);
+        fill: var(--font-2);
+    }
+    .button:hover{
+        background-color: var(--bg-3);
+        color: var(--font-1);
+    }
+    .button:hover :global(> *) {
+        color: var(--font-1);
+        fill: var(--font-2);
+    }
+</style>

package/src/components/hamzus-ui/DropdownMenu copy/Content.svelte

@@ -0,0 +1,23 @@
+<script>
+
+    export let width = "max-content"
+    export let style;
+</script>
+
+<div class="content" style="--width:{width};{style}" {...$$restProps}>
+    <slot/>
+</div>
+
+<style>
+    .content{
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--pad-m);
+        padding: var(--pad-m) var(--pad-l);
+        background-color: var(--bg-1);
+        border-radius: var(--radius-l);
+        border: 1px solid var(--bg-3);
+        width: min(100vw, var(--width));
+        max-height: 100vh;
+    }
+</style>

package/src/components/hamzus-ui/DropdownMenu copy/Label.svelte

@@ -0,0 +1 @@
+<h5><slot/></h5>

package/src/components/hamzus-ui/DropdownMenu copy/Root.svelte

@@ -0,0 +1,361 @@
+<script>
+	import Portal from '../Portal/Portal.svelte';
+import { onDestroy, onMount } from 'svelte';
+
+	// import
+
+	// props
+	export let triggerFullWidth = false;
+	export let direction = 'bottom';
+	export let onOpen = undefined;
+    export let avoidOpening = false
+    export let style = ""
+	// locale var
+	let display = false;
+	let exit = false;
+
+	let originalParent;
+	let trigger;
+	let content;
+	let contentContainer;
+
+	let top = 0;
+	let left = 0;
+
+	const padding = 7;
+
+	const entryPosition = {
+		bottom: ['-12px', '0px'],
+		top: ['12px', '0px'],
+		left: ['0px', '12px'],
+		right: ['0px', '-12px']
+	};
+	// function
+	function handleDisplay(e) {
+        if (avoidOpening) {
+            return
+        }
+		if (!calc[direction]) {
+			console.error('Error : direction props not found !');
+            return
+		}
+
+		if (!display) {
+			[top, left] = calc[direction]();
+		}
+
+		toggleDisplay();
+
+        if (onOpen !== undefined && typeof onOpen === 'function') {
+            onOpen(e)
+        }
+	}
+
+	export let toggleDisplay = () => {
+		if (display) {
+			// appliquer une animation
+			exit = true;
+			setTimeout(() => {
+				exit = false;
+			}, 200);
+
+			disableExitEvent();
+			enableScroll();
+		} else {
+			enableExitEvent();
+			disableScroll();
+		}
+
+		display = !display;
+	}
+
+    export let open = ()=>{
+        if (display) {
+            return
+        }
+
+        toggleDisplay()
+    }
+    export let close = ()=>{
+        if (!display) {
+            return
+        }
+
+        toggleDisplay()
+    }
+
+	const calc = {
+		bottom: () => {
+			// recuperer la taille du content
+			const contentWidth = content.offsetWidth;
+			const contentHeight = content.offsetHeight;
+			// recuperer la taille du trigger
+			const triggerWidth = trigger.offsetWidth;
+			const triggerHeight = trigger.offsetHeight;
+			// recuperer la position du trigger par rapport a la fenetre
+			const triggerRect = trigger.getBoundingClientRect();
+			const triggerTop = triggerRect.top;
+			const triggerLeft = triggerRect.left;
+			const triggerBottom = window.innerHeight - triggerTop - triggerHeight;
+			const triggerRight = window.innerWidth - triggerLeft - triggerWidth;
+
+			// return values
+			let topCalc = triggerTop + triggerHeight + padding;
+			let leftCalc = triggerLeft - (contentWidth - triggerWidth) / 2;
+
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom < contentHeight) {
+				topCalc = window.innerHeight - contentHeight - padding;
+			}
+			// verifier si il y a assez de place a droite
+			if (triggerRight < (contentWidth - triggerWidth) / 2) {
+				leftCalc = window.innerWidth - contentWidth - padding;
+			}
+			// verifier si il y a assez de place a gauche
+
+			if (triggerLeft < (contentWidth - triggerWidth) / 2) {
+				leftCalc = padding;
+			}
+
+			return [topCalc, leftCalc];
+		},
+		top: () => {
+			// recuperer la taille du content
+			const contentWidth = content.offsetWidth;
+			const contentHeight = content.offsetHeight;
+			// recuperer la taille du trigger
+			const triggerWidth = trigger.offsetWidth;
+			const triggerHeight = trigger.offsetHeight;
+			// recuperer la position du trigger par rapport a la fenetre
+			const triggerRect = trigger.getBoundingClientRect();
+			const triggerTop = triggerRect.top;
+			const triggerBottom = window.innerHeight - triggerTop - triggerHeight;
+			const triggerLeft = triggerRect.left;
+			const triggerRight = window.innerWidth - triggerLeft - triggerWidth;
+
+			// return values
+			let topCalc = triggerTop - contentHeight - padding;
+			let leftCalc = triggerLeft - (contentWidth - triggerWidth) / 2;
+
+			// verifier si il y a assez de la place en haut
+			if (triggerTop < contentHeight) {
+				topCalc = padding;
+			}
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom + triggerHeight < contentHeight) {
+				topCalc = padding;
+			}
+			// verifier si il y a assez de place a gauche
+			if (triggerLeft < (contentWidth - triggerWidth) / 2) {
+				leftCalc = padding;
+			}
+			// verifier si il y a assez de place a droite
+			if (triggerRight < (contentWidth - triggerWidth) / 2) {
+				leftCalc = window.innerWidth - contentWidth - padding;
+			}
+
+			return [topCalc, leftCalc];
+		},
+		left: () => {
+			// recuperer la taille du content
+			const contentWidth = content.offsetWidth;
+			const contentHeight = content.offsetHeight;
+			// recuperer la taille du trigger
+			const triggerWidth = trigger.offsetWidth;
+			const triggerHeight = trigger.offsetHeight;
+			// recuperer la position du trigger par rapport a la fenetre
+			const triggerRect = trigger.getBoundingClientRect();
+			const triggerTop = triggerRect.top;
+			const triggerBottom = window.innerHeight - triggerTop - triggerHeight;
+			const triggerLeft = triggerRect.left;
+			const triggerRight = window.innerWidth - triggerLeft - triggerWidth;
+
+			// return values
+			let topCalc = triggerTop;
+			let leftCalc = triggerLeft - contentWidth - padding;
+
+			// verifier si il y a assez de la place en haut
+			if (triggerTop < 0) {
+				topCalc = padding;
+			}
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom < (contentHeight - triggerHeight)) {
+				topCalc = window.innerHeight - contentHeight - padding;
+			}
+			// verifier si il y a assez de place a gauche
+			if (triggerLeft < contentWidth + padding) {
+				leftCalc = padding;
+			}
+
+			return [topCalc, leftCalc];
+		},
+		right: () => {
+			// recuperer la taille du content
+			const contentWidth = content.offsetWidth;
+			const contentHeight = content.offsetHeight;
+			// recuperer la taille du trigger
+			const triggerWidth = trigger.offsetWidth;
+			const triggerHeight = trigger.offsetHeight;
+			// recuperer la position du trigger par rapport a la fenetre
+			const triggerRect = trigger.getBoundingClientRect();
+			const triggerTop = triggerRect.top;
+			const triggerBottom = window.innerHeight - triggerTop - triggerHeight;
+			const triggerLeft = triggerRect.left;
+			const triggerRight = window.innerWidth - triggerLeft - triggerWidth;
+
+			// return values
+			let topCalc = triggerTop;
+			let leftCalc = triggerLeft + triggerWidth + padding;
+
+			// verifier si il y a assez de la place en haut
+			if (triggerTop < 0) {
+				topCalc = padding;
+			}
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom < (contentHeight - triggerHeight)) {
+				topCalc = window.innerHeight - contentHeight - padding;
+			}
+			// verifier si il y a assez de place a droite
+			if (triggerRight < contentWidth + padding) {
+				leftCalc = window.innerWidth - contentWidth - padding - triggerWidth;
+			}
+
+			return [topCalc, leftCalc];
+		}
+	};
+
+	// Bloquer le scroll
+	function disableScroll() {
+		document.addEventListener('userScroll', updatePos);
+		window.addEventListener('scroll', updatePos);
+	}
+
+	// Réactiver le scroll
+	function enableScroll() {
+		document.removeEventListener('userScroll', updatePos);
+		window.removeEventListener('scroll', updatePos);
+	}
+	function updatePos(e) {
+		// recalculer la position
+        if (!display) {
+            return
+        }
+		[top, left] = calc[direction]();
+	}
+
+	function enableExitEvent() {
+		document.addEventListener('click', checkClick);
+	}
+	function disableExitEvent() {
+		document.removeEventListener('click', checkClick);
+	}
+
+	function checkClick(event) {
+        
+		if (event.target.closest('.parent-popover-hamzus') && event.target.closest('.parent-popover-hamzus') === originalParent) {
+			return 
+		}
+        if (event.target.closest('.content-popover-hamzus')) {
+            return
+        }
+
+        handleDisplay();
+	}
+
+	onMount(() => {
+		return () => {
+			document.removeEventListener('userScroll', updatePos);
+			window.removeEventListener('scroll', updatePos);
+			document.removeEventListener('click', checkClick);
+		};
+	});
+</script>
+
+<dropdown bind:this={originalParent} style="{triggerFullWidth ? "width:100%;" : ""} {style}" class="parent-popover-hamzus">
+	<div bind:this={trigger} class="trigger" style="{triggerFullWidth ? "width:100%;" : ""}" okn:click={handleDisplay}>
+		<slot name="trigger" />
+	</div>
+	<Portal disabled={!display} target="body">
+        <content-container bind:this={contentContainer} class="content-container {!display ? "hidden" : ""}">
+            <content
+                bind:this={content}
+                class="content content-popover-hamzus"
+                class:display
+                class:exit
+                style="--left:{left}px;--top:{top}px;--transform-x:{entryPosition[
+                    direction
+                ][1]};--transform-y:{entryPosition[direction][0]};"
+            >
+                <slot name="content" />
+            </content>
+        </content-container>
+    </Portal>
+</dropdown>
+
+<style>
+	.trigger {
+		all: unset;
+        width: max-content;
+        display: inline-block;
+	}
+
+	.content {
+		position: fixed;
+		top: var(--top);
+		left: var(--left);
+		display: block;
+		user-select: none;
+		pointer-events: none;
+		opacity: 0;
+		z-index: 20;
+	}
+
+	.content.exit {
+		display: block;
+		animation-name: exit;
+		animation-duration: 0.2s;
+		animation-timing-function: ease-out;
+	}
+	.content.display {
+		display: block;
+		animation-name: entry;
+		animation-duration: 0.2s;
+		animation-timing-function: ease-out;
+		user-select: initial;
+		pointer-events: initial;
+		opacity: 1;
+	}
+
+	@keyframes entry {
+		from {
+			display: block;
+			opacity: 0;
+			user-select: none;
+			pointer-events: none;
+			transform: translate(var(--transform-x), var(--transform-y)) scale(0.86);
+		}
+		to {
+			display: block;
+			opacity: 1;
+			user-select: initial;
+			pointer-events: initial;
+			transform: translate(0px, 0px) scale(1);
+		}
+	}
+	@keyframes exit {
+		from {
+			display: block;
+			opacity: 1;
+			user-select: initial;
+			pointer-events: initial;
+			transform: translate(0px, 0px) scale(1);
+		}
+		to {
+			display: block;
+			opacity: 0;
+			user-select: none;
+			pointer-events: none;
+			transform: translate(var(--transform-x), var(--transform-y)) scale(0.86);
+		}
+	}
+</style>

package/src/components/hamzus-ui/DropdownMenu copy/Separator.svelte

@@ -0,0 +1,12 @@
+
+<span class="separator"></span>
+
+<style>
+    .separator{
+        width: 100%;
+        height: 1px;
+        background-color: var(--stroke);
+        width: calc(100% + var(--pad-m) * 2);
+        transform: translateX(calc(-1 * var(--pad-m))) ;
+    }
+</style>

package/src/components/hamzus-ui/DropdownMenu copy/Trigger.svelte

@@ -0,0 +1 @@
+<slot/>

package/src/components/hamzus-ui/DropdownMenu copy/index.js

@@ -0,0 +1,6 @@
+export { default as Root } from './Root.svelte';
+export { default as Trigger } from './Trigger.svelte';
+export { default as Content } from './Content.svelte';
+export { default as Label } from './Label.svelte';
+export { default as Separator } from './Separator.svelte';
+export { default as Button } from './Button.svelte';

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

@@ -60,6 +60,7 @@
 </script>
 
 <div
+    class="parent-button-hamzus"
 	style="
         --button-default-bg:var({colorConfig[variant].defaultBg});
         --button-default-border:var({colorConfig[variant].defaultBorder});

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

@@ -6,11 +6,12 @@
 
 <style>
 	.skeleton {
+        display: flex;
 		background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
 		background-size: 200% 100%;
 		animation: skeleton-loading 1.5s infinite;
 		border-radius: 4px; /* Pour arrondir les coins */
-        flex-shrink: 0;
+        /* flex-shrink: 0; */
 	}
 
 	/* Animation */