@hyvor/design 2.0.0-beta.1 → 2.0.0

package/dist/components/CodeBlock/getCode.d.ts

@@ -1 +1,3 @@
-export {};
+export type Language = 'html' | 'css' | 'js' | 'ts' | 'yaml' | 'json' | 'svelte' | 'jsx' | 'php' | 'sh' | string;
+export declare function sanitizeLines(code: string): string;
+export declare function getCode(code: string, language: Language | null): Promise<string>;

package/dist/components/CodeBlock/getCode.js

@@ -1,50 +1,33 @@
-"use strict";
-// // import hljs from 'highlight.js/lib/core';
-// // import javascript from 'highlight.js/lib/languages/javascript';
-// // import xml from 'highlight.js/lib/languages/xml';
-// // import css from 'highlight.js/lib/languages/css';
-// // import ts from 'highlight.js/lib/languages/typescript';
-// // import yaml from 'highlight.js/lib/languages/yaml';
-// // import json from 'highlight.js/lib/languages/json';
-// // import php from 'highlight.js/lib/languages/php';
-// hljs.registerLanguage('javascript', javascript);
-// hljs.registerLanguage('xml', xml);
-// hljs.registerLanguage('css', css);
-// hljs.registerLanguage('ts', ts);
-// hljs.registerLanguage('yaml', yaml);
-// hljs.registerLanguage('json', json);
-// hljs.registerLanguage('php', php);
-// export type Language = 'html' | 'css' | 'js' | 'ts';
-// export default function getCode(code: string, language: Language | null): string {
-// 	let ret = code;
-// 	// remove the first empty line
-// 	ret = ret.replace(/^[^\S\r\n]*\n/, '');
-// 	// remove the last empty line
-// 	ret = ret.replace(/\n[^\S\r\n]*$/, '');
-// 	let lines = ret.split('\n');
-// 	let indent: null | number = null; // number of spaces to remove from each line
-// 	lines = lines.map((line) => {
-// 		if (indent === null) {
-// 			// find the indent
-// 			const match = line.match(/^(\s*)/);
-// 			indent = match ? match[1].length : 0;
-// 		}
-// 		if (line.substring(0, indent).trim() !== '') {
-// 			return line;
-// 		}
-// 		// remove the indent
-// 		line = line.substring(indent);
-// 		return line;
-// 	});
-// 	ret = lines.join('\n');
-// 	return language === null ?
-// 		encodeHtml(ret) :
-// 		hljs.highlight(ret, { language }).value;
-// }
-// function encodeHtml(str: string): string {
-// 	return str.replace(/&/g, '&')
-// 		.replace(/</g, '&lt;')
-// 		.replace(/>/g, '&gt;')
-// 		.replace(/"/g, '&quot;')
-// 		.replace(/'/g, '&#39;');
-// }
+import { codeToHtml } from 'shiki';
+export function sanitizeLines(code) {
+    let ret = code;
+    // remove the first empty line
+    ret = ret.replace(/^[^\S\r\n]*\n/, '');
+    // remove the last empty line
+    ret = ret.replace(/\n[^\S\r\n]*$/, '');
+    let lines = ret.split('\n');
+    let indent = null; // number of spaces to remove from each line
+    lines = lines.map((line) => {
+        if (indent === null) {
+            // find the indent
+            const match = line.match(/^(\s*)/);
+            indent = match ? match[1].length : 0;
+        }
+        if (line.substring(0, indent).trim() !== '') {
+            return line;
+        }
+        // remove the indent
+        line = line.substring(indent);
+        return line;
+    });
+    return lines.join('\n');
+}
+export async function getCode(code, language) {
+    return await codeToHtml(code, {
+        lang: language || 'text',
+        themes: {
+            light: 'vitesse-light',
+            dark: 'nord'
+        }
+    });
+}

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -98,7 +98,7 @@
 				--input-size={size + 'px'}
 				isDialog={false}
 				isAlpha={alpha}
-				on:input={handleInput}
+				onInput={handleInput}
 			/>
 		</div>
 	{/if}

package/dist/components/Dark/DarkProvider.svelte

@@ -11,7 +11,7 @@
 	<script>
 		// to prevent white screen on page load
 		// until the dark mode is initialized from the store
-		const isDarkMode = !!localStorage.getItem("hds-dark");
+		const isDarkMode = !!localStorage.getItem('hds-dark');
 		if (isDarkMode) {
 			document.documentElement.classList.add('dark');
 		}

package/dist/components/DetailCard/DetailCard.svelte

@@ -1,56 +1,53 @@
 <script lang="ts">
-	import type { Snippet } from "svelte";
+	import type { Snippet } from 'svelte';
 
-    interface Props {
-        label: string | Snippet;
-        content?: string;
-        children?: Snippet;
-    }
+	interface Props {
+		label: string | Snippet;
+		content?: string;
+		children?: Snippet;
+	}
 
-    let { label, content,  children }: Props = $props();
-
-    const labelId = `detail-card-${Math.random().toString(36).substring(2, 15)}`;
+	let { label, content, children }: Props = $props();
 
+	const labelId = `detail-card-${Math.random().toString(36).substring(2, 15)}`;
 </script>
 
 <div class="detail-card" role="region" aria-labelledby={labelId}>
-
-    <div class="label" id={labelId}>
-        {#if typeof label === "string"}
-            {label}
-        {:else}
-            {@render label()}
-        {/if}
-    </div>
-
-    <div class="content">
-        {#if children}
-            {@render children()}
-        {:else if content}
-            {content}
-        {/if}
-    </div>
-
+	<div class="label" id={labelId}>
+		{#if typeof label === 'string'}
+			{label}
+		{:else}
+			{@render label()}
+		{/if}
+	</div>
+
+	<div class="content">
+		{#if children}
+			{@render children()}
+		{:else if content}
+			{content}
+		{/if}
+	</div>
 </div>
 
 <style>
-    .detail-card {
-        background: var(--hover);
-        padding: 15px 20px;
-        border-radius: var(--box-radius);
-        border: 1px solid var(--border);
-    }
-    .label {
-        display: block;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--text-light);
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        margin-bottom: 6px;
-    }
-    .content {
-        font-size: 14px;
-        word-break: break-word;
-    }
-</style>
+	.detail-card {
+		background: var(--hover);
+		padding: 15px 20px;
+		border-radius: var(--box-radius);
+		border: 1px solid var(--border);
+	}
+	.label {
+		display: block;
+		font-size: 12px;
+		font-weight: 600;
+		color: var(--text-light);
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		margin-bottom: 6px;
+	}
+	.content {
+		font-size: 14px;
+		word-break: break-word;
+	}
+</style>

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

@@ -1,4 +1,4 @@
-import type { Snippet } from "svelte";
+import type { Snippet } from 'svelte';
 interface Props {
     label: string | Snippet;
     content?: string;

package/dist/components/DetailCard/DetailCards.svelte

@@ -1,25 +1,22 @@
 <script lang="ts">
-	import type { Snippet } from "svelte";
+	import type { Snippet } from 'svelte';
 
-    interface Props {
-        children?: Snippet
-        min?: number;
-    }
+	interface Props {
+		children?: Snippet;
+		min?: number;
+	}
 
-    let { 
-        children,
-        min = 300
-    }: Props = $props();
+	let { children, min = 300 }: Props = $props();
 </script>
 
 <div class="cards" style="--min: {min}px">
-    {@render children?.()}
+	{@render children?.()}
 </div>
 
 <style>
-    .cards {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
-        gap: 10px;
-    }
-</style>
+	.cards {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
+		gap: 10px;
+	}
+</style>

package/dist/components/DetailCard/DetailCards.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from "svelte";
+import type { Snippet } from 'svelte';
 interface Props {
     children?: Snippet;
     min?: number;

package/dist/components/Dropdown/DropdownContent.svelte

@@ -68,8 +68,7 @@
 				}
 			} else if (align === 'center') {
 				contentWrap.style.left =
-					Math.max(triggerRect.left + triggerRect.width / 2 - width / 2, SPACE_AROUND) +
-					'px';
+					Math.max(triggerRect.left + triggerRect.width / 2 - width / 2, SPACE_AROUND) + 'px';
 			} else if (align === 'end') {
 				contentWrap.style.left = Math.max(triggerRect.right - width, SPACE_AROUND) + 'px';
 			}

package/dist/components/EmojiPicker/EmojiSelector.svelte

@@ -84,19 +84,12 @@
 			</div>
 			<div class="right">
 				{#if removable}
-					<Button size="small" color="input" onclick={() => onselect(undefined)}
-						>Remove</Button
-					>
+					<Button size="small" color="input" onclick={() => onselect(undefined)}>Remove</Button>
 				{/if}
 			</div>
 		</div>
 		<div class="input">
-			<TextInput
-				block
-				bind:value={search}
-				bind:input={searchInput}
-				onkeydown={handleKeydown}
-			/>
+			<TextInput block bind:value={search} bind:input={searchInput} onkeydown={handleKeydown} />
 		</div>
 		<div class="groups" bind:this={groupsEl}>
 			{#if searchedEmojis !== null}
@@ -131,11 +124,7 @@
 {/snippet}
 
 {#snippet SectionButton(icon: string, group: number)}
-	<button
-		class="section-button"
-		data-group={group}
-		onclick={() => handleSectionButtonClick(group)}
-	>
+	<button class="section-button" data-group={group} onclick={() => handleSectionButtonClick(group)}>
 		{icon}
 	</button>
 {/snippet}

package/dist/components/EmojiPicker/emojidata.js

@@ -20,10 +20,10 @@ function isZWJEmoji(emoji) {
 export async function loadEmojis() {
     const data = await import('emojibase-data/en/compact.json');
     const emojiData = data.default;
-    emojis = emojiData.filter(emoji => emoji.group !== undefined);
-    const groupedEmojis = groups.map(group => ({
+    emojis = emojiData.filter((emoji) => emoji.group !== undefined);
+    const groupedEmojis = groups.map((group) => ({
         name: group,
-        emojis: emojis.filter(emoji => emoji.group === groups.indexOf(group) && !isZWJEmoji(emoji.unicode))
+        emojis: emojis.filter((emoji) => emoji.group === groups.indexOf(group) && !isZWJEmoji(emoji.unicode))
     }));
     // remove components
     groupedEmojis.splice(2, 1);

package/dist/components/FileUploader/Preview/Preview.svelte

@@ -193,7 +193,7 @@
 					</div>
 					<TextInput
 						bind:value={imageName}
-						on:input={handleNameChange}
+						oninput={handleNameChange}
 						placeholder="Image Name"
 						state={nameError ? 'error' : 'default'}
 						disabled={!shouldUpload}

package/dist/components/FileUploader/TabUpload/TabUpload.svelte

@@ -46,9 +46,7 @@
 			.then((blob) => {
 				if (!validateMimeType(blob.type)) {
 					const names = getMimeNamesJoined();
-					toast.error(
-						`Only ${names} files are allowed. Current file type is ${blob.type}`
-					);
+					toast.error(`Only ${names} files are allowed. Current file type is ${blob.type}`);
 					return;
 				}
 
@@ -223,7 +221,7 @@
 						block
 						placeholder="Enter image URL"
 						bind:value={byUrl}
-						on:keyup={(e) => e.key === 'Enter' && handleFetch()}
+						onkeyup={(e) => e.key === 'Enter' && handleFetch()}
 						bind:input={byUrlInputEl}
 					/>
 					<Button disabled={byUrl.trim() === ''} on:click={handleFetch}>

package/dist/components/FileUploader/file-uploader.js

@@ -1,11 +1,11 @@
-import { get, writable } from "svelte/store";
+import { get, writable } from 'svelte/store';
 export let fileUploaderConfig = writable(null);
 export let selectedFile = writable(null);
 const defaults = {
     type: 'image',
     uploader: null,
     allowedMimeTypes: [],
-    maxFileSizeInMB: 10,
+    maxFileSizeInMB: 10
 };
 // UploadedFile is uploaded
 // null means cancelled
@@ -19,7 +19,7 @@ export function uploadFile(config) {
             },
             onUpload: (file) => {
                 resolve(file);
-            },
+            }
         };
         if (config.allowedMimeTypes === undefined) {
             // set based on type
@@ -63,12 +63,7 @@ const ALLOWED_MIME_TYPES_IMAGE = [
     'image/apng',
     'image/avif'
 ];
-const ALLOWED_MIME_TYPES_AUDIO = [
-    'audio/mpeg',
-    'audio/ogg',
-    'audio/wav',
-    'audio/webm'
-];
+const ALLOWED_MIME_TYPES_AUDIO = ['audio/mpeg', 'audio/ogg', 'audio/wav', 'audio/webm'];
 export function validateMimeType(mimeType) {
     const config = getFileUploaderConfig();
     if (config.allowedMimeTypes.length === 0) {
@@ -81,7 +76,7 @@ export function getMimeNames() {
     if (config.allowedMimeTypes.length === 0) {
         return []; // all mime types allowed
     }
-    return config.allowedMimeTypes.map(m => m.split('/')[1]?.split('+')[0]);
+    return config.allowedMimeTypes.map((m) => m.split('/')[1]?.split('+')[0]);
 }
 export function getMimeNamesJoined() {
     const names = getMimeNames();

package/dist/components/FileUploader/helpers.js

@@ -23,7 +23,7 @@ export function toKebabCase(str) {
     }
     return str
         .replace(/\s+/g, '-') // Replace spaces with hyphens
-        .replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`) // Add hyphen before capital letters and convert them to lowercase
+        .replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`) // Add hyphen before capital letters and convert them to lowercase
         .replace(/_+/g, '-') // Replace underscores with hyphens
         .replace(/--+/g, '-') // Replace multiple hyphens with a single one
         .replace(/^-|-$|^-+|-+$/g, '') // Remove leading and trailing hyphens

package/dist/components/IconButton/IconButton.svelte

@@ -168,11 +168,7 @@
 .button.fill-light.orange {
   background-color: var(--orange-light);
   color: var(--orange-dark);
-  --local-hover-shadow-color: color-mix(
-  	in srgb,
-  	var(--orange-light) 40%,
-  	transparent
-  );
+  --local-hover-shadow-color: color-mix(in srgb, var(--orange-light) 40%, transparent);
 }
 .button.outline {
   border: 1px solid;
@@ -214,11 +210,7 @@
   background-color: var(--accent-light);
   border-color: var(--accent);
   color: var(--accent);
-  --local-hover-shadow-color: color-mix(
-  	in srgb,
-  	var(--accent-light) 40%,
-  	transparent
-  );
+  --local-hover-shadow-color: color-mix(in srgb, var(--accent-light) 40%, transparent);
 }
 .button.outline-fill.gray {
   background-color: var(--gray-light);

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