{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grid",
  "type": "registry:ui",
  "title": "Bento Grid",
  "description": "A responsive grid layout for showcasing features in varied card sizes with optional tilt effects.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": ["@scrollxui/card-tilt"],
  "dependencies": ["motion", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/bento-grid.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport { CardTilt, CardTiltContent } from '@/components/ui/card-tilt';\n\nconst BentoGrid = ({\n  className,\n  children,\n}: {\n  className?: string;\n  children?: React.ReactNode;\n}) => (\n  <div\n    className={cn(\n      'mx-auto grid max-w-7xl grid-cols-1 gap-4 md:auto-rows-[18rem] md:grid-cols-3',\n      className,\n    )}\n  >\n    {children}\n  </div>\n);\n\nconst BentoGridItem = ({\n  className,\n  containerClassName,\n  title,\n  description,\n  header,\n  icon,\n  disableTilt = false,\n}: {\n  className?: string;\n  containerClassName?: string;\n  title?: string | React.ReactNode;\n  description?: string | React.ReactNode;\n  header?: React.ReactNode;\n  icon?: React.ReactNode;\n  disableTilt?: boolean;\n}) => {\n  const inner = (\n    <div\n      className={cn(\n        'group/bento shadow-input flex flex-col justify-between space-y-4 rounded-xl border border-neutral-200 bg-white p-4 transition duration-200 hover:shadow-xl dark:border-white/20 dark:bg-black dark:shadow-none w-full h-full',\n        className,\n      )}\n    >\n      {header}\n      <div className='transition duration-300 group-hover/bento:-translate-y-1'>\n        {icon}\n        <div className='mt-2 mb-2 font-sans font-bold text-neutral-600 dark:text-neutral-200'>\n          {title}\n        </div>\n        <div className='font-sans text-xs font-normal text-neutral-600 dark:text-neutral-300'>\n          {description}\n        </div>\n      </div>\n    </div>\n  );\n\n  if (disableTilt) {\n    return (\n      <div className={cn('w-full h-full', containerClassName)}>{inner}</div>\n    );\n  }\n\n  return (\n    <CardTilt\n      className={cn('w-full h-full', containerClassName)}\n      tiltMaxAngle={12}\n      scale={1.03}\n    >\n      <CardTiltContent className='w-full h-full'>{inner}</CardTiltContent>\n    </CardTilt>\n  );\n};\n\nexport { BentoGrid, BentoGridItem };"
    },
    {
      "type": "registry:ui",
      "path": "components/ui/card-tilt.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  motion,\n  useMotionValue,\n  useSpring,\n  useTransform,\n  MotionValue,\n} from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface CardTiltProps {\n  children: React.ReactNode;\n  className?: string;\n  tiltMaxAngle?: number;\n  tiltReverse?: boolean;\n  glareEnable?: boolean;\n  scale?: number;\n}\n\ninterface CardTiltContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst CardTiltContext = React.createContext<{\n  rotateX: MotionValue<number>;\n  rotateY: MotionValue<number>;\n  scale: MotionValue<number>;\n} | null>(null);\n\nconst CardTilt = React.forwardRef<HTMLDivElement, CardTiltProps>(\n  (\n    {\n      children,\n      className,\n      tiltMaxAngle = 15,\n      tiltReverse = false,\n      scale = 1.05,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const x = useMotionValue(0);\n    const y = useMotionValue(0);\n\n    const mouseXSpring = useSpring(x, { stiffness: 300, damping: 30 });\n    const mouseYSpring = useSpring(y, { stiffness: 300, damping: 30 });\n\n    const rotateX = useTransform(\n      mouseYSpring,\n      [-0.5, 0.5],\n      tiltReverse\n        ? [tiltMaxAngle, -tiltMaxAngle]\n        : [-tiltMaxAngle, tiltMaxAngle],\n    );\n    const rotateY = useTransform(\n      mouseXSpring,\n      [-0.5, 0.5],\n      tiltReverse\n        ? [-tiltMaxAngle, tiltMaxAngle]\n        : [tiltMaxAngle, -tiltMaxAngle],\n    );\n\n    const scaleValue = useSpring(1, { stiffness: 300, damping: 30 });\n\n    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      const width = rect.width;\n      const height = rect.height;\n      const mouseX = e.clientX - rect.left;\n      const mouseY = e.clientY - rect.top;\n      const xPct = mouseX / width - 0.5;\n      const yPct = mouseY / height - 0.5;\n\n      x.set(xPct);\n      y.set(yPct);\n      scaleValue.set(scale);\n    };\n\n    const handleMouseLeave = () => {\n      x.set(0);\n      y.set(0);\n      scaleValue.set(1);\n    };\n\n    React.useImperativeHandle(forwardedRef, () => containerRef.current!);\n\n    return (\n      <CardTiltContext.Provider value={{ rotateX, rotateY, scale: scaleValue }}>\n        <div\n          ref={containerRef}\n          onMouseMove={handleMouseMove}\n          onMouseLeave={handleMouseLeave}\n          className={cn('relative inline-block', className)}\n          style={{ perspective: '1000px' }}\n          {...props}\n        >\n          <div className='absolute inset-0 rounded-2xl border-2 border-dashed border-slate-300' />\n          {children}\n        </div>\n      </CardTiltContext.Provider>\n    );\n  },\n);\nCardTilt.displayName = 'CardTilt';\n\nconst CardTiltContent = React.forwardRef<HTMLDivElement, CardTiltContentProps>(\n  ({ children, className, ...props }, ref) => {\n    const context = React.useContext(CardTiltContext);\n\n    if (!context) {\n      throw new Error('CardTiltContent must be used within CardTilt');\n    }\n\n    const { rotateX, rotateY, scale } = context;\n\n    return (\n      <motion.div\n        ref={ref}\n        style={{\n          rotateX,\n          rotateY,\n          scale,\n          transformStyle: 'preserve-3d',\n        }}\n        className={cn('relative', className)}\n        {...props}\n      >\n        {children}\n      </motion.div>\n    );\n  },\n);\nCardTiltContent.displayName = 'CardTiltContent';\n\nexport { CardTilt, CardTiltContent };\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}