{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-fade-effect",
  "files": [
    {
      "path": "components/ui/scroll-fade-effect.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface ScrollFadeEffectProps\n  extends React.ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The orientation of the scroll container.\n   * @default \"vertical\"\n   */\n  orientation?: \"horizontal\" | \"vertical\"\n  /**\n   * Controls the fade size in pixels.\n   * Higher values create a more prominent fade effect.\n   * @default 64\n   */\n  intensity?: number\n}\n\nexport function ScrollFadeEffect({\n  className,\n  orientation = \"vertical\",\n  intensity = 64,\n  style,\n  children,\n  ...props\n}: ScrollFadeEffectProps) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const [isScrollable, setIsScrollable] = React.useState(false)\n\n  React.useEffect(() => {\n    const element = ref.current\n    if (!element) return\n\n    const checkScrollable = () => {\n      if (orientation === \"vertical\") {\n        setIsScrollable(element.scrollHeight > element.clientHeight)\n      } else {\n        setIsScrollable(element.scrollWidth > element.clientWidth)\n      }\n    }\n\n    checkScrollable()\n\n    const resizeObserver = new ResizeObserver(checkScrollable)\n    resizeObserver.observe(element)\n\n    // Also observe content changes\n    const mutationObserver = new MutationObserver(checkScrollable)\n    mutationObserver.observe(element, { childList: true, subtree: true })\n\n    return () => {\n      resizeObserver.disconnect()\n      mutationObserver.disconnect()\n    }\n  }, [orientation])\n\n  const fadeSize = `${Math.max(intensity, 0)}px`\n\n  return (\n    <div\n      ref={ref}\n      data-orientation={orientation}\n      data-scrollable={isScrollable}\n      className={cn(\n        \"data-[orientation=horizontal]:overflow-x-auto data-[orientation=vertical]:overflow-y-auto\",\n        \"data-[scrollable=true]:data-[orientation=horizontal]:scroll-fade-effect-x data-[scrollable=true]:data-[orientation=vertical]:scroll-fade-effect-y\",\n        className\n      )}\n      style={\n        {\n          \"--mask-height\": fadeSize,\n          \"--mask-width\": fadeSize,\n          \"--bottom-mask-height\": fadeSize,\n          \"--right-mask-width\": fadeSize,\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}