@modern-admin/ui 0.1.0

package/dist/styles.css

@@ -0,0 +1,242 @@
+/* Tailwind 4 CSS-first config. No tailwind.config.js — tokens live in @theme. */
+@import "tailwindcss";
+/* shadcn-style enter/exit/slide/zoom utilities (animate-in, fade-in-0,
+   slide-in-from-top-2, etc.) used by Radix primitives via data-state. */
+@import "tw-animate-css";
+/* `prose` long-form typography utilities for rendered HTML/Markdown
+   bodies (e.g. richtext fields). */
+@plugin "@tailwindcss/typography";
+
+/* Tailwind 4 only scans files inside the project that imports this CSS by
+   default. Our React components and shadcn primitives live in sibling
+   workspace packages, so we point the scanner at them explicitly. */
+@source "../../react/src/**/*.{ts,tsx}";
+@source "../src/**/*.{ts,tsx}";
+
+@theme {
+  --animate-accordion-down: accordion-down 0.18s ease-out;
+  --animate-accordion-up: accordion-up 0.18s ease-out;
+
+  --color-brand-50: #f5f7ff;
+  --color-brand-100: #e6ebff;
+  --color-brand-500: #4f5af3;
+  --color-brand-600: #3b46d8;
+  --color-brand-700: #2c36b3;
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+
+  /* Semantic colors — bound to the `:root`/`.dark` HSL variables below.
+     Exposing them via @theme makes `bg-background`, `text-foreground`,
+     `border-border`, `bg-primary` work as utilities. */
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover, var(--card)));
+  --color-popover-foreground: hsl(var(--popover-foreground, var(--card-foreground)));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-accent: hsl(var(--accent, var(--secondary)));
+  --color-accent-foreground: hsl(var(--accent-foreground, var(--secondary-foreground)));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* shadcn-flavoured semantic tokens. Light theme is the default; the
+   `.dark` class flips them. Apps can override any variable for custom
+   themes — see packages/ui/themes for ready-made sets. */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222 47% 11%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 16% 47%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 47% 11%;
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 215 20% 65%;
+  --primary: 222 47% 11%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222 47% 11%;
+  --accent: 210 40% 96%;
+  --accent-foreground: 222 47% 11%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 210 40% 98%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  /* Near-black neutrals. Very low saturation on a slight zinc hue so the
+     palette reads as black/charcoal instead of navy. */
+  --background: 240 5% 5%;
+  --foreground: 0 0% 98%;
+  --muted: 240 4% 14%;
+  --muted-foreground: 240 5% 65%;
+  --card: 240 5% 7%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 5% 7%;
+  --popover-foreground: 0 0% 98%;
+  --border: 240 4% 18%;
+  --input: 240 4% 12%;
+  --ring: 240 5% 42%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 6% 10%;
+  --secondary: 240 4% 14%;
+  --secondary-foreground: 0 0% 98%;
+  --accent: 240 4% 14%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62% 40%;
+  --destructive-foreground: 0 0% 98%;
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to   { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to   { height: 0; }
+}
+
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-sans);
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+}
+
+/* ── Custom scrollbars ─────────────────────────────────────────────────────
+   Themed via the same semantic tokens as the rest of the UI so they adapt
+   to light/dark/custom themes automatically. Firefox uses `scrollbar-*`
+   props; WebKit/Blink uses `::-webkit-scrollbar*`.
+
+   Scoped to actually-scrollable containers (root, body, common overflow
+   utility classes, opt-in `[data-scroll]`, textarea/pre). The previous
+   `*` selector forced WebKit to allocate scrollbar slots on every element,
+   which produced tiny "dot" artifacts at the corners of small controls
+   (buttons, selects) during hover/transition repaints. Firefox is happy
+   with declaring `scrollbar-width` only on `html` — it propagates the
+   styling to descendants automatically. */
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+) {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) transparent;
+}
+
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+)::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+)::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+)::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--border));
+  border: 2px solid transparent;
+  border-radius: 9999px;
+  background-clip: padding-box;
+  transition: background-color 150ms ease;
+}
+
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+)::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--muted-foreground) / 0.6);
+  background-clip: padding-box;
+}
+
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+)::-webkit-scrollbar-thumb:active {
+  background-color: hsl(var(--muted-foreground) / 0.85);
+  background-clip: padding-box;
+}
+
+:where(
+  html,
+  body,
+  [data-scroll],
+  .overflow-auto,
+  .overflow-y-auto,
+  .overflow-x-auto,
+  .overflow-scroll,
+  pre,
+  textarea
+)::-webkit-scrollbar-corner {
+  background: transparent;
+}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@modern-admin/ui",
+  "version": "0.1.0",
+  "description": "i18n-unaware shadcn/ui-style React component library used by @modern-admin/react.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/modern-admin/modern-admin.git",
+    "directory": "packages/ui"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "./styles.css": "./dist/styles.css"
+    }
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tiptap/pm": "^3.22.5",
+    "@tiptap/react": "^3.22.5",
+    "@tiptap/starter-kit": "^3.22.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "dompurify": "^3.4.2",
+    "lucide-react": "^1.14.0",
+    "marked": "^18.0.3",
+    "react-day-picker": "^9.14.0",
+    "react-hook-form": "^7.75.0",
+    "recharts": "^3.8.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tiptap-markdown": "^0.9.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@modern-admin/tsconfig": "0.1.0",
+    "@types/bun": "^1.3.13",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  }
+}

package/src/components/accordion.tsx

@@ -0,0 +1,48 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+import * as React from 'react'
+import { cn } from '../lib/utils.js'
+
+export const Accordion = AccordionPrimitive.Root
+
+export const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn('border-b border-border', className)} {...props} />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+export const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 cursor-pointer items-center justify-between py-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground transition-all hover:text-foreground [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="size-3.5 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+export const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pt-0.5 pb-1', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName

package/src/components/alert-dialog.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import { buttonVariants } from './button.js'
+import { cn } from '../lib/utils.js'
+
+export const AlertDialog = AlertDialogPrimitive.Root
+export const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+export const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+export const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+export const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+export const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.ReactElement => (
+  <div
+    className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = 'AlertDialogHeader'
+
+export const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.ReactElement => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2', className)}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = 'AlertDialogFooter'
+
+export const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+export const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
+
+export const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
+    variant?: 'default' | 'destructive'
+  }
+>(({ className, variant = 'default', ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants({ variant }), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+export const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

package/src/components/audit-timeline.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react'
+import { cn } from '../lib/utils.js'
+
+export interface AuditTimelineItem {
+  /** Stable id for React reconciliation; falls back to `at + index`. */
+  id?: string
+  resourceId: string
+  action: string
+  recordId?: string
+  recordIds?: string[]
+  userId?: string
+  at: number
+}
+
+export interface AuditTimelineLabels {
+  unknownUser?: string
+  noEvents?: string
+  records?: string
+}
+
+export interface AuditTimelineProps {
+  items: ReadonlyArray<AuditTimelineItem>
+  labels?: AuditTimelineLabels
+  className?: string
+  formatDate?: (value: number) => string
+}
+
+const DEFAULT_LABELS: Required<AuditTimelineLabels> = {
+  unknownUser: 'Unknown user',
+  noEvents: 'No events',
+  records: 'records',
+}
+
+export function AuditTimeline({
+  items,
+  labels,
+  className,
+  formatDate = (v) => new Date(v).toISOString(),
+}: AuditTimelineProps): React.ReactElement {
+  const l = { ...DEFAULT_LABELS, ...labels }
+  if (items.length === 0) {
+    return (
+      <div className={cn('rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground', className)}>
+        {l.noEvents}
+      </div>
+    )
+  }
+  return (
+    <ol className={cn('relative space-y-3', className)}>
+      {items.map((item, index) => (
+        <li key={item.id ?? `${item.at}:${index}`} className="relative rounded-lg border bg-card p-4 shadow-sm">
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="flex min-w-0 items-start gap-3">
+              <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
+                {initials(item.userId ?? l.unknownUser)}
+              </span>
+              <div className="min-w-0 space-y-1">
+                <p className="truncate text-sm font-medium">
+                  {item.userId ?? l.unknownUser}
+                </p>
+                <p className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+                  <ActionChip action={item.action} />
+                  <span className="rounded-full border bg-muted px-2 py-0.5 text-xs">
+                    {item.resourceId}
+                  </span>
+                  {item.recordId && (
+                    <code className="rounded bg-muted px-1.5 py-0.5 text-xs">
+                      #{item.recordId}
+                    </code>
+                  )}
+                  {!item.recordId && item.recordIds?.length ? (
+                    <span className="text-xs">
+                      {item.recordIds.length} {l.records}
+                    </span>
+                  ) : null}
+                </p>
+              </div>
+            </div>
+            <time className="shrink-0 text-xs text-muted-foreground">
+              {formatDate(item.at)}
+            </time>
+          </div>
+        </li>
+      ))}
+    </ol>
+  )
+}
+
+function ActionChip({ action }: { action: string }): React.ReactElement {
+  return (
+    <span className="rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+      {action}
+    </span>
+  )
+}
+
+function initials(value: string): string {
+  const parts = value.split(/\s+|[._@-]/).filter(Boolean)
+  if (parts.length === 0) return '?'
+  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase()
+  return (parts[0]![0]! + parts[1]![0]!).toUpperCase()
+}

package/src/components/avatar.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import { cn } from '../lib/utils.js'
+
+export const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+export const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+export const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

package/src/components/badge.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils.js'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+        success: 'border-transparent bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant, ...props }, ref) => (
+    <span ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />
+  ),
+)
+Badge.displayName = 'Badge'
+
+export { badgeVariants }