@hyvor/design 1.0.12 → 1.1.0

package/dist/components/BoxShadowPicker/BoxShadowPicker.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import ColorPicker from '../ColorPicker/ColorPicker.svelte';
+	import Divider from '../Divider/Divider.svelte';
+	import Dropdown from '../Dropdown/Dropdown.svelte';
+	import Slider from '../Slider/Slider.svelte';
+	import SplitControl from '../SplitControl/SplitControl.svelte';
+	import Tooltip from '../Tooltip/Tooltip.svelte';
+	import ShadowPreviewBox from './ShadowPreviewBox.svelte';
+
+	interface Props {
+		value: string;
+		previewSize?: number;
+		oninput?: (value: string) => void;
+		align?: 'start' | 'center' | 'end';
+		position?: 'left' | 'right' | 'bottom' | 'top';
+	}
+
+	let {
+		value = $bindable(),
+		previewSize = 40,
+		oninput,
+		align = 'center',
+		position = 'bottom'
+	}: Props = $props();
+
+	let shadowState = $state(parseBoxShadow(value));
+
+	function parseBoxShadow(value: string) {
+		const regex = /(-?\d+px)\s+(-?\d+px)\s+(\d+px)\s+(\d+px)\s+(#[0-9a-fA-F]{8}|\#[0-9a-fA-F]{6})/;
+
+		const match = value.match(regex);
+
+		if (match) {
+			return {
+				xOffset: parseInt(match[1]),
+				yOffset: parseInt(match[2]),
+				blur: parseInt(match[3]),
+				spread: parseInt(match[4]),
+				color: match[5]
+			};
+		}
+
+		return {
+			xOffset: 0,
+			yOffset: 0,
+			blur: 0,
+			spread: 0,
+			color: '#00000011'
+		};
+	}
+
+	let cssValue = $derived.by(() => {
+		const { xOffset, yOffset, blur, spread, color } = shadowState;
+		const val = `${xOffset}px ${yOffset}px ${blur}px ${spread}px ${color}`;
+		return val;
+	});
+
+	function handleInput() {
+		value = cssValue;
+		if (oninput) {
+			oninput(value);
+		}
+	}
+
+	function valuePxFormat(value: number) {
+		return value + 'px';
+	}
+</script>
+
+<Dropdown {align} {position} width={500}>
+	{#snippet trigger()}
+		<Tooltip text="Click to edit box shadow">
+			<button>
+				<ShadowPreviewBox boxShadow={cssValue} size={previewSize} />
+			</button>
+		</Tooltip>
+	{/snippet}
+
+	{#snippet content()}
+		<div class="shadow-preview">
+			<ShadowPreviewBox boxShadow={cssValue} size={100} />
+			<div class="css-value">
+				{cssValue}
+			</div>
+		</div>
+
+		<Divider margin={15} />
+
+		<SplitControl label="X Offset">
+			<Slider
+				bind:value={shadowState.xOffset}
+				min={-40}
+				max={40}
+				step={1}
+				valueFormat={valuePxFormat}
+				onchange={handleInput}
+			/>
+		</SplitControl>
+		<SplitControl label="Y Offset">
+			<Slider
+				bind:value={shadowState.yOffset}
+				min={-40}
+				max={40}
+				step={1}
+				valueFormat={valuePxFormat}
+				onchange={handleInput}
+			/>
+		</SplitControl>
+		<SplitControl label="Blur">
+			<Slider
+				bind:value={shadowState.blur}
+				min={0}
+				max={20}
+				step={1}
+				valueFormat={valuePxFormat}
+				onchange={handleInput}
+			/>
+		</SplitControl>
+		<SplitControl label="Spread">
+			<Slider
+				bind:value={shadowState.spread}
+				min={0}
+				max={20}
+				step={1}
+				valueFormat={valuePxFormat}
+				onchange={handleInput}
+			/>
+		</SplitControl>
+		<SplitControl label="Color">
+			<ColorPicker bind:color={shadowState.color} alpha oninput={handleInput} />
+		</SplitControl>
+	{/snippet}
+</Dropdown>
+
+<style>
+	.shadow-preview {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		padding: 15px;
+	}
+	.css-value {
+		font-size: 12px;
+		color: var(--text-light);
+		margin-top: 15px;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    value: string;
+    previewSize?: number;
+    oninput?: (value: string) => void;
+    align?: 'start' | 'center' | 'end';
+    position?: 'left' | 'right' | 'bottom' | 'top';
+}
+declare const BoxShadowPicker: import("svelte").Component<Props, {}, "value">;
+type BoxShadowPicker = ReturnType<typeof BoxShadowPicker>;
+export default BoxShadowPicker;

package/dist/components/BoxShadowPicker/ShadowPreviewBox.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	let { boxShadow, size = 60 }: { boxShadow: string; size?: number } = $props();
+</script>
+
+<div class="wrap" style="width: {size}px; height: {size}px;">
+	<div
+		class="box"
+		style="box-shadow: {boxShadow}; width: {(size * 3) / 5}px; height: {(size * 3) / 5}px;"
+	></div>
+</div>
+
+<style>
+	.wrap {
+		background-color: var(--input);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 4px;
+		overflow: hidden;
+	}
+	.box {
+		background-color: #fff;
+		border-radius: 4px;
+	}
+</style>

package/dist/components/BoxShadowPicker/ShadowPreviewBox.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    boxShadow: string;
+    size?: number;
+};
+declare const ShadowPreviewBox: import("svelte").Component<$$ComponentProps, {}, "">;
+type ShadowPreviewBox = ReturnType<typeof ShadowPreviewBox>;
+export default ShadowPreviewBox;

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -8,13 +8,19 @@
 		size?: number;
 		show?: boolean;
 		'aria-label'?: string;
+		alpha?: boolean;
+		oninput?: (color: string) => void;
+		onchange?: (color: string) => void;
 	}
 
 	let {
 		color = $bindable('#000000'),
 		size = 30,
 		show = $bindable(false),
-		'aria-label': ariaLabel = ''
+		'aria-label': ariaLabel = '',
+		alpha = false,
+		oninput,
+		onchange
 	}: Props = $props();
 
 	const dispatch = createEventDispatcher<{
@@ -24,10 +30,12 @@
 
 	function handleInput() {
 		dispatch('input', color);
+		oninput?.(color);
 	}
 
 	function handleClose() {
 		dispatch('change', color);
+		onchange?.(color);
 		show = false;
 	}
 </script>
@@ -58,7 +66,7 @@
 				bind:hex={color}
 				--input-size={size + 'px'}
 				isDialog={false}
-				isAlpha={false}
+				isAlpha={alpha}
 				on:input={handleInput}
 			/>
 		</div>

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

@@ -4,6 +4,9 @@ interface Props {
     size?: number;
     show?: boolean;
     'aria-label'?: string;
+    alpha?: boolean;
+    oninput?: (color: string) => void;
+    onchange?: (color: string) => void;
 }
 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> & {

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('scheme-dark');
+		const isDarkMode = !!localStorage.getItem("hds-dark");
 		if (isDarkMode) {
 			document.documentElement.classList.add('dark');
 		}

package/dist/components/HyvorBar/BarProducts.svelte

@@ -2,16 +2,22 @@
 	const PRODUCTS = {
 		talk: {
 			name: 'Hyvor Talk',
-			logo: LogoTalk,
+			logo: undefined,
 			url: 'talk.hyvor.com',
-			description: 'Comments, Newsletters, Memberships'
+			description: 'Commenting Platform'
 		},
 		blogs: {
 			name: 'Hyvor Blogs',
-			logo: LogoBlogs,
+			logo: undefined,
 			url: 'blogs.hyvor.com',
 			description: 'Blogging Platform'
 		},
+		post: {
+			name: 'Hyvor Post',
+			url: 'post.hyvor.com',
+			logo: undefined,
+			description: 'Newsletter Platform',
+		},
 		fortguard: {
 			name: 'FortGuard',
 			logo: LogoFortguard,
@@ -23,18 +29,17 @@
 </script>
 
 <script lang="ts">
-	import LogoBlogs from '../../marketing/Logo/LogoBlogs.svelte';
 	import LogoFortguard from '../../marketing/Logo/LogoFortguard.svelte';
-	import LogoTalk from '../../marketing/Logo/LogoTalk.svelte';
 	import { ActionList, ActionListItem, Button, Dropdown } from '../index.js';
 	import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
 	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
 
 	interface Props {
 		mobile?: boolean;
+		instance: string;
 	}
 
-	let { mobile = false }: Props = $props();
+	let { mobile = false, instance }: Props = $props();
 </script>
 
 <Dropdown align={mobile ? 'center' : 'end'} width={325}>
@@ -58,7 +63,11 @@
 							</div>
 						{/snippet}
 						{#snippet start()}
-							<product.logo size={20} />
+							{#if product.logo}
+								<product.logo size={20} />
+							{:else}
+								<img src={instance + "/api/public/logo/" + key + ".svg"} alt={product.name} width="20" height="20" />
+							{/if}
 						{/snippet}
 						{#snippet end()}
 							<IconBoxArrowUpRight size={12} />

package/dist/components/HyvorBar/BarSupport.svelte

@@ -7,7 +7,8 @@
 	import IconInfoCircle from '@hyvor/icons/IconInfoCircle';
 	import IconFileEarmark from '@hyvor/icons/IconFileEarmark';
 	import IconChatDots from '@hyvor/icons/IconChatDots';
-	import IconTwitterX from '@hyvor/icons/IconTwitterX';
+	import IconBluesky from '@hyvor/icons/IconBluesky';
+	import IconTwitter from '@hyvor/icons/IconTwitter';
 	import IconLinkedin from '@hyvor/icons/IconLinkedin';
 
 	import ActionListGroup from '../ActionList/ActionListGroup.svelte';
@@ -125,12 +126,23 @@
 						{/snippet}
 					</ActionListItem>
 				</a>
+				<a href="https://bsky.app/profile/hyvor.bsky.social" target="_blank">
+					<ActionListItem>
+						Bluesky
+						{#snippet start()}
+							<IconBluesky />
+						{/snippet}
+						{#snippet end()}
+							<IconBoxArrowUpRight size={12} />
+						{/snippet}
+					</ActionListItem>
+				</a>
 				{#if config.twitter}
 					<a href={config.twitter} target="_blank">
 						<ActionListItem>
-							Twitter
+							X (Twitter)
 							{#snippet start()}
-								<IconTwitterX />
+								<IconTwitter />
 							{/snippet}
 							{#snippet end()}
 								<IconBoxArrowUpRight size={12} />

package/dist/components/HyvorBar/HyvorBar.svelte

@@ -3,18 +3,15 @@
 	import { onMount } from 'svelte';
 	import BarProducts, { PRODUCTS } from './BarProducts.svelte';
 	import BarSupport from './BarSupport.svelte';
-	import { loadBarUser, type BarConfig, type BarProduct } from './bar.js';
+	import { loadBarUser, setInstanceAndProduct, type BarConfig, type BarProduct } from './bar.js';
 	import BarUpdates from './BarUpdates.svelte';
 	import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
-	import LogoTalk from '../../marketing/Logo/LogoTalk.svelte';
-	import LogoBlogs from '../../marketing/Logo/LogoBlogs.svelte';
-	import LogoCore from '../../marketing/Logo/LogoCore.svelte';
 	import BarNotice from './Notice/BarNotice.svelte';
 	import BarLicense from './Notice/BarLicense.svelte';
 
 	interface Props {
 		instance?: string;
-		product: BarProduct;
+		product: string;
 		config?: Partial<BarConfig>;
 	}
 
@@ -43,27 +40,16 @@
 	}
 
 	onMount(() => {
-		loadBarUser(instance, product);
+		setInstanceAndProduct(instance, product);
+		loadBarUser();
 	});
 
-	function getLogo() {
-		if (product === 'talk') {
-			return LogoTalk;
-		} else if (product === 'blogs') {
-			return LogoBlogs;
-		} else {
-			return LogoCore;
-		}
-	}
-
 	function getName() {
 		if (config.name) {
 			return config.name;
 		}
 		return (PRODUCTS as any)[product]?.name || 'HYVOR';
 	}
-
-	const LogoComponent = getLogo();
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -72,7 +58,12 @@
 	<div class="inner hds-box">
 		<div class="left">
 			<a class="logo" href="/">
-				<LogoComponent size={20} />
+				<img
+					src={instance + '/api/public/logo/' + product + '.svg'}
+					alt={product}
+					width="20"
+					height="20"
+				/>
 				<span class="name">
 					{getName()}
 				</span>
@@ -84,7 +75,7 @@
 
 			<div class="hidden-on-mobile">
 				<BarSupport config={configComplete} {product} mobile={mobileShow} />
-				<BarProducts mobile={mobileShow} />
+				<BarProducts {instance} mobile={mobileShow} />
 				<BarUpdates {instance} {product} />
 			</div>
 

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

@@ -1,7 +1,7 @@
-import { type BarConfig, type BarProduct } from './bar.js';
+import { type BarConfig } from './bar.js';
 interface Props {
     instance?: string;
-    product: BarProduct;
+    product: string;
     config?: Partial<BarConfig>;
 }
 declare const HyvorBar: import("svelte").Component<Props, {}, "">;

package/dist/components/HyvorBar/bar.d.ts

@@ -1,4 +1,4 @@
-export type BarProduct = 'core' | 'talk' | 'blogs';
+export type BarProduct = string | 'core';
 export interface BarConfig {
     name: string | null;
     docs: boolean;
@@ -34,11 +34,20 @@ export declare const barUser: import("svelte/store").Writable<BarUser | null>;
 export declare const barUnreadUpdates: import("svelte/store").Writable<number>;
 export declare const barLicense: import("svelte/store").Writable<BarResolvedLicense | null>;
 export declare const barHasFailedInvoices: import("svelte/store").Writable<boolean>;
-export declare function loadBarUser(instance: string, product: BarProduct): void;
+export declare function setInstanceAndProduct(instance_: string, product_: string): void;
+export declare function loadBarUser(): void;
 export declare class UnreadUpdatesTimeLocalStorage {
     static KEY: string;
     static get(): number | null;
     static set(value: string): void;
     static setNow(): void;
 }
+export declare const bar: {
+    /**
+     * Refetches data like user info, unread updates, billing data, etc.
+     * But does not show a loader
+     * This is useful to create after, for example, a user creates a new blog
+     */
+    reload: () => void;
+};
 export {};

package/dist/components/HyvorBar/bar.js

@@ -1,9 +1,15 @@
 import { writable } from 'svelte/store';
+let instance = '';
+let product = 'core';
 export const barUser = writable(null);
 export const barUnreadUpdates = writable(0);
 export const barLicense = writable(null);
 export const barHasFailedInvoices = writable(false);
-export function loadBarUser(instance, product) {
+export function setInstanceAndProduct(instance_, product_) {
+    instance = instance_;
+    product = product_;
+}
+export function loadBarUser() {
     const query = new URLSearchParams();
     query.set('product', product);
     const lastUnreadTime = UnreadUpdatesTimeLocalStorage.get();
@@ -76,3 +82,14 @@ class BarLocalStorage {
         }
     }
 }
+// exported to be used from outside
+export const bar = {
+    /**
+     * Refetches data like user info, unread updates, billing data, etc.
+     * But does not show a loader
+     * This is useful to create after, for example, a user creates a new blog
+     */
+    reload: () => {
+        loadBarUser();
+    }
+};

package/dist/components/Internationalization/InternationalizationProvider.svelte

@@ -4,11 +4,12 @@
 
 	interface Props {
 		languages: Language[];
+		forceLanguage?: string;
 		children?: import('svelte').Snippet;
 	}
 
-	let { languages, children }: Props = $props();
-	const i18n = new InternationalizationService(languages);
+	let { languages, forceLanguage, children }: Props = $props();
+	const i18n = new InternationalizationService(languages, forceLanguage);
 	const locale = i18n.locale;
 	setContext('i18n', i18n);
 </script>

package/dist/components/Internationalization/InternationalizationProvider.svelte.d.ts

@@ -1,6 +1,7 @@
 import { type Language } from './i18n.js';
 interface Props {
     languages: Language[];
+    forceLanguage?: string;
     children?: import('svelte').Snippet;
 }
 declare const InternationalizationProvider: import("svelte").Component<Props, {}, "">;

package/dist/components/Internationalization/LanguageToggle.svelte

@@ -5,9 +5,10 @@
 	import { type Language, type InternationalizationService } from './i18n.js';
 	import ActionList from '../ActionList/ActionList.svelte';
 	import ActionListItem from '../ActionList/ActionListItem.svelte';
-	import Text from '../Text/Text.svelte';
 	import IconCaretDown from '@hyvor/icons/IconCaretDown';
 	import IconButton from '../IconButton/IconButton.svelte';
+	import { get } from 'svelte/store';
+	import { goto } from '$app/navigation';
 
 	interface Props {
 		position?: ComponentProps<typeof Dropdown>['position'];
@@ -15,6 +16,7 @@
 		caret?: Component;
 		icon?: boolean;
 		size?: 'medium' | 'small';
+		staticPage?: boolean;
 	}
 
 	let {
@@ -22,7 +24,8 @@
 		align = 'start',
 		caret = IconCaretDown,
 		icon = false,
-		size = 'medium'
+		size = 'medium',
+		staticPage = false
 	}: Props = $props();
 
 	const i18n = getContext<InternationalizationService>('i18n');
@@ -31,8 +34,20 @@
 	let show = $state(false);
 
 	function handleClick(language: Language) {
-		i18n.setLocale(language.code);
 		show = false;
+
+		if (staticPage) {
+			const currentLocale = get(i18n.locale);
+
+			if (language.code === currentLocale) {
+				return;
+			}
+			const url = new URL(window.location.href);
+			url.pathname = url.pathname.replace(`/${currentLocale}`, `/${language.code}`);
+			goto(url.toString());
+		}
+
+		i18n.setLocale(language.code);
 	}
 </script>
 
@@ -68,9 +83,6 @@
 						<span class="name">
 							{language.name}
 						</span>
-						<Text small light>
-							{language.region}
-						</Text>
 					</ActionListItem>
 				{/each}
 			</ActionList>
@@ -80,7 +92,6 @@
 
 <style>
 	.flag {
-		margin-right: 6px;
-		font-size: 20px;
+		margin-right: 3px;
 	}
 </style>

package/dist/components/Internationalization/LanguageToggle.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     caret?: Component;
     icon?: boolean;
     size?: 'medium' | 'small';
+    staticPage?: boolean;
 }
 declare const LanguageToggle: Component<Props, {}, "">;
 type LanguageToggle = ReturnType<typeof LanguageToggle>;

package/dist/components/Internationalization/i18n.d.ts

@@ -1,11 +1,11 @@
 import { type Readable, type Writable } from 'svelte/store';
 import T from './T.svelte';
 import type { ToDotPaths, I18nStrings, PrimitiveType } from './types.js';
-export type i18nLoaderType = () => Promise<any>;
+export type i18nLoaderType = () => Promise<Record<string, any>>;
+export declare const LOCALE_LOCAL_STORAGE_KEY = "hds-language";
 interface LanguageBase {
     name: string;
     flag: string;
-    region: string;
     code: string;
     default?: boolean;
 }
@@ -14,6 +14,7 @@ interface LanguageWithStrings extends LanguageBase {
 }
 interface LanguageWithLoader extends LanguageBase {
     loader: i18nLoaderType;
+    strings?: Record<string, any>;
 }
 export type Language = LanguageWithStrings | LanguageWithLoader;
 export declare class InternationalizationService<StringsT extends I18nStrings = I18nStrings> {
@@ -23,13 +24,17 @@ export declare class InternationalizationService<StringsT extends I18nStrings =
     strings: Writable<{}>;
     stringsCache: Map<string, Record<string, any>>;
     defaultStrings: Record<string, any>;
-    constructor(languages: Language[]);
+    constructor(languages: Language[], forceLanguage?: string);
+    static getLocaleFromLocalStorage(): string | null;
+    private setLocaleOnLocalStorage;
     setStrings(code: string): void;
-    setLocale(code: string): void;
+    setLocale(code: string): Promise<void>;
+    getLocale(): string;
     register(language: Language): void;
     found(code: string): boolean;
     languageByCode(code: string): LanguageWithLoader | undefined;
     t(key: ToDotPaths<StringsT>, params?: Record<string, PrimitiveType>): string;
+    static getClosestLanguageCode(code: string, availableCodes: string[]): string | null;
     T: typeof T<StringsT>;
 }
 export declare function getStringByKey(messages: Record<string, any>, key: string): string | undefined;

package/dist/components/Internationalization/i18n.js

@@ -1,7 +1,8 @@
 import { deepmerge } from 'deepmerge-ts';
-import { writable, derived } from 'svelte/store';
+import { writable, derived, get } from 'svelte/store';
 import { t } from './t.js';
 import T from './T.svelte';
+export const LOCALE_LOCAL_STORAGE_KEY = 'hds-language';
 export class InternationalizationService {
     languages = [];
     locale;
@@ -9,7 +10,7 @@ export class InternationalizationService {
     strings = writable({});
     stringsCache = new Map();
     defaultStrings;
-    constructor(languages) {
+    constructor(languages, forceLanguage) {
         const defaultLanguage = languages.find((l) => l.default);
         if (!defaultLanguage) {
             throw new Error('Default language not found');
@@ -26,6 +27,28 @@ export class InternationalizationService {
         for (const language of languages) {
             this.register(language);
         }
+        const localeStorageLocale = InternationalizationService.getLocaleFromLocalStorage();
+        const browserLocale = InternationalizationService.getClosestLanguageCode(navigator.language, this.languages.map((l) => l.code));
+        if (forceLanguage) {
+            this.setLocale(forceLanguage);
+        }
+        else if (localeStorageLocale) {
+            this.setLocale(localeStorageLocale);
+        }
+        else if (browserLocale) {
+            this.setLocale(browserLocale);
+        }
+    }
+    static getLocaleFromLocalStorage() {
+        if (typeof window !== 'undefined') {
+            return localStorage.getItem(LOCALE_LOCAL_STORAGE_KEY);
+        }
+        return null;
+    }
+    setLocaleOnLocalStorage(code) {
+        if (typeof window !== 'undefined') {
+            localStorage.setItem(LOCALE_LOCAL_STORAGE_KEY, code);
+        }
     }
     setStrings(code) {
         const defaultStrings = this.defaultStrings;
@@ -33,20 +56,28 @@ export class InternationalizationService {
         const merged = deepmerge(defaultStrings, strings);
         this.strings.set(merged);
     }
-    setLocale(code) {
+    async setLocale(code) {
         if (this.stringsCache.has(code)) {
             this.setStrings(code);
             this.locale.set(code);
         }
         else {
-            this.languageByCode(code)
-                ?.loader()
-                .then(({ default: strings }) => {
-                this.stringsCache.set(code, strings);
-                this.setStrings(code);
-                this.locale.set(code);
-            });
+            const language = this.languageByCode(code);
+            if (!language) {
+                throw new Error(`Language with code ${code} not found`);
+            }
+            let strings = language.strings;
+            if (!strings) {
+                strings = await language.loader();
+            }
+            this.stringsCache.set(code, strings);
+            this.setStrings(code);
+            this.locale.set(code);
         }
+        this.setLocaleOnLocalStorage(code);
+    }
+    getLocale() {
+        return get(this.locale);
     }
     register(language) {
         this.languages.push({
@@ -65,6 +96,18 @@ export class InternationalizationService {
     t(key, params = {}) {
         return t(key, params, this);
     }
+    static getClosestLanguageCode(code, availableCodes) {
+        if (availableCodes.includes(code)) {
+            return code;
+        }
+        const codeLanguagePart = code.split('-')[0];
+        for (const availableCode of availableCodes) {
+            if (availableCode.split('-')[0] === codeLanguagePart) {
+                return availableCode;
+            }
+        }
+        return null;
+    }
     T = T;
 }
 export function getStringByKey(messages, key) {

package/dist/components/NavLink/NavLink.svelte

@@ -68,6 +68,10 @@
 		border-left: 3px solid var(--accent);
 	}
 
+	:global(:root.dark) a.active {
+		background-color: color-mix(in srgb, var(--accent-lightest), transparent 80%);
+	}
+
 	a.disabled {
 		cursor: not-allowed;
 		pointer-events: none;

package/dist/components/Slider/Slider.svelte

@@ -8,9 +8,19 @@
 		step?: number;
 		// export let disabled = false;
 		dots?: boolean;
+		onchange?: (value: number) => void;
+		valueFormat?: (value: number) => string;
 	}
 
-	let { min, max, value = $bindable(), step = 1, dots = false }: Props = $props();
+	let {
+		min,
+		max,
+		value = $bindable(),
+		step = 1,
+		dots = false,
+		onchange,
+		valueFormat = (val) => val.toString()
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher<{
 		change: number;
@@ -75,6 +85,7 @@
 		const newValue = min + (x / width) * (max - min);
 		value = toStep(newValue);
 		dispatch('change', value);
+		onchange?.(value);
 	}
 </script>
 
@@ -90,7 +101,7 @@
 		<div class="progress" style="width: {progress}%"></div>
 		<button class="handle" style="left: {progress}%">
 			<span class="tip">
-				{value}
+				{valueFormat(value)}
 			</span>
 		</button>
 

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

@@ -4,6 +4,8 @@ interface Props {
     value: number;
     step?: number;
     dots?: boolean;
+    onchange?: (value: number) => void;
+    valueFormat?: (value: number) => string;
 }
 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> & {

package/dist/components/Usage/Usage.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	// import byteFormatter from '../../../lib/helper/byte-formatter';
+
+	interface Props {
+		name: string;
+		current: number;
+		limit: number;
+		bytes?: boolean;
+		warningPercentage?: number;
+		dangerPercentage?: number;
+		notIncludedText?: string;
+	}
+
+	let {
+		name,
+		current,
+		limit,
+		bytes = false,
+		warningPercentage = 85,
+		dangerPercentage = 95,
+		notIncludedText = 'Your license does not include this feature.'
+	}: Props = $props();
+
+	let width = $state('0%');
+	let percentage = $derived(Math.min(limit === 0 ? 100 : (current / limit) * 100, 100));
+
+	onMount(() => {
+		setTimeout(() => {
+			width = percentage + '%';
+		}, 200);
+	});
+
+	function byteFormatter(bytes: number) {
+		const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+		if (bytes == 0) return '0 Bytes';
+		const i = parseInt(String(Math.floor(Math.log(bytes) / Math.log(1000))));
+		return Math.round(bytes / Math.pow(1000, i)) + ' ' + sizes[i];
+	}
+
+	function getReadableValue(num: number) {
+		if (bytes) {
+			return byteFormatter(num);
+		}
+		return num.toLocaleString();
+	}
+
+	let color = $derived.by(() => {
+		if (percentage >= dangerPercentage) {
+			return 'var(--red-dark)';
+		} else if (percentage >= warningPercentage) {
+			return 'var(--orange-dark)';
+		} else {
+			return 'var(--accent)';
+		}
+	});
+</script>
+
+<div class="usage-bar">
+	<div class="usage-bar-top">
+		<div class="usage-name">
+			{name}
+		</div>
+		{#if limit > 0}
+			<div class="usage-number">
+				<span class="usage-now" style:color={color === 'var(--accent)' ? 'var(--text)' : color}
+					>{getReadableValue(current)}</span
+				>
+				<span class="usage-full">/ {getReadableValue(limit)}</span>
+			</div>
+		{/if}
+	</div>
+
+	{#if limit === 0}
+		<div class="feature-not-included">{notIncludedText}</div>
+	{:else}
+		<div class="usage-bar-bar">
+			<div class="usage-bar-fill" style:width style:background={color}></div>
+		</div>
+	{/if}
+</div>
+
+<style>.usage-bar-top {
+  display: flex;
+}
+
+.usage-name {
+  flex: 1;
+  font-size: 14px;
+}
+
+.usage-now {
+  margin-right: 4px;
+  font-weight: 600;
+}
+
+.usage-full {
+  color: var(--text-light);
+  font-size: 12px;
+}
+
+.usage-bar-bar {
+  margin: 6px 0 15px;
+  width: 100%;
+  height: 15px;
+  background: var(--accent-light);
+  border-radius: 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.usage-bar-fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: var(--accent);
+  border-radius: 20px;
+  transition: 0.3s width ease-out;
+}
+
+.feature-not-included {
+  color: var(--text-light);
+  font-size: 12px;
+  margin: 5px 0 15px;
+}</style>

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

@@ -0,0 +1,12 @@
+interface Props {
+    name: string;
+    current: number;
+    limit: number;
+    bytes?: boolean;
+    warningPercentage?: number;
+    dangerPercentage?: number;
+    notIncludedText?: string;
+}
+declare const Usage: import("svelte").Component<Props, {}, "">;
+type Usage = ReturnType<typeof Usage>;
+export default Usage;

package/dist/components/index.d.ts

@@ -7,10 +7,12 @@ 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 BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.svelte';
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
 export { default as Dropdown } from './Dropdown/Dropdown.svelte';
 export { default as Divider } from './Divider/Divider.svelte';
@@ -20,6 +22,7 @@ export { default as InputGroup } from './FormControl/InputGroup.svelte';
 export { default as Label } from './FormControl/Label.svelte';
 export { default as Validation } from './FormControl/Validation.svelte';
 export { default as HyvorBar } from './HyvorBar/HyvorBar.svelte';
+export { bar as hyvorBar } from './HyvorBar/bar.js';
 export { default as IconButton } from './IconButton/IconButton.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
@@ -42,6 +45,7 @@ export { default as Text } from './Text/Text.svelte';
 export { default as TextInput } from './TextInput/TextInput.svelte';
 export { default as toast } from './Toast/toast.js';
 export { default as Tooltip } from './Tooltip/Tooltip.svelte';
+export { default as Usage } from './Usage/Usage.svelte';
 export { default as IconMessage } from './IconMessage/IconMessage.svelte';
 export { clickOutside } from './directives/clickOutside.js';
 export { default as InternationalizationProvider } from './Internationalization/InternationalizationProvider.svelte';

package/dist/components/index.js

@@ -7,10 +7,12 @@ 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 BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.svelte';
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
 export { default as Dropdown } from './Dropdown/Dropdown.svelte';
 export { default as Divider } from './Divider/Divider.svelte';
@@ -20,6 +22,7 @@ export { default as InputGroup } from './FormControl/InputGroup.svelte';
 export { default as Label } from './FormControl/Label.svelte';
 export { default as Validation } from './FormControl/Validation.svelte';
 export { default as HyvorBar } from './HyvorBar/HyvorBar.svelte';
+export { bar as hyvorBar } from './HyvorBar/bar.js';
 export { default as IconButton } from './IconButton/IconButton.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
@@ -42,6 +45,7 @@ export { default as Text } from './Text/Text.svelte';
 export { default as TextInput } from './TextInput/TextInput.svelte';
 export { default as toast } from './Toast/toast.js';
 export { default as Tooltip } from './Tooltip/Tooltip.svelte';
+export { default as Usage } from './Usage/Usage.svelte';
 export { default as IconMessage } from './IconMessage/IconMessage.svelte';
 // directives
 export { clickOutside } from './directives/clickOutside.js';

package/dist/marketing/Footer/Footer.svelte

@@ -89,15 +89,14 @@
 						<a href={social.youtube} target="_blank" rel="nofollow"><IconYoutube /></a>
 					{/if}
 					{#if social.linkedin}
-						<a href={social.linkedin} target="_blank" rel="nofollow"><IconLinkedin /></a
-						>
+						<a href={social.linkedin} target="_blank" rel="nofollow"><IconLinkedin /></a>
 					{/if}
 				</div>
 			</div>
 
 			<div class="footer-top-right">
 				<span class="language-toggle-wrap">
-					<LanguageToggle />
+					<LanguageToggle align="end" position="top" staticPage />
 				</span>
 			</div>
 		</div>

package/dist/marketing/Header/Header.svelte

@@ -8,6 +8,7 @@
 	interface Props {
 		logo: string;
 		name?: string;
+		href?: string;
 		subName?: undefined | string;
 		darkToggle?: boolean;
 		center?: import('svelte').Snippet;
@@ -17,6 +18,7 @@
 	let {
 		logo,
 		name = 'HYVOR',
+		href = '/',
 		subName = undefined,
 		darkToggle = true,
 		center,
@@ -27,7 +29,7 @@
 <header>
 	<Container as="nav">
 		<div class="nav-start">
-			<a class="nav-brand" href="/">
+			<a class="nav-brand" {href}>
 				<img src={logo} alt="Hyvor Logo" width="30" height="30" />
 				<span class="brand-product">
 					<span class="brand">{name}</span>

package/dist/marketing/Header/Header.svelte.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     logo: string;
     name?: string;
+    href?: string;
     subName?: undefined | string;
     darkToggle?: boolean;
     center?: import('svelte').Snippet;

package/dist/stores/dark.d.ts

@@ -1,2 +1,3 @@
 export declare const dark: import("svelte/store").Writable<boolean>;
+export declare const DARK_LOCAL_STORAGE_KEY = "hds-dark";
 export declare function setInitialState(): void;

package/dist/stores/dark.js

@@ -1,5 +1,6 @@
 import { writable } from 'svelte/store';
 export const dark = writable(false);
+export const DARK_LOCAL_STORAGE_KEY = 'hds-dark';
 export function setInitialState() {
     const isDark = isDarkScheme();
     if (isDark) {
@@ -8,16 +9,16 @@ export function setInitialState() {
     dark.subscribe((isDark) => {
         if (isDark) {
             document.documentElement.classList.add('dark');
-            window.localStorage.setItem('scheme-dark', 'true');
+            window.localStorage.setItem(DARK_LOCAL_STORAGE_KEY, 'true');
         }
         else {
             document.documentElement.classList.remove('dark');
-            window.localStorage.removeItem('scheme-dark');
+            window.localStorage.removeItem(DARK_LOCAL_STORAGE_KEY);
         }
     });
 }
 function isDarkScheme() {
-    const localStorageData = window.localStorage.getItem('scheme-dark');
+    const localStorageData = window.localStorage.getItem(DARK_LOCAL_STORAGE_KEY);
     if (localStorageData) {
         return !!localStorageData;
     }

package/dist/variables.scss

@@ -63,7 +63,7 @@
 	--box-background: #1c1c1c;
 
 	--accent-light: #555;
-	--accent-lightest: #333;
+	--accent-lightest: #2d2d2d;
 
 	--border: #4a4a4a;
 	--link: #7cb6e1;

package/package.json

@@ -48,7 +48,7 @@
 	},
 	"dependencies": {
 		"@fontsource/readex-pro": "^5.0.8",
-		"@hyvor/icons": "^1.1.0",
+		"@hyvor/icons": "^1.1.1",
 		"deepmerge-ts": "^5.1.0",
 		"highlight.js": "^11.9.0",
 		"intl-messageformat": "^10.5.11",
@@ -59,5 +59,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.0.12"
+	"version": "1.1.0"
 }

package/dist/marketing/Logo/LogoBlogs.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-	interface Props {
-		size?: number;
-	}
-
-	let { size = 40 }: Props = $props();
-</script>
-
-<svg width={size} height={size} viewBox="0 0 132.29166 132.29167" version="1.1">
-	<g id="layer1">
-		<g id="g1067">
-			<rect
-				style="mix-blend-mode:normal;fill:#f1e8e8;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:7.15826;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-				id="rect1001"
-				width="77.870262"
-				height="123.57672"
-				x="26.535261"
-				y="5.0260782"
-				ry="38.935131"
-				transform="rotate(-0.58211807)"
-			/>
-			<path
-				id="path1003"
-				style="mix-blend-mode:normal;fill:#896c6b;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:7.15826;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-				d="m 105.07895,65.75026 0.23219,22.852048 C 105.53028,110.17126 88.342531,127.71185 66.773582,127.931 45.204632,128.15014 27.664036,110.96239 27.44489,89.393446 L 27.212709,66.541399 Z"
-			/>
-			<g id="g1011" transform="matrix(1.0727824,0,0,1.0727824,-4.7282157,-11.786447)">
-				<path
-					id="path1005"
-					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
-					d="m 59.684412,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
-				/>
-				<path
-					id="path1007"
-					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
-					d="m 86.142762,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
-				/>
-				<path
-					id="path1009"
-					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
-					d="m 72.699971,55.496735 c 0,2.381274 -3.065933,4.311677 -6.847956,4.311677 -3.782022,0 -6.847956,-1.930403 -6.847956,-4.311677"
-				/>
-			</g>
-		</g>
-	</g>
-</svg>

package/dist/marketing/Logo/LogoBlogs.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    size?: number;
-}
-declare const LogoBlogs: import("svelte").Component<Props, {}, "">;
-type LogoBlogs = ReturnType<typeof LogoBlogs>;
-export default LogoBlogs;

package/dist/marketing/Logo/LogoCore.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-	interface Props {
-		size?: number;
-	}
-
-	let { size = 40 }: Props = $props();
-</script>
-
-<svg width={size} height={size} viewBox="0 0 500 500" version="1.1">
-	<g id="layer1">
-		<g id="g5140" transform="translate(-986.41349,-538.31731)">
-			<rect
-				style="mix-blend-mode:normal;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:27.0548;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-				id="rect1001"
-				width="294.31281"
-				height="467.06161"
-				x="1081.1842"
-				y="567.30737"
-				ry="147.1564"
-				transform="rotate(-0.582118)"
-			/>
-			<path
-				id="path1003"
-				style="mix-blend-mode:normal;fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:27.0548;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-				d="m 1383.5623,786.82223 0.8775,86.36995 c 0.8283,81.52045 -64.1333,147.81562 -145.6537,148.64392 -81.5205,0.8282 -147.8157,-64.13337 -148.6439,-145.65379 l -0.8776,-86.36995 z"
-			/>
-			<g id="g1011" transform="matrix(4.0546107,0,0,4.0546107,968.54304,493.77011)">
-				<path
-					id="path1005"
-					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
-					d="m 59.684412,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
-				/>
-				<path
-					id="path1007"
-					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
-					d="m 86.142762,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
-				/>
-				<path
-					id="path1009"
-					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
-					d="m 72.699971,55.496735 c 0,2.381274 -3.065933,4.311677 -6.847956,4.311677 -3.782022,0 -6.847956,-1.930403 -6.847956,-4.311677"
-				/>
-			</g>
-		</g>
-	</g>
-</svg>

package/dist/marketing/Logo/LogoCore.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    size?: number;
-}
-declare const LogoCore: import("svelte").Component<Props, {}, "">;
-type LogoCore = ReturnType<typeof LogoCore>;
-export default LogoCore;

package/dist/marketing/Logo/LogoTalk.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-	interface Props {
-		size?: number;
-	}
-
-	let { size = 40 }: Props = $props();
-</script>
-
-<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 132.292 132.292"
-	><g stroke-width="7.158" stroke="#000" fill-rule="evenodd"
-		><rect
-			width="77.87"
-			height="123.577"
-			x="26.535"
-			y="5.026"
-			ry="38.935"
-			transform="rotate(359.418)"
-			fill="#fff3d3"
-		/><path
-			d="M105.079 65.75l.232 22.852c.219 21.569-16.969 39.11-38.538 39.329s-39.11-16.969-39.329-38.538l-.232-22.852z"
-			fill="#ffd969"
-		/></g
-	><path
-		d="M59.3 31.89c0-2.555-3.289-4.625-7.346-4.625s-7.346 2.071-7.346 4.625m43.076 0c0-2.555-3.289-4.625-7.346-4.625s-7.346 2.071-7.346 4.625m.271 15.859c0 2.555-3.289 4.625-7.346 4.625s-7.346-2.071-7.346-4.625"
-		stroke="#000"
-		paint-order="stroke fill markers"
-		fill="none"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="6.65"
-	/></svg
->

package/dist/marketing/Logo/LogoTalk.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    size?: number;
-}
-declare const LogoTalk: import("svelte").Component<Props, {}, "">;
-type LogoTalk = ReturnType<typeof LogoTalk>;
-export default LogoTalk;