{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "edit-profile-base",
  "type": "registry:component",
  "title": "Edit Profile (base)",
  "description": "Theme-ready base variant of Profile editing dialog with fields, validation, and save actions..",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/edit-profile.tsx",
      "type": "registry:component",
      "content": "import React, { useState, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { X, Pencil, Clock, ChevronDown } from 'lucide-react';\n\nexport interface ProfileData {\n    fullName: string;\n    email: string;\n    timezone: string;\n    workingHours: string;\n    title: string;\n    avatarUrl: string;\n    lastUpdated: string;\n}\n\ninterface EditProfileProps {\n    isOpen: boolean;\n    onClose: () => void;\n    initialData: ProfileData;\n    onSave: (data: ProfileData) => void;\n}\n\nexport const EditProfile: React.FC<EditProfileProps> = ({\n    isOpen,\n    onClose,\n    initialData,\n    onSave\n}) => {\n    const [formData, setFormData] = useState<ProfileData>(initialData);\n\n    useEffect(() => {\n        if (isOpen) {\n            requestAnimationFrame(() => setFormData(initialData));\n        }\n    }, [isOpen, initialData]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {\n        const { name, value } = e.target;\n        setFormData((prev) => ({ ...prev, [name]: value }));\n    };\n\n    return (\n        <AnimatePresence>\n            {isOpen && (\n                <div className=\"fixed inset-0 z-100 flex items-center justify-center p-4 overflow-y-auto theme-injected font-sans\">\n                    {/* Backdrop Overlay */}\n                    <motion.div\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        onClick={onClose}\n                        className=\"fixed inset-0 backdrop-blur-sm bg-background/30\"\n                    />\n\n                    {/* Modal Container */}\n                    <div className=\"relative w-full max-w-180 z-101 my-auto pointer-events-none\">\n                        <motion.div\n                            initial={{ opacity: 0, scale: 0.9, y: 20 }}\n                            animate={{ opacity: 1, scale: 1, y: 0 }}\n                            exit={{ opacity: 0, scale: 0.9, y: 20 }}\n                            transition={{ type: \"spring\", damping: 20, stiffness: 300, mass: 0.8 }}\n                            className=\"pointer-events-auto w-full rounded-xl shadow-lg border border-border overflow-hidden \n                                     bg-card\"\n                        >\n                            {/* Header */}\n                            <div className=\"flex items-center justify-between px-6 py-4 md:px-8\">\n                                <h2 className=\"text-lg font-semibold text-foreground\">Edit your profile</h2>\n                                <button title='close' onClick={onClose} className=\"text-muted-foreground hover:text-foreground transition-colors p-1\">\n                                    <X size={20} />\n                                </button>\n                            </div>\n\n                            {/* Body */}\n                            <div className=\"flex flex-col md:flex-row border-t border-b border-border\n                                          bg-background\">\n\n                                {/* Form Section */}\n                                <div className=\"flex-1 p-6 space-y-4\">\n                                    <div className=\"space-y-1.5\">\n                                        <label className=\"text-sm font-medium text-muted-foreground\">Full name</label>\n                                        <input title='fullname'\n                                            name=\"fullName\"\n                                            value={formData.fullName}\n                                            onChange={handleChange}\n                                            className=\"w-full px-4 py-2.5 rounded-lg border border-2 outline-none transition-all text-base font-semibold\n                                                     bg-background border-input text-foreground focus:border-ring focus:border-input\"\n                                        />\n                                    </div>\n\n                                    <div className=\"space-y-1.5\">\n                                        <label className=\"text-sm font-medium text-muted-foreground\">Email</label>\n                                        <input title='email'\n                                            name=\"email\"\n                                            value={formData.email}\n                                            onChange={handleChange}\n                                            className=\"w-full px-4 py-2.5 rounded-lg border-2 outline-none font-semibold transition-all text-base\n                                                     bg-background border-input text-foreground focus:border-input focus:ring-ring/50\"\n                                        />\n                                    </div>\n\n                                    <div className=\"flex flex-col sm:flex-row gap-4\">\n                                        <div className=\"flex-1 space-y-1.5\">\n                                            <label className=\"text-sm font-medium text-muted-foreground\">Timezone</label>\n                                            <div className=\"relative\">\n                                                <select title='timezone'\n                                                    name=\"timezone\"\n                                                    value={formData.timezone}\n                                                    onChange={handleChange}\n                                                    className=\"w-full px-4 py-2.5 rounded-lg border-2 appearance-none outline-none text-base font-semibold\n                                                             bg-background border-input text-foreground focus:border-input focus:ring-ring/50\"\n                                                >\n                                                    <option>GMT-8</option>\n                                                    <option>GMT+5</option>\n                                                </select>\n                                                <ChevronDown size={20} className=\"absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-foreground/40\" />\n                                            </div>\n                                        </div>\n                                        <div className=\"flex-1 space-y-1.5\">\n                                            <label className=\"text-sm font-medium text-muted-foreground\">Working hours</label>\n                                            <div className=\"relative\">\n                                                <input title='workingHours'\n                                                    name=\"workingHours\"\n                                                    value={formData.workingHours}\n                                                    onChange={handleChange}\n                                                    className=\"w-full px-4 py-2.5 rounded-lg border-2 outline-none text-sm font-semibold\n                                                             bg-background border-input text-foreground focus:border-input focus:ring-ring/50\"\n                                                />\n                                                <Clock size={18} className=\"absolute right-3 top-1/2 -translate-y-1/2 text-foreground/40\" />\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <div className=\"space-y-1.5\">\n                                        <label className=\"text-sm font-medium text-muted-foreground\">Title</label>\n                                        <input title='title'\n                                            name=\"title\"\n                                            value={formData.title}\n                                            onChange={handleChange}\n                                            className=\"w-full px-4 py-2.5 rounded-lg border-2 outline-none transition-all text-sm font-semibold\n                                                     bg-background border-input text-foreground focus:border-input focus:ring-ring/50\"\n                                        />\n                                    </div>\n                                </div>\n\n                                {/* Divider */}\n                                 <div className=\"w-full h-[1.6px] md:h-auto md:w-[1.6px] border-t md:border-t-0 md:border-l border-dashed border-[#E9E8EB] dark:border-[#48484A]\" />\n\n                                {/* Preview Section */}\n                                <div className=\"flex-1 p-8 px-6 flex flex-col items-center justify-center\">\n                                    <span className=\"text-sm font-medium mb-4 text-muted-foreground\">Preview</span>\n                                    <div className=\"relative mb-4\">\n                                        <img\n                                            src={formData.avatarUrl}\n                                            alt=\"Avatar\"\n                                            className=\"w-32 h-32 rounded-full object-cover object-top shadow-sm ring-1 ring-border\"\n                                        />\n                                        <button title='edit' className=\"absolute bottom-0 right-0 p-2 rounded-full shadow-md border \n                                                                     bg-card border-border text-muted-foreground\n                                                                     hover:text-foreground\">\n                                            <Pencil size={20} />\n                                        </button>\n                                    </div>\n                                    <h3 className=\"text-lg font-bold text-foreground text-center\">{formData.fullName}</h3>\n                                    <p className=\"text-sm mb-4 text-muted-foreground text-center\">{formData.title}</p>\n                                    <div className=\"flex items-center gap-2 px-3 shadow-sm py-1 rounded-full text-xs font-medium \n                                                 bg-muted text-muted-foreground\">\n                                        <Clock size={12} className=\"text-muted-foreground\" />\n                                        <span>{formData.workingHours}</span>\n                                    </div>\n                                </div>\n                            </div>\n\n                            {/* Footer */}\n                            <div className=\"px-6 py-5 md:px-8 flex flex-col-reverse sm:flex-row items-center justify-between gap-4 bg-muted\">\n                                <span className=\"text-xs text-muted-foreground\">\n                                    Last updated: <span className=\"font-medium\">{formData.lastUpdated}</span>\n                                </span>\n                                <div className=\"flex gap-3 w-full sm:w-auto\">\n                                    <button\n                                        onClick={onClose}\n                                        className=\"flex-1 sm:flex-none px-5 py-2 rounded-full text-sm border-2 font-bold transition-colors\n                                                 bg-muted border-border text-foreground hover:bg-muted/80\"\n                                    >\n                                        Cancel\n                                    </button>\n                                    <button\n                                        onClick={() => onSave(formData)}\n                                        className=\"flex-1 sm:flex-none px-5 py-2 rounded-full text-sm font-bold transition-colors shadow-lg\n                                                 bg-foreground text-background hover:bg-foreground/90\"\n                                    >\n                                        Save changes\n                                    </button>\n                                </div>\n                            </div>\n                        </motion.div>\n                    </div>\n                </div>\n            )}\n        </AnimatePresence>\n    );\n};"
    }
  ]
}