badge

1import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2import { Polymorphic } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import type { VariantProps } from "class-variance-authority";
6import { cva } from "class-variance-authority";
7import type { ValidComponent } from "solid-js";
8 
9import { splitProps } from "solid-js";
10 
11const badgeVariants = cva(
12  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none",
13  {
14    variants: {
15      variant: {
16        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
17        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
18        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
19        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
20        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
21        link: "text-primary underline-offset-4 hover:underline",
22      },
23    },
24    defaultVariants: {
25      variant: "default",
26    },
27  },
28);
29 
30type BadgeProps<T extends ValidComponent = "span"> =
31  & VariantProps<typeof badgeVariants>
32  & { class?: string | undefined };
33 
34const Badge = <T extends ValidComponent = "span">(
35  props: PolymorphicProps<T, BadgeProps<T>>,
36) => {
37  const [local, others] = splitProps(props as BadgeProps, ["class", "variant"]);
38  return (
39    <Polymorphic
40      as="span"
41      data-slot="badge"
42      data-variant={local.variant ?? "default"}
43      class={cn(badgeVariants({ variant: local.variant }), local.class)}
44      {...others}
45    />
46  );
47};
48 
49export type { BadgeProps };
50export { Badge, badgeVariants };