{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blur-vignette-img",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/blurvignette/blurvignetteimg.tsx",
      "content": "import { BlurVignette, BlurVignetteArticle } from '@/components/ui/blur-vignette';\nimport { cn } from '@/lib/utils';\nimport Image from 'next/image';\nimport React from 'react';\n\nfunction Blurvignetteimg() {\n  return (\n    <>\n      <div className='w-fit mx-auto sm:flex gap-2 justify-center md:p-8 sm:p-4'>\n        <BlurVignette radius='24px' inset='10px' transitionLength='80px' blur='15px'>\n          <Image\n            src='https://img.freepik.com/free-photo/african-kid-enjoying-life_23-2151447718.jpg'\n            alt='grid'\n            width={600}\n            className='mx-auto w-full relative h-full object-cover'\n            height={600}\n          />\n          <BlurVignetteArticle />\n        </BlurVignette>\n        <BlurVignette radius='24px' inset='10px' transitionLength='80px' blur='15px'>\n          <Image\n            src='https://img.freepik.com/free-photo/portrait-middle-aged-man-taking-photos-with-device-world-photography-day_23-2151672359.jpg'\n            alt='grid'\n            width={600}\n            className='mx-auto w-full relative h-full object-cover'\n            height={600}\n          />\n          <BlurVignetteArticle />\n        </BlurVignette>\n      </div>\n    </>\n  );\n}\n\nexport default Blurvignetteimg;\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/blur-vignette.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport type React from 'react';\nimport { createContext, useContext } from 'react';\n\ninterface BlurVignetteContextProps {\n  radius?: string;\n  inset?: string;\n  transitionLength?: string;\n  blur?: string;\n}\n\nconst BlurVignetteContext = createContext<BlurVignetteContextProps>({\n  radius: '24px',\n  inset: '20px',\n  transitionLength: '44px',\n  blur: '6px',\n});\n\nexport const useBlurVignetteContext = () => useContext(BlurVignetteContext);\n\ninterface BlurVignetteProps {\n  classname?: string;\n  children: React.ReactNode;\n  radius?: string;\n  inset?: string;\n  transitionLength?: string;\n  blur?: string;\n  blurclassname?: string;\n}\n\nexport const BlurVignette: React.FC<BlurVignetteProps> = ({\n  classname,\n  children,\n  radius = '24px',\n  inset = '20px',\n  transitionLength = '44px',\n  blur = '6px',\n}) => {\n  return (\n    <BlurVignetteContext.Provider value={{ radius, inset, transitionLength, blur }}>\n      <div\n        className={cn('relative aspect-square overflow-hidden', classname)}\n        style={{ borderRadius: radius }}\n      >\n        {children}\n      </div>\n    </BlurVignetteContext.Provider>\n  );\n};\ninterface BlurVignetteArticleProps {\n  children?: React.ReactNode;\n  classname?: string;\n}\n\nexport const BlurVignetteArticle: React.FC<BlurVignetteArticleProps> = ({\n  children,\n  classname,\n}) => {\n  const { radius, inset, transitionLength, blur } = useBlurVignetteContext();\n\n  return (\n    <div\n      className={cn('blur-vignette bottom-0 left-0 w-full h-full z-1', classname)}\n      style={\n        {\n          '--radius': radius,\n          '--inset': inset,\n          '--transition-length': transitionLength,\n          '--blur': blur,\n        } as React.CSSProperties\n      }\n    >\n      {children}\n    </div>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}