@playfast/reform-better-hub-ui-primitives 0.2.2 → 0.4.0

package/package.json

@@ -1,55 +1,65 @@
 {
   "name": "@playfast/reform-better-hub-ui-primitives",
-  "playbook": "./playbook",
-  "version": "0.2.2",
-  "type": "module",
+  "version": "0.4.0",
   "description": "React UI primitives adapted from better-hub by Better Auth (https://github.com/better-auth/better-hub). Full credit to the Better Auth team.",
   "keywords": [
-    "reform",
-    "effect",
-    "react",
-    "ui",
     "components",
     "design-system",
-    "shadcn",
+    "effect",
     "radix",
-    "tailwind"
+    "react",
+    "reform",
+    "shadcn",
+    "tailwind",
+    "ui"
   ],
+  "bugs": {
+    "url": "https://github.com/playfast/reform/issues"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/playfast/reform.git",
     "directory": "packages/better-hub-ui-primitives"
   },
-  "bugs": {
-    "url": "https://github.com/playfast/reform/issues"
-  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "type": "module",
   "sideEffects": [
     "**/*.css"
   ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
-    ".": "./src/index.ts",
+    ".": {
+      "playfast-src": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
     "./styles.css": "./src/foundation/styles.css",
-    "./*": "./src/*.tsx"
+    "./*": {
+      "playfast-src": "./src/*.tsx",
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
   },
-  "files": [
-    "src",
-    "README.md"
-  ],
   "scripts": {
     "clean": "rm -rf dist .tsbuildinfo",
     "check": "tsc --noEmit",
-    "build": "tsc -p tsconfig.build.json",
+    "build": "rm -rf dist .tsbuildinfo && tsc -p tsconfig.build.json && bun ../../scripts/fix-esm-extensions.ts dist",
     "test": "vitest run",
     "test:watch": "vitest",
     "coverage": "vitest run --coverage",
     "lint": "oxlint src",
-    "lint:fix": "oxlint --fix src"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "lint:fix": "oxlint --fix src",
+    "prepack": "bun run build"
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
@@ -66,7 +76,9 @@
     "radix-ui": "^1.4.3",
     "tailwind-merge": "^3.4.1"
   },
-  "publishConfig": {
-    "access": "public"
-  }
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "playbook": "./playbook"
 }

package/src/components/agent-icon.tsx

@@ -1,22 +1,22 @@
-import type * as React from "react";
+import type * as React from 'react'
 
 interface AgentIconPropsExternalApi {
-	className?: string;
+  className?: string
 }
 
 export function AgentIcon({ className }: AgentIconPropsExternalApi): React.JSX.Element {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="1em"
-			height="1em"
-			viewBox="0 0 28 28"
-			className={className}
-		>
-			<path
-				fill="currentColor"
-				d="M10.06 18.701a1.628 1.628 0 0 0 2.43-.676l.77-2.34a3.82 3.82 0 0 1 2.416-2.418l2.238-.727a1.6 1.6 0 0 0 .786-.595a1.62 1.62 0 0 0-.849-2.489l-2.215-.72a3.82 3.82 0 0 1-2.42-2.414l-.727-2.237a1.62 1.62 0 0 0-.594-.785a1.655 1.655 0 0 0-1.879 0a1.63 1.63 0 0 0-.6.8L8.68 6.365a3.82 3.82 0 0 1-2.359 2.37l-2.24.726a1.626 1.626 0 0 0 .02 3.073l2.216.72a3.86 3.86 0 0 1 1.816 1.286c.266.343.471.728.606 1.14l.728 2.234c.112.318.32.593.595.787m-3.273-6.873l-2.22-.72s-.085-.038-.085-.108a.14.14 0 0 1 .084-.115L6.8 10.16a5.34 5.34 0 0 0 3.32-3.375l.721-2.219s.043-.084.114-.084s.113.084.113.084l.723 2.223a5.32 5.32 0 0 0 3.377 3.372l2.27.735a.13.13 0 0 1 .078.11a.15.15 0 0 1-.083.113l-2.225.722a5.32 5.32 0 0 0-3.374 3.374l-.715 2.2a.11.11 0 0 1-.115.093c-.104 0-.118-.075-.118-.075l-.723-2.22a5.32 5.32 0 0 0-3.376-3.385m13.017 12.954A1.2 1.2 0 0 0 20.5 25a1.2 1.2 0 0 0 .692-.216a1.2 1.2 0 0 0 .446-.6l.372-1.143a1.61 1.61 0 0 1 1.017-1.02l1.166-.378A1.21 1.21 0 0 0 25 20.505a1.2 1.2 0 0 0-.844-1.146l-1.144-.37a1.61 1.61 0 0 1-1.02-1.018l-.38-1.163a1.2 1.2 0 0 0-2.274.016l-.374 1.146a1.61 1.61 0 0 1-.993 1.017l-1.166.378a1.21 1.21 0 0 0-.807 1.139a1.2 1.2 0 0 0 .823 1.138l1.144.372a1.6 1.6 0 0 1 1.02 1.023l.379 1.163a1.2 1.2 0 0 0 .44.582m-1.371-4.194l-.27-.088l.283-.096a3.12 3.12 0 0 0 1.943-1.974l.088-.27l.089.272a3.11 3.11 0 0 0 1.974 1.975l.293.1l-.271.087a3.12 3.12 0 0 0-1.974 1.977l-.088.27l-.088-.272a3.12 3.12 0 0 0-1.98-1.98"
-			/>
-		</svg>
-	);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 28 28"
+      className={className}
+    >
+      <path
+        fill="currentColor"
+        d="M10.06 18.701a1.628 1.628 0 0 0 2.43-.676l.77-2.34a3.82 3.82 0 0 1 2.416-2.418l2.238-.727a1.6 1.6 0 0 0 .786-.595a1.62 1.62 0 0 0-.849-2.489l-2.215-.72a3.82 3.82 0 0 1-2.42-2.414l-.727-2.237a1.62 1.62 0 0 0-.594-.785a1.655 1.655 0 0 0-1.879 0a1.63 1.63 0 0 0-.6.8L8.68 6.365a3.82 3.82 0 0 1-2.359 2.37l-2.24.726a1.626 1.626 0 0 0 .02 3.073l2.216.72a3.86 3.86 0 0 1 1.816 1.286c.266.343.471.728.606 1.14l.728 2.234c.112.318.32.593.595.787m-3.273-6.873l-2.22-.72s-.085-.038-.085-.108a.14.14 0 0 1 .084-.115L6.8 10.16a5.34 5.34 0 0 0 3.32-3.375l.721-2.219s.043-.084.114-.084s.113.084.113.084l.723 2.223a5.32 5.32 0 0 0 3.377 3.372l2.27.735a.13.13 0 0 1 .078.11a.15.15 0 0 1-.083.113l-2.225.722a5.32 5.32 0 0 0-3.374 3.374l-.715 2.2a.11.11 0 0 1-.115.093c-.104 0-.118-.075-.118-.075l-.723-2.22a5.32 5.32 0 0 0-3.376-3.385m13.017 12.954A1.2 1.2 0 0 0 20.5 25a1.2 1.2 0 0 0 .692-.216a1.2 1.2 0 0 0 .446-.6l.372-1.143a1.61 1.61 0 0 1 1.017-1.02l1.166-.378A1.21 1.21 0 0 0 25 20.505a1.2 1.2 0 0 0-.844-1.146l-1.144-.37a1.61 1.61 0 0 1-1.02-1.018l-.38-1.163a1.2 1.2 0 0 0-2.274.016l-.374 1.146a1.61 1.61 0 0 1-.993 1.017l-1.166.378a1.21 1.21 0 0 0-.807 1.139a1.2 1.2 0 0 0 .823 1.138l1.144.372a1.6 1.6 0 0 1 1.02 1.023l.379 1.163a1.2 1.2 0 0 0 .44.582m-1.371-4.194l-.27-.088l.283-.096a3.12 3.12 0 0 0 1.943-1.974l.088-.27l.089.272a3.11 3.11 0 0 0 1.974 1.975l.293.1l-.271.087a3.12 3.12 0 0 0-1.974 1.977l-.088.27l-.088-.272a3.12 3.12 0 0 0-1.98-1.98"
+      />
+    </svg>
+  )
 }

package/src/components/autocomplete.tsx

@@ -6,184 +6,188 @@ import { cn } from '../foundation/cn'
 import { Input } from './input'
 
 export interface AutocompleteItemExternalApi {
-	readonly value: string
-	readonly label?: string
-	readonly description?: string
+  readonly value: string
+  readonly label?: string
+  readonly description?: string
 }
 
 export interface AutocompletePropsExternalApi {
-	readonly value: string
-	readonly onValueChange: (next: string) => void
-	readonly items: ReadonlyArray<AutocompleteItemExternalApi>
-	readonly placeholder?: string
-	readonly 'aria-label': string
-	readonly loading?: boolean
-	readonly loadingText?: string
-	readonly emptyText?: string
-	readonly disabled?: boolean
-	readonly className?: string
+  readonly value: string
+  readonly onValueChange: (next: string) => void
+  readonly items: ReadonlyArray<AutocompleteItemExternalApi>
+  readonly placeholder?: string
+  readonly 'aria-label': string
+  readonly loading?: boolean
+  readonly loadingText?: string
+  readonly emptyText?: string
+  readonly disabled?: boolean
+  readonly className?: string
 }
 
 // blur close is delayed so suggestion mousedown (which blurs the input) still lands
 const BLUR_CLOSE_DELAY_MS = 120
 
 const matchesQuery = (suggestion: AutocompleteItemExternalApi, needle: string): boolean =>
-	[suggestion.value, suggestion.label, suggestion.description].some(
-		(text) => text !== undefined && Str.toLowerCase(text).includes(needle),
-	)
+  [suggestion.value, suggestion.label, suggestion.description].some(
+    (text) => text !== undefined && Str.toLowerCase(text).includes(needle),
+  )
 
 export function Autocomplete({
-	value: fieldValue,
-	onValueChange,
-	items: suggestions,
-	placeholder,
-	'aria-label': ariaLabel,
-	loading = false,
-	loadingText = 'Loading…',
-	emptyText = 'No matches — the typed value is used as-is.',
-	disabled = false,
-	className,
+  value: fieldValue,
+  onValueChange,
+  items: suggestions,
+  placeholder,
+  'aria-label': ariaLabel,
+  loading = false,
+  loadingText = 'Loading…',
+  emptyText = 'No matches — the typed value is used as-is.',
+  disabled = false,
+  className,
 }: AutocompletePropsExternalApi): React.JSX.Element {
-	const [open, setOpen] = React.useState(false)
-	// filter only what was typed since open (empty right after open ⇒ full list)
-	const [query, setQuery] = React.useState('')
-	const [highlighted, setHighlighted] = React.useState(-1)
-	const listId = React.useId()
+  const [open, setOpen] = React.useState(false)
+  // filter only what was typed since open (empty right after open ⇒ full list)
+  const [query, setQuery] = React.useState('')
+  const [highlighted, setHighlighted] = React.useState(-1)
+  const listId = React.useId()
 
-	const needle = Str.toLowerCase(query)
-	const filtered =
-		query === '' ? suggestions : suggestions.filter((suggestion) => matchesQuery(suggestion, needle))
-	const activeIndex = highlighted >= 0 && highlighted < filtered.length ? highlighted : -1
-	const optionId = (index: number): string => `${listId}-option-${index}`
+  const needle = Str.toLowerCase(query)
+  const filtered =
+    query === ''
+      ? suggestions
+      : suggestions.filter((suggestion) => matchesQuery(suggestion, needle))
+  const activeIndex = highlighted >= 0 && highlighted < filtered.length ? highlighted : -1
+  const optionId = (index: number): string => `${listId}-option-${index}`
 
-	React.useEffect(() => {
-		if (activeIndex >= 0) {
-			document.getElementById(optionId(activeIndex))?.scrollIntoView({ block: 'nearest' })
-		}
-		// oxlint-disable-next-line react-hooks/exhaustive-deps -- optionId is stable per listId
-	}, [activeIndex])
+  React.useEffect(() => {
+    if (activeIndex >= 0) {
+      document.getElementById(optionId(activeIndex))?.scrollIntoView({ block: 'nearest' })
+    }
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- optionId is stable per listId
+  }, [activeIndex])
 
-	const openList = (): void => {
-		setQuery('')
-		setHighlighted(-1)
-		setOpen(true)
-	}
-	const pick = (suggestion: AutocompleteItemExternalApi): void => {
-		onValueChange(suggestion.value)
-		setOpen(false)
-	}
+  const openList = (): void => {
+    setQuery('')
+    setHighlighted(-1)
+    setOpen(true)
+  }
+  const pick = (suggestion: AutocompleteItemExternalApi): void => {
+    onValueChange(suggestion.value)
+    setOpen(false)
+  }
 
-	const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
-		if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-			event.preventDefault()
-			if (!open) {
-				openList()
-				return
-			}
-			if (filtered.length > 0) {
-				setHighlighted(
-					event.key === 'ArrowDown'
-						? (activeIndex + 1) % filtered.length
-						: (activeIndex <= 0 ? filtered.length : activeIndex) - 1,
-				)
-			}
-			return
-		}
-		if (event.key === 'Enter') {
-			if (open && activeIndex >= 0) {
-				event.preventDefault()
-				pick(filtered[activeIndex]!)
-			} else {
-				setOpen(false)
-			}
-			return
-		}
-		if (event.key === 'Escape' || event.key === 'Tab') {
-			setOpen(false)
-		}
-	}
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault()
+      if (!open) {
+        openList()
+        return
+      }
+      if (filtered.length > 0) {
+        setHighlighted(
+          event.key === 'ArrowDown'
+            ? (activeIndex + 1) % filtered.length
+            : (activeIndex <= 0 ? filtered.length : activeIndex) - 1,
+        )
+      }
+      return
+    }
+    if (event.key === 'Enter') {
+      if (open && activeIndex >= 0) {
+        event.preventDefault()
+        pick(filtered[activeIndex]!)
+      } else {
+        setOpen(false)
+      }
+      return
+    }
+    if (event.key === 'Escape' || event.key === 'Tab') {
+      setOpen(false)
+    }
+  }
 
-	const showEmpty = !loading && query !== '' && filtered.length === 0
-	const showList = open && (loading || filtered.length > 0 || showEmpty)
+  const showEmpty = !loading && query !== '' && filtered.length === 0
+  const showList = open && (loading || filtered.length > 0 || showEmpty)
 
-	return (
-		<div className={cn('relative', className)}>
-			<Input
-				value={fieldValue}
-				onChange={(event) => {
-					onValueChange(event.target.value)
-					setQuery(event.target.value)
-					setHighlighted(-1)
-					setOpen(true)
-				}}
-				onFocus={openList}
-				// oxlint-disable-next-line reform-rules/no-set-timeout-interval -- DOM blur defer; Effect.sleep can't gate a React event handler
-				onBlur={() => globalThis.setTimeout(() => setOpen(false), BLUR_CLOSE_DELAY_MS)}
-				onKeyDown={onKeyDown}
-				placeholder={placeholder}
-				disabled={disabled}
-				role="combobox"
-				aria-label={ariaLabel}
-				aria-expanded={showList}
-				aria-controls={listId}
-				aria-activedescendant={activeIndex >= 0 ? optionId(activeIndex) : undefined}
-				aria-autocomplete="list"
-				autoComplete="off"
-				spellCheck={false}
-				className="pr-8"
-			/>
-			<span className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground">
-				{loading ? (
-					<Loader2Icon className="size-4 animate-spin" />
-				) : (
-					<ChevronDownIcon className="size-4" />
-				)}
-			</span>
-			{showList && (
-				<div
-					id={listId}
-					role="listbox"
-					aria-label={`${ariaLabel} suggestions`}
-					className="absolute left-0 right-0 top-full z-50 mt-1 flex max-h-60 flex-col overflow-y-auto rounded-md border bg-card p-1 text-card-foreground shadow-md"
-				>
-					{loading && (
-						<span className="flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground">
-							<Loader2Icon className="size-3 animate-spin" />
-							{loadingText}
-						</span>
-					)}
-					{filtered.map((suggestion, index) => (
-						<button
-							key={suggestion.value}
-							id={optionId(index)}
-							type="button"
-							role="option"
-							aria-selected={suggestion.value === fieldValue}
-							// mousedown fires before blur so the pick lands
-							onMouseDown={(event) => {
-								event.preventDefault()
-								pick(suggestion)
-							}}
-							onMouseMove={() => setHighlighted(index)}
-							className={cn(
-								'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm',
-								index === activeIndex ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/50',
-							)}
-						>
-							<span className="flex min-w-0 flex-1 flex-col">
-								<span className="truncate">{suggestion.label ?? suggestion.value}</span>
-								{suggestion.description ? (
-									<span className="truncate text-xs text-muted-foreground">{suggestion.description}</span>
-								) : null}
-							</span>
-							{suggestion.value === fieldValue ? <CheckIcon className="size-4 shrink-0" /> : null}
-						</button>
-					))}
-					{showEmpty && (
-						<span className="px-2 py-1.5 text-xs text-muted-foreground">{emptyText}</span>
-					)}
-				</div>
-			)}
-		</div>
-	)
+  return (
+    <div className={cn('relative', className)}>
+      <Input
+        value={fieldValue}
+        onChange={(event) => {
+          onValueChange(event.target.value)
+          setQuery(event.target.value)
+          setHighlighted(-1)
+          setOpen(true)
+        }}
+        onFocus={openList}
+        // oxlint-disable-next-line reform-rules/no-set-timeout-interval -- DOM blur defer; Effect.sleep can't gate a React event handler
+        onBlur={() => globalThis.setTimeout(() => setOpen(false), BLUR_CLOSE_DELAY_MS)}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        role="combobox"
+        aria-label={ariaLabel}
+        aria-expanded={showList}
+        aria-controls={listId}
+        aria-activedescendant={activeIndex >= 0 ? optionId(activeIndex) : undefined}
+        aria-autocomplete="list"
+        autoComplete="off"
+        spellCheck={false}
+        className="pr-8"
+      />
+      <span className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground">
+        {loading ? (
+          <Loader2Icon className="size-4 animate-spin" />
+        ) : (
+          <ChevronDownIcon className="size-4" />
+        )}
+      </span>
+      {showList && (
+        <div
+          id={listId}
+          role="listbox"
+          aria-label={`${ariaLabel} suggestions`}
+          className="absolute left-0 right-0 top-full z-50 mt-1 flex max-h-60 flex-col overflow-y-auto rounded-md border bg-card p-1 text-card-foreground shadow-md"
+        >
+          {loading && (
+            <span className="flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground">
+              <Loader2Icon className="size-3 animate-spin" />
+              {loadingText}
+            </span>
+          )}
+          {filtered.map((suggestion, index) => (
+            <button
+              key={suggestion.value}
+              id={optionId(index)}
+              type="button"
+              role="option"
+              aria-selected={suggestion.value === fieldValue}
+              // mousedown fires before blur so the pick lands
+              onMouseDown={(event) => {
+                event.preventDefault()
+                pick(suggestion)
+              }}
+              onMouseMove={() => setHighlighted(index)}
+              className={cn(
+                'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm',
+                index === activeIndex ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/50',
+              )}
+            >
+              <span className="flex min-w-0 flex-1 flex-col">
+                <span className="truncate">{suggestion.label ?? suggestion.value}</span>
+                {suggestion.description && (
+                  <span className="truncate text-xs text-muted-foreground">
+                    {suggestion.description}
+                  </span>
+                )}
+              </span>
+              {suggestion.value === fieldValue ? <CheckIcon className="size-4 shrink-0" /> : null}
+            </button>
+          ))}
+          {showEmpty && (
+            <span className="px-2 py-1.5 text-xs text-muted-foreground">{emptyText}</span>
+          )}
+        </div>
+      )}
+    </div>
+  )
 }

package/src/components/badge.tsx

@@ -1,57 +1,58 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import type { ClassProp } from "class-variance-authority/types";
-import { Slot } from "radix-ui";
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import type { ClassProp } from 'class-variance-authority/types'
+import { Slot } from 'radix-ui'
 
-import { cn } from "../foundation/cn";
+import { cn } from '../foundation/cn'
 
 type BadgeVariantsExternalApi = (
-	props?:
-		| ({
-				variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | undefined;
-		  } & ClassProp)
-		| undefined,
-) => string;
+  props?:
+    | ({
+        variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | undefined
+      } & ClassProp)
+    | undefined,
+) => string
 
 const badgeVariants: BadgeVariantsExternalApi = 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",
-	{
-		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",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
+  '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',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
 
-type BadgePropsExternalApi = React.ComponentProps<"span"> &
-	VariantProps<typeof badgeVariants> & { asChild?: boolean };
+type BadgePropsExternalApi = React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }
 
 function Badge({
-	className,
-	variant = "default",
-	asChild = false,
-	...props
+  className,
+  variant = 'default',
+  asChild = false,
+  ...props
 }: BadgePropsExternalApi): React.JSX.Element {
-	const Comp = asChild ? Slot.Root : "span";
+  const Comp = asChild ? Slot.Root : 'span'
 
-	return (
-		<Comp
-			data-slot="badge"
-			data-variant={variant}
-			className={cn(badgeVariants({ variant }), className)}
-			{...props}
-		/>
-	);
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
 }
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants }