@hyvor/design 2.0.0-beta.1 → 2.0.1

package/dist/components/IconMessage/IconMessage.svelte

@@ -40,20 +40,11 @@
 		...rest
 	}: Props = $props();
 
-	// export let size: 'small' | 'medium' | 'large' = 'medium';
-
-	// export let icon: ComponentType | null = null;
-	// export let message: string | null = null;
-
-	// export let iconSize: number | undefined = undefined;
 	const iconsSizes = {
 		small: 35,
 		medium: 50,
 		large: 75
 	};
-	iconSize = iconSize || iconsSizes[size];
-
-	// export let padding: number | undefined = undefined;
 
 	const paddings = {
 		small: 15,
@@ -61,36 +52,31 @@
 		large: 60
 	};
 
-	padding = padding === undefined ? paddings[size] : padding;
-
-	//console.log(icon?.prototype);
-	// $inspect(icon?.prototype, icon?);
-
-	// export let empty: boolean = false;
-	// export let error: boolean = false;
-
-	// export let iconColor: string | null = null;
-
-	if (empty) {
-		message = message || 'No results found';
-		icon = IconInbox;
-	}
-
-	if (error) {
-		message = message || 'Something went wrong';
-		icon = IconBug;
-		iconColor = iconColor || 'var(--gray-dark)';
-	}
+	const config = $derived.by(() => {
+		const ret = {
+			padding: padding === undefined ? paddings[size] : padding,
+			message,
+			icon,
+			iconSize: iconSize || iconsSizes[size],
+			iconColor
+		};
+
+		if (!ret.message) {
+			if (empty) ret.message = 'No results found';
+			if (error) ret.message = 'Something went wrong';
+		}
 
-	const Icon = icon;
+		if (!ret.icon) {
+			if (empty) ret.icon = IconInbox;
+			if (error) ret.icon = IconBug;
+		}
 
-	iconColor = iconColor || 'var(--gray-dark)';
+		if (!ret.iconColor) {
+			ret.iconColor = 'var(--gray-dark)';
+		}
 
-	// export let cta: {
-	// 	text: string;
-	// 	onClick: (e: MouseEvent) => void;
-	// 	props?: Record<string, any>;
-	// } | null = null;
+		return ret;
+	});
 
 	function onCtaClick(e: MouseEvent) {
 		if (cta && typeof cta === 'object') {
@@ -99,18 +85,18 @@
 	}
 </script>
 
-<div class="icon-message {size}" style:padding={padding + 'px'}>
-	<div class="icon" style:color={iconColor} {...rest}>
-		<Icon size={iconSize + 'px'} />
+<div class="icon-message {size}" style:padding={config.padding + 'px'}>
+	<div class="icon" style:color={config.iconColor} {...rest}>
+		<config.icon size={config.iconSize + 'px'} />
 	</div>
 
 	<div class="message">
 		{#if children}
 			{@render children()}
-		{:else if typeof message === 'string'}
-			{message}
-		{:else if message}
-			{@render message()}
+		{:else if typeof config.message === 'string'}
+			{config.message}
+		{:else if config.message}
+			{@render config.message()}
 		{/if}
 	</div>
 
@@ -146,7 +132,6 @@
 	}
 
 	.message {
-		/* Add message styles here */
 		color: var(--text-light);
 		margin-top: 10px;
 	}

package/dist/components/Internationalization/LanguageToggle.svelte

@@ -26,7 +26,7 @@
 		icon = false,
 		size = 'medium',
 		staticPage = false,
-		goto,
+		goto
 	}: Props = $props();
 
 	const i18n = getContext<InternationalizationService>('i18n');
@@ -45,7 +45,7 @@
 			}
 			const url = new URL(window.location.href);
 			url.pathname = url.pathname.replace(`/${currentLocale}`, `/${language.code}`);
-			
+
 			if (goto) {
 				goto(url.toString());
 			} else {

package/dist/components/Internationalization/T.svelte

@@ -57,10 +57,7 @@
 					};
 					hasComponentParams = true;
 				} else if (value.hasOwnProperty('element')) {
-					newValue = getElementFunc(
-						(value as any).element as string,
-						(value as any).props || {}
-					);
+					newValue = getElementFunc((value as any).element as string, (value as any).props || {});
 				}
 			} else {
 				newValue = value as PrimitiveType;
@@ -91,11 +88,7 @@
 					newValue = (chunks: string | string[]) => {
 						const children = typeof chunks === 'string' ? chunks : chunks.join('');
 						const id =
-							key +
-							'-' +
-							Math.random().toString(36).substring(7) +
-							'-' +
-							Date.now().toString();
+							key + '-' + Math.random().toString(36).substring(7) + '-' + Date.now().toString();
 						componentBindings.set(id, {
 							component: component!,
 							props: {

package/dist/components/Internationalization/i18n.js

@@ -28,7 +28,9 @@ export class InternationalizationService {
             this.register(language);
         }
         const localeStorageLocale = InternationalizationService.getLocaleFromLocalStorage();
-        const browserLocale = typeof navigator !== "undefined" ? InternationalizationService.getClosestLanguageCode(navigator.language, this.languages.map((l) => l.code)) : null;
+        const browserLocale = typeof navigator !== 'undefined'
+            ? InternationalizationService.getClosestLanguageCode(navigator.language, this.languages.map((l) => l.code))
+            : null;
         if (forceLanguage) {
             this.setLocale(forceLanguage);
         }

package/dist/components/Loader/Loader.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
 	import IconXCircleFill from '@hyvor/icons/IconXCircleFill';
 
@@ -58,7 +56,7 @@
 		large: 250
 	};
 	padding = typeof padding === 'number' ? padding : paddings[padding];
-	run(() => {
+	$effect(() => {
 		if (duration && (state === 'success' || state === 'error')) {
 			setTimeout(() => {
 				state = 'none';

package/dist/components/Modal/ConfirmModalProvider.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import Modal from './Modal.svelte';
 	import { confirmStore } from './confirm.js';
 	import Button from './../Button/Button.svelte';
@@ -16,7 +14,7 @@
 		$confirmStore!.onConfirm();
 	}
 
-	run(() => {
+	$effect(() => {
 		if (!show) {
 			handleCancel();
 			show = true;

package/dist/components/Modal/Modal.svelte

@@ -1,8 +1,6 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <script lang="ts">
 	import ModalFooter from './ModalFooter.svelte';
 	import type { Footer } from './modal-types.js';
-	import { clickOutside } from '../directives/clickOutside.js';
 	import IconX from '@hyvor/icons/IconX';
 	import IconButton from './../IconButton/IconButton.svelte';
 	import { fade, scale } from 'svelte/transition';
@@ -69,6 +67,13 @@
 		show;
 		setFlex();
 	});
+
+	function handleClose(e: MouseEvent) {
+		// close only when clicking directy on backdrop (not inner content)
+		if (closeOnOutsideClick && !loading && e.target === e.currentTarget) {
+			handleCancel();
+		}
+	}
 </script>
 
 <svelte:window
@@ -80,13 +85,16 @@
 />
 
 {#if show}
-	<div class="wrap" bind:this={wrapEl} in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
+	<div
+		role="presentation"
+		class="wrap"
+		bind:this={wrapEl}
+		in:fade={{ duration: 100 }}
+		out:fade={{ duration: 100 }}
+		onclick={(e) => handleClose(e)}
+	>
 		<div
 			class="inner {size}"
-			use:clickOutside={{
-				enabled: closeOnOutsideClick,
-				callback: () => (!loading ? handleCancel() : null)
-			}}
 			in:scale={{ duration: 100, start: 0.9, opacity: 0.9 }}
 			out:scale={{ duration: 100, start: 0.9, opacity: 0.9 }}
 			bind:this={innerEl}
@@ -105,11 +113,7 @@
 				</div>
 
 				<div class="close-wrap">
-					<IconButton
-						variant="invisible"
-						on:click={handleCancel}
-						aria-label="Close modal"
-					>
+					<IconButton variant="invisible" on:click={handleCancel} aria-label="Close modal">
 						<IconX size={25} />
 					</IconButton>
 				</div>

package/dist/components/TabNav/TabNav.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { onMount, setContext } from 'svelte';
 	import { writable } from 'svelte/store';
 

package/dist/components/TextInput/TextInput.svelte

@@ -1,14 +1,21 @@
 <script lang="ts">
-	interface Props {
+	import { legacyHandlers } from '../../legacy.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+
+	interface Props extends HTMLInputAttributes {
 		state?: 'default' | 'error' | 'success' | 'warning';
-		size?: 'small' | 'medium' | 'large' | 'x-small';
+		size?: 'small' | 'medium' | 'large' | 'x-small' | any;
 		block?: boolean;
 		value?: any;
 		input?: HTMLInputElement;
 		start?: import('svelte').Snippet;
 		end?: import('svelte').Snippet;
-		select?: boolean;
 		selectInput?: HTMLSelectElement;
+		children?: Snippet;
 		[key: string]: any;
 
 		onkeyup?: (event: KeyboardEvent) => void;
@@ -32,8 +39,8 @@
 		input = $bindable(),
 		start,
 		end,
-		select = false,
 		selectInput = $bindable({} as HTMLSelectElement),
+		children,
 
 		onkeyup,
 		onkeydown,
@@ -45,9 +52,7 @@
 		onmouseenter,
 		onmouseleave,
 		onchange,
-		oninput,
-
-		...rest
+		oninput
 	}: Props = $props();
 </script>
 
@@ -58,43 +63,21 @@
 		</span>
 	{/if}
 
-	{#if select}
-		<select
-			{...rest}
-			bind:value
-			bind:this={selectInput}
-			{onkeyup}
-			{onkeydown}
-			{onkeypress}
-			{onfocus}
-			{onblur}
-			{onclick}
-			{onmouseover}
-			{onmouseenter}
-			{onmouseleave}
-			{onchange}
-			{oninput}
-		>
-			{@render rest?.children()}
-		</select>
-	{:else}
-		<input
-			{...rest}
-			bind:value
-			bind:this={input}
-			{onkeyup}
-			{onkeydown}
-			{onkeypress}
-			{onfocus}
-			{onblur}
-			{onclick}
-			{onmouseover}
-			{onmouseenter}
-			{onmouseleave}
-			{onchange}
-			{oninput}
-		/>
-	{/if}
+	<input
+		bind:value
+		bind:this={input}
+		onkeyup={legacyHandlers(onkeyup, bubble('keyup'))}
+		onkeydown={legacyHandlers(onkeydown, bubble('keydown'))}
+		onkeypress={legacyHandlers(onkeypress, bubble('keypress'))}
+		onfocus={legacyHandlers(onfocus, bubble('focus'))}
+		onblur={legacyHandlers(onblur, bubble('blur'))}
+		onclick={legacyHandlers(onclick, bubble('click'))}
+		onmouseover={legacyHandlers(onmouseover, bubble('mouseover'))}
+		onmouseenter={legacyHandlers(onmouseenter, bubble('mouseenter'))}
+		onmouseleave={legacyHandlers(onmouseleave, bubble('mouseleave'))}
+		onchange={legacyHandlers(onchange, bubble('change'))}
+		oninput={legacyHandlers(oninput, bubble('input'))}
+	/>
 
 	{#if end}
 		<span class="slot end">
@@ -136,8 +119,7 @@
   width: 100%;
 }
 
-input,
-select {
+input {
   flex: 1;
   width: 100%;
   border: none;
@@ -149,15 +131,10 @@ select {
   color: inherit;
   height: 100%;
 }
-input:focus,
-select:focus {
+input:focus {
   outline: none;
 }
 
-select {
-  min-width: 180px;
-}
-
 .input-wrap.size-x-small {
   padding: 0 15px;
   height: 20px;

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

@@ -1,13 +1,15 @@
-interface Props {
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends HTMLInputAttributes {
     state?: 'default' | 'error' | 'success' | 'warning';
-    size?: 'small' | 'medium' | 'large' | 'x-small';
+    size?: 'small' | 'medium' | 'large' | 'x-small' | any;
     block?: boolean;
     value?: any;
     input?: HTMLInputElement;
     start?: import('svelte').Snippet;
     end?: import('svelte').Snippet;
-    select?: boolean;
     selectInput?: HTMLSelectElement;
+    children?: Snippet;
     [key: string]: any;
     onkeyup?: (event: KeyboardEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;

package/dist/components/Textarea/Textarea.svelte

@@ -28,18 +28,7 @@
 	}: Props = $props();
 </script>
 
-<span
-	class="input-wrap state-{state}"
-	class:block
-	onclick={() => textarea.focus()}
-	onkeydown={(e) => {
-		if (e.key === 'Enter') {
-			textarea.focus();
-		}
-	}}
-	role="textbox"
-	tabindex="0"
->
+<div class="textarea-container" class:block>
 	{#if start}
 		<span class="slot start">
 			{@render start?.()}
@@ -60,6 +49,7 @@
 		onmouseleave={bubble('mouseleave')}
 		onchange={bubble('change')}
 		oninput={bubble('input')}
+		class="state-{state}"
 		{rows}
 		{cols}
 		{...rest}
@@ -70,89 +60,85 @@
 			{@render end?.()}
 		</span>
 	{/if}
-</span>
-
-<style>.input-wrap {
-  padding: 10px 15px;
-  background-color: var(--input);
-  transition: 0.2s box-shadow;
-  font-family: inherit;
-  font-size: 14px;
-  border-radius: 20px;
-  border: none;
-  transition: 0.2s box-shadow;
-  max-width: 100%;
-  color: inherit;
-  display: inline-flex;
-  resize: vertical;
-  overflow: auto;
-  align-items: flex-start;
-  justify-content: center;
-}
-.input-wrap:focus-within {
-  outline: 0;
-  box-shadow: 0 0 0 var(--local-shadow-size) var(--accent-light);
-}
-.input-wrap {
-  --local-shadow-size: 2px;
-}
-
-.input-wrap.block {
-  display: block;
-  width: 100%;
-  resize: vertical;
-}
-
-.input-wrap:focus-visible {
-  outline: 0;
-}
-
-.input-wrap.state-error {
-  box-shadow: 0 0 0 var(--local-shadow-size) var(--red-light);
-}
-.input-wrap.state-error:focus-within {
-  box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--red-light);
-}
-
-.input-wrap.state-success {
-  box-shadow: 0 0 0 2px var(--green-light);
-}
-.input-wrap.state-success:focus-within {
-  box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--green-light);
-}
-
-.input-wrap.state-warning {
-  box-shadow: 0 0 0 2px var(--orange-light);
-}
-.input-wrap.state-warning:focus-within {
-  box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--orange-light);
-}
-
-.input-wrap .slot {
-  padding: 0 10px;
-}
-
-.input-wrap .slot.start {
-  margin-right: 10px;
-}
-
-.input-wrap .slot.end {
-  margin-left: 10px;
-}
-
-.input-wrap textarea {
-  flex: 1;
-  width: 100%;
-  border: none;
-  font-family: inherit;
-  font-size: inherit;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-}
-.input-wrap textarea:focus {
-  outline: none;
-}
-.input-wrap textarea {
-  resize: none;
-}</style>
+</div>
+
+<style>
+	.textarea-container {
+		position: relative;
+		display: inline-block;
+		max-width: 100%;
+
+		&.block {
+			display: block;
+			width: 100%;
+		}
+	}
+
+	textarea {
+		padding: 10px 15px;
+		background-color: var(--input);
+		font-family: inherit;
+		font-size: 14px;
+		border-radius: 20px;
+		border-bottom-right-radius: 0;
+		border: none;
+		transition: 0.2s box-shadow;
+		width: 100%;
+		color: inherit;
+		resize: vertical;
+		box-sizing: border-box;
+
+		&:focus {
+			outline: 0;
+			box-shadow: 0 0 0 var(--local-shadow-size) var(--accent-light);
+		}
+
+		--local-shadow-size: 2px;
+
+		&.state-error {
+			box-shadow: 0 0 0 var(--local-shadow-size) var(--red-light);
+			&:focus {
+				box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--red-light);
+			}
+		}
+
+		&.state-success {
+			box-shadow: 0 0 0 2px var(--green-light);
+			&:focus {
+				box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--green-light);
+			}
+		}
+
+		&.state-warning {
+			box-shadow: 0 0 0 2px var(--orange-light);
+			&:focus {
+				box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--orange-light);
+			}
+		}
+	}
+
+	.start ~ textarea {
+		padding-left: 45px;
+	}
+
+	.end ~ textarea {
+		padding-right: 45px;
+	}
+
+	.slot {
+		position: absolute;
+		top: 10px;
+		pointer-events: none;
+		display: flex;
+		align-items: center;
+		z-index: 1;
+
+		&.start {
+			left: 15px;
+		}
+
+		&.end {
+			right: 15px;
+		}
+	}
+</style>

package/dist/index.css

@@ -51,10 +51,10 @@ a {
 }
 
 .hds-container-max {
-    width: 1400px;
-    max-width: 100%;
-    padding: 0 15px;
-    margin: auto;
+	width: 1400px;
+	max-width: 100%;
+	padding: 0 15px;
+	margin: auto;
 }
 
 .hds-link {

package/dist/legacy.js

@@ -1,8 +1,8 @@
-import { handlers } from "svelte/legacy";
+import { handlers } from 'svelte/legacy';
 /**
  * Extends svelte4 handlers to support undefined
  */
 export function legacyHandlers(...eventHandlers) {
-    const all = eventHandlers.filter(h => h !== undefined);
+    const all = eventHandlers.filter((h) => h !== undefined);
     return handlers(...all);
 }