mertani-web-toolkit 0.1.20 → 0.1.22

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}` : '');
-</script>
-
-<button
-  type="button"
-  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-  {style}
-  {...props}
->
-  {label}
-</button>
+<script lang="ts">
+	import './button.css';
+	import { Icon } from '../../index.js';
+	import type { TIconName } from '../../types/Icon.ts';
+
+	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"
+	disabled={isButtonDisabled}
+	class={buttonClasses()}
+	style={buttonStyles()}
+	{...props}
+>
+	{#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.ts';
 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;
-}
-.storybook-button--primary {
-  background-color: #555ab9;
-  color: white;
-}
-.storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
-}
-.storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
-}
-.storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
-}
-.storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
-}
+.storybook-button {
+	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: 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 {
+	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: 6px 12px;
+	font-size: 14px;
+	border-radius: 6px;
+}
+.storybook-button--medium {
+	padding: 8px 16px;
+	font-size: 16px;
+	border-radius: 8px;
+}
+.storybook-button--large {
+	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/Header/Header.svelte

@@ -1,45 +1,45 @@
-<script lang="ts">
-	import Button from '../Button/Button.svelte';
-	import './header.css';
-
-	interface Props {
-		user?: { name: string };
-		onLogin?: () => void;
-		onLogout?: () => void;
-		onCreateAccount?: () => void;
-	}
-
-	const { user, onLogin, onLogout, onCreateAccount }: Props = $props();
-</script>
-
-<header>
-	<div class="storybook-header">
-		<div>
-			<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-				<g fill="none" fill-rule="evenodd">
-					<path
-						d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-						fill="#FFF"
-					/>
-					<path
-						d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-						fill="#555AB9"
-					/>
-					<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
-				</g>
-			</svg>
-			<h1>Acme</h1>
-		</div>
-		<div>
-			{#if user}
-				<span class="welcome">
-					Welcome, <b>{user.name}</b>!
-				</span>
-				<Button size="small" onclick={onLogout} label="Log out" />
-			{:else}
-				<Button size="small" onclick={onLogin} label="Log in" />
-				<Button primary size="small" onclick={onCreateAccount} label="Sign up" />
-			{/if}
-		</div>
-	</div>
-</header>
+<script lang="ts">
+	import Button from '../Button/Button.svelte';
+	import './header.css';
+
+	interface Props {
+		user?: { name: string };
+		onLogin?: () => void;
+		onLogout?: () => void;
+		onCreateAccount?: () => void;
+	}
+
+	const { user, onLogin, onLogout, onCreateAccount }: Props = $props();
+</script>
+
+<header>
+	<div class="storybook-header">
+		<div>
+			<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+				<g fill="none" fill-rule="evenodd">
+					<path
+						d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+						fill="#FFF"
+					/>
+					<path
+						d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+						fill="#555AB9"
+					/>
+					<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+				</g>
+			</svg>
+			<h1>Acme</h1>
+		</div>
+		<div>
+			{#if user}
+				<span class="welcome">
+					Welcome, <b>{user.name}</b>!
+				</span>
+				<Button size="small" onclick={onLogout} label="Log out" />
+			{:else}
+				<Button size="small" onclick={onLogin} label="Log in" />
+				<Button primary size="small" onclick={onCreateAccount} label="Sign up" />
+			{/if}
+		</div>
+	</div>
+</header>

package/dist/components/Header/header.css

@@ -1,32 +1,32 @@
-.storybook-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-.storybook-header svg {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header h1 {
-  display: inline-block;
-  vertical-align: top;
-  margin: 6px 0 6px 10px;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1;
-}
-
-.storybook-header button + button {
-  margin-left: 10px;
-}
-
-.storybook-header .welcome {
-  margin-right: 10px;
-  color: #333;
-  font-size: 14px;
-}
+.storybook-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 6px 0 6px 10px;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  margin-right: 10px;
+  color: #333;
+  font-size: 14px;
+}

package/dist/components/Icon/Icon.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import ChevronDown from '../../icons/ChevronDown.svelte';
+	import GearTwo from '../../icons/GearTwo.svelte';
+	import Logout from '../../icons/Logout.svelte';
+	import User from '../../icons/User.svelte';
+	import Window from '../../icons/Window.svelte';
+	import type { TIconName } from '../../types/Icon.ts';
+
+	interface IconProps {
+		name: TIconName;
+		width?: number | string;
+		height?: number | string;
+		color?: string;
+	}
+
+	const { name, width, height, color }: IconProps = $props();
+
+	const iconMap = {
+		ChevronDown,
+		GearTwo,
+		Logout,
+		User,
+		Window
+	} as const;
+
+	const IconComponent = $derived(iconMap[name as keyof typeof iconMap]);
+
+	const iconStyle = $derived(() => {
+		const styles: string[] = [];
+		if (width !== undefined)
+			styles.push(`width: ${typeof width === 'number' ? width + 'px' : width}`);
+		if (height !== undefined)
+			styles.push(`height: ${typeof height === 'number' ? height + 'px' : height}`);
+		if (color !== undefined) styles.push(`color: ${color}`);
+
+		return styles.join('; ');
+	});
+</script>
+
+{#if IconComponent}
+	{@const Component = IconComponent as any}
+	<div class="icon-wrapper" style={iconStyle()}>
+		<Component />
+	</div>
+{:else}
+	<span class="icon-error">Icon "{name}" tidak ditemukan</span>
+{/if}
+
+<style>
+	.icon-wrapper {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.icon-wrapper :global(svg) {
+		width: inherit;
+		height: inherit;
+		color: inherit;
+	}
+
+	.icon-wrapper :global(path),
+	.icon-wrapper :global(g path) {
+		fill: currentColor !important;
+		stroke: currentColor !important;
+	}
+
+	.icon-error {
+		color: red;
+		font-size: 12px;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { TIconName } from '../../types/Icon.ts';
+interface IconProps {
+    name: TIconName;
+    width?: number | string;
+    height?: number | string;
+    color?: string;
+}
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/icons/ChevronDown.svelte

@@ -1,14 +1,7 @@
-
 <script lang="ts">
 	type PresetDirection = 'down' | 'up' | 'left' | 'right';
 
-	const {
-		width = 12,
-		height = 8,
-		direction = 'down'
-	} = $props<{
-		width?: number | string;
-		height?: number | string;
+	const { direction = 'down' } = $props<{
 		direction?: PresetDirection | number | string;
 	}>();
 
@@ -44,8 +37,8 @@
 
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	{width}
-	{height}
+	width="12"
+	height="8"
 	viewBox="0 0 12 8"
 	fill="currentColor"
 	style={`transform: ${transform}; transform-origin: center; transition: transform 0.2s ease;`}

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

@@ -1,7 +1,5 @@
 type PresetDirection = 'down' | 'up' | 'left' | 'right';
 type $$ComponentProps = {
-    width?: number | string;
-    height?: number | string;
     direction?: PresetDirection | number | string;
 };
 declare const ChevronDown: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/icons/GearTwo.svelte

@@ -1,18 +1,26 @@
-<script lang="ts">
-	const { width = 16, height = 17, color = '#212529' } = $props();
-</script>
-
-<svg {width} {height} viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
+	width="16"
+	height="17"
+	viewBox="0 0 16 17"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
 	<g clip-path="url(#clip0_6267_47931)">
-		<rect width="16" height="16" transform="translate(0 0.5)" fill="white" fill-opacity="0.01" />
+		<rect
+			width="16"
+			height="16"
+			transform="translate(0 0.5)"
+			fill="currentColor"
+			fill-opacity="0.01"
+		/>
 		<path
 			d="M11.4194 1.5C11.5956 1.50006 11.7689 1.54723 11.9213 1.63574C12.0736 1.7242 12.2001 1.85099 12.2875 2.00391L15.7162 8.00391C15.8025 8.15491 15.848 8.3261 15.8481 8.5C15.8481 8.67397 15.8025 8.84503 15.7162 8.99609L12.2875 14.9961C12.2001 15.1491 12.0738 15.2767 11.9213 15.3652C11.7689 15.4537 11.5956 15.4999 11.4194 15.5H4.57953C4.40331 15.4999 4.22997 15.4537 4.07758 15.3652C3.92519 15.2767 3.79877 15.1491 3.71136 14.9961L0.28363 8.99609C0.197374 8.84505 0.151794 8.67394 0.151794 8.5C0.15183 8.3261 0.197373 8.15491 0.28363 8.00391L3.71136 2.00391C3.79872 1.85101 3.92533 1.72422 4.07758 1.63574C4.22997 1.54725 4.40331 1.50008 4.57953 1.5H11.4194ZM4.57953 2.5L1.15179 8.5L4.57953 14.5H11.4194L14.8481 8.5L11.4194 2.5H4.57953ZM7.6264 5.07422C8.08711 5.01559 8.55481 5.04987 9.00238 5.17383C9.45007 5.29785 9.86888 5.50944 10.2338 5.79688C10.5988 6.0844 10.9029 6.44234 11.1284 6.84863C11.5851 7.65204 11.7055 8.60324 11.4633 9.49512C11.2212 10.387 10.6367 11.1473 9.83636 11.6094C9.03607 12.0714 8.08526 12.198 7.19183 11.9619C6.29844 11.7257 5.53526 11.1458 5.06781 10.3486C4.82861 9.95028 4.67052 9.50771 4.60394 9.04785C4.5374 8.58808 4.56376 8.11968 4.68011 7.66992C4.7965 7.22008 5.0014 6.7976 5.28265 6.42773C5.56383 6.05806 5.91561 5.74791 6.31781 5.51562C6.72019 5.28326 7.16547 5.13294 7.6264 5.07422ZM8.73871 6.19336C8.10166 6.02041 7.42195 6.10738 6.84808 6.43359C6.56147 6.59655 6.30985 6.81463 6.10785 7.0752C5.90593 7.33569 5.75673 7.63311 5.67035 7.95117C5.58397 8.26934 5.56145 8.60178 5.60394 8.92871C5.64644 9.25566 5.75354 9.57092 5.9184 9.85645C6.08325 10.142 6.30298 10.3925 6.56488 10.5928C6.82672 10.7929 7.12613 10.9392 7.44476 11.0234C7.76338 11.1076 8.09579 11.1277 8.4223 11.083C8.74882 11.0383 9.06377 10.9304 9.34808 10.7637C9.91754 10.4298 10.3317 9.88331 10.5004 9.24512C10.669 8.60701 10.5785 7.92804 10.2485 7.35645C9.91843 6.7848 9.37571 6.36637 8.73871 6.19336Z"
-			fill={color}
+			fill="currentColor"
 		/>
 	</g>
 	<defs>
 		<clipPath id="clip0_6267_47931">
-			<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />
+			<rect width="16" height="16" fill="currentColor" transform="translate(0 0.5)" />
 		</clipPath>
 	</defs>
 </svg>

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

@@ -1,7 +1,26 @@
-declare const GearTwo: import("svelte").Component<{
-    width?: number;
-    height?: number;
-    color?: string;
-}, {}, "">;
-type GearTwo = ReturnType<typeof GearTwo>;
 export default GearTwo;
+type GearTwo = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const GearTwo: $$__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/Logout.svelte

@@ -1,3 +1,15 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H6M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6" stroke="#3F4047" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg
+	width="16"
+	height="16"
+	viewBox="0 0 16 16"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M6 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H6M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>