@godxjp/ui 5.0.2 → 6.0.0

package/src/components/data-display/__tests__/card-table.test.tsx

@@ -0,0 +1,328 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { renderWithUi, screen } from "@/test/render";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardCover,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardStat,
+  CardTitle,
+} from "../card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table";
+
+describe("Card layout governance", () => {
+  it("keeps all slot padding in card-layout.css (not card.tsx)", () => {
+    const cardTs = readFileSync(join(__dirname, "../card.tsx"), "utf8");
+    expect(cardTs).not.toMatch(/ui-card-shell/);
+    expect(cardTs).not.toMatch(/ui-card-section-gap/);
+    expect(cardTs).not.toMatch(/padding-(top|bottom|inline)/);
+
+    const layoutCss = readFileSync(join(__dirname, "../../../styles/card-layout.css"), "utf8");
+    expect(layoutCss).toMatch(/\[data-slot="card-header"\]/);
+    expect(layoutCss).toMatch(/\[data-slot="card-content"\]/);
+    expect(layoutCss).toMatch(/\[data-slot="card-footer"\]/);
+    expect(layoutCss).toMatch(/--card-space-inset/);
+    expect(layoutCss).toMatch(/--card-space-header-y/);
+    expect(layoutCss).toMatch(/--card-space-body-y/);
+  });
+});
+
+describe("Card", () => {
+  it("renders header, content, and footer", () => {
+    renderWithUi(
+      <Card>
+        <CardHeader>
+          <CardTitle>HAWB detail</CardTitle>
+          <CardDescription>Osaka → HCM</CardDescription>
+        </CardHeader>
+        <CardContent>2.4 kg</CardContent>
+        <CardFooter>Footer</CardFooter>
+      </Card>,
+    );
+    expect(screen.getByRole("heading", { name: "HAWB detail" })).toBeInTheDocument();
+    expect(screen.getByText("Osaka → HCM")).toBeInTheDocument();
+    expect(screen.getByText("2.4 kg")).toBeInTheDocument();
+    expect(screen.getByText("Footer")).toBeInTheDocument();
+  });
+
+  it("renders CardAction in header row", () => {
+    renderWithUi(
+      <Card>
+        <CardHeader className="flex flex-row justify-between">
+          <CardTitle>Section</CardTitle>
+          <CardAction>
+            <button type="button">Edit</button>
+          </CardAction>
+        </CardHeader>
+      </Card>,
+    );
+    expect(screen.getByRole("button", { name: "Edit" })).toBeInTheDocument();
+  });
+
+  it("renders separated footer with data-separated flag", () => {
+    renderWithUi(
+      <Card>
+        <CardHeader>
+          <CardTitle>Form</CardTitle>
+        </CardHeader>
+        <CardContent data-testid="content">Body</CardContent>
+        <CardFooter separated data-testid="footer">
+          <button type="button">Save</button>
+        </CardFooter>
+      </Card>,
+    );
+    const footer = screen.getByTestId("footer");
+    expect(footer).toHaveAttribute("data-separated", "");
+    expect(footer).toHaveAttribute("data-slot", "card-footer");
+    expect(screen.getByTestId("content")).toHaveAttribute("data-slot", "card-content");
+  });
+
+  it("renders banded header with data attribute", () => {
+    renderWithUi(
+      <Card>
+        <CardHeader banded data-testid="header">
+          <CardTitle>Section</CardTitle>
+        </CardHeader>
+        <CardContent>Body</CardContent>
+      </Card>,
+    );
+    const header = screen.getByTestId("header");
+    expect(header).toHaveAttribute("data-banded", "");
+    expect(header.className).toMatch(/ui-card-header--banded/);
+  });
+
+  it("banded header exposes chrome band flags only (padding in CSS)", () => {
+    renderWithUi(
+      <Card data-testid="card">
+        <CardHeader banded data-testid="header">
+          <CardTitle>Audit events</CardTitle>
+          <CardDescription>Realm internal · last 24h</CardDescription>
+        </CardHeader>
+        <CardContent data-testid="content">Body copy</CardContent>
+      </Card>,
+    );
+    const header = screen.getByTestId("header");
+    expect(header).toHaveAttribute("data-banded", "");
+    expect(header.className).toMatch(/ui-card-header--banded/);
+    expect(header.className).not.toMatch(/ui-card-shell/);
+    expect(screen.getByRole("heading", { name: "Audit events" })).toHaveAttribute(
+      "data-slot",
+      "card-title",
+    );
+    expect(screen.getByTestId("content")).not.toHaveAttribute("data-tight");
+  });
+
+  it("renders banded header with title and description slots", () => {
+    renderWithUi(
+      <Card>
+        <CardHeader banded>
+          <CardTitle>Audit events</CardTitle>
+          <CardDescription>Realm internal · last 24h</CardDescription>
+        </CardHeader>
+        <CardContent>Prop banded trên CardHeader.</CardContent>
+      </Card>,
+    );
+    expect(screen.getByRole("heading", { name: "Audit events" })).toBeInTheDocument();
+    expect(screen.getByText("Realm internal · last 24h")).toHaveAttribute(
+      "data-slot",
+      "card-description",
+    );
+    expect(screen.getByText("Prop banded trên CardHeader.")).toBeInTheDocument();
+  });
+
+  it("renders banded header with CardAction for toolbar layout", () => {
+    renderWithUi(
+      <Card>
+        <CardHeader banded data-testid="header">
+          <div>
+            <CardTitle>Lô gom hôm nay</CardTitle>
+            <CardDescription>Osaka Hub · cut-off 17:00 JST</CardDescription>
+          </div>
+          <CardAction>
+            <button type="button">Export CSV</button>
+          </CardAction>
+        </CardHeader>
+        <CardContent flush tight>
+          <Table>
+            <TableBody>
+              <TableRow>
+                <TableCell>GX-001</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>,
+    );
+    const header = screen.getByTestId("header");
+    expect(header.querySelector('[data-slot="card-action"]')).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Export CSV" })).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: "GX-001" })).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: "GX-001" }).closest("[data-flush]")).toBeTruthy();
+  });
+
+  it("plain header has no banded flag; banded header does", () => {
+    renderWithUi(
+      <div>
+        <Card>
+          <CardHeader data-testid="plain">
+            <CardTitle>Plain header</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader banded data-testid="banded">
+            <CardTitle>Banded header</CardTitle>
+          </CardHeader>
+        </Card>
+      </div>,
+    );
+    expect(screen.getByTestId("plain")).not.toHaveAttribute("data-banded");
+    expect(screen.getByTestId("banded")).toHaveAttribute("data-banded", "");
+  });
+
+  it("flush tight content sets layout modifier flags", () => {
+    renderWithUi(
+      <Card>
+        <CardHeader banded>
+          <CardTitle>Table section</CardTitle>
+        </CardHeader>
+        <CardContent flush tight data-testid="content">
+          <Table>
+            <TableBody>
+              <TableRow>
+                <TableCell>HAWB</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>,
+    );
+    const content = screen.getByTestId("content");
+    expect(content).toHaveAttribute("data-tight", "");
+    expect(content).toHaveAttribute("data-flush", "");
+    expect(content.className).not.toMatch(/ui-card-/);
+  });
+
+  it("banded card pairs with separated footer band", () => {
+    renderWithUi(
+      <Card>
+        <CardHeader banded>
+          <CardTitle>Lô gom hôm nay</CardTitle>
+        </CardHeader>
+        <CardContent flush tight>
+          Table body
+        </CardContent>
+        <CardFooter separated data-testid="footer">
+          3 / 12 kiện
+        </CardFooter>
+      </Card>,
+    );
+    expect(screen.getByTestId("footer")).toHaveAttribute("data-separated", "");
+    expect(screen.getByText("3 / 12 kiện")).toBeInTheDocument();
+  });
+
+  it("uses section top for toolbar header with CardAction", () => {
+    renderWithUi(
+      <Card>
+        <CardHeader data-testid="header" className="flex flex-row justify-between">
+          <CardTitle>Providers</CardTitle>
+          <CardAction>
+            <button type="button">Cancel</button>
+          </CardAction>
+        </CardHeader>
+        <CardContent>Body</CardContent>
+      </Card>,
+    );
+    expect(screen.getByTestId("header")).toHaveAttribute("data-slot", "card-header");
+    expect(
+      screen.getByRole("button", { name: "Cancel" }).closest("[data-slot=card-action]"),
+    ).toBeTruthy();
+  });
+
+  it("renders cover + meta with card-cover slot", () => {
+    renderWithUi(
+      <Card>
+        <CardCover data-testid="cover">Cover</CardCover>
+        <CardHeader data-testid="header">
+          <CardTitle>Meta</CardTitle>
+        </CardHeader>
+      </Card>,
+    );
+    expect(screen.getByTestId("cover")).toHaveAttribute("data-slot", "card-cover");
+    expect(screen.getByTestId("header")).toHaveAttribute("data-slot", "card-header");
+  });
+
+  it("marks tight content for symmetric header band spacing", () => {
+    renderWithUi(
+      <Card>
+        <CardHeader data-testid="header">
+          <CardTitle>Table</CardTitle>
+        </CardHeader>
+        <CardContent tight flush data-testid="content">
+          Body
+        </CardContent>
+      </Card>,
+    );
+    expect(screen.getByTestId("content")).toHaveAttribute("data-tight", "");
+    expect(screen.getByTestId("header")).toHaveAttribute("data-slot", "card-header");
+  });
+
+  it("renders solo content with data-solo flag", () => {
+    renderWithUi(
+      <Card>
+        <CardContent solo data-testid="content">
+          Only body
+        </CardContent>
+      </Card>,
+    );
+    expect(screen.getByTestId("content")).toHaveAttribute("data-solo", "");
+  });
+
+  it("CardStat uses compact stat slot token path", () => {
+    renderWithUi(
+      <CardStat
+        label="Đơn hôm nay"
+        value={128}
+        delta={<span data-testid="delta">+12%</span>}
+        data-testid="stat"
+      />,
+    );
+    const card = screen.getByTestId("stat");
+    expect(card).toHaveAttribute("data-size", "compact");
+    expect(card).toHaveAttribute("data-stat-card", "");
+    expect(card).toHaveAttribute("data-stat-layout", "stacked");
+    expect(screen.getByText("Đơn hôm nay")).toHaveAttribute("data-slot", "card-stat-label");
+    expect(screen.getByText("128")).toHaveAttribute("data-slot", "card-stat-value");
+    expect(screen.getByText("128")).toBeInTheDocument();
+    expect(screen.getByTestId("delta")).toBeInTheDocument();
+    expect(card.querySelector("[data-slot='card-stat-value-row']")).toBeTruthy();
+  });
+});
+
+describe("Table", () => {
+  it("renders semantic table structure", () => {
+    renderWithUi(
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>HAWB</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>GX-001</TableCell>
+            <TableCell>In transit</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+    expect(screen.getByRole("table")).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "HAWB" })).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: "GX-001" })).toBeInTheDocument();
+  });
+});

package/src/components/data-display/__tests__/data-display.test.tsx

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+import { Inbox } from "lucide-react";
+import { renderWithUi, screen } from "@/test/render";
+import { EmptyState } from "../empty-state";
+import { Button } from "../../general/button";
+import { Badge } from "../badge";
+import { KeyValueGrid } from "../key-value-grid";
+import { StatusBadge } from "../status-badge";
+
+describe("EmptyState", () => {
+  it("renders title and description", () => {
+    renderWithUi(<EmptyState title="No data" description="Try changing filters" />);
+    expect(screen.getByRole("heading", { level: 3, name: "No data" })).toBeInTheDocument();
+    expect(screen.getByText("Try changing filters")).toBeInTheDocument();
+  });
+
+  it("renders icon and action", () => {
+    renderWithUi(<EmptyState icon={Inbox} title="Empty" action={<Button>Add</Button>} />);
+    expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
+  });
+});
+
+describe("Badge", () => {
+  it("renders children", () => {
+    renderWithUi(<Badge>New</Badge>);
+    expect(screen.getByText("New")).toBeInTheDocument();
+  });
+
+  it("success variant uses semantic success token (not green-*)", () => {
+    renderWithUi(<Badge variant="success">OK</Badge>);
+    const el = screen.getByText("OK");
+    expect(el.className).toContain("success");
+    expect(el.className).not.toMatch(/green-/);
+  });
+});
+
+describe("KeyValueGrid", () => {
+  it("renders label/value pairs via Item children", () => {
+    renderWithUi(
+      <KeyValueGrid>
+        <KeyValueGrid.Item label="ID">01HF</KeyValueGrid.Item>
+        <KeyValueGrid.Item label="Status">active</KeyValueGrid.Item>
+      </KeyValueGrid>,
+    );
+    expect(screen.getByText("ID")).toBeInTheDocument();
+    expect(screen.getByText("01HF")).toBeInTheDocument();
+    expect(screen.getByText("Status")).toBeInTheDocument();
+  });
+});
+
+describe("StatusBadge", () => {
+  it("maps known status to label", () => {
+    renderWithUi(<StatusBadge status="pending" />);
+    expect(screen.getByText("Chờ xử lý")).toBeInTheDocument();
+  });
+
+  it("pending tone uses warning token on root badge element", () => {
+    renderWithUi(<StatusBadge status="pending" />);
+    const text = screen.getByText("Chờ xử lý");
+    expect(text.parentElement?.className).toContain("warning");
+  });
+
+  it("scheduled tone uses info token on root badge element", () => {
+    renderWithUi(<StatusBadge status="scheduled" />);
+    const text = screen.getByText("Đã lên lịch");
+    expect(text.parentElement?.className).toContain("info");
+  });
+
+  it("falls back for unknown status", () => {
+    renderWithUi(<StatusBadge status="custom_unknown_xyz" />);
+    expect(screen.getByText("custom_unknown_xyz")).toBeInTheDocument();
+  });
+});

package/src/components/data-display/__tests__/data-table.test.tsx

@@ -0,0 +1,84 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { DataTable } from "../data-table";
+
+type Row = { id: string; name: string; status: string };
+
+const rows: Row[] = [
+  { id: "1", name: "Mai Nguyen", status: "active" },
+  { id: "2", name: "Ken Tanaka", status: "pending" },
+];
+
+const columns = [
+  { key: "name", header: "Khách hàng" },
+  { key: "status", header: "Trạng thái" },
+] as const;
+
+describe("DataTable", () => {
+  it("renders column headers and row data", () => {
+    renderWithUi(<DataTable data={rows} columns={[...columns]} getRowId={(row) => row.id} />);
+    expect(screen.getByRole("columnheader", { name: "Khách hàng" })).toBeInTheDocument();
+    expect(screen.getByText("Mai Nguyen")).toBeInTheDocument();
+    expect(screen.getByText("Ken Tanaka")).toBeInTheDocument();
+  });
+
+  it("applies ui-density class wrapper for token-based row height", () => {
+    const { container } = renderWithUi(
+      <DataTable data={rows} columns={[...columns]} getRowId={(row) => row.id} density="compact" />,
+    );
+    expect(container.querySelector(".ui-density-compact")).toBeInTheDocument();
+  });
+
+  it("supports row selection when selectable", async () => {
+    const user = userEvent.setup();
+    const onSelectChange = vi.fn();
+    renderWithUi(
+      <DataTable
+        data={rows}
+        columns={[...columns]}
+        getRowId={(row) => row.id}
+        selectable
+        selected={new Set()}
+        onSelectChange={onSelectChange}
+      />,
+    );
+    const rowCheckbox = screen.getAllByRole("checkbox", { name: /chọn dòng/i })[0];
+    await user.click(rowCheckbox);
+    expect(onSelectChange).toHaveBeenCalledWith(new Set(["1"]));
+  });
+
+  it("calls onRowClick when row is clicked", async () => {
+    const user = userEvent.setup();
+    const onRowClick = vi.fn();
+    renderWithUi(
+      <DataTable
+        data={rows}
+        columns={[...columns]}
+        getRowId={(row) => row.id}
+        onRowClick={onRowClick}
+      />,
+    );
+    await user.click(screen.getByText("Mai Nguyen"));
+    expect(onRowClick).toHaveBeenCalledWith(rows[0]);
+  });
+
+  it("shows bulk actions when rows selected", () => {
+    renderWithUi(
+      <DataTable
+        data={rows}
+        columns={[...columns]}
+        getRowId={(row) => row.id}
+        selectable
+        selected={new Set(["1"])}
+      >
+        <DataTable.Toolbar>
+          <DataTable.BulkActions>
+            <button type="button">Xóa</button>
+          </DataTable.BulkActions>
+        </DataTable.Toolbar>
+      </DataTable>,
+    );
+    expect(screen.getByRole("region", { name: /thao tác hàng loạt/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Xóa" })).toBeInTheDocument();
+  });
+});

package/src/components/data-display/__tests__/popover.test.tsx

@@ -0,0 +1,92 @@
+import { describe, expect, it, vi } from "vitest";
+import * as React from "react";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { Button } from "../../general/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "../popover";
+
+describe("Popover", () => {
+  it("shows content when trigger is clicked", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button type="button">Mở popover</Button>
+        </PopoverTrigger>
+        <PopoverContent>Lọc HAWB nâng cao</PopoverContent>
+      </Popover>,
+    );
+    await user.click(screen.getByRole("button", { name: "Mở popover" }));
+    expect(screen.getByText("Lọc HAWB nâng cao")).toHaveAttribute("data-slot", "popover-content");
+  });
+
+  it("closes when pressing Escape", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button type="button">Mở popover</Button>
+        </PopoverTrigger>
+        <PopoverContent>Lọc HAWB nâng cao</PopoverContent>
+      </Popover>,
+    );
+    await user.click(screen.getByRole("button", { name: "Mở popover" }));
+    expect(screen.getByText("Lọc HAWB nâng cao")).toBeInTheDocument();
+    await user.keyboard("{Escape}");
+    expect(screen.queryByText("Lọc HAWB nâng cao")).not.toBeInTheDocument();
+  });
+
+  it("calls onOpenChange in controlled mode", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+
+    function Demo() {
+      const [open, setOpen] = React.useState(false);
+      return (
+        <Popover
+          open={open}
+          onOpenChange={(next) => {
+            setOpen(next);
+            onOpenChange(next);
+          }}
+        >
+          <PopoverTrigger asChild>
+            <Button type="button">Controlled</Button>
+          </PopoverTrigger>
+          <PopoverContent>Panel</PopoverContent>
+        </Popover>
+      );
+    }
+
+    renderWithUi(<Demo />);
+    await user.click(screen.getByRole("button", { name: "Controlled" }));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    expect(screen.getByText("Panel")).toBeInTheDocument();
+  });
+
+  it("renders shadcn header slots", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button type="button">Details</Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <PopoverHeader>
+            <PopoverTitle>Title</PopoverTitle>
+            <PopoverDescription>Description</PopoverDescription>
+          </PopoverHeader>
+        </PopoverContent>
+      </Popover>,
+    );
+    await user.click(screen.getByRole("button", { name: "Details" }));
+    expect(screen.getByText("Title")).toHaveAttribute("data-slot", "popover-title");
+    expect(screen.getByText("Description")).toHaveAttribute("data-slot", "popover-description");
+  });
+});

package/src/components/data-display/__tests__/scroll-area-collapsible.test.tsx

@@ -0,0 +1,66 @@
+import { describe, expect, it } from "vitest";
+import * as React from "react";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { Button } from "../../general/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible";
+import { ScrollArea } from "../scroll-area";
+
+describe("ScrollArea", () => {
+  it("renders scrollable content", () => {
+    renderWithUi(
+      <ScrollArea className="h-24 w-48">
+        <div>
+          {Array.from({ length: 20 }, (_, i) => (
+            <p key={i}>Dòng {i + 1}</p>
+          ))}
+        </div>
+      </ScrollArea>,
+    );
+    expect(screen.getByText("Dòng 1")).toBeInTheDocument();
+    expect(screen.getByText("Dòng 20")).toBeInTheDocument();
+  });
+});
+
+describe("Collapsible", () => {
+  it("toggles content visibility", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <Collapsible>
+        <CollapsibleTrigger asChild>
+          <Button type="button">Mở rộng</Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>Chi tiết lô hàng GX-001</CollapsibleContent>
+      </Collapsible>,
+    );
+
+    expect(screen.queryByText("Chi tiết lô hàng GX-001")).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Mở rộng" }));
+    expect(screen.getByText("Chi tiết lô hàng GX-001")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Mở rộng" }));
+    expect(screen.queryByText("Chi tiết lô hàng GX-001")).not.toBeInTheDocument();
+  });
+
+  it("supports controlled open state", async () => {
+    const user = userEvent.setup();
+    function Demo() {
+      const [open, setOpen] = React.useState(false);
+      return (
+        <>
+          <Button type="button" onClick={() => setOpen(true)}>
+            Mở ngoài
+          </Button>
+          <Collapsible open={open} onOpenChange={setOpen}>
+            <CollapsibleTrigger asChild>
+              <Button type="button">Trigger</Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>Nội dung controlled</CollapsibleContent>
+          </Collapsible>
+        </>
+      );
+    }
+
+    renderWithUi(<Demo />);
+    await user.click(screen.getByRole("button", { name: "Mở ngoài" }));
+    expect(screen.getByText("Nội dung controlled")).toBeInTheDocument();
+  });
+});

package/src/components/data-display/badge.tsx

@@ -0,0 +1,27 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { toneSuccessClass, toneWarningClass } from "../../lib/control-styles";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-destructive-foreground",
+        outline: "text-foreground",
+        success: cn("border-transparent", toneSuccessClass),
+        warning: cn("border-transparent", toneWarningClass),
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}