mertani-web-toolkit 0.1.21 → 0.1.23

package/dist/components/Button/Button.svelte

@@ -1,30 +1,101 @@
 <script lang="ts">
-  import './button.css';
-
-  interface Props {
-    /** Is this the principal call to action on the page? */
-    primary?: boolean;
-    /** What background color to use */
-    backgroundColor?: string;
-    /** How large should the button be? */
-    size?: 'small' | 'medium' | 'large';
-    /** Button contents */
-    label: string;
-    /** The onclick event handler */
-    onclick?: () => void;
-  }
-
-  const { primary = false, backgroundColor, size = 'medium', label, ...props }: Props = $props();
-  
-  let mode = $derived(primary ? 'storybook-button--primary' : 'storybook-button--secondary');
-  let style = $derived(backgroundColor ? `background-color: ${backgroundColor}` : '');
+	import './button.css';
+	import { Icon } from '../../index.js';
+	import type { TIconName } from '../../types/Icon.js';
+
+	interface Props {
+		size?: 'small' | 'medium' | 'large';
+		variant?: 'primary' | 'secondary' | 'outline';
+		label?: string;
+		disabled?: boolean;
+		isLoading?: boolean;
+		backgroundColor?: string;
+		borderColor?: string;
+		textColor?: string;
+		iconLeft?: TIconName;
+		iconRight?: TIconName;
+		class?: string;
+		style?: string;
+		onclick?: () => void;
+	}
+
+	const {
+		size = 'medium',
+		variant = 'primary',
+		label = 'Button',
+		disabled = false,
+		isLoading = false,
+		backgroundColor = '',
+		borderColor = '',
+		textColor = '',
+		iconLeft,
+		iconRight,
+		class: className = '',
+		style: customStyle = '',
+		...props
+	}: Props = $props();
+
+	let mode = $derived(
+		variant === 'primary'
+			? 'storybook-button--primary'
+			: variant === 'secondary'
+				? 'storybook-button--secondary'
+				: 'storybook-button--outline'
+	);
+
+	// Ukuran icon berdasarkan size button
+	const iconSize = $derived(() => {
+		switch (size) {
+			case 'small':
+				return 16;
+			case 'large':
+				return 18;
+			default:
+				return 18;
+		}
+	});
+
+	// Gabungkan classes
+	const buttonClasses = $derived(() => {
+		const classes = ['storybook-button', `storybook-button--${size}`, mode];
+		if (isLoading) classes.push('storybook-button--loading');
+		if (className) classes.push(className);
+		return classes.filter(Boolean).join(' ');
+	});
+
+	// Gabungkan styles
+	const buttonStyles = $derived(() => {
+		const styles: string[] = [];
+		if (backgroundColor) styles.push(`--background-color: ${backgroundColor};`);
+		if (borderColor) styles.push(`--border-color: ${borderColor};`);
+		if (textColor) styles.push(`--text-color: ${textColor};`);
+		if (customStyle) styles.push(customStyle);
+		return styles.join(' ');
+	});
+
+	// Button disabled jika disabled atau loading
+	const isButtonDisabled = $derived(disabled || isLoading);
 </script>
 
 <button
-  type="button"
-  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-  {style}
-  {...props}
+	type="button"
+	disabled={isButtonDisabled}
+	class={buttonClasses()}
+	style={buttonStyles()}
+	{...props}
 >
-  {label}
+	{#if isLoading}
+		<span class="storybook-button__spinner"></span>
+	{/if}
+	{#if iconLeft && !isLoading}
+		<span class="storybook-button__icon storybook-button__icon--left">
+			<Icon name={iconLeft} width={iconSize()} height={iconSize()} color="currentColor" />
+		</span>
+	{/if}
+	<span class="storybook-button__label">{label}</span>
+	{#if iconRight && !isLoading}
+		<span class="storybook-button__icon storybook-button__icon--right">
+			<Icon name={iconRight} width={iconSize()} height={iconSize()} color="currentColor" />
+		</span>
+	{/if}
 </button>

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

@@ -1,14 +1,18 @@
 import './button.css';
+import type { TIconName } from '../../types/Icon.js';
 interface Props {
-    /** Is this the principal call to action on the page? */
-    primary?: boolean;
-    /** What background color to use */
-    backgroundColor?: string;
-    /** How large should the button be? */
     size?: 'small' | 'medium' | 'large';
-    /** Button contents */
-    label: string;
-    /** The onclick event handler */
+    variant?: 'primary' | 'secondary' | 'outline';
+    label?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+    textColor?: string;
+    iconLeft?: TIconName;
+    iconRight?: TIconName;
+    class?: string;
+    style?: string;
     onclick?: () => void;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;

package/dist/components/Button/button.css

@@ -1,30 +1,116 @@
 .storybook-button {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: 3em;
-  font-weight: 700;
-  line-height: 1;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	cursor: pointer;
+	border: 0;
+	font-weight: 500;
+	line-height: 1;
+	font-family: 'Inter', sans-serif;
+}
+.storybook-button:hover {
+	opacity: 0.8;
+}
+.storybook-button:active {
+	opacity: 0.6;
 }
 .storybook-button--primary {
-  background-color: #555ab9;
-  color: white;
+	background-color: var(--background-color, #f79b09);
+	border: 1px solid var(--border-color, var(--background-color, #f79b09));
+	color: var(--text-color, white);
+}
+.storybook-button--primary:disabled {
+	background-color: #ced4da;
+	border: 1px solid #ced4da;
+	color: #3f4047;
+	cursor: not-allowed;
 }
 .storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
+	border: 1px solid #ced4da;
+	background-color: transparent;
+	color: var(--text-color, #3f4047);
+}
+.storybook-button--secondary:disabled {
+	border: 1px solid #a3a6b7;
+	color: #a3a6b7;
+	cursor: not-allowed;
+}
+.storybook-button--outline {
+	border: 1px solid var(--border-color, #f79b09);
+	background-color: transparent;
+	color: var(--text-color, #f79b09);
+}
+.storybook-button--outline:disabled {
+	border: 1px solid #a3a6b7;
+	color: #a3a6b7;
+	cursor: not-allowed;
 }
 .storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
+	padding: 6px 12px;
+	font-size: 14px;
+	border-radius: 6px;
 }
 .storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
+	padding: 8px 16px;
+	font-size: 16px;
+	border-radius: 8px;
 }
 .storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
+	padding: 10px 24px;
+	font-size: 18px;
+	border-radius: 8px;
+}
+.storybook-button--disabled {
+	background-color: #ced4da;
+	cursor: not-allowed;
+}
+
+.storybook-button__icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.storybook-button__label {
+	display: inline-block;
+}
+
+.storybook-button--loading {
+	cursor: wait;
+	position: relative;
+}
+
+.storybook-button--loading .storybook-button__label {
+	opacity: 0.7;
+}
+
+.storybook-button__spinner {
+	display: inline-block;
+	width: 14px;
+	height: 14px;
+	border: 2px solid currentColor;
+	border-right-color: transparent;
+	border-radius: 50%;
+	animation: storybook-button-spin 0.6s linear infinite;
+	flex-shrink: 0;
+}
+
+@keyframes storybook-button-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.storybook-button--small .storybook-button__spinner {
+	width: 12px;
+	height: 12px;
+	border-width: 1.5px;
+}
+
+.storybook-button--large .storybook-button__spinner {
+	width: 16px;
+	height: 16px;
+	border-width: 2.5px;
 }

package/dist/components/Icon/Icon.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { iconMap } from '../../icons/index.js';
+	import type { TIconName } from '../../icons/index.js';
+
+	interface IconProps {
+		name: TIconName;
+		width?: number | string;
+		height?: number | string;
+		color?: string;
+		style?: string;
+		action?: () => void;
+		opacity?: number;
+	}
+
+	const { name, width, height, color, style, action, opacity }: IconProps = $props();
+
+	const IconComponent = $derived(iconMap[name]);
+
+	const iconWidth = $derived(
+		width !== undefined ? (typeof width === 'number' ? `${width}px` : width) : 'auto'
+	);
+	const iconHeight = $derived(
+		height !== undefined ? (typeof height === 'number' ? `${height}px` : height) : 'auto'
+	);
+	const iconColor = $derived(color || 'currentColor');
+
+	const iconOpacity = $derived(() => {
+		if (opacity === undefined) return undefined;
+		const clamped = Math.max(0, Math.min(100, opacity));
+		return clamped / 100;
+	});
+
+	const combinedStyles = $derived(() => {
+		const styles: string[] = [];
+		styles.push(`--icon-width: ${iconWidth};`);
+		styles.push(`--icon-height: ${iconHeight};`);
+		styles.push(`--icon-color: ${iconColor};`);
+		const opacityValue = iconOpacity();
+		if (opacityValue !== undefined) {
+			styles.push(`--icon-opacity: ${opacityValue};`);
+			styles.push(`opacity: ${opacityValue};`);
+		} else {
+			styles.push(`--icon-opacity: 1;`);
+		}
+		if (style) {
+			styles.push(style);
+		}
+		return styles.join(' ');
+	});
+
+	function handleClick() {
+		if (action) {
+			action();
+		}
+	}
+</script>
+
+{#if IconComponent}
+	{@const Component = IconComponent as any}
+	<div
+		class="icon-wrapper"
+		class:icon-clickable={action !== undefined}
+		style={combinedStyles()}
+		onclick={action ? handleClick : undefined}
+		role={action ? 'button' : undefined}
+		onkeydown={(e) => {
+			if (action && (e.key === 'Enter' || e.key === ' ')) {
+				e.preventDefault();
+				handleClick();
+			}
+		}}
+	>
+		<div class="icon-fallback">
+			<Component />
+		</div>
+	</div>
+{:else}
+	<span class="icon-error">Icon "{name}" tidak ditemukan</span>
+{/if}
+
+<style>
+	.icon-wrapper {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--icon-width, auto);
+		height: var(--icon-height, auto);
+		color: var(--icon-color, currentColor);
+	}
+
+	.icon-wrapper.icon-clickable {
+		cursor: pointer;
+		transition: opacity 0.2s ease, transform 0.2s ease;
+	}
+
+	.icon-wrapper.icon-clickable:hover {
+		opacity: calc(var(--icon-opacity, 1) * 0.8);
+	}
+
+	.icon-wrapper.icon-clickable:active {
+		transform: scale(0.95);
+	}
+
+	.icon-fallback {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.icon-fallback :global(svg) {
+		width: var(--icon-width, auto);
+		height: var(--icon-height, auto);
+		color: var(--icon-color, currentColor);
+	}
+
+	.icon-error {
+		color: red;
+		font-size: 12px;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { TIconName } from '../../icons/index.js';
+interface IconProps {
+    name: TIconName;
+    width?: number | string;
+    height?: number | string;
+    color?: string;
+    style?: string;
+    action?: () => void;
+    opacity?: number;
+}
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/Icon/IconLibrary.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import { iconMap } from '../../icons/index.js';
+
+	const {
+		iconWidth = 24,
+		iconHeight = 24,
+		iconColor = '#212529',
+		style,
+		opacity,
+		action
+	} = $props<{
+		iconWidth?: number | string;
+		iconHeight?: number | string;
+		iconColor?: string;
+		style?: string;
+		opacity?: number;
+		action?: (iconName: string) => void;
+	}>();
+
+	// Daftar semua icon - otomatis dari iconMap
+	const icons = Object.entries(iconMap).map(([name, component]) => ({
+		name,
+		component
+	}));
+
+	let searchQuery = $state('');
+
+	let filteredIcons = $derived(
+		searchQuery.trim() === ''
+			? icons
+			: icons.filter((icon) => {
+					const query = searchQuery.toLowerCase();
+					return icon.name.toLowerCase().includes(query);
+				})
+	);
+
+	const iconOpacity = $derived(() => {
+		if (opacity === undefined) return undefined;
+		const clamped = Math.max(0, Math.min(100, opacity));
+		return clamped / 100;
+	});
+
+	const combinedStyles = $derived(() => {
+		const styles: string[] = [];
+		const opacityValue = iconOpacity();
+		if (opacityValue !== undefined) {
+			styles.push(`--icon-opacity: ${opacityValue};`);
+			styles.push(`opacity: ${opacityValue};`);
+		} else {
+			styles.push(`--icon-opacity: 1;`);
+		}
+		if (style) {
+			styles.push(style);
+		}
+		return styles.join(' ');
+	});
+
+	function handleIconClick(iconName: string) {
+		if (action) {
+			action(iconName);
+		}
+	}
+</script>
+
+<div class="icons-container">
+	<div class="search-container">
+		<input type="text" placeholder="Cari icon..." bind:value={searchQuery} class="search-input" />
+		<div class="search-info">
+			Menampilkan {filteredIcons.length} dari {icons.length} icon
+		</div>
+	</div>
+
+	<div
+		class="icons-grid"
+		style="--icon-width: {iconWidth}px; --icon-height: {iconHeight}px; --icon-color: {iconColor};"
+	>
+		{#each filteredIcons as icon}
+			{@const IconComponent = icon.component as any}
+			<div
+				class="icon-item"
+				class:icon-clickable={action !== undefined}
+				style={combinedStyles()}
+				onclick={action ? () => handleIconClick(icon.name) : undefined}
+				role={action ? 'button' : undefined}
+				onkeydown={(e) => {
+					if (action && (e.key === 'Enter' || e.key === ' ')) {
+						e.preventDefault();
+						handleIconClick(icon.name);
+					}
+				}}
+			>
+				<div class="icon-wrapper">
+					<IconComponent />
+				</div>
+				<div class="icon-name">{icon.name}</div>
+			</div>
+		{/each}
+	</div>
+
+	{#if filteredIcons.length === 0}
+		<div class="no-results">
+			<p>Tidak ada icon yang ditemukan untuk "{searchQuery}"</p>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.icons-container {
+		padding: 24px;
+		max-width: 1400px;
+		margin: 0 auto;
+	}
+
+	.search-container {
+		margin-bottom: 32px;
+	}
+
+	.search-input {
+		width: 100%;
+		max-width: 500px;
+		padding: 12px 16px;
+		font-size: 16px;
+		border: 1px solid #e0e0e0;
+		outline: none;
+		transition: border-color 0.2s ease;
+	}
+
+	.search-input:focus {
+		border-color: #007bff;
+	}
+
+	.search-info {
+		margin-top: 8px;
+		color: #666;
+		font-size: 14px;
+	}
+
+	.icons-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+	}
+
+	.icon-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 16px 8px;
+		border: 1px solid #e0e0e0;
+		transition: all 0.2s ease;
+		cursor: pointer;
+	}
+
+	.icon-item:hover {
+		background: #f8f9fa;
+	}
+
+	.icon-item.icon-clickable {
+		cursor: pointer;
+		transition: opacity 0.2s ease, transform 0.2s ease;
+	}
+
+	.icon-item.icon-clickable:hover {
+		opacity: calc(var(--icon-opacity, 1) * 0.8);
+	}
+
+	.icon-item.icon-clickable:active {
+		transform: scale(0.95);
+	}
+
+	.icon-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--icon-width, 24px);
+		height: var(--icon-height, 24px);
+		margin-bottom: 8px;
+		color: var(--icon-color, #212529);
+	}
+
+	.icon-name {
+		font-weight: 500;
+		font-size: 12px;
+		color: #212529;
+		text-align: center;
+		word-break: break-word;
+	}
+
+	.no-results {
+		text-align: center;
+		padding: 48px;
+		color: #999;
+	}
+
+	.no-results p {
+		font-size: 16px;
+	}
+</style>

package/dist/components/Icon/IconLibrary.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    iconWidth?: number | string;
+    iconHeight?: number | string;
+    iconColor?: string;
+    style?: string;
+    opacity?: number;
+    action?: (iconName: string) => void;
+};
+declare const IconLibrary: import("svelte").Component<$$ComponentProps, {}, "">;
+type IconLibrary = ReturnType<typeof IconLibrary>;
+export default IconLibrary;

package/dist/icons/BsActivity.svelte

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2C6.10276 2.00004 6.20301 2.03175 6.2871 2.09079C6.3712 2.14984 6.43506 2.23336 6.47 2.33L10 12.036L11.53 7.828C11.5653 7.73174 11.6293 7.64864 11.7133 7.58997C11.7974 7.5313 11.8975 7.49989 12 7.5H15.5C15.6326 7.5 15.7598 7.55268 15.8536 7.64645C15.9473 7.74021 16 7.86739 16 8C16 8.13261 15.9473 8.25979 15.8536 8.35355C15.7598 8.44732 15.6326 8.5 15.5 8.5H12.35L10.47 13.67C10.435 13.7665 10.3711 13.8499 10.287 13.9089C10.2029 13.9678 10.1027 13.9994 10 13.9994C9.89731 13.9994 9.79712 13.9678 9.71303 13.9089C9.62894 13.8499 9.56503 13.7665 9.53 13.67L6 3.964L4.47 8.171C4.4349 8.26745 4.37096 8.35076 4.28688 8.40962C4.2028 8.46847 4.10264 8.50003 4 8.5H0.5C0.367392 8.5 0.240215 8.44732 0.146447 8.35355C0.0526784 8.25979 0 8.13261 0 8C0 7.86739 0.0526784 7.74021 0.146447 7.64645C0.240215 7.55268 0.367392 7.5 0.5 7.5H3.65L5.53 2.33C5.56494 2.23336 5.6288 2.14984 5.7129 2.09079C5.79699 2.03175 5.89724 2.00004 6 2Z" fill="currentColor"/>
+</svg>

package/dist/icons/BsActivity.svelte.d.ts

@@ -0,0 +1,26 @@
+export default BsActivity;
+type BsActivity = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const BsActivity: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/BsArrow90degLeft.svelte

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.14592 4.85414C1.09935 4.8077 1.06241 4.75252 1.0372 4.69178C1.012 4.63103 0.999023 4.56591 0.999023 4.50014C0.999023 4.43438 1.012 4.36926 1.0372 4.30851C1.06241 4.24776 1.09935 4.19259 1.14592 4.14614L5.14592 0.146143C5.2398 0.0522567 5.36714 -0.000488281 5.49992 -0.000488281C5.63269 -0.000488281 5.76003 0.0522567 5.85392 0.146143C5.9478 0.24003 6.00055 0.367368 6.00055 0.500143C6.00055 0.632919 5.9478 0.760257 5.85392 0.854143L2.70692 4.00014H12.4999C13.163 4.00014 13.7988 4.26354 14.2677 4.73238C14.7365 5.20122 14.9999 5.8371 14.9999 6.50014V14.5001C14.9999 14.6328 14.9472 14.7599 14.8535 14.8537C14.7597 14.9475 14.6325 15.0001 14.4999 15.0001C14.3673 15.0001 14.2401 14.9475 14.1464 14.8537C14.0526 14.7599 13.9999 14.6328 13.9999 14.5001V6.50014C13.9999 6.10232 13.8419 5.72079 13.5606 5.43948C13.2793 5.15818 12.8977 5.00014 12.4999 5.00014H2.70692L5.85392 8.14614C5.9004 8.19263 5.93728 8.24782 5.96244 8.30856C5.9876 8.3693 6.00055 8.4344 6.00055 8.50014C6.00055 8.56589 5.9876 8.63099 5.96244 8.69173C5.93728 8.75247 5.9004 8.80766 5.85392 8.85414C5.80743 8.90063 5.75224 8.93751 5.6915 8.96267C5.63076 8.98783 5.56566 9.00077 5.49992 9.00077C5.43417 9.00077 5.36907 8.98783 5.30833 8.96267C5.24759 8.93751 5.1924 8.90063 5.14592 8.85414L1.14592 4.85414Z" fill="currentColor"/>
+
+
+</svg>