hamzus-ui 0.0.1

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

@@ -0,0 +1,55 @@
+<script>
+    export let label = "label"
+    import IconButton from "@hamzus-ui/IconButton/IconButton.svelte";
+    import TinyScrollArea from "@hamzus-ui/TinyScrollArea/TinyScrollArea.svelte";
+
+    let isCoppied = false
+
+    let displayedText = label
+
+    async function handleCopy() {
+        await navigator.clipboard.writeText(label)
+        displayedText = "copié !"
+        isCoppied = true
+
+        setTimeout(()=>{
+            displayedText = label
+            isCoppied = false
+        }, 800)
+    }
+</script>
+
+<div class="copy-label" {...$$restProps}>
+    <IconButton onClick={handleCopy} variant="ghost">
+        {#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>
+    <TinyScrollArea>
+        <h4 class="code" style="text-align: left;">{displayedText}</h4>
+    </TinyScrollArea>
+</div>
+
+<style>
+    .copy-label{
+        width: 100%;
+        display: flex;
+        align-items: center;
+        column-gap: var(--pad-m);
+        padding: var(--pad-m);
+        background-color: var(--bg-2);
+        border-radius: var(--radius-m);
+        border: 1px solid var(--stroke);
+    }
+    .code{
+        white-space: nowrap;
+        user-select: text;
+    }
+</style>

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

@@ -0,0 +1,43 @@
+<script>
+    export let label = "label"
+    import IconButton from "@hamzus-ui/IconButton/IconButton.svelte";
+
+    let isCoppied = false
+
+    let displayedText = label
+
+    async function handleCopy() {
+        await navigator.clipboard.writeText(label)
+        displayedText = "copié !"
+        isCoppied = true
+
+        setTimeout(()=>{
+            displayedText = label
+            isCoppied = false
+        }, 800)
+    }
+</script>
+
+<button on:click={handleCopy} class="copy-label" {...$$restProps}>
+    <IconButton variant="ghost">
+        {#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>
+    <h4>{displayedText}</h4>
+</button>
+
+<style>
+    .copy-label{
+        display: flex;
+        align-items: center;
+        column-gap: var(--pad-m);
+    }
+</style>

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

@@ -0,0 +1,82 @@
+<script>
+    export let data = {}
+    export let titles = []
+</script>
+
+<div class="data-list-container">
+    {#if titles.length != 0}
+        <div class="title">
+            {#each titles as title}
+                <h5>{title}</h5>
+            {/each}
+        </div>
+    {/if}
+    <div class="data-list" {...$$restProps}>
+        {#each Object.entries(data) as [key , value]}
+            <div class="row">
+                <h4 class="key">{key}</h4>
+                {#if typeof value != 'object'}
+                    <h5 class="value">{value}</h5>
+                {:else}
+                    {#if value.text}
+                        <h5 class="value" style={value.style ? value.style : ""}>{value.text}</h5>
+                    {:else}
+                        <svelte:component this={value.component} {...value.props}></svelte:component>
+                    {/if}
+                {/if}
+            </div>
+        {/each}
+    </div>
+</div>
+
+<style>
+    .data-list-container{
+        border: 1px solid var(--stroke);
+        padding: var(--pad-m);
+        border-radius: var(--radius-m);
+        margin-bottom: 32px;
+    }
+    .data-list {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--pad-m);
+    }
+    .row{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--pad-xs) var(--pad-m);
+        border-radius: var(--radius-m);
+        cursor: pointer;
+        position: relative;
+        margin-bottom: var(--pad-m);
+    }
+    .title{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--pad-xs) var(--pad-m);
+    }
+    .row:not(:last-child):after{
+        content: '';
+        position: absolute;
+        bottom: calc( 0px - var(--pad-m));
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background-color: var(--stroke);
+    }
+    .row:nth-child(odd){
+        background-color: var(--bg-2);
+    }
+    .row:hover{
+        background-color: var(--bg-3);
+    }
+        .key{
+            color: var(--font-u);
+        }
+    .value{
+        text-align: right;
+    }
+</style>

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

@@ -0,0 +1,326 @@
+<script>
+	import * as DropdownMenu from '@hamzus-ui/DropdownMenu';
+	import Button from '@hamzus-ui/Button/Button.svelte';
+	import IconButton from '@hamzus-ui/IconButton/IconButton.svelte';
+	import { onMount } from 'svelte';
+
+    export let value = ""
+    export let name = ""
+
+	const monthList = {
+		1: 'janvier',
+		2: 'février',
+		3: 'mars',
+		4: 'avril',
+		5: 'mai',
+		6: 'juin',
+		7: 'juillet',
+		8: 'août',
+		9: 'septembre',
+		10: 'octobre',
+		11: 'novembre',
+		12: 'décembre'
+	};
+	const yearList = getYearList();
+
+    let monthInput;
+
+    let currentDay = null
+	let currentYear = new Date().getFullYear();
+	let currentMonth = new Date().getMonth() + 1;
+
+	let weeks = generateCalendarMatrix(currentYear, currentMonth - 1);
+
+    let mode = "day"
+
+	function getYearList(startYear = 1997) {
+		const currentYear = new Date().getFullYear();
+
+		return Array.from({ length: currentYear - startYear + 1 }, (_, i) => currentYear + 100 - i);
+	}
+
+	onMount(() => {});
+
+	function generateCalendarMatrix(year, month) {
+		const firstDay = new Date(year, month, 1);
+		const startWeekday = (firstDay.getDay() + 6) % 7; // 0 = lundi, ..., 6 = dimanche
+
+		const daysInMonth = new Date(year, month + 1, 0).getDate();
+		const daysInPrevMonth = new Date(year, month, 0).getDate();
+
+		const days = [];
+
+		// Début : jours du mois précédent
+		for (let i = startWeekday - 1; i >= 0; i--) {
+			days.push({
+				day: daysInPrevMonth - i,
+				currentMonth: false
+			});
+		}
+
+		// Jours du mois courant
+		for (let i = 1; i <= daysInMonth; i++) {
+			days.push({
+				day: i,
+				currentMonth: true
+			});
+		}
+
+		// Fin : jours du mois suivant
+		const remaining = 7 - (days.length % 7);
+		if (remaining < 7) {
+			for (let i = 1; i <= remaining; i++) {
+				days.push({
+					day: i,
+					currentMonth: false
+				});
+			}
+		}
+
+		// Regrouper en semaines de 7 jours
+		const weeks = [];
+		for (let i = 0; i < days.length; i += 7) {
+			weeks.push(days.slice(i, i + 7));
+		}
+
+		return weeks;
+	}
+
+    function gotoNextMonth() {
+        
+        if (currentMonth === 12) {
+            currentYear ++
+        }
+        currentMonth = currentMonth === 12 ? 1 : currentMonth + 1
+
+	    weeks = generateCalendarMatrix(currentYear, currentMonth - 1);
+
+    }
+    function gotoPreviousMonth() {
+
+        if (currentMonth === 1) {
+            currentYear --
+        }
+        currentMonth = currentMonth === 1 ? 12 : currentMonth - 1
+
+	    weeks = generateCalendarMatrix(currentYear, currentMonth - 1);
+
+    }
+
+    function handleUpdateValue(day) {
+        const formatNumber = (num) => num.toString().padStart(2, '0');
+
+        currentDay = day
+
+        value = `${currentYear}-${formatNumber(currentMonth)}-${formatNumber(day)}`
+    }
+
+    function handleChangeDayInput(event) {
+        const onlyNumbers = event.target.value.replace(/\D/g, '');
+
+        if (onlyNumbers.length === 0) {
+            currentDay = null
+            return
+        }
+
+        if (onlyNumbers === "0") {
+            currentDay = null
+            return
+        }
+
+        if (onlyNumbers.length === 1) {
+            currentDay = "0" + onlyNumbers
+            return
+        }
+
+        if (onlyNumbers.length === 3 && onlyNumbers.charAt(0) === "0") {
+            // prendre les deux dernier chiffre
+            currentDay = onlyNumbers.charAt(1) + onlyNumbers.charAt(onlyNumbers.length - 1)
+            monthInput.focus()
+            return
+        }
+
+
+        if (onlyNumbers.length === 3) {
+            // prendre le dernier chiffre et mettre un zero
+            currentDay = "0" + onlyNumbers.charAt(onlyNumbers.length - 1)
+            return
+        }
+        currentDay = onlyNumbers
+
+        console.log(currentDay);
+        
+    }
+
+    function handleChangeMonthInput(event) {
+        
+    }
+</script>
+
+<input type="hidden" {name} {value}>
+<h4>{value}</h4>
+
+<div class="group">
+
+<input type="text" bind:value={currentDay} placeholder="dd" on:input={handleChangeDayInput} class="cell p">
+<p>/</p>
+<input type="text" placeholder="mm" on:input={handleChangeMonthInput} bind:this={monthInput} class="cell p">
+
+</div>
+
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger slot="trigger">
+		<IconButton variant="ghost">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M8 5.75C7.59 5.75 7.25 5.41 7.25 5V2C7.25 1.59 7.59 1.25 8 1.25C8.41 1.25 8.75 1.59 8.75 2V5C8.75 5.41 8.41 5.75 8 5.75Z" fill="white" />
+                <path d="M16 5.75C15.59 5.75 15.25 5.41 15.25 5V2C15.25 1.59 15.59 1.25 16 1.25C16.41 1.25 16.75 1.59 16.75 2V5C16.75 5.41 16.41 5.75 16 5.75Z" fill="white" />
+                <path d="M8.5 14.5003C8.37 14.5003 8.24 14.4703 8.12 14.4203C7.99 14.3703 7.89 14.3003 7.79 14.2103C7.61 14.0203 7.5 13.7703 7.5 13.5003C7.5 13.3703 7.53 13.2403 7.58 13.1203C7.63 13.0003 7.7 12.8903 7.79 12.7903C7.89 12.7003 7.99 12.6303 8.12 12.5803C8.48 12.4303 8.93 12.5103 9.21 12.7903C9.39 12.9803 9.5 13.2403 9.5 13.5003C9.5 13.5603 9.49 13.6303 9.48 13.7003C9.47 13.7603 9.45 13.8203 9.42 13.8803C9.4 13.9403 9.37 14.0003 9.33 14.0603C9.3 14.1103 9.25 14.1603 9.21 14.2103C9.02 14.3903 8.76 14.5003 8.5 14.5003Z" fill="white" />
+                <path d="M12 14.5008C11.87 14.5008 11.74 14.4709 11.62 14.4209C11.49 14.3709 11.39 14.3008 11.29 14.2108C11.11 14.0208 11 13.7708 11 13.5008C11 13.3708 11.03 13.2408 11.08 13.1208C11.13 13.0008 11.2 12.8909 11.29 12.7909C11.39 12.7009 11.49 12.6308 11.62 12.5808C11.98 12.4208 12.43 12.5109 12.71 12.7909C12.89 12.9809 13 13.2408 13 13.5008C13 13.5608 12.99 13.6309 12.98 13.7009C12.97 13.7609 12.95 13.8209 12.92 13.8809C12.9 13.9409 12.87 14.0008 12.83 14.0608C12.8 14.1108 12.75 14.1608 12.71 14.2108C12.52 14.3908 12.26 14.5008 12 14.5008Z" fill="white" />
+                <path d="M15.5 14.5008C15.37 14.5008 15.24 14.4709 15.12 14.4209C14.99 14.3709 14.89 14.3008 14.79 14.2108C14.75 14.1608 14.71 14.1108 14.67 14.0608C14.63 14.0008 14.6 13.9409 14.58 13.8809C14.55 13.8209 14.53 13.7609 14.52 13.7009C14.51 13.6309 14.5 13.5608 14.5 13.5008C14.5 13.2408 14.61 12.9809 14.79 12.7909C14.89 12.7009 14.99 12.6308 15.12 12.5808C15.49 12.4208 15.93 12.5109 16.21 12.7909C16.39 12.9809 16.5 13.2408 16.5 13.5008C16.5 13.5608 16.49 13.6309 16.48 13.7009C16.47 13.7609 16.45 13.8209 16.42 13.8809C16.4 13.9409 16.37 14.0008 16.33 14.0608C16.3 14.1108 16.25 14.1608 16.21 14.2108C16.02 14.3908 15.76 14.5008 15.5 14.5008Z" fill="white" />
+                <path d="M8.5 17.9992C8.37 17.9992 8.24 17.9692 8.12 17.9192C8 17.8692 7.89 17.7992 7.79 17.7092C7.61 17.5192 7.5 17.2592 7.5 16.9992C7.5 16.8692 7.53 16.7392 7.58 16.6192C7.63 16.4892 7.7 16.3792 7.79 16.2892C8.16 15.9192 8.84 15.9192 9.21 16.2892C9.39 16.4792 9.5 16.7392 9.5 16.9992C9.5 17.2592 9.39 17.5192 9.21 17.7092C9.02 17.8892 8.76 17.9992 8.5 17.9992Z" fill="white" />
+                <path d="M12 17.9992C11.74 17.9992 11.48 17.8892 11.29 17.7092C11.11 17.5192 11 17.2592 11 16.9992C11 16.8692 11.03 16.7392 11.08 16.6192C11.13 16.4892 11.2 16.3792 11.29 16.2892C11.66 15.9192 12.34 15.9192 12.71 16.2892C12.8 16.3792 12.87 16.4892 12.92 16.6192C12.97 16.7392 13 16.8692 13 16.9992C13 17.2592 12.89 17.5192 12.71 17.7092C12.52 17.8892 12.26 17.9992 12 17.9992Z" fill="white" />
+                <path d="M15.5 18.0009C15.24 18.0009 14.98 17.8909 14.79 17.7109C14.7 17.6209 14.63 17.5109 14.58 17.3809C14.53 17.2609 14.5 17.1309 14.5 17.0009C14.5 16.8709 14.53 16.7409 14.58 16.6209C14.63 16.4909 14.7 16.3809 14.79 16.2909C15.02 16.0609 15.37 15.9509 15.69 16.0209C15.76 16.0309 15.82 16.0509 15.88 16.0809C15.94 16.1009 16 16.1309 16.06 16.1709C16.11 16.2009 16.16 16.2509 16.21 16.2909C16.39 16.4809 16.5 16.7409 16.5 17.0009C16.5 17.2609 16.39 17.5209 16.21 17.7109C16.02 17.8909 15.76 18.0009 15.5 18.0009Z" fill="white" />
+                <path d="M20.5 9.83984H3.5C3.09 9.83984 2.75 9.49984 2.75 9.08984C2.75 8.67984 3.09 8.33984 3.5 8.33984H20.5C20.91 8.33984 21.25 8.67984 21.25 9.08984C21.25 9.49984 20.91 9.83984 20.5 9.83984Z" fill="white" />
+                <path d="M16 22.75H8C4.35 22.75 2.25 20.65 2.25 17V8.5C2.25 4.85 4.35 2.75 8 2.75H16C19.65 2.75 21.75 4.85 21.75 8.5V17C21.75 20.65 19.65 22.75 16 22.75ZM8 4.25C5.14 4.25 3.75 5.64 3.75 8.5V17C3.75 19.86 5.14 21.25 8 21.25H16C18.86 21.25 20.25 19.86 20.25 17V8.5C20.25 5.64 18.86 4.25 16 4.25H8Z" fill="white" />    
+            </svg>
+        </IconButton>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content
+		slot="content"
+		width="260px"
+		style="background-color:var(--bg-1);padding:0px;row-gap:0px;"
+	>
+		<div class="month-selector">
+			<IconButton onClick={gotoPreviousMonth} variant="ghost">
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M15 20.6695C14.81 20.6695 14.62 20.5995 14.47 20.4495L7.95003 13.9295C6.89003 12.8695 6.89003 11.1295 7.95003 10.0695L14.47 3.54953C14.76 3.25953 15.24 3.25953 15.53 3.54953C15.82 3.83953 15.82 4.31953 15.53 4.60953L9.01003 11.1295C8.53003 11.6095 8.53003 12.3895 9.01003 12.8695L15.53 19.3895C15.82 19.6795 15.82 20.1595 15.53 20.4495C15.38 20.5895 15.19 20.6695 15 20.6695Z"
+						fill="white"
+					/>
+				</svg>
+			</IconButton>
+			<h4>{monthList[currentMonth]} {currentYear}</h4>
+			<IconButton onClick={gotoNextMonth} variant="ghost">
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M8.9101 20.6695C8.7201 20.6695 8.5301 20.5995 8.3801 20.4495C8.0901 20.1595 8.0901 19.6795 8.3801 19.3895L14.9001 12.8695C15.3801 12.3895 15.3801 11.6095 14.9001 11.1295L8.3801 4.60953C8.0901 4.31953 8.0901 3.83953 8.3801 3.54953C8.6701 3.25953 9.1501 3.25953 9.4401 3.54953L15.9601 10.0695C16.4701 10.5795 16.7601 11.2695 16.7601 11.9995C16.7601 12.7295 16.4801 13.4195 15.9601 13.9295L9.4401 20.4495C9.2901 20.5895 9.1001 20.6695 8.9101 20.6695Z"
+						fill="white"
+					/>
+				</svg>
+			</IconButton>
+		</div>
+		{#if mode === "day"}
+        <table class="calendar">
+			<thead>
+				<tr>
+					<th><h5>L</h5></th>
+					<th><h5>Ma</h5></th>
+					<th><h5>Me</h5></th>
+					<th><h5>J</h5></th>
+					<th><h5>V</h5></th>
+					<th><h5>S</h5></th>
+					<th><h5>D</h5></th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each weeks as week}
+					<tr>
+						{#each week as day}
+							<td>
+								<div>
+                                    <IconButton onClick={!day.currentMonth ? undefined : ()=>{handleUpdateValue(day.day)}} desabled={!day.currentMonth} variant="ghost">{day.day}</IconButton>
+                                </div>
+							</td>
+						{/each}
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+        {/if}
+        <div class="bottom-content"></div>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<style>
+
+    .group {
+        display: flex;
+        align-items: center;
+        column-gap: var(--pad-s);
+    }
+
+    .cell {
+        padding: var(--pad-xs);
+        border-radius: var(--radius-s);
+        width: 30px;
+    }
+    .cell:hover {
+        background-color: var(--bg-3);
+    }
+    .cell:focus{
+        background-color: var(--bg-1);
+    }
+
+	.month-selector {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+        padding: var(--pad-xxl) var(--pad-xxl)  var(--pad-m) var(--pad-xxl);
+	}
+
+	.calendar {
+        border-collapse: collapse;
+	}
+
+	.calendar tbody td {
+		background-color: var(--bg-2);
+	}
+
+	.calendar th > div,
+	.calendar td > div  {
+		display: flex;
+        align-items: center;
+        justify-content: center;
+	}
+
+    .calendar tr > th{
+        padding-bottom: var(--pad-m);
+    }
+    .calendar tr:first-child > td{
+        padding-top: var(--pad-m);
+    }
+
+
+    .calendar tr > td:last-child,
+    .calendar tr > th:last-child {
+        padding-right: var(--pad-xxl);
+    }
+    .calendar tr > td:first-child,
+    .calendar tr > th:first-child {
+        padding-left: var(--pad-xxl);
+    }
+
+    .calendar tr:last-child > td {
+        padding-bottom: var(--pad-m);
+    }
+
+    .bottom-content{
+        min-height: var(--radius-l);
+        background-color: var(--bg-2);
+        border-bottom-left-radius: var(--radius-l);
+        border-bottom-right-radius: var(--radius-l);
+    }
+</style>

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

@@ -0,0 +1,61 @@
+<script>
+	import IconButton from '@hamzus-ui/IconButton/IconButton.svelte';
+	import Portal from '@hamzus-ui/Portal/Portal.svelte';
+
+	export let isOpen = true;
+
+	function handleClose() {
+		isOpen = false;
+	}
+</script>
+
+{#if isOpen}
+	<Portal target="body">
+		<div class="dialog">
+			<div class="dialog-container">
+                <IconButton style="position:absolute;top:var(--pad-m);right:var(--pad-m);" label="ghost" variant="ghost" onClick={handleClose}>
+                    <svg
+                        width="25"
+                        height="25"
+                        viewBox="0 0 25 25"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        ><path
+                            d="M8.02188 18.1153C7.72277 18.1153 7.42365 18.0051 7.1875 17.7689C6.73096 17.3124 6.73096 16.5567 7.1875 16.1002L16.0981 7.18964C16.5546 6.73309 17.3103 6.73309 17.7668 7.18964C18.2234 7.64619 18.2234 8.40185 17.7668 8.8584L8.85626 17.7689C8.63586 18.0051 8.321 18.1153 8.02188 18.1153Z"
+                            fill="black"
+                        ></path><path
+                            d="M16.9324 18.1153C16.6333 18.1153 16.3342 18.0051 16.0981 17.7689L7.1875 8.8584C6.73096 8.40185 6.73096 7.64619 7.1875 7.18964C7.64405 6.73309 8.39972 6.73309 8.85626 7.18964L17.7668 16.1002C18.2234 16.5567 18.2234 17.3124 17.7668 17.7689C17.5307 18.0051 17.2315 18.1153 16.9324 18.1153Z"
+                            fill="black"
+                        ></path></svg
+                    >
+                </IconButton>
+                <slot/>
+			</div>
+		</div>
+	</Portal>
+{/if}
+
+<style>
+	.dialog {
+		position: fixed;
+		z-index: 1000;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: var(--bg-blur);
+		backdrop-filter: blur(20px);
+		-webkit-backdrop-filter: blur(20px);
+	}
+	.dialog-container {
+		width: min(100%, 350px);
+        min-height: 45px;
+		padding: var(--pad-xxl);
+		border-radius: var(--radius-m);
+		background-color: var(--bg-1);
+        position: relative;
+	}
+</style>

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

@@ -0,0 +1,22 @@
+<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-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/DropdownMenu/Label.svelte

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