{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "message",
	"title": "Message",
	"type": "registry:ui",
	"description": "A chat message primitive with role-based variants, avatar, and content slots.",
	"dependencies": [
		"bits-ui",
		"tailwind-variants"
	],
	"devDependencies": [
		"bits-ui@^2.18.0",
		"tailwind-variants@^1.0.0"
	],
	"registryDependencies": [
		"avatar"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport type { Snippet } from \"svelte\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\timport { cn } from \"$UTILS$.js\";\n\n\tlet {\n\t\tclass: className,\n\t\tfrom,\n\t\tchildren,\n\t\t...restProps\n\t}: HTMLAttributes<HTMLDivElement> & {\n\t\t/**\n\t\t * Determines the message's alignment and which group-scoped styles\n\t\t * (`is-user` / `is-assistant`) apply to `MessageContent` and\n\t\t * `MessageAvatar` descendants.\n\t\t */\n\t\tfrom: \"user\" | \"assistant\";\n\t\t/** Message body — typically a `MessageContent` and/or `MessageAvatar`. */\n\t\tchildren?: Snippet;\n\t} = $props();\n</script>\n\n<div\n\tdata-slot=\"message\"\n\tclass={cn(\n\t\t\"group flex w-full items-end justify-end gap-2 py-4\",\n\t\tfrom === \"user\" ? \"is-user\" : \"is-assistant flex-row-reverse justify-end\",\n\t\tclassName\n\t)}\n\t{...restProps}\n>\n\t{@render children?.()}\n</div>\n\n<style>\n\t:global(.is-user) {\n\t\t--foreground: var(--primary-foreground);\n\t\t--card: var(--primary);\n\t\t--card-foreground: var(--primary-foreground);\n\t\t--muted: color-mix(in oklab, var(--primary) 88%, var(--primary-foreground));\n\t\t--muted-foreground: color-mix(in oklab, var(--primary-foreground) 70%, transparent);\n\t\t--border: color-mix(in oklab, var(--primary-foreground) 18%, transparent);\n\t}\n</style>\n",
			"type": "registry:ui",
			"target": "message/message.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from \"$UTILS$.js\";\n\timport { Avatar as AvatarPrimitive } from \"bits-ui\";\n\timport { Avatar, AvatarImage, AvatarFallback } from \"$UI$/avatar/index.js\";\n\n\tlet {\n\t\tsrc,\n\t\tname,\n\t\tclass: className,\n\t\t...restProps\n\t}: AvatarPrimitive.RootProps & {\n\t\tsrc: string;\n\t\tname?: string;\n\t} = $props();\n</script>\n\n<Avatar class={cn(\"ring-border size-8 ring-1\", className)} {...restProps}>\n\t<AvatarImage alt=\"\" class=\"mt-0 mb-0\" {src} />\n\t<AvatarFallback>{name?.slice(0, 2) || \"ME\"}</AvatarFallback>\n</Avatar>\n",
			"type": "registry:ui",
			"target": "message/message-avatar.svelte"
		},
		{
			"content": "<script lang=\"ts\" module>\n\timport { tv, type VariantProps } from \"tailwind-variants\";\n\n\texport const messageContentVariants = tv({\n\t\tbase: \"flex flex-col gap-2 overflow-hidden rounded-lg text-sm\",\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tcontained: [\n\t\t\t\t\t\"max-w-[80%] px-4 py-3\",\n\t\t\t\t\t\"group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground\",\n\t\t\t\t\t\"group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground\",\n\t\t\t\t],\n\t\t\t\tflat: [\n\t\t\t\t\t\"group-[.is-user]:max-w-[80%] group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground\",\n\t\t\t\t\t\"group-[.is-assistant]:text-foreground\",\n\t\t\t\t],\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"contained\",\n\t\t},\n\t});\n\n\texport type MessageContentVariants = VariantProps<typeof messageContentVariants>;\n</script>\n\n<script lang=\"ts\">\n\timport type { Snippet } from \"svelte\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\timport { cn } from \"$UTILS$.js\";\n\n\tlet {\n\t\tclass: className,\n\t\tvariant,\n\t\tchildren,\n\t\t...restProps\n\t}: HTMLAttributes<HTMLDivElement> & MessageContentVariants & { children?: Snippet } = $props();\n</script>\n\n<div\n\tdata-slot=\"message-content\"\n\tclass={cn(messageContentVariants({ variant }), className)}\n\t{...restProps}\n>\n\t{@render children?.()}\n</div>\n",
			"type": "registry:ui",
			"target": "message/message-content.svelte"
		},
		{
			"content": "import Message from \"./message.svelte\";\nimport MessageContent from \"./message-content.svelte\";\nimport MessageAvatar from \"./message-avatar.svelte\";\n\nexport {\n\tMessage,\n\tMessageContent,\n\tMessageAvatar,\n\t//\n\tMessage as Root,\n\tMessageContent as Content,\n\tMessageAvatar as Avatar,\n};\n",
			"type": "registry:ui",
			"target": "message/index.ts"
		}
	]
}