mertani-web-toolkit 0.1.37 → 0.1.38

package/README.md

@@ -1,60 +1,60 @@
-# Svelte library
-
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
-
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-📘 **Documentation:** [storybook.mertani.com](https://storybook.mertani.com/)
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```sh
-npm pack
-```
-
-To create a production version of your showcase app:
-
-```sh
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```sh
-npm publish
-```
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+📘 **Documentation:** [storybook.mertani.com](https://storybook.mertani.com/)
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/components/Button/Button.svelte

@@ -1,198 +1,198 @@
-<script lang="ts">
-	import './button.css';
-	import { Icon } from '../../index.js';
-	import type { TIconName } from '../../icons/index.js';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-
-	interface Props extends Omit<HTMLButtonAttributes, 'type'> {
-		// ===Styles===
-		type?: 'solid' | 'outline';
-		size?: 48 | 40 | 32;
-		backgroundColor?: string;
-		textColor?: string;
-		borderColor?: string;
-		loaderColor?: string;
-		icon?: TIconName;
-		iconColor?: string;
-		iconPosition?: 'left' | 'right';
-		borderRadius?: number;
-		boxShadow?: string;
-
-		// ===Properties===
-		// Data
-		label?: string;
-
-		// Events
-		onclick?: () => void;
-		onmouseenter?: () => void;
-
-		// Additional Actions
-		isLoading?: boolean;
-		isShow?: boolean;
-		disabled?: boolean;
-		tooltip?: string;
-
-		// Any
-		class?: string;
-		style?: string;
-	}
-
-	const {
-		// ===Styles===
-		type = 'solid',
-		size = 40,
-		backgroundColor = 'var(--color-bg-act-primary)',
-		textColor = '',
-		borderColor = 'var(--color-bg-act-primary)',
-		loaderColor = '',
-		icon,
-		iconColor = '',
-		iconPosition = 'right',
-		borderRadius,
-		boxShadow = '',
-
-		// ===Properties===
-		// Data
-		label = 'Button',
-
-		// Additional Actions
-		isLoading = false,
-		isShow = true,
-		disabled = false,
-		tooltip = '',
-
-		class: className = '',
-		style: customStyle = '',
-		onclick,
-		onmouseenter,
-		...props
-	}: Props = $props();
-
-	// Size mapping untuk height dan padding
-	const sizeConfig = $derived(() => {
-		switch (size) {
-			case 48:
-				return { height: '48px', padding: '10px 24px', fontSize: '18px', borderRadius: '8px' };
-			case 40:
-				return { height: '40px', padding: '8px 16px', fontSize: '16px', borderRadius: '8px' };
-			case 32:
-				return { height: '32px', padding: '6px 12px', fontSize: '14px', borderRadius: '6px' };
-			default:
-				return { height: '40px', padding: '8px 16px', fontSize: '16px', borderRadius: '8px' };
-		}
-	});
-
-	// Computed styles
-	const buttonStyles = $derived(() => {
-		const styles: string[] = [];
-
-		// Size styles
-		styles.push(`height: ${sizeConfig().height};`);
-		styles.push(`padding: ${sizeConfig().padding};`);
-		styles.push(`font-size: ${sizeConfig().fontSize};`);
-		styles.push(`border-radius: ${sizeConfig().borderRadius};`);
-
-		if (borderRadius) {
-			styles.push(`border-radius: ${borderRadius}px;`);
-		}
-
-		if (type === 'solid') {
-			if (backgroundColor) {
-				styles.push(`--btn-background-color: ${backgroundColor};`);
-				styles.push(`--hover-btn-background-color: ${backgroundColor};`);
-				styles.push(`--active-btn-background-color: ${backgroundColor};`);
-			}
-			if (textColor) {
-				styles.push(`--btn-color: ${textColor};`);
-			}
-			if (borderColor) {
-				styles.push(`--btn-border-color: ${borderColor};`);
-			}
-		} else if (type === 'outline') {
-			if (backgroundColor) {
-				styles.push(`--btn-background-color: transparent;`);
-				styles.push(`--hover-btn-background-color: ${backgroundColor};`);
-			}
-			if (textColor) {
-				styles.push(`--btn-color: ${textColor};`);
-			}
-			if (borderColor) {
-				styles.push(`--btn-border-color: ${borderColor};`);
-			} else if (textColor) {
-				styles.push(`--btn-border-color: ${textColor};`);
-			}
-		}
-
-		if (boxShadow) {
-			styles.push(`box-shadow: ${boxShadow};`);
-		}
-
-		if (customStyle) {
-			styles.push(customStyle);
-		}
-
-		return styles.join(' ');
-	});
-
-	const buttonClasses = $derived(() => {
-		const classes = ['btn', `btn-${type}`, `hover:bg-[${backgroundColor}]`];
-
-		if (isLoading) {
-			classes.push('btn-loading');
-		}
-
-		if (disabled) {
-			classes.push('btn-disabled');
-		}
-
-		if (className) {
-			classes.push(className);
-		}
-
-		return classes.join(' ');
-	});
-
-	function handleClick() {
-		if (!disabled && !isLoading && onclick) {
-			onclick();
-		}
-	}
-
-	function handleMouseEnter() {
-		if (!disabled && !isLoading && onmouseenter) {
-			onmouseenter();
-		}
-	}
-</script>
-
-{#if isShow}
-	<button
-		type="button"
-		class={buttonClasses()}
-		style={buttonStyles()}
-		disabled={disabled || isLoading}
-		onclick={handleClick}
-		onmouseenter={handleMouseEnter}
-		title={tooltip || ''}
-		{...props}
-	>
-		{#if isLoading}
-			<span
-				class="btn-loader"
-				style={loaderColor
-					? `border-top-color: ${loaderColor}; border-right-color: ${loaderColor};`
-					: ''}
-			></span>
-		{:else if icon && iconPosition === 'left'}
-			<Icon name={icon} color={iconColor || 'currentColor'} width={16} height={16} />
-		{/if}
-
-		{#if label}
-			<span class="btn-label">{label}</span>
-		{/if}
-
-		{#if !isLoading && icon && iconPosition === 'right'}
-			<Icon name={icon} color={iconColor || 'currentColor'} width={16} height={16} />
-		{/if}
-	</button>
-{/if}
+<script lang="ts">
+	import './button.css';
+	import { Icon } from '../../index.js';
+	import type { TIconName } from '../../icons/index.js';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'type'> {
+		// ===Styles===
+		type?: 'solid' | 'outline';
+		size?: 48 | 40 | 32;
+		backgroundColor?: string;
+		textColor?: string;
+		borderColor?: string;
+		loaderColor?: string;
+		icon?: TIconName;
+		iconColor?: string;
+		iconPosition?: 'left' | 'right';
+		borderRadius?: number;
+		boxShadow?: string;
+
+		// ===Properties===
+		// Data
+		label?: string;
+
+		// Events
+		onclick?: () => void;
+		onmouseenter?: () => void;
+
+		// Additional Actions
+		isLoading?: boolean;
+		isShow?: boolean;
+		disabled?: boolean;
+		tooltip?: string;
+
+		// Any
+		class?: string;
+		style?: string;
+	}
+
+	const {
+		// ===Styles===
+		type = 'solid',
+		size = 40,
+		backgroundColor = 'var(--color-bg-act-primary)',
+		textColor = '',
+		borderColor = 'var(--color-bg-act-primary)',
+		loaderColor = '',
+		icon,
+		iconColor = '',
+		iconPosition = 'right',
+		borderRadius,
+		boxShadow = '',
+
+		// ===Properties===
+		// Data
+		label = 'Button',
+
+		// Additional Actions
+		isLoading = false,
+		isShow = true,
+		disabled = false,
+		tooltip = '',
+
+		class: className = '',
+		style: customStyle = '',
+		onclick,
+		onmouseenter,
+		...props
+	}: Props = $props();
+
+	// Size mapping untuk height dan padding
+	const sizeConfig = $derived(() => {
+		switch (size) {
+			case 48:
+				return { height: '48px', padding: '10px 24px', fontSize: '18px', borderRadius: '8px' };
+			case 40:
+				return { height: '40px', padding: '8px 16px', fontSize: '16px', borderRadius: '8px' };
+			case 32:
+				return { height: '32px', padding: '6px 12px', fontSize: '14px', borderRadius: '6px' };
+			default:
+				return { height: '40px', padding: '8px 16px', fontSize: '16px', borderRadius: '8px' };
+		}
+	});
+
+	// Computed styles
+	const buttonStyles = $derived(() => {
+		const styles: string[] = [];
+
+		// Size styles
+		styles.push(`height: ${sizeConfig().height};`);
+		styles.push(`padding: ${sizeConfig().padding};`);
+		styles.push(`font-size: ${sizeConfig().fontSize};`);
+		styles.push(`border-radius: ${sizeConfig().borderRadius};`);
+
+		if (borderRadius) {
+			styles.push(`border-radius: ${borderRadius}px;`);
+		}
+
+		if (type === 'solid') {
+			if (backgroundColor) {
+				styles.push(`--btn-background-color: ${backgroundColor};`);
+				styles.push(`--hover-btn-background-color: ${backgroundColor};`);
+				styles.push(`--active-btn-background-color: ${backgroundColor};`);
+			}
+			if (textColor) {
+				styles.push(`--btn-color: ${textColor};`);
+			}
+			if (borderColor) {
+				styles.push(`--btn-border-color: ${borderColor};`);
+			}
+		} else if (type === 'outline') {
+			if (backgroundColor) {
+				styles.push(`--btn-background-color: transparent;`);
+				styles.push(`--hover-btn-background-color: ${backgroundColor};`);
+			}
+			if (textColor) {
+				styles.push(`--btn-color: ${textColor};`);
+			}
+			if (borderColor) {
+				styles.push(`--btn-border-color: ${borderColor};`);
+			} else if (textColor) {
+				styles.push(`--btn-border-color: ${textColor};`);
+			}
+		}
+
+		if (boxShadow) {
+			styles.push(`box-shadow: ${boxShadow};`);
+		}
+
+		if (customStyle) {
+			styles.push(customStyle);
+		}
+
+		return styles.join(' ');
+	});
+
+	const buttonClasses = $derived(() => {
+		const classes = ['btn', `btn-${type}`, `hover:bg-[${backgroundColor}]`];
+
+		if (isLoading) {
+			classes.push('btn-loading');
+		}
+
+		if (disabled) {
+			classes.push('btn-disabled');
+		}
+
+		if (className) {
+			classes.push(className);
+		}
+
+		return classes.join(' ');
+	});
+
+	function handleClick() {
+		if (!disabled && !isLoading && onclick) {
+			onclick();
+		}
+	}
+
+	function handleMouseEnter() {
+		if (!disabled && !isLoading && onmouseenter) {
+			onmouseenter();
+		}
+	}
+</script>
+
+{#if isShow}
+	<button
+		type="button"
+		class={buttonClasses()}
+		style={buttonStyles()}
+		disabled={disabled || isLoading}
+		onclick={handleClick}
+		onmouseenter={handleMouseEnter}
+		title={tooltip || ''}
+		{...props}
+	>
+		{#if isLoading}
+			<span
+				class="btn-loader"
+				style={loaderColor
+					? `border-top-color: ${loaderColor}; border-right-color: ${loaderColor};`
+					: ''}
+			></span>
+		{:else if icon && iconPosition === 'left'}
+			<Icon name={icon} color={iconColor || 'currentColor'} width={16} height={16} />
+		{/if}
+
+		{#if label}
+			<span class="btn-label">{label}</span>
+		{/if}
+
+		{#if !isLoading && icon && iconPosition === 'right'}
+			<Icon name={icon} color={iconColor || 'currentColor'} width={16} height={16} />
+		{/if}
+	</button>
+{/if}