{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slot-picker",
  "type": "registry:component",
  "title": "Slot Picker",
  "description": "A premium scheduling component for managing time slots with fluid spring animations and tactile toggles.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/slot-picker.tsx",
      "type": "registry:component",
      "content": "import { useState } from 'react';\nimport { motion, AnimatePresence, LayoutGroup } from 'motion/react';\nimport { Plus, X } from 'lucide-react';\n\ninterface TimeSlot {\n    id: string;\n    from: string;\n    to: string;\n}\n\ninterface DayData {\n    id: string;\n    label: string;\n    enabled: boolean;\n    slots: TimeSlot[];\n}\n\ninterface SlotPickerProps {\n    days: DayData[];\n    onUpdate?: (days: DayData[]) => void;\n}\n\nconst springConfig = {\n    type: \"spring\",\n    stiffness: 500,\n    damping: 30,\n    mass: 1\n} as const;\n\nexport const SlotPicker = ({ days: initialDays, onUpdate }: SlotPickerProps) => {\n    const [days, setDays] = useState<DayData[]>(initialDays);\n\n\n    const updateSlotValue = (dayId: string, slotId: string, field: 'from' | 'to', value: string) => {\n        const newDays = days.map((day) => {\n            if (day.id === dayId) {\n                return {\n                    ...day,\n                    slots: day.slots.map((slot) =>\n                        slot.id === slotId ? { ...slot, [field]: value } : slot\n                    ),\n                };\n            }\n            return day;\n        });\n        setDays(newDays);\n        onUpdate?.(newDays);\n    };\n\n    const toggleDay = (id: string) => {\n        const newDays = days.map((day) => {\n            if (day.id === id) {\n                const enabled = !day.enabled;\n                const slots = enabled && day.slots.length === 0\n                    ? [{ id: Math.random().toString(), from: '7:00 AM', to: '8:00 AM' }]\n                    : day.slots;\n                return { ...day, enabled, slots };\n            }\n            return day;\n        });\n        setDays(newDays);\n        onUpdate?.(newDays);\n    };\n\n    const addSlot = (dayId: string) => {\n        const newDays = days.map((day) => {\n            if (day.id === dayId) {\n                return {\n                    ...day,\n                    slots: [...day.slots, { id: Math.random().toString(), from: '9:00 AM', to: '10:00 AM' }]\n                };\n            }\n            return day;\n        });\n        setDays(newDays);\n        onUpdate?.(newDays);\n    };\n\n    const removeSlot = (dayId: string, slotId: string) => {\n        const newDays = days.map((day) => {\n            if (day.id === dayId) {\n                const filteredSlots = day.slots.filter(s => s.id !== slotId);\n                return {\n                    ...day,\n                    slots: filteredSlots,\n                    enabled: filteredSlots.length > 0\n                };\n            }\n            return day;\n        });\n        setDays(newDays);\n        onUpdate?.(newDays);\n    };\n\n    return (\n        <div className=\"flex flex-col gap-4 w-xs sm:w-sm px-3 py-1.5\">\n            <LayoutGroup>\n                {days.map((day) => (\n                    <motion.div\n                        layout\n                        key={day.id}\n                        initial={false}\n                        transition={springConfig}\n                        className={`overflow-hidden rounded-[16px] transition-colors duration-300 border-[1.6px] ${day.enabled\n                            ? 'bg-white border-[#E6E6E9] shadow-sm dark:bg-[#1C1C1F] dark:border-[#2C2C30] dark:shadow-lg'\n                            : 'bg-[#F6F5FA] border-transparent dark:bg-[#161618]'\n                            }`}\n                    >\n                        {/* Header */}\n                        <motion.div layout transition={springConfig} className=\"flex items-center justify-between px-5 h-[56px]\">\n                            <span className=\"text-[16px] font-semibold transition-colors text-[#68686F] dark:text-[#E1E1E6]\">\n                                {day.label}\n                            </span>\n\n                            <button title='switch'\n                                onClick={() => toggleDay(day.id)}\n                                className={`relative w-12 h-7 rounded-full transition-colors shadow-sm duration-300 ${day.enabled ? 'bg-[#515158] dark:bg-[#4B4B52]' : 'bg-[#E5E4EE] dark:bg-[#2C2C30]'}`}\n                            >\n                                <motion.div\n                                    layout\n                                    className=\"absolute top-1 left-1 w-5 h-5 bg-white rounded-full shadow-sm\"\n                                    animate={{ x: day.enabled ? 20 : 0 }}\n                                    transition={springConfig}\n                                />\n                            </button>\n                        </motion.div>\n\n                        {/* Slots Area */}\n                        <AnimatePresence>\n                            {day.enabled && (\n                                <motion.div\n                                    initial={{ height: 0, opacity: 0 }}\n                                    animate={{ height: 'auto', opacity: 1 }}\n                                    exit={{ height: 0, opacity: 0 }}\n                                    transition={springConfig}\n                                >\n                                    <div className=\"px-5 pb-5 flex flex-col gap-3\">\n                                        <AnimatePresence mode=\"popLayout\">\n                                            {day.slots.map((slot) => (\n                                                <motion.div\n                                                    key={slot.id}\n                                                    layout\n                                                    initial={{ opacity: 0, scale: 0.9, y: -10 }}\n                                                    animate={{ opacity: 1, scale: 1, y: 0 }}\n                                                    exit={{ opacity: 0, scale: 0.9, y: -10 }}\n                                                    transition={springConfig}\n                                                    className=\"flex items-center gap-2\"\n                                                >\n                                                    <div className=\"flex items-center gap-2 flex-1\">\n                                                        <span className=\"text-[13px] w-8 text-[#ADACB3] dark:text-[#7C7C85]\">From</span>\n                                                        <input\n                                                            type=\"text\"\n                                                            value={slot.from}\n                                                            onChange={(e) => updateSlotValue(day.id, slot.id, 'from', e.target.value)}\n                                                            aria-label=\"Start time\"\n                                                            className=\"flex-1 w-24 border-[1.6px] rounded-md px-2 py-1 text-[14px] font-medium focus:outline-none uppercase transition-colors bg-[#FEFEFE] border-[#F0EFF3] text-[#6D6C71] focus:border-[#ADACB3] dark:bg-[#121214] dark:border-[#2C2C30] dark:text-[#E1E1E6] dark:focus:border-[#4B4B52]\"\n                                                        />\n\n                                                        <span className=\"text-[13px] text-[#ADACB3] dark:text-[#7C7C85]\">To</span>\n                                                        <input\n                                                            type=\"text\"\n                                                            value={slot.to}\n                                                            aria-label=\"End time\"\n                                                            onChange={(e) => updateSlotValue(day.id, slot.id, 'to', e.target.value)}\n                                                            className=\"flex-1 w-24 border-[1.6px] rounded-md px-2 py-1 text-[14px] font-medium focus:outline-none uppercase transition-colors bg-[#FEFEFE] border-[#F0EFF3] text-[#6D6C71] focus:border-[#ADACB3] dark:bg-[#121214] dark:border-[#2C2C30] dark:text-[#E1E1E6] dark:focus:border-[#4B4B52]\"\n                                                        />\n                                                    </div>\n                                                    <button title='close'\n                                                        onClick={() => removeSlot(day.id, slot.id)}\n                                                        className=\"p-2 transition-colors duration-300 rounded-md text-[#ADACB3] bg-[#F6F5FA] hover:bg-[#d1d0d4]/40 hover:text-[#9f9ea4] dark:text-[#7C7C85] dark:bg-[#2C2C30] dark:hover:bg-[#3A3A40] dark:hover:text-[#E1E1E6]\"\n                                                    >\n                                                        <X strokeWidth={2} size={18} />\n                                                    </button>\n                                                </motion.div>\n                                            ))}\n                                        </AnimatePresence>\n\n                                        <motion.button\n                                            layout\n                                            transition={springConfig}\n                                            onClick={() => addSlot(day.id)}\n                                            className=\"flex items-center justify-center gap-2.5 w-full py-1.5 mt-1 border-[1.2px] rounded-md text-[14px] font-semibold transition-colors duration-300 bg-[#F6F5FA] border-[#F5F4F9] text-[#6E6D74] hover:bg-[#efeded] dark:bg-[#2C2C30] dark:border-[#3A3A40] dark:text-[#E1E1E6] dark:hover:bg-[#3A3A40]\"\n                                        >\n                                            <Plus size={16} className=\"text-[#6E6D74] dark:text-[#E1E1E6]\" />\n                                            Add More\n                                        </motion.button>\n                                    </div>\n                                </motion.div>\n                            )}\n                        </AnimatePresence>\n                    </motion.div>\n                ))}\n            </LayoutGroup>\n        </div>\n    );\n};"
    }
  ]
}