{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "line-hover-link",
  "type": "registry:ui",
  "dependencies": [],
  "files": [
    {
      "path": "components/ui/line-hover-link.tsx",
      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n/**\r\n * Line Hover Link Variants\r\n * \r\n * slide    - Line slides in from right to left\r\n * double   - Two lines animate with different timings\r\n * grow     - Line grows thicker on hover\r\n * strike   - Strikethrough effect with text scale\r\n * fade     - Lines fade up with stagger delay\r\n * pulse    - Line pulses up and down\r\n * swap     - Two lines go opposite directions\r\n * sweep    - Full background cover sweep\r\n * bounce   - Bouncy squish animation\r\n * arc      - SVG arc stroke draws in\r\n * scribble - SVG scribble stroke draws in\r\n */\r\nexport type LineHoverVariant =\r\n    | \"slide\"\r\n    | \"double\"\r\n    | \"grow\"\r\n    | \"strike\"\r\n    | \"fade\"\r\n    | \"pulse\"\r\n    | \"swap\"\r\n    | \"sweep\"\r\n    | \"bounce\"\r\n    | \"arc\"\r\n    | \"scribble\";\r\n\r\nexport interface LineHoverLinkProps\r\n    extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\r\n    /** The animation variant */\r\n    variant?: LineHoverVariant;\r\n    /** Link content */\r\n    children: React.ReactNode;\r\n    /** Additional CSS classes */\r\n    className?: string;\r\n}\r\n\r\n/**\r\n * SVG Arc Graphic - draws an arc stroke on hover\r\n */\r\nconst ArcGraphic = () => (\r\n    <svg\r\n        className=\"link-hover__graphic link-hover__graphic--stroke link-hover__graphic--arc\"\r\n        width=\"100%\"\r\n        height=\"18\"\r\n        viewBox=\"0 0 59 18\"\r\n    >\r\n        <path\r\n            d=\"M.945.149C12.3 16.142 43.573 22.572 58.785 10.842\"\r\n            pathLength=\"1\"\r\n        />\r\n    </svg>\r\n);\r\n\r\n/**\r\n * SVG Scribble Graphic - draws a scribble stroke on hover\r\n */\r\nconst ScribbleGraphic = () => (\r\n    <svg\r\n        className=\"link-hover__graphic link-hover__graphic--stroke link-hover__graphic--scribble\"\r\n        width=\"100%\"\r\n        height=\"9\"\r\n        viewBox=\"0 0 101 9\"\r\n    >\r\n        <path\r\n            d=\"M.426 1.973C4.144 1.567 17.77-.514 21.443 1.48 24.296 3.026 24.844 4.627 27.5 7c3.075 2.748 6.642-4.141 10.066-4.688 7.517-1.2 13.237 5.425 17.59 2.745C58.5 3 60.464-1.786 66 2c1.996 1.365 3.174 3.737 5.286 4.41 5.423 1.727 25.34-7.981 29.14-1.294\"\r\n            pathLength=\"1\"\r\n        />\r\n    </svg>\r\n);\r\n\r\n/**\r\n * LineHoverLink Component\r\n * \r\n * A link component with beautiful underline hover animations.\r\n * Supports 11 different animation variants.\r\n * \r\n * @example\r\n * ```tsx\r\n * <LineHoverLink variant=\"slide\" href=\"/about\">\r\n *   Learn more\r\n * </LineHoverLink>\r\n * ```\r\n */\r\nexport const LineHoverLink = React.forwardRef<\r\n    HTMLAnchorElement,\r\n    LineHoverLinkProps\r\n>(({ variant = \"slide\", children, className, ...props }, ref) => {\r\n    // Variants that need span wrapper for text animation\r\n    const needsSpan = [\"strike\", \"bounce\", \"arc\", \"scribble\"].includes(variant);\r\n\r\n    // Variants that need SVG graphics\r\n    const svgVariant =\r\n        variant === \"arc\" ? \"arc\" : variant === \"scribble\" ? \"scribble\" : null;\r\n\r\n    return (\r\n        <a\r\n            ref={ref}\r\n            className={cn(\"link-hover\", `link-hover--${variant}`, className)}\r\n            {...props}\r\n        >\r\n            {needsSpan ? <span>{children}</span> : children}\r\n            {svgVariant === \"arc\" && <ArcGraphic />}\r\n            {svgVariant === \"scribble\" && <ScribbleGraphic />}\r\n        </a>\r\n    );\r\n});\r\n\r\nLineHoverLink.displayName = \"LineHoverLink\";\r\n\r\nexport default LineHoverLink;\r\n",
      "type": "registry:ui",
      "target": "components/ui/line-hover-link.tsx"
    }
  ]
}