feat(components): add spinner component

apps/www/__registry__/index.tsx

@@ -215,6 +215,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/ui/slider")),
       files: ["registry/default/ui/slider.tsx"],
     },
+    "spinner": {
+      name: "spinner",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/spinner")),
+      files: ["registry/default/ui/spinner.tsx"],
+    },
     "switch": {
       name: "switch",
       type: "components:ui",
@@ -775,6 +782,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/slider-demo")),
       files: ["registry/default/example/slider-demo.tsx"],
     },
+    "spinner-demo": {
+      name: "spinner-demo",
+      type: "components:example",
+      registryDependencies: ["spinner"],
+      component: React.lazy(() => import("@/registry/default/example/spinner-demo")),
+      files: ["registry/default/example/spinner-demo.tsx"],
+    },
     "switch-demo": {
       name: "switch-demo",
       type: "components:example",
@@ -1294,6 +1308,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/new-york/ui/slider")),
       files: ["registry/new-york/ui/slider.tsx"],
     },
+    "spinner": {
+      name: "spinner",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/ui/spinner")),
+      files: ["registry/new-york/ui/spinner.tsx"],
+    },
     "switch": {
       name: "switch",
       type: "components:ui",
@@ -1854,6 +1875,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/new-york/example/slider-demo")),
       files: ["registry/new-york/example/slider-demo.tsx"],
     },
+    "spinner-demo": {
+      name: "spinner-demo",
+      type: "components:example",
+      registryDependencies: ["spinner"],
+      component: React.lazy(() => import("@/registry/new-york/example/spinner-demo")),
+      files: ["registry/new-york/example/spinner-demo.tsx"],
+    },
     "switch-demo": {
       name: "switch-demo",
       type: "components:example",

apps/www/config/docs.ts

@@ -327,6 +327,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/slider",
           items: [],
         },
+        {
+          title: "Spinner",
+          href: "/docs/components/spinner",
+          items: [],
+        },
         {
           title: "Switch",
           href: "/docs/components/switch",

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

@@ -0,0 +1,102 @@
+---
+title: Spinner
+description: Indicates an action running in the background.
+component: true
+---
+
+<ComponentPreview name="spinner-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+<Steps>
+
+<Step>Run the following command:</Step>
+
+```bash
+npx shadcn-ui@latest add spinner
+```
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-13}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      keyframes: {
+        spinner: {
+          from: { opacity: "1" },
+          to: { opacity: "0.15" },
+        },
+      },
+      animation: {
+        spinner: "spinner 1.2s linear infinite",
+      },
+    },
+  },
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="spinner" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-13}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      keyframes: {
+        spinner: {
+          from: { opacity: "1" },
+          to: { opacity: "0.15" },
+        },
+      },
+      animation: {
+        spinner: "spinner 1.2s linear infinite",
+      },
+    },
+  },
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Spinner } from "@/components/ui/spinner"
+```
+
+```tsx
+<Spinner />
+```

apps/www/content/docs/installation/laravel.mdx

@@ -116,10 +116,15 @@ export default {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: 0 },
         },
+        spinner: {
+          from: { opacity: "1" },
+          to: { opacity: "0.15" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        spinner: "spinner 1.2s linear infinite",
       },
     },
   },

apps/www/content/docs/installation/manual.mdx

@@ -124,10 +124,15 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        spinner: {
+          from: { opacity: "1" },
+          to: { opacity: "0.15" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        spinner: "spinner 1.2s linear infinite",
       },
     },
   },

apps/www/pages/api/components.json

@@ -344,6 +344,17 @@
     ],
     "type": "ui"
   },
+  {
+    "name": "spinner",
+    "files": [
+      {
+        "name": "spinner.tsx",
+        "dir": "components/ui",
+        "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface SpinnerBar {\n  animationDelay: number\n  rotate: number\n}\n\nconst Spinner = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const spinnerBars: SpinnerBar[] = [\n    { animationDelay: -1.2, rotate: 0.0001 },\n    { animationDelay: -1.1, rotate: 30 },\n    { animationDelay: -1, rotate: 60 },\n    { animationDelay: -0.9, rotate: 90 },\n    { animationDelay: -0.8, rotate: 120 },\n    { animationDelay: -0.7, rotate: 150 },\n    { animationDelay: -0.6, rotate: 180 },\n    { animationDelay: -0.5, rotate: 210 },\n    { animationDelay: -0.4, rotate: 240 },\n    { animationDelay: -0.3, rotate: 270 },\n    { animationDelay: -0.2, rotate: 300 },\n    { animationDelay: -0.1, rotate: 330 },\n  ]\n\n  return (\n    <div ref={ref} className={cn(\"h-5 w-5\", className)} {...props}>\n      <div className=\"relative left-1/2 top-1/2 h-full\">\n        {spinnerBars.map((bar) => (\n          <div\n            key={bar.rotate}\n            className=\"absolute left-[-10%] top-[-3.9%] h-[8%] w-[24%] animate-spinner rounded-md bg-muted-foreground\"\n            style={{\n              animationDelay: `${bar.animationDelay}s`,\n              transform: `rotate(${bar.rotate}deg) translate(146%)`,\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  )\n})\nSpinner.displayName = \"Spinner\"\n\nexport { Spinner }\n"
+      }
+    ],
+    "type": "ui"
+  },
   {
     "name": "switch",
     "dependencies": ["@radix-ui/react-switch"],

apps/www/public/registry/index.json

@@ -302,6 +302,13 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "spinner",
+    "files": [
+      "ui/spinner.tsx"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "switch",
     "dependencies": [

apps/www/public/registry/styles/default/spinner.json

@@ -0,0 +1,10 @@
+{
+  "name": "spinner",
+  "files": [
+    {
+      "name": "spinner.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface SpinnerBar {\n  animationDelay: number\n  rotate: number\n}\n\nconst Spinner = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const spinnerBars: SpinnerBar[] = [\n    { animationDelay: -1.2, rotate: 0.0001 },\n    { animationDelay: -1.1, rotate: 30 },\n    { animationDelay: -1, rotate: 60 },\n    { animationDelay: -0.9, rotate: 90 },\n    { animationDelay: -0.8, rotate: 120 },\n    { animationDelay: -0.7, rotate: 150 },\n    { animationDelay: -0.6, rotate: 180 },\n    { animationDelay: -0.5, rotate: 210 },\n    { animationDelay: -0.4, rotate: 240 },\n    { animationDelay: -0.3, rotate: 270 },\n    { animationDelay: -0.2, rotate: 300 },\n    { animationDelay: -0.1, rotate: 330 },\n  ]\n\n  return (\n    <div ref={ref} className={cn(\"h-5 w-5\", className)} {...props}>\n      <div className=\"relative left-1/2 top-1/2 h-full\">\n        {spinnerBars.map((bar) => (\n          <div\n            key={bar.rotate}\n            className=\"absolute left-[-10%] top-[-3.9%] h-[8%] w-[24%] animate-spinner rounded-md bg-muted-foreground\"\n            style={{\n              animationDelay: `${bar.animationDelay}s`,\n              transform: `rotate(${bar.rotate}deg) translate(146%)`,\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  )\n})\nSpinner.displayName = \"Spinner\"\n\nexport { Spinner }\n"
+    }
+  ],
+  "type": "components:ui"
+}

apps/www/public/registry/styles/new-york/spinner.json

@@ -0,0 +1,10 @@
+{
+  "name": "spinner",
+  "files": [
+    {
+      "name": "spinner.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface SpinnerBar {\n  animationDelay: number\n  rotate: number\n}\n\nconst Spinner = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const spinnerBars: SpinnerBar[] = [\n    { animationDelay: -1.2, rotate: 0.0001 },\n    { animationDelay: -1.1, rotate: 30 },\n    { animationDelay: -1, rotate: 60 },\n    { animationDelay: -0.9, rotate: 90 },\n    { animationDelay: -0.8, rotate: 120 },\n    { animationDelay: -0.7, rotate: 150 },\n    { animationDelay: -0.6, rotate: 180 },\n    { animationDelay: -0.5, rotate: 210 },\n    { animationDelay: -0.4, rotate: 240 },\n    { animationDelay: -0.3, rotate: 270 },\n    { animationDelay: -0.2, rotate: 300 },\n    { animationDelay: -0.1, rotate: 330 },\n  ]\n\n  return (\n    <div ref={ref} className={cn(\"h-5 w-5\", className)} {...props}>\n      <div className=\"relative left-1/2 top-1/2 h-full\">\n        {spinnerBars.map((bar) => (\n          <div\n            key={bar.rotate}\n            className=\"absolute left-[-10%] top-[-3.9%] h-[8%] w-[24%] animate-spinner rounded-md bg-muted-foreground\"\n            style={{\n              animationDelay: `${bar.animationDelay}s`,\n              transform: `rotate(${bar.rotate}deg) translate(146%)`,\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  )\n})\nSpinner.displayName = \"Spinner\"\n\nexport { Spinner }\n"
+    }
+  ],
+  "type": "components:ui"
+}

apps/www/registry/default/example/spinner-demo.tsx

@@ -0,0 +1,5 @@
+import { Spinner } from "@/registry/default/ui/spinner"
+
+export default function SpinnerDemo() {
+  return <Spinner />
+}

apps/www/registry/default/ui/spinner.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+interface SpinnerBar {
+  animationDelay: number
+  rotate: number
+}
+
+const Spinner = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const spinnerBars: SpinnerBar[] = [
+    { animationDelay: -1.2, rotate: 0.0001 },
+    { animationDelay: -1.1, rotate: 30 },
+    { animationDelay: -1, rotate: 60 },
+    { animationDelay: -0.9, rotate: 90 },
+    { animationDelay: -0.8, rotate: 120 },
+    { animationDelay: -0.7, rotate: 150 },
+    { animationDelay: -0.6, rotate: 180 },
+    { animationDelay: -0.5, rotate: 210 },
+    { animationDelay: -0.4, rotate: 240 },
+    { animationDelay: -0.3, rotate: 270 },
+    { animationDelay: -0.2, rotate: 300 },
+    { animationDelay: -0.1, rotate: 330 },
+  ]
+
+  return (
+    <div ref={ref} className={cn("h-5 w-5", className)} {...props}>
+      <div className="relative left-1/2 top-1/2 h-full">
+        {spinnerBars.map((bar) => (
+          <div
+            key={bar.rotate}
+            className="absolute left-[-10%] top-[-3.9%] h-[8%] w-[24%] animate-spinner rounded-md bg-muted-foreground"
+            style={{
+              animationDelay: `${bar.animationDelay}s`,
+              transform: `rotate(${bar.rotate}deg) translate(146%)`,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  )
+})
+Spinner.displayName = "Spinner"
+
+export { Spinner }

apps/www/registry/new-york/example/spinner-demo.tsx

@@ -0,0 +1,5 @@
+import { Spinner } from "@/registry/default/ui/spinner"
+
+export default function SpinnerDemo() {
+  return <Spinner />
+}

apps/www/registry/new-york/ui/spinner.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+interface SpinnerBar {
+  animationDelay: number
+  rotate: number
+}
+
+const Spinner = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const spinnerBars: SpinnerBar[] = [
+    { animationDelay: -1.2, rotate: 0.0001 },
+    { animationDelay: -1.1, rotate: 30 },
+    { animationDelay: -1, rotate: 60 },
+    { animationDelay: -0.9, rotate: 90 },
+    { animationDelay: -0.8, rotate: 120 },
+    { animationDelay: -0.7, rotate: 150 },
+    { animationDelay: -0.6, rotate: 180 },
+    { animationDelay: -0.5, rotate: 210 },
+    { animationDelay: -0.4, rotate: 240 },
+    { animationDelay: -0.3, rotate: 270 },
+    { animationDelay: -0.2, rotate: 300 },
+    { animationDelay: -0.1, rotate: 330 },
+  ]
+
+  return (
+    <div ref={ref} className={cn("h-5 w-5", className)} {...props}>
+      <div className="relative left-1/2 top-1/2 h-full">
+        {spinnerBars.map((bar) => (
+          <div
+            key={bar.rotate}
+            className="absolute left-[-10%] top-[-3.9%] h-[8%] w-[24%] animate-spinner rounded-md bg-muted-foreground"
+            style={{
+              animationDelay: `${bar.animationDelay}s`,
+              transform: `rotate(${bar.rotate}deg) translate(146%)`,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  )
+})
+Spinner.displayName = "Spinner"
+
+export { Spinner }

apps/www/registry/registry.ts

@@ -186,6 +186,11 @@ const ui: Registry = [
     dependencies: ["@radix-ui/react-slider"],
     files: ["ui/slider.tsx"],
   },
+  {
+    name: "spinner",
+    type: "components:ui",
+    files: ["ui/spinner.tsx"],
+  },
   {
     name: "switch",
     type: "components:ui",
@@ -672,6 +677,12 @@ const example: Registry = [
     registryDependencies: ["slider"],
     files: ["example/slider-demo.tsx"],
   },
+  {
+    name: "spinner-demo",
+    type: "components:example",
+    registryDependencies: ["spinner"],
+    files: ["example/spinner-demo.tsx"],
+  },
   {
     name: "switch-demo",
     type: "components:example",