{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento",
  "type": "registry:block",
  "title": "Bento",
  "description": "Bento",
  "files": [
    {
      "path": "components/usages/bentousage.tsx",
      "content": "import React from \"react\";\n\nimport { BentoGrid, BentoGridItem } from \"@/registry/open-source/bento\";\nimport {\n\tIconArrowWaveRightUp,\n\tIconBoxAlignRightFilled,\n\tIconBoxAlignTopLeft,\n\tIconClipboardCopy,\n\tIconFileBroken,\n\tIconSignature,\n\tIconTableColumn,\n} from \"@tabler/icons-react\";\n\nexport default function Usage() {\n\treturn (\n\t\t<BentoGrid className=\"max-w-4xl mx-auto\">\n\t\t\t{items.map((item, i) => (\n\t\t\t\t<BentoGridItem\n\t\t\t\t\tkey={i + \"bento\"}\n\t\t\t\t\ttitle={item.title}\n\t\t\t\t\tdescription={item.description}\n\t\t\t\t\theader={item.header}\n\t\t\t\t\ticon={item.icon}\n\t\t\t\t\tclassName={i === 3 || i === 6 ? \"md:col-span-2\" : \"\"}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</BentoGrid>\n\t);\n}\nconst Skeleton = () => (\n\t<div className=\"flex flex-1 w-full h-full min-h-24 rounded-xl bg-linear-to-br from-background dark:from-background dark:to-background to-background\"></div>\n);\nconst items = [\n\t{\n\t\ttitle: \"The Dawn of Innovation\",\n\t\tdescription: \"Explore the birth of groundbreaking ideas and inventions.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconClipboardCopy className=\"h-4 w-4 text-secondary\" />,\n\t},\n\t{\n\t\ttitle: \"The Digital Revolution\",\n\t\tdescription: \"Dive into the transformative power of technology.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconFileBroken className=\"h-4 w-4 text-secondary\" />,\n\t},\n\t{\n\t\ttitle: \"The Art of Design\",\n\t\tdescription: \"Discover the beauty of thoughtful and functional design.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconSignature className=\"h-4 w-4 text-secondary\" />,\n\t},\n\t{\n\t\ttitle: \"The Power of Communication\",\n\t\tdescription:\n\t\t\t\"Understand the impact of effective communication in our lives.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconTableColumn className=\"h-4 w-4 text-secondary\" />,\n\t},\n\t{\n\t\ttitle: \"The Pursuit of Knowledge\",\n\t\tdescription: \"Join the quest for understanding and enlightenment.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconArrowWaveRightUp className=\"h-4 w-4 text-secondary\" />,\n\t},\n\t{\n\t\ttitle: \"The Joy of Creation\",\n\t\tdescription: \"Experience the thrill of bringing ideas to life.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconBoxAlignTopLeft className=\"h-4 w-4 text-secondary\" />,\n\t},\n\t{\n\t\ttitle: \"The Spirit of Adventure\",\n\t\tdescription: \"Embark on exciting journeys and thrilling discoveries.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconBoxAlignRightFilled className=\"h-4 w-4 text-secondary\" />,\n\t},\n];\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/bentousage.tsx",
      "content": "import React from \"react\";\n\nimport { BentoGrid, BentoGridItem } from \"@/registry/open-source/bento\";\nimport {\n\tIconArrowWaveRightUp,\n\tIconBoxAlignRightFilled,\n\tIconBoxAlignTopLeft,\n\tIconClipboardCopy,\n\tIconFileBroken,\n\tIconSignature,\n\tIconTableColumn,\n} from \"@tabler/icons-react\";\n\nexport default function Usage() {\n\treturn (\n\t\t<BentoGrid className=\"max-w-4xl mx-auto\">\n\t\t\t{items.map((item, i) => (\n\t\t\t\t<BentoGridItem\n\t\t\t\t\tkey={i + \"bento\"}\n\t\t\t\t\ttitle={item.title}\n\t\t\t\t\tdescription={item.description}\n\t\t\t\t\theader={item.header}\n\t\t\t\t\ticon={item.icon}\n\t\t\t\t\tclassName={i === 3 || i === 6 ? \"md:col-span-2\" : \"\"}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</BentoGrid>\n\t);\n}\nconst Skeleton = () => (\n\t<div className=\"flex flex-1 w-full h-full min-h-24 rounded-xl bg-linear-to-br from-background dark:from-background dark:to-background to-background\"></div>\n);\nconst items = [\n\t{\n\t\ttitle: \"The Dawn of Innovation\",\n\t\tdescription: \"Explore the birth of groundbreaking ideas and inventions.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconClipboardCopy className=\"h-4 w-4 text-secondary\" />,\n\t},\n\t{\n\t\ttitle: \"The Digital Revolution\",\n\t\tdescription: \"Dive into the transformative power of technology.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconFileBroken className=\"h-4 w-4 text-secondary\" />,\n\t},\n\t{\n\t\ttitle: \"The Art of Design\",\n\t\tdescription: \"Discover the beauty of thoughtful and functional design.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconSignature className=\"h-4 w-4 text-secondary\" />,\n\t},\n\t{\n\t\ttitle: \"The Power of Communication\",\n\t\tdescription:\n\t\t\t\"Understand the impact of effective communication in our lives.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconTableColumn className=\"h-4 w-4 text-secondary\" />,\n\t},\n\t{\n\t\ttitle: \"The Pursuit of Knowledge\",\n\t\tdescription: \"Join the quest for understanding and enlightenment.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconArrowWaveRightUp className=\"h-4 w-4 text-secondary\" />,\n\t},\n\t{\n\t\ttitle: \"The Joy of Creation\",\n\t\tdescription: \"Experience the thrill of bringing ideas to life.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconBoxAlignTopLeft className=\"h-4 w-4 text-secondary\" />,\n\t},\n\t{\n\t\ttitle: \"The Spirit of Adventure\",\n\t\tdescription: \"Embark on exciting journeys and thrilling discoveries.\",\n\t\theader: <Skeleton />,\n\t\ticon: <IconBoxAlignRightFilled className=\"h-4 w-4 text-secondary\" />,\n\t},\n];\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/bento.tsx",
      "content": "import React, { ReactNode } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/registry/utilities/cn\";\n\nimport \"lazysizes\";\n\nimport Link from \"next/link\";\n\nimport FuzzyOverlay from \"./fuzzy-overlay\";\n\n// https://ui.aceternity.com/components/bento-grid\n\nexport const BentoGrid = ({\n\tclassName,\n\tchildren,\n}: {\n\tclassName?: string;\n\tchildren?: React.ReactNode;\n}) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"grid grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto \",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nexport const BentoGridItem = ({\n\tclassName,\n\ttitle,\n\tdescription,\n\theader,\n\tsrcset,\n\ticon,\n\thref,\n}: {\n\tclassName?: string;\n\ttitle?: string | React.ReactNode;\n\tdescription?: string | React.ReactNode;\n\theader?: React.ReactNode;\n\tsrcset?: string;\n\ticon?: React.ReactNode;\n}) => {\n\treturn (\n\t\t<Link\n\t\t\tclassName={cn(\n\t\t\t\t\"row-span-1 rounded-xl max-h-[85vh] group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-background dark:border-white/20 bg-background border border-transparent justify-between flex flex-col space-y-4\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\thref={href || \"\"}\n\t\t>\n\t\t\t<img\n\t\t\t\tsrc={\"/itjustworks.jpg\"}\n\t\t\t\tsrcSet={srcset}\n\t\t\t\tclassName=\"lazyload h-full w-full object-cover\"\n\t\t\t\talt=\"image with artdirection\"\n\t\t\t/>\n\n\t\t\t<div className=\"group-hover/bento:translate-x-2 transition duration-200\">\n\t\t\t\t{icon}\n\t\t\t\t<div className=\"font-sans font-bold text-foreground dark:text-foreground mb-2 mt-2\">\n\t\t\t\t\t{title}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"font-sans font-normal text-foreground text-xs dark:text-foreground\">\n\t\t\t\t\t{description}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Link>\n\t);\n};\n\nconst BentoGridFullBackground = ({\n\tchildren,\n\tclassName,\n}: {\n\tchildren: ReactNode;\n\tclassName?: string;\n}) => {\n\treturn (\n\t\t<div className={cn(\"grid w-full grid-cols-3 gap-4\", className)}>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nconst BentoCard = ({\n\tname,\n\tclassName,\n\tbackground,\n\tIcon,\n\tdescription,\n\thref,\n\tcta,\n\toverlay = false,\n\tuuid,\n\thoverDarken = true,\n}: {\n\tname?: string;\n\tclassName: string;\n\tbackground: ReactNode;\n\tIcon: any;\n\tdescription: string;\n\thref: string;\n\tcta: string;\n\toverlay?: boolean;\n\tuuid?: string;\n\thoverDarken?: boolean;\n}) => (\n\t<div\n\t\tkey={name || uuid}\n\t\tclassName={cn(\n\t\t\t\"group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl\",\n\t\t\t// light styles\n\t\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\t// dark styles\n\t\t\t\"transform-gpu dark:bg-slate-950 dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]\",\n\t\t\tclassName\n\t\t)}\n\t>\n\t\t<div className=\"h-full\">{background}</div>\n\t\t{overlay && (\n\t\t\t<FuzzyOverlay className=\"hidden group-hover:block group-hover:opacity-30\" />\n\t\t)}\n\n\t\t{(name || description) && (\n\t\t\t<div className=\"pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-transform duration-300 group-hover:-translate-y-10\">\n\t\t\t\t{name && (\n\t\t\t\t\t<h3 className=\"text-xl font-semibold text-foreground dark:text-foreground drop-shadow-[0_1px_2px_rgb(0,0,0,0.8)]\">\n\t\t\t\t\t\t{name}\n\t\t\t\t\t</h3>\n\t\t\t\t)}\n\t\t\t\t{description && (\n\t\t\t\t\t<p className=\"max-w-lg text-foreground drop-shadow-[0_1px_2px_rgb(0,0,0,0.5)]\">\n\t\t\t\t\t\t{description}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t)}\n\n\t\t{href && (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-[transform,opacity] duration-300 group-hover:translate-y-0 group-hover:opacity-100\"\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\tasChild\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\tclassName=\"pointer-events-auto group/svg\"\n\t\t\t\t>\n\t\t\t\t\t<a href={href}>\n\t\t\t\t\t\t{cta}\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\twidth=\"36\"\n\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\tviewBox=\"0 0 36 12\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tclassName=\" ml-3\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M0.75 6H11.25 M6 0.75L11.25 6L6 11.25\"\n\t\t\t\t\t\t\t\tstroke=\"teal\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\tclassName=\"opacity-0 group-hover/svg:opacity-100\"\n\t\t\t\t\t\t\t\tstyle={{ transition: \"opacity 1000ms ease 50ms\" }}\n\t\t\t\t\t\t\t></path>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M15 10L19.5 5.5L15 1\"\n\t\t\t\t\t\t\t\tstroke=\"teal\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\tclassName=\"opacity-0 group-hover/svg:opacity-100\"\n\t\t\t\t\t\t\t\tstyle={{ transition: \"opacity 1000ms ease 125ms\" }}\n\t\t\t\t\t\t\t></path>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M23 10L27.5 5.5L23 1\"\n\t\t\t\t\t\t\t\tstroke=\"teal\"\n\t\t\t\t\t\t\t\tstrokeOpacity=\"0.66\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\tclassName=\" opacity-0 group-hover/svg:opacity-100\"\n\t\t\t\t\t\t\t\tstyle={{ transition: \"opacity 1000ms ease 250ms\" }}\n\t\t\t\t\t\t\t></path>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M31 10L35.5 5.5L31 1\"\n\t\t\t\t\t\t\t\tstroke=\"teal\"\n\t\t\t\t\t\t\t\tstrokeOpacity=\"0.35\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\tclassName=\"opacity-0 group-hover/svg:opacity-100\"\n\t\t\t\t\t\t\t\tstyle={{ transition: \"opacity 1000ms ease 375ms\" }}\n\t\t\t\t\t\t\t></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</a>\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t)}\n\t\t{hoverDarken && (\n\t\t\t<div className=\"pointer-events-none absolute inset-0 transform-gpu transition-[background-color] duration-300 group-hover:bg-background/3 dark:group-hover:bg-background/10\" />\n\t\t)}\n\t</div>\n);\n\nexport { BentoCard, BentoGridFullBackground };\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50  border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200  rounded-md px-4 py-2  flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\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},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n\t\tVariantProps<typeof buttonVariants> {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp\r\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/fuzzy-overlay.tsx",
      "content": "import React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { motion } from \"motion/react\";\r\n\r\nconst FuzzyOverlay = ({ className }: { className?: string }) => {\r\n\treturn (\r\n\t\t<motion.div\r\n\t\t\tinitial={{ transform: \"translateX(-10%) translateY(-10%)\" }}\r\n\t\t\tanimate={{\r\n\t\t\t\ttransform: \"translateX(10%) translateY(10%)\",\r\n\t\t\t}}\r\n\t\t\ttransition={{\r\n\t\t\t\trepeat: Infinity,\r\n\t\t\t\tduration: 0.2,\r\n\t\t\t\tease: \"linear\",\r\n\t\t\t\trepeatType: \"mirror\",\r\n\t\t\t}}\r\n\t\t\t// You can download these PNGs here:\r\n\t\t\t// https://www.hover.dev/black-noise.png\r\n\t\t\t// https://www.hover.dev/noise.png\r\n\t\t\tstyle={{\r\n\t\t\t\tbackgroundImage: 'url(\"/dist/local/black-noise.png\")',\r\n\t\t\t\t// backgroundImage: 'url(\"local/noise.png\")',\r\n\t\t\t}}\r\n\t\t\tclassName={cn(\r\n\t\t\t\t\"pointer-events-none absolute -inset-full opacity-0\",\r\n\t\t\t\tclassName\r\n\t\t\t)}\r\n\t\t/>\r\n\t);\r\n};\r\n\r\nexport default FuzzyOverlay;\r\n",
      "type": "registry:ui"
    }
  ]
}