Chip

1import { Slot } from 'radix-ui';
2 
3import { cn } from '@/lib/utils';
4 
5const hues = {
6  ruri: 'border-ruri/25 bg-ruri/10 text-ruri dark:border-ruri-soft/25 dark:bg-ruri-soft/10 dark:text-ruri-soft',
7  korozen:
8    'border-korozen/25 bg-korozen/5 text-korozen-deep dark:border-korozen-soft/25 dark:bg-korozen-soft/10 dark:text-korozen-soft',
9  sumire:
10    'border-sumire/25 bg-sumire/5 text-sumire-deep dark:border-sumire-soft/25 dark:bg-sumire-soft/10 dark:text-sumire-soft',
11  neutral: 'border-glass-edge bg-glass text-muted-foreground backdrop-blur',
12} as const;
13 
14export type ChipHue = keyof typeof hues;
15 
16export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {
17  hue?: ChipHue;
18  asChild?: boolean;
19}
20 
21export function Chip({ hue = 'ruri', asChild, className, children, ...props }: ChipProps) {
22  const Comp = asChild ? Slot.Root : 'span';
23  return (
24    <Comp
25      className={cn(
26        'inline-block rounded-full border px-2.5 py-0.5 font-mono text-[0.75rem] tracking-[0.2em] uppercase',
27        hues[hue],
28        className,
29      )}
30      {...props}
31    >
32      {children}
33    </Comp>
34  );
35}