{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "bento-grid",
	"title": "Bento Grid",
	"type": "registry:block",
	"description": "A flexible grid layout with interchangeable BentoCard items for showcasing content in a responsive masonry style.",
	"dependencies": [
		"@lucide/svelte"
	],
	"devDependencies": [
		"@lucide/svelte@^0.561.0"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from \"$UTILS$\";\n\timport type { Snippet } from \"svelte\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\tinterface BentoGridProps extends HTMLAttributes<HTMLDivElement> {\n\t\tchildren: Snippet;\n\t\tclass?: string;\n\t}\n\n\tlet { children, class: className, ...props }: BentoGridProps = $props();\n</script>\n\n<div class={cn(\"grid w-full auto-rows-[22rem] grid-cols-3 gap-4\", className)} {...props}>\n\t{@render children()}\n</div>\n",
			"type": "registry:component",
			"target": "magic/bento-grid/bento-grid.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport type { Snippet } from \"svelte\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\timport type { Component } from \"svelte\";\n\n\timport { cn } from \"$UTILS$\";\n\timport Button from \"$lib/components/ui/button/button.svelte\";\n\timport { ArrowRightIcon } from \"@lucide/svelte\";\n\n\tinterface BentoCardProps extends HTMLAttributes<HTMLDivElement> {\n\t\tname: string;\n\t\tclass?: string;\n\t\tbackground: Snippet;\n\t\tIcon: Component<any>;\n\t\ticonClass?: string;\n\t\tdescription: string;\n\t\thref: string;\n\t\tcta: string;\n\t}\n\n\tlet {\n\t\tname,\n\t\tclass: className,\n\t\tbackground,\n\t\tIcon,\n\t\ticonClass = \"\",\n\t\tdescription,\n\t\thref,\n\t\tcta,\n\t\t...props\n\t}: BentoCardProps = $props();\n</script>\n\n<div\n\tclass={cn(\n\t\t\"group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl\",\n\t\t// light styles\n\t\t\"bg-background [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n\t\t// dark styles\n\t\t\"dark:bg-background transform-gpu dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] dark:[border:1px_solid_rgba(255,255,255,.1)]\",\n\t\tclassName\n\t)}\n\t{...props}\n>\n\t<div>{@render background()}</div>\n\t<div class=\"p-4\">\n\t\t<div\n\t\t\tclass=\"pointer-events-none z-10 flex transform-gpu flex-col gap-1 transition-all duration-300 lg:group-hover:-translate-y-10\"\n\t\t>\n\t\t\t<Icon\n\t\t\t\tclass={cn(\n\t\t\t\t\t\"h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75\",\n\t\t\t\t\ticonClass\n\t\t\t\t)}\n\t\t\t/>\n\t\t\t<h3 class=\"text-xl font-semibold text-neutral-700 dark:text-neutral-300\">\n\t\t\t\t{name}\n\t\t\t</h3>\n\t\t\t<p class=\"max-w-lg text-neutral-400\">{description}</p>\n\t\t</div>\n\t\t<div\n\t\t\tclass={cn(\n\t\t\t\t\"pointer-events-none flex w-full translate-y-0 transform-gpu flex-row items-center transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 lg:hidden\"\n\t\t\t)}\n\t\t>\n\t\t\t<Button variant=\"link\" size=\"sm\" class=\"pointer-events-auto p-0\">\n\t\t\t\t<a {href}>\n\t\t\t\t\t{cta}\n\t\t\t\t\t<ArrowRightIcon class=\"ms-2 h-4 w-4 rtl:rotate-180\" />\n\t\t\t\t</a>\n\t\t\t</Button>\n\t\t</div>\n\t</div>\n\t<div\n\t\tclass={cn(\n\t\t\t\"pointer-events-none absolute bottom-0 hidden w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 lg:flex\"\n\t\t)}\n\t>\n\t\t<Button {href} variant=\"link\" size=\"sm\" class=\"pointer-events-auto p-0\">\n\t\t\t{cta}\n\t\t\t<ArrowRightIcon class=\"ms-2 h-4 w-4 rtl:rotate-180\" />\n\t\t</Button>\n\t</div>\n\t<div\n\t\tclass=\"pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/3 group-hover:dark:bg-neutral-800/10\"\n\t></div>\n</div>\n",
			"type": "registry:component",
			"target": "magic/bento-grid/bento-card.svelte"
		},
		{
			"content": "import BentoCard from \"./bento-card.svelte\";\nimport BentoGrid from \"./bento-grid.svelte\";\nexport { BentoCard, BentoGrid };\n",
			"type": "registry:file",
			"target": "magic/bento-grid/index.ts"
		}
	]
}