mertani-web-toolkit 0.1.36 → 0.1.38

package/dist/components/Table/Table.svelte

@@ -3,7 +3,7 @@
 	import TableBadge from './TableBadge.svelte';
 	import TablePagination from './TablePagination.svelte';
 	import Icon from '../Icon/Icon.svelte';
-	import type { Column, DeviceStatus, BadgeStatusMapping } from './types.js';
+	import type { Column, BadgeStatusMapping } from './types.js';
 
 	export type { Column } from './types';
 
@@ -39,11 +39,41 @@
 		defaultBadgeStatusMappings?: BadgeStatusMapping[];
 	} = $props();
 
-	const emptyMessage = 'Tidak ada data';
+	const EMPTY_MESSAGE = 'Tidak ada data';
+	const HEADER_BASE_CLASS =
+		'bg-bg-surface-subtle px-4 py-3 text-left text-xs font-bold whitespace-nowrap text-text-primary';
+	const CELL_BASE_CLASS =
+		'px-4 py-3 text-sm whitespace-nowrap text-text-primary bg-bg-surface group-hover:bg-bg-surface-subtle';
+	const ROW_BASE_CLASS =
+		'group border-b border-border-outline bg-bg-surface hover:bg-bg-surface-subtle';
 
 	let scrollContainer: HTMLElement | null = $state(null);
 	let internalHasHorizontalScroll = $state(false);
+	let isMobile = $state(false);
 
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+
+		const mediaQuery = window.matchMedia('(max-width: 768px)');
+		isMobile = mediaQuery.matches;
+
+		const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
+			isMobile = e.matches;
+		};
+
+		// Modern browsers
+		if (mediaQuery.addEventListener) {
+			mediaQuery.addEventListener('change', handleChange);
+			return () => mediaQuery.removeEventListener('change', handleChange);
+		}
+		// Fallback for older browsers
+		else if (mediaQuery.addListener) {
+			mediaQuery.addListener(handleChange);
+			return () => mediaQuery.removeListener(handleChange);
+		}
+	});
+
+	// ========== SCROLL MANAGEMENT ==========
 	function updateScrollState() {
 		internalHasHorizontalScroll = scrollContainer
 			? scrollContainer.scrollWidth > scrollContainer.clientWidth
@@ -54,10 +84,8 @@
 		if (scrollContainer) {
 			const updateWithDelay = () => setTimeout(updateScrollState, 100);
 			updateWithDelay();
-
 			const handleResize = () => updateWithDelay();
 			window.addEventListener('resize', handleResize);
-
 			return () => window.removeEventListener('resize', handleResize);
 		}
 	});
@@ -70,55 +98,13 @@
 
 	const hasHorizontalScroll = $derived(internalHasHorizontalScroll);
 
-	function calculateStickyLeft(column: Column, index: number, useFlatColumns: boolean = false): number {
-		let left = 0;
-		const colsToUse = useFlatColumns ? flatColumns : columns;
-		
-		for (let i = 0; i < index; i++) {
-			const prevCol = colsToUse[i];
-			if (prevCol.sticky === 'left') {
-				const width = prevCol.width || prevCol.minWidth || '160px';
-				const widthValue = parseFloat(width.toString().replace('px', '')) || 160;
-				left += widthValue;
-			}
-		}
-		if (column.stickyOffset) {
-			left += column.stickyOffset;
-		}
-		return left;
-	}
-
-	function getStickyStyle(column: Column, index: number, useFlatColumns: boolean = false): string {
-		if (!column.sticky) return '';
-		if (column.sticky === 'left') {
-			return `position: sticky; left: ${calculateStickyLeft(column, index, useFlatColumns)}px; z-index: 10;`;
-		}
-		if (column.sticky === 'right') {
-			return `position: sticky; right: 0; z-index: 10;`;
-		}
-		return '';
-	}
-
-	function getHeaderStickyStyle(column: Column, index: number): string {
-		if (!column.sticky) return '';
-		if (column.sticky === 'left') {
-			return `position: sticky; left: ${calculateStickyLeft(column, index)}px; z-index: 20;`;
-		}
-		if (column.sticky === 'right') {
-			return `position: sticky; right: 0; z-index: 20;`;
-		}
-		return '';
-	}
-
-	// Flatten columns to get all leaf columns (for body rendering)
-	// Also preserves parent borderRight info for child columns
+	// ========== COLUMN UTILITIES ==========
 	function flattenColumns(cols: Column[], parentBorderRight?: boolean): Column[] {
 		const result: Column[] = [];
 		for (const col of cols) {
 			if (col.children && col.children.length > 0) {
 				const childBorderRight = col.borderRight || parentBorderRight;
 				const children = flattenColumns(col.children, childBorderRight);
-				// Mark last child if parent has borderRight
 				if (childBorderRight && children.length > 0) {
 					children[children.length - 1] = { ...children[children.length - 1], borderRight: true };
 				}
@@ -130,7 +116,6 @@
 		return result;
 	}
 
-	// Get total column count (including children)
 	function getTotalColumnCount(cols: Column[]): number {
 		let count = 0;
 		for (const col of cols) {
@@ -143,23 +128,152 @@
 		return count;
 	}
 
-	// Check if any column has children
-	const hasNestedColumns = $derived(columns.some(col => col.children && col.children.length > 0));
-	
-	// Flattened columns for body rendering
+	const hasNestedColumns = $derived(columns.some((col) => col.children && col.children.length > 0));
 	const flatColumns = $derived(flattenColumns(columns, false));
-	
-	// Total column count for colspan
 	const totalColumnCount = $derived(getTotalColumnCount(columns));
+
+	// ========== STICKY COLUMN UTILITIES ==========
+	function parseWidth(width: string | undefined): number {
+		if (!width) return 160;
+		return parseFloat(width.toString().replace('px', '')) || 160;
+	}
+
+	function calculateStickyLeft(
+		column: Column,
+		index: number,
+		useFlatColumns: boolean = false
+	): number {
+		let left = 0;
+		const colsToUse = useFlatColumns ? flatColumns : columns;
+
+		for (let i = 0; i < index; i++) {
+			const prevCol = colsToUse[i];
+			if (prevCol.sticky === 'left') {
+				left += parseWidth(prevCol.width || prevCol.minWidth);
+			}
+		}
+		if (column.stickyOffset) {
+			left += column.stickyOffset;
+		}
+		return left;
+	}
+
+	function getStickyStyle(
+		column: Column,
+		index: number,
+		useFlatColumns: boolean = false,
+		zIndex: number = 10
+	): string {
+		// Disable sticky on mobile
+		if (isMobile || !column.sticky) return '';
+		if (column.sticky === 'left') {
+			return `position: sticky; left: ${calculateStickyLeft(column, index, useFlatColumns)}px; z-index: ${zIndex};`;
+		}
+		if (column.sticky === 'right') {
+			return `position: sticky; right: 0; z-index: ${zIndex};`;
+		}
+		return '';
+	}
+
+	function getHeaderStickyStyle(column: Column, index: number): string {
+		return getStickyStyle(column, index, false, 20);
+	}
+
+	// ========== STYLE UTILITIES ==========
+	function getColumnStyles(column: Column): string {
+		const styles: string[] = [];
+		if (column.width) styles.push(`width: ${column.width};`);
+		if (column.minWidth) styles.push(`min-width: ${column.minWidth};`);
+		if (column.maxWidth) styles.push(`max-width: ${column.maxWidth};`);
+		if (column.align === 'center') styles.push('text-align: center;');
+		if (column.align === 'right') styles.push('text-align: right;');
+		return styles.join(' ');
+	}
+
+	function getHeaderClasses(column: Column): string {
+		const classes: string[] = [HEADER_BASE_CLASS];
+		if (column.borderRight) classes.push('border-r border-border-outline');
+		if (column.headerClass) classes.push(column.headerClass);
+		return classes.join(' ');
+	}
+
+	function getHeaderShadow(column: Column): string | null {
+		if (isMobile) return null;
+		if (column.sticky === 'left' && hasHorizontalScroll) return 'right';
+		if (column.sticky === 'right' && hasHorizontalScroll) return 'left';
+		return null;
+	}
+
+	function getCellClasses(column: Column): string {
+		const classes: string[] = [CELL_BASE_CLASS];
+		if (column.borderRight) classes.push('border-r border-border-outline');
+		if (column.cellClass) classes.push(column.cellClass);
+		return classes.join(' ');
+	}
+
+	function getCellShadow(column: Column): string | null {
+		if (isMobile) return null;
+		if (column.sticky === 'left' && hasHorizontalScroll) return 'right';
+		if (column.sticky === 'right' && hasHorizontalScroll) return 'left';
+		return null;
+	}
+
+	function getRowClasses(): string {
+		const classes: string[] = [ROW_BASE_CLASS];
+		if (onRowClick !== undefined) classes.push('cursor-pointer');
+		return classes.join(' ');
+	}
+
+	function getAlignClasses(align?: 'left' | 'center' | 'right'): string {
+		if (align === 'center') return 'justify-center';
+		if (align === 'right') return 'justify-end';
+		return 'justify-start';
+	}
+
+	// ========== ACTION HANDLERS ==========
+	function replacePlaceholders(template: string, row: any, rowIndex: number): string {
+		return template.replace(/\{(\w+)\}/g, (match, key) => String(row[key] ?? rowIndex));
+	}
+
+	function handleAction(action: any, column: Column, row: any, rowIndex: number) {
+		const onClickHandler = column.onActions?.[action.actionKey];
+		const actionType = action.actionType || 'function';
+
+		switch (actionType) {
+			case 'function':
+				if (onClickHandler) onClickHandler(row, rowIndex);
+				break;
+			case 'alert':
+				if (action.actionValue) {
+					alert(replacePlaceholders(action.actionValue, row, rowIndex));
+				}
+				break;
+			case 'dialog':
+			case 'modal':
+				if (action.actionValue) {
+					window.dispatchEvent(
+						new CustomEvent('table-action-dialog', {
+							detail: { dialogId: action.actionValue, actionKey: action.actionKey, row, rowIndex }
+						})
+					);
+				}
+				break;
+			case 'navigate':
+				if (action.actionValue) {
+					window.location.href = replacePlaceholders(action.actionValue, row, rowIndex);
+				}
+				break;
+		}
+	}
 </script>
 
 <div
-	class="overflow-x-auto overflow-y-auto mx-4 table-scroll-container"
+	class="table-scroll-container mx-4 overflow-x-auto overflow-y-auto"
 	style="height: {height}; min-height: {minHeight};"
 	bind:this={scrollContainer}
 >
 	<table class="w-full border-collapse">
-		<thead class="bg-[#F8F9FA] border-b border-[#EAECF0] sticky top-0 z-30">
+		<thead class="sticky top-0 z-30">
 			{#if hasNestedColumns}
 				<!-- Parent header row -->
 				<tr>
@@ -168,15 +282,9 @@
 						<th
 							colspan={childCount}
 							rowspan={column.children && column.children.length > 0 ? 1 : 2}
-							class="px-4 py-3 text-left text-xs font-bold text-[#475467] whitespace-nowrap bg-[#F8F9FA] {column.sticky === 'left' && hasHorizontalScroll ? 'shadow-right' : ''} {column.sticky === 'right' && hasHorizontalScroll ? 'shadow-left' : ''} {column.borderRight ? 'border-r border-[#EAECF0]' : ''} {column.headerClass || ''}"
-							style="
-								{column.width ? `width: ${column.width};` : ''}
-								{column.minWidth ? `min-width: ${column.minWidth};` : ''}
-								{column.maxWidth ? `max-width: ${column.maxWidth};` : ''}
-								{column.align === 'center' ? 'text-align: center;' : ''}
-								{column.align === 'right' ? 'text-align: right;' : ''}
-								{getHeaderStickyStyle(column, index)}
-							"
+							class={getHeaderClasses(column)}
+							data-shadow={getHeaderShadow(column)}
+							style="{getColumnStyles(column)} {getHeaderStickyStyle(column, index)}"
 						>
 							{#if loading}
 								<div class="shimmer-skeleton h-4 w-24"></div>
@@ -192,16 +300,18 @@
 						{#if column.children && column.children.length > 0}
 							{#each column.children as childColumn, childIndex}
 								{@const isLastChild = childIndex === column.children.length - 1}
-								{@const shouldShowBorder = childColumn.borderRight || (column.borderRight && isLastChild)}
+								{@const shouldShowBorder =
+									childColumn.borderRight || (column.borderRight && isLastChild)}
 								<th
-									class="px-4 py-3 text-left text-xs font-bold text-[#475467] whitespace-nowrap bg-[#F8F9FA] {childColumn.sticky === 'left' && hasHorizontalScroll ? 'shadow-right' : ''} {childColumn.sticky === 'right' && hasHorizontalScroll ? 'shadow-left' : ''} {shouldShowBorder ? 'border-r border-[#EAECF0]' : ''} {childColumn.headerClass || ''}"
-									style="
-										{childColumn.width ? `width: ${childColumn.width};` : ''}
-										{childColumn.minWidth ? `min-width: ${childColumn.minWidth};` : ''}
-										{childColumn.maxWidth ? `max-width: ${childColumn.maxWidth};` : ''}
-										{childColumn.align === 'center' ? 'text-align: center;' : ''}
-										{childColumn.align === 'right' ? 'text-align: right;' : ''}
-									"
+									class="{HEADER_BASE_CLASS} {shouldShowBorder
+										? 'border-r border-border-outline'
+										: ''} {childColumn.headerClass || ''}"
+									data-shadow={!isMobile && childColumn.sticky === 'left' && hasHorizontalScroll
+										? 'right'
+										: !isMobile && childColumn.sticky === 'right' && hasHorizontalScroll
+											? 'left'
+											: null}
+									style={getColumnStyles(childColumn)}
 								>
 									{#if loading}
 										<div class="shimmer-skeleton h-4 w-24"></div>
@@ -214,19 +324,13 @@
 					{/each}
 				</tr>
 			{:else}
-				<!-- Simple header row (no nested columns) -->
+				<!-- Simple header row -->
 				<tr>
 					{#each columns as column, index}
 						<th
-							class="px-4 py-3 text-left text-xs font-bold text-[#475467] whitespace-nowrap bg-[#F8F9FA] {column.sticky === 'left' && hasHorizontalScroll ? 'shadow-right' : ''} {column.sticky === 'right' && hasHorizontalScroll ? 'shadow-left' : ''} {column.borderRight ? 'border-r border-[#EAECF0]' : ''} {column.headerClass || ''}"
-							style="
-								{column.width ? `width: ${column.width};` : ''}
-								{column.minWidth ? `min-width: ${column.minWidth};` : ''}
-								{column.maxWidth ? `max-width: ${column.maxWidth};` : ''}
-								{column.align === 'center' ? 'text-align: center;' : ''}
-								{column.align === 'right' ? 'text-align: right;' : ''}
-								{getHeaderStickyStyle(column, index)}
-							"
+							class={getHeaderClasses(column)}
+							data-shadow={getHeaderShadow(column)}
+							style="{getColumnStyles(column)} {getHeaderStickyStyle(column, index)}"
 						>
 							{#if loading}
 								<div class="shimmer-skeleton h-4 w-24"></div>
@@ -243,70 +347,28 @@
 				<TableShimmer rows={5} columns={totalColumnCount} />
 			{:else if data.length === 0}
 				<tr>
-					<td colspan={totalColumnCount} class="px-4 py-8 text-center text-sm text-[#98A2B3]">
-						{emptyMessage}
+					<td colspan={totalColumnCount} class="px-4 py-8 text-center text-sm text-text-tertiary">
+						{EMPTY_MESSAGE}
 					</td>
 				</tr>
 			{:else}
 				{#each data as row, rowIndex}
-					<tr
-						class="group border-b border-[#EAECF0] hover:bg-[#F9FAFB] {rowIndex % 2 === 0 ? 'bg-white' : 'bg-[#F8F9FA]'} {onRowClick !== undefined ? 'cursor-pointer' : ''}"
-						onclick={() => onRowClick?.(row, rowIndex)}
-					>
+					<tr class={getRowClasses()} onclick={() => onRowClick?.(row, rowIndex)}>
 						{#each flatColumns as column, colIndex}
 							<td
-								class="px-4 py-3 text-sm text-[#2C2C30] whitespace-nowrap {column.sticky === 'left' && hasHorizontalScroll ? 'shadow-right' : ''} {column.sticky === 'right' && hasHorizontalScroll ? 'shadow-left' : ''} {column.borderRight ? 'border-r border-[#EAECF0]' : ''} {rowIndex % 2 === 0 ? 'bg-white group-hover:bg-[#F9FAFB]' : 'bg-[#F8F9FA] group-hover:bg-[#F9FAFB]'} {column.cellClass || ''}"
-								style="
-									{column.width ? `width: ${column.width};` : ''}
-									{column.minWidth ? `min-width: ${column.minWidth};` : ''}
-									{column.maxWidth ? `max-width: ${column.maxWidth};` : ''}
-									{column.align === 'center' ? 'text-align: center;' : ''}
-									{column.align === 'right' ? 'text-align: right;' : ''}
-									{getStickyStyle(column, colIndex, true)}
-									{column.sticky ? `background-color: ${rowIndex % 2 === 0 ? 'white' : '#F8F9FA'};` : ''}
-								"
+								class={getCellClasses(column)}
+								data-shadow={getCellShadow(column)}
+								style="{getColumnStyles(column)} {getStickyStyle(column, colIndex, true)}"
 							>
 								{#if column.actions && column.actions.length > 0}
-									<div class="flex items-center gap-2 {column.align === 'center' ? 'justify-center' : column.align === 'right' ? 'justify-end' : 'justify-start'}">
+									<div class="flex items-center gap-2 {getAlignClasses(column.align)}">
 										{#each column.actions as action}
-											{@const handleAction = () => {
-												const onClickHandler = column.onActions?.[action.actionKey];
-												const actionType = action.actionType || 'function';
-												
-												if (actionType === 'function' && onClickHandler) {
-													onClickHandler(row, rowIndex);
-												} else if (actionType === 'alert' && action.actionValue) {
-													let message = action.actionValue;
-													// Replace placeholders like {id}, {name}, etc. with row data
-													message = message.replace(/\{(\w+)\}/g, (match, key) => {
-														return String(row[key] ?? rowIndex);
-													});
-													alert(message);
-												} else if ((actionType === 'dialog' || actionType === 'modal') && action.actionValue) {
-													// Dispatch custom event for dialog/modal
-													window.dispatchEvent(new CustomEvent('table-action-dialog', {
-														detail: {
-															dialogId: action.actionValue,
-															actionKey: action.actionKey,
-															row,
-															rowIndex
-														}
-													}));
-												} else if (actionType === 'navigate' && action.actionValue) {
-													let url = action.actionValue;
-													// Replace placeholders like {id}, {name}, etc. with row data
-													url = url.replace(/\{(\w+)\}/g, (match, key) => {
-														return String(row[key] ?? rowIndex);
-													});
-													window.location.href = url;
-												}
-											}}
 											<Icon
 												name={action.icon as any}
 												width={18}
 												height={18}
-												color={action.color || '#6B7280'}
-												onclick={handleAction}
+												color={action.color || 'text-text-primary'}
+												onclick={() => handleAction(action, column, row, rowIndex)}
 												style="cursor: pointer;"
 											/>
 										{/each}
@@ -315,7 +377,7 @@
 									{@const badgeStatus = String(row[column.badgeKey || column.key || ''] || '')}
 									{@const badgeMappings = column.badgeStatusMappings || defaultBadgeStatusMappings}
 									{#if badgeMappings && badgeMappings.length > 0}
-										<div class="flex {column.align === 'center' ? 'justify-center' : column.align === 'right' ? 'justify-end' : 'justify-start'}">
+										<div class="flex {getAlignClasses(column.align)}">
 											<TableBadge
 												status={badgeStatus}
 												label={column.badgeLabel}
@@ -323,8 +385,10 @@
 											/>
 										</div>
 									{:else}
-										<div class="flex {column.align === 'center' ? 'justify-center' : column.align === 'right' ? 'justify-end' : 'justify-start'}">
-											<span class="inline-block rounded border px-2 text-sm font-normal leading-[23px] bg-[#E8ECF1] text-[#212529] border-[#7F8286]">
+										<div class="flex {getAlignClasses(column.align)}">
+											<span
+												class="inline-block rounded border border-border-divider-base bg-bg-surface-raised px-2 text-sm leading-[23px] font-normal text-text-primary"
+											>
 												{column.badgeLabel || badgeStatus}
 											</span>
 										</div>
@@ -355,63 +419,46 @@
 {/if}
 
 <style>
-	.table-scroll-container {
-		scrollbar-width: thin;
-		scrollbar-color: rgba(152, 162, 179, 0.3) transparent;
-	}
-
-	.table-scroll-container::-webkit-scrollbar {
-		height: 6px;
-		width: 6px;
-	}
-
-	.table-scroll-container::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	.table-scroll-container::-webkit-scrollbar-thumb {
-		background-color: rgba(152, 162, 179, 0.3);
-		border-radius: 3px;
-	}
-
-	.table-scroll-container::-webkit-scrollbar-thumb:hover {
-		background-color: rgba(80, 103, 142, 0.5);
-	}
-
-	.table-scroll-container::-webkit-scrollbar-corner {
-		background: transparent;
-	}
-
-	:global(.shadow-right) {
+	[data-shadow='right'] {
 		position: relative;
-		box-shadow: 2px 0 16px -2px rgba(0, 0, 0, 0.12) !important;
+		box-shadow: 2px 0 16px -2px color-mix(in srgb, var(--color-text-primary) 10%, transparent) !important;
 	}
 
-	:global(.shadow-right::after) {
+	[data-shadow='right']::after {
 		content: '';
 		position: absolute;
 		top: 0;
 		right: -12px;
 		width: 12px;
 		height: 100%;
-		background: linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04), transparent);
+		background: linear-gradient(
+			to right,
+			color-mix(in srgb, var(--color-text-primary) 8%, transparent),
+			color-mix(in srgb, var(--color-text-primary) 4%, transparent),
+			transparent
+		);
 		pointer-events: none;
 		z-index: -1;
 	}
 
-	:global(.shadow-left) {
+	[data-shadow='left'] {
 		position: relative;
-		box-shadow: -2px 0 16px -2px rgba(0, 0, 0, 0.12) !important;
+		box-shadow: -2px 0 16px -2px color-mix(in srgb, var(--color-text-primary) 10%, transparent) !important;
 	}
 
-	:global(.shadow-left::before) {
+	[data-shadow='left']::before {
 		content: '';
 		position: absolute;
 		top: 0;
 		left: -12px;
 		width: 12px;
 		height: 100%;
-		background: linear-gradient(to left, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04), transparent);
+		background: linear-gradient(
+			to left,
+			color-mix(in srgb, var(--color-text-primary) 8%, transparent),
+			color-mix(in srgb, var(--color-text-primary) 4%, transparent),
+			transparent
+		);
 		pointer-events: none;
 		z-index: -1;
 	}
@@ -420,7 +467,7 @@
 		position: relative;
 		overflow: hidden;
 		border-radius: 4px;
-		background-color: #e7e5e5;
+		background-color: var(--color-bg-surface-subtle);
 	}
 
 	.shimmer-skeleton::after {
@@ -432,10 +479,10 @@
 		transform: translateX(-100%);
 		background-image: linear-gradient(
 			90deg,
-			rgba(255, 255, 255, 0) 0,
-			rgba(255, 255, 255, 0.2) 20%,
-			rgba(255, 255, 255, 0.5) 80%,
-			rgba(255, 255, 255, 0) 100%
+			color-mix(in srgb, var(--color-text-primary) 0%, transparent) 0,
+			color-mix(in srgb, var(--color-text-primary) 20%, transparent) 20%,
+			color-mix(in srgb, var(--color-text-primary) 50%, transparent) 80%,
+			color-mix(in srgb, var(--color-text-primary) 100%, transparent) 100%
 		);
 		animation: shimmer 3s infinite;
 		content: '';
@@ -447,4 +494,3 @@
 		}
 	}
 </style>
-

package/dist/components/Table/TableBadge.svelte

@@ -5,21 +5,21 @@
 	function getVariantClass(variant: BadgeVariant): string {
 		switch (variant) {
 			case 'success':
-				return 'bg-[#C9FFE6] text-[#12B76A] border border-[#12B76A]';
+				return 'bg-bg-success-subtle text-text-success-ti border border-border-success-bor';
 			case 'error':
-				return 'bg-[#FFE1E4] text-[#F04438] border border-[#F04438]';
+				return 'bg-bg-error-subtle text-text-error-ti border border-border-error-bor';
 			case 'warning':
-				return 'bg-[#FFF9E6] text-bg-act-primary border border-bg-act-primary';
+				return 'bg-bg-warning-subtle text-text-warning-ti border border-border-warning-bor';
 			case 'info':
-				return 'bg-[#E0F2FE] text-[#0284C7] border border-[#0284C7]';
+				return 'bg-bg-info-subtle text-text-info-ti border border-border-info-bor';
 			case 'neutral':
 			default:
-				return 'bg-[#E8ECF1] text-[#212529] border border-[#7F8286]';
+				return 'bg-bg-surface-subtle text-text-secondary border border-border-divider-base';
 		}
 	}
 
 	function getStatusBadgeClass(status: string, mappings: BadgeStatusMapping[]): string {
-		const mapping = mappings.find(m => m.status === status);
+		const mapping = mappings.find((m) => m.status === status);
 		const variant = mapping?.variant || 'neutral';
 		return getVariantClass(variant);
 	}
@@ -36,11 +36,10 @@
 </script>
 
 <span
-	class="inline-block rounded border px-2 text-sm font-normal leading-[23px] {getStatusBadgeClass(
+	class="inline-block rounded border px-2 text-sm leading-[23px] font-normal {getStatusBadgeClass(
 		status,
 		statusMappings
 	)}"
 >
 	{label || status}
 </span>
-

package/dist/components/Table/TablePagination.svelte

@@ -16,6 +16,30 @@
 	} = $props();
 
 	const limitValues = [10, 25, 50, 100, 200];
+	let isMobile = $state(false);
+
+	// ========== MOBILE DETECTION ==========
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+
+		const mediaQuery = window.matchMedia('(max-width: 768px)');
+		isMobile = mediaQuery.matches;
+
+		const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
+			isMobile = e.matches;
+		};
+
+		// Modern browsers
+		if (mediaQuery.addEventListener) {
+			mediaQuery.addEventListener('change', handleChange);
+			return () => mediaQuery.removeEventListener('change', handleChange);
+		}
+		// Fallback for older browsers
+		else if (mediaQuery.addListener) {
+			mediaQuery.addListener(handleChange);
+			return () => mediaQuery.removeListener(handleChange);
+		}
+	});
 
 	function handlePrevPage() {
 		if (currentPage > 1 && onPageChange) {
@@ -42,19 +66,19 @@
 </script>
 
 {#if shouldShow}
-	<div class="pagination">
+	<div class="pagination" class:mobile={isMobile}>
 		<div class="limit">
 			<p>Tampilkan</p>
 			<select
 				value={itemsPerPage.toString()}
 				onchange={handleItemsPerPageChange}
-				class="items-per-page-select"
+				class="items-per-page-select text-text-primary"
 			>
 				{#each limitValues as value}
-					<option value={value.toString()}>{value}</option>
+					<option value={value.toString()} class="text-text-primary">{value}</option>
 				{/each}
 			</select>
-			<p>{currentPage} dari {totalPages} Halaman</p>
+			<p class="page-info">{currentPage} dari {totalPages} Halaman</p>
 		</div>
 		<div class="navigation">
 			<button
@@ -64,7 +88,13 @@
 				disabled={currentPage <= 1}
 				aria-label="Halaman Sebelumnya"
 			>
-				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<svg
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
 					<path
 						d="M10 12L6 8L10 4"
 						stroke="currentColor"
@@ -81,7 +111,13 @@
 				disabled={currentPage >= totalPages}
 				aria-label="Halaman Selanjutnya"
 			>
-				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<svg
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
 					<path
 						d="M6 4L10 8L6 12"
 						stroke="currentColor"
@@ -99,14 +135,24 @@
 	.pagination {
 		position: sticky;
 		bottom: 0;
-		background-color: white;
+		background-color: var(--color-bg-surface);
 		z-index: 30;
 		padding: 8px 16px;
-		border-top: 1px solid #ccc;
+		border-top: 1px solid var(--color-border-outline);
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		margin: 0 16px;
+		width: 100%;
+		box-sizing: border-box;
+		max-width: 100%;
+		overflow: hidden;
+	}
+
+	.pagination.mobile {
+		flex-direction: column;
+		gap: 12px;
+		padding: 12px 16px;
 	}
 
 	.limit {
@@ -116,23 +162,47 @@
 		gap: 12px;
 		position: relative;
 		z-index: 31;
+		flex-wrap: wrap;
+		min-width: 0;
+		flex: 1;
+	}
+
+	.pagination.mobile .limit {
+		width: 100%;
+		justify-content: center;
+		gap: 8px;
 	}
 
 	.limit p {
 		font-size: 0.875rem;
-		color: #2c2c30;
+		color: var(--color-text-primary);
 		margin: 0;
+		white-space: nowrap;
+	}
+
+	.pagination.mobile .limit p {
+		font-size: 0.8125rem;
+	}
+
+	.page-info {
+		white-space: nowrap;
 	}
 
 	.items-per-page-select {
 		padding: 4px 8px;
-		border: 1px solid #e4e7ec;
+		border: 1px solid var(--color-border-divider-base);
 		border-radius: 6px;
 		font-size: 0.875rem;
-		color: #2c2c30;
-		background-color: white;
+		color: var(--color-text-primary);
+		background-color: var(--color-bg-surface);
 		cursor: pointer;
 		min-width: 64px;
+		flex-shrink: 0;
+	}
+
+	.pagination.mobile .items-per-page-select {
+		font-size: 0.8125rem;
+		padding: 6px 8px;
 	}
 
 	.items-per-page-select:focus {
@@ -144,6 +214,13 @@
 	.navigation {
 		display: flex;
 		gap: 12px;
+		flex-shrink: 0;
+	}
+
+	.pagination.mobile .navigation {
+		width: 100%;
+		justify-content: center;
+		gap: 16px;
 	}
 
 	.nav-button {
@@ -152,12 +229,18 @@
 		justify-content: center;
 		height: 28px;
 		width: 28px;
-		color: #a3a6b7;
+		color: var(--color-text-secondary);
 		cursor: default;
 		border-radius: 6px;
 		border: none;
 		background: transparent;
 		padding: 0;
+		flex-shrink: 0;
+	}
+
+	.pagination.mobile .nav-button {
+		height: 32px;
+		width: 32px;
 	}
 
 	.nav-button.active {
@@ -172,7 +255,28 @@
 	}
 
 	.nav-button:not(:disabled):hover.active {
-		background-color: rgba(255, 160, 0, 0.1);
+		background-color: color-mix(in srgb, var(--color-bg-act-primary) 10%, transparent);
 	}
-</style>
 
+	/* Mobile responsive adjustments */
+	@media (max-width: 768px) {
+		.pagination {
+			margin: 0;
+			padding: 12px 8px;
+		}
+
+		.limit {
+			gap: 6px;
+		}
+
+		.limit p {
+			font-size: 0.75rem;
+		}
+
+		.items-per-page-select {
+			font-size: 0.75rem;
+			padding: 6px 6px;
+			min-width: 56px;
+		}
+	}
+</style>

package/dist/components/Table/TableShimmer.svelte

@@ -3,7 +3,7 @@
 </script>
 
 {#each { length: rows } as _}
-	<tr class="border-b border-[#EAECF0]">
+	<tr class="border-b border-border-divider-subtle">
 		{#each { length: columns } as _}
 			<td class="px-4 py-3">
 				<div class="shimmer-skeleton h-4 w-24"></div>
@@ -17,7 +17,7 @@
 		position: relative;
 		overflow: hidden;
 		border-radius: 4px;
-		background-color: #e7e5e5;
+		background-color: var(--color-bg-surface-subtle);
 	}
 
 	.shimmer-skeleton::after {
@@ -29,10 +29,10 @@
 		transform: translateX(-100%);
 		background-image: linear-gradient(
 			90deg,
-			rgba(255, 255, 255, 0) 0,
-			rgba(255, 255, 255, 0.2) 20%,
-			rgba(255, 255, 255, 0.5) 80%,
-			rgba(255, 255, 255, 0) 100%
+			color-mix(in srgb, var(--color-bg-surface-subtle) 0%, transparent) 0,
+			color-mix(in srgb, var(--color-bg-surface-subtle) 20%, transparent) 20%,
+			color-mix(in srgb, var(--color-bg-surface-subtle) 50%, transparent) 80%,
+			color-mix(in srgb, var(--color-bg-surface-subtle) 100%, transparent) 100%
 		);
 		animation: shimmer 3s infinite;
 		content: '';
@@ -44,4 +44,3 @@
 		}
 	}
 </style>
-

package/dist/components/Table/types.d.ts

@@ -12,7 +12,7 @@ export type TableAction = {
     actionType?: 'function' | 'alert' | 'dialog' | 'navigate' | 'modal';
     actionValue?: string;
 };
-export type Column<T = any> = {
+export type Column<T = unknown> = {
     key?: string;
     label: string;
     width?: string;
@@ -21,7 +21,7 @@ export type Column<T = any> = {
     sticky?: 'left' | 'right';
     stickyOffset?: number;
     align?: 'left' | 'center' | 'right';
-    render?: (row: T, index: number) => string | number | null | undefined | any;
+    render?: (row: T, index: number) => string | number | null | undefined | unknown;
     headerClass?: string;
     cellClass?: string;
     showBadge?: boolean;

package/dist/stores/ThemeStore.d.ts

@@ -0,0 +1,4 @@
+export declare const isDarkMode: import("svelte/store").Writable<boolean>;
+export declare function setDarkMode(value: boolean): void;
+export declare function toggleDarkMode(): void;
+export declare function initTheme(): void;

package/dist/stores/ThemeStore.js

@@ -0,0 +1,55 @@
+import { writable } from 'svelte/store';
+export const isDarkMode = writable(false);
+export function setDarkMode(value) {
+    if (typeof document !== 'undefined') {
+        if (value) {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            localStorage.setItem('theme', 'dark');
+        }
+        else {
+            document.documentElement.removeAttribute('data-theme');
+            localStorage.setItem('theme', 'light');
+        }
+    }
+    isDarkMode.set(value);
+}
+export function toggleDarkMode() {
+    isDarkMode.update((current) => {
+        const newValue = !current;
+        if (typeof document !== 'undefined') {
+            if (newValue) {
+                document.documentElement.setAttribute('data-theme', 'dark');
+                localStorage.setItem('theme', 'dark');
+            }
+            else {
+                document.documentElement.removeAttribute('data-theme');
+                localStorage.setItem('theme', 'light');
+            }
+        }
+        return newValue;
+    });
+}
+export function initTheme() {
+    if (typeof window === 'undefined')
+        return;
+    const savedTheme = localStorage.getItem('theme');
+    // Jika tidak ada item theme maka default jadi light
+    if (!savedTheme) {
+        document.documentElement.removeAttribute('data-theme'); // light
+        localStorage.setItem('theme', 'light');
+        isDarkMode.set(false);
+        return;
+    }
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const shouldBeDark = savedTheme === 'dark' || (!savedTheme && prefersDark);
+    if (shouldBeDark) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+        localStorage.setItem('theme', 'dark');
+        isDarkMode.set(true);
+    }
+    else {
+        document.documentElement.removeAttribute('data-theme');
+        localStorage.setItem('theme', 'light');
+        isDarkMode.set(false);
+    }
+}

package/dist/themes/mertani.json

@@ -0,0 +1,104 @@
+{
+	"light": {
+		"--color-bg-canvas": "#F4F4F5",
+		"--color-bg-surface": "#FFFFFF",
+		"--color-bg-surface-raised": "#FFFFFF",
+		"--color-bg-surface-subtle": "#F4F4F5",
+		"--color-bg-inverse": "#09090B",
+		"--color-bg-act-primary": "#FF6900",
+		"--color-bg-act-hover": "#F54900",
+		"--color-bg-act-pressed": "#CA3500",
+		"--color-bg-act-subtle": "#FFEDD4",
+		"--color-bg-disabled": "#E4E4E7",
+		"--color-bg-info-subtle": "#F6FAFE",
+		"--color-bg-success-subtle": "#F6FEF9",
+		"--color-bg-error-subtle": "#FFFBFA",
+		"--color-bg-warning-subtle": "#FFFCF5",
+
+		"--color-text-primary": "#18181B",
+		"--color-text-secondary": "#71717B",
+		"--color-text-tertiary": "#9F9FA9",
+		"--color-text-inverse": "#FFFFFF",
+		"--color-text-link": "#FF6900",
+		"--color-text-disabled": "#E4E4E7",
+		"--color-text-on-act": "#FFFFFF",
+		"--color-text-info-ti": "#3684F3",
+		"--color-text-success-ti": "#12B76A",
+		"--color-text-error-ti": "#F04438",
+		"--color-text-warning-ti": "#E9AF3D",
+
+		"--color-border-divider-subtle": "#F4F4F5",
+		"--color-border-divider-base": "#9F9FA9",
+		"--color-border-outline": "#E4E4E7",
+		"--color-border-form": "#D4D4D8",
+		"--color-border-act-primary": "#FF6900",
+		"--color-border-act-subtle": "#FFF7ED",
+		"--color-border-disabled": "#E4E4E7",
+		"--color-border-info-bor": "#3684F3",
+		"--color-border-success-bor": "#12B76A",
+		"--color-border-error-bor": "#D92D20",
+		"--color-border-warning-bor": "#E9AF3D",
+
+		"--color-chart-teal-subtle": "#F0FDFA",
+		"--color-chart-purple-subtle": "#FAF5FF",
+		"--color-chart-blue-subtle": "#EFF6FF",
+		"--color-chart-orange-subtle": "#FFF7ED",
+		"--color-chart-gray-subtle": "#FAFAFA",
+		"--color-chart-teal-solid": "#00BBA7",
+		"--color-chart-purple-solid": "#AD46FF",
+		"--color-chart-blue-solid": "#2B7FFF",
+		"--color-chart-orange-solid": "#FF6900",
+		"--color-chart-gray-solid": "#9F9FA9"
+	},
+	"dark": {
+		"--color-bg-canvas": "#09090B",
+		"--color-bg-surface": "#18181B",
+		"--color-bg-surface-raised": "#27272A",
+		"--color-bg-surface-subtle": "#09090B",
+		"--color-bg-inverse": "#FFFFFF",
+		"--color-bg-act-primary": "#FF6900",
+		"--color-bg-act-hover": "#FF8904",
+		"--color-bg-act-pressed": "#FFB86A",
+		"--color-bg-act-subtle": "#441306",
+		"--color-bg-disabled": "#27272A",
+		"--color-bg-info-subtle": "#003999",
+		"--color-bg-success-subtle": "#054F31",
+		"--color-bg-error-subtle": "#7A271A",
+		"--color-bg-warning-subtle": "#5F370E",
+
+		"--color-text-primary": "#FAFAFA",
+		"--color-text-secondary": "#9F9FA9",
+		"--color-text-tertiary": "#52525C",
+		"--color-text-inverse": "#09090B",
+		"--color-text-link": "#FF6900",
+		"--color-text-disabled": "#3F3F46",
+		"--color-text-on-act": "#FFFFFF",
+		"--color-text-info-ti": "#0169CD",
+		"--color-text-success-ti": "#12B76A",
+		"--color-text-error-ti": "#D92D20",
+		"--color-text-warning-ti": "#CA8828",
+
+		"--color-border-divider-subtle": "#27272A",
+		"--color-border-divider-base": "#71717B",
+		"--color-border-outline": "#27272A",
+		"--color-border-form": "#3F3F46",
+		"--color-border-act-primary": "#FF6900",
+		"--color-border-act-subtle": "#441306",
+		"--color-border-disabled": "#3F3F46",
+		"--color-border-info-bor": "#3684F3",
+		"--color-border-success-bor": "#12B76A",
+		"--color-border-error-bor": "#D92D20",
+		"--color-border-warning-bor": "#CA8828",
+
+		"--color-chart-teal-subtle": "#022F2E",
+		"--color-chart-purple-subtle": "#3C0366",
+		"--color-chart-blue-subtle": "#162456",
+		"--color-chart-orange-subtle": "#441306",
+		"--color-chart-gray-subtle": "#3F3F47",
+		"--color-chart-teal-solid": "#00BBA7",
+		"--color-chart-purple-solid": "#AD46FF",
+		"--color-chart-blue-solid": "#2B7FFF",
+		"--color-chart-orange-solid": "#FF6900",
+		"--color-chart-gray-solid": "#D4D4D8"
+	}
+}

package/dist/utils/themeLoader.d.ts

@@ -0,0 +1,9 @@
+export type ThemeTokens = Record<string, string>;
+/**
+ * Menerapkan theme tokens ke CSS variables pada :root.
+ * CSS variables ini akan otomatis tersedia untuk @theme block di app.css
+ * yang menggunakan var(--variable-name).
+ *
+ * @param tokens - Object berisi CSS variable names dan values (contoh: { "--bg-canvas": "#F4F4F5" })
+ */
+export declare function applyTheme(tokens: ThemeTokens): void;

package/dist/utils/themeLoader.js

@@ -0,0 +1,13 @@
+/**
+ * Menerapkan theme tokens ke CSS variables pada :root.
+ * CSS variables ini akan otomatis tersedia untuk @theme block di app.css
+ * yang menggunakan var(--variable-name).
+ *
+ * @param tokens - Object berisi CSS variable names dan values (contoh: { "--bg-canvas": "#F4F4F5" })
+ */
+export function applyTheme(tokens) {
+    const root = document.documentElement;
+    Object.entries(tokens).forEach(([token, value]) => {
+        root.style.setProperty(token, value);
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mertani-web-toolkit",
-	"version": "0.1.36",
+	"version": "0.1.38",
 	"homepage": "https://storybook.mertani.com/",
 	"scripts": {
 		"dev": "vite dev",
@@ -15,7 +15,8 @@
 		"test:e2e": "playwright test",
 		"test": "npm run test:e2e",
 		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build"
+		"build-storybook": "storybook build",
+		"publish": "npm run build && npm pack && npm publish"
 	},
 	"files": [
 		"dist",