Xây dựng Design System & UI Primitives với Tailwind CSS v4, CVA và Base UI

@import "tailwindcss";

@theme inline {
  --color-brand-primary: #10b981;
  --color-brand-accent: #06b6d4;
  --color-surface-card: #18181b;
  --radius-custom: 0.75rem;
  --font-display: "Outfit", sans-serif;
}

/* Các biến theme tối/sáng */
:root {
  --background: #09090b;
  --foreground: #f4f4f5;
}

import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
import React from "react";

const badgeVariants = cva(
  "inline-flex items-center gap-1.5 font-mono text-xs font-semibold px-2.5 py-1 rounded-full border transition-colors",
  {
    variants: {
      variant: {
        default: "bg-zinc-900 border-zinc-800 text-zinc-300",
        success: "bg-emerald-500/10 border-emerald-500/20 text-emerald-400",
        warning: "bg-amber-500/10 border-amber-500/20 text-amber-400",
        danger: "bg-red-500/10 border-red-500/20 text-red-400",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}

export function Badge({ className, variant, ...props }: BadgeProps) {
  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
}

"use client";

import { Dialog } from "@base-ui/react";
import { X } from "@phosphor-icons/react";

export function CustomModal({ isOpen, onClose, title, children }: any) {
  return (
    <Dialog.Root open={isOpen} onOpenChange={onClose}>
      <Dialog.Portal>
        <Dialog.Backdrop className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 animate-fade-in" />
        <Dialog.Popup className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg bg-zinc-900 border border-zinc-800 rounded-2xl p-6 shadow-2xl z-50">
          <div className="flex items-center justify-between mb-4">
            <Dialog.Title className="text-lg font-bold text-zinc-100">{title}</Dialog.Title>
            <Dialog.Close className="text-zinc-500 hover:text-zinc-200">
              <X size={20} />
            </Dialog.Close>
          </div>
          <Dialog.Description className="text-zinc-400 text-sm">{children}</Dialog.Description>
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>
  );
}