hamzus-ui 0.0.1

package/README.md

@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

package/index.js

@@ -0,0 +1,6 @@
+export { default as Button } from "./src/components/hamzus-ui/Button/Button.svelte"
+export { default as IconButton } from "./src/components/hamzus-ui/IconButton/IconButton.svelte"
+
+export { default as DropdownMenu } from "./src/components/hamzus-ui/DropdownMenu"
+export { default as Popover } from "./src/components/hamzus-ui/Popover"
+export { default as Tooltip } from "./src/components/hamzus-ui/AdvancedTooltip"

package/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "hamzus-ui",
+	"version": "0.0.1",
+	"type": "module",
+    "main": "index.js",
+    "svelte": "index.js",
+    "exports": {
+      ".": {
+        "svelte": "./index.js"
+      }
+    },
+    "files": [
+      "index.js",
+      "src/components/hamzus-ui",
+      "src/styles"
+    ],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.3",
+		"@sveltejs/adapter-node": "^5.2.9",
+		"@sveltejs/adapter-vercel": "^5.7.2",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"eslint": "^9.7.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "^5.0.0",
+		"vite": "^5.4.11",
+		"vitest": "^2.0.4"
+	},
+    "peerDependencies": {
+      "svelte": "^5.0.0"
+    },
+    "keywords": ["svelte", "ui", "components"],
+    "author": "Hamzus",
+    "license": "MIT"
+}

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

@@ -0,0 +1,22 @@
+<script>
+    export let width = "max-content"
+    export let style = "";
+</script>
+
+<div class="content" style="--width:{width};{style}">
+    <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-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/AdvancedTooltip/Label.svelte

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

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

@@ -0,0 +1,336 @@
+<script>
+	import Portal from '@hamzus-ui/Portal/Portal.svelte';
+	import { onDestroy, onMount } from 'svelte';
+
+	// import
+
+	// props
+	export let direction = 'bottom';
+	export let triggerFullWidth = false;
+	// locale var
+	let display = false;
+	let exit = false;
+
+	let tooltipParent;
+	let trigger;
+	let content;
+	let contentContainer;
+
+	let myInterval = null;
+	let lastTarget = null;
+
+	let top = 0;
+	let left = 0;
+
+	const padding = 7;
+
+	const entryPosition = {
+		bottom: ['-12px', '0px'],
+		top: ['12px', '0px'],
+		left: ['0px', '12px'],
+		right: ['0px', '-12px']
+	};
+	onMount(() => {
+        
+		return () => {
+			removeInterval();
+		};
+	});
+	// function
+	function checkDisplay(event) {
+		if (!display) {
+			return;
+		}
+		if (event.target.closest('.trigger') && event.target.closest('.trigger') === trigger) {
+			return;
+		}
+
+		handleDisplay();
+	}
+	function handleDisplay() {
+		if (!calc[direction]) {
+			console.error('Error : direction props not found !');
+		}
+
+		if (display) {
+			return;
+		}
+
+		[top, left] = calc[direction]();
+		toggleDisplay();
+	}
+
+	function toggleDisplay() {
+		if (display) {
+			// appliquer une animation
+			exit = true;
+			setTimeout(() => {
+				exit = false;
+			}, 200);
+		} else {
+			checkHoverStatus();
+			myInterval = setInterval(() => {
+				checkHoverStatus();
+			}, 100);
+		}
+
+		display = !display;
+	}
+
+	function checkHoverStatus() {
+        
+		if (
+			(display && lastTarget.closest && !lastTarget.closest('.parent-tooltip')) ||
+			(lastTarget.closest &&
+				lastTarget.closest('.parent-tooltip') &&
+				lastTarget.closest('.parent-tooltip') != tooltipParent)
+		) {
+			exit = true;
+			setTimeout(() => {
+				exit = false;
+			}, 200);
+			display = false;
+			removeInterval();
+		}
+	}
+
+	function removeInterval() {
+		if (myInterval) {
+			clearInterval(myInterval);
+			myInterval = null;
+		}
+	}
+
+	function handleMouseMove(event) {
+		lastTarget = event.target;
+        
+	}
+
+	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;
+			}
+
+			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 - padding;
+
+			// verifier si il y a assez de la place en haut
+			if (triggerTop < (contentHeight - triggerHeight) / 2) {
+				topCalc = padding;
+			}
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom < (contentHeight - triggerHeight) / 2) {
+				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 - (contentHeight - triggerHeight) / 2;
+			let leftCalc = triggerLeft + triggerWidth + padding;
+
+			// verifier si il y a assez de la place en haut
+			if (triggerTop < (contentHeight - triggerHeight) / 2) {
+				topCalc = padding;
+			}
+			// verifier si il y a assez de la place en bas
+			if (triggerBottom < (contentHeight - triggerHeight) / 2) {
+				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];
+		}
+	};
+</script>
+
+<svelte:body on:mousemove={handleMouseMove} on:click={handleMouseMove}/>
+
+<dropdown bind:this={tooltipParent} class="parent-tooltip" style={triggerFullWidth ? 'width:100%;' : ''}>
+	<div
+		bind:this={trigger}
+		class="trigger"
+		style={triggerFullWidth ? 'width:100%;' : ''}
+		on:mouseenter={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="--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>
+    .parent-tooltip{
+		width: max-content;
+        display: block;
+    }
+	.trigger {
+		width: max-content;
+	}
+
+	.content {
+		position: fixed;
+		top: var(--top);
+		left: var(--left);
+		display: block;
+		user-select: none;
+		pointer-events: none;
+		opacity: 0;
+		z-index: 2;
+	}
+
+	.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;
+		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.9);
+		}
+		to {
+			display: block;
+			opacity: 1;
+			transform: translate(0px, 0px) scale(1);
+		}
+	}
+	@keyframes exit {
+		from {
+			display: block;
+			opacity: 1;
+			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/AdvancedTooltip/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/AdvancedTooltip/Trigger.svelte

@@ -0,0 +1,5 @@
+<script>
+    export let children
+</script>
+
+{@render children()}

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

@@ -0,0 +1,5 @@
+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';

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

@@ -0,0 +1,32 @@
+
+<div class="info-card" {...$$restProps}>
+    <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.7605 15.92L15.3605 4.4C14.5005 2.85 13.3105 2 12.0005 2C10.6905 2 9.50047 2.85 8.64047 4.4L2.24047 15.92C1.43047 17.39 1.34047 18.8 1.99047 19.91C2.64047 21.02 3.92047 21.63 5.60047 21.63H18.4005C20.0805 21.63 21.3605 21.02 22.0105 19.91C22.6605 18.8 22.5705 17.38 21.7605 15.92Z" fill="#FF9500"/>
+        <path d="M12 14.75C11.59 14.75 11.25 14.41 11.25 14V9C11.25 8.59 11.59 8.25 12 8.25C12.41 8.25 12.75 8.59 12.75 9V14C12.75 14.41 12.41 14.75 12 14.75Z" fill="#FF9500"/>
+        <path d="M12 18.0001C11.94 18.0001 11.87 17.9901 11.8 17.9801C11.74 17.9701 11.68 17.9501 11.62 17.9201C11.56 17.9001 11.5 17.8701 11.44 17.8301C11.39 17.7901 11.34 17.7501 11.29 17.7101C11.11 17.5201 11 17.2601 11 17.0001C11 16.7401 11.11 16.4801 11.29 16.2901C11.34 16.2501 11.39 16.2101 11.44 16.1701C11.5 16.1301 11.56 16.1001 11.62 16.0801C11.68 16.0501 11.74 16.0301 11.8 16.0201C11.93 15.9901 12.07 15.9901 12.19 16.0201C12.26 16.0301 12.32 16.0501 12.38 16.0801C12.44 16.1001 12.5 16.1301 12.56 16.1701C12.61 16.2101 12.66 16.2501 12.71 16.2901C12.89 16.4801 13 16.7401 13 17.0001C13 17.2601 12.89 17.5201 12.71 17.7101C12.66 17.7501 12.61 17.7901 12.56 17.8301C12.5 17.8701 12.44 17.9001 12.38 17.9201C12.32 17.9501 12.26 17.9701 12.19 17.9801C12.13 17.9901 12.06 18.0001 12 18.0001Z" fill="#FF9500"/>
+    </svg>         
+    <p class="info"><slot/></p>      
+</div>
+
+
+<style>
+    .info-card{
+        display: flex;
+        column-gap: var(--pad-m);
+        padding: var(--pad-m);
+        background-color: var(--orange-b);
+        border-radius: var(--radius-m);
+    }
+    .info{
+        margin-top: 1.5px;
+        color: var(--orange);
+        text-align: left;
+    }
+
+    .info-card > svg{
+        flex-shrink: 0;
+    }
+    .info-card > svg > path {
+        fill: var(--orange);
+    }
+</style>

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

@@ -0,0 +1,32 @@
+<script>
+    export let size = 40
+    export let borderRadius = 24
+    export let src
+    export let alt = ""
+    export let link = ''
+    export let style = ''
+</script>
+
+{#if link}
+<a href={link} class="avatar" style=" height:{size}px ;width:{size}px;border-radius:{borderRadius}px;{style}">
+    <img class="image" {src} {alt} style="object-fit: cover;">
+</a>
+{:else}
+<div class="avatar" style=" height:{size}px ;width:{size}px;border-radius:{borderRadius}px;{style}">
+    <img class="image" {src} {alt} style="object-fit: cover;">
+</div>
+{/if}
+
+<style>
+    .avatar{
+        flex-shrink:0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+    }
+    .image{
+        width: 100%;
+        height: 100%;
+    }
+</style>

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

@@ -0,0 +1,79 @@
+<script>
+	// import
+	import ButtonDefault from "./Button_default.svelte";
+    import ButtonLink from "./Button_link.svelte";
+
+
+	// props
+	export let label = "";
+	export let variant = 'primary';
+	export let loading = false;
+	export let desabled = false;
+	export let avoidRipple = false;
+	export let href = "";
+	export let onClick = undefined;
+	// local var
+	const colorConfig = {
+		primary: {
+			defaultBg: '--accent',
+            defaultBorder:'',
+			defaultColor: '--white',
+			hoverBg: '--accent-b',
+            hoverBorder:'',
+			hoverColor: '--white-d'
+		},
+		secondary: {
+			defaultBg: '--bg-2',
+            defaultBorder:'',
+			defaultColor: '--font-u',
+			hoverBg: '--bg-3',
+            hoverBorder:'',
+			hoverColor: '--font-d'
+		},
+		ghost: {
+			defaultBg: '',
+            defaultBorder:'',
+			defaultColor: '--font-d',
+			hoverBg: '--bg-3',
+            hoverBorder:'',
+			hoverColor: '--font-u'
+		},
+		outline: {
+			defaultBg: '',
+            defaultBorder:'--stroke',
+			defaultColor: '--font-d',
+			hoverBg: '--bg-2',
+            hoverBorder:'--stroke',
+			hoverColor: '--font-u'
+		},
+		destructive: {
+			defaultBg: '--red',
+            defaultBorder:'--red',
+			defaultColor: '--white',
+			hoverBg: '--red',
+            hoverBorder:'--red-b',
+			hoverColor: '--white'
+		},
+	};
+</script>
+
+<div
+	style="
+        --button-default-bg:var({colorConfig[variant].defaultBg});
+        --button-default-border:var({colorConfig[variant].defaultBorder});
+        --button-default-color:var({colorConfig[variant].defaultColor});
+        --button-hover-bg:var({colorConfig[variant].hoverBg});
+        --button-hover-border:var({colorConfig[variant].hoverBorder});
+        --button-hover-color:var({colorConfig[variant].hoverColor});
+        "
+>
+{#if href}
+    <ButtonLink {label} {href} {onClick} {...$$restProps} {loading} {desabled} {avoidRipple}>
+        <slot/>
+    </ButtonLink>
+{:else}
+    <ButtonDefault {label} {onClick} {...$$restProps} {loading} {desabled} {avoidRipple}>
+        <slot/>
+    </ButtonDefault>
+{/if}
+</div>