feat: Spinner Component (#55)

Author: Cahllagerfeld

.changeset/friendly-peas-tell.md

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

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

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

src/components/Spinner/index.tsx

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

src/components/index.ts

@@ -8,3 +8,4 @@ export * from "./Dropdown";
 export * from "./Table";
 export * from "./Tag";
 export * from "./Badge";
+export * from "./Spinner";