mertani-web-toolkit 0.1.24 → 0.1.26

package/dist/components/Button/button.css

@@ -8,6 +8,7 @@
 	font-weight: 500;
 	line-height: 1;
 	font-family: 'Inter', sans-serif;
+	box-shadow: 0px 2px 6px rgba(15,23,42,0.08);
 }
 .storybook-button:hover {
 	opacity: 0.8;
@@ -16,8 +17,8 @@
 	opacity: 0.6;
 }
 .storybook-button--primary {
-	background-color: var(--background-color, #f79b09);
-	border: 1px solid var(--border-color, var(--background-color, #f79b09));
+	background-color: var(--background-color, #ffa000);
+	border: 1px solid var(--border-color, var(--background-color, #ffa000));
 	color: var(--text-color, white);
 }
 .storybook-button--primary:disabled {
@@ -37,9 +38,9 @@
 	cursor: not-allowed;
 }
 .storybook-button--outline {
-	border: 1px solid var(--border-color, #f79b09);
+	border: 1px solid var(--border-color, #ffa000);
 	background-color: transparent;
-	color: var(--text-color, #f79b09);
+	color: var(--text-color, #ffa000);
 }
 .storybook-button--outline:disabled {
 	border: 1px solid #a3a6b7;

package/dist/components/Icon/Icon.svelte

@@ -8,11 +8,11 @@
 		height?: number | string;
 		color?: string;
 		style?: string;
-		action?: () => void;
+		onclick?: () => void;
 		opacity?: number;
 	}
 
-	const { name, width, height, color, style, action, opacity }: IconProps = $props();
+	const { name, width, height, color, style, onclick, opacity }: IconProps = $props();
 
 	const IconComponent = $derived(iconMap[name]);
 
@@ -49,8 +49,8 @@
 	});
 
 	function handleClick() {
-		if (action) {
-			action();
+		if (onclick) {
+			onclick();
 		}
 	}
 </script>
@@ -59,12 +59,12 @@
 	{@const Component = IconComponent as any}
 	<div
 		class="icon-wrapper"
-		class:icon-clickable={action !== undefined}
+		class:icon-clickable={onclick !== undefined}
 		style={combinedStyles()}
-		onclick={action ? handleClick : undefined}
-		role={action ? 'button' : undefined}
+		onclick={onclick ? handleClick : undefined}
+		role={onclick ? 'button' : undefined}
 		onkeydown={(e) => {
-			if (action && (e.key === 'Enter' || e.key === ' ')) {
+			if (onclick && (e.key === 'Enter' || e.key === ' ')) {
 				e.preventDefault();
 				handleClick();
 			}
@@ -90,7 +90,9 @@
 
 	.icon-wrapper.icon-clickable {
 		cursor: pointer;
-		transition: opacity 0.2s ease, transform 0.2s ease;
+		transition:
+			opacity 0.2s ease,
+			transform 0.2s ease;
 	}
 
 	.icon-wrapper.icon-clickable:hover {

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

@@ -5,7 +5,7 @@ interface IconProps {
     height?: number | string;
     color?: string;
     style?: string;
-    action?: () => void;
+    onclick?: () => void;
     opacity?: number;
 }
 declare const Icon: import("svelte").Component<IconProps, {}, "">;

package/dist/components/Icon/IconLibrary.svelte

@@ -7,14 +7,14 @@
 		iconColor = '#212529',
 		style,
 		opacity,
-		action
+		onclick
 	} = $props<{
 		iconWidth?: number | string;
 		iconHeight?: number | string;
 		iconColor?: string;
 		style?: string;
 		opacity?: number;
-		action?: (iconName: string) => void;
+		onclick?: (iconName: string) => void;
 	}>();
 
 	// Daftar semua icon - otomatis dari iconMap
@@ -56,8 +56,8 @@
 	});
 
 	function handleIconClick(iconName: string) {
-		if (action) {
-			action(iconName);
+		if (onclick) {
+			onclick(iconName);
 		}
 	}
 </script>
@@ -78,12 +78,12 @@
 			{@const IconComponent = icon.component as any}
 			<div
 				class="icon-item"
-				class:icon-clickable={action !== undefined}
+				class:icon-clickable={onclick !== undefined}
 				style={combinedStyles()}
-				onclick={action ? () => handleIconClick(icon.name) : undefined}
-				role={action ? 'button' : undefined}
+				onclick={onclick ? () => handleIconClick(icon.name) : undefined}
+				role={onclick ? 'button' : undefined}
 				onkeydown={(e) => {
-					if (action && (e.key === 'Enter' || e.key === ' ')) {
+					if (onclick && (e.key === 'Enter' || e.key === ' ')) {
 						e.preventDefault();
 						handleIconClick(icon.name);
 					}
@@ -156,7 +156,9 @@
 
 	.icon-item.icon-clickable {
 		cursor: pointer;
-		transition: opacity 0.2s ease, transform 0.2s ease;
+		transition:
+			opacity 0.2s ease,
+			transform 0.2s ease;
 	}
 
 	.icon-item.icon-clickable:hover {

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

@@ -4,7 +4,7 @@ type $$ComponentProps = {
     iconColor?: string;
     style?: string;
     opacity?: number;
-    action?: (iconName: string) => void;
+    onclick?: (iconName: string) => void;
 };
 declare const IconLibrary: import("svelte").Component<$$ComponentProps, {}, "">;
 type IconLibrary = ReturnType<typeof IconLibrary>;

package/dist/components/inputs/TextInput/TextInput.svelte

@@ -54,7 +54,7 @@
 
 		if (prefix || suffix) {
 			// Ketika ada prefix/suffix, border ada di wrapper
-			classes += ' border-0 rounded-none bg-transparent';
+			classes += ' border-0 rounded-l bg-transparent';
 
 			// Padding untuk input dengan prefix/suffix
 			if (prefix) {
@@ -127,7 +127,7 @@
 		<input
 			{type}
 			{id}
-			class={mergedClasses}
+			class="px-4 {mergedClasses}"
 			style={customStyle}
 			value={value as any}
 			{placeholder}

package/package.json

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