Loading Skeleton

.changeset/eight-mirrors-bake.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add loading skeleton

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"
+	}
+};

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 };

src/components/Skeleton/index.tsx

@@ -0,0 +1 @@
+export * from "./Skeleton";

src/components/index.ts

@@ -3,3 +3,4 @@ export * from "./Input";
 export * from "./Sidebar";
 export * from "./Box";
 export * from "./Avatar";
+export * from "./Skeleton";

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");
+	});
 });