{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "x-scrollable",
  "files": [
    {
      "path": "components/ui/x-scrollable.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface XScrollableProps {\n  children: ReactNode\n  className?: string\n  showScrollbar?: boolean\n  scrollbarTrackClassName?: string\n  scrollbarThumbClassName?: string\n  onScroll?: (\n    scrollLeft: number,\n    scrollWidth: number,\n    clientWidth: number\n  ) => void\n}\n\nexport function XScrollable({\n  children,\n  className,\n  showScrollbar = false,\n  scrollbarTrackClassName,\n  scrollbarThumbClassName,\n  onScroll,\n}: XScrollableProps) {\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const [showLeftShadow, setShowLeftShadow] = useState(false)\n  const [showRightShadow, setShowRightShadow] = useState(false)\n\n  useEffect(() => {\n    const scrollContainer = scrollContainerRef.current\n    if (!scrollContainer) return\n\n    const handleScroll = () => {\n      const { scrollLeft, scrollWidth, clientWidth } = scrollContainer\n      setShowLeftShadow(scrollLeft > 0)\n      setShowRightShadow(scrollLeft < scrollWidth - clientWidth)\n      onScroll?.(scrollLeft, scrollWidth, clientWidth)\n    }\n\n    handleScroll() // Initial check\n    scrollContainer.addEventListener(\"scroll\", handleScroll)\n\n    return () => {\n      scrollContainer.removeEventListener(\"scroll\", handleScroll)\n    }\n  }, [onScroll])\n\n  return (\n    <div className=\"relative\">\n      <div\n        ref={scrollContainerRef}\n        className={cn(\n          \"overflow-x-auto overflow-y-hidden\",\n          showScrollbar\n            ? \"scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-300 hover:scrollbar-thumb-gray-400\"\n            : \"scrollbar-hide\",\n          className\n        )}\n      >\n        {children}\n      </div>\n      {showLeftShadow && (\n        <div className=\"from-background pointer-events-none absolute top-0 bottom-0 left-0 w-8 bg-gradient-to-r to-transparent\" />\n      )}\n      {showRightShadow && (\n        <div className=\"from-background pointer-events-none absolute top-0 right-0 bottom-0 w-8 bg-gradient-to-l to-transparent\" />\n      )}\n      {showScrollbar && (\n        <div\n          className={cn(\n            \"mt-1 h-1 rounded-full bg-gray-200\",\n            scrollbarTrackClassName\n          )}\n        >\n          <div\n            className={cn(\n              \"h-full rounded-full bg-gray-400\",\n              scrollbarThumbClassName\n            )}\n            style={{\n              width: scrollContainerRef.current\n                ? `${(scrollContainerRef.current.clientWidth / scrollContainerRef.current.scrollWidth) * 100}%`\n                : \"0%\",\n              transform: scrollContainerRef.current\n                ? `translateX(${(scrollContainerRef.current.scrollLeft / scrollContainerRef.current.clientWidth) * 100}%)`\n                : \"translateX(0%)\",\n            }}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}