badge

1import { cva, type VariantProps } from "class-variance-authority";
2import { Slot } from "radix-ui";
3import type * as React from "react";
4import { Pane } from "@/components/ui/pane";
5import { cn } from "@/lib/utils";
6 
7const badgeVariants = cva(
8  "inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap px-2.5 py-0.5 text-xs font-medium [&_svg]:size-3 [&_svg]:pointer-events-none",
9  {
10    variants: {
11      variant: {
12        default: "text-foreground",
13        tinted: "text-[oklch(0.35_0.14_255)] dark:text-white",
14      },
15    },
16    defaultVariants: { variant: "default" },
17  },
18);
19 
20export interface BadgeProps
21  extends React.ComponentProps<"span">,
22    VariantProps<typeof badgeVariants> {
23  asChild?: boolean;
24}
25 
26function Badge({
27  className,
28  variant = "default",
29  asChild = false,
30  ...props
31}: BadgeProps) {
32  const Comp = asChild ? Slot.Root : "span";
33  return (
34    <Pane variant="clear" radius={999} className="inline-flex w-fit shrink-0">
35      <Comp
36        data-slot="badge"
37        className={cn(badgeVariants({ variant, className }), "bg-transparent")}
38        {...props}
39      />
40    </Pane>
41  );
42}
43 
44export { Badge, badgeVariants };