@hyvor/design 1.1.14 → 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/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.14"
+	"version": "1.1.15"
 }