{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-glow-input-shadcnui",
  "type": "registry:component",
  "title": "AI Glow Input",
  "description": "Input field with dynamic glow that pulses based on typing speed - smart motion feedback",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/ai-glow-input.tsx",
      "content": "\"use client\";\n\nimport { useTheme } from \"@/components/uitripled/theme-provider\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  motion,\n  useMotionValue,\n  useReducedMotion,\n  useSpring,\n} from \"framer-motion\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\ntype AIGlowInputProps = {\n  placeholder?: string;\n  onValueChange?: (value: string) => void;\n  glowColor?: string;\n};\n\ntype Particle = {\n  left: string;\n  top: string;\n  delay: number;\n};\n\nexport function AIGlowInput({\n  placeholder = \"Ask AI anything…\",\n  onValueChange,\n  glowColor,\n}: AIGlowInputProps) {\n  const [value, setValue] = useState(\"\");\n  const [glowIntensity, setGlowIntensity] = useState(0.3);\n  const [isFocused, setIsFocused] = useState(false);\n  const lastTypingTime = useRef(Date.now());\n  const typingSpeed = useMotionValue(0);\n  const glowIntensityMotion = useMotionValue(0.3);\n  const shouldReduceMotion = useReducedMotion();\n  const { resolvedTheme } = useTheme();\n  const isDarkMode = resolvedTheme === \"dark\";\n\n  const effectiveGlowColor = useMemo(() => {\n    if (glowColor) {\n      return glowColor;\n    }\n    return isDarkMode ? \"#d1d5db\" : \"#ddd\";\n  }, [glowColor, isDarkMode]);\n\n  const particles = useMemo<Particle[]>(\n    () =>\n      Array.from({ length: 6 }).map(() => ({\n        left: `${Math.random() * 100}%`,\n        top: `${Math.random() * 100}%`,\n        delay: Math.random() * 1.8,\n      })),\n    []\n  );\n\n  const springIntensity = useSpring(glowIntensityMotion, {\n    stiffness: 420,\n    damping: 32,\n  });\n\n  useEffect(() => {\n    const unsubscribe = springIntensity.on(\"change\", (latest) => {\n      setGlowIntensity(latest as number);\n    });\n    return () => unsubscribe();\n  }, [springIntensity]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value;\n    setValue(newValue);\n    onValueChange?.(newValue);\n\n    const now = Date.now();\n    const timeSinceLastType = now - lastTypingTime.current;\n    lastTypingTime.current = now;\n\n    const speed = Math.min(1, 1000 / (timeSinceLastType || 1));\n    typingSpeed.set(speed);\n\n    const baseIntensity = 0.28;\n    const dynamicIntensity = baseIntensity + speed * 0.72;\n    glowIntensityMotion.set(dynamicIntensity);\n\n    if (timeSinceLastType > 500) {\n      glowIntensityMotion.set(baseIntensity);\n    }\n  };\n\n  const handleFocus = () => {\n    setIsFocused(true);\n    glowIntensityMotion.set(0.58);\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n    glowIntensityMotion.set(value ? 0.4 : 0.3);\n  };\n\n  const hexToRgb = (hex: string) => {\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n    return result\n      ? {\n          r: parseInt(result[1], 16),\n          g: parseInt(result[2], 16),\n          b: parseInt(result[3], 16),\n        }\n      : { r: 209, g: 213, b: 219 };\n  };\n\n  const rgb = hexToRgb(effectiveGlowColor);\n  const shadowBlur = shouldReduceMotion ? 0 : glowIntensity * 42;\n  const glowShadowAlpha = isDarkMode\n    ? glowIntensity * 0.55\n    : glowIntensity * 0.35;\n  const particleColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${isDarkMode ? 0.26 : 0.16})`;\n\n  return (\n    <section className=\"relative w-full max-w-lg\">\n      <div aria-hidden className=\"pointer-events-none absolute inset-0 -z-10\">\n        <motion.div\n          className={cn(\n            \"absolute -top-24 left-1/2 h-48 w-48 -translate-x-1/2 rounded-full blur-[140px]\",\n            isDarkMode ? \"bg-white/15\" : \"bg-[#ddd]\"\n          )}\n          animate={\n            shouldReduceMotion\n              ? undefined\n              : { opacity: [0.25, 0.5, 0.25], scale: [0.9, 1.05, 0.95] }\n          }\n          transition={\n            shouldReduceMotion\n              ? undefined\n              : { duration: 9, repeat: Infinity, ease: \"easeInOut\" }\n          }\n        />\n      </div>\n\n      <label className=\"relative block rounded-2xl bg-card/80\">\n        <div className=\"relative overflow-hidden rounded-[calc(theme(borderRadius.2xl)-0.25rem)]\">\n          <motion.div\n            aria-hidden\n            className=\"absolute inset-0 pointer-events-none\"\n            style={{\n              background: `radial-gradient(circle,\n                rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${glowIntensity}) 0%,\n                rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${glowIntensity * 0.35}) 50%,\n                transparent 100%)`,\n              filter: \"blur(28px)\",\n            }}\n            animate={\n              shouldReduceMotion\n                ? { scale: 1 }\n                : { scale: isFocused ? [1, 1.05, 1] : 1 }\n            }\n            transition={\n              shouldReduceMotion\n                ? { duration: 0 }\n                : {\n                    duration: 2.2,\n                    repeat: isFocused ? Infinity : 0,\n                    ease: \"easeInOut\",\n                  }\n            }\n          />\n\n          <input\n            type=\"text\"\n            value={value}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            placeholder={placeholder}\n            aria-label={placeholder}\n            className={cn(\n              \"relative w-full rounded-[calc(theme(borderRadius.2xl)-0.25rem)] border border-border/60 px-6 py-4 text-base placeholder:text-muted-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors\",\n              isDarkMode\n                ? \"bg-white/5 text-muted-foreground focus-visible:ring-white/40\"\n                : \"bg-white/90 text-foreground focus-visible:ring-[#ddd]\"\n            )}\n            style={{\n              boxShadow: `0 0 ${shadowBlur}px rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${glowShadowAlpha})`,\n            }}\n          />\n\n          {value && isFocused && (\n            <motion.div\n              initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -8 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: shouldReduceMotion ? 0 : -8 }}\n              className=\"absolute -bottom-9 left-0 text-xs text-muted-foreground\"\n            >\n              <motion.span\n                animate={\n                  shouldReduceMotion\n                    ? { opacity: 1 }\n                    : { opacity: [0.4, 1, 0.4] }\n                }\n                transition={\n                  shouldReduceMotion\n                    ? { duration: 0 }\n                    : { duration: 1.1, repeat: Infinity, ease: \"easeInOut\" }\n                }\n              >\n                {glowIntensity > 0.8\n                  ? \"⚡ Fast typing!\"\n                  : glowIntensity > 0.5\n                    ? \"🎯 Active\"\n                    : \"✨ Ready\"}\n              </motion.span>\n            </motion.div>\n          )}\n\n          {isFocused && (\n            <motion.div\n              aria-hidden\n              className=\"pointer-events-none absolute inset-0 rounded-[calc(theme(borderRadius.2xl)-0.25rem)]\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              style={{\n                background: `linear-gradient(135deg,\n                  transparent 0%,\n                  rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.12) 50%,\n                  transparent 100%)`,\n              }}\n            />\n          )}\n        </div>\n      </label>\n\n      <div className=\"pointer-events-none absolute inset-0 overflow-hidden rounded-2xl\">\n        {particles.map((particle, index) => (\n          <motion.span\n            key={index}\n            className=\"absolute h-1 w-1 rounded-full\"\n            style={{\n              left: particle.left,\n              top: particle.top,\n              backgroundColor: particleColor,\n            }}\n            animate={\n              shouldReduceMotion\n                ? { opacity: 0.25 }\n                : {\n                    y: [0, -24, 0],\n                    opacity: [0.15, 0.5, 0.15],\n                  }\n            }\n            transition={\n              shouldReduceMotion\n                ? { duration: 0 }\n                : {\n                    duration: 3,\n                    repeat: Infinity,\n                    delay: particle.delay,\n                    ease: \"easeInOut\",\n                  }\n            }\n          />\n        ))}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/ai-glow-input-shadcnui.tsx"
    }
  ]
}