hamzus-ui 0.0.1

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

@@ -0,0 +1,141 @@
+<script>
+    // import
+	import Loader from '@hamzus-ui/LoaderCircle/Loader.svelte';
+    // props
+    export let loading = false
+    export let desabled = false
+    export let href = ""
+    export let onClick = undefined
+	export let avoidRipple = false;
+    // local var
+    let button
+    // functions
+    function handleClick(event) {
+        if (!desabled && !loading) {
+            createRipple(event)
+            if (onClick && typeof onClick === "function") {       
+                onClick()
+            }
+        }
+    }
+    function createRipple(event) {
+		if (avoidRipple) {
+			return;
+		}
+
+		const ripple = document.createElement('span');
+
+		const rect = button.getBoundingClientRect();
+		const x = event.clientX - rect.left;
+		const y = event.clientY - rect.top;
+
+		ripple.style.left = `${x}px`;
+		ripple.style.top = `${y}px`;
+		ripple.classList.add('ripple');
+
+		button.appendChild(ripple);
+
+		setTimeout(() => {
+			ripple.remove();
+		}, 1000);
+	}
+</script>
+
+<a on:click={handleClick} bind:this={button} class="button h4" class:desabled class:loading {href} {...$$restProps}>
+    <slot/>
+    {#if loading}
+        <div class="loader">
+            <Loader size="16px" color="var(--button-default-color)"></Loader>
+        </div>
+    {/if}
+</a>
+<style>
+    .button{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding:var(--pad-s);
+        border-radius: var(--radius-m);
+        background-color: var(--button-default-bg);
+        color: var(--button-default-color);
+        transition-property: background-color, transform, color;
+        transition-duration: .2s;
+        transition-timing-function: ease-out;
+        cursor: pointer;
+        border: 1px solid var(--button-default-border);
+        width: max-content;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 30px;
+        height: 30px;
+        flex-shrink: 0;
+        position: relative;
+    }
+    .button :global(*) {
+        color: var(--button-default-color);
+    }
+        .button :global(svg){
+            height: 100%;
+            width: 100%;
+            flex-shrink: 0;
+        } 
+        .button :global(svg > path)  {
+            fill: var(--button-default-color);
+        }
+    /* states */
+    .button:not(.desabled):not(.loading):hover{
+        background-color: var(--button-hover-bg);
+        border: 1px solid var(--button-hover-border);
+        color: var(--button-hover-color);
+    }
+    .button:not(.desabled):not(.loading):hover :global(*) {
+        color: var(--button-hover-color);
+    }
+        .button:not(.desabled):not(.loading):hover :global(svg > path)  {
+            fill: var(--button-hover-color);
+        }
+    .button:active{
+        transform: scale(.95);
+    }
+    .button.loading {
+        cursor: not-allowed;
+    }
+    .button.desabled {
+        opacity: .8;
+        cursor: not-allowed;
+        transform: scale(.9);
+
+    }
+    .button.loading :global(> *:not(.loader)){
+        opacity: 0;
+        user-select: none;
+        pointer-events: none;
+    }
+    .loader{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    	/* ripple */
+	.button :global(.ripple) {
+		width: 0px;
+		aspect-ratio: 1/1;
+		background: var(--ripple-gradient);
+		position: absolute;
+		transform: translate(-50%, -50%);
+		border-radius: 100%;
+		animation: grow 1s ease-out;
+	}
+	@keyframes grow {
+		from {
+			width: 0px;
+			opacity: 1;
+		}
+		to {
+			width: 500%;
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,32 @@
+
+<div class="info-card">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25ZM12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25Z" fill="#292D32"/>
+        <path d="M12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25Z" fill="#292D32"/>
+        <path d="M12 7.00012C12.13 7.00012 12.26 7.03012 12.38 7.08012C12.5 7.13012 12.61 7.20012 12.71 7.29012C12.8 7.39012 12.87 7.49012 12.92 7.62012C12.97 7.74012 13 7.87012 13 8.00012C13 8.13012 12.97 8.26012 12.92 8.38012C12.87 8.50012 12.8 8.61012 12.71 8.71012C12.61 8.80012 12.5 8.87012 12.38 8.92012C12.14 9.02012 11.86 9.02012 11.62 8.92012C11.5 8.87012 11.39 8.80012 11.29 8.71012C11.2 8.61012 11.13 8.50012 11.08 8.38012C11.03 8.26012 11 8.13012 11 8.00012C11 7.87012 11.03 7.74012 11.08 7.62012C11.13 7.49012 11.2 7.39012 11.29 7.29012C11.39 7.20012 11.5 7.13012 11.62 7.08012C11.74 7.03012 11.87 7.00012 12 7.00012Z" fill="#292D32"/>
+        </svg>
+        
+    <p class="info"><slot/></p>      
+</div>
+
+
+<style>
+    .info-card{
+        display: flex;
+        column-gap: var(--pad-m);
+        padding: var(--pad-m);
+        padding-bottom: var(--pad-l);
+        background-color: var(--bg-2);
+        border-radius: var(--radius-m);
+    }
+    .info{
+        margin-top: 1.5px;
+        text-align: left;
+    }
+    .info-card > svg{
+        flex-shrink: 0;
+    }
+    .info-card > svg > path {
+        fill: var(--font-d);
+    }
+</style>

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

@@ -0,0 +1,304 @@
+<script>
+    // import
+
+	import IconButton from '@hamzus-ui/IconButton/IconButton.svelte';
+	import Loader from '@hamzus-ui/LoaderCircle/Loader.svelte';
+    // props
+	export let variant = 'default';
+	export let className = '';
+	export let iconSize = '24px';
+	export let label = '';
+	export let labelType = 'h5';
+	export let onChange = () => {};
+	export let name = '';
+	export let value = '';
+	export let initialValue = value;
+	export let hasChanged = false;
+	export let disabled = false;
+	export let required = false;
+	export let type = '';
+	export let style = '';
+	export let placeholder = '';
+	export let errorMessage = '';
+	export let isLoading = false;
+	export let isVisible = false;
+	export let padding = '3px 10px';
+	export let borderRadius = '12px';
+	export let defaultBg = '--bg-2';
+	export let formatPattern = [];
+	import { onMount } from 'svelte';
+
+    // local var
+
+	$: value = formatInput(value);
+
+	// fnctions
+	function formatInput(inputValue) {
+		if (formatPattern.length == 0) {
+			return inputValue;
+		}
+
+        inputValue = inputValue.replace(/\s+/g, '')
+
+		let formattedValue = '';
+		let currentIndex = 0;
+
+		for (let i = 0; i < formatPattern.length; i++) {
+			let segmentLength = formatPattern[i];
+			formattedValue += inputValue.slice(currentIndex, currentIndex + segmentLength);
+
+			currentIndex += segmentLength;
+			if (currentIndex >= inputValue.length) break;
+
+			// Ajouter un espace si ce n'est pas la dernière section
+			if (i < formatPattern.length - 1 || currentIndex < inputValue.length) {
+				formattedValue += ' ';
+			}
+		}
+
+		// Ajouter les caractères restants sans espacement
+		if (currentIndex < inputValue.length) {
+			formattedValue += inputValue.slice(currentIndex);
+		}
+
+		return formattedValue;
+	}
+
+	onMount(() => {
+		value = formatInput(value);
+        if (formatPattern.length !== 0) {
+            initialValue = value
+        }
+	});
+
+
+	function handleDisplay() {
+		isVisible = !isVisible;
+	}
+
+	function handleChange(event) {
+		value = formatInput(event.target.value);
+		hasChanged = value != initialValue;
+
+		if (onChange) {
+			onChange(value);
+		}
+	}
+</script>
+
+<div
+	class="input-container {variant == 'default' ? variant : ''} {className}"
+	{style}
+	{...$$restProps}
+>
+	<label
+		class="input {errorMessage ? ' error' : ''}"
+		style="{variant == 'collapse' ? `padding:${padding};` : ''}--radius:{borderRadius};--default-bg:var({defaultBg});"
+	>
+		<div class="top-line">
+			{#if label}
+				<h5 class={labelType}>
+					{label}
+					{#if required}
+						<span class="required">*</span>
+					{/if}
+				</h5>
+			{/if}
+			{#if isLoading}
+				<Loader isLoading className="input-loader" color="--accent" size="16px" />
+			{/if}
+		</div>
+		<div
+			class="input-line"
+			style="{variant == 'default' ? `padding:${padding};` : ''}--icon-size:{iconSize};"
+		>
+			<slot name="startContent" />
+			<input
+				on:input={handleChange}
+				class="h4"
+				{placeholder}
+				type={isVisible && type == 'password' ? 'text' : type}
+				{name}
+				{value}
+				{required}
+                disabled={isLoading ? true : disabled}
+
+			/>
+			{#if type == 'password'}
+				<IconButton variant="ghost" onClick={handleDisplay}>
+					{#if isVisible}
+						<svg
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								opacity="0.4"
+								d="M21.2496 9.15004C20.7596 8.37004 20.1996 7.67004 19.6196 7.04004L15.8496 10.81C15.9696 11.18 16.0396 11.58 16.0396 12C16.0396 14.24 14.2296 16.04 11.9996 16.04C11.5796 16.04 11.1796 15.97 10.8096 15.85L7.34961 19.31C8.80961 20.13 10.3896 20.56 11.9996 20.56C13.7796 20.56 15.5096 20.04 17.0896 19.07C18.6696 18.09 20.0896 16.66 21.2496 14.84C22.2496 13.28 22.2496 10.72 21.2496 9.15004Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M14.0206 9.97989L9.98062 14.0199C9.47062 13.4999 9.14062 12.7799 9.14062 11.9999C9.14062 10.4299 10.4206 9.13989 12.0006 9.13989C12.7806 9.13989 13.5006 9.46989 14.0206 9.97989Z"
+								fill="#292D32"
+							/>
+							<path
+								opacity="0.4"
+								d="M18.25 5.74993L14.86 9.13993C14.13 8.39993 13.12 7.95993 12 7.95993C9.76 7.95993 7.96 9.76993 7.96 11.9999C7.96 13.1199 8.41 14.1299 9.14 14.8599L5.76 18.2499H5.75C4.64 17.3499 3.62 16.1999 2.75 14.8399C1.75 13.2699 1.75 10.7199 2.75 9.14993C3.91 7.32993 5.33 5.89993 6.91 4.91993C8.49 3.95993 10.22 3.42993 12 3.42993C14.23 3.42993 16.39 4.24993 18.25 5.74993Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M14.8601 12.0001C14.8601 13.5701 13.5801 14.8601 12.0001 14.8601C11.9401 14.8601 11.8901 14.8601 11.8301 14.8401L14.8401 11.8301C14.8601 11.8901 14.8601 11.9401 14.8601 12.0001Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M21.7709 2.22988C21.4709 1.92988 20.9809 1.92988 20.6809 2.22988L2.23086 20.6899C1.93086 20.9899 1.93086 21.4799 2.23086 21.7799C2.38086 21.9199 2.57086 21.9999 2.77086 21.9999C2.97086 21.9999 3.16086 21.9199 3.31086 21.7699L21.7709 3.30988C22.0809 3.00988 22.0809 2.52988 21.7709 2.22988Z"
+								fill="#292D32"
+							/>
+						</svg>
+					{:else}
+						<svg
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								opacity="0.4"
+								d="M21.25 9.14993C18.94 5.51993 15.56 3.42993 12 3.42993C10.22 3.42993 8.49 3.94993 6.91 4.91993C5.33 5.89993 3.91 7.32993 2.75 9.14993C1.75 10.7199 1.75 13.2699 2.75 14.8399C5.06 18.4799 8.44 20.5599 12 20.5599C13.78 20.5599 15.51 20.0399 17.09 19.0699C18.67 18.0899 20.09 16.6599 21.25 14.8399C22.25 13.2799 22.25 10.7199 21.25 9.14993ZM12 16.0399C9.76 16.0399 7.96 14.2299 7.96 11.9999C7.96 9.76993 9.76 7.95993 12 7.95993C14.24 7.95993 16.04 9.76993 16.04 11.9999C16.04 14.2299 14.24 16.0399 12 16.0399Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M12.0004 9.13989C10.4304 9.13989 9.15039 10.4199 9.15039 11.9999C9.15039 13.5699 10.4304 14.8499 12.0004 14.8499C13.5704 14.8499 14.8604 13.5699 14.8604 11.9999C14.8604 10.4299 13.5704 9.13989 12.0004 9.13989Z"
+								fill="#292D32"
+							/>
+						</svg>
+					{/if}
+				</IconButton>
+			{:else}
+				<slot name="endContent" />
+			{/if}
+		</div>
+	</label>
+	{#if errorMessage}
+		<h5 class="error-message">{errorMessage}</h5>
+	{/if}
+</div>
+<style>
+
+.input-container{
+    display: flex;
+    flex-direction: column;
+    transition-property: transform opacity;
+    transition-duration: .2s;
+    transition-timing-function: ease-out;
+    user-select: none;
+    cursor: text;
+}
+.input-container :global(svg){
+    padding: 2px;
+}
+.input-container :global(svg path){
+    fill: var(--font-d);
+}
+    .input-container input {
+        text-align: left;
+    }
+    .input-container.default .input{
+        display: flex;
+        flex-direction: column;
+        row-gap: 0px;
+    }
+    .input-container:not(.default) .input {
+        display: flex;
+        flex-direction: column;
+        border-radius: var(--radius);
+        background-color: var(--default-bg);
+        border: 2px solid var(--default-bg);
+        transition-property: background, border;
+        transition-duration: .2s;
+        transition-timing-function: ease-out;
+    }
+
+    .input-container:not(.default):has(input:user-invalid) .input {
+        border: 2px solid var(--red);
+    }
+    .input-container:not(.default) .input:hover{
+        background-color: var(--bg-3);
+    }
+    .input-container:not(.default) .input:has(input:focus){
+        background-color: var(--bg-1);
+        /* border: 2px solid var(--accent); */
+    }
+        .input svg path {
+            fill: var(--font-d);
+        }
+
+        .input h6{
+            color: var(--font-d);
+        }
+        .input .required{
+            color: var(--red);
+        }
+            .input .top-line {
+               display: flex;
+               align-items: center;
+               justify-content: space-between;
+               column-gap: var(--pad-m); 
+            }
+                .input .top-line .input-loader{
+                    position: static;
+                }
+        .input-container.default .input .input-line{
+            border-radius: var(--radius);
+            background-color: var(--default-bg);
+            border: 2px solid var(--default-bg);
+            transition-property: background, border;
+            transition-duration: .2s;
+            transition-timing-function: ease-out;
+        }
+        .input-container.default .input:hover .input-line{
+            background-color: var(--bg-3);
+        }
+        .input-container.default .input:has(input:focus) .input-line{
+            background-color: var(--bg-1);
+            /* border: 2px solid var(--accent); */
+        }
+        .input-container.default:has(input:user-invalid) .input-line {
+            border: 2px solid var(--red);
+        }
+        .input .input-line{
+            display: flex;
+            align-items: center;
+            column-gap: var(--pad-s);
+        }
+            .input input {
+                color: var(--font-u);
+                width: 100%;
+                flex: 1;
+                font-weight: 300;
+            }
+            .input input::placeholder{
+                color: var(--font-t);
+            }
+            .input .input-line svg {
+                height: var(--icon-size);
+                width: auto;
+            }
+
+    .input.error{
+        border: 2px solid var(--red) !important;
+        border-radius: var(--radius);
+    }
+        .input-container .error-message {
+             color: var(--red);
+             margin-left: 4px;
+        }
+
+    .input-container:has(input:disabled) .input {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+</style>

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

@@ -0,0 +1,24 @@
+<script>
+    export let letter= "";
+</script>
+
+<kbd class="kbd h6" {...$$restProps}>
+    {#if letter}
+        {letter}
+    {:else}
+        <slot/>
+    {/if}
+</kbd>
+
+<style>
+    .kbd{
+        display: inline-flex;
+        padding: var(--pad-xs) var(--pad-s);
+        background-color: var(--bg-3);
+        border: 1px solid var(--stroke);
+        color: var(--font-d);
+        border-radius: var(--radius-m);
+        font-weight: 300;
+        color: var(--font-u);
+    }
+</style>

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

@@ -0,0 +1,36 @@
+<script>
+	export let href = '';
+	export let style = '';
+	export let className = '';
+	export let label = '';
+	export let target = '';
+	export let onClick = null;
+
+    function handleClick() {
+        if (onClick) {
+            onClick()
+        }
+    }
+</script>
+
+<a on:click={handleClick} {href} {style} {target} class="link h4 {className}" {...$$restProps}>
+	{#if label}
+		{label}
+	{:else}
+		<slot />
+	{/if}
+</a>
+
+<style>
+	.link {
+		color: var(--accent);
+		cursor: pointer;
+		transition: opacity 0.2s ease-out;
+		text-decoration: none;
+		font-weight: 300;
+	}
+
+	.link:hover {
+		opacity: 0.7;
+	}
+</style>

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

@@ -0,0 +1,30 @@
+
+
+<ul class="list">
+    <slot/>
+</ul>
+
+<style>
+    .list{
+        display: flex;
+        flex-direction: column;
+        padding: var(--pad-xxl);
+        row-gap: var(--pad-xl);
+    }
+    .list :global(li) {
+        margin-left: 7px;
+        display: flex;
+        flex-direction: column;
+        gap: var(--pad-xs);
+    }
+    .list :global(li > *:not(p)){
+        transform: translateX(-7px);
+    }
+    .list :global(li > *:not(p))::before{
+        content: '• ';
+    }
+    .list :global(li > *) {
+        margin-top: 7px;
+    }
+</style>
+

package/src/components/hamzus-ui/LoaderCircle/Loader.svelte

@@ -0,0 +1,25 @@
+<script>
+	export let size = "50px"; // Taille par défaut en pixels
+	export let width = "3px"; // Taille par défaut en pixels
+	export let color = "var(--font-d)"; // Taille par défaut en pixels
+</script>
+
+<div class="loader" style="--loader-color:{color};width: {size}; height: {size}; border-width: {width};"></div>
+
+<style>
+	.loader {
+		border: 4px solid rgba(124, 124, 124, 0.1); /* Couleur du contour de base */
+		border-left-color: var(--loader-color); /* Couleur principale */
+		border-radius: 50%;
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>

package/src/components/hamzus-ui/LoaderCircle/index.js

@@ -0,0 +1 @@
+export { default as Loader } from './Loader.svelte';

package/src/components/hamzus-ui/Popover/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}>
+    {#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-d);
+        cursor: pointer;
+        transition: transform .2s ease-out;
+    }
+    .button:active {
+        transform: scale(.98);
+    }
+    .button :global(*) {
+        color: var(--font-d);
+        fill: var(--font-d);
+    }
+    .button:hover{
+        background-color: var(--bg-3);
+        color: var(--font-u);
+    }
+    .button:hover :global(*) {
+        color: var(--font-u);
+        fill: var(--font-d);
+    }
+</style>

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

@@ -0,0 +1,21 @@
+<script>
+    export let width = "max-content"
+</script>
+
+<div class="content-container" style="--width:{width};">
+    <slot/>
+</div>
+
+<style>
+    .content-container{
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--pad-m);
+        padding: var(--pad-m) var(--pad-l);
+        background-color: var(--bg-2);
+        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/Popover/Label.svelte

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