{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-card",
  "title": "Spotlight Card",
  "author": "WebberUI",
  "description": "游標聚光燈卡片：邊框光暈與更淡的背景泛光同步跟隨游標，滑出時淡出，多卡並排各自獨立。",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/webber/spotlight-card.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SpotlightCardProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  /** 光暈顏色，接受任何合法 CSS 色值；預設淺色模式為中性深灰、深色模式為白色 */\n  spotlightColor?: string;\n  /** 光暈半徑（px） */\n  radius?: number;\n  /** 卡片內容 */\n  children?: React.ReactNode;\n  /** 附加到最外層容器的 class */\n  className?: string;\n}\n\nexport function SpotlightCard({\n  spotlightColor,\n  radius = 320,\n  className,\n  children,\n  style,\n  onMouseMove,\n  onMouseEnter,\n  onMouseLeave,\n  ...props\n}: SpotlightCardProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  // mousemove 直接把座標寫進 CSS 變數，不經 React state，高頻移動也不觸發 re-render\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseMove?.(event);\n    const el = ref.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    el.style.setProperty(\"--wb-spot-x\", `${event.clientX - rect.left}px`);\n    el.style.setProperty(\"--wb-spot-y\", `${event.clientY - rect.top}px`);\n  };\n\n  const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseEnter?.(event);\n    ref.current?.style.setProperty(\"--wb-spot-opacity\", \"1\");\n  };\n\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseLeave?.(event);\n    ref.current?.style.setProperty(\"--wb-spot-opacity\", \"0\");\n  };\n\n  const rootStyle = {\n    \"--wb-spot-radius\": `${radius}px`,\n    // 未指定時交給 class 的 light/dark 預設；有指定則以 inline style 覆蓋\n    ...(spotlightColor ? { \"--wb-spot-color\": spotlightColor } : null),\n    ...style,\n  } as React.CSSProperties;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        // 外層 1px padding 容器：中性底色即靜態邊框，內層卡片蓋住中央、露出 1px 環\n        \"relative rounded-xl bg-neutral-200 p-px dark:bg-neutral-800\",\n        \"[--wb-spot-color:rgba(23,23,23,0.35)] dark:[--wb-spot-color:rgba(255,255,255,0.5)]\",\n        \"[--wb-spot-opacity:0] [--wb-spot-x:50%] [--wb-spot-y:50%]\",\n        className\n      )}\n      style={rootStyle}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n    >\n      {/* 邊框光暈：跟隨游標的 radial-gradient，只在 1px 環露出 */}\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0 rounded-[inherit] transition-opacity duration-[var(--wb-duration-fast,200ms)] ease-[var(--wb-ease-out,ease-out)]\"\n        style={{\n          opacity: \"var(--wb-spot-opacity)\",\n          background:\n            \"radial-gradient(var(--wb-spot-radius) circle at var(--wb-spot-x) var(--wb-spot-y), var(--wb-spot-color), transparent 70%)\",\n        }}\n      />\n      <div className=\"relative h-full overflow-hidden rounded-[calc(0.75rem-1px)] bg-white p-6 dark:bg-neutral-900\">\n        {/* 背景光暈：同一組座標變數，半徑放大 1.75 倍、透明度減半，形成更淡的大範圍泛光 */}\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 transition-opacity duration-[var(--wb-duration-fast,200ms)] ease-[var(--wb-ease-out,ease-out)]\"\n          style={{\n            opacity: \"calc(var(--wb-spot-opacity) * 0.5)\",\n            background:\n              \"radial-gradient(calc(var(--wb-spot-radius) * 1.75) circle at var(--wb-spot-x) var(--wb-spot-y), var(--wb-spot-color), transparent 70%)\",\n          }}\n        />\n        <div className=\"relative\">{children}</div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "light": {
      "wb-duration-fast": "200ms"
    }
  },
  "categories": [
    "card"
  ],
  "type": "registry:ui"
}