{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "filters",
  "registryDependencies": [
    "https://powui.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/filters.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef, type PropsWithChildren } from \"react\";\n\nlet filterId = 0;\nconst useCreateFilterId = () => {\n  const mounted = useRef(false);\n  const id = useRef(filterId);\n  if (!mounted.current) {\n    filterId += 1;\n  }\n  useEffect(() => {\n    mounted.current = true;\n  }, []);\n  return `pow-filter-${id.current}`;\n};\n\nconst SVGWithFilterDefs = (\n  props: PropsWithChildren<{\n    filterBody: React.ReactNode;\n    className?: string;\n    containerClassName?: string;\n  }>,\n) => {\n  const {\n    children,\n    filterBody,\n    className = \"\",\n    containerClassName = \"\",\n  } = props;\n  const filterId = useCreateFilterId();\n  return (\n    <div className={containerClassName}>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"hidden\">\n        <defs>\n          <filter id={filterId}>{filterBody}</filter>\n        </defs>\n      </svg>\n      <div className={className} style={{ filter: `url(#${filterId})` }}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst Displacement = (\n  props: PropsWithChildren<{\n    scale?: number;\n    frequency?: number;\n    className?: string;\n    containerClassName?: string;\n  }>,\n) => {\n  const {\n    scale = 2,\n    className = \"\",\n    containerClassName = \"\",\n    frequency = 0.1,\n    children,\n  } = props;\n  return (\n    <SVGWithFilterDefs\n      className={className}\n      containerClassName={containerClassName}\n      filterBody={\n        <>\n          <feTurbulence\n            type=\"fractalNoise\"\n            baseFrequency={frequency}\n            numOctaves=\"2\"\n            result=\"noise\"\n          />\n          <feDisplacementMap\n            in=\"SourceGraphic\"\n            in2=\"noise\"\n            scale={scale}\n            xChannelSelector=\"R\"\n            yChannelSelector=\"G\"\n          />\n        </>\n      }\n    >\n      {children}\n    </SVGWithFilterDefs>\n  );\n};\n\nconst ChromaAberr = (\n  props: PropsWithChildren<{\n    offset?: number;\n    className?: string;\n    containerClassName?: string;\n  }>,\n) => {\n  const {\n    offset = 0.7,\n    className = \"\",\n    containerClassName = \"\",\n    children,\n  } = props;\n  return (\n    <SVGWithFilterDefs\n      className={className}\n      containerClassName={containerClassName}\n      filterBody={\n        <>\n          <feComponentTransfer in=\"SourceGraphic\">\n            <feFuncR type=\"identity\" />\n            <feFuncG type=\"table\" tableValues=\"0\" />\n            <feFuncB type=\"table\" tableValues=\"0\" />\n          </feComponentTransfer>\n          <feOffset dx={-offset} dy={offset} result=\"redChannel\" />\n\n          <feComponentTransfer in=\"SourceGraphic\">\n            <feFuncR type=\"table\" tableValues=\"0\" />\n            <feFuncG type=\"identity\" />\n            <feFuncB type=\"table\" tableValues=\"0\" />\n          </feComponentTransfer>\n          <feOffset dx={offset} dy={-offset} result=\"greenChannel\" />\n\n          <feComponentTransfer in=\"SourceGraphic\">\n            <feFuncR type=\"table\" tableValues=\"0\" />\n            <feFuncG type=\"table\" tableValues=\"0\" />\n            <feFuncB type=\"identity\" />\n          </feComponentTransfer>\n          <feOffset dx={2 * offset} dy={-2 * offset} result=\"blueChannel\" />\n\n          <feBlend in=\"redChannel\" mode=\"lighten\" />\n          <feBlend in=\"greenChannel\" mode=\"lighten\" />\n          <feBlend in=\"blueChannel\" mode=\"lighten\" />\n        </>\n      }\n    >\n      {children}\n    </SVGWithFilterDefs>\n  );\n};\n\nconst Posterize = (\n  props: PropsWithChildren<{\n    className?: string;\n    containerClassName?: string;\n    buckets?: number;\n  }>,\n) => {\n  const {\n    buckets = 5,\n    className = \"\",\n    containerClassName = \"\",\n    children,\n  } = props;\n  const range = Array.from(\n    { length: buckets },\n    (_, idx) => idx / (buckets - 1),\n  ).join(\" \");\n\n  return (\n    <SVGWithFilterDefs\n      className={className}\n      containerClassName={containerClassName}\n      filterBody={\n        <feComponentTransfer>\n          <feFuncR type=\"discrete\" tableValues={range} />\n          <feFuncG type=\"discrete\" tableValues={range} />\n          <feFuncB type=\"discrete\" tableValues={range} />\n        </feComponentTransfer>\n      }\n    >\n      {children}\n    </SVGWithFilterDefs>\n  );\n};\n\nexport const Filters = {\n  Displacement,\n  ChromaAberr,\n  Posterize,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}