@cloudparker/moldex.js 4.1.2 → 4.1.4

package/dist/views/core/button/components/button-back/button-back.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { isSmallScreen } from '../../../../../services';
-	import { mdiArrowLeft } from '../../../icon';
+	import { isSmallScreen } from '../../../../../services/index.js';
+	import { mdiArrowLeft } from '../../../icon/index.js';
+
 	import Button from '../button/button.svelte';
 
 	type PropsType = {
@@ -21,11 +22,7 @@
 		onClick
 	}: PropsType = $props();
 
-	let isMobileScreen = $state(false);
-
-	$effect(() => {
-		isMobileScreen = isSmallScreen();
-	});
+	let isMobileScreen = $derived(isSmallScreen() || false);
 </script>
 
 {#snippet button()}

package/dist/views/core/button/components/button-close-icon/button-close-icon.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import { isSmallScreen } from '../../../../../services';
-	import { mdiArrowLeft, mdiChevronRight, mdiClose } from '../../../icon';
+	import { isSmallScreen } from '../../../../../services/index.js';
+	import { mdiClose } from '../../../icon/index.js';
+
+ 
 	import Button from '../button/button.svelte';
 
 	type PropsType = {
@@ -22,11 +24,8 @@
 		onClick
 	}: PropsType = $props();
 
-	let isMobileScreen = $state(false);
+	let isMobileScreen = $state(isSmallScreen() || false);
 
-	$effect(() => {
-		isMobileScreen = isSmallScreen();
-	});
 </script>
 
 {#snippet button()}

package/dist/views/core/icon/components/icon/icon.svelte

@@ -19,11 +19,9 @@
 		sizeClassName = 'w-6 h-6'
 	}: IconPropsType = $props();
 
-	$effect(() => {
-		viewBox = viewBox || `0 0 ${size} ${size}`;
-	});
+	let viewBoxDerived = $derived(viewBox || `0 0 ${size} ${size}`);
 </script>
 
-<svg class="align-middle {sizeClassName} {className}" {viewBox} fill={color || fill}>
+<svg class="align-middle {sizeClassName} {className}" viewBox={viewBoxDerived} fill={color || fill}>
 	<path d={path} />
 </svg>

package/dist/views/core/input/components/color-field/color-field.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { ripple } from '../../../../../actions';
-	import { colorToHex, isValidHexColor } from '../../../../../services';
-	import { mdiSquare } from '../../../icon';
+	import { ripple } from '../../../../../actions/ripple.js';
+	import { colorToHex, isValidHexColor } from '../../../../../services/index.js';
+
+ 
 	import Icon from '../../../icon/components/icon/icon.svelte';
+	import { mdiSquare } from '../../../icon/index.js';
 	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
 
 	let {
@@ -15,9 +17,41 @@
 	}: InputFieldProps & { value?: string } = $props();
 
 	let colorRef: HTMLInputElement;
-	let btnIconSizeClassName: string = $state('');
-	let btnRoundedClassName: string = $state('');
-	let colorValue: string = $state('#000000');
+
+	let btnIconSizeClassName: string = $derived.by(() => {
+		let className = '';
+		if (size) {
+			switch (size) {
+				case 'lg':
+					className = '!h-7 !w-7';
+					break;
+				case 'md':
+					className = '!h-6 !w-6';
+					break;
+				case 'sm':
+					className = '!h-5 !w-5';
+					break;
+				case 'xs':
+					className = '!h-4 !w-4';
+					break;
+			}
+		}
+		return className;
+	});
+
+	let btnRoundedClassName: string = $derived.by(() => {
+		if (!appearance || appearance == 'normal') {
+			return 'rounded-tr-lg rounded-br-lg';
+		}
+		return '';
+	});
+
+	let colorValue: string = $derived.by(() => {
+		if (isValidHexColor(value)) {
+			colorValue = value;
+		}
+		return '#000000';
+	});
 
 	let inputRef: any | null = $state(null);
 
@@ -48,44 +82,18 @@
 
 	$effect(() => {
 		if (isValidHexColor(value)) {
-			colorValue = value;
 			if (colorRef) {
 				colorRef.value = colorToHex(value);
 			}
 		}
 	});
-
-	$effect(() => {
-		if (size) {
-			switch (size) {
-				case 'lg':
-					btnIconSizeClassName = '!h-7 !w-7';
-					break;
-				case 'md':
-					btnIconSizeClassName = '!h-6 !w-6';
-					break;
-				case 'sm':
-					btnIconSizeClassName = '!h-5 !w-5';
-					break;
-				case 'xs':
-					btnIconSizeClassName = '!h-4 !w-4';
-					break;
-			}
-		}
-	});
-
-	$effect(() => {
-		if (!appearance || appearance == 'normal') {
-			btnRoundedClassName = 'rounded-tr-lg rounded-br-lg';
-		}
-	});
 </script>
 
 {#snippet colorButton()}
 	<button
 		id="btn-color-picker-{name || id}"
 		type="button"
-		class="px-2 h-full hover:bg-neutral-100 dark:hover:bg-neutral-900 focus:outline-primary {btnRoundedClassName}"
+		class="h-full px-2 hover:bg-neutral-100 focus:outline-primary dark:hover:bg-neutral-900 {btnRoundedClassName}"
 		use:ripple
 		onclick={handleColorBtnClick}
 	>

package/dist/views/core/input/components/date-field/date-field.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { dateFormat, toDate } from '../../../../../services';
+	import { dateFormat, toDate } from '../../../../../services/index.js';
+
+ 
 	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
 
 	let {
@@ -7,15 +9,14 @@
 		...props
 	}: InputFieldProps & { value?: Date | string | number | null | undefined } = $props();
 
-	let _value: string | undefined = $state(undefined);
-
-	$effect(() => {
+	let _value: string | undefined = $derived.by(() => {
 		if (value) {
-			_value = dateFormat(toDate(value)!, 'YYYY-MM-DD') as string;
-			console.log('_value', _value);
+			return dateFormat(toDate(value)!, 'YYYY-MM-DD') as string;
 		}
 	});
 
+ 
+
 	let inputFieldRef: any | null = $state(null);
 
 	export function focus() {

package/dist/views/core/input/components/file-field/file-field.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { ripple } from '../../../../../actions';
-	import { openFilePickerDialog } from '../../../../../services';
-	import { mdiAttachment } from '../../../icon';
+	import { ripple } from '../../../../../actions/ripple.js';
+	import { openFilePickerDialog } from '../../../../../services/index.js';
+
+	 
 	import Icon from '../../../icon/components/icon/icon.svelte';
+	import { mdiAttachment } from '../../../icon/index.js';
 	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
 
 	let {
@@ -19,8 +21,33 @@
 		value?: File | File[] | null;
 	} = $props();
 
-	let btnRoundedClassName = $state('');
-	let btnIconSizeClassName = $state('');
+	let btnRoundedClassName = $derived.by(() => {
+		if (!appearance || appearance == 'normal') {
+			return 'rounded-tr-lg rounded-br-lg';
+		}
+		return '';
+	});
+
+	let btnIconSizeClassName = $derived.by(() => {
+		let className = '';
+		if (size) {
+			switch (size) {
+				case 'lg':
+					className = '!h-7 !w-7';
+					break;
+				case 'md':
+					className = '!h-6 !w-6';
+					break;
+				case 'sm':
+					className = '!h-5 !w-5';
+					break;
+				case 'xs':
+					className = '!h-4 !w-4';
+					break;
+			}
+		}
+		return className;
+	});
 	let fileNameDisplay = $state('');
 
 	let inputFieldRef: any | null = $state(null);
@@ -51,38 +78,13 @@
 			}
 		}
 	}
-
-	$effect(() => {
-		if (size) {
-			switch (size) {
-				case 'lg':
-					btnIconSizeClassName = '!h-7 !w-7';
-					break;
-				case 'md':
-					btnIconSizeClassName = '!h-6 !w-6';
-					break;
-				case 'sm':
-					btnIconSizeClassName = '!h-5 !w-5';
-					break;
-				case 'xs':
-					btnIconSizeClassName = '!h-4 !w-4';
-					break;
-			}
-		}
-	});
-
-	$effect(() => {
-		if (!appearance || appearance == 'normal') {
-			btnRoundedClassName = 'rounded-tr-lg rounded-br-lg';
-		}
-	});
 </script>
 
 {#snippet fileButton()}
 	<button
 		id="btn-file-picker"
 		type="button"
-		class="px-3 h-full hover:bg-gray-100 focus:outline-primary {btnRoundedClassName} "
+		class="h-full px-3 hover:bg-gray-100 focus:outline-primary {btnRoundedClassName} "
 		use:ripple
 		onclick={handleFileAttachment}
 	>

package/dist/views/core/input/components/input-field/input-field.svelte

@@ -141,123 +141,141 @@
 
 	let inputRef: HTMLInputElement | HTMLTextAreaElement | null = $state(null);
 
-	let sizeClassName = $state('');
-	let appearanceClassName = $state('');
-	let floatingLabelClassName = $state('');
-	let floatingLabelPaddingClassName = $state('');
-	let floatingLabelTextClassName = $state('');
+	let nameDerived = $derived(name || id);
+	let idDerived = $derived(id || name);
 
-	export function focus() {
-		inputRef && inputRef.focus();
-	}
-
-	export function getElement() {
-		return inputRef;
-	}
-
-	export function select() {
-		return inputRef && (inputRef as HTMLInputElement).select();
-	}
-
-	export function getBoundingClientRect() {
-		if (inputRef) {
-			return inputRef.getBoundingClientRect();
+	let containerClassNameDerived = $derived.by(() => {
+		if (floatingLabel || leftSnippet != null || rightSnippet != null) {
+			return (containerClassName || '') + ' relative';
 		}
-	}
+		return containerClassName;
+	});
 
-	$effect(() => {
-		if (floatingLabel || leftSnippet != null || rightSnippet != null) {
-			containerClassName = (containerClassName || '') + ' relative';
+	let sizeClassName = $derived.by(() => {
+		let sizeClassName = '';
+		if (size) {
+			switch (size) {
+				case 'lg':
+					sizeClassName = 'p-4 text-base';
+					break;
+				case 'md':
+					sizeClassName = 'p-2.5 text-sm';
+					break;
+				case 'sm':
+					sizeClassName = 'p-2 text-xs';
+					break;
+				case 'xs':
+					sizeClassName = 'p-1 text-xs';
+					break;
+			}
 		}
+		return sizeClassName;
 	});
 
-	$effect(() => {
+	let floatingLabelPaddingClassName = $derived.by(() => {
 		if (floatingLabel) {
 			if (size) {
-				let flpcn = '';
+				let floatingClassName = '';
 				switch (size) {
 					case 'lg':
-						flpcn = ` px-1 peer-focus:px-1 peer-placeholder-shown:px-4 `;
-						floatingLabelTextClassName = 'text-base';
+						floatingClassName = ` px-1 peer-focus:px-1 peer-placeholder-shown:px-4 `;
 						break;
 					case 'md':
-						flpcn = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2.5 ';
-						floatingLabelTextClassName = 'text-sm';
+						floatingClassName = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2.5 ';
+						break;
+					case 'sm':
+						floatingClassName = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2';
+						break;
+					case 'xs':
+						floatingClassName = ' px-0 peer-focus:px-0 peer-placeholder-shown:px-1 ';
+						break;
+				}
+				return floatingClassName;
+			}
+		}
+		return '';
+	});
 
+	let floatingLabelTextClassName = $derived.by(() => {
+		let className = '';
+		if (floatingLabel) {
+			if (size) {
+				switch (size) {
+					case 'lg':
+						className = 'text-base';
+						break;
+					case 'md':
+						className = 'text-sm';
 						break;
 					case 'sm':
-						flpcn = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2';
-						floatingLabelTextClassName = 'text-xs';
+						className = 'text-xs';
 						break;
 					case 'xs':
-						flpcn = ' px-0 peer-focus:px-0 peer-placeholder-shown:px-1 ';
-						floatingLabelTextClassName = 'text-xs';
+						className = 'text-xs';
 						break;
 				}
-				floatingLabelPaddingClassName = flpcn;
 			}
+		}
+		return className;
+	});
 
-			floatingLabelClassName = `absolute duration-300 transform top-0 rounded -translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-0 peer-placeholder-shown:start-0 peer-focus:start-1 bg-white peer-focus:bg-white dark:bg-neutral-700 peer-focus:bg-neutral-800 peer-placeholder-shown:bg-transparent  start-1 ${floatingLabelPaddingClassName} ${floatingLabelTextClassName}`;
+	let floatingLabelClassName = $derived.by(() => {
+		if (floatingLabel) {
+			return `absolute duration-300 transform top-0 rounded -translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-0 peer-placeholder-shown:start-0 peer-focus:start-1 bg-white peer-focus:bg-white dark:bg-neutral-700 peer-focus:bg-neutral-800 peer-placeholder-shown:bg-transparent  start-1 ${floatingLabelPaddingClassName} ${floatingLabelTextClassName}`;
 		}
+		return '';
 	});
 
-	$effect(() => {
+	let appearanceClassName = $derived.by(() => {
+		let className = '';
 		if (appearance) {
 			switch (appearance) {
 				case 'normal':
-					appearanceClassName =
+					className =
 						'border rounded-lg bg-neutral-100 dark:bg-neutral-700 border-neutral-300 dark:border-neutral-500 text-neutral-950 dark:text-neutral-50 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 focus:bg-neutral-50 dark:focus:bg-neutral-800 ';
 					break;
 				case 'box':
-					appearanceClassName =
+					className =
 						'border bg-neutral-100 dark:bg-neutral-700 border-neutral-300 dark:border-neutral-500 text-neutral-950 dark:text-neutral-50 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 focus:bg-neutral-50 dark:focus:bg-neutral-800 ';
 					break;
 				case 'fill':
-					appearanceClassName =
+					className =
 						' border-0 appearance-none  focus:ring-0 bg-neutral-100 dark:bg-neutral-700 text-neutral-950 dark:text-neutral-50 focus:bg-neutral-50 dark:focus:bg-neutral-800 ';
 					break;
 				case 'underline':
-					appearanceClassName =
+					className =
 						'bg-transparent border-0 border-b-2 appearance-none focus:ring-0 text-neutral-950 dark:text-neutral-50 border-neutral-300 dark:border-neutral-700 focus:border-primary-500 dark:focus:border-primary-500';
 					break;
 				case 'fill-underline':
-					appearanceClassName =
+					className =
 						'border-0 border-b-2 appearance-none ring-0 text-neutral-950 dark:text-neutral-50 bg-neutral-100 dark:bg-neutral-700 border-neutral-300 dark:border-neutral-500 focus:border-primary-500 dark:focus:border-primary-500 ';
 					break;
 				case 'none':
-					appearanceClassName =
+					className =
 						'border-0 focus:ring-0 appearance-none text-neutral-950 dark:text-neutral-50 bg-transparent dark:bg-transparent focus:bg-neutral-100 dark:focus:bg-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-800';
 					break;
 			}
 		}
+		return className;
 	});
 
-	$effect(() => {
-		if (size) {
-			switch (size) {
-				case 'lg':
-					sizeClassName = 'p-4 text-base';
-					break;
-				case 'md':
-					sizeClassName = 'p-2.5 text-sm';
-					break;
-				case 'sm':
-					sizeClassName = 'p-2 text-xs';
-					break;
-				case 'xs':
-					sizeClassName = 'p-1 text-xs';
-					break;
-			}
-		}
-	});
+	export function focus() {
+		inputRef && inputRef.focus();
+	}
 
-	$effect(() => {
-		if (name && !id) {
-			id = name;
-		} else if (id && !name) {
-			name = id;
+	export function getElement() {
+		return inputRef;
+	}
+
+	export function select() {
+		return inputRef && (inputRef as HTMLInputElement).select();
+	}
+
+	export function getBoundingClientRect() {
+		if (inputRef) {
+			return inputRef.getBoundingClientRect();
 		}
-	});
+	}
 
 	$effect(() => {
 		setTimeout(() => {
@@ -270,9 +288,9 @@
 
 {#snippet labelSnippet()}
 	<Label
-		forName={id}
+		forName={idDerived}
 		{label}
-		className=" {floatingLabel ? '' : 'mb-1 '} {floatingLabelClassName} {labelClassName}"
+		className=" {floatingLabel ? '' : 'mb-1 '} {floatingLabelClassName}  {labelClassName}"
 		{required}
 		{requiredSymbolColor}
 		{requiredSymbol}
@@ -284,10 +302,10 @@
 	{@render labelSnippet()}
 {/if}
 
-<div class="w-full {containerClassName}">
+<div class="w-full {containerClassNameDerived}">
 	{#if leftSnippet}
 		<div
-			class="absolute flex items-center justify-center left-children {leftSnippetContainerClassName}"
+			class="left-children absolute flex items-center justify-center {leftSnippetContainerClassName}"
 		>
 			{@render leftSnippet()}
 		</div>
@@ -297,10 +315,10 @@
 		<textarea
 			bind:this={inputRef}
 			bind:value
-			class="block w-full peer outline-none {appearanceClassName} {sizeClassName} {className}"
+			class="peer block w-full outline-none {appearanceClassName} {sizeClassName} {className}"
 			{title}
-			{id}
-			{name}
+			id={idDerived}
+			name={nameDerived}
 			{placeholder}
 			{required}
 			{disabled}
@@ -328,11 +346,11 @@
 		<input
 			bind:this={inputRef}
 			bind:value
-			class="block w-full peer outline-none {appearanceClassName} {sizeClassName} {className}"
+			class="peer block w-full outline-none {appearanceClassName} {sizeClassName} {className}"
 			{title}
 			{type}
-			{id}
-			{name}
+			id={idDerived}
+			name={nameDerived}
 			{placeholder}
 			{required}
 			{disabled}
@@ -365,14 +383,14 @@
 	{/if}
 	{#if contentSnippet}
 		<div
-			class="absolute inset-0 pointer-events-none block w-full overflow-hidden {appearanceClassName} {sizeClassName}   {contentSnippetClassName}"
+			class="pointer-events-none absolute inset-0 block w-full overflow-hidden {appearanceClassName} {sizeClassName}   {contentSnippetClassName}"
 		>
 			{@render contentSnippet()}
 		</div>
 	{/if}
 	{#if rightSnippet}
 		<div
-			class="absolute flex items-center justify-center right-children {rightSnippetContainerClassName}"
+			class="right-children absolute flex items-center justify-center {rightSnippetContainerClassName}"
 		>
 			{@render rightSnippet()}
 		</div>

package/dist/views/core/input/components/password-field/password-field.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-	import { ripple } from '../../../../../actions';
-	import { mdiEyeOffOutline, mdiEyeOutline } from '../../../icon';
+	import { ripple } from '../../../../../actions/ripple.js';
+
+ 
 	import Icon from '../../../icon/components/icon/icon.svelte';
+	import { mdiEyeOffOutline, mdiEyeOutline } from '../../../icon/index.js';
 	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
 
 	let {
@@ -19,8 +21,33 @@
 		iconClassName?: string;
 	} = $props();
 
-	let btnRoundedClassName = $state('');
-	let btnIconSizeClassName = $state('');
+	let btnRoundedClassName = $derived.by(() => {
+		if (!appearance || appearance == 'normal') {
+			return 'rounded-tr-lg rounded-br-lg';
+		}
+		return '';
+	});
+
+	let btnIconSizeClassName = $derived.by(() => {
+		let className = '';
+		if (size) {
+			switch (size) {
+				case 'lg':
+					className = '!h-7 !w-7';
+					break;
+				case 'md':
+					className = '!h-6 !w-6';
+					break;
+				case 'sm':
+					className = '!h-5 !w-5';
+					break;
+				case 'xs':
+					className = '!h-4 !w-4';
+					break;
+			}
+		}
+		return className;
+	});
 
 	let inputFieldRef: any | null = $state(null);
 
@@ -44,37 +71,14 @@
 		}
 	}
 
-	$effect(() => {
-		if (size) {
-			switch (size) {
-				case 'lg':
-					btnIconSizeClassName = '!h-7 !w-7';
-					break;
-				case 'md':
-					btnIconSizeClassName = '!h-6 !w-6';
-					break;
-				case 'sm':
-					btnIconSizeClassName = '!h-5 !w-5';
-					break;
-				case 'xs':
-					btnIconSizeClassName = '!h-4 !w-4';
-					break;
-			}
-		}
-	});
-
-	$effect(() => {
-		if (!appearance || appearance == 'normal') {
-			btnRoundedClassName = 'rounded-tr-lg rounded-br-lg';
-		}
-	});
+ 
 </script>
 
 {#snippet showPasswordButton()}
 	<button
 		id="btn-eye-{name || id}"
 		type="button"
-		class="px-3 h-full hover:bg-neutral-100 focus:outline-primary {btnRoundedClassName} {buttonClassName}"
+		class="h-full px-3 hover:bg-neutral-100 focus:outline-primary {btnRoundedClassName} {buttonClassName}"
 		use:ripple
 		onclick={handleTogglePassword}
 	>

package/dist/views/core/input/components/range-field/range-field.svelte

@@ -32,23 +32,23 @@
 		onfocus
 	}: RangeFieldPropsType = $props();
 
-	let rangeSizeClassName = $state('');
-
-	$effect(() => {
+	let rangeSizeClassName = $derived.by(() => {
+		let className = '';
 		switch (size) {
 			case 'lg':
-				rangeSizeClassName = 'h-3 ';
+				className = 'h-3 ';
 				break;
 			case 'md':
-				rangeSizeClassName = 'h-2 ';
+				className = 'h-2 ';
 				break;
 			case 'sm':
-				rangeSizeClassName = 'h-1 ';
+				className = 'h-1 ';
 				break;
 			case 'xs':
-				rangeSizeClassName = 'h-2-px ';
+				className = 'h-2-px ';
 				break;
 		}
+		return className;
 	});
 
 	let inputRef: HTMLInputElement | null = $state(null);
@@ -72,7 +72,7 @@
 	{id}
 	{name}
 	type="range"
-	class="range-slider w-full bg-gray-200 appearance-none cursor-pointer dark:bg-gray-700 rounded-lg range-lg outline-none focus:outline-none {rangeSizeClassName} {className}"
+	class="range-slider range-lg w-full cursor-pointer appearance-none rounded-lg bg-gray-200 outline-none focus:outline-none dark:bg-gray-700 {rangeSizeClassName} {className}"
 	{min}
 	{max}
 	{step}

package/dist/views/core/input/components/search-field/search-field.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { mdiMagnify } from '../../../icon';
+	 
 	import Icon from '../../../icon/components/icon/icon.svelte';
+	import { mdiMagnify } from '../../../icon/index.js';
 	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
 
 	let {

package/dist/views/core/no-data/components/no-data/no-data.svelte

@@ -29,11 +29,8 @@
 		right: 'flex-row-reverse'
 	};
 
-	let iconPlacementClassName: string = $state('');
-
-	$effect(() => {
-		iconPlacementClassName = iconPlacementClassNameMap[iconPlacement];
-	});
+	let iconPlacementClassName: string = $derived(iconPlacementClassNameMap[iconPlacement]);
+ 
 </script>
 
 <div

package/dist/views/core/progressbar/components/progressbar/progressbar.svelte

@@ -17,28 +17,23 @@
 		children
 	}: PropsType = $props();
 
-	let progressValue: number = $state(0);
-
-	$effect(() => {
-		if (!className) {
-			className = 'h-4';
-		}
-	});
-
-	$effect(() => {
+	let progressValue: number = $derived.by(() => {
+		let v = value;
 		if (value < 0) {
-			progressValue = 0;
+			v = 0;
 		} else if (value >= 100) {
-			progressValue = 100;
+			v = 100;
 		} else {
-			progressValue = value;
+			v = value;
 		}
+		return v;
 	});
+
 </script>
 
-<div class="w-full bg-gray-200 rounded-full progressbar-container {backgroundClassName}" style="">
+<div class="progressbar-container w-full rounded-full bg-gray-200 {backgroundClassName}" style="">
 	<div
-		class="bg-indigo-600 rounded-full transition-all ease-in-out text-center text-xs text-white progressbar {className}"
+		class="progressbar rounded-full bg-indigo-600 text-center text-xs text-white transition-all ease-in-out {className}"
 		style="--progressWidth:{progressValue}%;"
 	>
 		{#if children}

package/dist/views/core/screen-detector/components/screen-detector.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { handleScreenSizeUpdate } from '../../../../services';
-	import { BROWSER } from 'esm-env';
+	import { handleScreenSizeUpdate } from '../../../../services/index.js';
+
+	import { onMount } from 'svelte';
 
 	let innerWidth: number = $state(0);
 
@@ -8,8 +9,8 @@
 		handleScreenSizeUpdate(size);
 	}
 
-	$effect(() => {
-		BROWSER && screenSizeChanged(innerWidth);
+	onMount(() => {
+		screenSizeChanged(innerWidth);
 	});
 </script>
 

package/dist/views/core/text/components/text-date/text-date.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
-	import { dateFormat, dateToAgo, toDate } from '../../../../../services';
+	import { dateFormat, dateToAgo, toDate } from '../../../../../services/index.js';
+
+ 
 
 	import { BROWSER } from 'esm-env';
+	import { onMount } from 'svelte';
 
 	type PropsType = {
 		input: Date | number | string | { seconds: number; nanoseconds: number };
@@ -27,8 +30,8 @@
 		}
 	}
 
-	$effect(() => {
-		BROWSER && prepareDate(input);
+	onMount(() => {
+		prepareDate(input);
 	});
 </script>
 

package/dist/views/extra/texts/text-country-state.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import EasyScriptLoader from '@cloudparker/easy-script-loader-svelte';
 	import { BROWSER } from 'esm-env';
+	import { mount, onMount } from 'svelte';
 
 	let { input }: { input: string } = $props();
 
@@ -31,8 +32,8 @@
 		init();
 	}
 
-	$effect(() => {
-		BROWSER && prepare(input, states);
+	onMount(() => {
+		prepare(input, states);
 	});
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "4.1.2",
+    "version": "4.1.4",
     "keywords": [
         "svelte"
     ],