hamzus-ui 0.0.1

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

@@ -0,0 +1,374 @@
+<script>
+	import Portal from '@hamzus-ui/Portal/Portal.svelte';
+import { onDestroy, onMount } from 'svelte';
+
+	// import
+
+	// props
+	export let direction = 'bottom';
+	export let triggerFullWidth = false;
+	export let onOpen = undefined;
+	// 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;
+
+    let paddingTop = direction === 'bottom' ? padding : 0;
+    let paddingBttom = direction === 'top' ? padding : 0;
+    let paddingLeft = direction === 'right' ? padding : 0;
+    let paddingRight = direction === 'left' ? padding : 0;
+
+	const entryPosition = {
+		bottom: ['-12px', '0px'],
+		top: ['12px', '0px'],
+		left: ['0px', '12px'],
+		right: ['0px', '-12px']
+	};
+	// function
+	function handleDisplay(event) {
+		if (!calc[direction]) {
+			console.error('Error : direction props not found !');
+		}
+
+        if (display && event.target.closest('.trigger')) {
+            return
+        }
+
+		if (!display) {
+			[top, left] = calc[direction]();
+		}
+
+		toggleDisplay();
+
+        if (onOpen !== undefined && typeof onOpen === 'function') {
+            onOpen()
+        }
+	}
+
+	function toggleDisplay() {
+		if (display) {
+			// appliquer une animation
+			exit = true;
+			setTimeout(() => {
+				exit = false;
+			}, 200);
+
+			disableExitEvent();
+			enableScroll();
+		} else {
+			enableExitEvent();
+			disableScroll();
+		}
+
+		display = !display;
+	}
+
+
+	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 ;
+			let leftCalc = triggerLeft - (contentWidth - triggerWidth) / 2;
+
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom < contentHeight) {
+				topCalc = window.innerHeight - contentHeight ;
+			}
+			// verifier si il y a assez de place a droite
+			if (triggerRight < (contentWidth - triggerWidth) / 2) {
+				leftCalc = window.innerWidth - contentWidth ;
+			}
+			// verifier si il y a assez de place a gauche
+
+			if (triggerLeft < (contentWidth - triggerWidth) / 2) {
+				leftCalc = 0;
+			}
+
+			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;
+			let leftCalc = triggerLeft - (contentWidth - triggerWidth) / 2;
+
+			// verifier si il y a assez de la place en haut
+			if (triggerTop < contentHeight) {
+				topCalc = 0;
+			}
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom + triggerHeight < contentHeight) {
+				topCalc = 0;
+			}
+			// verifier si il y a assez de place a gauche
+			if (triggerLeft < (contentWidth - triggerWidth) / 2) {
+				leftCalc = 0;
+			}
+
+			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 - (contentHeight - triggerHeight) / 2;
+			let leftCalc = triggerLeft - contentWidth;
+
+			// verifier si il y a assez de la place en haut
+			if (triggerTop < (contentHeight - triggerHeight) / 2) {
+				topCalc = 0;
+			}
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom < (contentHeight - triggerHeight) / 2) {
+				topCalc = window.innerHeight - contentHeight ;
+			}
+			// verifier si il y a assez de place a gauche
+			if (triggerLeft < contentWidth) {
+				leftCalc = 0;
+			}
+
+			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 - (contentHeight - triggerHeight) / 2;
+			let leftCalc = triggerLeft + triggerWidth ;
+
+			// verifier si il y a assez de la place en haut
+			if (triggerTop < (contentHeight - triggerHeight) / 2) {
+				topCalc = 0;
+			}
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom < (contentHeight - triggerHeight) / 2) {
+				topCalc = window.innerHeight - contentHeight ;
+			}
+			// verifier si il y a assez de place a droite
+			if (triggerRight < contentWidth ) {
+				leftCalc = window.innerWidth - contentWidth - triggerWidth;
+			}
+
+			return [topCalc, leftCalc];
+		}
+	};
+
+	// Bloquer le scroll
+	function disableScroll() {
+		window.addEventListener('scroll', preventDefault, { passive: false });
+		window.addEventListener('wheel', preventDefault, { passive: false });
+		window.addEventListener('touchmove', preventDefault, { passive: false });
+		window.addEventListener('keydown', preventScrollKeys);
+	}
+
+	// Réactiver le scroll
+	function enableScroll() {
+		window.removeEventListener('scroll', preventDefault);
+		window.removeEventListener('wheel', preventDefault);
+		window.removeEventListener('touchmove', preventDefault);
+		window.removeEventListener('keydown', preventScrollKeys);
+	}
+	function preventDefault(e) {
+		e.preventDefault();
+	}
+
+	function preventScrollKeys(e) {
+		// Désactiver uniquement les touches qui provoquent un défilement
+		const keys = ['ArrowUp', 'ArrowDown', 'Space', 'PageUp', 'PageDown'];
+		if (keys.includes(e.key)) {
+			e.preventDefault();
+		}
+	}
+
+	function enableExitEvent() {
+		document.addEventListener('mousemove', checkCursor);
+	}
+	function disableExitEvent() {
+		document.removeEventListener('mousemove', checkCursor);
+	}
+
+	function checkCursor(event) {
+		if ((!event.target.closest('.trigger') || event.target.closest('.trigger') !== trigger ) && (!event.target.closest('.content') || event.target.closest('.content') !== content)) {
+			handleDisplay(event);
+		}
+	}
+
+	onMount(() => {
+		return () => {
+			window.removeEventListener('scroll', preventDefault);
+			window.removeEventListener('wheel', preventDefault);
+			window.removeEventListener('touchmove', preventDefault);
+			window.removeEventListener('keydown', preventScrollKeys);
+		    document.removeEventListener('mousemove', checkCursor);
+		};
+	});
+</script>
+
+
+<dropdown bind:this={originalParent}>
+	<div bind:this={trigger} class="trigger" style="{triggerFullWidth ? "width:100%;" : ""}" on:mouseenter={handleDisplay} on:mouseleave={handleDisplay}>
+		<slot name="trigger" />
+	</div>
+	<Portal disabled={!display} target="body">
+        <content-container bind:this={contentContainer}>
+            <content
+                bind:this={content}
+                class="content"
+                class:display
+                class:exit
+                style="
+                --padding-top:{paddingTop}px;
+                --padding-bottom:{paddingBttom}px;
+                --padding-left:{paddingLeft}px;
+                --padding-right:{paddingRight}px;
+                --left:{left}px;
+                --top:{top}px;
+                --transform-x:{entryPosition[direction][1]};
+                --transform-y:{entryPosition[direction][0]};"
+            >
+                <slot name="content" />
+            </content>
+            <div class="dropdown-bg-exit"></div>
+        </content-container>
+    </Portal>
+</dropdown>
+
+<style>
+	.trigger {
+		all: unset;
+        z-index: 2;
+        position: relative;
+        display: inline-block;
+	}
+
+	.content {
+		position: fixed;
+		top: var(--top);
+		left: var(--left);
+		display: block;
+		user-select: none;
+		pointer-events: none;
+		opacity: 0;
+		z-index: 2;
+        padding:var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
+	}
+
+	.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;
+	}
+	.dropdown-bg-exit {
+		display: none;
+	}
+	.content.display ~ .dropdown-bg-exit {
+		content: '';
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 1;
+		display: block;
+	}
+
+	@keyframes entry {
+		from {
+			display: block;
+			opacity: 0;
+			user-select: none;
+			pointer-events: none;
+			transform: translate(var(--transform-x), var(--transform-y)) scale(0.9);
+		}
+		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.9);
+		}
+	}
+</style>

package/src/components/hamzus-ui/Popover/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/Popover/Trigger.svelte

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

package/src/components/hamzus-ui/Popover/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/Portal/Portal.svelte

@@ -0,0 +1,46 @@
+<script>
+	import { mount, unmount } from 'svelte';
+	import Wormhole from './Wormhole.svelte';
+
+	let { children, target, disabled = false } = $props();
+
+	$effect(() => {
+		let app;
+		let element;
+
+		if (disabled) {
+			return;
+		}
+
+		if (!target) {
+			console.warn(`[svelte-portal] Invalid Portal target: ${target}`);
+			return;
+		}
+
+		if (typeof target === 'string') {
+			element = document.querySelector(target);
+		} else {
+			element = target;
+		}
+
+		if (element) {
+
+			app = mount(Wormhole, {
+				target: element,
+				props: {
+					children
+				}
+			});
+		}
+
+		return () => {
+			if (app) {
+				unmount(app);
+			}
+		};
+	});
+</script>
+
+{#if disabled}
+	{@render children()}
+{/if}

package/src/components/hamzus-ui/Portal/Wormhole.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	const { children }: { children: Snippet } = $props();
+</script>
+
+{@render children?.()}

package/src/components/hamzus-ui/Radios/Radio/Radio.svelte

@@ -0,0 +1,43 @@
+<script>
+    export let name;
+    export let value;
+    export let group = false;
+    export let label;
+    export let size = "20px";
+    export let disabled = false;
+    export let checked = false;
+    export let activeColor = 'var(--accent)';
+    export let onClick = () => {}; 
+  
+    import "./index.css";
+  
+    function handleClick() {
+      if (disabled) {
+        return;
+      }
+      if (!onClick) {
+        group = true;
+      }
+      onClick();
+    }
+  </script>
+  
+  <label
+    class="label-radio {disabled ? 'disabled' : ''}"
+    style="--active-color:{activeColor};"
+    on:click={handleClick}
+  >
+    <input
+      class="radio"
+      type="radio"
+      {name}
+      {value}
+      bind:group
+      style="width:{size}; height:{size};"
+      disabled={disabled}
+    />
+    {#if label}
+      <h4>{label}</h4>
+    {/if}
+  </label>
+  

package/src/components/hamzus-ui/Radios/Radio/index.css

@@ -0,0 +1,68 @@
+
+.label-radio{
+    display: flex;
+    align-items: center;
+    column-gap: 7px;
+    cursor: pointer;
+    transition: transform .2s ease-out;
+}
+.label-radio:hover:not(.disabled) > h4{
+    color: var(--font-u);
+    transition: color .2s ease-out;
+}
+
+
+.label-radio:active{
+    transform: scale(.9);
+}
+
+.label-radio input[type="radio"].radio{
+    width: 16px;
+    height: 16px;
+    display: flex;
+    flex-shrink: 0;
+    border-radius: 24px;
+    border: 2px solid var(--stroke);
+    position: relative;
+    transition-property: border background-color ;
+    transition-duration: .2s;
+    transition-timing-function: ease-out;
+}
+.label-radio:not(.disabled) input[type="radio"].radio{
+    cursor: pointer;
+}
+
+.label-radio:not(.disabled) input[type="radio"].radio:hover{
+    background-color: var(--bg-2);
+}
+.label-radio input[type="radio"].radio::after{
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(.8);
+    width: 60%;
+    height: 60%;
+    border-radius: 50%;
+    background-color: var(--active-color);
+    opacity:0;
+    transition-property: transform opacity ;
+    transition-duration: .2s;
+    transition-timing-function: ease-out;
+}
+.label-radio input[type="radio"].radio:checked{
+    border: 2px solid var(--active-color);
+}
+.label-radio input[type="radio"].radio:checked::after{
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+}
+
+
+.label-radio.disabled{
+    opacity: .8;
+    cursor: not-allowed ;
+}
+.label-radio.disabled input[type="radio"].radio{
+    cursor: not-allowed !important;
+}

package/src/components/hamzus-ui/Radios/RadioCard/RadioCard.svelte

@@ -0,0 +1,32 @@
+<script>
+	export let title;
+	export let text;
+	export let icon;
+	export let name;
+	export let style = null;
+	export let value;
+	export let onClick = ()=>{};
+	export let checked = false;
+	export let size = '20px';
+	export let disabled = false;
+	export let activeColor = 'var(--accent)';
+
+	import './index.css';
+
+	import Radio from '../Radio/Radio.svelte';
+</script>
+
+<label {style} class="radio-card {disabled ? "disabled" : ""}">
+	<div class="radio-left-content">
+		{#if icon}
+            <svelte:component this={icon} />
+		{/if}
+		<div class="text">
+			<h3>{title}</h3>
+			{#if text}
+				<p>{text}</p>
+			{/if}
+		</div>
+	</div>
+	<Radio {activeColor} {size} {disabled} group={checked} {name} {value} />
+</label>

package/src/components/hamzus-ui/Radios/RadioCard/index.css

@@ -0,0 +1,50 @@
+
+.radio-card{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--pad-xl);
+    border-radius: var(--radius-l);
+    background-color: var(--bg-2);
+    border: 2px solid var(--bg-2);
+    column-gap: 24px;
+    transition: transform .2s ease-out;
+    cursor: pointer;
+}
+.radio-card:not(.disabled):active{
+    transform: scale(.95);
+}
+.radio-card:hover{
+    background-color: var(--bg-3);
+}
+
+    .radio-card .radio-left-content{
+        display: flex;
+        column-gap: var(--pad-m);
+    }
+        .radio-card .radio-left-content .text{
+            row-gap: -10px;
+            display: flex;
+            flex-direction: column;
+        }
+    .radio-card .radio-left-content svg{
+        width: 30px;
+        height: 30px;
+        flex-shrink: 0;
+    }
+        .radio-card .radio-left-content svg path{
+            fill: var(--font-d);
+        }
+
+.radio-card:has(input:checked){
+    border: 2px solid var(--accent);
+}
+    .radio-card:has(input:checked) .radio-left-content svg path{
+        fill: var(--accent);
+    }
+
+/* disabled */
+.radio-card.disabled{
+    opacity: .5;
+    cursor: not-allowed;
+}

package/src/components/hamzus-ui/Radios/RadioGroup/RadioGroup.svelte

@@ -0,0 +1,46 @@
+<script>
+	export let name = 'name';
+	export let options = [];
+	export let variant = 'default';
+	export let selectedValue = null; // Valeur sélectionnée
+	export let onChange = undefined;
+	import './index.css';
+
+	import Radio from '../Radio/Radio.svelte';
+	import RadioCard from '../RadioCard/RadioCard.svelte';
+
+	// Fonction pour mettre à jour la sélection
+	function handleSelect(value) {
+		selectedValue = value;
+
+        if (onChange !== undefined && typeof onChange === 'function') {
+            onChange()
+        }
+	}
+</script>
+
+<div class="radio-group radio-group-{variant}">
+	{#each options as option}
+		{#if variant == 'default'}
+			<Radio
+				{name}
+				value={option.value}
+				group={option.value === selectedValue}
+				on:select={() => handleSelect(option.value)}
+				label={option.label}
+                disabled={option.disabled}
+			/>
+		{:else}
+			<RadioCard
+                icon={option.icon}
+				{name}
+				value={option.value}
+				checked={option.value === selectedValue}
+				on:select={() => handleSelect(option.value)}
+				title={option.title}
+				text={option.text}
+                disabled={option.disabled}
+			/>
+		{/if}
+	{/each}
+</div>

package/src/components/hamzus-ui/Radios/RadioGroup/index.css

@@ -0,0 +1,8 @@
+
+
+.radio-group{
+    display: flex;
+    flex-direction: column;
+    row-gap: 7px;
+}
+