Sort of working beta

resources/js/Components/ui/feedback/spinner/LoadingSpinner.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Loader2 } from 'lucide-vue-next'
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { spinnerVariants, type SpinnerVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  size?: SpinnerVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :class="cn(spinnerVariants({ size }), props.class)"
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
+  </svg>
+</template>
+
+<style scoped></style>

resources/js/Components/ui/feedback/spinner/index.ts

@@ -0,0 +1,19 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export const spinnerVariants = cva('animate-spin lucide lucide-loader-circle-icon', {
+  variants: {
+    size: {
+      default: 'w-4 h-4 m-2',
+      xs: 'w-1 h-1 m-1',
+      sm: 'w-2 h-2 m-1',
+      lg: 'w-7 h-7 m-3',
+      xl: 'w-12 h-12 m-4',
+      icon: 'w-10 h-10 m-4'
+    }
+  },
+  defaultVariants: {
+    size: 'default'
+  }
+})
+
+export type SpinnerVariants = VariantProps<typeof spinnerVariants>