feat(progressSpinner): add progress spinner component

RISDEV-4815

src/primevue/index.ts

@@ -1,11 +1,12 @@
 import "./global.css";
 
 import button from "./button/button";
+import fileUpload from "./fileUpload/fileUpload";
 import inputGroup from "./inputGroup/inputGroup";
 import inputGroupAddon from "./inputGroup/inputGroupAddon";
 import inputText from "./inputText/inputText";
 import password from "./password/password";
-import fileUpload from "./fileUpload/fileUpload";
+import progressSpinner from "./progressSpinner/progressSpinner";
 
 export const RisUiTheme = {
   button,
@@ -14,4 +15,5 @@ export const RisUiTheme = {
   inputGroupAddon,
   password,
   fileUpload,
+  progressSpinner,
 };

src/primevue/progressSpinner/progressSpinner.stories.ts

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from "@storybook/vue3";
+import ProgressSpinner from "primevue/progressspinner";
+import { html } from "@/lib/tags.ts";
+
+const meta: Meta<typeof ProgressSpinner> = {
+  component: ProgressSpinner,
+
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { ProgressSpinner },
+    setup() {
+      return { args };
+    },
+    template: html`<ProgressSpinner />`,
+  }),
+};

src/primevue/progressSpinner/progressSpinner.ts

@@ -0,0 +1,14 @@
+import { ProgressSpinnerPassThroughOptions } from "primevue/progressspinner";
+import { tw } from "@/lib/tags.ts";
+
+const progressSpinner: ProgressSpinnerPassThroughOptions = {
+  root: {
+    class: tw`relative mx-auto inline-block h-28 w-28 animate-spin`,
+  },
+
+  circle: {
+    class: tw`fill-transparent stroke-current stroke-[4px] text-blue-800 [stroke-dasharray:200] [stroke-dashoffset:100]`,
+  },
+};
+
+export default progressSpinner;