@hyvor/design 2.1.8-beta.5 → 2.1.9

package/dist/cloud/HyvorBar/BarNotice/BarNotice.svelte

@@ -12,7 +12,7 @@
 		text="You have an unpaid invoice. Please settle to avoid service interruption."
 		position="bottom"
 	>
-		<a href={instance + '/account/billing?pay-failed'}>
+		<a href={instance + '/account/org/billing?pay-failed'}>
 			<Tag color="orange">
 				{#snippet start()}
 					<IconExclamationCircle size={14} />

package/dist/cloud/HyvorBar/BarSupport.svelte

@@ -111,7 +111,7 @@
 						{/snippet}
 					</ActionListItem>
 				</a>
-				<a href={SOCIAL_LINKS.bluesky} target="_blank">
+				<a href={SOCIAL_LINKS.blueksy} target="_blank">
 					<ActionListItem>
 						Bluesky
 						{#snippet start()}

package/dist/cloud/HyvorBar/Organization/BarOrganization.svelte

@@ -28,7 +28,7 @@
 	position="bottom"
 	text="Switch Organization"
 	disabled={disableTooltip}
-	style="height: 100%"
+	wrapperProps={{ style: 'height: 100%' }}
 >
 	<button class="wrap" onclick={() => (show = true)} bind:this={trigger}>
 		<div class="data">

package/dist/components/Avatar/Avatar.svelte

@@ -2,10 +2,20 @@
 	interface Props {
 		size?: number | 'small' | 'medium' | 'large';
 		alt?: string;
-		[key: string]: any;
+		src?: string | null;
+		username?: string;
+		bg?: string;
+		fg?: string;
 	}
 
-	let { size = $bindable('medium'), alt = '', ...rest }: Props = $props();
+	let {
+		size = $bindable('medium'),
+		alt = '',
+		src = null,
+		username = '',
+		bg = 'var(--accent)',
+		fg = 'var(--accent-text)'
+	}: Props = $props();
 
 	const sizes = {
 		small: 24,
@@ -13,14 +23,50 @@
 		large: 48
 	};
 	size = typeof size === 'number' ? size : sizes[size];
+
+	function getInitials(name: string) {
+		const parts = name.trim().split(/\s+/).filter(Boolean);
+		if (parts.length === 0) {
+			return '';
+		}
+		if (parts.length === 1) {
+			return parts[0].slice(0, 2).toUpperCase();
+		}
+		return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+	}
+
+	const initials = $derived(getInitials(username));
 </script>
 
-<img {alt} {...rest} style={`width: ${size}px; height: ${size}px;`} />
+{#if src}
+	<img {src} {alt} style={`width: ${size}px; height: ${size}px;`} />
+{:else}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 {size} {size}"
+		role="img"
+		aria-label={alt || username}
+	>
+		<circle cx={size / 2} cy={size / 2} r={size / 2} fill={bg} />
+		<text
+			x="50%"
+			y="50%"
+			dy=".35em"
+			text-anchor="middle"
+			fill={fg}
+			font-family="var(--font-sans-serif)"
+			font-size={size * 0.4}>{initials}</text
+		>
+	</svg>
+{/if}
 
 <style>
-	img {
+	img,
+	svg {
 		border-radius: 50%;
 		display: inline-block;
 		overflow: hidden;
+		vertical-align: middle;
 	}
 </style>

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

@@ -1,7 +1,10 @@
 interface Props {
     size?: number | 'small' | 'medium' | 'large';
     alt?: string;
-    [key: string]: any;
+    src?: string | null;
+    username?: string;
+    bg?: string;
+    fg?: string;
 }
 declare const Avatar: import("svelte").Component<Props, {}, "size">;
 type Avatar = ReturnType<typeof Avatar>;

package/dist/components/Avatar/AvatarStack.svelte

@@ -22,13 +22,16 @@
 		display: inline-flex;
 		cursor: pointer;
 	}
-	.stack :global(img) {
+	.stack :global(img),
+	.stack :global(svg) {
 		transition: 0.2s;
 	}
-	.stack :global(img:not(:first-child)) {
+	.stack :global(img:not(:first-child)),
+	.stack :global(svg:not(:first-child)) {
 		margin-left: calc(var(--local-size) * -0.5);
 	}
-	.stack:hover :global(img:not(:first-child)) {
+	.stack:hover :global(img:not(:first-child)),
+	.stack:hover :global(svg:not(:first-child)) {
 		margin-left: 3px;
 	}
 </style>

package/dist/components/ButtonGroup/ButtonGroup.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	interface Props {
+		column?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let { column = false, children }: Props = $props();
+</script>
+
+<div class="button-group" class:column>
+	{@render children?.()}
+</div>
+
+<style>.button-group {
+  display: inline-flex;
+}
+
+.button-group.column {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.button-group :global(> .button) {
+  position: relative;
+}
+
+.button-group :global(> .button:hover),
+.button-group :global(> .button:focus-visible) {
+  z-index: 1;
+}
+
+.button-group:not(.column) :global(> .button:not(:first-child)) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.button-group:not(.column) :global(> .button:not(:last-child)) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.button-group.column :global(> .button:not(:first-child)) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.button-group.column :global(> .button:not(:last-child)) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.button-group:not(.column) :global(> .button:not(:first-child)) {
+  margin-left: -1px;
+}
+
+.button-group.column :global(> .button:not(:first-child)) {
+  margin-top: -1px;
+}
+
+.button-group:not(.column) :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
+  content: "";
+  position: absolute;
+  top: 22%;
+  bottom: 22%;
+  left: 0;
+  width: 1px;
+  background-color: currentColor;
+  opacity: 0.25;
+  pointer-events: none;
+}
+
+.button-group.column :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
+  content: "";
+  position: absolute;
+  left: 22%;
+  right: 22%;
+  top: 0;
+  height: 1px;
+  background-color: currentColor;
+  opacity: 0.25;
+  pointer-events: none;
+}</style>

package/dist/components/{Button → ButtonGroup}/ButtonGroup.svelte.d.ts

@@ -1,4 +1,5 @@
 interface Props {
+    column?: boolean;
     children?: import('svelte').Snippet;
 }
 declare const ButtonGroup: import("svelte").Component<Props, {}, "">;

package/dist/components/Modal/ConfirmModalProvider.svelte

@@ -2,7 +2,6 @@
 	import Modal from './Modal.svelte';
 	import { confirmStore } from './confirm.js';
 	import Button from './../Button/Button.svelte';
-	import ButtonGroup from './../Button/ButtonGroup.svelte';
 
 	let show = $state(true);
 
@@ -32,14 +31,12 @@
 		{/if}
 
 		{#snippet footer()}
-			<ButtonGroup>
-				<Button variant="invisible" on:click={handleCancel}>
-					{$confirmStore.cancelText || 'Cancel'}
-				</Button>
-				<Button color={$confirmStore.danger ? 'red' : 'accent'} on:click={handleConfirm}>
-					{$confirmStore.confirmText || 'Confirm'}
-				</Button>
-			</ButtonGroup>
+			<Button variant="invisible" on:click={handleCancel}>
+				{$confirmStore.cancelText || 'Cancel'}
+			</Button>
+			<Button color={$confirmStore.danger ? 'red' : 'accent'} on:click={handleConfirm}>
+				{$confirmStore.confirmText || 'Confirm'}
+			</Button>
 		{/snippet}
 	</Modal>
 {/if}

package/dist/components/Modal/ModalFooter.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import Button from '../Button/Button.svelte';
-	import ButtonGroup from '../Button/ButtonGroup.svelte';
 	import type { Footer } from './modal-types.ts';
 
 	interface Props {
@@ -14,30 +13,28 @@
 	const dispatch = createEventDispatcher();
 </script>
 
-<ButtonGroup>
-	{#if footer.cancel !== false}
-		<Button
-			variant="invisible"
-			on:click={() => {
-				show = false;
-				dispatch('cancel');
-			}}
-			{...footer.cancel?.props}
-			disabled={footer.cancel?.disabled}
-		>
-			{footer.cancel?.text || 'Cancel'}
-		</Button>
-	{/if}
+{#if footer.cancel !== false}
+	<Button
+		variant="invisible"
+		on:click={() => {
+			show = false;
+			dispatch('cancel');
+		}}
+		{...footer.cancel?.props}
+		disabled={footer.cancel?.disabled}
+	>
+		{footer.cancel?.text || 'Cancel'}
+	</Button>
+{/if}
 
-	{#if footer.confirm !== false}
-		<Button
-			variant="fill"
-			color={footer.confirm?.danger ? 'red' : 'accent'}
-			on:click={() => dispatch('confirm')}
-			{...footer.confirm?.props}
-			disabled={footer.confirm?.disabled}
-		>
-			{footer.confirm?.text || 'Confirm'}
-		</Button>
-	{/if}
-</ButtonGroup>
+{#if footer.confirm !== false}
+	<Button
+		variant="fill"
+		color={footer.confirm?.danger ? 'red' : 'accent'}
+		on:click={() => dispatch('confirm')}
+		{...footer.confirm?.props}
+		disabled={footer.confirm?.disabled}
+	>
+		{footer.confirm?.text || 'Confirm'}
+	</Button>
+{/if}

package/dist/components/Toast/ToastMessage.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import ToastIcon from './ToastIcon.svelte';
 	import type { Toast } from './toast.ts';
-	import { fade } from 'svelte/transition';
+	import { fade, fly } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
 
 	interface Props {
 		toast: Toast;
@@ -10,7 +11,7 @@
 	let { toast }: Props = $props();
 </script>
 
-<div class="toast" out:fade={{ duration: 200 }} in:fade={{ duration: 50 }}>
+<div class="toast" in:fly={{ y: 20, duration: 250, easing: cubicOut }} out:fade={{ duration: 150 }}>
 	{#if toast.type !== 'blank'}
 		<div class="icon-wrap">
 			<ToastIcon {toast} />
@@ -28,7 +29,6 @@
 
 <style>
 	.toast {
-		margin-bottom: 10px;
 		box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
 		border-radius: var(--box-radius);
 		background-color: var(--box-background);
@@ -38,9 +38,6 @@
 		max-width: 350px;
 		pointer-events: initial;
 	}
-	.toast:first-child {
-		margin-top: 10px;
-	}
 	.icon-wrap {
 		margin-right: 8px;
 		display: inline-flex;

package/dist/components/Toast/ToastProvider.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { flip } from 'svelte/animate';
 	import ToastMessage from './ToastMessage.svelte';
 	import { toastStore } from './toast.js';
 	import { useCleaner } from './cleaner.js';
@@ -8,21 +9,24 @@
 
 <div id="toasts-wrap">
 	{#each $toastStore as toast (toast.id)}
-		<ToastMessage {toast} />
+		<div class="toast-item" animate:flip={{ duration: 200 }}>
+			<ToastMessage {toast} />
+		</div>
 	{/each}
 </div>
 
 <style>
 	#toasts-wrap {
 		position: fixed;
-		top: 0;
+		bottom: 0;
 		left: 0;
 		width: 100%;
 		z-index: 20000000;
 		display: flex;
-		flex-direction: column;
+		flex-direction: column-reverse;
 		align-items: center;
-		justify-content: center;
+		gap: 10px;
+		padding: 10px 0 24px;
 		pointer-events: none;
 	}
 </style>

package/dist/components/Tooltip/Tooltip.svelte

@@ -1,22 +1,43 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <script lang="ts">
-	import { tick, onMount, onDestroy } from 'svelte';
+	import { tick, onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props {
+		text?: string;
+		position?: 'top' | 'bottom' | 'left' | 'right';
+		color?: 'black' | 'accent' | 'soft' | 'danger';
+		show?: boolean;
+		maxWidth?: number;
+		disabled?: boolean;
+		delay?: number;
+		children?: Snippet;
+		tooltip?: Snippet;
+		wrapperProps?: HTMLAttributes<HTMLDivElement>;
+	}
 
-	export let text: string = '';
-	export let position: 'top' | 'bottom' | 'left' | 'right' = 'top';
-	export let color: 'black' | 'accent' | 'soft' | 'danger' = 'black';
-	export let show = false;
-	export let maxWidth: number = 300;
-	export let disabled = false;
-
-	let wrap: HTMLDivElement;
-	let tooltip: HTMLDivElement;
+	let {
+		text = '',
+		position = 'top',
+		color = 'black',
+		show = $bindable(false),
+		maxWidth = 300,
+		disabled = false,
+		delay = 100,
+		children,
+		tooltip,
+		wrapperProps = {}
+	}: Props = $props();
+
+	let wrap: HTMLDivElement | undefined = $state();
+	let tooltipEl: HTMLDivElement | undefined = $state();
+	let showTimeout: ReturnType<typeof setTimeout>;
 
 	function positionTooltip() {
-		if (wrap && tooltip && show) {
+		if (wrap && tooltipEl && show) {
 			const wrapRect = wrap.getBoundingClientRect();
-			const tooltipRect = tooltip.getBoundingClientRect();
+			const tooltipRect = tooltipEl.getBoundingClientRect();
 
 			let top, left;
 
@@ -36,36 +57,41 @@
 				left = position === 'left' ? leftVal : wrapRect.right + 10;
 			}
 
-			tooltip.style.top = top + 'px';
-			tooltip.style.left = left + 'px';
+			tooltipEl.style.top = top + 'px';
+			tooltipEl.style.left = left + 'px';
 		}
 	}
 
-	async function handleMouseEnter() {
+	function handleMouseEnter() {
 		if (!disabled) {
-			show = true;
-			await tick();
-			positionTooltip();
+			clearTimeout(showTimeout);
+			showTimeout = setTimeout(async () => {
+				show = true;
+				await tick();
+				positionTooltip();
+			}, delay);
 		}
 	}
 
 	function handleMouseLeave() {
+		clearTimeout(showTimeout);
 		show = false;
 	}
 
-	$: {
+	$effect(() => {
 		if (text) {
 			tick().then(() => {
 				positionTooltip();
 			});
 		}
-	}
+	});
 
 	onMount(() => {
 		positionTooltip();
 		document.addEventListener('scroll', positionTooltip);
 
 		return () => {
+			clearTimeout(showTimeout);
 			document.removeEventListener('scroll', positionTooltip);
 		};
 	});
@@ -73,23 +99,23 @@
 
 <div
 	class="tooltip-wrap {color}"
-	on:mouseenter={handleMouseEnter}
-	on:mouseleave={handleMouseLeave}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
 	role="tooltip"
 	bind:this={wrap}
-	{...$$restProps}
+	{...wrapperProps}
 >
-	<slot />
+	{@render children?.()}
 
 	{#if !disabled && show}
 		<div
 			class="tooltip {position}"
 			style:max-width={maxWidth + 'px'}
-			bind:this={tooltip}
+			bind:this={tooltipEl}
 			transition:fade={{ duration: 100 }}
 		>
-			{#if $$slots.tooltip}
-				<slot name="tooltip" />
+			{#if tooltip}
+				{@render tooltip()}
 			{:else}
 				{text}
 			{/if}

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

@@ -1,37 +1,17 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    text?: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    color?: 'black' | 'accent' | 'soft' | 'danger';
+    show?: boolean;
+    maxWidth?: number;
+    disabled?: boolean;
+    delay?: number;
+    children?: Snippet;
+    tooltip?: Snippet;
+    wrapperProps?: HTMLAttributes<HTMLDivElement>;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Tooltip: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    text?: string | undefined;
-    position?: "top" | "bottom" | "left" | "right" | undefined;
-    color?: "black" | "accent" | "soft" | "danger" | undefined;
-    show?: boolean | undefined;
-    maxWidth?: number | undefined;
-    disabled?: boolean | undefined;
-}, {
-    default: {};
-    tooltip: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    tooltip: {};
-}, {}, string>;
-type Tooltip = InstanceType<typeof Tooltip>;
+declare const Tooltip: import("svelte").Component<Props, {}, "show">;
+type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/components/index.d.ts

@@ -7,7 +7,7 @@ export { default as AvatarStack } from './Avatar/AvatarStack.svelte';
 export { default as Base } from './Base/Base.svelte';
 export { default as Box } from './Box/Box.svelte';
 export { default as Button } from './Button/Button.svelte';
-export { default as ButtonGroup } from './Button/ButtonGroup.svelte';
+export { default as ButtonGroup } from './ButtonGroup/ButtonGroup.svelte';
 export { default as BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.svelte';
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';

package/dist/components/index.js

@@ -7,7 +7,7 @@ export { default as AvatarStack } from './Avatar/AvatarStack.svelte';
 export { default as Base } from './Base/Base.svelte';
 export { default as Box } from './Box/Box.svelte';
 export { default as Button } from './Button/Button.svelte';
-export { default as ButtonGroup } from './Button/ButtonGroup.svelte';
+export { default as ButtonGroup } from './ButtonGroup/ButtonGroup.svelte';
 export { default as BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.svelte';
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';

package/dist/index.css

@@ -84,10 +84,13 @@ a {
 	hyphens: none;
 }
 
+:root.dark .shiki {
+	background-color: var(--shiki-dark-bg) !important;
+}
+
 :root.dark .shiki,
 :root.dark .shiki span {
 	color: var(--shiki-dark) !important;
-	background-color: var(--shiki-dark-bg) !important;
 	font-style: var(--shiki-dark-font-style) !important;
 	font-weight: var(--shiki-dark-font-weight) !important;
 	text-decoration: var(--shiki-dark-text-decoration) !important;

package/dist/marketing/Docs/Docs.svelte

@@ -368,7 +368,7 @@
 		margin: 20px 0;
 	}
 
-	content :global(code) {
+	content :global(code:not(pre code)) {
 		font-size: 14px;
 		padding: 0.2em 0.4em;
 		display: inline-block;
@@ -379,7 +379,7 @@
 		line-height: normal;
 		font-weight: 400;
 	}
-	:global(:root.dark) content :global(code) {
+	:global(:root.dark) content :global(code:not(pre code)) {
 		background-color: #282c34;
 		color: #e06c75;
 	}