feat: new spinner variant

.changeset/happy-actors-pretend.md

@@ -0,0 +1,6 @@
+---
+"@heroui/spinner": patch
+"@heroui/theme": patch
+---
+
+New spinner variant "simple"

apps/docs/content/components/spinner/variants.raw.jsx

@@ -3,11 +3,12 @@ import {Spinner} from "@heroui/react";
 export default function App() {
   return (
     <div className="flex flex-wrap items-end gap-8">
-      <Spinner classNames={{label: "text-primary-400 mt-4"}} label="default" variant="default" />
-      <Spinner classNames={{label: "text-primary-400 mt-4"}} label="gradient" variant="gradient" />
-      <Spinner classNames={{label: "text-primary-400 mt-4"}} label="spinner" variant="spinner" />
-      <Spinner classNames={{label: "text-primary-400 mt-4"}} label="wave" variant="wave" />
-      <Spinner classNames={{label: "text-primary-400 mt-4"}} label="dots" variant="dots" />
+      <Spinner classNames={{label: "text-foreground mt-4"}} label="default" variant="default" />
+      <Spinner classNames={{label: "text-foreground mt-4"}} label="simple" variant="simple" />
+      <Spinner classNames={{label: "text-foreground mt-4"}} label="gradient" variant="gradient" />
+      <Spinner classNames={{label: "text-foreground mt-4"}} label="spinner" variant="spinner" />
+      <Spinner classNames={{label: "text-foreground mt-4"}} label="wave" variant="wave" />
+      <Spinner classNames={{label: "text-foreground mt-4"}} label="dots" variant="dots" />
     </div>
   );
 }

apps/docs/content/docs/components/spinner.mdx

@@ -102,7 +102,7 @@ Spinner express an unspecified wait time or display the length of a process.
     },
     {
       attribute: "variant",
-      type: "default | gradient | wave | dots | spinner",
+      type: "default | simple | gradient | wave | dots | spinner",
       description: "The variant of the spinner",
       default: "default"
     },

packages/components/spinner/src/spinner.tsx

@@ -28,6 +28,33 @@ const Spinner = forwardRef<"div", SpinnerProps>((props, ref) => {
     );
   }
 
+  if (variant === "simple") {
+    return (
+      <div ref={ref} {...getSpinnerProps()}>
+        <svg
+          className={slots.wrapper({class: classNames?.wrapper})}
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className={slots.circle1({class: classNames?.circle1})}
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className={slots.circle2({class: classNames?.circle2})}
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            fill="currentColor"
+          />
+        </svg>
+        {label && <span className={slots.label({class: classNames?.label})}>{label}</span>}
+      </div>
+    );
+  }
+
   if (variant === "spinner") {
     return (
       <div ref={ref} {...getSpinnerProps()}>

packages/components/spinner/stories/spinner.stories.tsx

@@ -30,7 +30,7 @@ export default {
       control: {
         type: "select",
       },
-      options: ["default", "gradient", "spinner", "wave", "dots"],
+      options: ["default", "simple", "gradient", "spinner", "wave", "dots"],
     },
   },
   decorators: [
@@ -50,6 +50,7 @@ const VariantsTemplate = (args: SpinnerProps) => {
   return (
     <div className="flex flex-wrap items-end gap-8 py-4">
       <Spinner {...args} label="default" variant="default" />
+      <Spinner {...args} label="simple" variant="simple" />
       <Spinner {...args} label="gradient" variant="gradient" />
       <Spinner {...args} label="spinner" variant="spinner" />
       <Spinner {...args} label="wave" variant="wave" />

packages/core/theme/src/components/spinner.ts

@@ -167,6 +167,11 @@ const spinner = tv({
         dots: ["animate-blink", "spinner-dot-blink-animation"],
       },
       spinner: {},
+      simple: {
+        wrapper: "text-foreground h-5 w-5 animate-spin",
+        circle1: "opacity-25",
+        circle2: "opacity-75",
+      },
     },
   },
   defaultVariants: {
@@ -226,6 +231,86 @@ const spinner = tv({
         wrapper: "w-12 h-12",
       },
     },
+    // Simple variants
+    // Size
+    {
+      variant: "simple",
+      size: "sm",
+      class: {
+        wrapper: "w-5 h-5",
+      },
+    },
+    {
+      variant: "simple",
+      size: "md",
+      class: {
+        wrapper: "w-8 h-8",
+      },
+    },
+    {
+      variant: "simple",
+      size: "lg",
+      class: {
+        wrapper: "w-12 h-12",
+      },
+    },
+    // Color
+    {
+      variant: "simple",
+      color: "current",
+      class: {
+        wrapper: "text-current",
+      },
+    },
+    {
+      variant: "simple",
+      color: "white",
+      class: {
+        wrapper: "text-white",
+      },
+    },
+    {
+      variant: "simple",
+      color: "default",
+      class: {
+        wrapper: "text-default",
+      },
+    },
+    {
+      variant: "simple",
+      color: "primary",
+      class: {
+        wrapper: "text-primary",
+      },
+    },
+    {
+      variant: "simple",
+      color: "secondary",
+      class: {
+        wrapper: "text-secondary",
+      },
+    },
+    {
+      variant: "simple",
+      color: "success",
+      class: {
+        wrapper: "text-success",
+      },
+    },
+    {
+      variant: "simple",
+      color: "warning",
+      class: {
+        wrapper: "text-warning",
+      },
+    },
+    {
+      variant: "simple",
+      color: "danger",
+      class: {
+        wrapper: "text-danger",
+      },
+    },
   ],
 });