feat: billing

packages/ui/primitives/spinner.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { cva } from 'class-variance-authority';
+import { Loader } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+
+const spinnerVariants = cva('text-muted-foreground animate-spin', {
+  variants: {
+    size: {
+      default: 'h-6 w-6',
+      sm: 'h-4 w-4',
+      lg: 'h-8 w-8',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+type SpinnerSize = 'default' | 'sm' | 'lg';
+
+export interface SpinnerProps extends Omit<React.ComponentPropsWithoutRef<typeof Loader>, 'size'> {
+  size?: SpinnerSize;
+}
+
+const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(
+  ({ className, size = 'default', ...props }, ref) => {
+    return <Loader ref={ref} className={cn(spinnerVariants({ size }), className)} {...props} />;
+  },
+);
+
+Spinner.displayName = 'Spinner';
+
+export interface SpinnerBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  spinnerProps?: SpinnerProps;
+}
+
+const SpinnerBox = React.forwardRef<HTMLDivElement, SpinnerBoxProps>(
+  ({ className, spinnerProps, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-center justify-center rounded-lg', className)}
+        {...props}
+      >
+        <Spinner {...spinnerProps} />
+      </div>
+    );
+  },
+);
+
+SpinnerBox.displayName = 'SpinnerBox';
+
+export { Spinner, SpinnerBox, spinnerVariants };