{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inline-table-control-base",
  "type": "registry:component",
  "title": "Inline Table Control (base)",
  "description": "Theme-ready base variant of Inline controls for editing table rows without breaking user focus..",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/inline-table-control.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence, LayoutGroup } from 'motion/react';\nimport { Pencil, X, Check } from 'lucide-react';\nimport { GoStack } from 'react-icons/go';\nimport { BsArrowUpRightSquare } from 'react-icons/bs';\nimport { FaRegCreditCard } from 'react-icons/fa6';\n\nexport interface TableItem {\n  id: string;\n  expense: string;\n  method: string;\n  amount: string;\n}\n\ninterface InlineTableControlProps {\n  data: TableItem[];\n  onUpdate?: (item: TableItem) => void;\n  className?: string;\n}\n\nconst getIcon = (field: string) => {\n  const iconClass = 'text-muted-foreground';\n  if (field === 'expense')\n    return <FaRegCreditCard size={18} className={iconClass} />;\n  if (field === 'method') return <GoStack size={18} className={iconClass} />;\n  if (field === 'amount')\n    return <BsArrowUpRightSquare size={18} className={iconClass} />;\n  return null;\n};\n\nexport const InlineTableControl: React.FC<InlineTableControlProps> = ({\n  data,\n  onUpdate,\n  className = '',\n}) => {\n  const [items, setItems] = useState<TableItem[]>(data);\n  const [previousData, setPreviousData] = useState(data);\n  const [editingId, setEditingId] = useState<string | null>(null);\n  const [editValues, setEditValues] = useState<TableItem | null>(null);\n\n  if (previousData !== data) {\n    setPreviousData(data);\n    setItems(data);\n  }\n\n  const handleDone = () => {\n    if (editValues) {\n      const updatedItems = items.map((item) =>\n        item.id === editValues.id ? editValues : item,\n      );\n      setItems(updatedItems);\n      onUpdate?.(editValues);\n      setEditingId(null);\n      setEditValues(null);\n    }\n  };\n\n  const layoutTransition = {\n    type: 'spring' as const,\n    bounce: 0,\n    duration: 0.7,\n  };\n\n  return (\n    <div\n      className={`theme-injected flex w-full flex-col items-center justify-center p-4 antialiased select-none sm:p-10 ${className}`}\n    >\n      <div className=\"w-full max-w-lg\">\n        <motion.div\n          layout\n          transition={layoutTransition}\n          className={`hidden grid-cols-[1.2fr_1fr_0.8fr_40px] px-6 py-4 text-sm font-semibold tracking-wider capitalize transition-all duration-300 sm:grid ${editingId ? 'opacity-20 blur-[1px]' : 'opacity-100'} text-muted-foreground`}\n        >\n          <motion.div layout className=\"flex items-center gap-2\">\n            <FaRegCreditCard size={18} /> Expense\n          </motion.div>\n          <motion.div layout className=\"flex items-center gap-2\">\n            <GoStack size={18} /> Method\n          </motion.div>\n          <motion.div layout className=\"flex items-center gap-2\">\n            <BsArrowUpRightSquare size={18} /> Amount\n          </motion.div>\n        </motion.div>\n\n        <LayoutGroup>\n          <div className=\"flex flex-col gap-2 sm:gap-0\">\n            {items.map((item) => (\n              <div key={item.id} className=\"relative\">\n                {!editingId && (\n                  <motion.div\n                    layoutId={`divider-${item.id}`}\n                    className=\"bg-border mx-6 hidden h-px sm:block\"\n                  />\n                )}\n\n                <AnimatePresence mode=\"popLayout\">\n                  {editingId === item.id ? (\n                    <motion.div\n                      layoutId={`container-${item.id}`}\n                      transition={layoutTransition}\n                      className=\"border-border bg-card relative z-20 my-2 rounded-lg border p-4 shadow-xl sm:my-4 sm:rounded-none sm:p-8 sm:py-4 sm:shadow-none\"\n                    >\n                      <motion.div className=\"space-y-4 sm:space-y-5\">\n                        {(['expense', 'method', 'amount'] as const).map(\n                          (field) => (\n                            <div\n                              key={field}\n                              className=\"flex flex-col gap-1 sm:grid sm:grid-cols-[120px_1fr] sm:items-center sm:gap-0\"\n                            >\n                              <motion.label\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                transition={{ duration: 0.3, delay: 0.1 }}\n                                className=\"text-muted-foreground flex items-center gap-2 text-[11px] font-bold tracking-wider uppercase sm:text-sm sm:capitalize\"\n                              >\n                                {getIcon(field)} {field}\n                              </motion.label>\n                              <motion.div\n                                layout=\"position\"\n                                transition={layoutTransition}\n                                className=\"border-border bg-muted focus-within:border-ring flex w-full items-center rounded-lg border px-4 py-2.5 sm:py-2\"\n                              >\n                                <motion.input\n                                  layoutId={`${field}-${item.id}`}\n                                  layout=\"position\"\n                                  title=\"edit text\"\n                                  type=\"text\"\n                                  value={editValues ? editValues[field] : ''}\n                                  transition={layoutTransition}\n                                  onChange={(e) =>\n                                    setEditValues((prev) =>\n                                      prev\n                                        ? { ...prev, [field]: e.target.value }\n                                        : null,\n                                    )\n                                  }\n                                  className=\"text-foreground relative z-999 w-full bg-transparent text-base font-bold outline-none sm:text-sm\"\n                                />\n                              </motion.div>\n                            </div>\n                          ),\n                        )}\n                      </motion.div>\n\n                      <div className=\"mt-6 flex flex-row justify-end gap-2 sm:mt-4\">\n                        <button\n                          onClick={() => {\n                            setEditingId(null);\n                            setEditValues(null);\n                          }}\n                          className=\"bg-muted text-muted-foreground flex flex-1 items-center justify-center gap-2 rounded-lg px-5 py-3 text-sm font-bold sm:flex-none sm:py-2\"\n                        >\n                          <X size={18} /> <span>Cancel</span>\n                        </button>\n                        <button\n                          onClick={handleDone}\n                          className=\"bg-primary text-primary-foreground flex flex-1 items-center justify-center gap-2 rounded-lg px-5 py-3 text-sm font-bold sm:flex-none sm:py-2\"\n                        >\n                          <Check size={18} /> <span>Done</span>\n                        </button>\n                      </div>\n                    </motion.div>\n                  ) : (\n                    <motion.div\n                      layout=\"position\"\n                      layoutId={`container-${item.id}`}\n                      transition={layoutTransition}\n                      animate={{\n                        opacity: editingId ? 0.35 : 1,\n                        filter: editingId ? 'blur(1px)' : 'blur(0px)',\n                      }}\n                      className={`group grid cursor-default grid-cols-[1fr_auto_40px] items-center rounded-lg px-4 py-4 transition-all duration-300 sm:grid-cols-[1.2fr_1fr_0.8fr_40px] sm:rounded-none sm:px-6 sm:py-5 ${\n                        editingId\n                          ? ''\n                          : 'border-border bg-muted/50 hover:bg-muted border opacity-100 sm:border-none sm:bg-transparent dark:border-white/[0.03] dark:bg-zinc-900/40 dark:hover:bg-zinc-800/60'\n                      }`}\n                    >\n                      <motion.div className=\"flex flex-col\">\n                        <motion.div\n                          layoutId={`expense-${item.id}`}\n                          layout=\"position\"\n                          className=\"text-foreground flex text-sm font-bold sm:text-base\"\n                        >\n                          <motion.span\n                            layout=\"position\"\n                            transition={layoutTransition}\n                          >\n                            {item.expense}\n                          </motion.span>\n                        </motion.div>\n                        <motion.div\n                          layoutId={`method-mobile-${item.id}`}\n                          layout=\"position\"\n                          className=\"text-muted-foreground flex text-xs font-medium sm:hidden\"\n                        >\n                          <motion.span\n                            layout=\"position\"\n                            transition={layoutTransition}\n                          >\n                            {item.method}\n                          </motion.span>\n                        </motion.div>\n                      </motion.div>\n\n                      <motion.div\n                        layoutId={`method-${item.id}`}\n                        layout=\"position\"\n                        className=\"text-muted-foreground hidden text-sm font-semibold sm:flex\"\n                      >\n                        <motion.span\n                          layout=\"position\"\n                          transition={layoutTransition}\n                        >\n                          {item.method}\n                        </motion.span>\n                      </motion.div>\n\n                      <motion.div\n                        layoutId={`amount-${item.id}`}\n                        layout=\"position\"\n                        className=\"text-foreground flex justify-end text-sm font-bold sm:justify-start sm:text-base\"\n                      >\n                        <motion.span\n                          layout=\"position\"\n                          transition={layoutTransition}\n                          className=\"flex items-center\"\n                        >\n                          <span className=\"text-muted-foreground mr-0.5\">\n                            $\n                          </span>\n                          {item.amount}\n                        </motion.span>\n                      </motion.div>\n\n                      <button\n                        title=\"edit\"\n                        onClick={() => {\n                          setEditValues({ ...item });\n                          setEditingId(item.id);\n                        }}\n                        className=\"text-muted-foreground hover:text-foreground flex justify-end transition-transform active:scale-125\"\n                      >\n                        <Pencil size={18} strokeWidth={2.5} />\n                      </button>\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n            ))}\n          </div>\n        </LayoutGroup>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}