mertani-web-toolkit 0.1.70 → 0.1.71

package/dist/components/Button/Button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import './button.css';
-	import { Icon } from '../../index.js';
+	import { Icon, Tooltip } from '../../index.js';
 	import type { TIconName } from '../../icons/index.js';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -209,38 +209,6 @@
 		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();
@@ -248,17 +216,12 @@
 	}
 
 	function handleMouseEnter() {
-		if (tooltip) {
-			updateTooltipPosition();
-			showTooltip = true;
-		}
 		if (!disabled && !isLoading && onmouseenter) {
 			onmouseenter();
 		}
 	}
 
 	function handleMouseLeave() {
-		showTooltip = false;
 		if (!disabled && !isLoading && onmouseleave) {
 			onmouseleave();
 		}
@@ -266,46 +229,41 @@
 </script>
 
 {#if isShow}
-	<button
-		bind:this={buttonEl}
-		type="button"
-		class={buttonClasses()}
-		style={buttonStyles()}
+	<Tooltip
+		text={tooltip}
+		position={tooltipPosition}
+		bgColor={tooltipBgColor}
+		textColor={tooltipTextColor}
 		disabled={disabled || isLoading}
-		onclick={handleClick}
-		onmouseenter={handleMouseEnter}
-		onmouseleave={handleMouseLeave}
-		{...props}
 	>
-		{#if isLoading}
-			<span
-				class="btn-loader"
-				style={loaderColor
-					? `border-top-color: ${loaderColor}; border-right-color: ${loaderColor};`
-					: ''}
-			></span>
-		{:else if icon && iconPosition === 'left'}
-			<Icon name={icon} color={iconColor || 'currentColor'} width={16} height={16} />
-		{/if}
-
-		{#if label}
-			<span class="btn-label">{label}</span>
-		{/if}
-
-		{#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>
+		<button
+			type="button"
+			class={buttonClasses()}
+			style={buttonStyles()}
+			disabled={disabled || isLoading}
+			onclick={handleClick}
+			onmouseenter={handleMouseEnter}
+			onmouseleave={handleMouseLeave}
+			{...props}
+		>
+			{#if isLoading}
+				<span
+					class="btn-loader"
+					style={loaderColor
+						? `border-top-color: ${loaderColor}; border-right-color: ${loaderColor};`
+						: ''}
+				></span>
+			{:else if icon && iconPosition === 'left'}
+				<Icon name={icon} color={iconColor || 'currentColor'} width={16} height={16} />
+			{/if}
+
+			{#if label}
+				<span class="btn-label">{label}</span>
+			{/if}
+
+			{#if !isLoading && icon && iconPosition === 'right'}
+				<Icon name={icon} color={iconColor || 'currentColor'} width={16} height={16} />
+			{/if}
+		</button>
+	</Tooltip>
 {/if}

package/dist/components/Button/button.css

@@ -93,85 +93,8 @@
 	align-items: center;
 }
 
-/* Tooltip */
-.btn-tooltip-container {
-	position: absolute;
-	z-index: 50;
-	pointer-events: none;
-	display: flex;
+/* Button Label */
+.btn-label {
+	display: inline-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/Tooltip/Tooltip.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import './tooltip.css';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Teks yang akan ditampilkan dalam tooltip */
+		text?: string;
+		/** Posisi tooltip: top, bottom, left, right, atau auto (default: auto) */
+		position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+		/** Warna background kustom untuk tooltip */
+		bgColor?: string;
+		/** Warna teks kustom untuk tooltip */
+		textColor?: string;
+		/** Konten yang akan diberikan tooltip saat di-hover */
+		children?: Snippet;
+		/** Jika true, tooltip tidak akan muncul */
+		disabled?: boolean;
+		/** Custom CSS class untuk wrapper */
+		class?: string;
+		/** Custom inline style untuk wrapper */
+		style?: string;
+	}
+
+	let {
+		text = '',
+		position = 'auto',
+		bgColor = 'var(--color-bg-inverse)',
+		textColor = 'var(--color-text-inverse)',
+		children,
+		disabled = false,
+		class: className = '',
+		style: customStyle = ''
+	}: Props = $props();
+
+	let showTooltip = $state(false);
+	let actualPosition = $state<'top' | 'bottom' | 'left' | 'right'>('right');
+	let wrapperEl: HTMLDivElement | null = $state(null);
+
+	function updateTooltipPosition() {
+		if (position !== 'auto') {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			actualPosition = position as any;
+			return;
+		}
+
+		if (!wrapperEl) return;
+
+		const rect = wrapperEl.getBoundingClientRect();
+		const viewportWidth = window.innerWidth;
+		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 handleMouseEnter() {
+		if (!disabled && text) {
+			updateTooltipPosition();
+			showTooltip = true;
+		}
+	}
+
+	function handleMouseLeave() {
+		showTooltip = false;
+	}
+</script>
+
+<div
+	bind:this={wrapperEl}
+	class="tooltip-wrapper {className}"
+	style={customStyle}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+	role="presentation"
+>
+	{@render children?.()}
+
+	{#if text && showTooltip}
+		<div class="tooltip-container tooltip-{actualPosition}">
+			<div
+				class="tooltip-content"
+				style={`--tooltip-bg-color: ${bgColor}; --tooltip-text-color: ${textColor};`}
+			>
+				{text}
+				<div class="tooltip-arrow"></div>
+			</div>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,23 @@
+import './tooltip.css';
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Teks yang akan ditampilkan dalam tooltip */
+    text?: string;
+    /** Posisi tooltip: top, bottom, left, right, atau auto (default: auto) */
+    position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+    /** Warna background kustom untuk tooltip */
+    bgColor?: string;
+    /** Warna teks kustom untuk tooltip */
+    textColor?: string;
+    /** Konten yang akan diberikan tooltip saat di-hover */
+    children?: Snippet;
+    /** Jika true, tooltip tidak akan muncul */
+    disabled?: boolean;
+    /** Custom CSS class untuk wrapper */
+    class?: string;
+    /** Custom inline style untuk wrapper */
+    style?: string;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/Tooltip/tooltip.css

@@ -0,0 +1,88 @@
+/* Tooltip Container */
+.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;
+	}
+}
+
+.tooltip-content {
+	background-color: var(--tooltip-bg-color, var(--color-bg-inverse, #111111));
+	color: var(--tooltip-text-color, var(--color-text-inverse, #ffffff));
+	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, var(--color-bg-inverse, #111111));
+	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);
+}
+
+/* Wrapper */
+.tooltip-wrapper {
+	position: relative;
+	display: inline-flex;
+}

package/dist/index.d.ts

@@ -26,4 +26,5 @@ export { default as MapMarkerGroup } from './components/map/MapMarkerGroup.svelt
 export { default as MapGeoJSON } from './components/map/MapGeoJSON.svelte';
 export { default as MapTopoJSON } from './components/map/MapTopoJSON.svelte';
 export { default as MapVelocity } from './components/map/MapVelocity.svelte';
+export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';
 export type { Column, DeviceStatus, TableAction } from './components/Table/types.js';

package/dist/index.js

@@ -26,3 +26,4 @@ export { default as MapMarkerGroup } from './components/map/MapMarkerGroup.svelt
 export { default as MapGeoJSON } from './components/map/MapGeoJSON.svelte';
 export { default as MapTopoJSON } from './components/map/MapTopoJSON.svelte';
 export { default as MapVelocity } from './components/map/MapVelocity.svelte';
+export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';

package/package.json

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