{
  "name": "border-trail-textarea",
  "type": "registry:ui",
  "componentName": "border-trail-textarea",
  "description": "Text area input with animated border trail effect on focus.",
  "files": [
    {
      "path": "border-trail-textarea.tsx",
      "content": "import { BorderTrail } from '@/components/core/border-trail';\n\nexport function BorderTrailTextarea() {\n  return (\n    <div className='relative h-[160px] w-[260px] overflow-hidden rounded-md border border-zinc-950/10 bg-white text-zinc-700 outline-hidden dark:border-zinc-50/20 dark:bg-zinc-950 dark:text-zinc-300'>\n      <textarea className='h-full w-full resize-none rounded-md bg-transparent px-4 py-3 text-sm outline-hidden' />\n      <BorderTrail\n        className='bg-linear-to-l from-blue-200 via-blue-500 to-blue-200 dark:from-blue-400 dark:via-blue-500 dark:to-blue-700'\n        size={120}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/border-trail.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { motion, Transition } from 'motion/react';\n\nexport type BorderTrailProps = {\n  className?: string;\n  size?: number;\n  transition?: Transition;\n  onAnimationComplete?: () => void;\n  style?: React.CSSProperties;\n};\n\nexport function BorderTrail({\n  className,\n  size = 60,\n  transition,\n  onAnimationComplete,\n  style,\n}: BorderTrailProps) {\n  const defaultTransition: Transition = {\n    repeat: Infinity,\n    duration: 5,\n    ease: 'linear',\n  };\n\n  return (\n    <div className='pointer-events-none absolute inset-0 rounded-[inherit] border border-transparent [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]'>\n      <motion.div\n        className={cn('absolute aspect-square bg-zinc-500', className)}\n        style={{\n          width: size,\n          offsetPath: `rect(0 auto auto 0 round ${size}px)`,\n          ...style,\n        }}\n        animate={{\n          offsetDistance: ['0%', '100%'],\n        }}\n        transition={transition || defaultTransition}\n        onAnimationComplete={onAnimationComplete}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}