{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-picker",
  "type": "registry:component",
  "title": "Status Picker",
  "description": "An animated status picker that smoothly transitions between selectable states.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/status-picker.tsx",
      "type": "registry:component",
      "content": "import { CircleDashed, EllipsisIcon, X } from 'lucide-react';\nimport React from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\n\nexport interface StatusPickerItem {\n  id: number;\n  emoji: string;\n  name: string;\n}\n\ninterface StatusPickerProps {\n  items: StatusPickerItem[];\n  value?: number;\n  defaultValue?: number;\n  onChange?: (id: number) => void;\n}\n\nexport const StatusPicker: React.FC<StatusPickerProps> = ({\n  items,\n  value,\n  defaultValue = 0,\n  onChange,\n}) => {\n  const [open, setOpen] = React.useState(false);\n  const [hoveredIdx, setHoveredIdx] = React.useState(0);\n  const [internalStatus, setInternalStatus] = React.useState(defaultValue);\n\n  const isControlled = value !== undefined;\n  const status = isControlled ? value : internalStatus;\n\n  const setStatus = (id: number) => {\n    if (!isControlled) setInternalStatus(id);\n    onChange?.(id);\n  };\n\n  const activeItem = items.find((item) => item.id === status);\n\n  return (\n    <div className=\"flex w-full items-center justify-center\">\n      <div className=\"flex items-center justify-center\">\n        <motion.div\n          layout\n          className=\"relative flex cursor-pointer items-center justify-center gap-1 rounded-full bg-[#F4F4F9] px-4 py-2 dark:bg-zinc-800\"\n          onClick={() => {\n            setOpen(!open);\n          }}\n          transition={{\n            type: 'spring',\n            stiffness: 300,\n            damping: 18,\n          }}\n        >\n          <AnimatePresence mode=\"popLayout\" initial={false}>\n            <motion.div className=\"relative flex min-w-14 cursor-pointer items-center justify-start gap-1 overflow-hidden\">\n              <div className=\"flex items-center justify-center gap-[4px]\">\n                <AnimatePresence mode=\"popLayout\" initial={false}>\n                  {status === 0 ? (\n                    <motion.div\n                      key=\"default\"\n                      className=\"relative\"\n                      initial={{ scale: 0.5, filter: 'blur(4px)', opacity: 0 }}\n                      animate={{ scale: 1, filter: 'blur(0px)', opacity: 1 }}\n                      exit={{ scale: 0.5, filter: 'blur(4px)', opacity: 0 }}\n                      transition={{ duration: 0.2 }}\n                    >\n                      <CircleDashed className=\"size-4 text-sm text-neutral-300\" />\n                      <div className=\"absolute inset-0 flex items-center justify-center\">\n                        <div className=\"size-2 rounded-full border border-neutral-300\" />\n                      </div>\n                    </motion.div>\n                  ) : (\n                    <motion.div\n                      key={`${status}-${activeItem?.emoji}`}\n                      className=\"flex size-6 items-center justify-center\"\n                      initial={{ scale: 0.5, filter: 'blur(2px)', opacity: 0 }}\n                      animate={{ scale: 1, filter: 'blur(0px)', opacity: 1 }}\n                      exit={{ scale: 0.5, filter: 'blur(2px)', opacity: 0 }}\n                      transition={{ duration: 0.2 }}\n                    >\n                      <span>{activeItem?.emoji}</span>\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n\n                <span className=\"flex items-center justify-center text-sm font-medium text-neutral-700 dark:text-zinc-100\">\n                  <AnimatePresence mode=\"popLayout\" initial={false}>\n                    {(status !== 0\n                      ? (activeItem?.name.split('') ?? [])\n                      : 'Status'.split('')\n                    ).map((item, index) => {\n                      if (item === ' ') {\n                        return (\n                          <motion.span\n                            key={`${index}-${status}-space`}\n                            className=\"inline-block w-[0.3em]\"\n                          >\n                            &nbsp;\n                          </motion.span>\n                        );\n                      }\n\n                      return (\n                        <motion.span\n                          key={`${index}-${status}-${item}`}\n                          initial={{\n                            opacity: 0,\n                            y: 5,\n                            filter: 'blur(2px)',\n                            scale: 0.8,\n                          }}\n                          animate={{\n                            opacity: 1,\n                            y: 0,\n                            scale: 1,\n                            filter: 'blur(0px)',\n                            transition: {\n                              type: 'spring',\n                              stiffness: 300,\n                              damping: 25,\n                              delay: index * 0.04,\n                            },\n                          }}\n                          exit={{\n                            y: -8,\n                            opacity: 0,\n                            scale: 0.8,\n                            filter: 'blur(2px)',\n                            transition: {\n                              type: 'spring',\n                              stiffness: 300,\n                              damping: 25,\n                              delay: index * 0.03,\n                            },\n                          }}\n                          className=\"inline-block tracking-normal\"\n                        >\n                          {item}\n                        </motion.span>\n                      );\n                    })}\n                  </AnimatePresence>\n\n                  <AnimatePresence mode=\"popLayout\">\n                    {status !== 0 && (\n                      <motion.span\n                        className=\"ml-2 flex items-center justify-center rounded-full bg-gray-300 p-[4px] text-sm font-medium text-neutral-400 dark:bg-zinc-700\"\n                        key={`${status}-space`}\n                        initial={{\n                          opacity: 0,\n                          filter: 'blur(2px)',\n                          scale: 0.8,\n                        }}\n                        animate={{\n                          opacity: 1,\n                          scale: 1,\n                          filter: 'blur(0px)',\n                          transition: {\n                            duration: 0.2,\n                          },\n                        }}\n                        exit={{\n                          opacity: 0,\n                          scale: 0.8,\n                          filter: 'blur(4px)',\n                          transition: {\n                            duration: 0.1,\n                          },\n                        }}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          setStatus(0);\n                        }}\n                      >\n                        <X className=\"size-2 text-sm text-white\" />\n                      </motion.span>\n                    )}\n                  </AnimatePresence>\n                </span>\n              </div>\n            </motion.div>\n          </AnimatePresence>\n\n          <AnimatePresence mode=\"popLayout\">\n            {open && (\n              <motion.div\n                className=\"absolute -translate-y-[100%] rounded-3xl border border-gray-100 bg-white p-1 dark:border-white/10 dark:bg-zinc-900\"\n                initial={{\n                  opacity: 0,\n                  scale: 0.5,\n                  filter: 'blur(2px)',\n                }}\n                animate={{\n                  opacity: 1,\n                  scale: 1,\n                  filter: 'blur(0px)',\n                }}\n                exit={{\n                  opacity: 0,\n                  scale: 0.5,\n                  filter: 'blur(4px)',\n                }}\n                transition={{\n                  type: 'spring',\n                  stiffness: 300,\n                  damping: 18,\n                }}\n              >\n                <div className=\"flex items-center justify-center gap-1\">\n                  {items.map((item, index) => (\n                    <motion.div\n                      key={index}\n                      onMouseEnter={() => {\n                        setHoveredIdx(item.id);\n                      }}\n                      onMouseLeave={() => {\n                        setHoveredIdx(0);\n                      }}\n                      className=\"group relative flex cursor-pointer items-center justify-center gap-1 rounded-full bg-[#F4F4F9] p-2 dark:border-white/10 dark:bg-white/5\"\n                      whileHover={{ y: -2 }}\n                      transition={{\n                        type: 'spring',\n                        stiffness: 300,\n                        damping: 18,\n                      }}\n                    >\n                      <AnimatePresence mode=\"popLayout\">\n                        {hoveredIdx === item.id && (\n                          <motion.div\n                            className=\"absolute -top-[40px] left-2 -translate-y-2 rounded-full border border-gray-100 bg-[#F4F4F9] dark:border-white/10 dark:bg-white/5\"\n                            initial={{\n                              opacity: 0,\n                              scale: 0.5,\n                              filter: 'blur(4px)',\n                            }}\n                            animate={{\n                              opacity: 1,\n                              scale: 1,\n                              filter: 'blur(0px)',\n                            }}\n                            exit={{\n                              opacity: 0,\n                              scale: 0.5,\n                              filter: 'blur(4px)',\n                            }}\n                            transition={{\n                              type: 'spring',\n                              stiffness: 300,\n                              damping: 23,\n                            }}\n                          >\n                            <div className=\"relative flex w-full flex-col items-center px-2 py-1\">\n                              <div className=\"text-sm font-medium whitespace-nowrap text-neutral-700 dark:text-zinc-100\">\n                                {item.name}\n                              </div>\n\n                              <div className=\"absolute -bottom-[12px] left-4\">\n                                <div className=\"h-[6px] w-[13px] rounded-b-full border bg-[#F4F4F9] dark:bg-zinc-800\" />\n                                <div className=\"size-1.5 -translate-x-[2px] translate-y-[1px] rounded-full border bg-[#F4F4F9] dark:bg-zinc-800\" />\n                              </div>\n                            </div>\n                          </motion.div>\n                        )}\n                      </AnimatePresence>\n\n                      <div\n                        className=\"flex size-6 items-center justify-center transition-all duration-200 ease-in-out group-hover:scale-110\"\n                        onClick={() => {\n                          setStatus(item.id);\n                        }}\n                      >\n                        <div>{item.emoji}</div>\n                      </div>\n                    </motion.div>\n                  ))}\n\n                  <div className=\"flex items-center justify-center gap-1 rounded-full bg-[#F4F4F9] dark:bg-zinc-800 p-2\">\n                    <EllipsisIcon className=\"size-6 text-sm text-neutral-400\" />\n                  </div>\n                </div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </motion.div>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}