@hyvor/design 2.1.8-beta.1 → 2.1.8

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/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/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;
 	}