@hyvor/design 2.0.12 → 2.0.15

package/dist/components/Kbd/Kbd.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	type ModKey = 'mod' | 'ctrl' | 'alt' | 'shift' | 'meta';
+
+	const PLATFORM_LABELS: Record<ModKey, { mac: string; other: string }> = {
+		mod: { mac: '⌘', other: 'Ctrl' },
+		ctrl: { mac: '⌃', other: 'Ctrl' },
+		alt: { mac: '⌥', other: 'Alt' },
+		shift: { mac: '⇧', other: 'Shift' },
+		meta: { mac: '⌘', other: 'Win' }
+	};
+
+	const MAC_ARIA: Record<ModKey, string> = {
+		mod: 'Command',
+		ctrl: 'Control',
+		alt: 'Option',
+		shift: 'Shift',
+		meta: 'Command'
+	};
+
+	// Canonical Mac modifier order: Control → Option → Shift → Command
+	const MOD_ORDER: ModKey[] = ['ctrl', 'alt', 'shift', 'meta', 'mod'];
+	const MOD_SET = new Set<string>(MOD_ORDER);
+
+	interface Props {
+		keys: string | string[];
+		size?: 'small' | 'medium' | 'large' | (string & {});
+		[key: string]: any;
+	}
+
+	let { keys, size = 'small', ...rest }: Props = $props();
+
+	const PREDEFINED_SIZES = ['small', 'medium', 'large'];
+	let sizeClass = $derived(PREDEFINED_SIZES.includes(size) ? `size-${size}` : '');
+	let sizeStyle = $derived(!PREDEFINED_SIZES.includes(size) ? `font-size: ${size};` : undefined);
+
+	let isMac = $state(false);
+
+	onMount(() => {
+		const platform = (navigator as any).userAgentData?.platform ?? navigator.platform ?? '';
+		isMac = /mac/i.test(platform);
+	});
+
+	function keyLabel(key: string, mac: boolean): string {
+		const lower = key.toLowerCase();
+		if (MOD_SET.has(lower)) {
+			return mac ? PLATFORM_LABELS[lower as ModKey].mac : PLATFORM_LABELS[lower as ModKey].other;
+		}
+		return key.length === 1 ? key.toUpperCase() : key.charAt(0).toUpperCase() + key.slice(1);
+	}
+
+	function keyAria(key: string, mac: boolean): string {
+		const lower = key.toLowerCase();
+		if (MOD_SET.has(lower)) {
+			return mac ? MAC_ARIA[lower as ModKey] : PLATFORM_LABELS[lower as ModKey].other;
+		}
+		return key.length === 1 ? key.toUpperCase() : key.charAt(0).toUpperCase() + key.slice(1);
+	}
+
+	function sortKeys(keyArr: string[]): string[] {
+		const mods = MOD_ORDER.filter((m) => keyArr.some((k) => k.toLowerCase() === m));
+		const regular = keyArr.filter((k) => !MOD_SET.has(k.toLowerCase()));
+		return [...mods, ...regular];
+	}
+
+	let keyArray = $derived(Array.isArray(keys) ? keys : [keys]);
+	let sorted = $derived(sortKeys(keyArray));
+
+	let display = $derived(
+		isMac
+			? sorted.map((k) => keyLabel(k, true)).join('')
+			: sorted.map((k) => keyLabel(k, false)).join(' + ')
+	);
+
+	let ariaLabel = $derived(sorted.map((k) => keyAria(k, isMac)).join(' plus '));
+</script>
+
+<kbd aria-label={ariaLabel} class={sizeClass} style={sizeStyle} {...rest}>{display}</kbd>
+
+<style>kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  line-height: 1;
+  background-color: var(--hover-dark);
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  color: var(--text);
+  white-space: nowrap;
+}
+kbd.size-small {
+  font-size: 0.7em;
+  min-width: 1.6em;
+  padding: 2px 5px;
+}
+kbd.size-medium {
+  font-size: 0.85em;
+  min-width: 1.8em;
+  padding: 3px 7px;
+}
+kbd.size-large {
+  font-size: 1em;
+  min-width: 2em;
+  padding: 4px 9px;
+}</style>

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

@@ -0,0 +1,8 @@
+interface Props {
+    keys: string | string[];
+    size?: 'small' | 'medium' | 'large' | (string & {});
+    [key: string]: any;
+}
+declare const Kbd: import("svelte").Component<Props, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/Modal/Modal.svelte

@@ -18,6 +18,7 @@
 		closeOnEscape?: boolean;
 		loading?: boolean | string;
 		onclose?: () => void;
+		hasClose?: boolean | string;
 
 		footer?: Footer | Snippet;
 		children?: Snippet;
@@ -33,6 +34,7 @@
 		closeOnEscape = true,
 		loading = false,
 		onclose,
+		hasClose = true,
 		footer,
 		children
 	}: Props = $props();
@@ -89,14 +91,12 @@
 		role="presentation"
 		class="wrap"
 		bind:this={wrapEl}
-		in:fade={{ duration: 100 }}
-		out:fade={{ duration: 100 }}
+		transition:fade|global={{ duration: 100 }}
 		onclick={(e) => handleClose(e)}
 	>
 		<div
 			class="inner {size}"
-			in:scale={{ duration: 100, start: 0.9, opacity: 0.9 }}
-			out:scale={{ duration: 100, start: 0.9, opacity: 0.9 }}
+			transition:scale|global={{ duration: 100, start: 0.9, opacity: 0.9 }}
 			bind:this={innerEl}
 			{role}
 			aria-modal="true"
@@ -113,9 +113,11 @@
 				</div>
 
 				<div class="close-wrap">
-					<IconButton variant="invisible" on:click={handleCancel} aria-label="Close modal">
-						<IconX size={25} />
-					</IconButton>
+					{#if hasClose}
+						<IconButton variant="invisible" on:click={handleCancel} aria-label="Close modal">
+							<IconX size={25} />
+						</IconButton>
+					{/if}
 				</div>
 			</div>
 

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

@@ -10,6 +10,7 @@ interface Props {
     closeOnEscape?: boolean;
     loading?: boolean | string;
     onclose?: () => void;
+    hasClose?: boolean | string;
     footer?: Footer | Snippet;
     children?: Snippet;
 }

package/dist/components/NavLink/NavLink.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { legacyHandlers } from '../../legacy.js';
+	import { getContext } from 'svelte';
 	import { createBubbler } from 'svelte/legacy';
 
 	const bubble = createBubbler();
@@ -10,27 +12,61 @@
 		start?: import('svelte').Snippet;
 		children?: import('svelte').Snippet;
 		end?: import('svelte').Snippet;
+
+		onkeyup?: (event: KeyboardEvent) => void;
+		onkeydown?: (event: KeyboardEvent) => void;
+		onkeypress?: (event: KeyboardEvent) => void;
+		onfocus?: (event: FocusEvent) => void;
+		onblur?: (event: FocusEvent) => void;
+		onclick?: (event: MouseEvent) => void;
+		onmouseover?: (event: MouseEvent) => void;
+		onmouseenter?: (event: MouseEvent) => void;
+		onmouseleave?: (event: MouseEvent) => void;
+		onchange?: (event: Event) => void;
+
 		[key: string]: any;
 	};
 
-	let { href, active = false, disabled = false, start, children, end, ...rest }: Props = $props();
+	const isNavLinkGroup = !!getContext('navlink-group');
+
+	let {
+		href,
+		active = false,
+		disabled = false,
+		start,
+		children,
+		end,
+		onkeyup,
+		onkeydown,
+		onkeypress,
+		onfocus,
+		onblur,
+		onclick,
+		onmouseover,
+		onmouseenter,
+		onmouseleave,
+		onchange,
+		...rest
+	}: Props = $props();
 </script>
 
 <a
 	{href}
 	{...rest}
+	class="nav-link"
 	class:active
 	class:disabled
-	onkeyup={bubble('keyup')}
-	onkeydown={bubble('keydown')}
-	onkeypress={bubble('keypress')}
-	onfocus={bubble('focus')}
-	onblur={bubble('blur')}
-	onclick={bubble('click')}
-	onmouseover={bubble('mouseover')}
-	onmouseenter={bubble('mouseenter')}
-	onmouseleave={bubble('mouseleave')}
-	onchange={bubble('change')}
+	class:group={isNavLinkGroup}
+	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'))}
 >
 	{#if start}
 		<span class="start">
@@ -52,6 +88,7 @@
 <style>
 	a {
 		display: flex;
+		width: 100%;
 		padding: 12px 29px;
 		font-size: 14px;
 		letter-spacing: 0.3px;
@@ -60,16 +97,16 @@
 		align-items: center;
 	}
 
-	a:hover {
+	a:hover:not(.group) {
 		background-color: var(--hover);
 	}
 
-	a.active {
+	a.active:not(.group) {
 		background-color: var(--accent-lightest);
 		border-left: 3px solid var(--accent);
 	}
 
-	:global(:root.dark) a.active {
+	:global(:root.dark) a.active:not(.group) {
 		background-color: color-mix(in srgb, var(--accent-lightest), transparent 80%);
 	}
 

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

@@ -5,6 +5,16 @@ type Props = {
     start?: import('svelte').Snippet;
     children?: import('svelte').Snippet;
     end?: import('svelte').Snippet;
+    onkeyup?: (event: KeyboardEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeypress?: (event: KeyboardEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    onclick?: (event: MouseEvent) => void;
+    onmouseover?: (event: MouseEvent) => void;
+    onmouseenter?: (event: MouseEvent) => void;
+    onmouseleave?: (event: MouseEvent) => void;
+    onchange?: (event: Event) => void;
     [key: string]: any;
 };
 declare const NavLink: import("svelte").Component<Props, {}, "">;

package/dist/components/NavLink/NavLinkGroup.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { setContext, onMount, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props {
+		children: Snippet;
+		activeBackground?: string;
+		activeBorderColor?: string;
+		hoverBackground?: string;
+		wrapProps?: HTMLAttributes<HTMLElement>;
+	}
+
+	let {
+		children,
+		activeBackground = 'var(--accent-lightest)',
+		activeBorderColor = 'var(--accent)',
+		hoverBackground = 'var(--hover)',
+		wrapProps = {}
+	}: Props = $props();
+
+	setContext('navlink-group', true);
+
+	let container: HTMLDivElement;
+	let indicator: HTMLDivElement;
+	let hoverIndicator: HTMLDivElement;
+	let visible = $state(false);
+	let hoverVisible = $state(false);
+	let firstRender = true;
+	let hoverFirstRender = true;
+	let hoverTarget: HTMLElement | null = null;
+
+	function positionIndicator(el: HTMLDivElement, target: HTMLElement, instant: boolean) {
+		const rect = target.getBoundingClientRect();
+
+		el.style.transition = instant ? 'none' : '';
+		el.style.top = `${rect.top}px`;
+		el.style.left = `${rect.left}px`;
+		el.style.width = `${rect.width}px`;
+		el.style.height = `${rect.height}px`;
+	}
+
+	function updateIndicator(instant = false) {
+		if (!container || !indicator) return;
+
+		const activeLink = container.querySelector<HTMLElement>('.nav-link.active');
+
+		if (!activeLink) {
+			visible = false;
+			return;
+		}
+
+		positionIndicator(indicator, activeLink, firstRender || instant);
+		visible = true;
+
+		if (firstRender) {
+			firstRender = false;
+		}
+	}
+
+	function updateHoverIndicator(target: HTMLElement | null, instant = false) {
+		if (!hoverIndicator) return;
+
+		if (!target || target.classList.contains('active') || target.classList.contains('disabled')) {
+			hoverVisible = false;
+			return;
+		}
+
+		positionIndicator(hoverIndicator, target, hoverFirstRender || instant);
+		hoverVisible = true;
+
+		if (hoverFirstRender) {
+			hoverFirstRender = false;
+		}
+	}
+
+	function onMouseOver(event: MouseEvent) {
+		hoverTarget = (event.target as HTMLElement).closest<HTMLElement>('.nav-link');
+		updateHoverIndicator(hoverTarget);
+	}
+
+	function onMouseLeave() {
+		hoverTarget = null;
+		hoverVisible = false;
+	}
+
+	function onScrollOrResize() {
+		updateIndicator(true);
+
+		if (hoverVisible && hoverTarget) {
+			updateHoverIndicator(hoverTarget, true);
+		}
+	}
+
+	onMount(() => {
+		updateIndicator();
+
+		const observer = new MutationObserver(() => updateIndicator());
+		observer.observe(container, {
+			attributes: true,
+			attributeFilter: ['class'],
+			subtree: true
+		});
+
+		container.addEventListener('mouseover', onMouseOver);
+		container.addEventListener('mouseleave', onMouseLeave);
+
+		window.addEventListener('resize', onScrollOrResize);
+		window.addEventListener('scroll', onScrollOrResize, true);
+
+		return () => {
+			observer.disconnect();
+			container.removeEventListener('mouseover', onMouseOver);
+			container.removeEventListener('mouseleave', onMouseLeave);
+			window.removeEventListener('resize', onScrollOrResize);
+			window.removeEventListener('scroll', onScrollOrResize, true);
+		};
+	});
+</script>
+
+<div
+	class="nav-link-group"
+	bind:this={container}
+	style:--nlg-active-bg={activeBackground}
+	style:--nlg-active-border={activeBorderColor}
+	style:--nlg-hover-bg={hoverBackground}
+	{...wrapProps}
+>
+	<div
+		class="nav-link-group-indicator hover"
+		class:visible={hoverVisible}
+		bind:this={hoverIndicator}
+	></div>
+	<div class="nav-link-group-indicator active" class:visible bind:this={indicator}></div>
+	{@render children?.()}
+</div>
+
+<style>
+	.nav-link-group {
+		position: relative;
+		z-index: 0;
+		width: 100%;
+	}
+
+	.nav-link-group-indicator {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 0;
+		height: 0;
+		pointer-events: none;
+		opacity: 0;
+		z-index: 0;
+		transition:
+			top 0.2s ease,
+			left 0.2s ease,
+			width 0.2s ease,
+			height 0.2s ease,
+			opacity 0.2s ease;
+	}
+
+	.nav-link-group-indicator.visible {
+		opacity: 1;
+	}
+
+	.nav-link-group-indicator.active {
+		background-color: var(--nlg-active-bg);
+		border-left: 3px solid var(--nlg-active-border);
+	}
+
+	.nav-link-group-indicator.hover {
+		z-index: 0;
+		background-color: var(--nlg-hover-bg);
+		transition:
+			top 0.1s ease,
+			left 0.1s ease,
+			width 0.1s ease,
+			height 0.1s ease,
+			opacity 0.1s ease;
+	}
+
+	:global(:root.dark) .nav-link-group-indicator.active {
+		background-color: color-mix(in srgb, var(--nlg-active-bg), transparent 80%);
+	}
+
+	:global(.nav-link.group) {
+		position: relative;
+		z-index: 1;
+	}
+</style>

package/dist/components/NavLink/NavLinkGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    children: Snippet;
+    activeBackground?: string;
+    activeBorderColor?: string;
+    hoverBackground?: string;
+    wrapProps?: HTMLAttributes<HTMLElement>;
+}
+declare const NavLinkGroup: import("svelte").Component<Props, {}, "">;
+type NavLinkGroup = ReturnType<typeof NavLinkGroup>;
+export default NavLinkGroup;

package/dist/components/index.d.ts

@@ -30,12 +30,14 @@ export { default as Label } from './FormControl/Label.svelte';
 export { default as Validation } from './FormControl/Validation.svelte';
 export { uploadFile, type FileUploaderConfig, type UploadedFile as FileUploaderUploadedFile, type SelectedFile as FileUploaderSelectedFile } from './FileUploader/file-uploader.js';
 export { default as IconButton } from './IconButton/IconButton.svelte';
+export { default as Kbd } from './Kbd/Kbd.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
 export { default as LoadButton } from './Loader/LoadButton.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
 export { confirm } from './Modal/confirm.js';
 export { default as NavLink } from './NavLink/NavLink.svelte';
+export { default as NavLinkGroup } from './NavLink/NavLinkGroup.svelte';
 export { default as Radio } from './Radio/Radio.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';

package/dist/components/index.js

@@ -30,12 +30,14 @@ export { default as Label } from './FormControl/Label.svelte';
 export { default as Validation } from './FormControl/Validation.svelte';
 export { uploadFile } from './FileUploader/file-uploader.js';
 export { default as IconButton } from './IconButton/IconButton.svelte';
+export { default as Kbd } from './Kbd/Kbd.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
 export { default as LoadButton } from './Loader/LoadButton.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
 export { confirm } from './Modal/confirm.js';
 export { default as NavLink } from './NavLink/NavLink.svelte';
+export { default as NavLinkGroup } from './NavLink/NavLinkGroup.svelte';
 export { default as Radio } from './Radio/Radio.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';

package/package.json

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