@foxui/social 0.4.0

package/dist/components/post/Post.svelte

@@ -0,0 +1,294 @@
+<script lang="ts">
+	import Embed from './embeds/Embed.svelte';
+	import { cn, Avatar, Prose } from '@foxui/core';
+	import type { WithChildren, WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PostData } from '.';
+	import PostAction from './PostAction.svelte';
+	import type { Snippet } from 'svelte';
+	import { numberToHumanReadable } from '..';
+	import { RelativeTime } from '@foxui/time';
+
+	let {
+		ref = $bindable(),
+		data,
+		class: className,
+		bookmarked = $bindable(false),
+		liked = $bindable(false),
+
+		showReply = $bindable(true),
+		showRepost = $bindable(true),
+		showLike = $bindable(true),
+		showBookmark = $bindable(true),
+
+		onReplyClick,
+		onRepostClick,
+		onLikeClick,
+		onBookmarkClick,
+
+		customActions,
+
+		children,
+
+		logo
+	}: WithElementRef<WithChildren<HTMLAttributes<HTMLDivElement>>> & {
+		data: PostData;
+		class?: string;
+
+		bookmarked?: boolean;
+		liked?: boolean;
+
+		showReply?: boolean;
+		showRepost?: boolean;
+		showLike?: boolean;
+		showBookmark?: boolean;
+
+		onReplyClick?: () => void;
+		onRepostClick?: () => void;
+		onLikeClick?: () => void;
+		onBookmarkClick?: () => void;
+
+		customActions?: Snippet;
+
+		logo?: Snippet;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn('text-base-950 dark:text-base-50 transition-colors duration-200', className)}
+>
+	{#if data.reposted}
+		<div class="mb-3 inline-flex items-center gap-2 text-xs">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="currentColor"
+				class="size-3"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M4.755 10.059a7.5 7.5 0 0 1 12.548-3.364l1.903 1.903h-3.183a.75.75 0 1 0 0 1.5h4.992a.75.75 0 0 0 .75-.75V4.356a.75.75 0 0 0-1.5 0v3.18l-1.9-1.9A9 9 0 0 0 3.306 9.67a.75.75 0 1 0 1.45.388Zm15.408 3.352a.75.75 0 0 0-.919.53 7.5 7.5 0 0 1-12.548 3.364l-1.902-1.903h3.183a.75.75 0 0 0 0-1.5H2.984a.75.75 0 0 0-.75.75v4.992a.75.75 0 0 0 1.5 0v-3.18l1.9 1.9a9 9 0 0 0 15.059-4.035.75.75 0 0 0-.53-.918Z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+
+			<div class="inline-flex gap-1">
+				reposted by
+				<a
+					href={data.reposted.href}
+					class="hover:text-accent-600 dark:hover:text-accent-400 font-bold"
+				>
+					@{data.reposted.handle}
+				</a>
+			</div>
+		</div>
+	{/if}
+	{#if data.replyTo}
+		<div class="mb-3 inline-flex items-center gap-2 text-xs">
+			
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
+				<path fill-rule="evenodd" d="M14.47 2.47a.75.75 0 0 1 1.06 0l6 6a.75.75 0 0 1 0 1.06l-6 6a.75.75 0 1 1-1.06-1.06l4.72-4.72H9a5.25 5.25 0 1 0 0 10.5h3a.75.75 0 0 1 0 1.5H9a6.75 6.75 0 0 1 0-13.5h10.19l-4.72-4.72a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+			  </svg>
+			  
+			  
+			<div class="inline-flex gap-1">
+				replying to
+				<a
+					href={data.replyTo.href}
+					class="hover:text-accent-600 dark:hover:text-accent-400 font-bold"
+				>
+					@{data.replyTo.handle}
+				</a>
+			</div>
+		</div>
+	{/if}
+	<div class="flex gap-4">
+		<Avatar src={data.author.avatar} />
+
+		<div class="w-full">
+			<div class="mb-1 flex items-start justify-between gap-2">
+				<div class="flex items-start gap-4">
+					{#if data.author.href}
+						<a
+							class="hover:bg-accent-900/5 group/post-author -mx-2 -my-0.5 flex flex-col items-baseline gap-x-2 gap-y-0.5 rounded-xl px-2 py-0.5 sm:flex-row"
+							href={data.author.href}
+						>
+							{#if data.author.displayName}
+								<div
+									class="text-base-900 group-hover/post-author:text-accent-600 dark:text-base-50 dark:group-hover/post-author:text-accent-300 text-sm font-semibold leading-tight"
+								>
+									{data.author.displayName}
+								</div>
+							{/if}
+							<div
+								class={cn(
+									'group-hover/post-author:text-accent-600 dark:group-hover/post-author:text-accent-400 text-sm',
+									!data.author.displayName
+										? 'text-base-900 dark:text-base-50 font-semibold'
+										: 'text-base-600 dark:text-base-400'
+								)}
+							>
+								@{data.author.handle}
+							</div>
+						</a>
+					{:else}
+						<div
+							class="-mx-2 -my-0.5 flex flex-col items-baseline gap-x-2 gap-y-0.5 rounded-xl px-2 py-0.5 sm:flex-row"
+						>
+							<div class="text-base-900 dark:text-base-50 text-sm font-semibold leading-tight">
+								{data.author.displayName}
+							</div>
+							<div class="text-base-600 dark:text-base-400 text-sm">
+								@{data.author.handle}
+							</div>
+						</div>
+					{/if}
+
+					<div class="text-base-600 dark:text-base-400 block text-sm no-underline">
+						<RelativeTime date={new Date(data.createdAt)} locale="en" />
+					</div>
+				</div>
+
+				{#if logo}
+					{@render logo?.()}
+				{/if}
+			</div>
+
+			<Prose size="md">
+				{#if data.htmlContent}
+					{@html data.htmlContent}
+				{:else}
+					{@render children?.()}
+				{/if}
+			</Prose>
+
+			{#if data.embed}
+				<Embed embed={data.embed} />
+			{/if}
+
+			{#if showReply || showRepost || showLike || showBookmark || customActions}
+				<div class="text-base-500 dark:text-base-400 mt-4 flex justify-between gap-2">
+					{#if showReply}
+						<PostAction onclick={onReplyClick}>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="group-hover/post-action:bg-accent-500/10 group-hover/post-action:text-accent-700 dark:group-hover/post-action: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>
+							{#if data.replyCount}
+								{numberToHumanReadable(data.replyCount)}
+							{/if}
+						</PostAction>
+					{/if}
+
+					{#if showRepost}
+						<PostAction onclick={onRepostClick}>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="group-hover/post-action:bg-accent-500/10 group-hover/post-action:text-accent-700 dark:group-hover/post-action: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="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+								/>
+							</svg>
+							{#if data.repostCount}
+								{numberToHumanReadable(data.repostCount)}
+							{/if}
+						</PostAction>
+					{/if}
+					{#if showLike}
+						<PostAction
+							class={liked ? 'text-accent-700 dark:text-accent-500 font-semibold' : ''}
+							onclick={onLikeClick}
+						>
+							{#if liked}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 24 24"
+									fill="currentColor"
+									class="group-hover/post-action:bg-accent-500/10 text-accent-700 dark:text-accent-500 -m-1.5 size-7 rounded-full p-1.5 transition-all duration-100"
+								>
+									<path
+										d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"
+									/>
+								</svg>
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="group-hover/post-action:bg-accent-500/10 group-hover/post-action:text-accent-700 dark:group-hover/post-action: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>
+							{/if}
+							{#if data.likeCount}
+								{numberToHumanReadable(data.likeCount)}
+							{/if}
+						</PostAction>
+					{/if}
+
+					{#if showBookmark}
+						<PostAction onclick={onBookmarkClick}>
+							<span class="sr-only">Bookmark</span>
+
+							{#if bookmarked}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 24 24"
+									fill="currentColor"
+									class="group-hover/post-action:bg-accent-500/10 text-accent-700 dark:text-accent-400 -m-1.5 size-7 rounded-full p-1.5 transition-all duration-100"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M6.32 2.577a49.255 49.255 0 0 1 11.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 0 1-1.085.67L12 18.089l-7.165 3.583A.75.75 0 0 1 3.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93Z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="group-hover/post-action:bg-accent-500/10 group-hover/post-action:text-accent-700 dark:group-hover/post-action: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="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"
+									/>
+								</svg>
+							{/if}
+						</PostAction>
+					{/if}
+
+					{@render customActions?.()}
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/components/post/Post.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { WithChildren, WithElementRef } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PostData } from '.';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = WithElementRef<WithChildren<HTMLAttributes<HTMLDivElement>>> & {
+    data: PostData;
+    class?: string;
+    bookmarked?: boolean;
+    liked?: boolean;
+    showReply?: boolean;
+    showRepost?: boolean;
+    showLike?: boolean;
+    showBookmark?: boolean;
+    onReplyClick?: () => void;
+    onRepostClick?: () => void;
+    onLikeClick?: () => void;
+    onBookmarkClick?: () => void;
+    customActions?: Snippet;
+    logo?: Snippet;
+};
+declare const Post: import("svelte").Component<$$ComponentProps, {}, "ref" | "bookmarked" | "liked" | "showReply" | "showRepost" | "showLike" | "showBookmark">;
+type Post = ReturnType<typeof Post>;
+export default Post;

package/dist/components/post/PostAction.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn } from '@foxui/core';
+	import type { Snippet } from 'svelte';
+
+	let {
+		onclick,
+		children,
+		class: className
+	}: {
+		onclick?: () => void;
+		children: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+{#if onclick}
+	<button
+		class={cn('group/post-action inline-flex cursor-pointer items-center gap-2 text-sm', className)}
+		{onclick}
+	>
+		{@render children?.()}
+	</button>
+{:else}
+	<div class={cn('inline-flex items-center gap-2 text-sm', className)}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/post/PostAction.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    onclick?: () => void;
+    children: Snippet;
+    class?: string;
+};
+declare const PostAction: import("svelte").Component<$$ComponentProps, {}, "">;
+type PostAction = ReturnType<typeof PostAction>;
+export default PostAction;

package/dist/components/post/embeds/Embed.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { PostEmbed } from '../';
+	import External from './External.svelte';
+	import Images from './Images.svelte';
+	import Video from './Video.svelte';
+
+	const { embed }: { embed: PostEmbed } = $props();
+</script>
+
+<div class="flex flex-col gap-2 pt-3 text-sm">
+	{#if embed.type === 'images'}
+		<Images data={embed} />
+	{:else if embed.type === 'external' && embed.external}
+		<External data={embed} />
+	{:else if embed.type === 'video' && embed.video}
+		<Video data={embed} />
+	{:else if embed.type === 'unknown'}
+		<div
+			class="text-base-700 dark:text-base-300 bg-base-200/50 dark:bg-base-900/50 border-base-300 dark:border-base-600/30 rounded-2xl border p-4 text-sm"
+		>
+			Unknown embed type
+		</div>
+	{/if}
+</div>

package/dist/components/post/embeds/Embed.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PostEmbed } from '../';
+type $$ComponentProps = {
+    embed: PostEmbed;
+};
+declare const Embed: import("svelte").Component<$$ComponentProps, {}, "">;
+type Embed = ReturnType<typeof Embed>;
+export default Embed;

package/dist/components/post/embeds/External.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { PostEmbedExternal } from '..';
+
+	const { data }: { data: PostEmbedExternal } = $props();
+
+	const domain = new URL(data.external.href).hostname.replace('www.', '');
+</script>
+
+<article
+	class={[
+		'group dark:bg-base-900 bg-base-200 border-base-300 dark:border-base-600/30 max-w-md relative isolate flex flex-col justify-end overflow-hidden rounded-2xl border p-4',
+		data.external.thumb ? 'aspect-[16/9]' : ''
+	]}
+>
+	{#if data.external.thumb}
+		<img
+			src={data.external.thumb}
+			alt={data.external.description}
+			class="absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-102"
+		/>
+	{/if}
+	<div
+		class="dark:from-base-950/90 dark:via-base-950/40 from-base-50/90 via-base-50/40 absolute inset-0 -z-10 bg-gradient-to-t"
+	></div>
+
+	<div
+		class="text-base-700 dark:text-base-300 flex flex-wrap items-center gap-y-1 overflow-hidden text-sm"
+	>
+		<div>{domain}</div>
+	</div>
+	<h3
+		class="dark:text-base-50 text-base-900 group-hover:text-accent-600 dark:group-hover:text-accent-400 mt-1 text-lg/6 font-semibold transition-colors duration-200"
+	>
+		<a href={data.external.href} target="_blank" rel="noopener noreferrer nofollow">
+			<span class="absolute inset-0"></span>
+			{data.external.title}
+		</a>
+	</h3>
+</article>

package/dist/components/post/embeds/External.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PostEmbedExternal } from '..';
+type $$ComponentProps = {
+    data: PostEmbedExternal;
+};
+declare const External: import("svelte").Component<$$ComponentProps, {}, "">;
+type External = ReturnType<typeof External>;
+export default External;

package/dist/components/post/embeds/Images.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { PostEmbedImage } from '..';
+
+	const { data }: { data: PostEmbedImage } = $props();
+</script>
+
+{#snippet imageSnippet(
+	image: {
+		alt: string;
+		thumb: string;
+		fullsize: string;
+		aspectRatio?: { width: number; height: number };
+	},
+	className?: string
+)}
+	<img
+		loading="lazy"
+		src={image.thumb}
+		alt={image.alt}
+		style={image.aspectRatio
+			? `aspect-ratio: ${image.aspectRatio.width} / ${image.aspectRatio.height}`
+			: 'aspect-ratio: 1 / 1'}
+		class={[
+			'border-base-500/20 dark:border-base-400/20 w-fit max-w-full rounded-2xl border max-h-[40rem] object-contain',
+			className
+		]}
+	/>
+{/snippet}
+
+{#if data.images.length === 1}
+	{@render imageSnippet(data.images[0])}
+{:else}
+	<div class="columns-2 gap-4">
+		{#each data.images as image}
+			{@render imageSnippet(image, 'mb-4')}
+		{/each}
+	</div>
+{/if}

package/dist/components/post/embeds/Images.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PostEmbedImage } from '..';
+type $$ComponentProps = {
+    data: PostEmbedImage;
+};
+declare const Images: import("svelte").Component<$$ComponentProps, {}, "">;
+type Images = ReturnType<typeof Images>;
+export default Images;

package/dist/components/post/embeds/Video.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Hls from 'hls.js';
+	import type { PostEmbedVideo } from '..';
+
+	const { data }: { data: PostEmbedVideo } = $props();
+
+	onMount(async () => {
+		const Plyr = (await import('plyr')).default;
+		if (Hls.isSupported()) {
+			var hls = new Hls();
+			hls.loadSource(data.video.playlist);
+			hls.attachMedia(element);
+		}
+
+		new Plyr(element, {
+			controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
+			ratio: data.video.aspectRatio
+				? `${data.video.aspectRatio.width}:${data.video.aspectRatio.height}`
+				: '16:9'
+		});
+	});
+
+	let element: HTMLMediaElement;
+</script>
+
+<svelte:head>
+	<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
+</svelte:head>
+
+<div
+	style={data.video.aspectRatio
+		? `aspect-ratio: ${data.video.aspectRatio.width} / ${data.video.aspectRatio.height}`
+		: 'aspect-ratio: 16 / 9'}
+	class="border-base-300 dark:border-base-400/40 w-full max-w-full overflow-hidden rounded-2xl border"
+>
+	<!-- svelte-ignore a11y_media_has_caption -->
+	<video bind:this={element} class="h-full w-full" aria-label={data.video.alt}></video>
+</div>
+
+<style>
+	* {
+		--plyr-color-main: var(--color-accent-500);
+	}
+</style>

package/dist/components/post/embeds/Video.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PostEmbedVideo } from '..';
+type $$ComponentProps = {
+    data: PostEmbedVideo;
+};
+declare const Video: import("svelte").Component<$$ComponentProps, {}, "">;
+type Video = ReturnType<typeof Video>;
+export default Video;

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

@@ -0,0 +1,63 @@
+export type PostEmbedImage = {
+    type: 'images';
+    images: {
+        alt: string;
+        thumb: string;
+        fullsize: string;
+        aspectRatio?: {
+            width: number;
+            height: number;
+        };
+    }[];
+};
+export type PostEmbedExternal = {
+    type: 'external';
+    external: {
+        href: string;
+        thumb: string;
+        title: string;
+        description: string;
+    };
+};
+export type PostEmbedVideo = {
+    type: 'video';
+    video: {
+        playlist: string;
+        thumb: string;
+        alt: string;
+        aspectRatio?: {
+            width: number;
+            height: number;
+        };
+    };
+};
+export type UnknownEmbed = {
+    type: 'unknown';
+} & Record<string, unknown>;
+export type PostEmbed = PostEmbedImage | PostEmbedExternal | PostEmbedVideo | UnknownEmbed;
+export type PostData = {
+    href?: string;
+    id?: string;
+    reposted?: {
+        handle: string;
+        href: string;
+    };
+    replyTo?: {
+        handle: string;
+        href: string;
+    };
+    author: {
+        displayName: string;
+        handle: string;
+        avatar?: string;
+        href?: string;
+    };
+    replyCount: number;
+    repostCount: number;
+    likeCount: number;
+    createdAt: string;
+    embed?: PostEmbed;
+    htmlContent?: string;
+    replies?: PostData[];
+};
+export { default as Post } from './Post.svelte';

package/dist/components/post/index.js

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

package/dist/components/social-icons/All.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import Discord from './Discord.svelte';
+	import Github from './Github.svelte';
+	import Twitter from './Twitter.svelte';
+	import Youtube from './Youtube.svelte';
+	import Bluesky from './Bluesky.svelte';
+	import Facebook from './Facebook.svelte';
+
+	const {
+		discord,
+		github,
+		twitter,
+		youtube,
+		bluesky,
+		facebook,
+		svgClasses
+	}: {
+		discord?: string;
+		github?: string;
+		twitter?: string;
+		youtube?: string;
+		bluesky?: string;
+		facebook?: string;
+		svgClasses?: string;
+	} = $props();
+</script>
+
+<div class="flex flex-wrap items-center gap-4">
+	{#if discord}
+		<Discord href={discord} {svgClasses} />
+	{/if}
+	{#if github}
+		<Github href={github} {svgClasses} />
+	{/if}
+	{#if twitter}
+		<Twitter href={twitter} {svgClasses} />
+	{/if}
+	{#if youtube}
+		<Youtube href={youtube} {svgClasses} />
+	{/if}
+	{#if bluesky}
+		<Bluesky href={bluesky} {svgClasses} />
+	{/if}
+	{#if facebook}
+		<Facebook href={facebook} {svgClasses} />
+	{/if}
+</div>

package/dist/components/social-icons/All.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    discord?: string;
+    github?: string;
+    twitter?: string;
+    youtube?: string;
+    bluesky?: string;
+    facebook?: string;
+    svgClasses?: string;
+};
+declare const All: import("svelte").Component<$$ComponentProps, {}, "">;
+type All = ReturnType<typeof All>;
+export default All;