{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":[],"description":"A GooeyFilter component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { type ElementType, type ReactNode, useId } from \"react\";\n\nconst DEFAULT_STRENGTH = 8;\nconst DEFAULT_CONTRAST = 18;\nconst CONTRAST_TO_STRENGTH_RATIO = DEFAULT_CONTRAST / DEFAULT_STRENGTH;\nconst MATRIX_ALPHA_OFFSET_RATIO = -0.5;\n\nexport interface GooeyFilterProps {\n  as?: ElementType;\n  children: ReactNode;\n  className?: string;\n  contrast?: number;\n  disabled?: boolean;\n  intensity?: number;\n  strength?: number;\n}\n\n/**\n * Returns a unique, DOM-safe id suitable for referencing an SVG filter via\n * `url(#id)`, generated with React's `useId`.\n */\nexport const useGooeyFilterId = (): string => useId();\n\nexport default function GooeyFilter({\n  as,\n  children,\n  className,\n  contrast,\n  disabled = false,\n  intensity,\n  strength,\n}: GooeyFilterProps) {\n  const filterId = useGooeyFilterId();\n  const Wrapper = as ?? \"div\";\n\n  const resolvedStrength = strength ?? intensity ?? DEFAULT_STRENGTH;\n  const resolvedContrast =\n    contrast ??\n    (intensity === undefined\n      ? DEFAULT_CONTRAST\n      : intensity * CONTRAST_TO_STRENGTH_RATIO);\n\n  if (disabled) {\n    return <Wrapper className={className}>{children}</Wrapper>;\n  }\n\n  return (\n    <>\n      <svg\n        aria-hidden=\"true\"\n        className=\"absolute\"\n        style={{ height: 0, overflow: \"hidden\", width: 0 }}\n      >\n        <defs>\n          <filter id={filterId}>\n            <feGaussianBlur\n              in=\"SourceGraphic\"\n              result=\"blur\"\n              stdDeviation={resolvedStrength}\n            />\n            <feColorMatrix\n              in=\"blur\"\n              result=\"goo\"\n              type=\"matrix\"\n              values={`1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${resolvedContrast} ${resolvedContrast * MATRIX_ALPHA_OFFSET_RATIO}`}\n            />\n            <feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\" />\n          </filter>\n        </defs>\n      </svg>\n      <Wrapper\n        className={cn(className)}\n        style={{ filter: `url(#${filterId})` }}\n      >\n        {children}\n      </Wrapper>\n    </>\n  );\n}\n","path":"index.tsx","target":"components/smoothui/gooey-filter/index.tsx","type":"registry:ui"}],"name":"gooey-filter","registryDependencies":[],"title":"Gooey Filter","type":"registry:ui"}