{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "bottom-nav",
	"title": "Bottom Navigation",
	"type": "registry:ui",
	"description": "A mobile-first bottom navigation bar.",
	"registryDependencies": [
		"button"
	],
	"files": [
		{
			"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<nav\r\n        class={cn(\r\n        \"flex w-full items-center justify-around border-t bg-background h-16 px-2 shadow-[0_-1px_2px_rgba(0,0,0,0.03)]\",\r\n        className\r\n    )}\r\n>\r\n    {@render children()}\r\n</nav>",
			"type": "registry:ui",
			"target": "bottom-nav/bottom-nav.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from '$UTILS$';\n\timport type { Snippet } from 'svelte';\n\timport { page } from '$app/stores';\n\n\tlet {\n\t\thref,\n\t\tclass: className,\n\t\tisActive,\n\t\tchildren\n\t}: {\n\t\thref: string;\n\t\tclass?: string;\n\t\tisActive?: boolean;\n\t\tchildren: Snippet;\n\t} = $props();\n\n\tlet active = $derived(isActive ?? $page.url.pathname === href);\n</script>\n\n<a\n\t{href}\n\tclass={cn(\n\t\t'group flex flex-1 flex-col items-center justify-center gap-1 text-[10px] font-medium transition-colors duration-200 hover:bg-muted/20 h-full rounded-md',\n\t\tactive ? 'text-primary' : 'text-muted-foreground hover:text-foreground',\n\t\tclassName\n\t)}\n>\n\t<div class=\"flex flex-col items-center justify-center gap-1\">\n\t\t{@render children()}\n\t</div>\n</a>\n",
			"type": "registry:ui",
			"target": "bottom-nav/bottom-nav-item.svelte"
		},
		{
			"content": "import BottomNav from \"./bottom-nav.svelte\";\r\nimport BottomNavItem from \"./bottom-nav-item.svelte\";\r\n\r\nexport {\r\n    BottomNav as Root,\r\n    BottomNavItem as Item,\r\n};",
			"type": "registry:ui",
			"target": "bottom-nav/index.ts"
		}
	]
}