Status Dot

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { tv, type VariantProps } from 'tailwind-variants';
4 
5	const dotVariants = tv({
6		base: 'rounded-full',
7		variants: {
8			variant: {
9				default: 'bg-primary text-primary',
10				success: 'bg-emerald-500 text-emerald-500',
11				warning: 'bg-amber-500 text-amber-500',
12				error: 'bg-rose-500 text-rose-500',
13				info: 'bg-sky-500 text-sky-500',
14				muted: 'bg-muted-foreground/50 text-muted-foreground/50'
15			},
16			size: {
17				sm: 'h-2 w-2',
18				md: 'h-3 w-3',
19				lg: 'h-4 w-4'
20			}
21		},
22		defaultVariants: {
23			variant: 'default',
24			size: 'md'
25		}
26	});
27 
28	type Variant = VariantProps<typeof dotVariants>['variant'];
29	type Size = VariantProps<typeof dotVariants>['size'];
30 
31	let {
32		class: className,
33		variant = 'default',
34		size = 'md',
35		pulse = false,
36		...rest
37	}: {
38		class?: string;
39		variant?: Variant;
40		size?: Size;
41		pulse?: boolean;
42		[key: string]: any;
43	} = $props();
44</script>
45 
46<span
47	class={cn('relative flex items-center justify-center', dotVariants({ size }), className)}
48	{...rest}
49>
50	{#if pulse}
51		<span
52			class={cn(
53				'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
54				dotVariants({ variant, size: undefined })
55			)}
56		></span>
57	{/if}
58	<span class={cn('relative inline-flex rounded-full', dotVariants({ variant, size }))}></span>
59</span>