{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "interactive-card",
  "type": "registry:lib",
  "title": "Interactive Card",
  "description": "Unified wrapper for card components with hover animations and glass effects.\n * Eliminates hover state duplication in MetricCardGlass, YearCardGlass,\n * AICardGlass, RepositoryCardGlass, and other card components.\n *\n * Features:",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [
    "cn",
    "use-hover"
  ],
  "files": [
    {
      "path": "components/glass/primitives/interactive-card.tsx",
      "type": "registry:lib",
      "content": "/**\n * InteractiveCard Component\n *\n * Unified wrapper for card components with hover animations and glass effects.\n * Eliminates hover state duplication in MetricCardGlass, YearCardGlass,\n * AICardGlass, RepositoryCardGlass, and other card components.\n *\n * Features:\n * - Hover lift animation (translateY -2px)\n * - Optional glow effects\n * - Glass surface with backdrop blur\n * - Configurable backgrounds and borders\n */\n\nimport { forwardRef, type HTMLAttributes, type CSSProperties } from 'react';\nimport { cn } from '@/lib/utils';\nimport { useHover } from '@/lib/hooks/use-hover';\n\n/**\n * Props for the InteractiveCard component\n */\nexport interface InteractiveCardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Enable hover lift effect (translateY -2px)\n   * @default true\n   */\n  hoverLift?: boolean;\n\n  /**\n   * CSS variable for hover glow effect\n   * @example 'var(--glow-primary)'\n   */\n  hoverGlow?: string;\n\n  /**\n   * CSS variable for hover background\n   * @example 'var(--card-hover-bg)'\n   */\n  hoverBg?: string;\n\n  /**\n   * CSS variable for base background\n   * @default 'var(--card-bg)'\n   */\n  baseBg?: string;\n\n  /**\n   * CSS variable for border color\n   * @default 'var(--card-border)'\n   */\n  borderColor?: string;\n\n  /**\n   * CSS variable for hover border color\n   */\n  hoverBorderColor?: string;\n\n  /**\n   * Blur level for glass effect\n   * @default 'sm'\n   */\n  blur?: 'sm' | 'md' | 'lg' | 'xl';\n\n  /**\n   * Disable all hover interactions\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Border radius class\n   * @default 'rounded-2xl'\n   */\n  rounded?: 'rounded-xl' | 'rounded-2xl' | 'rounded-3xl';\n\n  /**\n   * Transition speed\n   * @default 'var(--transition-slow)'\n   */\n  transition?: string;\n}\n\n/**\n * InteractiveCard component\n *\n * Provides consistent hover animations and glass effects for card components.\n * Replaces ~80 lines of duplicated hover state management across 4+ components.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <InteractiveCard>\n *   <h3>Card Title</h3>\n *   <p>Card content</p>\n * </InteractiveCard>\n *\n * // With hover effects\n * <InteractiveCard\n *   hoverLift\n *   hoverGlow=\"var(--glow-primary)\"\n *   hoverBg=\"var(--card-hover-bg)\"\n *   hoverBorderColor=\"var(--card-hover-border)\"\n * >\n *   <MetricContent />\n * </InteractiveCard>\n *\n * // Custom blur and rounding\n * <InteractiveCard\n *   blur=\"md\"\n *   rounded=\"rounded-3xl\"\n *   baseBg=\"var(--metric-success-bg)\"\n * >\n *   <StatusCard />\n * </InteractiveCard>\n * ```\n */\nexport const InteractiveCard = forwardRef<HTMLDivElement, InteractiveCardProps>(\n  (\n    {\n      hoverLift = true,\n      hoverGlow,\n      hoverBg,\n      baseBg = 'var(--card-bg)',\n      borderColor = 'var(--card-border)',\n      hoverBorderColor,\n      blur = 'sm',\n      disabled = false,\n      rounded = 'rounded-2xl',\n      transition = 'var(--transition-slow)',\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { isHovered, hoverProps } = useHover({ includeFocus: !disabled });\n\n    const cardStyles: CSSProperties = {\n      // Background\n      background: isHovered && hoverBg ? hoverBg : baseBg,\n\n      // Border\n      border: `1px solid ${isHovered && hoverBorderColor ? hoverBorderColor : borderColor}`,\n\n      // Glassmorphism\n      backdropFilter: `blur(var(--blur-${blur}))`,\n      WebkitBackdropFilter: `blur(var(--blur-${blur}))`,\n\n      // Hover transform\n      transform: hoverLift && isHovered && !disabled ? 'translateY(-2px)' : 'translateY(0)',\n\n      // Glow effect\n      boxShadow: isHovered && hoverGlow && !disabled ? hoverGlow : 'none',\n\n      // Transition\n      transition: `all ${transition}`,\n\n      // User styles override\n      ...style,\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(rounded, className)}\n        style={cardStyles}\n        {...(disabled ? {} : hoverProps)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nInteractiveCard.displayName = 'InteractiveCard';\n"
    }
  ],
  "categories": [
    "primitives"
  ]
}