tag

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5import "./tag.css"
6 
7const tagVariants = cva(
8  "inline-flex items-center overflow-hidden whitespace-nowrap font-accent [&_svg]:pointer-events-none [&_svg]:shrink-0",
9  {
10    variants: {
11      variant: {
12        brand: "tag-brand",
13        neutral: "tag-neutral",
14        success: "tag-success",
15        danger: "tag-danger",
16        warning: "tag-warning",
17      },
18      size: {
19        sm: "gap-[var(--layout-gap-sm)] px-[var(--layout-padding-sm)] py-[var(--layout-padding-2xs)] rounded-[var(--layout-radius-sm)] text-content-caption [&_svg]:size-3 [&_.tag-dot]:size-1.5",
20        md: "gap-[var(--layout-gap-sm)] px-[var(--layout-padding-md)] py-[var(--layout-padding-xs)] rounded-[var(--layout-radius-md)] text-content-caption [&_svg]:size-3 [&_.tag-dot]:size-2",
21        lg: "gap-[var(--layout-gap-sm)] px-[var(--layout-padding-md)] py-[var(--layout-padding-xs)] rounded-[var(--layout-radius-lg)] text-content-note [&_svg]:size-3.5 [&_.tag-dot]:size-2",
22      },
23      type: {
24        fill: "tag-fill",
25        dash: "tag-dash",
26        emphasis: "tag-emphasis",
27        ghost: "tag-ghost",
28      },
29    },
30    defaultVariants: {
31      variant: "neutral",
32      size: "sm",
33      type: "fill",
34    },
35  }
36)
37 
38function TagDot({ className }: { className?: string }) {
39  return <span className={cn("tag-dot shrink-0", className)} />
40}
41 
42function TagClose({
43  className,
44  children,
45  ...props
46}: React.ComponentProps<"button">) {
47  return (
48    <button
49      data-slot="tag-close"
50      type="button"
51      className={cn(
52        "tag-close shrink-0 cursor-pointer inline-flex items-center justify-center",
53        className
54      )}
55      {...props}
56    >
57      {children ?? (
58        <svg
59          xmlns="http://www.w3.org/2000/svg"
60          viewBox="0 0 24 24"
61          fill="none"
62          stroke="currentColor"
63          strokeWidth="2"
64          strokeLinecap="round"
65          strokeLinejoin="round"
66        >
67          <path d="M18 6 6 18" />
68          <path d="m6 6 12 12" />
69        </svg>
70      )}
71    </button>
72  )
73}
74 
75function Tag({
76  className,
77  variant,
78  size,
79  type,
80  children,
81  ...props
82}: React.ComponentProps<"span"> &
83  VariantProps<typeof tagVariants>) {
84  return (
85    <span
86      data-slot="tag"
87      className={cn(tagVariants({ variant, size, type, className }))}
88      {...props}
89    >
90      {children}
91    </span>
92  )
93}
94 
95// … truncated