From 789e1d73ef0a28ebc6149ccdade06f42b3431c46 Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Fri, 22 Mar 2024 11:52:04 +0000
Subject: [PATCH 1/2] feat: loading skeleton

---
 src/components/Skeleton/Skeleton.stories.tsx | 32 ++++++++++++++++++++
 src/components/Skeleton/Skeleton.tsx         |  8 +++++
 src/components/Skeleton/index.tsx            |  1 +
 src/components/index.ts                      |  1 +
 test/utilities/index.test.ts                 |  4 +++
 5 files changed, 46 insertions(+)
 create mode 100644 src/components/Skeleton/Skeleton.stories.tsx
 create mode 100644 src/components/Skeleton/Skeleton.tsx
 create mode 100644 src/components/Skeleton/index.tsx

diff --git a/src/components/Skeleton/Skeleton.stories.tsx b/src/components/Skeleton/Skeleton.stories.tsx
new file mode 100644
index 0000000..e7f9376
--- /dev/null
+++ b/src/components/Skeleton/Skeleton.stories.tsx
@@ -0,0 +1,32 @@
+import { Meta } from "@storybook/react";
+import { Skeleton } from "./index";
+import { StoryObj } from "@storybook/react";
+import React from "react";
+
+const meta = {
+	title: "Elements/Skeleton",
+	component: Skeleton,
+
+	parameters: {
+		layout: "centered"
+	},
+	decorators: [
+		(Story) => (
+			<div className="w-[400px] h-[200px]">
+				<Story />
+			</div>
+		)
+	],
+	tags: ["autodocs"]
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	args: {
+		className: "h-full"
+	}
+};
diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx
new file mode 100644
index 0000000..601c2a1
--- /dev/null
+++ b/src/components/Skeleton/Skeleton.tsx
@@ -0,0 +1,8 @@
+import { cn } from "../../utilities";
+import React from "react";
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+	return <div className={cn("animate-pulse rounded-md bg-neutral-200", className)} {...props} />;
+}
+
+export { Skeleton };
diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
new file mode 100644
index 0000000..55879b8
--- /dev/null
+++ b/src/components/Skeleton/index.tsx
@@ -0,0 +1 @@
+export * from "./Skeleton";
diff --git a/src/components/index.ts b/src/components/index.ts
index af93a24..9739780 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,3 +3,4 @@ export * from "./Input";
 export * from "./Sidebar";
 export * from "./Box";
 export * from "./Avatar";
+export * from "./Skeleton";
diff --git a/test/utilities/index.test.ts b/test/utilities/index.test.ts
index 28363bd..bb40fd8 100644
--- a/test/utilities/index.test.ts
+++ b/test/utilities/index.test.ts
@@ -17,4 +17,8 @@ describe("cn", () => {
 	test("should replace undefined classes", () => {
 		expect(cn("text-white", undefined)).toBe("text-white");
 	});
+
+	test("custom font sizes", () => {
+		expect(cn("text-text-md", "text-display-xs")).toBe("text-display-xs");
+	});
 });

From fe83798ce10a75d3781e27cf063c991cc883256d Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Fri, 22 Mar 2024 11:52:30 +0000
Subject: [PATCH 2/2] chore: add changeset

---
 .changeset/eight-mirrors-bake.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eight-mirrors-bake.md

diff --git a/.changeset/eight-mirrors-bake.md b/.changeset/eight-mirrors-bake.md
new file mode 100644
index 0000000..c7d4b18
--- /dev/null
+++ b/.changeset/eight-mirrors-bake.md
@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add loading skeleton