{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inline-edit-base",
  "type": "registry:component",
  "title": "Inline Edit (base)",
  "description": "Theme-ready base variant of A sleek, interactive editor that transitions seamlessly between display and edit modes using smooth layout animations..",
  "dependencies": [
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/inline-edit.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState, useId, type FC } from 'react';\nimport { motion, AnimatePresence, type Transition } from 'motion/react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport {\n  AlarmClockFreeIcons,\n  Calendar03Icon,\n  Cancel01Icon,\n  Edit03Icon,\n  Link01Icon,\n  Menu02Icon,\n  Tick02Icon,\n  Ticket02Icon,\n} from '@hugeicons/core-free-icons/index';\n\ninterface EditableRowProps {\n  icon: any;\n  label: string;\n  value: string;\n  secondaryValue?: string;\n  onSave?: (value: string) => void;\n  onSaveRange?: (v1: string, v2: string) => void;\n  type?: 'text' | 'time' | 'url';\n  multiline?: boolean;\n}\n\nexport interface EventData {\n  event: string;\n  date: string;\n  start: string;\n  end: string;\n  location: string;\n  url: string;\n  desc: string;\n}\n\ninterface InlineEditCardProps {\n  data: EventData;\n  onDataChange: (data: EventData) => void;\n  title?: string;\n}\n\nconst spring: Transition = {\n  type: 'spring',\n  stiffness: 420,\n  damping: 28,\n  mass: 0.6,\n};\n\nconst EditableRow: FC<EditableRowProps> = ({\n  icon,\n  label,\n  value,\n  secondaryValue,\n  onSave,\n  onSaveRange,\n  type = 'text',\n  multiline = false,\n}) => {\n  const [editing, setEditing] = useState(false);\n  const [v1, setV1] = useState(value);\n  const [v2, setV2] = useState(secondaryValue || '');\n  const inputId = useId();\n  const secondaryInputId = useId();\n  const isTime = type === 'time';\n\n  const handleSave = () => {\n    if (isTime && onSaveRange) onSaveRange(v1, v2);\n    else if (onSave) onSave(v1);\n    setEditing(false);\n  };\n\n  return (\n    <motion.div\n      layout\n      transition={spring}\n      className={`relative flex w-full ${multiline ? 'flex-col items-start gap-4' : 'flex-col gap-2 sm:flex-row sm:items-center sm:gap-4'}`}\n    >\n      <div\n        className={`flex shrink-0 items-center gap-3 ${multiline ? 'w-full' : 'w-full sm:w-[130px]'}`}\n      >\n        <HugeiconsIcon\n          icon={icon}\n          size={24}\n          className=\"text-muted-foreground\"\n          strokeWidth={1.5}\n        />\n        <label\n          htmlFor={inputId}\n          className=\"text-muted-foreground cursor-pointer text-[16px] font-medium\"\n        >\n          {label}\n        </label>\n      </div>\n\n      <div className={`bg-background relative w-full transition-colors`}>\n        <motion.div\n          layout\n          className=\"group/content hover:bg-muted w-full rounded-lg px-2 sm:px-3\"\n        >\n          <motion.div\n            layout\n            transition={spring}\n            className={`relative flex min-h-[40px] w-full gap-2 overflow-hidden ${multiline ? 'flex-col py-2.5' : 'items-center'}`}\n          >\n            {isTime ? (\n              <div className=\"flex w-full gap-2\">\n                <input\n                  id={inputId}\n                  autoFocus\n                  type=\"text\"\n                  readOnly={!editing}\n                  value={v1}\n                  onChange={(e) => setV1(e.target.value)}\n                  className=\"text-foreground focus:border-border h-10 w-full rounded-lg border border-transparent bg-transparent text-[16px] leading-relaxed font-medium outline-none\"\n                />\n                <input\n                  id={secondaryInputId}\n                  type=\"text\"\n                  readOnly={!editing}\n                  value={v2}\n                  onChange={(e) => setV2(e.target.value)}\n                  className=\"text-foreground focus:border-border h-10 w-full rounded-lg border border-transparent bg-transparent text-[16px] leading-relaxed font-medium outline-none\"\n                />\n              </div>\n            ) : multiline ? (\n              <textarea\n                id={inputId}\n                autoFocus\n                readOnly={!editing}\n                rows={3}\n                value={v1}\n                onChange={(e) => setV1(e.target.value)}\n                className=\"text-foreground w-full resize-none rounded-lg bg-transparent px-0 py-0 text-[16px] leading-relaxed font-medium outline-none\"\n              />\n            ) : (\n              <input\n                id={inputId}\n                autoFocus\n                type=\"text\"\n                readOnly={!editing}\n                value={v1}\n                onChange={(e) => setV1(e.target.value)}\n                onKeyDown={(e) => e.key === 'Enter' && handleSave()}\n                className=\"text-foreground h-10 w-full rounded-lg bg-transparent text-[15px] font-medium outline-none sm:text-base\"\n              />\n            )}\n\n            <div className=\"mr-0.5 flex shrink-0 items-center justify-end\">\n              <AnimatePresence mode=\"popLayout\" initial={false}>\n                {editing ? (\n                  <motion.div\n                    key=\"edit\"\n                    className=\"flex gap-1\"\n                    initial={{ opacity: 0, y: 40 }}\n                    animate={{ opacity: 1, y: 0 }}\n                    exit={{ opacity: 0, y: 40 }}\n                    transition={{\n                      duration: 0.4,\n                      ease: [0.19, 1, 0.22, 1],\n                    }}\n                  >\n                    <motion.button\n                      whileHover={{ scale: 1.05 }}\n                      whileTap={{ scale: 0.95 }}\n                      onClick={handleSave}\n                      className=\"bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-lg\"\n                    >\n                      <HugeiconsIcon icon={Tick02Icon} size={18} />\n                    </motion.button>\n\n                    <motion.button\n                      whileHover={{ scale: 1.05 }}\n                      whileTap={{ scale: 0.95 }}\n                      onClick={() => setEditing(false)}\n                      className=\"bg-muted text-foreground flex size-7 items-center justify-center rounded-lg\"\n                    >\n                      <HugeiconsIcon icon={Cancel01Icon} size={18} />\n                    </motion.button>\n                  </motion.div>\n                ) : (\n                  <motion.div\n                    exit={{ opacity: 1 }}\n                    key=\"view\"\n                    className={`border-border bg-background flex size-7 items-center justify-center rounded-lg border opacity-0 shadow-sm group-hover/content:opacity-100 ${multiline ? 'mt-1 self-end' : ''}`}\n                    onClick={() => setEditing(true)}\n                  >\n                    <HugeiconsIcon\n                      icon={Edit03Icon}\n                      size={18}\n                      className=\"text-muted-foreground\"\n                    />\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </motion.div>\n        </motion.div>\n      </div>\n    </motion.div>\n  );\n};\n\nexport const InlineEditCard: FC<InlineEditCardProps> = ({\n  data,\n  onDataChange,\n  title = 'Update Details',\n}) => {\n  return (\n    <div className=\"theme-injected border-border bg-muted mx-auto h-fit w-[92vw] max-w-xs rounded-lg border p-1.5 shadow-sm transition-colors sm:mx-0 sm:w-[440px] sm:max-w-none\">\n      <div className=\"border-border bg-card w-full overflow-hidden rounded-lg border transition-colors\">\n        <div className=\"border-border bg-muted rounded-t-lg border-b px-8 py-3.5\">\n          <h4 className=\"text-muted-foreground text-[15px] font-semibold tracking-wide uppercase\">\n            {title}\n          </h4>\n        </div>\n\n        <div className=\"space-y-4 px-4 py-3 sm:space-y-1\">\n          <EditableRow\n            icon={Ticket02Icon}\n            label=\"Event\"\n            value={data.event}\n            onSave={(v) => onDataChange({ ...data, event: v })}\n          />\n          <EditableRow\n            icon={Calendar03Icon}\n            label=\"Date\"\n            value={data.date}\n            onSave={(v) => onDataChange({ ...data, date: v })}\n          />\n          <EditableRow\n            icon={AlarmClockFreeIcons}\n            label=\"Time\"\n            type=\"time\"\n            value={data.start}\n            secondaryValue={data.end}\n            onSaveRange={(a, b) => onDataChange({ ...data, start: a, end: b })}\n          />\n          <EditableRow\n            icon={Link01Icon}\n            label=\"URL\"\n            type=\"url\"\n            value={data.url}\n            onSave={(v) => onDataChange({ ...data, url: v })}\n          />\n          <div className=\"border-border mt-2 border-t pt-4\">\n            <EditableRow\n              icon={Menu02Icon}\n              label=\"Description\"\n              multiline\n              value={data.desc}\n              onSave={(v) => onDataChange({ ...data, desc: v })}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}