Badge

1"use client";
2 
3import "./badge.css";
4import type React from "react";
5import { cn } from "tailwind-variants";
6 
7import { BadgeContext } from "./badge.context";
8import { badgeVariants, type BadgeVariants } from "./badge.variants";
9 
10export type BadgeProps = BadgeVariants & React.HTMLAttributes<HTMLDivElement>;
11 
12export const BadgeRoot = ({ children, className, variant, size, ...props }: BadgeProps) => {
13  const slots = badgeVariants({ variant, size });
14 
15  return (
16    <BadgeContext.Provider value={{ slots }}>
17      <div className={cn(slots.root(), className)} {...props}>
18        {children}
19      </div>
20    </BadgeContext.Provider>
21  );
22};
23 
24export const Badge = BadgeRoot;