@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/nextjs/shared/src/components/alert-modal.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Modal } from "@/components/ui/modal";
+
+/** One confirm dialog reused for every destructive/irreversible action — the caller decides what "confirm" does. */
+export function AlertModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  loading,
+  description = "This action cannot be undone.",
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  loading: boolean;
+  description?: string;
+}) {
+  return (
+    <Modal title="Are you sure?" description={description} isOpen={isOpen} onClose={onClose}>
+      <div className="flex w-full items-center justify-end gap-2 pt-6">
+        <Button disabled={loading} variant="outline" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button disabled={loading} variant="destructive" onClick={onConfirm}>
+          Continue
+        </Button>
+      </div>
+    </Modal>
+  );
+}

package/registry/admin-apps/nextjs/shared/src/components/breadcrumb.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+import {
+  Breadcrumb as BreadcrumbRoot,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+export type BreadcrumbTrailItem = { title: string; href: string };
+
+/**
+ * Fixed "Dashboard" root plus a per-page trail, last item non-clickable — used at the top of every
+ * console page, mirroring the reference's `BreadCrumb` component but built on this app's shadcn
+ * breadcrumb primitives instead of plain divs.
+ */
+export function Breadcrumb({ items = [] }: { items?: BreadcrumbTrailItem[] }) {
+  return (
+    <BreadcrumbRoot className="mb-4">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          {items.length === 0 ? (
+            <BreadcrumbPage>Dashboard</BreadcrumbPage>
+          ) : (
+            <BreadcrumbLink asChild>
+              <Link href="/dashboard">Dashboard</Link>
+            </BreadcrumbLink>
+          )}
+        </BreadcrumbItem>
+        {items.map((item, index) => (
+          <span key={item.href} className="contents">
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              {index === items.length - 1 ? (
+                <BreadcrumbPage>{item.title}</BreadcrumbPage>
+              ) : (
+                <BreadcrumbLink asChild>
+                  <Link href={item.href}>{item.title}</Link>
+                </BreadcrumbLink>
+              )}
+            </BreadcrumbItem>
+          </span>
+        ))}
+      </BreadcrumbList>
+    </BreadcrumbRoot>
+  );
+}

package/registry/admin-apps/nextjs/shared/src/components/form-error-alert.tsx

@@ -0,0 +1,24 @@
+import { AlertCircleIcon } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+
+/** The destructive block every form shows above itself on submit error — one bullet per message. */
+export function FormErrorAlert({ messages }: { messages: string[] | null }) {
+  if (!messages || messages.length === 0) return null;
+  return (
+    <Alert variant="destructive">
+      <AlertCircleIcon className="size-4" />
+      <AlertTitle>{messages.length === 1 ? "Something went wrong" : "Please fix the following"}</AlertTitle>
+      <AlertDescription>
+        {messages.length === 1 ? (
+          messages[0]
+        ) : (
+          <ul className="list-disc pl-4">
+            {messages.map((message) => (
+              <li key={message}>{message}</li>
+            ))}
+          </ul>
+        )}
+      </AlertDescription>
+    </Alert>
+  );
+}

package/registry/admin-apps/nextjs/shared/src/components/loader/skeleton.tsx

@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils";
+
+interface SkeletonProps {
+  className?: string;
+}
+
+/** Base skeleton block — every other shape here is this, sized/shaped differently. */
+export function Skeleton({ className }: SkeletonProps) {
+  return <div className={cn("animate-pulse rounded bg-muted", className)} />;
+}
+
+export function SkeletonAvatar({ size = "md", className }: { size?: "sm" | "md" | "lg" | "xl"; className?: string }) {
+  const sizeClasses = { sm: "h-8 w-8", md: "h-10 w-10", lg: "h-16 w-16", xl: "h-24 w-24" };
+  return <Skeleton className={cn("rounded-full", sizeClasses[size], className)} />;
+}
+
+export function SkeletonBadge({ count = 1, className }: { count?: number; className?: string }) {
+  return (
+    <div className={cn("flex gap-2", className)}>
+      {Array.from({ length: count }).map((_, i) => (
+        <Skeleton key={i} className="h-6 w-20" />
+      ))}
+    </div>
+  );
+}
+
+export function SkeletonButton({ variant = "default", className }: { variant?: "default" | "icon"; className?: string }) {
+  return <Skeleton className={cn(variant === "icon" ? "h-8 w-8" : "h-10 w-24", className)} />;
+}
+
+export function SkeletonActions({ count = 3, className }: { count?: number; className?: string }) {
+  return (
+    <div className={cn("flex gap-2", className)}>
+      {Array.from({ length: count }).map((_, i) => (
+        <SkeletonButton key={i} variant="icon" />
+      ))}
+    </div>
+  );
+}

package/registry/admin-apps/nextjs/shared/src/components/loader/table-skeleton-loader.tsx

@@ -0,0 +1,57 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Skeleton, SkeletonActions, SkeletonAvatar, SkeletonBadge, SkeletonButton } from "./skeleton";
+
+export interface TableSkeletonColumn {
+  header: string;
+  width?: string;
+  skeletonType?: "text" | "avatar" | "badge" | "button" | "actions";
+  skeletonWidth?: string;
+  skeletonCount?: number;
+}
+
+function SkeletonCell({ type = "text", width = "w-32", count = 1 }: { type?: TableSkeletonColumn["skeletonType"]; width?: string; count?: number }) {
+  switch (type) {
+    case "avatar":
+      return <SkeletonAvatar />;
+    case "badge":
+      return <SkeletonBadge count={count} />;
+    case "button":
+      return <SkeletonButton />;
+    case "actions":
+      return <SkeletonActions count={count} />;
+    case "text":
+    default:
+      return <Skeleton className={`h-4 ${width}`} />;
+  }
+}
+
+export function TableSkeletonLoader({ columns, rows = 10, className = "" }: { columns: TableSkeletonColumn[]; rows?: number; className?: string }) {
+  return (
+    <div className={`w-full overflow-x-auto ${className}`}>
+      <div className="overflow-hidden rounded-lg border border-border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((column, index) => (
+                <TableHead key={index} className={column.width}>
+                  {column.header}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {Array.from({ length: rows }).map((_, rowIndex) => (
+              <TableRow key={rowIndex}>
+                {columns.map((column, colIndex) => (
+                  <TableCell key={colIndex}>
+                    <SkeletonCell type={column.skeletonType} width={column.skeletonWidth} count={column.skeletonCount} />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

package/registry/admin-apps/nextjs/shared/src/components/permission-group-select.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import type { PermissionSummary } from "@simple-auth-kit/auth-client";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface PermissionGroup {
+  name: string;
+  permissions: PermissionSummary[];
+}
+
+function groupPermissions(permissions: PermissionSummary[]): PermissionGroup[] {
+  const byGroup = new Map<string, PermissionSummary[]>();
+  for (const permission of permissions) {
+    const list = byGroup.get(permission.group) ?? [];
+    list.push(permission);
+    byGroup.set(permission.group, list);
+  }
+  return Array.from(byGroup.entries())
+    .map(([name, perms]) => ({ name, permissions: perms.sort((a, b) => a.order - b.order) }))
+    .sort((a, b) => (a.permissions[0]?.groupOrder ?? 0) - (b.permissions[0]?.groupOrder ?? 0));
+}
+
+// Indeterminate isn't in the base checkbox's own stylesheet (only `data-[state=checked]` is), so
+// the tri-state coloring is layered on here rather than touching the shared primitive for what
+// is otherwise a generic shadcn component used unmodified everywhere else.
+const INDETERMINATE_STYLE = "data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary";
+
+/** A checkbox grid grouped by `permission.group`, with a tri-state select-all and one per group — how the reference app lets you build a role's permission set. */
+export function PermissionGroupSelect({
+  permissions,
+  selected,
+  onChange,
+  disabled,
+}: {
+  permissions: PermissionSummary[];
+  selected: string[];
+  onChange: (next: string[]) => void;
+  disabled?: boolean;
+}) {
+  function toggle(slug: string) {
+    onChange(selected.includes(slug) ? selected.filter((s) => s !== slug) : [...selected, slug]);
+  }
+
+  const groups = groupPermissions(permissions);
+  const allSlugs = permissions.map((p) => p.slug);
+  const selectedCount = allSlugs.filter((slug) => selected.includes(slug)).length;
+  const allSelected = allSlugs.length > 0 && selectedCount === allSlugs.length;
+  const allState: boolean | "indeterminate" = allSelected ? true : selectedCount > 0 ? "indeterminate" : false;
+
+  function toggleAll() {
+    onChange(allSelected ? [] : allSlugs);
+  }
+
+  function toggleGroup(group: PermissionGroup) {
+    const groupSlugs = group.permissions.map((p) => p.slug);
+    const groupAllSelected = groupSlugs.every((slug) => selected.includes(slug));
+    onChange(groupAllSelected ? selected.filter((slug) => !groupSlugs.includes(slug)) : [...new Set([...selected, ...groupSlugs])]);
+  }
+
+  if (groups.length === 0) return <p className="text-sm text-muted-foreground">No permissions defined yet.</p>;
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center justify-between">
+        <label className="flex items-center gap-2 text-sm font-medium">
+          <Checkbox checked={allState} onCheckedChange={toggleAll} disabled={disabled || allSlugs.length === 0} className={INDETERMINATE_STYLE} />
+          Select all
+        </label>
+        <span className="text-xs text-muted-foreground">
+          {selectedCount} of {allSlugs.length} selected
+        </span>
+      </div>
+      {groups.map((group) => {
+        const groupSlugs = group.permissions.map((p) => p.slug);
+        const groupSelectedCount = groupSlugs.filter((slug) => selected.includes(slug)).length;
+        const groupAllSelected = groupSlugs.length > 0 && groupSelectedCount === groupSlugs.length;
+        const groupState: boolean | "indeterminate" = groupAllSelected ? true : groupSelectedCount > 0 ? "indeterminate" : false;
+        return (
+          <Card key={group.name} className="p-4">
+            <label className="mb-2 flex items-center gap-2 text-sm font-semibold capitalize">
+              <Checkbox checked={groupState} onCheckedChange={() => toggleGroup(group)} disabled={disabled} className={INDETERMINATE_STYLE} />
+              {group.name}
+            </label>
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+              {group.permissions.map((permission) => (
+                <label key={permission.id} className="flex items-center gap-2 text-sm">
+                  <Checkbox checked={selected.includes(permission.slug)} onCheckedChange={() => toggle(permission.slug)} disabled={disabled} />
+                  <span className={!permission.isActive ? "text-muted-foreground" : undefined}>
+                    {permission.displayName}
+                    {!permission.isActive && " (inactive)"}
+                  </span>
+                </label>
+              ))}
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}

package/registry/admin-apps/nextjs/shared/src/components/permission-group-view.tsx

@@ -0,0 +1,53 @@
+import type { PermissionSummary } from "@simple-auth-kit/auth-client";
+import { CheckIcon } from "lucide-react";
+import { Card } from "@/components/ui/card";
+
+interface PermissionGroup {
+  name: string;
+  permissions: PermissionSummary[];
+}
+
+function groupPermissions(permissions: PermissionSummary[]): PermissionGroup[] {
+  const byGroup = new Map<string, PermissionSummary[]>();
+  for (const permission of permissions) {
+    const list = byGroup.get(permission.group) ?? [];
+    list.push(permission);
+    byGroup.set(permission.group, list);
+  }
+  return Array.from(byGroup.entries())
+    .map(([name, perms]) => ({ name, permissions: perms.sort((a, b) => a.order - b.order) }))
+    .sort((a, b) => (a.permissions[0]?.groupOrder ?? 0) - (b.permissions[0]?.groupOrder ?? 0));
+}
+
+/**
+ * Read-only grouped display of the permissions a role holds — a detail page, not a form, so
+ * there is nothing to select and no "Select all" affordance; only what's already attached is
+ * shown, grouped the same way `PermissionGroupSelect` groups a role form's checkbox grid.
+ */
+export function PermissionGroupView({ permissions, selected }: { permissions: PermissionSummary[]; selected: string[] }) {
+  const attached = permissions.filter((permission) => selected.includes(permission.slug));
+  const groups = groupPermissions(attached);
+
+  if (groups.length === 0) return <p className="text-sm text-muted-foreground">No permissions attached.</p>;
+
+  return (
+    <div className="flex flex-col gap-3">
+      {groups.map((group) => (
+        <Card key={group.name} className="p-4">
+          <h4 className="mb-2 text-sm font-semibold capitalize">{group.name}</h4>
+          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            {group.permissions.map((permission) => (
+              <div key={permission.id} className="flex items-center gap-2 text-sm">
+                <CheckIcon className="size-4 shrink-0 text-muted-foreground" />
+                <span className={!permission.isActive ? "text-muted-foreground" : undefined}>
+                  {permission.displayName}
+                  {!permission.isActive && " (inactive)"}
+                </span>
+              </div>
+            ))}
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+}

package/registry/admin-apps/nextjs/shared/src/components/role-multi-select.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { ChevronDownIcon, XIcon } from "lucide-react";
+import type { RoleSummary } from "@simple-auth-kit/auth-client";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+
+/** A checkbox-dropdown + removable-badges multi-select, fed from the real role catalog — not a free-text field. */
+export function RoleMultiSelect({
+  roles,
+  selected,
+  onChange,
+  placeholder = "Select roles…",
+  disabled,
+}: {
+  roles: RoleSummary[];
+  selected: string[];
+  onChange: (next: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}) {
+  function toggle(slug: string) {
+    onChange(selected.includes(slug) ? selected.filter((s) => s !== slug) : [...selected, slug]);
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button type="button" variant="outline" disabled={disabled} className="w-full justify-between font-normal">
+            {selected.length === 0 ? placeholder : `${selected.length} role${selected.length === 1 ? "" : "s"} selected`}
+            <ChevronDownIcon className="ml-2 size-3.5 opacity-60" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-64">
+          {roles.length === 0 && <div className="px-2 py-1.5 text-sm text-muted-foreground">No roles defined yet.</div>}
+          {roles.map((role) => (
+            <DropdownMenuCheckboxItem
+              key={role.id}
+              checked={selected.includes(role.slug)}
+              onSelect={(e) => e.preventDefault()}
+              onCheckedChange={() => toggle(role.slug)}
+            >
+              {role.displayName}
+              {!role.isActive && <span className="ml-1.5 text-xs text-muted-foreground">(inactive)</span>}
+            </DropdownMenuCheckboxItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {selected.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {selected.map((slug) => {
+            const role = roles.find((r) => r.slug === slug);
+            return (
+              <Badge key={slug} variant="outline" className="gap-1 pr-1">
+                {role?.displayName ?? slug}
+                {!disabled && (
+                  <button type="button" onClick={() => toggle(slug)} className="rounded-full hover:bg-muted">
+                    <XIcon className="size-3" />
+                  </button>
+                )}
+              </Badge>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/registry/admin-apps/nextjs/shared/src/components/theme-toggle.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/registry/admin-apps/nextjs/shared/src/components/ui/alert.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+        success:
+          "border-emerald-600/40 bg-emerald-600/10 text-emerald-700 *:data-[slot=alert-description]:text-emerald-700/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(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package/registry/admin-apps/nextjs/shared/src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-xs font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

package/registry/admin-apps/nextjs/shared/src/components/ui/badge.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 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/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        success:
+          "border-transparent bg-emerald-600 text-white [a]:hover:bg-emerald-600/80",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 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 }