{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "event-reminders",
  "type": "registry:component",
  "title": "Event Reminders",
  "description": "Set and manage event reminders with lightweight interactive scheduling controls.",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/event-reminders.tsx",
      "type": "registry:component",
      "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence, LayoutGroup } from 'motion/react';\nimport { Minus, Plus, X, ChevronUp, ChevronDown } from 'lucide-react';\nimport { FaBell, FaCheck } from 'react-icons/fa6';\nimport { MdEmail } from 'react-icons/md';\nimport { BiSolidPencil } from 'react-icons/bi';\n\nexport type ReminderType = 'Notification' | 'Email';\nexport type TimeUnit = 'minutes' | 'hours' | 'days';\n\nexport interface Reminder {\n  id: string;\n  type: ReminderType;\n  value: number;\n  unit: TimeUnit;\n}\n\nconst NumberRoller = ({ value }: { value: number }) => {\n  const [prevValue, setPrevValue] = React.useState(value);\n  const [direction, setDirection] = React.useState(1);\n\n  if (prevValue !== value) {\n    setDirection(value >= prevValue ? 1 : -1);\n    setPrevValue(value);\n  }\n\n  const variants = {\n    initial: (d: number) => ({\n      y: d * 5,\n      opacity: 0,\n      scale: 0,\n      filter: 'blur(2px)',\n    }),\n    animate: { y: 0, opacity: 1, scale: 1, filter: 'blur(0px)' },\n    exit: (d: number) => ({\n      y: d * -5,\n      opacity: 0,\n      scale: 0,\n      filter: 'blur(2px)',\n    }),\n  };\n\n  const strValue = value.toString().padStart(2, '0');\n\n  return (\n    <div className=\"flex items-center justify-center overflow-hidden\">\n      {strValue.split('').map((char, i) => (\n        <div key={i} className=\"relative flex items-center justify-center\">\n          <span className=\"invisible text-lg font-bold tabular-nums\">\n            {char}\n          </span>\n          <AnimatePresence custom={direction} initial={false}>\n            <motion.span\n              key={char}\n              custom={direction}\n              variants={variants}\n              initial=\"initial\"\n              animate=\"animate\"\n              exit=\"exit\"\n              transition={{ type: 'spring', bounce: 0, duration: 0.3 }}\n              className=\"absolute text-lg font-bold text-neutral-900 tabular-nums dark:text-white\"\n            >\n              {char}\n            </motion.span>\n          </AnimatePresence>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nconst AnimatedWord = ({ word }: { word: string }) => {\n  return (\n    <div className=\"relative flex items-center overflow-hidden\">\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        {word.split('').map((char, i) => (\n          <motion.span\n            key={`${char}-${i}`}\n            initial={{ y: 5, opacity: 0 }}\n            animate={{ y: 0, opacity: 1 }}\n            exit={{ y: -5, opacity: 0 }}\n            transition={{\n              type: 'spring',\n              bounce: 0,\n              duration: 0.3,\n              delay: i * 0.0175,\n            }}\n            className=\"inline-block font-semibold text-neutral-800 dark:text-neutral-200\"\n          >\n            {i === 0 ? char.toUpperCase() : char}\n          </motion.span>\n        ))}\n      </AnimatePresence>\n    </div>\n  );\n};\n\ninterface EventRemindersProps {\n  title: string;\n  date: string;\n  initialReminders?: Reminder[];\n  onUpdate?: (reminders: Reminder[]) => void;\n}\n\nexport const EventReminders: React.FC<EventRemindersProps> = ({\n  title,\n  date: initialDate,\n  initialReminders = [],\n}) => {\n  const [reminders, setReminders] = useState<Reminder[]>(initialReminders);\n  const [date, setDate] = useState(initialDate);\n  const [isEditingDate, setIsEditingDate] = useState(false);\n\n  const basePill =\n    'border-[1.6px] rounded-full transition-colors bg-white border-neutral-200 dark:bg-neutral-900 dark:border-neutral-800';\n\n  const softBtn =\n    'p-2 rounded-full transition-colors bg-neutral-100 text-neutral-500 hover:text-neutral-900 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:text-white';\n\n  const addReminder = () => {\n    setReminders([\n      ...reminders,\n      {\n        id: crypto.randomUUID(),\n        type: 'Notification',\n        value: 5,\n        unit: 'minutes',\n      },\n    ]);\n  };\n\n  const removeReminder = (id: string) =>\n    setReminders(reminders.filter((r) => r.id !== id));\n\n  const updateReminder = (id: string, updates: Partial<Reminder>) =>\n    setReminders(\n      reminders.map((r) => (r.id === id ? { ...r, ...updates } : r)),\n    );\n\n  const toggleUnit = (id: string, current: TimeUnit) => {\n    const units: TimeUnit[] = ['minutes', 'hours', 'days'];\n    const next = units[(units.indexOf(current) + 1) % units.length];\n    updateReminder(id, { unit: next });\n  };\n\n  return (\n    <div className=\"flex min-h-full flex-col items-center justify-center bg-transparent p-4 antialiased\">\n      <motion.div\n        layout\n        transition={{\n          type: 'spring',\n          bounce: 0.2,\n          duration: 0.5,\n        }}\n        className=\"w-full max-w-100 rounded-[32px] border-2 border-neutral-200 bg-white p-6 shadow-lg transition-colors dark:border-neutral-800 dark:bg-neutral-900\"\n      >\n        {/* Header */}\n        <div className=\"mb-6 flex items-start justify-between gap-3\">\n          <div className=\"min-w-0 flex-1\">\n            <h2 className=\"leading-tight text-lg font-bold text-neutral-900 sm:text-xl dark:text-white\">\n              {title}\n            </h2>\n\n            <AnimatePresence mode=\"wait\">\n              {isEditingDate ? (\n                <motion.input\n                  key=\"edit-date\"\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  value={date}\n                  onChange={(e) => setDate(e.target.value)}\n                  onKeyDown={(e) =>\n                    e.key === 'Enter' && setIsEditingDate(false)\n                  }\n                  autoFocus\n                  className=\"mt-2 w-full rounded border-b-2 border-neutral-300 bg-neutral-100 px-2 py-1 font-semibold text-neutral-600 outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300\"\n                />\n              ) : (\n                <motion.p\n                  key=\"view-date\"\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  className=\"mt-2 font-semibold text-neutral-600 dark:text-neutral-400\"\n                >\n                  {date}\n                </motion.p>\n              )}\n            </AnimatePresence>\n          </div>\n\n          <button\n            onClick={() => setIsEditingDate(!isEditingDate)}\n            className=\"rounded-lg border-2 border-neutral-200 bg-white p-2 text-neutral-600 transition-colors hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700\"\n          >\n            {isEditingDate ? (\n              <FaCheck size={20} />\n            ) : (\n              <BiSolidPencil size={20} />\n            )}\n          </button>\n        </div>\n\n        {/* List */}\n        <div className=\"border-t border-dashed border-neutral-200 pt-2 dark:border-neutral-800\">\n          <LayoutGroup>\n            <AnimatePresence mode=\"popLayout\">\n              {reminders.map((reminder) => (\n                <motion.div\n                  key={reminder.id}\n                  layout\n                  initial={{ opacity: 0, y: 10 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  exit={{ opacity: 0, y: -10 }}\n                  transition={{\n                    type: 'spring',\n                    bounce: 0.2,\n                    duration: 0.5,\n                  }}\n                  className=\"space-y-3 border-b border-dashed border-neutral-200 py-4 dark:border-neutral-800\"\n                >\n                  {/* Type */}\n                  <motion.div\n                    layout\n                    onClick={() =>\n                      updateReminder(reminder.id, {\n                        type:\n                          reminder.type === 'Notification'\n                            ? 'Email'\n                            : 'Notification',\n                      })\n                    }\n                    className={`${basePill} flex cursor-pointer items-center justify-between px-4 py-2`}\n                  >\n                    <div className=\"flex items-center gap-3\">\n                      <AnimatePresence mode=\"popLayout\" initial={false}>\n                        <motion.div\n                          key={reminder.type}\n                          initial={{ y: 5, opacity: 0, filter: 'blur(4px)' }}\n                          animate={{ y: 0, opacity: 1, filter: 'blur(0px)' }}\n                          exit={{ y: -5, opacity: 0, filter: 'blur(4px)' }}\n                          transition={{\n                            type: 'spring',\n                            bounce: 0,\n                            duration: 0.5,\n                          }}\n                        >\n                          {reminder.type === 'Notification' ? (\n                            <FaBell size={18} className=\"text-neutral-400\" />\n                          ) : (\n                            <MdEmail size={18} className=\"text-neutral-400\" />\n                          )}\n                        </motion.div>\n                      </AnimatePresence>\n                      <AnimatedWord word={reminder.type} />\n                    </div>\n                    <div className=\"flex flex-col -space-y-1 text-neutral-400\">\n                      <ChevronUp size={14} strokeWidth={3} />\n                      <ChevronDown size={14} strokeWidth={3} />\n                    </div>\n                  </motion.div>\n\n                  {/* Value + Unit */}\n                  <div className=\"flex flex-wrap sm:flex-nowrap items-center gap-2 relative\">\n                    <div\n                      className={`${basePill} flex flex-1 min-w-[120px] items-center justify-between px-2 py-1`}\n                    >\n                      <button\n                        onClick={() =>\n                          updateReminder(reminder.id, {\n                            value: Math.max(1, reminder.value - 1),\n                          })\n                        }\n                        className={softBtn}\n                      >\n                        <Minus size={16} />\n                      </button>\n\n                      <NumberRoller value={reminder.value} />\n\n                      <button\n                        onClick={() =>\n                          updateReminder(reminder.id, {\n                            value: reminder.value + 1,\n                          })\n                        }\n                        className={softBtn}\n                      >\n                        <Plus size={16} />\n                      </button>\n                    </div>\n\n                    <motion.div\n                      layout\n                      onClick={() => toggleUnit(reminder.id, reminder.unit)}\n                      className={`${basePill} flex flex-[1.4] min-w-[120px] cursor-pointer items-center justify-between px-4 py-2`}\n                    >\n                      <AnimatedWord word={reminder.unit} />\n                      <div className=\"flex flex-col -space-y-1 text-neutral-400\">\n                        <ChevronUp size={14} strokeWidth={3} />\n                        <ChevronDown size={14} strokeWidth={3} />\n                      </div>\n                    </motion.div>\n\n                    <button\n                      onClick={() => removeReminder(reminder.id)}\n                      className=\"shrink-0 rounded-full border border-neutral-200 p-2.5 sm:p-3 text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-red-500 dark:border-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-800\"\n                    >\n                      <X size={18} strokeWidth={2.5} />\n                    </button>\n                  </div>\n                </motion.div>\n              ))}\n            </AnimatePresence>\n          </LayoutGroup>\n        </div>\n\n        {/* Add Button */}\n        <motion.button\n          onClick={addReminder}\n          className=\"mt-6 flex w-full items-center justify-center gap-2 rounded-2xl bg-neutral-100 py-3 font-semibold text-neutral-800 transition-colors hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700\"\n        >\n          <Plus size={18} strokeWidth={2.5} />\n          Add Reminder\n        </motion.button>\n      </motion.div>\n    </div>\n  );\n};\n"
    }
  ]
}