Chip

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { X } from '@lucide/svelte';
4	import type { Snippet } from 'svelte';
5	import { tv, type VariantProps } from 'tailwind-variants';
6
7	const chipVariants = tv({
8		base: 'inline-flex items-center justify-center rounded-full text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:pointer-events-none disabled:opacity-50',
9		variants: {
10			variant: {
11				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
12				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
13				outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
14				ghost: 'hover:bg-accent hover:text-accent-foreground'
15			},
16			size: {
17				sm: 'h-6 px-2.5 text-[10px]',
18				default: 'h-8 px-3 text-xs',
19				lg: 'h-9 px-4 text-sm'
20			},
21			active: {
22				true: '',
23				false: ''
24			}
25		},
26		compoundVariants: [
27			{
28				variant: 'outline',
29				active: true,
30				class:
31					'bg-primary text-primary-foreground border-primary hover:bg-primary/90 hover:text-primary-foreground'
32			},
33			{
34				variant: 'ghost',
35				active: true,
36				class: 'bg-accent text-accent-foreground'
37			}
38		],
39		defaultVariants: {
40			variant: 'default',
41			size: 'default',
42			active: false
43		}
44	});
45
46	type Variant = VariantProps<typeof chipVariants>['variant'];
47	type Size = VariantProps<typeof chipVariants>['size'];
48
49	let {
50		class: className,
51		variant = 'default',
52		size = 'default',
53		active = false,
54		disabled = false,
55		removable = false,
56		onclick,
57		onremove,
58		href,
59		children,
60		avatar,
61		icon,
62		...rest
63	}: {
64		class?: string;
65		variant?: Variant;
66		size?: Size;
67		active?: boolean;
68		disabled?: boolean;
69		removable?: boolean;
70		onclick?: (e: MouseEvent) => void;
71		onremove?: (e: MouseEvent) => void;
72		href?: string;
73		children?: Snippet;
74		avatar?: Snippet;
75		icon?: Snippet;
76		[key: string]: any;
77	} = $props();
78
79	const isInteractive = !!onclick || !!href || active !== undefined;
80	const Element = href ? 'a' : isInteractive ? 'button' : 'div';
81
82	function handleClick(e: MouseEvent) {
83		if (disabled) return;
84		onclick?.(e);
85	}
86
87	function handleRemove(e: MouseEvent) {
88		e.stopPropagation();
89		if (disabled) return;
90		onremove?.(e);
91	}
92</script>
93
94<svelte:element
95	this={Element}
96// … truncated