@hyvor/design 2.0.0 → 2.0.2

package/dist/cloud/HyvorBar/BarUserPicture.svelte

@@ -6,30 +6,3 @@
 </script>
 
 <UserPicture pictureUrl={user.picture_url} name={user.username || user.name || ''} size={30} />
-
-{#if user.picture_url}
-	<img src={user.picture_url} alt={user.name} />
-{:else}
-	<span class="user-placeholder">
-		{user.name ? user.name[0].toUpperCase() : '?'}
-	</span>
-{/if}
-
-<style>
-	img {
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-	}
-	.user-placeholder {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-		color: var(--text);
-		font-size: 14px;
-		background-color: var(--input);
-	}
-</style>

package/dist/components/ActionList/ActionList.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { setContext } from 'svelte';
 
 	interface Props {
@@ -12,12 +10,8 @@
 
 	let { selection = 'none', selectionAlign = 'start', children, ...rest }: Props = $props();
 
-	run(() => {
-		setContext('action-list-selection', selection);
-	});
-	run(() => {
-		setContext('action-list-selection-align', selectionAlign);
-	});
+	setContext('action-list-selection', () => selection);
+	setContext('action-list-selection-align', () => selectionAlign);
 </script>
 
 <div class="action-list" {...rest}>

package/dist/components/ActionList/ActionListGroup.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { setContext } from 'svelte';
 
 	interface Props {
@@ -12,9 +10,7 @@
 
 	let { title = undefined, divider = false, selection = undefined, children }: Props = $props();
 
-	run(() => {
-		if (selection !== undefined) setContext('action-list-selection', selection);
-	});
+	setContext('action-list-selection', () => selection);
 </script>
 
 <div class="action-list-group" class:has-divider={divider}>

package/dist/components/ActionList/ActionListItem.svelte

@@ -5,8 +5,8 @@
 	import { getContext, createEventDispatcher } from 'svelte';
 	import Selected from './Selected.svelte';
 
-	const selection: 'none' | 'single' | 'multi' = getContext('action-list-selection');
-	const selectionAlign: 'start' | 'end' = getContext('action-list-selection-align');
+	const selection: () => 'none' | 'single' | 'multi' = getContext('action-list-selection');
+	const selectionAlign: () => 'start' | 'end' = getContext('action-list-selection-align');
 
 	interface Props {
 		selected?: boolean;
@@ -30,7 +30,7 @@
 		...rest
 	}: Props = $props();
 
-	selected = selection !== 'none' && selected;
+	selected = selection() !== 'none' && selected;
 
 	const dispatch = createEventDispatcher();
 
@@ -53,8 +53,8 @@
 	}}
 	{...rest}
 >
-	{#if selectionAlign === 'start'}
-		<Selected {selection} bind:selected />
+	{#if selectionAlign() === 'start'}
+		<Selected selection={selection()} bind:selected />
 	{/if}
 
 	{#if start}
@@ -79,8 +79,8 @@
 		</span>
 	{/if}
 
-	{#if selectionAlign === 'end'}
-		<Selected {selection} bind:selected />
+	{#if selectionAlign() === 'end'}
+		<Selected selection={selection()} bind:selected />
 	{/if}
 </div>
 

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/Link/Link.svelte

@@ -4,7 +4,7 @@
 	const bubble = createBubbler();
 	interface Props {
 		href: string;
-		color?: 'link' | 'accent' | 'text';
+		color?: 'link' | 'accent' | 'text' | 'inherit';
 		underline?: boolean;
 		start?: import('svelte').Snippet;
 		children?: import('svelte').Snippet;
@@ -57,6 +57,9 @@
 	a.color-text {
 		--local-color: var(--text);
 	}
+	a.color-inherit {
+		--local-color: inherit;
+	}
 	a.underline {
 		text-decoration: underline;
 		text-decoration-color: var(--local-color);

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

@@ -1,6 +1,6 @@
 interface Props {
     href: string;
-    color?: 'link' | 'accent' | 'text';
+    color?: 'link' | 'accent' | 'text' | 'inherit';
     underline?: boolean;
     start?: import('svelte').Snippet;
     children?: import('svelte').Snippet;

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/NavLink/NavLink.svelte

@@ -13,11 +13,12 @@
 		[key: string]: any;
 	};
 
-	let { href, active = false, disabled = false, start, children, end }: Props = $props();
+	let { href, active = false, disabled = false, start, children, end, ...rest }: Props = $props();
 </script>
 
 <a
 	{href}
+	{...rest}
 	class:active
 	class:disabled
 	onkeyup={bubble('keyup')}

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

@@ -34,7 +34,7 @@
 	let {
 		state = 'default',
 		size = 'medium',
-		block = false,
+		block = true,
 		value = $bindable(undefined),
 		input = $bindable(),
 		start,

package/dist/marketing/Docs/Nav/NavItem.svelte

@@ -6,11 +6,12 @@
 		children?: import('svelte').Snippet;
 	}
 
-	let { href, children }: Props = $props();
+	let { href, children, ...rest }: Props = $props();
 </script>
 
 <a
 	{href}
+	{...rest}
 	class:active={href === $page.url.pathname}
 	aria-current={href === $page.url.pathname ? 'page' : undefined}
 >

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.0.0",
+	"version": "2.0.2",
 	"license": "MIT",
 	"private": false,
 	"repository": {