mertani-web-toolkit 0.1.69 → 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/Icon/Icon.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { iconMap } from '../../icons/index.js';
 	import type { TIconName } from '../../icons/index.js';
+	import * as lucideIcons from 'lucide-svelte';
+	import IconifyIcon from '@iconify/svelte';
 
 	interface IconProps {
 		name: TIconName;
@@ -14,7 +16,36 @@
 
 	const { name, width, height, color, style, onclick, opacity }: IconProps = $props();
 
-	const IconComponent = $derived(iconMap[name]);
+	const IconComponent = $derived(iconMap[name as keyof typeof iconMap]);
+
+	// cek apakah ada di lucide
+	// lucide pakai PascalCase: "arrow-right" → "ArrowRight"
+	const lucideName = $derived(
+		name
+			.split('-')
+			.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+			.join('')
+	);
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const LucideIcon = $derived((lucideIcons as any)[lucideName] ?? null);
+
+	// heuristic: jika ada colon ":" biasanya itu iconify set
+	const isIconify = $derived(name.includes(':'));
+
+	const sizeValue = $derived(() => {
+		if (typeof width === 'number') return width;
+		if (typeof width === 'string') {
+			const parsed = parseInt(width);
+			if (!isNaN(parsed)) return parsed;
+		}
+		if (typeof height === 'number') return height;
+		if (typeof height === 'string') {
+			const parsed = parseInt(height);
+			if (!isNaN(parsed)) return parsed;
+		}
+		return 24;
+	});
 
 	const iconWidth = $derived(
 		width !== undefined ? (typeof width === 'number' ? `${width}px` : width) : 'auto'
@@ -56,7 +87,7 @@
 </script>
 
 {#if IconComponent}
-	{@const Component = IconComponent as any}
+	{@const Component = IconComponent}
 	<div
 		class="icon-wrapper"
 		class:icon-clickable={onclick !== undefined}
@@ -74,6 +105,39 @@
 			<Component />
 		</div>
 	</div>
+{:else if LucideIcon}
+	<div
+		class="icon-wrapper"
+		class:icon-clickable={onclick !== undefined}
+		style={combinedStyles()}
+		onclick={onclick ? handleClick : undefined}
+		role={onclick ? 'button' : undefined}
+		onkeydown={(e) => {
+			if (onclick && (e.key === 'Enter' || e.key === ' ')) {
+				e.preventDefault();
+				handleClick();
+			}
+		}}
+	>
+		<!-- svelte-ignore svelte_component_deprecated -->
+		<svelte:component this={LucideIcon} size={sizeValue()} color={iconColor} />
+	</div>
+{:else if isIconify}
+	<div
+		class="icon-wrapper"
+		class:icon-clickable={onclick !== undefined}
+		style={combinedStyles()}
+		onclick={onclick ? handleClick : undefined}
+		role={onclick ? 'button' : undefined}
+		onkeydown={(e) => {
+			if (onclick && (e.key === 'Enter' || e.key === ' ')) {
+				e.preventDefault();
+				handleClick();
+			}
+		}}
+	>
+		<IconifyIcon icon={name} width={sizeValue()} height={sizeValue()} style="color: {iconColor}" />
+	</div>
 {:else}
 	<span class="icon-error">Icon "{name}" tidak ditemukan</span>
 {/if}

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/icons/index.js

@@ -259,8 +259,8 @@ export const iconMap = {
     berawan: Berawan,
     'berawan-tebal': BerawanTebal,
     'udara-kabut': UdaraKabut,
-    'kabut': Kabut,
-    'asap': Asap,
+    kabut: Kabut,
+    asap: Asap,
     'hujan-ringan': HujanRingan,
     'hujan-sedang': HujanSedang,
     'hujan-lebat': HujanLebat,

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.69",
+	"version": "0.1.71",
 	"homepage": "https://storybook.mertani.com/",
 	"scripts": {
 		"dev": "vite dev",
@@ -79,8 +79,10 @@
 		"svelte"
 	],
 	"dependencies": {
+		"@iconify/svelte": "^5.2.1",
 		"leaflet.markercluster": "^1.5.3",
 		"leaflet-velocity": "^1.5.0",
+		"lucide-svelte": "^1.0.1",
 		"tailwind-merge": "^3.4.0",
 		"topojson-client": "^3.1.0"
 	}