SnowLuma v2.4.2 source snapshot

packages/ui/src/components/status-dot.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../lib/cn';
+
+/**
+ * A semantic colored status dot — drop-in replacement for ad-hoc emoji
+ * (🟢 / 🟡 / 🔴) so we keep visual rhythm with the rest of the Lucide
+ * iconography. `pulse` adds a soft halo for the "active" state.
+ */
+const dotVariants = cva('inline-block shrink-0 rounded-full', {
+    variants: {
+        tone: {
+            success: 'bg-success',
+            warning: 'bg-warning',
+            destructive: 'bg-destructive',
+            info: 'bg-info',
+            muted: 'bg-muted-foreground/50',
+            primary: 'bg-primary',
+        },
+        size: {
+            xs: 'size-1.5',
+            sm: 'size-2',
+            md: 'size-2.5',
+            lg: 'size-3',
+        },
+    },
+    defaultVariants: { tone: 'muted', size: 'sm' },
+});
+
+export interface StatusDotProps
+    extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof dotVariants> {
+    pulse?: boolean;
+}
+
+export function StatusDot({ className, tone, size, pulse, ...props }: StatusDotProps) {
+    return (
+        <span
+            className={cn(
+                'relative inline-flex items-center justify-center',
+                pulse &&
+                    'before:absolute before:inset-0 before:rounded-full before:bg-current before:opacity-30 before:animate-ping',
+                className,
+            )}
+            {...props}
+        >
+            <span className={cn(dotVariants({ tone, size }), 'relative')} aria-hidden />
+        </span>
+    );
+}