@foxui/social 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2025 Florian
+
+Permission is hereby granted, free of
+charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+# 🦊 fox ui
+
+svelte 5 + tailwind 4 ui kit, social components
+
+- [Bluesky Login](https://flo-bit.dev/ui-kit/components/social/bluesky-login)
+- [Card Swiper](https://flo-bit.dev/ui-kit/components/social/card-swiper)
+- [Emoji Picker](https://flo-bit.dev/ui-kit/components/social/emoji-picker)
+- [Github Corner](https://flo-bit.dev/ui-kit/components/social/github-corner)
+- [Star Rating](https://flo-bit.dev/ui-kit/components/social/star-rating)
+- [User Profile](https://flo-bit.dev/ui-kit/components/social/user-profile)
+
+> **This is a public alpha release. Expect bugs and breaking changes.**
+
+[See all components here](https://flo-bit.dev/ui-kit)
+
+For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
+
+Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
+
+For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).

package/dist/components/blog-entry/BlogEntry.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { Badge, Button } from '@foxui/core';
+
+	const {
+		title,
+		description,
+		date,
+		image,
+		tags,
+		href
+	}: {
+		title: string;
+		description: string;
+		date: Date;
+		image?: string;
+		tags?: (
+			| {
+					tag: string;
+					href: string;
+			  }
+			| string
+		)[];
+		href: string;
+	} = $props();
+</script>
+
+<article class="group relative isolate flex w-full flex-col gap-8 md:flex-row">
+	{#if image}
+		<div class="relative aspect-[16/9] md:w-64 md:shrink-0">
+			<img
+				src={image}
+				alt=""
+				class="bg-base-50 dark:bg-base-900 absolute inset-0 h-full w-full rounded-2xl object-cover"
+			/>
+
+			<div
+				class="ring-base-900/10 dark:ring-base-100/10 absolute inset-0 rounded-2xl ring-1 ring-inset"
+			></div>
+		</div>
+	{/if}
+	<div>
+		<div class={'flex max-h-8.5 flex-wrap items-center gap-2 overflow-hidden p-1 text-xs'}>
+			<time datetime={date.toISOString()} class="text-base-500 mr-2 shrink-0">
+				{date.toLocaleDateString('en-us', {
+					year: 'numeric',
+					month: 'short',
+					day: 'numeric'
+				})}
+			</time>
+			{#if tags}
+				{#each tags as tag}
+					{#if typeof tag === 'object'}
+						<Button href={tag.href} size="sm" class="z-10 max-w-64 justify-start overflow-hidden">
+							{tag.tag}
+						</Button>
+					{:else}
+						<Badge size="sm" class="z-10 max-w-64 justify-start overflow-hidden">
+							{tag}
+						</Badge>
+					{/if}
+				{/each}
+			{/if}
+		</div>
+		<div class="max-w-xl">
+			<div class="text-base-900 dark:text-base-50 mt-3 text-lg leading-6 font-semibold">
+				<a {href}>
+					<span class="absolute inset-0"></span>
+					{title}
+				</a>
+
+				<div
+					class="bg-base-200/30 dark:bg-base-800/30 absolute -inset-2 -z-10 scale-95 opacity-0 transition-all duration-150 group-hover:scale-100 group-hover:opacity-100 sm:rounded-2xl md:-inset-4"
+				></div>
+			</div>
+			<p class="text-base-600 dark:text-base-400 mt-5 line-clamp-2 text-sm leading-6">
+				{@html description}
+			</p>
+		</div>
+	</div>
+</article>

package/dist/components/blog-entry/BlogEntry.svelte.d.ts

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    title: string;
+    description: string;
+    date: Date;
+    image?: string;
+    tags?: ({
+        tag: string;
+        href: string;
+    } | string)[];
+    href: string;
+};
+declare const BlogEntry: import("svelte").Component<$$ComponentProps, {}, "">;
+type BlogEntry = ReturnType<typeof BlogEntry>;
+export default BlogEntry;

package/dist/components/blog-entry/index.d.ts

@@ -0,0 +1 @@
+export { default as BlogEntry } from './BlogEntry.svelte';

package/dist/components/blog-entry/index.js

@@ -0,0 +1 @@
+export { default as BlogEntry } from './BlogEntry.svelte';

package/dist/components/bluesky-login/BlueskyLogin.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Button } from '@foxui/core';
+	import { BlueskyLoginModal, blueskyLoginModalState, type BlueskyLoginProps } from '.';
+
+	let { login, formAction, formMethod }: BlueskyLoginProps = $props();
+</script>
+
+<Button onclick={() => blueskyLoginModalState.show()}>
+	<svg
+		fill="currentColor"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="-40 -40 680 620"
+		version="1.1"
+		aria-hidden="true"
+	>
+		<path
+			d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
+		/>
+	</svg>
+	Login
+</Button>
+
+<BlueskyLoginModal {login} {formAction} {formMethod} />

package/dist/components/bluesky-login/BlueskyLogin.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type BlueskyLoginProps } from '.';
+declare const BlueskyLogin: import("svelte").Component<BlueskyLoginProps, {}, "">;
+type BlueskyLogin = ReturnType<typeof BlueskyLogin>;
+export default BlueskyLogin;

package/dist/components/bluesky-login/BlueskyLoginModal.svelte

@@ -0,0 +1,141 @@
+<script lang="ts" module>
+	export const blueskyLoginModalState = $state({
+		open: false,
+		show: () => (blueskyLoginModalState.open = true),
+		hide: () => (blueskyLoginModalState.open = false)
+	});
+</script>
+
+<script lang="ts">
+	import { Button, Modal, Subheading, Label, Input, Avatar } from '@foxui/core';
+	import type { BlueskyLoginProps } from '.';
+
+	let value = $state('');
+	let error: string | null = $state(null);
+	let loading = $state(false);
+
+	let { login, formAction, formMethod = 'get' }: BlueskyLoginProps = $props();
+
+	async function onLogin(handle: string) {
+		if (loading || !login) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const hide = await login(handle);
+
+			if (hide) {
+				blueskyLoginModalState.hide();
+				value = '';
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : String(err);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function onSubmit(evt: Event) {
+		if (formAction || !login) return;
+		evt.preventDefault();
+
+		await onLogin(value);
+	}
+
+	let input: HTMLInputElement | null = $state(null);
+
+	let lastLogin: { handle: string; avatar: string } | null = $state(null);
+
+	$effect(() => {
+		let lastLoginDid = localStorage.getItem('last-login');
+
+		if (lastLoginDid) {
+			let profile = localStorage.getItem(`profile-${lastLoginDid}`);
+
+			if (profile) {
+				lastLogin = JSON.parse(profile)
+			}
+		}
+	});
+</script>
+
+<Modal
+	bind:open={blueskyLoginModalState.open}
+	class="max-w-sm gap-2 p-4 sm:p-6"
+	onOpenAutoFocus={(e: Event) => {
+		e.preventDefault();
+		input?.focus();
+	}}
+>
+	<form onsubmit={onSubmit} action={formAction} method={formMethod} class="flex flex-col gap-2">
+		<Subheading class="mb-1 inline-flex items-center gap-2 text-xl font-bold">
+			<svg
+				fill="currentColor"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="-40 -40 680 620"
+				version="1.1"
+				class={['text-accent-600 dark:text-accent-400 size-6']}
+				aria-hidden="true"
+			>
+				<path
+					d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
+				/>
+			</svg>
+			Login with Bluesky</Subheading
+		>
+
+		<div class="text-base-600 dark:text-base-400 text-xs leading-5">
+			Don't have an account?
+			<br />
+			<a
+				href="https://bsky.app"
+				target="_blank"
+				class="text-accent-600 dark:text-accent-400 dark:hover:text-accent-500 hover:text-accent-500 font-medium transition-colors"
+			>
+				Sign up on bluesky
+			</a>, then come back here.
+		</div>
+
+		{#if lastLogin}
+			<Label for="bluesky-handle" class="mt-4 text-sm">Recent login:</Label>
+			<Button
+				class="max-w-xs overflow-x-hidden justify-start truncate"
+				variant="primary"
+				onclick={() => onLogin(lastLogin?.handle ?? '')}
+				disabled={loading}
+			>
+				<Avatar src={lastLogin.avatar} class="size-6" />
+
+				<div
+					class="text-accent-600 dark:text-accent-400 text-md max-w-full truncate overflow-x-hidden font-semibold"
+				>
+					<p>{loading ? 'Loading...' : lastLogin.handle}</p>
+				</div>
+			</Button>
+		{/if}
+
+		<div class="mt-4 w-full">
+			<Label for="bluesky-handle" class="text-sm">Your handle</Label>
+			<div class="mt-2">
+				<Input
+					bind:ref={input}
+					type="text"
+					name="bluesky-handle"
+					id="bluesky-handle"
+					placeholder="yourname.bsky.social"
+					class="w-full"
+					bind:value
+				/>
+			</div>
+		</div>
+
+		{#if error}
+			<p class="text-accent-500 mt-2 text-sm font-medium">{error}</p>
+		{/if}
+
+		<Button type="submit" class="mt-2 ml-auto w-full md:w-auto" disabled={loading}
+			>{loading ? 'Loading...' : 'Login'}</Button
+		>
+	</form>
+</Modal>

package/dist/components/bluesky-login/BlueskyLoginModal.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare const blueskyLoginModalState: {
+    open: boolean;
+    show: () => true;
+    hide: () => false;
+};
+import type { BlueskyLoginProps } from '.';
+declare const BlueskyLoginModal: import("svelte").Component<BlueskyLoginProps, {}, "">;
+type BlueskyLoginModal = ReturnType<typeof BlueskyLoginModal>;
+export default BlueskyLoginModal;

package/dist/components/bluesky-login/index.d.ts

@@ -0,0 +1,8 @@
+export { default as BlueskyLoginModal } from './BlueskyLoginModal.svelte';
+export { blueskyLoginModalState } from './BlueskyLoginModal.svelte';
+export { default as BlueskyLogin } from './BlueskyLogin.svelte';
+export type BlueskyLoginProps = {
+    login?: (handle: string) => Promise<boolean | undefined>;
+    formAction?: string;
+    formMethod?: 'dialog' | 'get' | 'post' | 'DIALOG' | 'GET' | 'POST' | null;
+};

package/dist/components/bluesky-login/index.js

@@ -0,0 +1,3 @@
+export { default as BlueskyLoginModal } from './BlueskyLoginModal.svelte';
+export { blueskyLoginModalState } from './BlueskyLoginModal.svelte';
+export { default as BlueskyLogin } from './BlueskyLogin.svelte';

package/dist/components/bluesky-post/BlueskyPost.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { FeedViewPost } from '@atproto/api/dist/client/types/app/bsky/feed/defs';
+	import { Post } from '../post';
+	import { blueskyPostToPostData } from '.';
+	import type { Snippet } from 'svelte';
+
+	let {
+		feedViewPost,
+		children,
+		showLogo = false,
+		...restProps
+	}: { feedViewPost?: FeedViewPost; children?: Snippet; showLogo?: boolean } = $props();
+
+	const postData = $derived(feedViewPost ? blueskyPostToPostData(feedViewPost) : undefined);
+</script>
+
+{#snippet logo()}
+	<a
+		class="text-accent-700 dark:text-accent-400 hover:text-accent-600 dark:hover:text-accent-500"
+		href={postData?.href}
+	>
+		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="size-4" viewBox="0 0 600 530">
+			<path
+				d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
+				fill="currentColor"
+			/>
+		</svg>
+		<span class="sr-only">Bluesky</span>
+	</a>
+{/snippet}
+
+{#if postData}
+	<Post data={postData} logo={showLogo ? logo : undefined} {...restProps}>
+		{@render children?.()}
+	</Post>
+{/if}

package/dist/components/bluesky-post/BlueskyPost.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { FeedViewPost } from '@atproto/api/dist/client/types/app/bsky/feed/defs';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    feedViewPost?: FeedViewPost;
+    children?: Snippet;
+    showLogo?: boolean;
+};
+declare const BlueskyPost: import("svelte").Component<$$ComponentProps, {}, "">;
+type BlueskyPost = ReturnType<typeof BlueskyPost>;
+export default BlueskyPost;

package/dist/components/bluesky-post/index.d.ts

@@ -0,0 +1,5 @@
+import type { PostData } from '../post';
+import type { PostView } from '@atproto/api/dist/client/types/app/bsky/feed/defs';
+export declare function blueskyPostToPostData(data: PostView, baseUrl?: string): PostData;
+export declare function blueskyPostToHTML(post: any, baseUrl?: string): string;
+export { default as BlueskyPost } from './BlueskyPost.svelte';

package/dist/components/bluesky-post/index.js

@@ -0,0 +1,110 @@
+import { RichText } from '@atproto/api';
+function blueskyEmbedTypeToEmbedType(type) {
+    switch (type) {
+        case 'app.bsky.embed.external#view':
+        case 'app.bsky.embed.external':
+            return 'external';
+        case 'app.bsky.embed.images#view':
+        case 'app.bsky.embed.images':
+            return 'images';
+        case 'app.bsky.embed.video#view':
+        case 'app.bsky.embed.video':
+            return 'video';
+        default:
+            return 'unknown';
+    }
+}
+export function blueskyPostToPostData(data, baseUrl = 'https://bsky.app') {
+    console.log(data);
+    const post = data;
+    // const reason = data.reason;
+    // const reply = data.reply?.parent;
+    // const replyId = reply?.uri?.split('/').pop();
+    const id = post.uri.split('/').pop();
+    return {
+        id,
+        href: `${baseUrl}/profile/${post.author.handle}/post/${id}`,
+        // reposted:
+        // 	reason && reason.$type === 'app.bsky.feed.defs#reasonRepost'
+        // 		? {
+        // 				handle: reason.by.handle,
+        // 				href: `${baseUrl}/profile/${reason.by.handle}`
+        // 			}
+        // 		: undefined,
+        // replyTo:
+        // 	reply && replyId
+        // 		? {
+        // 				handle: reply.author.handle,
+        // 				href: `${baseUrl}/profile/${reply.author.handle}/post/${replyId}`
+        // 			}
+        // 		: undefined,
+        author: {
+            displayName: post.author.displayName,
+            handle: post.author.handle,
+            avatar: post.author.avatar,
+            href: `${baseUrl}/profile/${post.author.did}`
+        },
+        replyCount: post.replyCount ?? 0,
+        repostCount: post.repostCount ?? 0,
+        likeCount: post.likeCount ?? 0,
+        createdAt: post.record.createdAt ?? 0,
+        embed: post.embed
+            ? {
+                type: blueskyEmbedTypeToEmbedType(post.embed?.$type),
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                images: post.embed?.images?.map((image) => ({
+                    alt: image.alt,
+                    thumb: image.thumb,
+                    aspectRatio: image.aspectRatio,
+                    fullsize: image.fullsize
+                })),
+                external: post.embed?.external
+                    ? {
+                        href: post.embed.external.uri,
+                        title: post.embed.external.title,
+                        description: post.embed.external.description,
+                        thumb: post.embed.external.thumb
+                    }
+                    : undefined,
+                video: post.embed
+                    ? {
+                        playlist: post.embed.playlist,
+                        thumb: post.embed.thumbnail,
+                        alt: post.embed.alt,
+                        aspectRatio: post.embed.aspectRatio
+                    }
+                    : undefined
+            }
+            : undefined,
+        htmlContent: blueskyPostToHTML(post, baseUrl)
+    };
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function blueskyPostToHTML(post, baseUrl = 'https://bsky.app') {
+    if (!post?.record) {
+        return '';
+    }
+    const rt = new RichText(post.record);
+    let html = '';
+    const createLink = (href, text) => {
+        return `<a target="_blank" rel="noopener noreferrer nofollow" href="${encodeURI(href)}">${encodeURI(text)}</a>`;
+    };
+    for (const segment of rt.segments()) {
+        if (!segment)
+            continue;
+        if (segment.isLink() && segment.link?.uri) {
+            html += createLink(segment.link?.uri, segment.text);
+        }
+        else if (segment.isMention() && segment.mention?.did) {
+            html += createLink(`${baseUrl}/profile/${segment.mention?.did}`, segment.text);
+        }
+        else if (segment.isTag() && segment.tag?.tag) {
+            html += createLink(`${baseUrl}/hashtag/${segment.tag?.tag}`, segment.text);
+        }
+        else {
+            html += segment.text;
+        }
+    }
+    return html.replace(/\n/g, '<br>');
+}
+export { default as BlueskyPost } from './BlueskyPost.svelte';

package/dist/components/chat/Chat.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Chat;
+type Chat = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Chat: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, 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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/chat/ChatMessage.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ChatMessage;
+type ChatMessage = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ChatMessage: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, 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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/chat/index.d.ts

@@ -0,0 +1 @@
+export { default as Chat } from './Chat.svelte';

package/dist/components/chat/index.js

@@ -0,0 +1 @@
+export { default as Chat } from './Chat.svelte';

package/dist/components/emoji-picker/EmojiPicker.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { cn, ScrollArea } from '@foxui/core';
+	import { isEmojiSupported } from 'is-emoji-supported';
+	import { allGroups } from './emoji';
+	import Database from 'emoji-picker-element/database';
+	import type { NativeEmoji } from 'emoji-picker-element/shared';
+	import { fade } from 'svelte/transition';
+
+	let currentGroup = $state(allGroups[0].id);
+	let db: Database | undefined = $state();
+
+	let {
+		onpicked,
+		height = 300,
+		width = 344,
+		columns = 8,
+		class: className
+	}: {
+		onpicked?: (emoji: NativeEmoji) => void;
+		height?: number;
+		width?: number;
+		columns?: number;
+		class?: string;
+	} = $props();
+
+	$effect(() => {
+		if (db) return;
+		import('emoji-picker-element').then(({ Database }) => {
+			db = new Database();
+
+			// go through all groups and check if the emoji is supported (will be cached)
+			// so that things appear faster when we select a group
+			for (const group of allGroups) {
+				db.getEmojiByGroup(group.id).then((emojis) => {
+					for (const emoji of emojis) {
+						isEmojiSupported(emoji.unicode);
+					}
+				});
+			}
+		});
+	});
+</script>
+
+<div class={cn('flex flex-col', className)} style="height: {height}px; width: {width}px;">
+	<ScrollArea
+		class="grid w-full select-none space-y-0 px-2"
+		style="height: {height}px; grid-template-columns: repeat({columns}, minmax(0, 1fr));"
+	>
+		{#await db?.getEmojiByGroup(currentGroup) then emojis}
+			{#if emojis}
+				{#each emojis as emoji}
+					{#if isEmojiSupported(emoji.unicode)}
+						<button
+							onclick={() => {
+								onpicked?.(emoji);
+							}}
+							class="hover:bg-accent-300/20 dark:hover:bg-accent-700/20 size-10 cursor-pointer rounded-full text-center text-xl transition-transform duration-150 hover:scale-110"
+							>{emoji.unicode}</button
+						>
+					{/if}
+				{/each}
+			{/if}
+		{/await}
+	</ScrollArea>
+	<div
+		class="border-base-300/50 dark:border-base-700/50 flex justify-between gap-2 border-t px-3"
+		style="width: {width}px;"
+	>
+		{#each allGroups as group}
+			<button
+				onclick={() => (currentGroup = group.id)}
+				class={cn(
+					'[&>svg]:size-4.5 relative cursor-pointer [&>svg]:transition-all [&>svg]:duration-100 [&>svg]:hover:scale-105 py-2',
+					group.id === currentGroup
+						? 'text-accent-600 dark:text-accent-400'
+						: 'hover:text-accent-700 dark:hover:text-accent-300'
+				)}
+				>
+				{@html group.svg}
+				<span class="sr-only">{group.name}</span>
+
+				{#if group.id === currentGroup}
+					<span
+						transition:fade
+						class="from-accent-500/0 via-accent-500/60 to-accent-500/0 dark:from-accent-400/0 dark:via-accent-400/60 dark:to-accent-400/0 absolute -inset-x-1 -top-px h-px bg-gradient-to-r"
+					></span>
+				{/if}
+			</button>
+		{/each}
+	</div>
+</div>