@hyvor/design 1.1.13 → 1.1.15

package/dist/components/Dropdown/Dropdown.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import DropdownContent from './DropdownContent.svelte';
+	import type { DropdownAlign, DropdownPosition } from './dropdown.types.js';
 
 	interface Props {
 		show?: boolean;
 		width?: number;
 		relative?: boolean;
 		closeOnOutsideClick?: boolean;
-		align?: 'start' | 'center' | 'end';
-		position?: 'left' | 'right' | 'bottom' | 'top';
+		align?: DropdownAlign;
+		position?: DropdownPosition;
 		trigger?: Snippet;
 		content?: Snippet;
+		contentPadding?: number;
 	}
 
 	let {
@@ -21,7 +23,8 @@
 		align = 'start',
 		position = 'bottom',
 		trigger,
-		content
+		content,
+		contentPadding
 	}: Props = $props();
 
 	let triggerEl: HTMLElement | undefined = $state();
@@ -52,6 +55,7 @@
 			{position}
 			{relative}
 			trigger={triggerEl}
+			padding={contentPadding}
 		>
 			{@render content?.()}
 		</DropdownContent>

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

@@ -1,13 +1,15 @@
 import type { Snippet } from 'svelte';
+import type { DropdownAlign, DropdownPosition } from './dropdown.types.js';
 interface Props {
     show?: boolean;
     width?: number;
     relative?: boolean;
     closeOnOutsideClick?: boolean;
-    align?: 'start' | 'center' | 'end';
-    position?: 'left' | 'right' | 'bottom' | 'top';
+    align?: DropdownAlign;
+    position?: DropdownPosition;
     trigger?: Snippet;
     content?: Snippet;
+    contentPadding?: number;
 }
 declare const Dropdown: import("svelte").Component<Props, {}, "show">;
 type Dropdown = ReturnType<typeof Dropdown>;

package/dist/components/Dropdown/DropdownContent.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { onMount } from 'svelte';
 	import { clickOutside } from '../directives/clickOutside.js';
 	import debounce from '../directives/debounce.js';
@@ -15,6 +13,7 @@
 		position: 'left' | 'right' | 'bottom' | 'top';
 		trigger: HTMLElement;
 		children?: import('svelte').Snippet;
+		padding?: number;
 	}
 
 	let {
@@ -25,7 +24,8 @@
 		align,
 		position,
 		trigger,
-		children
+		children,
+		padding = 10
 	}: Props = $props();
 
 	let contentWrap: HTMLElement | undefined = $state();
@@ -94,7 +94,7 @@
 		position;
 		align;
 		positionWrap();
-	})
+	});
 
 	function debouncedPosition() {
 		debounce(positionWrap, 10)();
@@ -142,7 +142,7 @@
 	style="width: {width}px"
 	transition:slideIn
 >
-	<div class="hds-box content">
+	<div class="hds-box content" style:padding="{padding}px">
 		{@render children?.()}
 	</div>
 </div>
@@ -150,8 +150,4 @@
 <style>.content-wrap {
   position: fixed;
   z-index: 1000000;
-}
-
-.content-wrap > .content {
-  padding: 10px;
 }</style>

package/dist/components/Dropdown/DropdownContent.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props {
     position: 'left' | 'right' | 'bottom' | 'top';
     trigger: HTMLElement;
     children?: import('svelte').Snippet;
+    padding?: number;
 }
 declare const DropdownContent: import("svelte").Component<Props, {}, "show">;
 type DropdownContent = ReturnType<typeof DropdownContent>;

package/dist/components/Dropdown/dropdown.types.d.ts

@@ -0,0 +1,2 @@
+export type DropdownAlign = 'start' | 'center' | 'end';
+export type DropdownPosition = 'left' | 'right' | 'bottom' | 'top';

package/dist/components/Dropdown/dropdown.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/EmojiPicker/EmojiPicker.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import Dropdown from '../Dropdown/Dropdown.svelte';
+	import type { DropdownAlign, DropdownPosition } from '../Dropdown/dropdown.types.js';
+	import IconButton from '../IconButton/IconButton.svelte';
+	import type { IconButtonColor, IconButtonSize } from '../IconButton/iconButton.types.js';
+	import EmojiSelector from './EmojiSelector.svelte';
+
+	interface Props {
+		emoji?: string;
+		iconButtonSize?: IconButtonSize;
+		iconButtonColor?: IconButtonColor;
+		dropdownAlign?: DropdownAlign;
+		dropdownPosition?: DropdownPosition;
+		onselect?: (emoji: string | undefined) => void;
+		removable?: boolean;
+	}
+
+	let show = $state(false);
+
+	let {
+		emoji = $bindable(undefined),
+		iconButtonSize = undefined,
+		iconButtonColor = undefined,
+		dropdownAlign = 'center',
+		dropdownPosition = 'bottom',
+		onselect = undefined,
+		removable = false
+	}: Props = $props();
+
+	function handleOnSelect(e: string | undefined) {
+		emoji = e;
+		show = false;
+		onselect?.(e);
+	}
+
+	function handleClose() {
+		show = false;
+	}
+</script>
+
+<Dropdown
+	bind:show
+	align={dropdownAlign}
+	position={dropdownPosition}
+	width={420}
+	contentPadding={0}
+>
+	{#snippet trigger()}
+		<IconButton size={iconButtonSize} color={iconButtonColor}>
+			{#if emoji === undefined}
+				<span class="no-emoji">😀</span>
+			{:else}
+				<span class="emoji">{emoji}</span>
+			{/if}
+		</IconButton>
+	{/snippet}
+	{#snippet content()}
+		<EmojiSelector onselect={handleOnSelect} onclose={handleClose} {removable} />
+	{/snippet}
+</Dropdown>
+
+<style>
+	.no-emoji {
+		filter: grayscale(100%);
+		font-size: 18px;
+	}
+	.emoji {
+		font-size: 18px;
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { DropdownAlign, DropdownPosition } from '../Dropdown/dropdown.types.js';
+import type { IconButtonColor, IconButtonSize } from '../IconButton/iconButton.types.js';
+interface Props {
+    emoji?: string;
+    iconButtonSize?: IconButtonSize;
+    iconButtonColor?: IconButtonColor;
+    dropdownAlign?: DropdownAlign;
+    dropdownPosition?: DropdownPosition;
+    onselect?: (emoji: string | undefined) => void;
+    removable?: boolean;
+}
+declare const EmojiPicker: import("svelte").Component<Props, {}, "emoji">;
+type EmojiPicker = ReturnType<typeof EmojiPicker>;
+export default EmojiPicker;

package/dist/components/EmojiPicker/EmojiSelector.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+	import { loadEmojis, type CompactEmoji, type EmojiGroup } from './emojidata.js';
+	import Loader from '../Loader/Loader.svelte';
+	import TextInput from '../TextInput/TextInput.svelte';
+	import Button from '../Button/Button.svelte';
+
+	interface Props {
+		onselect: (emoji: string | undefined) => void;
+		onclose: () => void;
+		removable: boolean;
+	}
+
+	let { onselect, onclose, removable }: Props = $props();
+
+	let loading = $state(true);
+	let searchInput = $state({} as HTMLInputElement);
+	let groupsEl = $state({} as HTMLDivElement);
+
+	let data: EmojiGroup[] = $state([]);
+	let search = $state('');
+
+	let searchedEmojis: CompactEmoji[] | null = $derived.by(() => {
+		let searchVal = search.trim().toLowerCase();
+		if (!searchVal) return null;
+
+		return data
+			.flatMap((group) => group.emojis)
+			.filter((emoji) => {
+				const shortcodes = emoji.shortcodes || [];
+				const tags = emoji.tags || [];
+
+				const searchIn = [emoji.unicode, emoji.annotation, ...shortcodes, ...tags]
+					.filter((s) => Boolean(s))
+					.map((s) => s.toLowerCase());
+
+				return searchIn.some((code) => code.includes(searchVal));
+			});
+	});
+
+	async function load() {
+		data = await loadEmojis();
+		loading = false;
+
+		await tick();
+		searchInput?.focus();
+	}
+
+	function handleSectionButtonClick(group: number) {
+		if (!groupsEl) return;
+
+		const groupEl = groupsEl.querySelector(`.group[data-group="${group}"]`);
+		if (groupEl) {
+			groupEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			onclose();
+		}
+	}
+
+	onMount(() => {
+		load();
+	});
+</script>
+
+<div class="wrap">
+	{#if loading}
+		<Loader padding={100} block />
+	{:else}
+		<div class="header">
+			<div class="left">
+				{@render SectionButton('☺️', 0)}
+				{@render SectionButton('👋', 1)}
+				{@render SectionButton('😺', 2)}
+				{@render SectionButton('🍕', 3)}
+				{@render SectionButton('🗼', 4)}
+				{@render SectionButton('⚽', 5)}
+				{@render SectionButton('📕', 6)}
+				{@render SectionButton('✔️', 7)}
+				{@render SectionButton('🇨🇵', 8)}
+			</div>
+			<div class="right">
+				{#if removable}
+					<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}
+			/>
+		</div>
+		<div class="groups" bind:this={groupsEl}>
+			{#if searchedEmojis !== null}
+				{#if searchedEmojis.length === 0}
+					<div class="no-results">No results found</div>
+				{:else}
+					<div class="group">
+						<div class="name">Search Results</div>
+						{@render Emojis(searchedEmojis)}
+					</div>
+				{/if}
+			{:else}
+				{#each data as group, i}
+					<div class="group" data-group={i}>
+						<div class="name">{group.name}</div>
+						{@render Emojis(group.emojis)}
+					</div>
+				{/each}
+			{/if}
+		</div>
+	{/if}
+</div>
+
+{#snippet Emojis(emojis: CompactEmoji[])}
+	<div class="emojis">
+		{#each emojis as emoji}
+			<button class="emoji" onclick={() => onselect(emoji.unicode)}>
+				{emoji.unicode}
+			</button>
+		{/each}
+	</div>
+{/snippet}
+
+{#snippet SectionButton(icon: string, group: number)}
+	<button
+		class="section-button"
+		data-group={group}
+		onclick={() => handleSectionButtonClick(group)}
+	>
+		{icon}
+	</button>
+{/snippet}
+
+<style>
+	.group {
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 20px;
+	}
+	.group .name {
+		font-weight: 600;
+		margin-bottom: 10px;
+	}
+	.input {
+		padding: 0 10px;
+		margin: 10px 0;
+	}
+	.groups {
+		padding: 15px;
+		padding-top: 5px;
+		max-height: 370px;
+		overflow-y: auto;
+	}
+	.wrap {
+	}
+	.emojis {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	.emoji {
+		font-size: 22px;
+		cursor: pointer;
+		transition: transform 0.2s;
+		width: 34px;
+		height: 34px;
+		text-align: center;
+		border-radius: 5px;
+	}
+	.emoji:hover {
+		background-color: var(--hover-dark);
+	}
+
+	.no-results {
+		color: var(--text-light);
+		font-size: 14px;
+		text-align: center;
+		padding: 30px;
+	}
+
+	.header {
+		padding: 0 15px;
+		border-bottom: 1px solid var(--border);
+		display: flex;
+		align-items: center;
+	}
+	.header .left {
+		flex: 1;
+	}
+
+	.section-button {
+		font-size: 20px;
+		padding: 10px 4px;
+		cursor: pointer;
+		color: var(--text-light);
+		filter: grayscale(100%);
+		border-bottom: 2px solid transparent;
+		transition:
+			filter 0.2s,
+			border-bottom 0.2s;
+	}
+	.section-button:hover {
+		filter: grayscale(50%);
+		border-bottom: 2px solid var(--text-light);
+	}
+</style>

package/dist/components/EmojiPicker/EmojiSelector.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    onselect: (emoji: string | undefined) => void;
+    onclose: () => void;
+    removable: boolean;
+}
+declare const EmojiSelector: import("svelte").Component<Props, {}, "">;
+type EmojiSelector = ReturnType<typeof EmojiSelector>;
+export default EmojiSelector;

package/dist/components/EmojiPicker/emojidata.d.ts

@@ -0,0 +1,22 @@
+export interface CompactEmoji {
+    annotation: string;
+    group: number;
+    hexcode: string;
+    order: number;
+    shortcodes: string[];
+    tags: string[];
+    unicode: string;
+    skins: {
+        annotation: string;
+        group: number;
+        hexcode: string;
+        order: number;
+        shortcodes: string[];
+        unicode: string;
+    }[];
+}
+export interface EmojiGroup {
+    name: string;
+    emojis: CompactEmoji[];
+}
+export declare function loadEmojis(): Promise<EmojiGroup[]>;

package/dist/components/EmojiPicker/emojidata.js

@@ -0,0 +1,31 @@
+// https://emojibase.dev/docs/datasets/#compact-format
+let emojis = [];
+const groups = [
+    'Smileys & Emotion',
+    'People & Body',
+    'Components', // removed
+    'Animals & Nature',
+    'Food & Drink',
+    'Travel & Places',
+    'Activities',
+    'Objects',
+    'Symbols',
+    'Flags'
+];
+// check if the emoji is a ZWJ (Zero Width Joiner) sequence
+// when I tested on MacOS, ZWJs were shown as separate emojis
+function isZWJEmoji(emoji) {
+    return emoji.includes('\u200D');
+}
+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 => ({
+        name: group,
+        emojis: emojis.filter(emoji => emoji.group === groups.indexOf(group) && !isZWJEmoji(emoji.unicode))
+    }));
+    // remove components
+    groupedEmojis.splice(2, 1);
+    return groupedEmojis;
+}

package/dist/components/HyvorBar/BarUser.svelte

@@ -3,23 +3,27 @@
 	import ActionListItem from '../ActionList/ActionListItem.svelte';
 	import Dropdown from '../Dropdown/Dropdown.svelte';
 	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
-	import { barUser } from './bar.js';
 	import BarUserPreview from './BarUserPreview.svelte';
+	import BarUserPicture from './BarUserPicture.svelte';
 
 	interface Props {
 		instance: string;
+		logoutUrl?: string;
+		cloud: boolean;
 	}
 
-	let { instance }: Props = $props();
+	let { 
+		instance, 
+		logoutUrl = `${instance}/account/logout`,
+		cloud,
+	}: Props = $props();
 </script>
 
 <div class="wrap">
 	<Dropdown align="end" width={325}>
 		{#snippet trigger()}
 			<button class="user-wrap">
-				{#if $barUser}
-					<img class="user-picture" src={$barUser?.picture_url} alt={$barUser?.name} />
-				{/if}
+				<BarUserPicture />
 			</button>
 		{/snippet}
 
@@ -27,15 +31,19 @@
 			<ActionList>
 				<BarUserPreview />
 
-				<a href="{instance}/account" target="_blank">
-					<ActionListItem>
-						Manage Account
-						{#snippet end()}
-							<IconBoxArrowUpRight size={12} />
-						{/snippet}
-					</ActionListItem>
-				</a>
-				<a href="{instance}/account/logout">
+				{#if cloud}
+					<a href="{instance}/account" target="_blank">
+						<ActionListItem>
+							Manage Account
+							{#snippet end()}
+								<IconBoxArrowUpRight size={12} />
+							{/snippet}
+						</ActionListItem>
+					</a>
+				{/if}
+
+
+				<a href="{logoutUrl}">
 					<ActionListItem>Logout</ActionListItem>
 				</a>
 			</ActionList>
@@ -65,8 +73,4 @@
 	.user-wrap:hover {
 		box-shadow: 0 0 0 4px var(--input);
 	}
-	img {
-		width: 100%;
-		height: 100%;
-	}
 </style>

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

@@ -1,5 +1,7 @@
 interface Props {
     instance: string;
+    logoutUrl?: string;
+    cloud: boolean;
 }
 declare const BarUser: import("svelte").Component<Props, {}, "">;
 type BarUser = ReturnType<typeof BarUser>;

package/dist/components/HyvorBar/BarUserPicture.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { barUser } from "./bar.js";
+</script>
+
+
+{#if $barUser}
+    {#if $barUser.picture_url}
+        <img src={$barUser.picture_url} alt={$barUser.name} />
+    {:else}
+        <span class="user-placeholder">
+            {$barUser.name ? $barUser.name[0].toUpperCase() : '?'}
+        </span>
+    {/if}
+{/if}
+
+<style>
+    img {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+    }
+    .user-placeholder {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        color: var(--text);
+        font-size: 14px;
+        background-color: var(--input);
+    }
+</style>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BarUserPicture: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BarUserPicture = InstanceType<typeof BarUserPicture>;
+export default BarUserPicture;

package/dist/components/HyvorBar/BarUserPreview.svelte

@@ -1,14 +1,21 @@
 <script lang="ts">
 	import { barUser } from './bar.js';
+	import BarUserPicture from './BarUserPicture.svelte';
 </script>
 
 {#if $barUser}
 	<div class="preview">
 		<div class="left">
-			<img src={$barUser.picture_url} alt={$barUser.name} />
+			<BarUserPicture />
 		</div>
 		<div class="right">
-			<div class="username">@{$barUser.username}</div>
+			<div class="username">
+				{#if $barUser.username}
+					@{$barUser.username}
+				{:else if $barUser.name}
+					{$barUser.name}
+				{/if}
+			</div>
 			<div class="email">{$barUser.email}</div>
 		</div>
 	</div>

package/dist/components/HyvorBar/HyvorBar.svelte

@@ -3,7 +3,7 @@
 	import { onMount } from 'svelte';
 	import BarProducts, { PRODUCTS } from './BarProducts.svelte';
 	import BarSupport from './BarSupport.svelte';
-	import { loadBarUser, setInstanceAndProduct, type BarConfig, type BarProduct } from './bar.js';
+	import { barUser, initBar, setInstanceAndProduct, type BarConfig, type BarUser as BarUserType } from './bar.js';
 	import BarUpdates from './BarUpdates.svelte';
 	import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
 	import BarNotice from './Notice/BarNotice.svelte';
@@ -13,9 +13,31 @@
 		instance?: string;
 		product: string;
 		config?: Partial<BarConfig>;
+
+		// set a custom logo URL
+		// defaults to instance + '/api/public/logo/' + product + '.svg'
+		// recommended to use this for self-hostable products
+		logo?: string;
+
+		/**
+		 * Whether it is a HYVOR cloud-hosted product.
+		 * If false, we will hide some features
+		 */
+		cloud?: boolean;
+		authOverride?: {
+			user: BarUserType | null;
+			logoutUrl: string;
+		}
 	}
 
-	let { instance = 'https://hyvor.com', product, config = {} }: Props = $props();
+	let {
+		instance = 'https://hyvor.com', 
+		product, 
+		logo = `${instance}/api/public/logo/${product}.svg`,
+		config = {},
+		cloud = true,
+		authOverride = undefined
+	}: Props = $props();
 
 	let mobileShow = $state(false);
 
@@ -41,7 +63,14 @@
 
 	onMount(() => {
 		setInstanceAndProduct(instance, product);
-		loadBarUser();
+
+		if (cloud) {
+			initBar();
+		} else {
+			if (authOverride) {
+				barUser.set(authOverride.user);
+			}
+		}
 	});
 
 	function getName() {
@@ -59,7 +88,7 @@
 		<div class="left">
 			<a class="logo" href="/">
 				<img
-					src={instance + '/api/public/logo/' + product + '.svg'}
+					src={logo}
 					alt={product}
 					width="20"
 					height="20"
@@ -74,16 +103,20 @@
 			<BarNotice {instance} />
 
 			<div class="hidden-on-mobile">
-				<BarSupport config={configComplete} {product} mobile={mobileShow} />
-				<BarProducts {instance} mobile={mobileShow} />
-				<BarUpdates {instance} {product} />
+				{#if cloud}
+					<BarSupport config={configComplete} {product} mobile={mobileShow} />
+					<BarProducts {instance} mobile={mobileShow} />
+					<BarUpdates {instance} {product} />
+				{/if}
 			</div>
 
-			<div class="mobile">
-				<IconCaretDownFill />
-			</div>
+			{#if cloud}
+				<div class="mobile">
+					<IconCaretDownFill />
+				</div>
+			{/if}
 
-			<BarUser {instance} />
+			<BarUser {instance} logoutUrl={authOverride?.logoutUrl} {cloud} />
 		</div>
 	</div>
 

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

@@ -1,8 +1,18 @@
-import { type BarConfig } from './bar.js';
+import { type BarConfig, type BarUser as BarUserType } from './bar.js';
 interface Props {
     instance?: string;
     product: string;
     config?: Partial<BarConfig>;
+    logo?: string;
+    /**
+     * Whether it is a HYVOR cloud-hosted product.
+     * If false, we will hide some features
+     */
+    cloud?: boolean;
+    authOverride?: {
+        user: BarUserType | null;
+        logoutUrl: string;
+    };
 }
 declare const HyvorBar: import("svelte").Component<Props, {}, "">;
 type HyvorBar = ReturnType<typeof HyvorBar>;

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

@@ -5,11 +5,11 @@ export interface BarConfig {
     chat: boolean;
     g2: string | null;
 }
-interface BarUser {
+export interface BarUser {
     name: string | null;
-    username: string;
+    username?: string | null;
     email: string;
-    picture_url: string;
+    picture_url: string | null;
 }
 export interface BarUpdate {
     id: number;
@@ -34,7 +34,7 @@ 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_: string): void;
-export declare function loadBarUser(): void;
+export declare function initBar(): void;
 export declare class UnreadUpdatesTimeLocalStorage {
     static KEY: string;
     static get(): number | null;
@@ -49,4 +49,3 @@ export declare const bar: {
      */
     reload: () => void;
 };
-export {};

package/dist/components/HyvorBar/bar.js

@@ -9,7 +9,7 @@ export function setInstanceAndProduct(instance_, product_) {
     instance = instance_;
     product = product_;
 }
-export function loadBarUser() {
+export function initBar() {
     const query = new URLSearchParams();
     query.set('product', product);
     const lastUnreadTime = UnreadUpdatesTimeLocalStorage.get();
@@ -90,6 +90,6 @@ export const bar = {
      * This is useful to create after, for example, a user creates a new blog
      */
     reload: () => {
-        loadBarUser();
+        initBar();
     }
 };

package/dist/components/IconButton/IconButton.svelte

@@ -1,16 +1,28 @@
 <script lang="ts">
 	import { createBubbler } from 'svelte/legacy';
+	import type { IconButtonSize, IconButtonColor } from './iconButton.types.js';
+	import { legacyHandlers } from '../../legacy.js';
 
 	const bubble = createBubbler();
 
 	interface Props {
-		size?: 'small' | 'medium' | 'large' | number;
-		// export let color : 'accent' | 'soft' | 'invisible' | 'danger' = 'accent';
-		color?: 'accent' | 'gray' | 'input' | 'green' | 'red' | 'blue' | 'orange';
+		size?: IconButtonSize;
+		color?: IconButtonColor;
 		variant?: 'fill' | 'fill-light' | 'outline' | 'outline-fill' | 'invisible';
 		as?: 'button' | 'a';
 		children?: import('svelte').Snippet;
 		[key: string]: any;
+
+		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;
 	}
 
 	let {
@@ -19,6 +31,18 @@
 		variant = 'fill',
 		as = 'button',
 		children,
+
+		onkeyup,
+		onkeydown,
+		onkeypress,
+		onfocus,
+		onblur,
+		onclick,
+		onmouseover,
+		onmouseenter,
+		onmouseleave,
+		onchange,
+
 		...rest
 	}: Props = $props();
 
@@ -36,16 +60,16 @@
 	class="button {color} {variant}"
 	style:width={size}
 	style:height={size}
-	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')}
+	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'))}
 	role="button"
 	tabindex="0"
 	{...rest}

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

@@ -1,10 +1,21 @@
+import type { IconButtonSize, IconButtonColor } from './iconButton.types.js';
 interface Props {
-    size?: 'small' | 'medium' | 'large' | number;
-    color?: 'accent' | 'gray' | 'input' | 'green' | 'red' | 'blue' | 'orange';
+    size?: IconButtonSize;
+    color?: IconButtonColor;
     variant?: 'fill' | 'fill-light' | 'outline' | 'outline-fill' | 'invisible';
     as?: 'button' | 'a';
     children?: import('svelte').Snippet;
     [key: string]: any;
+    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;
 }
 declare const IconButton: import("svelte").Component<Props, {}, "size">;
 type IconButton = ReturnType<typeof IconButton>;

package/dist/components/IconButton/iconButton.types.d.ts

@@ -0,0 +1,2 @@
+export type IconButtonSize = 'small' | 'medium' | 'large' | number;
+export type IconButtonColor = 'accent' | 'gray' | 'input' | 'green' | 'red' | 'blue' | 'orange';

package/dist/components/IconButton/iconButton.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/TextInput/TextInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { legacyHandlers } from '../../legacy.js';
 	import { createBubbler } from 'svelte/legacy';
 
 	const bubble = createBubbler();
@@ -14,6 +15,18 @@
 		select?: boolean;
 		selectInput?: HTMLSelectElement;
 		[key: string]: any;
+
+		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;
+		oninput?: (event: InputEvent) => void;
 	}
 
 	let {
@@ -26,6 +39,19 @@
 		end,
 		select = false,
 		selectInput = $bindable({} as HTMLSelectElement),
+
+		onkeyup,
+		onkeydown,
+		onkeypress,
+		onfocus,
+		onblur,
+		onclick,
+		onmouseover,
+		onmouseenter,
+		onmouseleave,
+		onchange,
+		oninput,
+
 		...rest
 	}: Props = $props();
 </script>
@@ -42,17 +68,17 @@
 			{...rest}
 			bind:value
 			bind:this={selectInput}
-			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')}
-			oninput={bubble('input')}
+			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'))}
+			oninput={legacyHandlers(oninput, bubble('input'))}
 		>
 			{@render rest?.children()}
 		</select>
@@ -61,17 +87,17 @@
 			{...rest}
 			bind:value
 			bind:this={input}
-			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')}
-			oninput={bubble('input')}
+			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'))}
+			oninput={legacyHandlers(oninput, bubble('input'))}
 		/>
 	{/if}
 

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

@@ -9,6 +9,17 @@ interface Props {
     select?: boolean;
     selectInput?: HTMLSelectElement;
     [key: string]: any;
+    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;
+    oninput?: (event: InputEvent) => void;
 }
 declare const TextInput: import("svelte").Component<Props, {}, "value" | "input" | "selectInput">;
 type TextInput = ReturnType<typeof TextInput>;

package/dist/variables.scss

@@ -41,10 +41,13 @@
 	--gray-dark: #555;
 
 	--hover: #fafafa;
+	--hover-dark: #f0f0f0;
+
 	--link: #1d85d2;
 
 	--input: #f3f3f3;
-	--input-hover: #ccc; /* checkbox/radio */
+	--input-hover: #ccc;
+	/* checkbox/radio */
 
 	--box-shadow: 0 0 30px #0000000d;
 	--box-shadow-light: 0 0 10px 6px rgba(0, 0, 0, 0.06);
@@ -76,4 +79,4 @@ $breakpoint-xs: 320px;
 $breakpoint-sm: 576px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 992px;
-$breakpoint-xl: 1200px;
+$breakpoint-xl: 1200px;

package/package.json

@@ -50,6 +50,7 @@
 		"@fontsource/readex-pro": "^5.0.8",
 		"@hyvor/icons": "^1.1.1",
 		"deepmerge-ts": "^5.1.0",
+		"emojibase-data": "^16.0.3",
 		"highlight.js": "^11.9.0",
 		"intl-messageformat": "^10.5.11",
 		"svelte-awesome-color-picker": "^3.0.4",
@@ -59,5 +60,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.1.13"
+	"version": "1.1.15"
 }