From b375a36d6b30d8c6bddc069b4e22c38c22c889fe Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 3 Jan 2025 14:42:19 -0500
Subject: [PATCH] Skeleton component

---
 .../Feedback/Skeleton.stories.svelte           | 18 ++++++++++++++++++
 src/lib/components/Feedback/Skeleton.svelte    | 12 ++++++++++++
 src/lib/components/Feedback/index.ts           |  1 +
 3 files changed, 31 insertions(+)
 create mode 100644 src/lib/components/Feedback/Skeleton.stories.svelte
 create mode 100644 src/lib/components/Feedback/Skeleton.svelte

diff --git a/src/lib/components/Feedback/Skeleton.stories.svelte b/src/lib/components/Feedback/Skeleton.stories.svelte
new file mode 100644
index 0000000..0f659d6
--- /dev/null
+++ b/src/lib/components/Feedback/Skeleton.stories.svelte
@@ -0,0 +1,18 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Skeleton from './Skeleton.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	const { Story } = defineMeta({
+		title: 'Feedback/Skeleton',
+		component: Skeleton,
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Skeleton>)}
+	<Skeleton {...props} />
+{/snippet}
+
+<Story name="Default" args={{ class: 'h-32 w-32' }} children={template} />
+
+<Story name="Circle" args={{ class: 'h-32 w-32 rounded-full' }} children={template} />
diff --git a/src/lib/components/Feedback/Skeleton.svelte b/src/lib/components/Feedback/Skeleton.svelte
new file mode 100644
index 0000000..869c921
--- /dev/null
+++ b/src/lib/components/Feedback/Skeleton.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		children?: Snippet;
+	} & SvelteHTMLElements['div'];
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<div {...props} class={twMerge('skeleton', className)}>{@render children?.()}</div>
diff --git a/src/lib/components/Feedback/index.ts b/src/lib/components/Feedback/index.ts
index ad00eeb..dca62e9 100644
--- a/src/lib/components/Feedback/index.ts
+++ b/src/lib/components/Feedback/index.ts
@@ -2,4 +2,5 @@ export { default as Alert } from './Alert.svelte';
 export { default as Loader } from './Loader.svelte';
 export { default as Loading } from './Loading.svelte';
 export { default as Progress } from './Progress.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
 export { default as Tooltip } from './Tooltip.svelte';