From 0f4b9bcec21a24cfde62924fa405aa4d1bbea732 Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Thu, 4 Apr 2024 07:31:19 +0000
Subject: [PATCH 1/2] feat: loading spinner

---
 src/components/Spinner/Spinner.stories.tsx | 21 +++++++++++++++++++++
 src/components/Spinner/Spinner.tsx         | 18 ++++++++++++++++++
 src/components/Spinner/index.tsx           |  1 +
 src/components/index.ts                    |  1 +
 4 files changed, 41 insertions(+)
 create mode 100644 src/components/Spinner/Spinner.stories.tsx
 create mode 100644 src/components/Spinner/Spinner.tsx
 create mode 100644 src/components/Spinner/index.tsx

diff --git a/src/components/Spinner/Spinner.stories.tsx b/src/components/Spinner/Spinner.stories.tsx
new file mode 100644
index 0000000..bd78d62
--- /dev/null
+++ b/src/components/Spinner/Spinner.stories.tsx
@@ -0,0 +1,21 @@
+import { Meta } from "@storybook/react";
+import { Spinner } from "./index";
+import { StoryObj } from "@storybook/react";
+
+const meta = {
+	title: "Elements/Spinner",
+	component: Spinner,
+
+	parameters: {
+		layout: "centered"
+	},
+	tags: ["autodocs"]
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default"
+};
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
new file mode 100644
index 0000000..2e95065
--- /dev/null
+++ b/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,18 @@
+import React, { HTMLAttributes } from "react";
+import { cn } from "../../utilities";
+
+type Props = HTMLAttributes<HTMLDivElement>;
+
+export function Spinner({ className, ...rest }: Props) {
+	return (
+		<div
+			{...rest}
+			role="alert"
+			aria-busy="true"
+			className={`${cn(
+				"h-[180px] w-[180px] animate-spin-slow rounded-rounded border-[7px] border-theme-border-moderate border-b-theme-surface-strong",
+				className
+			)}`}
+		></div>
+	);
+}
diff --git a/src/components/Spinner/index.tsx b/src/components/Spinner/index.tsx
new file mode 100644
index 0000000..2f83b96
--- /dev/null
+++ b/src/components/Spinner/index.tsx
@@ -0,0 +1 @@
+export * from "./Spinner";
diff --git a/src/components/index.ts b/src/components/index.ts
index e819abd..bffbe7b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -8,3 +8,4 @@ export * from "./Dropdown";
 export * from "./Table";
 export * from "./Tag";
 export * from "./Badge";
+export * from "./Spinner";

From 5d1c69b24b31115999019d769252bf24bf37710a Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Thu, 4 Apr 2024 07:31:57 +0000
Subject: [PATCH 2/2] chore: changeset

---
 .changeset/friendly-peas-tell.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/friendly-peas-tell.md

diff --git a/.changeset/friendly-peas-tell.md b/.changeset/friendly-peas-tell.md
new file mode 100644
index 0000000..dea283f
--- /dev/null
+++ b/.changeset/friendly-peas-tell.md
@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add spinner component