kcg-code 0.0.0-stage → 0.2.0

package/src/components/skills/SkillsProjectPicker.tsx

@@ -0,0 +1,178 @@
+/**
+ * Pemilih Project di halaman Skills — pil ringkas "Install to <project>"
+ * yang membuka popover berisi daftar Project dengan kotak cari.
+ *
+ * Kotak cari hanya muncul bila Project cukup banyak. Navigasi keyboard:
+ * ↑/↓ memindah sorotan, Enter memilih, Esc menutup (bawaan Popover).
+ */
+import { CheckIcon, ChevronsUpDownIcon, FolderIcon, SearchIcon } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import type { Project } from "@/types";
+
+/** Kotak cari tampil mulai jumlah Project ini. */
+const SEARCH_THRESHOLD = 6;
+
+export interface SkillsProjectPickerProps {
+  projects: Project[];
+  selected: Project | null;
+  onSelect: (projectId: string) => void;
+}
+
+export function SkillsProjectPicker({ projects, selected, onSelect }: SkillsProjectPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [highlight, setHighlight] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const showSearch = projects.length >= SEARCH_THRESHOLD;
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (q === "") return projects;
+    return projects.filter(
+      (p) => p.name.toLowerCase().includes(q) || p.path.toLowerCase().includes(q),
+    );
+  }, [projects, query]);
+
+  // Buka: reset pencarian, sorot Project terpilih.
+  useEffect(() => {
+    if (!open) return;
+    setQuery("");
+    const idx = projects.findIndex((p) => p.id === selected?.id);
+    setHighlight(idx >= 0 ? idx : 0);
+  }, [open, projects, selected?.id]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: reset saat query berubah
+  useEffect(() => {
+    setHighlight(0);
+  }, [query]);
+
+  useEffect(() => {
+    listRef.current
+      ?.querySelector<HTMLElement>(`[data-index="${highlight}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [highlight]);
+
+  const pick = (p: Project | undefined) => {
+    if (!p) return;
+    onSelect(p.id);
+    setOpen(false);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlight((h) => Math.min(h + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlight((h) => Math.max(h - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      pick(filtered[highlight]);
+    }
+  };
+
+  const activeId = filtered[highlight] ? `skills-project-${highlight}` : undefined;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        {/* Pemilih konteks yang ringkas (pil), terpisah dari kolom cari:
+            menjawab "skill dipasang ke mana", bukan bagian dari pencarian. */}
+        <button
+          type="button"
+          aria-haspopup="listbox"
+          aria-label={
+            selected ? `Install to project ${selected.name}. Change project` : "Select a project"
+          }
+          className="group inline-flex h-9 max-w-full min-w-0 items-center gap-2 rounded-full border bg-card pr-2.5 pl-3 text-sm shadow-xs transition-colors outline-none hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[state=open]:border-ring"
+        >
+          <FolderIcon
+            className={cn("size-4 shrink-0", selected ? "text-primary" : "text-muted-foreground")}
+            aria-hidden
+          />
+          <span className="shrink-0 text-muted-foreground">Install to</span>
+          <span className={cn("truncate font-medium", !selected && "text-muted-foreground")}>
+            {selected?.name ?? "Select a project"}
+          </span>
+          <ChevronsUpDownIcon className="size-3.5 shrink-0 text-muted-foreground" aria-hidden />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        className="w-80 max-w-[calc(100vw-2rem)] p-0"
+        onOpenAutoFocus={(e) => {
+          // Fokus ke kotak cari (bila ada), selain itu ke daftar agar ↑/↓ jalan.
+          e.preventDefault();
+          (searchRef.current ?? listRef.current)?.focus();
+        }}
+      >
+        {showSearch && (
+          <div className="flex items-center gap-2 border-b px-3">
+            <SearchIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+            <input
+              ref={searchRef}
+              type="text"
+              role="combobox"
+              aria-expanded
+              aria-controls="skills-project-list"
+              aria-activedescendant={activeId}
+              aria-label="Search projects"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={onKeyDown}
+              placeholder="Search projects…"
+              className="h-10 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            />
+          </div>
+        )}
+        <div
+          ref={listRef}
+          id="skills-project-list"
+          role="listbox"
+          aria-label="Projects"
+          aria-activedescendant={showSearch ? undefined : activeId}
+          tabIndex={showSearch ? -1 : 0}
+          onKeyDown={showSearch ? undefined : onKeyDown}
+          className="max-h-72 overflow-y-auto p-1 outline-none"
+        >
+          {filtered.length === 0 ? (
+            <p className="px-3 py-6 text-center text-sm text-muted-foreground">
+              No projects match “{query.trim()}”.
+            </p>
+          ) : (
+            filtered.map((p, i) => {
+              const isSelected = p.id === selected?.id;
+              return (
+                <div
+                  key={p.id}
+                  id={`skills-project-${i}`}
+                  data-index={i}
+                  role="option"
+                  aria-selected={isSelected}
+                  tabIndex={-1}
+                  onMouseMove={() => setHighlight(i)}
+                  onClick={() => pick(p)}
+                  onKeyDown={() => {}}
+                  className={cn(
+                    "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-sm",
+                    i === highlight && "bg-accent text-accent-foreground",
+                  )}
+                >
+                  <FolderIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+                  <span className="flex min-w-0 flex-1 flex-col">
+                    <span className="truncate font-medium">{p.name}</span>
+                    <span className="truncate text-xs text-muted-foreground">{p.path}</span>
+                  </span>
+                  {isSelected && <CheckIcon className="size-4 shrink-0" aria-hidden />}
+                </div>
+              );
+            })
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/ui/adw-dialog.tsx

@@ -0,0 +1,114 @@
+/**
+ * Kerangka dialog ala AdwDialog (libadwaita) di atas `DialogContent`:
+ * - Header bar: slot kiri (`start`), judul + subjudul di tengah
+ *   (AdwWindowTitle), slot kanan (`end`). Tanpa `end` -> tombol tutup bundar.
+ * - Tinggi dipatok (isi panjang men-scroll di dalam), sudut 2xl.
+ * - Layar sempit (< sm): tampil sebagai bottom sheet dengan pegangan, seperti
+ *   AdwDialog di jendela sempit; padding bawah menghormati safe-area iOS.
+ * - Fokus awal: desktop -> kolom cari pertama (bila ada); HP -> dialog itu
+ *   sendiri agar keyboard virtual tidak langsung muncul.
+ * - Esc saat kolom cari berisi: kosongkan cari dulu (lihat `SearchEntry`),
+ *   tidak menutup dialog.
+ */
+import { XIcon } from "lucide-react";
+import { type ReactNode, useRef } from "react";
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+export interface AdwDialogContentProps {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  /** Aksi di kiri header bar (mis. "Cancel"). */
+  start?: ReactNode;
+  /** Aksi di kanan header bar (mis. tombol utama). Kosong -> tombol tutup. */
+  end?: ReactNode;
+  /** Kunci tombol tutup bawaan (mis. saat menyimpan). */
+  closeDisabled?: boolean;
+  /** Kelas area isi di bawah header bar. */
+  bodyClassName?: string;
+  children: ReactNode;
+}
+
+export function AdwDialogContent({
+  title,
+  subtitle,
+  start,
+  end,
+  closeDisabled = false,
+  bodyClassName,
+  children,
+}: AdwDialogContentProps) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const hasSides = start !== undefined || end !== undefined;
+
+  return (
+    <DialogContent
+      ref={contentRef}
+      showCloseButton={false}
+      onOpenAutoFocus={(e) => {
+        e.preventDefault();
+        const wide = window.matchMedia("(min-width: 640px)").matches;
+        const search = contentRef.current?.querySelector<HTMLInputElement>('input[type="search"]');
+        (wide && search ? search : contentRef.current)?.focus();
+      }}
+      onEscapeKeyDown={(e) => {
+        const el = document.activeElement;
+        if (el instanceof HTMLInputElement && el.type === "search" && el.value !== "") {
+          e.preventDefault();
+        }
+      }}
+      className={cn(
+        "flex h-[min(640px,85dvh)] flex-col gap-0 overflow-hidden rounded-2xl p-0 sm:max-w-md",
+        "max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:h-[85dvh] max-sm:max-w-none max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none max-sm:border-x-0 max-sm:border-b-0",
+        "max-sm:data-[state=closed]:slide-out-to-bottom-8 max-sm:data-[state=open]:slide-in-from-bottom-8",
+      )}
+    >
+      {/* Pegangan sheet (dekoratif) — hanya di HP. */}
+      <span
+        aria-hidden
+        className="mx-auto mt-2 h-1 w-9 shrink-0 rounded-full bg-muted-foreground/30 sm:hidden"
+      />
+      <DialogHeader
+        className={cn(
+          "grid shrink-0 items-center gap-2 px-3 pt-2.5 pb-2 sm:pt-3",
+          // Kolom kiri/kanan selebar slot terlebar agar judul tetap di tengah.
+          hasSides ? "grid-cols-[1fr_auto_1fr]" : "grid-cols-[2rem_1fr_2rem]",
+        )}
+      >
+        <div className="flex min-w-0 justify-start">{start}</div>
+        <div className="flex min-w-0 flex-col items-center gap-0.5 text-center">
+          <DialogTitle className="truncate text-[15px] leading-5 font-bold">{title}</DialogTitle>
+          {subtitle && (
+            <DialogDescription className="truncate text-xs leading-4">{subtitle}</DialogDescription>
+          )}
+        </div>
+        <div className="flex min-w-0 justify-end">
+          {end ?? (
+            <DialogClose
+              disabled={closeDisabled}
+              aria-label="Close"
+              className="flex size-7 items-center justify-center rounded-full bg-black/[0.06] text-foreground/80 transition-colors outline-none hover:bg-black/10 focus-visible:ring-2 focus-visible:ring-ring/60 disabled:opacity-50 dark:bg-white/[0.08] dark:hover:bg-white/15"
+            >
+              <XIcon className="size-3.5" strokeWidth={2.5} />
+            </DialogClose>
+          )}
+        </div>
+      </DialogHeader>
+
+      <div
+        className={cn(
+          "flex min-h-0 flex-1 flex-col gap-3 px-4 pt-1 pb-[max(1rem,env(safe-area-inset-bottom))]",
+          bodyClassName,
+        )}
+      >
+        {children}
+      </div>
+    </DialogContent>
+  );
+}

package/src/components/ui/adw-toggle-group.tsx

@@ -0,0 +1,75 @@
+/**
+ * Toggle group ala AdwToggleGroup (libadwaita 1.7): palung terisi berisi
+ * beberapa pilihan sejajar; pilihan aktif "terangkat" (latar terang +
+ * bayangan di mode terang, lebih terang dari palung di mode gelap).
+ *
+ * Satu pilihan selalu aktif (bukan multi-select). Tombol memakai
+ * `aria-pressed` di dalam `role="group"` berlabel.
+ */
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export interface AdwToggleOption<T extends string> {
+  value: T;
+  label: ReactNode;
+  /** Ikon / logo di kiri label. */
+  icon?: ReactNode;
+  /** Label aksesibel bila `label` bukan teks biasa. */
+  ariaLabel?: string;
+  title?: string;
+}
+
+export interface AdwToggleGroupProps<T extends string> {
+  /** Label grup untuk pembaca layar. */
+  label: string;
+  value: T;
+  options: readonly AdwToggleOption<T>[];
+  onChange: (value: T) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function AdwToggleGroup<T extends string>({
+  label,
+  value,
+  options,
+  onChange,
+  disabled = false,
+  className,
+}: AdwToggleGroupProps<T>) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: grup tombol segmented, bukan fieldset form.
+    <div
+      role="group"
+      aria-label={label}
+      className={cn(
+        "grid shrink-0 auto-cols-fr grid-flow-col gap-0.5 rounded-[10px] bg-black/[0.06] p-[3px] dark:bg-white/[0.07]",
+        className,
+      )}
+    >
+      {options.map((o) => {
+        const active = o.value === value;
+        return (
+          <button
+            key={o.value}
+            type="button"
+            aria-pressed={active}
+            aria-label={o.ariaLabel}
+            title={o.title}
+            disabled={disabled}
+            onClick={() => onChange(o.value)}
+            className={cn(
+              "flex h-8 min-w-0 items-center justify-center gap-2 rounded-[7px] px-2 text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:opacity-60",
+              active
+                ? "bg-white text-foreground shadow-sm dark:bg-white/[0.15] dark:shadow-none"
+                : "text-foreground/70 hover:bg-black/[0.04] hover:text-foreground dark:hover:bg-white/[0.05]",
+            )}
+          >
+            {o.icon}
+            <span className="truncate">{o.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm";
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "min-w-0 wrap-anywhere text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("min-w-0 wrap-anywhere text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertDescription, AlertTitle };

package/src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+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",
+  {
+    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",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };