{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["motion"],"description":"A DotMorphButton component for SmoothUI.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface DotMorphButtonProps {\n  className?: string;\n  label: string;\n  onClick?: () => void;\n}\n\nexport function DotMorphButton({\n  label,\n  className = \"\",\n  onClick,\n}: DotMorphButtonProps) {\n  const [isHovered, setIsHovered] = useState(false);\n  const shouldReduceMotion = useReducedMotion();\n  const [isHoverDevice, setIsHoverDevice] = useState(false);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n    setIsHoverDevice(mediaQuery.matches);\n\n    const handleChange = (e: MediaQueryListEvent) => {\n      setIsHoverDevice(e.matches);\n    };\n\n    mediaQuery.addEventListener(\"change\", handleChange);\n    return () => mediaQuery.removeEventListener(\"change\", handleChange);\n  }, []);\n\n  return (\n    <SmoothButton\n      className={`flex items-center gap-3 rounded-full border bg-background ${className}`}\n      onClick={onClick}\n      onMouseEnter={() => {\n        if (isHoverDevice) {\n          setIsHovered(true);\n        }\n      }}\n      onMouseLeave={() => setIsHovered(false)}\n      type=\"button\"\n    >\n      <motion.span\n        animate={\n          shouldReduceMotion || !isHoverDevice || !isHovered\n            ? {\n                borderRadius: 999,\n                height: 16,\n                width: 16,\n              }\n            : {\n                borderRadius: 999,\n                height: 28,\n                width: 12,\n              }\n        }\n        className=\"flex items-center justify-center\"\n        initial={false}\n        style={{\n          background: \"var(--color-brand)\",\n          display: \"inline-block\",\n        }}\n        transition={\n          shouldReduceMotion\n            ? { duration: 0 }\n            : {\n                damping: 22,\n                duration: 0.25,\n                stiffness: 600,\n                type: \"spring\" as const,\n              }\n        }\n      />\n      <span className=\"select-none font-medium text-2xl text-foreground\">\n        {label}\n      </span>\n    </SmoothButton>\n  );\n}\n\nexport default DotMorphButton;\n","path":"index.tsx","target":"components/smoothui/dot-morph-button/index.tsx","type":"registry:ui"}],"name":"dot-morph-button","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/tokens.json"],"title":"Dot Morph Button","type":"registry:ui"}