{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "split-to-edit",
  "type": "registry:component",
  "title": "Split To edit",
  "description": "An animated input field that smoothly splits into editable segments during interaction",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/watermelon/split-to-edit.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState, useRef, useEffect, type FC } from 'react';\nimport {\n  motion,\n  AnimatePresence,\n  MotionConfig,\n  type Transition,\n} from 'motion/react';\nimport { Check, Pencil } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\ninterface SplitToEditProps {\n  initialHours?: number;\n  initialMinutes?: number;\n  onSave?: (hours: number, minutes: number) => void;\n}\n\nconst layoutConfig: Transition = {\n  type: 'spring',\n  stiffness: 450,\n  damping: 25,\n  mass: 2\n};\n\nconst collapsedConfig: Transition = {\n  type: 'spring',\n  stiffness: 450,\n  damping: 25,\n  mass: 1\n};\n\nexport const SplitToEdit: FC<SplitToEditProps> = ({\n  initialHours = 2,\n  initialMinutes = 30,\n  onSave,\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const [hours, setHours] = useState<number>(initialHours);\n  const [minutes, setMinutes] = useState<number>(initialMinutes);\n\n  const [tempHours, setTempHours] = useState<string>(String(initialHours));\n  const [tempMinutes, setTempMinutes] = useState<string>(\n    String(initialMinutes),\n  );\n\n  const hoursInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      setHours(initialHours);\n      setMinutes(initialMinutes);\n      setTempHours(String(initialHours));\n      setTempMinutes(String(initialMinutes));\n    });\n  }, [initialHours, initialMinutes]);\n\n  useEffect(() => {\n    if (isExpanded) {\n      const t = setTimeout(() => {\n        hoursInputRef.current?.focus();\n        hoursInputRef.current?.select();\n      }, 50);\n      return () => clearTimeout(t);\n    }\n  }, [isExpanded]);\n\n  const handleEdit = () => {\n    setTempHours(String(hours));\n    setTempMinutes(String(minutes));\n    setIsExpanded(true);\n  };\n\n  const handleSave = () => {\n    const h = Math.max(0, parseInt(tempHours) || 0);\n    const m = Math.min(59, Math.max(0, parseInt(tempMinutes) || 0));\n\n    setHours(h);\n    setMinutes(m);\n\n    setTempHours(String(h));\n    setTempMinutes(String(m));\n\n    setIsExpanded(false);\n\n    onSave?.(h, m);\n  };\n\n\n  const handleKeyPress = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter') handleSave();\n    if (e.key === 'Escape') setIsExpanded(false);\n  };\n\n  return (\n    <MotionConfig transition={isExpanded ? layoutConfig : collapsedConfig}>\n      <motion.div\n        layout\n        className={cn(\n          'flex items-center font-mono ',\n          isExpanded && 'gap-4',\n        )}\n      >\n        <motion.div\n          layout\n          animate={{\n            borderTopLeftRadius: 8,\n            borderBottomLeftRadius: 8,\n            borderTopRightRadius: isExpanded ? 8 : 0,\n            borderBottomRightRadius: isExpanded ? 8 : 0,\n          }}\n          className={cn(\n            'flex cursor-pointer items-center justify-end gap-1 bg-zinc-100 px-1 pl-2 dark:bg-zinc-800',\n            isExpanded && 'gap-5 px-3',\n          )}\n          onClick={!isExpanded ? handleEdit : undefined}\n        >\n          <motion.input\n            ref={hoursInputRef}\n            layout\n            value={tempHours}\n            onChange={(e) =>\n              setTempHours(e.target.value.replace(/\\D/g, '').slice(0, 2))\n            }\n            readOnly={!isExpanded}\n            onKeyDown={handleKeyPress}\n            className=\"h-10 w-[2ch] bg-transparent text-center font-mono text-xl font-semibold text-neutral-900 dark:text-zinc-200 outline-none\"\n          />\n\n          <motion.span layout className=\"text-lg font-medium text-zinc-500 dark:text-zinc-400\">\n            Hr.\n          </motion.span>\n        </motion.div>\n\n        <motion.div\n          layout\n          animate={{\n            borderTopLeftRadius: isExpanded ? 8 : 0,\n            borderBottomLeftRadius: isExpanded ? 8 : 0,\n            borderTopRightRadius: isExpanded ? 8 : 0,\n            borderBottomRightRadius: isExpanded ? 8 : 0,\n          }}\n          className={cn(\n            'flex cursor-pointer items-center justify-end gap-1 bg-zinc-100 px-1 dark:bg-zinc-800 will-change-transform',\n            isExpanded && 'gap-5 px-3',\n          )}\n          onClick={!isExpanded ? handleEdit : undefined}\n        >\n          <motion.input\n            layout\n            value={tempMinutes}\n            onChange={(e) =>\n              setTempMinutes(e.target.value.replace(/\\D/g, '').slice(0, 2))\n            }\n            readOnly={!isExpanded}\n            onKeyDown={handleKeyPress}\n            className=\"h-10 w-[2ch] bg-transparent text-center font-mono text-xl font-semibold text-zinc-900 dark:text-zinc-200 outline-none\"\n          />\n\n          <motion.span layout className=\"text-lg font-medium text-zinc-500 dark:text-zinc-400\">\n            Min.\n          </motion.span>\n        </motion.div>\n\n        <motion.div\n          layout\n          animate={{\n            borderTopLeftRadius: isExpanded ? 8 : 0,\n            borderBottomLeftRadius: isExpanded ? 8 : 0,\n            borderTopRightRadius: 8,\n            borderBottomRightRadius: 8,\n          }}\n          className=\"flex h-10 w-10 items-center justify-center bg-zinc-100 dark:bg-zinc-800 will-change-transform\"\n        >\n          <button\n            onClick={isExpanded ? handleSave : handleEdit}\n            className=\"cursor-pointer\"\n          >\n            <AnimatePresence mode=\"popLayout\" initial={false}>\n              <motion.div\n                key={isExpanded ? 'check' : 'pen'}\n                initial={{\n                  opacity: 0,\n                  scale: 0.25,\n                  filter: 'blur(4px)',\n                }}\n                animate={{\n                  opacity: 1,\n                  scale: 1,\n                  filter: 'blur(0px)',\n                }}\n                exit={{\n                  opacity: 0,\n                  scale: 0.25,\n                  filter: 'blur(4px)',\n                }}\n                transition={{\n                  type: 'spring',\n                  visualDuration: 0.25,\n                  bounce: 0,\n                }}\n              >\n                {isExpanded ? (\n                  <Check className=\"size-5 text-zinc-500\" />\n                ) : (\n                  <Pencil className=\"size-5 text-zinc-500 \" />\n                )}\n              </motion.div>\n            </AnimatePresence>\n          </button>\n        </motion.div>\n      </motion.div>\n    </MotionConfig>\n  );\n};\n"
    }
  ]
}