hamzus-ui 0.0.1

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

@@ -0,0 +1,142 @@
+<script>
+	// import
+	import Loader from '@hamzus-ui/LoaderCircle/Loader.svelte';
+	// props
+	export let loading = false;
+	export let desabled = false;
+	export let onClick = undefined;
+	export let label = '';
+	export let avoidRipple = false;
+	// local var
+    let button;
+	// functions
+    function handleClick(event) {
+        if (!desabled && !loading) {
+            if (onClick && typeof onClick === "function") {       
+                onClick()
+            }
+        }
+    }
+	function createRipple(event) {
+		if (avoidRipple || desabled || loading) {
+			return;
+		}
+
+        console.log("ripple");
+
+		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>
+
+<button bind:this={button} on:click={handleClick} on:mousedown={createRipple} class="button h4" class:desabled class:loading {...$$restProps}>
+	{#if label}
+		<h4>{label}</h4>
+	{:else}
+		<slot />
+	{/if}
+	{#if loading}
+		<div class="loader">
+			<Loader size="16px" color="var(--button-default-color)"></Loader>
+		</div>
+	{/if}
+</button>
+
+<style>
+	.button {
+		display: flex;
+		align-items: center;
+		padding: var(--pad-xs) var(--pad-xl);
+		column-gap: var(--pad-m);
+		border-radius: var(--radius-m);
+		background-color: var(--button-default-bg);
+		color: var(--button-default-color);
+		transition-property: background-color, transform, color;
+		transition-duration: 0.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;
+		position: relative;
+	}
+	.button > :global(*) {
+		color: var(--button-default-color);
+	}
+	.button > :global(svg) {
+		height: 16px;
+		width: 16px;
+		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(0.95);
+	}
+	.button.desabled,
+	.button.loading {
+		opacity: 0.8;
+		cursor: not-allowed;
+		transform: scale(0.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 .7s ease-out;
+	}
+	@keyframes grow {
+		from {
+			width: 0px;
+			opacity: 1;
+		}
+		to {
+			width: 200%;
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,138 @@
+<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 label = '';
+	export let avoidRipple = false;
+	// local var
+    let button;
+	// functions
+    function handleClick(event) {
+        if (!desabled && !loading) {
+            if (onClick && typeof onClick === "function") {       
+                onClick()
+            }
+        }
+    }
+	function createRipple(event) {
+		if (avoidRipple || desabled || loading) {
+			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} on:mousedown={createRipple} bind:this={button} class="button h4" class:desabled class:loading {href} {...$$restProps}>
+	{#if label}
+		<h4>{label}</h4>
+	{:else}
+		<slot />
+	{/if}
+	{#if loading}
+		<div class="loader">
+			<Loader size="16px" color="var(--button-default-color)"></Loader>
+		</div>
+	{/if}
+</a>
+
+<style>
+	.button {
+		display: flex;
+		align-items: center;
+		padding: var(--pad-xs) var(--pad-xl);
+		border-radius: var(--radius-m);
+		background-color: var(--button-default-bg);
+		color: var(--button-default-color);
+		transition-property: background-color, transform, color;
+		transition-duration: 0.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;
+		position: relative;
+	}
+	.button > :global(*) {
+		color: var(--button-default-color);
+	}
+	.button  > :global(svg) {
+		height: 24px;
+		width: 24px;
+		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(0.95);
+	}
+	.button.desabled {
+		opacity: 0.8;
+		cursor: not-allowed;
+		transform: scale(0.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/Checkboxes/Checkbox/Checkbox.svelte

@@ -0,0 +1,41 @@
+<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;
+
+    import "./index.css"
+
+    function handleCheckboxChange() {
+        if (disabled) {
+            checked = checked
+            return
+        }
+        
+        checked = !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>

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

@@ -0,0 +1,68 @@
+.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/Checkboxes/CheckboxCard/CheckboxCard.svelte

@@ -0,0 +1,27 @@
+<script>
+    export let checkboxSize ="24px"
+    export let checked = false
+    export let title = "title"
+    export let text
+    export let disabled
+    export let style
+    export let icon = null
+
+    import Checkbox from "../Checkbox/Checkbox.svelte"
+    import "./index.css"
+</script>
+
+<label {style} class="checkbox-card {disabled ? "disabled" : ""}">
+    <div class="checkbox-left-content">
+        {#if icon}
+                {icon}
+        {/if}
+        <div class="text">
+            <h3>{title}</h3>
+            {#if text}
+                <p>{text}</p>
+            {/if}
+        </div>
+    </div>
+    <Checkbox {disabled} {checked} size={checkboxSize} name="test"/>
+</label>

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

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

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

@@ -0,0 +1,192 @@
+<script>
+	import Button from '@hamzus-ui/Button/Button.svelte';
+	import IconButton from '@hamzus-ui/IconButton/IconButton.svelte';
+	import ScrollArea from '@hamzus-ui/ScrollArea/ScrollArea.svelte';
+
+	export let text = '';
+	export let title = '';
+	export let src = '';
+	export let limit = 15;
+
+	let lines = [];
+	let isCoppied = false;
+
+	function lintCode(text) {
+		// text = text.replace(/ /g, '\t');
+		text = text.replace(/"([^"]*)":/g, '<span>"$1"</span> <span class="syntax">:</span>');
+		text = text.replace(/(,)\n/g, '<span class="syntax">$1</span>\n');
+
+		let tempText = text.split('\n');
+		lines = tempText;
+
+        
+	}
+	$: lintCode(text);
+
+	let isExpanded = false;
+	function handleExpand() {
+		isExpanded = true;
+	}
+	function handleUnexpand() {
+		isExpanded = false;
+	}
+
+	async function handleCopy() {
+		await navigator.clipboard.writeText(text);
+		isCoppied = true;
+
+		setTimeout(() => {
+			isCoppied = false;
+		}, 800);
+	}
+</script>
+
+<div>
+	<div class="top-code">
+		<h3>{title}</h3>
+		<IconButton variant="ghost" onClick={handleCopy}>
+			{#if isCoppied}
+				<svg
+					width="25"
+					height="25"
+					viewBox="0 0 25 25"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M10.1178 18.3979C9.78728 18.3979 9.47333 18.2658 9.242 18.0344L4.56581 13.3582C4.08662 12.8791 4.08662 12.0859 4.56581 11.6067C5.045 11.1275 5.83813 11.1275 6.31732 11.6067L10.1178 15.4072L18.6109 6.91402C19.0901 6.43483 19.8832 6.43483 20.3624 6.91402C20.8416 7.3932 20.8416 8.18634 20.3624 8.66552L10.9935 18.0344C10.7622 18.2658 10.4482 18.3979 10.1178 18.3979Z"
+						fill="black"
+					/>
+				</svg>
+			{:else}
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M11.1 22.75H6.9C2.99 22.75 1.25 21.01 1.25 17.1V12.9C1.25 8.99 2.99 7.25 6.9 7.25H11.1C15.01 7.25 16.75 8.99 16.75 12.9V17.1C16.75 21.01 15.01 22.75 11.1 22.75ZM6.9 8.75C3.8 8.75 2.75 9.8 2.75 12.9V17.1C2.75 20.2 3.8 21.25 6.9 21.25H11.1C14.2 21.25 15.25 20.2 15.25 17.1V12.9C15.25 9.8 14.2 8.75 11.1 8.75H6.9Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M17.1 16.75H16C15.59 16.75 15.25 16.41 15.25 16V12.9C15.25 9.8 14.2 8.75 11.1 8.75H8C7.59 8.75 7.25 8.41 7.25 8V6.9C7.25 2.99 8.99 1.25 12.9 1.25H17.1C21.01 1.25 22.75 2.99 22.75 6.9V11.1C22.75 15.01 21.01 16.75 17.1 16.75ZM16.75 15.25H17.1C20.2 15.25 21.25 14.2 21.25 11.1V6.9C21.25 3.8 20.2 2.75 17.1 2.75H12.9C9.8 2.75 8.75 3.8 8.75 6.9V7.25H11.1C15.01 7.25 16.75 8.99 16.75 12.9V15.25Z"
+						fill="#292D32"
+					/>
+				</svg>
+			{/if}
+		</IconButton>
+	</div>
+	<div class="code-block">
+		<ScrollArea style="height:fit-content;" proximity={3}>
+			<div class="code">
+				{#each lines as line, index}
+					{#if !isExpanded && index < limit}
+						<div class="line">
+							<span class="line-index h5">{index + 1}</span>
+							<p class="line-content">{line}</p>
+						</div>
+					{/if}
+					{#if isExpanded}
+						<div class="line">
+							<span class="line-index h5">{index + 1}</span>
+							<p class="line-content">{line}</p>
+						</div>
+					{/if}
+				{/each}
+			</div>
+		</ScrollArea>
+
+		{#if lines.length > limit && !isExpanded}
+			<div class="see-more" style="padding: 3px;">
+				<Button onClick={handleExpand} variant="ghost" style="width:100%" label="Afficher plus"></Button>
+			</div>
+		{/if}
+		{#if isExpanded && lines.length > limit - 1}
+			<div style="padding: 3px;border-top: 1px solid var(--stroke);">
+				<Button onClick={handleUnexpand} variant="ghost" style="width:100%" label="Afficher moins"></Button>
+			</div>
+		{/if}
+	</div>
+</div>
+{#if src}
+    <h5 class="src">{src}</h5>
+{/if}
+
+<style>
+	.top-code {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border: 1px solid var(--stroke);
+		border-bottom: unset;
+		padding: var(--pad-xxl);
+		border-top-left-radius: 7px;
+		border-top-right-radius: 7px;
+	}
+	.code-block {
+		border: 1px solid var(--stroke);
+		border-bottom-left-radius: 7px;
+		border-bottom-right-radius: 7px;
+		overflow-y: hidden;
+	}
+	.code {
+		width: 100%;
+		min-width: fit-content;
+		display: flex;
+		flex-direction: column;
+	}
+	.line {
+		min-width: 100%;
+		width: 100%;
+		display: flex;
+		align-items: center;
+	}
+	.line:nth-child(even) {
+		background-color: var(--bg-2);
+	}
+	.line:hover {
+		background-color: var(--bg-3);
+	}
+
+	.line-index {
+		width: 50px;
+		background-color: rgba(133, 133, 133, 0.068);
+		color: var(--font-u);
+		padding: var(--pad-xs) var(--pad-m);
+		user-select: none;
+	}
+	.line-content {
+		width: calc(100% - 50px);
+		text-wrap: nowrap;
+        white-space: pre;
+	}
+	.line-content > :global(span) {
+		color: var(--blue);
+	}
+	.line-content > :global(.syntax) {
+		color: var(--orange);
+	}
+
+	.see-more {
+		position: relative;
+		border-top: 1px solid var(--stroke);
+	}
+	.see-more::after {
+		content: '';
+		position: absolute;
+		bottom: 100%;
+		left: 0;
+		width: 100%;
+		height: 60px;
+		background: linear-gradient(0deg, rgba(0, 0, 0, 0.466) 0%, rgba(255, 255, 255, 0) 100%);
+		user-select: none;
+		pointer-events: none;
+	}
+
+    .src{
+        width: 100%;
+        text-align: end;
+    }
+</style>