@hyvor/design 1.0.13 → 1.1.1

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';
@@ -15,6 +16,8 @@
 	import type { BarConfig, BarProduct } from './bar.js';
 	import G2 from './img/G2.svelte';
 	import Trustpilot from './img/Trustpilot.svelte';
+	import { SOCIAL_LINKS } from '../../marketing/social.js';
+	import IconTwitterX from '@hyvor/icons/IconTwitterX';
 
 	let supportDropdown = $state(false);
 
@@ -114,7 +117,7 @@
 			{/if}
 
 			<ActionListGroup title="Social">
-				<a href="https://hyvor.com/api/go/discord" target="_blank">
+				<a href={SOCIAL_LINKS.discord} target="_blank">
 					<ActionListItem>
 						Discord
 						{#snippet start()}
@@ -125,20 +128,29 @@
 						{/snippet}
 					</ActionListItem>
 				</a>
-				{#if config.twitter}
-					<a href={config.twitter} target="_blank">
-						<ActionListItem>
-							Twitter
-							{#snippet start()}
-								<IconTwitterX />
-							{/snippet}
-							{#snippet end()}
-								<IconBoxArrowUpRight size={12} />
-							{/snippet}
-						</ActionListItem>
-					</a>
-				{/if}
-				<a href="https://www.linkedin.com/company/hyvor" target="_blank">
+				<a href={SOCIAL_LINKS.blueksy} target="_blank">
+					<ActionListItem>
+						Bluesky
+						{#snippet start()}
+							<IconBluesky />
+						{/snippet}
+						{#snippet end()}
+							<IconBoxArrowUpRight size={12} />
+						{/snippet}
+					</ActionListItem>
+				</a>
+				<a href={SOCIAL_LINKS.x} target="_blank">
+					<ActionListItem>
+						Twitter
+						{#snippet start()}
+							<IconTwitterX />
+						{/snippet}
+						{#snippet end()}
+							<IconBoxArrowUpRight size={12} />
+						{/snippet}
+					</ActionListItem>
+				</a>
+				<a href={SOCIAL_LINKS.linkedin} target="_blank">
 					<ActionListItem>
 						Linkedin
 						{#snippet start()}

package/dist/components/HyvorBar/HyvorBar.svelte

@@ -6,15 +6,12 @@
 	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>;
 	}
 
@@ -47,24 +44,12 @@
 		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 -->
@@ -73,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>
@@ -85,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,9 +1,8 @@
-export type BarProduct = 'core' | 'talk' | 'blogs';
+export type BarProduct = string | 'core';
 export interface BarConfig {
     name: string | null;
     docs: boolean;
     chat: boolean;
-    twitter: string | null;
     g2: string | null;
 }
 interface BarUser {
@@ -34,7 +33,7 @@ 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 setInstanceAndProduct(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;

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;