{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "chip",
	"title": "Chip",
	"type": "registry:ui",
	"description": "Compact element that represents an input, attribute, or action.",
	"dependencies": [
		"@lucide/svelte@^0.554.0"
	],
	"devDependencies": [
		"@lucide/svelte@^0.544.0",
		"tailwind-variants@^3.1.1"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\r\n\timport { cn } from '$UTILS$';\r\n\timport { X } from '@lucide/svelte';\r\n\timport type { Snippet } from 'svelte';\r\n\timport { tv, type VariantProps } from 'tailwind-variants';\r\n\r\n\tconst chipVariants = tv({\r\n\t\tbase: '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',\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tdefault: 'bg-primary text-primary-foreground hover:bg-primary/90',\r\n\t\t\t\tsecondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\r\n\t\t\t\toutline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\r\n\t\t\t\tghost: 'hover:bg-accent hover:text-accent-foreground'\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tsm: 'h-6 px-2.5 text-[10px]',\r\n\t\t\t\tdefault: 'h-8 px-3 text-xs',\r\n\t\t\t\tlg: 'h-9 px-4 text-sm'\r\n\t\t\t},\r\n\t\t\tactive: {\r\n\t\t\t\ttrue: '',\r\n\t\t\t\tfalse: ''\r\n\t\t\t}\r\n\t\t},\r\n\t\tcompoundVariants: [\r\n\t\t\t{\r\n\t\t\t\tvariant: 'outline',\r\n\t\t\t\tactive: true,\r\n\t\t\t\tclass:\r\n\t\t\t\t\t'bg-primary text-primary-foreground border-primary hover:bg-primary/90 hover:text-primary-foreground'\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\tvariant: 'ghost',\r\n\t\t\t\tactive: true,\r\n\t\t\t\tclass: 'bg-accent text-accent-foreground'\r\n\t\t\t}\r\n\t\t],\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: 'default',\r\n\t\t\tsize: 'default',\r\n\t\t\tactive: false\r\n\t\t}\r\n\t});\r\n\r\n\ttype Variant = VariantProps<typeof chipVariants>['variant'];\r\n\ttype Size = VariantProps<typeof chipVariants>['size'];\r\n\r\n\tlet {\r\n\t\tclass: className,\r\n\t\tvariant = 'default',\r\n\t\tsize = 'default',\r\n\t\tactive = false,\r\n\t\tdisabled = false,\r\n\t\tremovable = false,\r\n\t\tonclick,\r\n\t\tonremove,\r\n\t\thref,\r\n\t\tchildren,\r\n\t\tavatar,\r\n\t\ticon,\r\n\t\t...rest\r\n\t}: {\r\n\t\tclass?: string;\r\n\t\tvariant?: Variant;\r\n\t\tsize?: Size;\r\n\t\tactive?: boolean;\r\n\t\tdisabled?: boolean;\r\n\t\tremovable?: boolean;\r\n\t\tonclick?: (e: MouseEvent) => void;\r\n\t\tonremove?: (e: MouseEvent) => void;\r\n\t\thref?: string;\r\n\t\tchildren?: Snippet;\r\n\t\tavatar?: Snippet;\r\n\t\ticon?: Snippet;\r\n\t\t[key: string]: any;\r\n\t} = $props();\r\n\r\n\tconst isInteractive = !!onclick || !!href || active !== undefined;\r\n\tconst Element = href ? 'a' : isInteractive ? 'button' : 'div';\r\n\r\n\tfunction handleClick(e: MouseEvent) {\r\n\t\tif (disabled) return;\r\n\t\tonclick?.(e);\r\n\t}\r\n\r\n\tfunction handleRemove(e: MouseEvent) {\r\n\t\te.stopPropagation();\r\n\t\tif (disabled) return;\r\n\t\tonremove?.(e);\r\n\t}\r\n</script>\r\n\r\n<svelte:element\r\n\tthis={Element}\r\n\tclass={cn(chipVariants({ variant, size, active }), className)}\r\n\tonclick={isInteractive ? handleClick : undefined}\r\n\t{href}\r\n\t{disabled}\r\n\ttabindex={isInteractive ? 0 : -1}\r\n\taria-pressed={isInteractive ? active : undefined}\r\n\t{...rest}\r\n>\r\n\t{#if avatar}\r\n\t\t<span class={cn('-ml-1 mr-2 flex shrink-0', size === 'sm' && '-ml-1 mr-1.5')}>\r\n\t\t\t{@render avatar()}\r\n\t\t</span>\r\n\t{:else if icon}\r\n\t\t<span class={cn('mr-2 flex shrink-0', size === 'sm' && 'mr-1.5')}>\r\n\t\t\t{@render icon()}\r\n\t\t</span>\r\n\t{/if}\r\n\r\n\t<span>\r\n\t\t{#if children}\r\n\t\t\t{@render children()}\r\n\t\t{/if}\r\n\t</span>\r\n\r\n\t{#if removable}\r\n\t\t<button\r\n\t\t\ttype=\"button\"\r\n\t\t\tclass={cn(\r\n\t\t\t\t'ml-2 -mr-1 flex items-center justify-center rounded-full hover:bg-black/10 dark:hover:bg-white/20',\r\n\t\t\t\tsize === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'\r\n\t\t\t)}\r\n\t\t\tonclick={handleRemove}\r\n\t\t\taria-label=\"Remove\"\r\n\t\t>\r\n\t\t\t<X class=\"h-3 w-3\" />\r\n\t\t</button>\r\n\t{/if}\r\n</svelte:element>\r\n",
			"type": "registry:ui",
			"target": "chip/chip.svelte"
		},
		{
			"content": "<script lang=\"ts\">\r\n    import { cn } from \"$UTILS$\";\r\n    import type { Snippet } from \"svelte\";\r\n\r\n    let { class: className, children }: { class?: string, children: Snippet } = $props();\r\n</script>\r\n\r\n<div class={cn(\"flex flex-wrap gap-2\", className)}>\r\n    {@render children()}\r\n</div>",
			"type": "registry:ui",
			"target": "chip/chip-group.svelte"
		},
		{
			"content": "import Chip from \"./chip.svelte\";\r\nimport ChipGroup from \"./chip-group.svelte\";\r\n\r\nexport {\r\n    Chip as Root,\r\n    ChipGroup as Group\r\n};",
			"type": "registry:ui",
			"target": "chip/index.ts"
		}
	]
}