mertani-web-toolkit 0.1.66 → 0.1.68

package/dist/components/Button/Button.svelte

@@ -7,7 +7,7 @@
 	interface Props extends Omit<HTMLButtonAttributes, 'type'> {
 		// ===Styles===
 		type?: 'solid' | 'outline';
-		size?: 48 | 40 | 32;
+		size?: 48 | 40 | 32 | 24 | 20 | 16;
 		backgroundColor?: string;
 		textColor?: string;
 		borderColor?: string;
@@ -25,12 +25,16 @@
 		// Events
 		onclick?: () => void;
 		onmouseenter?: () => void;
+		onmouseleave?: () => void;
 
 		// Additional Actions
 		isLoading?: boolean;
 		isShow?: boolean;
 		disabled?: boolean;
 		tooltip?: string;
+		tooltipPosition?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+		tooltipBgColor?: string;
+		tooltipTextColor?: string;
 
 		// Any
 		class?: string;
@@ -53,18 +57,22 @@
 
 		// ===Properties===
 		// Data
-		label = 'Button',
+		label = '',
 
 		// Additional Actions
 		isLoading = false,
 		isShow = true,
 		disabled = false,
 		tooltip = '',
+		tooltipPosition = 'auto',
+		tooltipBgColor = 'var(--color-bg-inverse)',
+		tooltipTextColor = 'var(--color-text-inverse)',
 
 		class: className = '',
 		style: customStyle = '',
 		onclick,
 		onmouseenter,
+		onmouseleave,
 		...props
 	}: Props = $props();
 
@@ -72,13 +80,61 @@
 	const sizeConfig = $derived(() => {
 		switch (size) {
 			case 48:
-				return { height: '48px', padding: '10px 24px', fontSize: '18px', borderRadius: '8px' };
+				return {
+					height: '48px',
+					width: label ? 'auto' : '48px',
+					padding: label ? '10px 24px' : '10px',
+					fontSize: '18px',
+					borderRadius: '8px'
+				};
 			case 40:
-				return { height: '40px', padding: '8px 16px', fontSize: '16px', borderRadius: '8px' };
+				return {
+					height: '40px',
+					width: label ? 'auto' : '40px',
+					padding: label ? '8px 16px' : '8px',
+					fontSize: '16px',
+					borderRadius: '8px'
+				};
 			case 32:
-				return { height: '32px', padding: '6px 12px', fontSize: '14px', borderRadius: '6px' };
+				return {
+					height: '32px',
+					width: label ? 'auto' : '32px',
+					padding: label ? '6px 12px' : '6px',
+					fontSize: '14px',
+					borderRadius: '6px'
+				};
+			case 24:
+				return {
+					height: '24px',
+					width: label ? 'auto' : '24px',
+					padding: label ? '4px 8px' : '4px',
+					fontSize: '12px',
+					borderRadius: '4px'
+				};
+			case 20:
+				return {
+					height: '20px',
+					width: label ? 'auto' : '20px',
+					padding: label ? '2px 6px' : '2px',
+					fontSize: '10px',
+					borderRadius: '4px'
+				};
+			case 16:
+				return {
+					height: '16px',
+					width: label ? 'auto' : '16px',
+					padding: label ? '0px 4px' : '0px',
+					fontSize: '10px',
+					borderRadius: '4px'
+				};
 			default:
-				return { height: '40px', padding: '8px 16px', fontSize: '16px', borderRadius: '8px' };
+				return {
+					height: '40px',
+					width: label ? 'auto' : '40px',
+					padding: label ? '8px 16px' : '8px',
+					fontSize: '16px',
+					borderRadius: '8px'
+				};
 		}
 	});
 
@@ -88,6 +144,7 @@
 
 		// Size styles
 		styles.push(`height: ${sizeConfig().height};`);
+		styles.push(`width: ${sizeConfig().width};`);
 		styles.push(`padding: ${sizeConfig().padding};`);
 		styles.push(`font-size: ${sizeConfig().fontSize};`);
 		styles.push(`border-radius: ${sizeConfig().borderRadius};`);
@@ -152,6 +209,38 @@
 		return classes.join(' ');
 	});
 
+	let showTooltip = $state(false);
+	let actualPosition = $state<'top' | 'bottom' | 'left' | 'right'>('right');
+	let buttonEl: HTMLButtonElement | null = $state(null);
+
+	function updateTooltipPosition() {
+		if (tooltipPosition !== 'auto') {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			actualPosition = tooltipPosition as any;
+			return;
+		}
+
+		if (!buttonEl) return;
+
+		const rect = buttonEl.getBoundingClientRect();
+		const viewportWidth = window.innerWidth;
+		// const viewportHeight = window.innerHeight;
+		const tooltipMargin = 12;
+		const estimatedWidth = 120; // heuristic
+		const estimatedHeight = 40; // heuristic
+
+		// Priority: Right -> Left -> Top -> Bottom
+		if (rect.right + estimatedWidth + tooltipMargin < viewportWidth) {
+			actualPosition = 'right';
+		} else if (rect.left - estimatedWidth - tooltipMargin > 0) {
+			actualPosition = 'left';
+		} else if (rect.top - estimatedHeight - tooltipMargin > 0) {
+			actualPosition = 'top';
+		} else {
+			actualPosition = 'bottom';
+		}
+	}
+
 	function handleClick() {
 		if (!disabled && !isLoading && onclick) {
 			onclick();
@@ -159,21 +248,33 @@
 	}
 
 	function handleMouseEnter() {
+		if (tooltip) {
+			updateTooltipPosition();
+			showTooltip = true;
+		}
 		if (!disabled && !isLoading && onmouseenter) {
 			onmouseenter();
 		}
 	}
+
+	function handleMouseLeave() {
+		showTooltip = false;
+		if (!disabled && !isLoading && onmouseleave) {
+			onmouseleave();
+		}
+	}
 </script>
 
 {#if isShow}
 	<button
+		bind:this={buttonEl}
 		type="button"
 		class={buttonClasses()}
 		style={buttonStyles()}
 		disabled={disabled || isLoading}
 		onclick={handleClick}
 		onmouseenter={handleMouseEnter}
-		title={tooltip || ''}
+		onmouseleave={handleMouseLeave}
 		{...props}
 	>
 		{#if isLoading}
@@ -194,5 +295,17 @@
 		{#if !isLoading && icon && iconPosition === 'right'}
 			<Icon name={icon} color={iconColor || 'currentColor'} width={16} height={16} />
 		{/if}
+
+		{#if tooltip && showTooltip}
+			<div class="btn-tooltip-container tooltip-{actualPosition}">
+				<div
+					class="btn-tooltip"
+					style={`--tooltip-bg-color: ${tooltipBgColor}; --tooltip-text-color: ${tooltipTextColor};`}
+				>
+					{tooltip}
+					<div class="tooltip-arrow"></div>
+				</div>
+			</div>
+		{/if}
 	</button>
 {/if}

package/dist/components/Button/Button.svelte.d.ts

@@ -3,7 +3,7 @@ import type { TIconName } from '../../icons/index.js';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLButtonAttributes, 'type'> {
     type?: 'solid' | 'outline';
-    size?: 48 | 40 | 32;
+    size?: 48 | 40 | 32 | 24 | 20 | 16;
     backgroundColor?: string;
     textColor?: string;
     borderColor?: string;
@@ -16,10 +16,14 @@ interface Props extends Omit<HTMLButtonAttributes, 'type'> {
     label?: string;
     onclick?: () => void;
     onmouseenter?: () => void;
+    onmouseleave?: () => void;
     isLoading?: boolean;
     isShow?: boolean;
     disabled?: boolean;
     tooltip?: string;
+    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+    tooltipBgColor?: string;
+    tooltipTextColor?: string;
     class?: string;
     style?: string;
 }

package/dist/components/Button/button.css

@@ -92,3 +92,86 @@
 	display: inline-flex;
 	align-items: center;
 }
+
+/* Tooltip */
+.btn-tooltip-container {
+	position: absolute;
+	z-index: 50;
+	pointer-events: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	animation: tooltip-fade-in 0.2s forwards;
+}
+
+@keyframes tooltip-fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.btn-tooltip {
+	background-color: var(--tooltip-bg-color);
+	color: var(--tooltip-text-color);
+	padding: 8px 14px;
+	border-radius: 10px;
+	font-size: 13px;
+	font-weight: 500;
+	white-space: nowrap;
+	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
+	position: relative;
+	line-height: 1.2;
+}
+
+.tooltip-arrow {
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	background-color: var(--tooltip-bg-color);
+	transform: rotate(45deg);
+}
+
+/* Positions */
+.tooltip-top {
+	bottom: 100%;
+	left: 50%;
+	transform: translateX(-50%) translateY(-10px);
+}
+.tooltip-top .tooltip-arrow {
+	bottom: -4px;
+	left: calc(50% - 4px);
+}
+
+.tooltip-bottom {
+	top: 100%;
+	left: 50%;
+	transform: translateX(-50%) translateY(10px);
+}
+.tooltip-bottom .tooltip-arrow {
+	top: -4px;
+	left: calc(50% - 4px);
+}
+
+.tooltip-left {
+	right: 100%;
+	top: 50%;
+	transform: translateY(-50%) translateX(-10px);
+}
+.tooltip-left .tooltip-arrow {
+	right: -4px;
+	top: calc(50% - 4px);
+}
+
+.tooltip-right {
+	left: 100%;
+	top: 50%;
+	transform: translateY(-50%) translateX(10px);
+}
+.tooltip-right .tooltip-arrow {
+	left: -4px;
+	top: calc(50% - 4px);
+}

package/dist/components/map/MapMarkerGroup.svelte

@@ -86,6 +86,7 @@
 
 		if (!L) {
 			const leafletMod = await import('leaflet');
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			L = (leafletMod as any).default ?? leafletMod;
 
 			await import('leaflet.markercluster');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mertani-web-toolkit",
-	"version": "0.1.66",
+	"version": "0.1.68",
 	"homepage": "https://storybook.mertani.com/",
 	"scripts": {
 		"dev": "vite dev",