@1sat/sweep-ui 0.0.19 → 0.0.21

package/src/components/connect-wallet.tsx

@@ -1,34 +1,43 @@
-import { useState } from "react";
-import { Loader2, Wallet, X } from "lucide-react";
-import { Button } from "./ui/button";
-import { connectWallet, disconnectWallet, getIdentityKey, getProvider } from "../lib/wallet";
+import { Loader2, Wallet, X } from 'lucide-react'
+import { useState } from 'react'
+import {
+	connectWallet,
+	disconnectWallet,
+	getIdentityKey,
+	getProvider,
+} from '../lib/wallet'
+import { Button } from './ui/button'
 
 interface Props {
-	onConnected: () => void;
-	onDisconnected: () => void;
-	connected: boolean;
+	onConnected: () => void
+	onDisconnected: () => void
+	connected: boolean
 }
 
-export function ConnectWallet({ onConnected, onDisconnected, connected }: Props) {
-	const [connecting, setConnecting] = useState(false);
-	const [error, setError] = useState<string | null>(null);
+export function ConnectWallet({
+	onConnected,
+	onDisconnected,
+	connected,
+}: Props) {
+	const [connecting, setConnecting] = useState(false)
+	const [error, setError] = useState<string | null>(null)
 
 	async function handleConnect() {
-		setConnecting(true);
-		setError(null);
+		setConnecting(true)
+		setError(null)
 		try {
-			await connectWallet();
-			onConnected();
+			await connectWallet()
+			onConnected()
 		} catch (e) {
-			setError(e instanceof Error ? e.message : "Failed to connect wallet");
+			setError(e instanceof Error ? e.message : 'Failed to connect wallet')
 		} finally {
-			setConnecting(false);
+			setConnecting(false)
 		}
 	}
 
 	function handleDisconnect() {
-		disconnectWallet();
-		onDisconnected();
+		disconnectWallet()
+		onDisconnected()
 	}
 
 	if (connected) {
@@ -37,23 +46,39 @@ export function ConnectWallet({ onConnected, onDisconnected, connected }: Props)
 				<div className="flex items-center gap-2 text-sm">
 					<span className="h-2 w-2 rounded-full bg-green-500" />
 					<span className="text-muted-foreground">
-						{getProvider() === "brc100" ? "BRC-100" : "OneSat"} · {getIdentityKey()?.slice(0, 12)}...
+						{getProvider() === 'brc100' ? 'BRC-100' : 'OneSat'} ·{' '}
+						{getIdentityKey()?.slice(0, 12)}...
 					</span>
 				</div>
-				<Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={handleDisconnect}>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-6 w-6 p-0"
+					onClick={handleDisconnect}
+				>
 					<X className="h-3 w-3" />
 				</Button>
 			</div>
-		);
+		)
 	}
 
 	return (
 		<div className="space-y-1">
-			<Button variant="outline" size="sm" className="w-full text-xs gap-2" onClick={handleConnect} disabled={connecting}>
-				{connecting ? <Loader2 className="h-3 w-3 animate-spin" /> : <Wallet className="h-3 w-3" />}
-				{connecting ? "Connecting..." : "Connect BRC-100 Wallet (optional)"}
+			<Button
+				variant="outline"
+				size="sm"
+				className="w-full text-xs gap-2"
+				onClick={handleConnect}
+				disabled={connecting}
+			>
+				{connecting ? (
+					<Loader2 className="h-3 w-3 animate-spin" />
+				) : (
+					<Wallet className="h-3 w-3" />
+				)}
+				{connecting ? 'Connecting...' : 'Connect BRC-100 Wallet (optional)'}
 			</Button>
 			{error && <p className="text-xs text-destructive text-center">{error}</p>}
 		</div>
-	);
+	)
 }

package/src/components/opns-section.tsx

@@ -1,58 +1,92 @@
-import { useState, useEffect } from "react";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-import type { EnrichedOrdinal } from "../lib/scanner";
-import { getServices } from "../lib/services";
+import { useEffect, useState } from 'react'
+import type { EnrichedOrdinal } from '../lib/scanner'
+import { getServices } from '../lib/services'
+import { Button } from './ui/button'
+import { Input } from './ui/input'
 
-export function OpnsSection({ opnsNames, selectedOpns, onToggle, onSelectAll, onDeselectAll, onSweep, onSend, onBurn, walletConnected }: {
-	opnsNames: EnrichedOrdinal[]; selectedOpns: Set<string>; onToggle: (outpoint: string) => void; onSelectAll: () => void; onDeselectAll: () => void; onSweep: () => void; onSend?: (destination: string) => void; onBurn?: () => void; walletConnected: boolean;
+export function OpnsSection({
+	opnsNames,
+	selectedOpns,
+	onToggle,
+	onSelectAll,
+	onDeselectAll,
+	onSweep,
+	onSend,
+	onBurn,
+	walletConnected,
+}: {
+	opnsNames: EnrichedOrdinal[]
+	selectedOpns: Set<string>
+	onToggle: (outpoint: string) => void
+	onSelectAll: () => void
+	onDeselectAll: () => void
+	onSweep: () => void
+	onSend?: (destination: string) => void
+	onBurn?: () => void
+	walletConnected: boolean
 }) {
-	const [address, setAddress] = useState("");
-	const [resolvedNames, setResolvedNames] = useState<Map<string, string>>(new Map());
-	const [overlayValid, setOverlayValid] = useState<Map<string, boolean>>(new Map());
-	const [validating, setValidating] = useState(false);
+	const [address, setAddress] = useState('')
+	const [resolvedNames, setResolvedNames] = useState<Map<string, string>>(
+		new Map(),
+	)
+	const [overlayValid, setOverlayValid] = useState<Map<string, boolean>>(
+		new Map(),
+	)
+	const [validating, setValidating] = useState(false)
 
 	useEffect(() => {
-		if (opnsNames.length === 0) return;
-		const controller = new AbortController();
-		const pending = new Map<string, string>();
+		if (opnsNames.length === 0) return
+		const controller = new AbortController()
+		const pending = new Map<string, string>()
 		Promise.all(
 			opnsNames.map(async (item) => {
 				try {
-					const res = await fetch(item.contentUrl, { signal: controller.signal });
-					if (res.ok) pending.set(item.outpoint, await res.text());
-				} catch { /* fetch aborted or failed */ }
+					const res = await fetch(item.contentUrl, {
+						signal: controller.signal,
+					})
+					if (res.ok) pending.set(item.outpoint, await res.text())
+				} catch {
+					/* fetch aborted or failed */
+				}
 			}),
-		).then(() => { if (!controller.signal.aborted) setResolvedNames(new Map(pending)); });
-		return () => controller.abort();
-	}, [opnsNames]);
+		).then(() => {
+			if (!controller.signal.aborted) setResolvedNames(new Map(pending))
+		})
+		return () => controller.abort()
+	}, [opnsNames])
 
 	useEffect(() => {
-		if (opnsNames.length === 0) return;
-		let cancelled = false;
-		setValidating(true);
-		const originToOutpoints = new Map<string, string[]>();
+		if (opnsNames.length === 0) return
+		let cancelled = false
+		setValidating(true)
+		const originToOutpoints = new Map<string, string[]>()
 		for (const item of opnsNames) {
-			const origin = item.origin ?? item.outpoint;
-			const list = originToOutpoints.get(origin) ?? [];
-			list.push(item.outpoint);
-			originToOutpoints.set(origin, list);
+			const origin = item.origin ?? item.outpoint
+			const list = originToOutpoints.get(origin) ?? []
+			list.push(item.outpoint)
+			originToOutpoints.set(origin, list)
 		}
-		getServices().opns.validateOrigins([...originToOutpoints.keys()])
+		getServices()
+			.opns.validateOrigins([...originToOutpoints.keys()])
 			.then((result) => {
-				if (cancelled) return;
-				const map = new Map<string, boolean>();
+				if (cancelled) return
+				const map = new Map<string, boolean>()
 				for (const [origin, valid] of Object.entries(result)) {
-					for (const outpoint of originToOutpoints.get(origin) ?? []) map.set(outpoint, valid);
+					for (const outpoint of originToOutpoints.get(origin) ?? [])
+						map.set(outpoint, valid)
 				}
-				setOverlayValid(map);
+				setOverlayValid(map)
 			})
 			.catch(() => {})
-			.finally(() => { if (!cancelled) setValidating(false); });
-		return () => { cancelled = true; };
-	}, [opnsNames]);
+			.finally(() => {
+				if (!cancelled) setValidating(false)
+			})
+		return () => {
+			cancelled = true
+		}
+	}, [opnsNames])
 
-	if (opnsNames.length === 0) return null;
+	if (opnsNames.length === 0) return null
 
 	return (
 		<div className="border border-orange-500/20 bg-orange-500/5 p-4 rounded-lg">
@@ -60,55 +94,128 @@ export function OpnsSection({ opnsNames, selectedOpns, onToggle, onSelectAll, on
 				<div>
 					<div className="flex items-center gap-2 mb-1">
 						<span className="h-2 w-2 rounded-full bg-orange-500" />
-						<span className="text-sm font-semibold text-orange-500">OPNS Domains</span>
+						<span className="text-sm font-semibold text-orange-500">
+							OPNS Domains
+						</span>
 					</div>
 					<div className="text-xs text-muted-foreground">
-						{opnsNames.length} domain{opnsNames.length !== 1 ? "s" : ""}
-						{selectedOpns.size > 0 && <span className="text-orange-400 ml-1">({selectedOpns.size} selected)</span>}
+						{opnsNames.length} domain{opnsNames.length !== 1 ? 's' : ''}
+						{selectedOpns.size > 0 && (
+							<span className="text-orange-400 ml-1">
+								({selectedOpns.size} selected)
+							</span>
+						)}
 					</div>
 				</div>
 				<div className="flex gap-2">
-					<Button variant="outline" size="sm" className="h-7 text-[11px]" onClick={onSelectAll}>Select All</Button>
-					<Button variant="outline" size="sm" className="h-7 text-[11px]" onClick={onDeselectAll} disabled={selectedOpns.size === 0}>Deselect</Button>
+					<Button
+						variant="outline"
+						size="sm"
+						className="h-7 text-[11px]"
+						onClick={onSelectAll}
+					>
+						Select All
+					</Button>
+					<Button
+						variant="outline"
+						size="sm"
+						className="h-7 text-[11px]"
+						onClick={onDeselectAll}
+						disabled={selectedOpns.size === 0}
+					>
+						Deselect
+					</Button>
 				</div>
 			</div>
 			<div className="space-y-1">
 				{opnsNames.map((item) => {
-					const isSelected = selectedOpns.has(item.outpoint);
-					const displayName = resolvedNames.get(item.outpoint) ?? item.outpoint.substring(0, 8) + "...";
+					const isSelected = selectedOpns.has(item.outpoint)
+					const displayName =
+						resolvedNames.get(item.outpoint) ??
+						item.outpoint.substring(0, 8) + '...'
 					return (
-						<div key={item.outpoint} className={`flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all ${isSelected ? "border border-orange-500 bg-orange-500/10 ring-1 ring-orange-500/30" : "border border-border/50 hover:border-border bg-black/20"}`} onClick={() => onToggle(item.outpoint)}>
-							<div className={`w-4 h-4 rounded border-2 flex items-center justify-center text-[10px] shrink-0 ${isSelected ? "bg-orange-500 border-orange-500 text-white" : "border-muted-foreground/40"}`}>
-								{isSelected && "\u2713"}
+						<div
+							key={item.outpoint}
+							className={`flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all ${isSelected ? 'border border-orange-500 bg-orange-500/10 ring-1 ring-orange-500/30' : 'border border-border/50 hover:border-border bg-black/20'}`}
+							onClick={() => onToggle(item.outpoint)}
+						>
+							<div
+								className={`w-4 h-4 rounded border-2 flex items-center justify-center text-[10px] shrink-0 ${isSelected ? 'bg-orange-500 border-orange-500 text-white' : 'border-muted-foreground/40'}`}
+							>
+								{isSelected && '\u2713'}
 							</div>
-							<span className="text-sm text-foreground truncate">{displayName}</span>
-							{!validating && overlayValid.has(item.outpoint) && (
-								overlayValid.get(item.outpoint) ? (
-									<span className="shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded bg-green-500/20 text-green-400">valid</span>
+							<span className="text-sm text-foreground truncate">
+								{displayName}
+							</span>
+							{!validating &&
+								overlayValid.has(item.outpoint) &&
+								(overlayValid.get(item.outpoint) ? (
+									<span className="shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded bg-green-500/20 text-green-400">
+										valid
+									</span>
 								) : (
-									<span className="shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded bg-red-500/20 text-red-400">invalid</span>
-								)
-							)}
+									<span className="shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded bg-red-500/20 text-red-400">
+										invalid
+									</span>
+								))}
 						</div>
-					);
+					)
 				})}
 			</div>
 			{selectedOpns.size > 0 && (
 				<div className="mt-3 space-y-2">
 					{onSend && (
-						<Input type="text" placeholder="Destination address..." value={address} onChange={(e) => setAddress(e.target.value)} className="font-mono text-xs" />
+						<Input
+							type="text"
+							placeholder="Destination address..."
+							value={address}
+							onChange={(e) => setAddress(e.target.value)}
+							className="font-mono text-xs"
+						/>
 					)}
 					<div className="flex gap-2">
 						{onSend && (
-							<Button variant="outline" size="sm" className="flex-1" disabled={!address.trim()} onClick={() => onSend(address.trim())}>Send {selectedOpns.size} Domain{selectedOpns.size !== 1 ? "s" : ""}</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								className="flex-1"
+								disabled={!address.trim()}
+								onClick={() => onSend(address.trim())}
+							>
+								Send {selectedOpns.size} Domain
+								{selectedOpns.size !== 1 ? 's' : ''}
+							</Button>
 						)}
-						<Button size="sm" className="flex-1" onClick={onSweep} disabled={!walletConnected} title={walletConnected ? undefined : "Connect BRC-100 wallet to sweep"}>Sweep to Wallet</Button>
+						<Button
+							size="sm"
+							className="flex-1"
+							onClick={onSweep}
+							disabled={!walletConnected}
+							title={
+								walletConnected ? undefined : 'Connect BRC-100 wallet to sweep'
+							}
+						>
+							Sweep to Wallet
+						</Button>
 						{onBurn && (
-							<Button size="sm" className="bg-red-600 hover:bg-red-700 text-white" onClick={() => { if (window.confirm(`Permanently burn ${selectedOpns.size} domain${selectedOpns.size !== 1 ? "s" : ""}? This cannot be undone.`)) onBurn(); }}>Burn</Button>
+							<Button
+								size="sm"
+								className="bg-red-600 hover:bg-red-700 text-white"
+								onClick={() => {
+									if (
+										window.confirm(
+											`Permanently burn ${selectedOpns.size} domain${selectedOpns.size !== 1 ? 's' : ''}? This cannot be undone.`,
+										)
+									)
+										onBurn()
+								}}
+							>
+								Burn
+							</Button>
 						)}
 					</div>
 				</div>
 			)}
 		</div>
-	);
+	)
 }

package/src/components/sweep-progress.tsx

@@ -1,27 +1,39 @@
-import { CheckCircle2, Loader2, AlertTriangle, ExternalLink } from "lucide-react";
-import type { SweepResult } from "../lib/sweeper";
+import {
+	AlertTriangle,
+	CheckCircle2,
+	ExternalLink,
+	Loader2,
+} from 'lucide-react'
+import type { SweepResult } from '../lib/sweeper'
 
-const EXPLORER_BASE = "https://bananablocks.com/tx/";
+const EXPLORER_BASE = 'https://bananablocks.com/tx/'
 
 function TxLink({ label, txid }: { label: string; txid: string }) {
 	return (
 		<div className="border-b border-border/30 pb-2 space-y-1">
 			<div className="flex items-center justify-between text-sm">
 				<span className="text-muted-foreground">{label}</span>
-				<a href={`${EXPLORER_BASE}${txid}`} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 flex items-center gap-1">
+				<a
+					href={`${EXPLORER_BASE}${txid}`}
+					target="_blank"
+					rel="noopener noreferrer"
+					className="text-blue-400 hover:text-blue-300 flex items-center gap-1"
+				>
 					<ExternalLink className="h-3 w-3" />
 					<span className="text-xs">View</span>
 				</a>
 			</div>
-			<code className="text-xs font-mono text-muted-foreground break-all">{txid}</code>
+			<code className="text-xs font-mono text-muted-foreground break-all">
+				{txid}
+			</code>
 		</div>
-	);
+	)
 }
 
 interface Props {
-	sweeping: boolean;
-	progress: string;
-	result: SweepResult | null;
+	sweeping: boolean
+	progress: string
+	result: SweepResult | null
 }
 
 export function SweepProgress({ sweeping, progress, result }: Props) {
@@ -29,16 +41,21 @@ export function SweepProgress({ sweeping, progress, result }: Props) {
 		return (
 			<div className="text-center space-y-4 py-8">
 				<Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
-				<p className="text-sm text-muted-foreground animate-pulse">{progress}</p>
+				<p className="text-sm text-muted-foreground animate-pulse">
+					{progress}
+				</p>
 				<p className="text-xs text-destructive/80">Do not close this page.</p>
 			</div>
-		);
+		)
 	}
 
-	if (!result) return null;
+	if (!result) return null
 
-	const hasErrors = result.errors.length > 0;
-	const hasTxids = result.bsvTxid || result.ordinalTxids.length > 0 || result.bsv21Txids.length > 0;
+	const hasErrors = result.errors.length > 0
+	const hasTxids =
+		result.bsvTxid ||
+		result.ordinalTxids.length > 0 ||
+		result.bsv21Txids.length > 0
 
 	return (
 		<div className="space-y-4 py-4">
@@ -49,7 +66,11 @@ export function SweepProgress({ sweeping, progress, result }: Props) {
 					<CheckCircle2 className="h-5 w-5 text-green-500" />
 				)}
 				<span className="font-semibold">
-					{hasErrors && !hasTxids ? "Failed" : hasErrors ? "Completed with Errors" : "Complete"}
+					{hasErrors && !hasTxids
+						? 'Failed'
+						: hasErrors
+							? 'Completed with Errors'
+							: 'Complete'}
 				</span>
 			</div>
 
@@ -62,8 +83,10 @@ export function SweepProgress({ sweeping, progress, result }: Props) {
 			))}
 
 			{result.errors.map((err) => (
-				<p key={err} className="text-xs text-destructive">{err}</p>
+				<p key={err} className="text-xs text-destructive">
+					{err}
+				</p>
 			))}
 		</div>
-	);
+	)
 }

package/src/components/tx-history.tsx

@@ -1,18 +1,18 @@
-import { Loader2, ExternalLink } from "lucide-react";
+import { ExternalLink, Loader2 } from 'lucide-react'
 
-const EXPLORER_BASE = "https://bananablocks.com/tx/";
+const EXPLORER_BASE = 'https://bananablocks.com/tx/'
 
 export interface TxRecord {
-	label: string;
-	txid: string;
-	timestamp: Date;
-	error?: string;
+	label: string
+	txid: string
+	timestamp: Date
+	error?: string
 }
 
 interface Props {
-	sweeping: boolean;
-	progress: string;
-	history: TxRecord[];
+	sweeping: boolean
+	progress: string
+	history: TxRecord[]
 }
 
 export function TxHistory({ sweeping, progress, history }: Props) {
@@ -21,7 +21,9 @@ export function TxHistory({ sweeping, progress, history }: Props) {
 			{sweeping && (
 				<div className="text-center space-y-4 py-8">
 					<Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
-					<p className="text-sm text-muted-foreground animate-pulse">{progress}</p>
+					<p className="text-sm text-muted-foreground animate-pulse">
+						{progress}
+					</p>
 					<p className="text-xs text-destructive/80">Do not close this page.</p>
 				</div>
 			)}
@@ -33,15 +35,24 @@ export function TxHistory({ sweeping, progress, history }: Props) {
 					</div>
 					<div className="space-y-2 max-h-48 overflow-y-auto">
 						{[...history].reverse().map((tx, i) => (
-							<div key={`${tx.txid}-${i}`} className="flex items-center justify-between gap-2 text-xs">
+							<div
+								key={`${tx.txid}-${i}`}
+								className="flex items-center justify-between gap-2 text-xs"
+							>
 								<div className="flex items-center gap-2 min-w-0">
-									<span className={tx.error ? "text-red-500" : "text-green-500"}>
-										{tx.error ? "\u2717" : "\u2713"}
+									<span
+										className={tx.error ? 'text-red-500' : 'text-green-500'}
+									>
+										{tx.error ? '\u2717' : '\u2713'}
+									</span>
+									<span className="text-muted-foreground truncate">
+										{tx.label}
 									</span>
-									<span className="text-muted-foreground truncate">{tx.label}</span>
 								</div>
 								{tx.error ? (
-									<span className="text-red-500 text-[10px] truncate max-w-[200px]">{tx.error}</span>
+									<span className="text-red-500 text-[10px] truncate max-w-[200px]">
+										{tx.error}
+									</span>
 								) : (
 									<a
 										href={`${EXPLORER_BASE}${tx.txid}`}
@@ -49,7 +60,9 @@ export function TxHistory({ sweeping, progress, history }: Props) {
 										rel="noopener noreferrer"
 										className="text-blue-400 hover:text-blue-300 flex items-center gap-1 shrink-0"
 									>
-										<code className="text-[10px] font-mono">{tx.txid.substring(0, 12)}...</code>
+										<code className="text-[10px] font-mono">
+											{tx.txid.substring(0, 12)}...
+										</code>
 										<ExternalLink className="h-3 w-3" />
 									</a>
 								)}
@@ -59,5 +72,5 @@ export function TxHistory({ sweeping, progress, history }: Props) {
 				</div>
 			)}
 		</>
-	);
+	)
 }

package/src/components/ui/badge.tsx

@@ -1,31 +1,34 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../../lib/utils"
+import { type VariantProps, cva } from 'class-variance-authority'
+import type * as React from 'react'
+import { cn } from '../../lib/utils'
 
 const badgeVariants = cva(
-	"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+	'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',
 	{
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-				secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-				destructive: "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
-				outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-				ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-				link: "text-primary underline-offset-4 [a&]:hover:underline",
+				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+				secondary:
+					'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+				destructive:
+					'bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
+				outline:
+					'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+				ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+				link: 'text-primary underline-offset-4 [a&]:hover:underline',
 			},
 		},
 		defaultVariants: {
-			variant: "default",
+			variant: 'default',
 		},
-	}
+	},
 )
 
 function Badge({
 	className,
-	variant = "default",
+	variant = 'default',
 	...props
-}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
 	return (
 		<span
 			data-slot="badge"