@foxui/social 0.4.0

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

@@ -0,0 +1,11 @@
+import type { NativeEmoji } from 'emoji-picker-element/shared';
+type $$ComponentProps = {
+    onpicked?: (emoji: NativeEmoji) => void;
+    height?: number;
+    width?: number;
+    columns?: number;
+    class?: string;
+};
+declare const EmojiPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmojiPicker = ReturnType<typeof EmojiPicker>;
+export default EmojiPicker;

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Popover, type PopoverProps, cn } from '@foxui/core';
+	import EmojiPicker from './EmojiPicker.svelte';
+	import type { NativeEmoji } from './emoji';
+	import type { Snippet } from 'svelte';
+
+	let {
+		onpicked,
+		children,
+		class: className,
+		open = $bindable(false),
+		triggerRef = $bindable(null),
+		...props
+	}: {
+		onpicked?: (emoji: NativeEmoji) => void;
+		children?: Snippet;
+		class?: string;
+	} & PopoverProps = $props();
+</script>
+
+<Popover {...props} bind:triggerRef bind:open class={cn('p-0', className)}>
+	{@render children?.()}
+	<EmojiPicker {onpicked} />
+</Popover>

package/dist/components/emoji-picker/PopoverEmojiPicker.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type PopoverProps } from '@foxui/core';
+import type { NativeEmoji } from './emoji';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    onpicked?: (emoji: NativeEmoji) => void;
+    children?: Snippet;
+    class?: string;
+} & PopoverProps;
+declare const PopoverEmojiPicker: import("svelte").Component<$$ComponentProps, {}, "open" | "triggerRef">;
+type PopoverEmojiPicker = ReturnType<typeof PopoverEmojiPicker>;
+export default PopoverEmojiPicker;

package/dist/components/emoji-picker/emoji.d.ts

@@ -0,0 +1,7 @@
+export declare const allGroups: {
+    id: number;
+    emoji: string;
+    name: string;
+    svg: string;
+}[];
+export type { NativeEmoji } from 'emoji-picker-element/shared';

package/dist/components/emoji-picker/emoji.js

@@ -0,0 +1,56 @@
+export const allGroups = [
+    [
+        0,
+        '😀',
+        'smileys-emotion',
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>`
+    ],
+    [
+        1,
+        '👋',
+        'people-body',
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-icon lucide-hand"><path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2"/><path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2"/><path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg>`
+    ],
+    [
+        3,
+        '🐱',
+        'animals-nature',
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dog-icon lucide-dog"><path d="M11.25 16.25h1.5L12 17z"/><path d="M16 14v.5"/><path d="M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444a11.702 11.702 0 0 0-.493-3.309"/><path d="M8 14v.5"/><path d="M8.5 8.5c-.384 1.05-1.083 2.028-2.344 2.5-1.931.722-3.576-.297-3.656-1-.113-.994 1.177-6.53 4-7 1.923-.321 3.651.845 3.651 2.235A7.497 7.497 0 0 1 14 5.277c0-1.39 1.844-2.598 3.767-2.277 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5"/></svg>`
+    ],
+    [
+        4,
+        '🍎',
+        'food-drink',
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-apple-icon lucide-apple"><path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"/><path d="M10 2c1 .5 2 2 2 5"/></svg>	`
+    ],
+    [
+        5,
+        '🏠️',
+        'travel-places',
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house-icon lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>`
+    ],
+    [
+        6,
+        '⚽',
+        'activities',
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-volleyball-icon lucide-volleyball"><path d="M11.1 7.1a16.55 16.55 0 0 1 10.9 4"/><path d="M12 12a12.6 12.6 0 0 1-8.7 5"/><path d="M16.8 13.6a16.55 16.55 0 0 1-9 7.5"/><path d="M20.7 17a12.8 12.8 0 0 0-8.7-5 13.3 13.3 0 0 1 0-10"/><path d="M6.3 3.8a16.55 16.55 0 0 0 1.9 11.5"/><circle cx="12" cy="12" r="10"/></svg>`
+    ],
+    [
+        7,
+        '📝',
+        'objects',
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb-icon lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>`
+    ],
+    [
+        8,
+        '⛔️',
+        'symbols',
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pi-icon lucide-square-pi"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 7h10"/><path d="M10 7v10"/><path d="M16 17a2 2 0 0 1-2-2V7"/></svg>`
+    ],
+    [
+        9,
+        '🏁',
+        'flags',
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-flag-icon lucide-flag"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg>`
+    ]
+].map(([id, emoji, name, svg]) => ({ id, emoji, name, svg }));

package/dist/components/emoji-picker/index.d.ts

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

package/dist/components/emoji-picker/index.js

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

package/dist/components/github-corner/GithubCorner.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { cn } from '@foxui/core';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	type Props = HTMLAnchorAttributes;
+	let { target = '_blank', class: className, ...restProps }: Props = $props();
+</script>
+
+<a
+	{target}
+	class={cn(
+		'github-corner fill-accent-600 text-base-50 dark:fill-accent-500 dark:text-base-950 fixed -top-1 -right-1 z-50',
+		className
+	)}
+	{...restProps}
+>
+	<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
+		<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+		<path
+			d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+			fill="currentColor"
+			style="transform-origin: 130px 106px;"
+			class="octo-arm"
+		></path>
+		<path
+			d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+			fill="currentColor"
+			class="octo-body"
+		></path>
+	</svg>
+	<span class="sr-only">View source on GitHub</span>
+</a>
+
+<style>
+	.github-corner:hover .octo-arm {
+		animation: octocat-wave 560ms ease-in-out;
+	}
+
+	@keyframes octocat-wave {
+		0%,
+		100% {
+			transform: rotate(0);
+		}
+		20%,
+		60% {
+			transform: rotate(-25deg);
+		}
+		40%,
+		80% {
+			transform: rotate(10deg);
+		}
+	}
+
+	@media (max-width: 500px) {
+		.github-corner:hover .octo-arm {
+			animation: none;
+		}
+		.github-corner .octo-arm {
+			animation: octocat-wave 560ms ease-in-out;
+		}
+	}
+</style>

package/dist/components/github-corner/GithubCorner.svelte.d.ts

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

package/dist/components/github-corner/index.d.ts

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

package/dist/components/github-corner/index.js

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

package/dist/components/index.d.ts

@@ -0,0 +1,12 @@
+export * from './bluesky-login';
+export * from './post';
+export * from './star-rating';
+export * from './social-icons';
+export * from './swiper-cards';
+export * from './user-profile';
+export * from './github-corner';
+export * from './chat';
+export * from './emoji-picker';
+export * from './bluesky-post';
+export * from './nested-comments';
+export declare function numberToHumanReadable(number: number): string | number;

package/dist/components/index.js

@@ -0,0 +1,20 @@
+export * from './bluesky-login';
+export * from './post';
+export * from './star-rating';
+export * from './social-icons';
+export * from './swiper-cards';
+export * from './user-profile';
+export * from './github-corner';
+export * from './chat';
+export * from './emoji-picker';
+export * from './bluesky-post';
+export * from './nested-comments';
+export function numberToHumanReadable(number) {
+    if (number < 1000) {
+        return number;
+    }
+    if (number < 1000000) {
+        return `${(number / 1000).toFixed(1)}k`;
+    }
+    return `${(number / 1000000).toFixed(1)}m`;
+}

package/dist/components/nested-comments/Comment.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { numberToHumanReadable } from '../';
+	import Comment from './Comment.svelte';
+	import { Avatar, Prose } from '@foxui/core';
+	import { RelativeTime } from '@foxui/time';
+	import type { PostData } from '../post';
+	import Embed from '../post/embeds/Embed.svelte';
+
+	const { comment, depth = 0 }: { comment: PostData; depth: number } = $props();
+
+	let expanded = $state(true);
+</script>
+
+{#snippet top(expand: boolean)}
+	<div class="text-base-600 dark:text-base-500 -ml-6 flex items-center text-sm">
+		<div class="relative size-6">
+			<Avatar src={comment.author.avatar} class="size-6" />
+			{#if expand}
+				<button
+					class="absolute inset-0 flex size-6 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white"
+					onclick={() => (expanded = !expanded)}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="2"
+						stroke="currentColor"
+						class="size-3"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+					</svg>
+
+					<span class="sr-only">expand comment</span>
+				</button>
+			{:else}
+				<button
+					class="absolute inset-0 flex size-6 cursor-pointer items-center justify-center rounded-full"
+					onclick={() => (expanded = !expanded)}
+				>
+					<span class="sr-only">collapse comment</span>
+				</button>
+			{/if}
+		</div>
+		<a
+			target="_blank"
+			rel="noopener noreferrer nofollow"
+			class="dark:text-base-400 hover:text-base-500 hover:dark:text-base-300 ml-2"
+			href={comment.author.href}
+		>
+			{comment.author.displayName || comment.author.handle}
+		</a>
+
+		<div class="text-base-500 ml-2 text-xs">
+			<RelativeTime date={new Date(comment.createdAt)} locale="en" />
+		</div>
+	</div>
+{/snippet}
+
+<div class="relative pl-3">
+	<button
+		class="group absolute -left-1.5 top-0 flex h-full w-3 cursor-pointer items-center"
+		onclick={() => (expanded = !expanded)}
+	>
+		<div
+			class="bg-base-200 dark:bg-base-800 group-hover:bg-base-300 dark:group-hover:bg-base-700 mx-auto h-full w-0.5"
+		></div>
+		<span class="sr-only">collapse comment</span>
+	</button>
+
+	<div class="mt-2 pb-2">
+		{#if expanded}
+			{@render top(false)}
+			<Prose>{@html comment.htmlContent}</Prose>
+
+			{#if comment.embed}
+				<Embed embed={comment.embed} />
+			{/if}
+
+			<div class="text-base-500 dark:text-base-400 mt-2 flex gap-8">
+				<a
+					href={comment.href}
+					target="_blank"
+					rel="noopener noreferrer nofollow"
+					class="group inline-flex items-center gap-2 text-sm"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="group-hover:bg-accent-500/10 group-hover:text-accent-700 dark:group-hover:text-accent-400 -m-1.5 size-7 rounded-full p-1.5 transition-all duration-100"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 0 1-.923 1.785A5.969 5.969 0 0 0 6 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337Z"
+						/>
+					</svg>
+					<span class="sr-only">Replies</span>
+					{numberToHumanReadable(comment.replyCount)}
+				</a>
+
+				<a
+					href={comment.href}
+					target="_blank"
+					rel="noopener noreferrer nofollow"
+					class="group inline-flex items-center gap-2 text-sm"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="group-hover:bg-accent-500/10 group-hover:text-accent-700 dark:group-hover:text-accent-400 -m-1.5 size-7 rounded-full p-1.5 transition-all duration-100"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
+						/>
+					</svg>
+					<span class="sr-only">Likes</span>
+					{numberToHumanReadable(comment.likeCount)}
+				</a>
+			</div>
+
+			<!-- {#if comment.replies?.length && depth > 4}
+				<a
+					href={atUriToPostUri(comment.uri)}
+					target="_blank"
+					rel="noopener noreferrer nofollow"
+					class="text-base-500 dark:text-base-400 hover:dark:text-base-300 hover:text-base-600 text-sm font-medium"
+					>View more replies on bluesky</a
+				>
+			{/if} -->
+		{:else}
+			<button onclick={() => (expanded = true)}>
+				{@render top(true)}
+			</button>
+		{/if}
+	</div>
+
+	{#if comment.replies?.length && depth <= 4 && expanded}
+		{#each comment.replies.toSorted((a: any, b: any) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()) as reply}
+			<Comment comment={reply} depth={depth + 1} />
+		{/each}
+	{/if}
+</div>

package/dist/components/nested-comments/Comment.svelte.d.ts

@@ -0,0 +1,9 @@
+import Comment from './Comment.svelte';
+import type { PostData } from '../post';
+type $$ComponentProps = {
+    comment: PostData;
+    depth: number;
+};
+declare const Comment: import("svelte").Component<$$ComponentProps, {}, "">;
+type Comment = ReturnType<typeof Comment>;
+export default Comment;

package/dist/components/nested-comments/NestedComments.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { PostData } from '../post';
+	import Comment from './Comment.svelte';
+
+	let { comments }: { comments: PostData[] } = $props();
+</script>
+
+{#if comments.length > 0}
+	<div class="pl-3 pt-4">
+		{#each comments as comment}
+			<Comment {comment} depth={0} />
+		{/each}
+	</div>
+{/if}

package/dist/components/nested-comments/NestedComments.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PostData } from '../post';
+type $$ComponentProps = {
+    comments: PostData[];
+};
+declare const NestedComments: import("svelte").Component<$$ComponentProps, {}, "">;
+type NestedComments = ReturnType<typeof NestedComments>;
+export default NestedComments;

package/dist/components/nested-comments/index.d.ts

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

package/dist/components/nested-comments/index.js

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