mertani-web-toolkit 0.1.33 → 0.1.34

package/dist/components/Button/Button.svelte

@@ -2,8 +2,9 @@
 	import './button.css';
 	import { Icon } from '../../index.js';
 	import type { TIconName } from '../../icons/index.js';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
 
-	interface Props {
+	interface Props extends Omit<HTMLButtonAttributes, 'type'> {
 		// ===Styles===
 		type?: 'solid' | 'outline';
 		size?: 48 | 40 | 32;
@@ -28,7 +29,7 @@
 		// Additional Actions
 		isLoading?: boolean;
 		isShow?: boolean;
-		isDisabled?: boolean;
+		disabled?: boolean;
 		tooltip?: string;
 
 		// Any
@@ -57,7 +58,7 @@
 		// Additional Actions
 		isLoading = false,
 		isShow = true,
-		isDisabled = false,
+		disabled = false,
 		tooltip = '',
 
 		class: className = '',
@@ -140,7 +141,7 @@
 			classes.push('btn-loading');
 		}
 
-		if (isDisabled) {
+		if (disabled) {
 			classes.push('btn-disabled');
 		}
 
@@ -152,13 +153,13 @@
 	});
 
 	function handleClick() {
-		if (!isDisabled && !isLoading && onclick) {
+		if (!disabled && !isLoading && onclick) {
 			onclick();
 		}
 	}
 
 	function handleMouseEnter() {
-		if (!isDisabled && !isLoading && onmouseenter) {
+		if (!disabled && !isLoading && onmouseenter) {
 			onmouseenter();
 		}
 	}
@@ -169,7 +170,7 @@
 		type="button"
 		class={buttonClasses()}
 		style={buttonStyles()}
-		disabled={isDisabled || isLoading}
+		disabled={disabled || isLoading}
 		onclick={handleClick}
 		onmouseenter={handleMouseEnter}
 		title={tooltip || ''}

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

@@ -1,6 +1,7 @@
 import './button.css';
 import type { TIconName } from '../../icons/index.js';
-interface Props {
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLButtonAttributes, 'type'> {
     type?: 'solid' | 'outline';
     size?: 48 | 40 | 32;
     backgroundColor?: string;
@@ -17,7 +18,7 @@ interface Props {
     onmouseenter?: () => void;
     isLoading?: boolean;
     isShow?: boolean;
-    isDisabled?: boolean;
+    disabled?: boolean;
     tooltip?: string;
     class?: string;
     style?: string;

package/dist/components/inputs/SelectInput/SelectInput.css

@@ -0,0 +1,171 @@
+.select-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.select-container.select-side {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.select-label {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-text-primary);
+  margin-bottom: 8px;
+  display: block;
+}
+
+.select-container.select-side .select-label {
+  margin-bottom: 0;
+  min-width: 120px;
+}
+
+.select-label.label-left {
+  text-align: left;
+}
+
+.select-label.label-right {
+  text-align: right;
+}
+
+.label-required {
+  color: var(--color-text-error-ti);
+  margin-left: 4px;
+}
+
+.label-subLabel {
+  font-weight: 400;
+  color: var(--color-text-tertiary);
+  margin-left: 4px;
+}
+
+.select-trigger {
+  flex: 1;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-form);
+  padding: 0.625rem 1rem;
+  text-align: left;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.select-trigger:not(:disabled) {
+  background: var(--color-bg-surface);
+  cursor: pointer;
+}
+
+.select-trigger:not(:disabled):hover {
+  border-color: var(--color-border-form);
+}
+
+.select-trigger:not(:disabled):focus {
+  outline: none;
+  border-color: var(--color-bg-act-primary);
+  box-shadow: 0 0 0 2px var(--color-bg-act-primary) 40;
+}
+
+.select-trigger:disabled {
+  cursor: not-allowed;
+  background: var(--color-bg-disabled);
+}
+
+.select-trigger.error:not(:disabled) {
+  border-color: var(--color-text-error-ti);
+}
+
+.select-trigger.error:not(:disabled):focus {
+  border-color: var(--color-text-error-ti);
+  box-shadow: 0 0 0 2px var(--color-text-error-ti) 40;
+}
+
+.select-menu {
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: 20;
+  overflow: hidden;
+  border-radius: 6px;
+  background: var(--color-bg-surface);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.select-option {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-size: 14px;
+  transition: background-color 0.15s;
+  color: var(--color-text-primary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.select-option:hover:not(.selected) {
+  background: var(--color-bg-disabled);
+}
+
+.select-option.selected {
+  color: var(--color-bg-act-primary);
+}
+
+.select-empty {
+  padding: 0.5rem 0.75rem;
+  font-size: 12px;
+  color: var(--color-text-tertiary);
+}
+
+.search-input {
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-form);
+  background: var(--color-bg-surface);
+  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
+  font-size: 14px;
+  color: var(--color-text-primary);
+}
+
+.search-input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.search-input:focus {
+  outline: none;
+}
+
+.search-icon {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  transform: translateY(-50%);
+  color: var(--color-text-tertiary);
+}
+
+.options-container {
+  max-height: 14rem;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+
+.error-message {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--color-text-error-ti);
+}