chip

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3import { ChevronDown } from "lucide-react"
4 
5import { cn } from "@/lib/utils"
6import "./chip.css"
7 
8const chipVariants = cva(
9  "chip-base inline-flex h-[var(--layout-size-md)] items-center justify-center whitespace-nowrap rounded-[var(--layout-radius-full)] py-[var(--layout-padding-xs)] text-content-caption cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0",
10  {
11    variants: {
12      variant: {
13        filled: "chip-filled",
14        outline: "chip-outline",
15        ghost: "chip-ghost",
16      },
17    },
18    defaultVariants: {
19      variant: "filled",
20    },
21  }
22)
23 
24function Chip({
25  className,
26  variant,
27  hasDropdown = false,
28  icon,
29  children,
30  ...props
31}: React.ComponentProps<"button"> &
32  VariantProps<typeof chipVariants> & {
33    hasDropdown?: boolean
34    icon?: React.ReactNode
35  }) {
36  return (
37    <button
38      data-slot="chip"
39      type="button"
40      className={cn(
41        chipVariants({ variant, className }),
42        hasDropdown
43          ? "gap-0 pl-[var(--layout-padding-md)] pr-[var(--layout-padding-xs)]"
44          : "gap-[var(--layout-gap-xs)] px-[var(--layout-padding-md)]"
45      )}
46      {...props}
47    >
48      {!hasDropdown && icon && (
49        <span className="chip-icon shrink-0 flex items-center" aria-hidden="true">
50          {icon}
51        </span>
52      )}
53      {children}
54      {hasDropdown && (
55        <ChevronDown className="chip-chevron" aria-hidden="true" />
56      )}
57    </button>
58  )
59}
60 
61export { Chip, chipVariants }