{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "day-picker",
  "title": "Day Picker",
  "description": "A custom day picker component with smooth animations.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/day-picker.tsx",
      "content": "\"use client\";\r\nimport {\r\n  Tick02Icon,\r\n  CodeIcon,\r\n  UnfoldMoreIcon,\r\n} from \"@hugeicons/core-free-icons\";\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\nimport { useState } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { AnimatePresence, motion } from \"motion/react\";\r\n\r\nconst days = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\r\ntype options = \"Daily\" | \"Weekly\" | \"Monthly\" | \"Yearly\";\r\n// Change Here\r\nconst options: options[] = [\"Daily\", \"Weekly\", \"Monthly\", \"Yearly\"];\r\n\r\nconst springTransition = {\r\n  type: \"spring\",\r\n  damping: 30,\r\n  stiffness: 400,\r\n  mass: 1,\r\n} as const;\r\n\r\nexport default function TwentyThreeFour() {\r\n  const [day, setDay] = useState(1);\r\n  const [option, setOption] = useState<options>(\"Daily\");\r\n  const [isOptionOpen, setisOptionOpen] = useState(false);\r\n  const [isSelectorOpen, setIsSelectorOpen] = useState(true);\r\n\r\n  return (\r\n    <div className=\"w-full h-full  flex justify-center items-center font-medium text-sm\">\r\n      <motion.div\r\n        layout\r\n        transition={springTransition}\r\n        className=\"flex flex-col gap-1.5 shadow-lg overflow-hidden rounded-3xl bg-muted p-1.5 max-w-xs w-full\"\r\n      >\r\n        <div className=\"flex justify-between items-center relative\">\r\n          <motion.div\r\n            layout\r\n            animate={{\r\n              filter: isOptionOpen ? \"blur(8px)\" : \"blur(0px)\",\r\n            }}\r\n            transition={springTransition}\r\n            className=\"px-3 text-muted-foreground h-full flex items-center justify-center py-2 \"\r\n          >\r\n            Frequency\r\n          </motion.div>\r\n          {isOptionOpen ? (\r\n            <div className=\"absolute w-full h-full flex justify-between gap-2 p-0\">\r\n              <motion.div className=\"flex justify-between w-full relative items-center rounded-3xl \">\r\n                <motion.div\r\n                  layout\r\n                  transition={springTransition}\r\n                  layoutId=\"options\"\r\n                  className=\"absolute w-full rounded-3xl bg-background h-full\"\r\n                ></motion.div>\r\n\r\n                <div className=\"flex justify-between px-1\">\r\n                  {options.map((op) => {\r\n                    return (\r\n                      <motion.div\r\n                        key={op}\r\n                        layout\r\n                        initial={{\r\n                          filter: \"blur(8px)\",\r\n                          opacity: 0,\r\n                        }}\r\n                        animate={{\r\n                          filter: \"blur(0px)\",\r\n                          opacity: 1,\r\n                        }}\r\n                        onClick={() => {\r\n                          setOption(op);\r\n                          setIsSelectorOpen(true);\r\n                        }}\r\n                        className={cn(\r\n                          \"px-2 cursor-pointer py-1 rounded-[24px] text-muted-foreground relative transition-colors duration-300\",\r\n                          option === op && \"text-foreground\"\r\n                        )}\r\n                      >\r\n                        {option === op && (\r\n                          <motion.div\r\n                            layoutId=\"optionToSelect\"\r\n                            transition={springTransition}\r\n                            className=\"w-full h-full absolute inset-0 bg-secondary rounded-3xl\"\r\n                          ></motion.div>\r\n                        )}\r\n                        <span className=\"relative z-10\">{op}</span>\r\n                      </motion.div>\r\n                    );\r\n                  })}\r\n                </div>\r\n              </motion.div>\r\n              <AnimatePresence>\r\n                <motion.div\r\n                  key=\"check-button\"\r\n                  layoutId=\"button\"\r\n                  onClick={() => {\r\n                    setisOptionOpen(false);\r\n                    setIsSelectorOpen(false);\r\n                  }}\r\n                  initial={{\r\n                    filter: \"blur(1px)\",\r\n                    opacity: 0.6,\r\n                  }}\r\n                  animate={{\r\n                    filter: \"blur(0px)\",\r\n                    opacity: 1,\r\n                  }}\r\n                  exit={{\r\n                    filter: \"blur(1px)\",\r\n                    opacity: 0.6,\r\n                  }}\r\n                  transition={springTransition}\r\n                  style={{ borderRadius: 24 }}\r\n                  className=\"bg-primary px-[10px] justify-center text-primary-foreground flex h-full items-center cursor-pointer\"\r\n                >\r\n                  <HugeiconsIcon icon={Tick02Icon} size={16} />\r\n                </motion.div>\r\n              </AnimatePresence>\r\n            </div>\r\n          ) : (\r\n            <motion.div\r\n              onClick={() => setisOptionOpen(true)}\r\n              className=\"rounded-full w-fit px-0 p-0 relative flex gap-0 items-center cursor-pointer\"\r\n            >\r\n              <motion.div\r\n                layout\r\n                transition={springTransition}\r\n                layoutId=\"options\"\r\n                className=\"absolute h-full w-full bg-background rounded-[24px]\"\r\n              ></motion.div>\r\n              <motion.div\r\n                initial={false}\r\n                className=\"pl-3 py-0 relative cursor-default text-foreground\"\r\n                layoutId={option}\r\n              >\r\n                {option === \"Weekly\" ? option + \", \" + days[day] : option}\r\n              </motion.div>\r\n              <AnimatePresence initial={false}>\r\n                <motion.div\r\n                  key=\"code-icon\"\r\n                  layoutId=\"button\"\r\n                  className=\"text-muted-foreground justify-center flex items-center w-fit h-fit px-3 pl-2 py-[10px]\"\r\n                >\r\n                  <HugeiconsIcon\r\n                    icon={UnfoldMoreIcon}\r\n                    size={14}\r\n                    className=\"-rotate-90\"\r\n                  />\r\n                </motion.div>\r\n              </AnimatePresence>\r\n            </motion.div>\r\n          )}\r\n        </div>\r\n        <AnimatePresence mode=\"popLayout\">\r\n          {isSelectorOpen && option === \"Weekly\" && (\r\n            <motion.div\r\n              initial={{\r\n                opacity: 0,\r\n                y: -10,\r\n                filter: \"blur(8px)\",\r\n              }}\r\n              animate={{\r\n                opacity: 1,\r\n                y: 0,\r\n                filter: \"blur(0px)\",\r\n              }}\r\n              exit={{\r\n                opacity: 0,\r\n                y: -10,\r\n                filter: \"blur(8px)\",\r\n              }}\r\n              transition={springTransition}\r\n              className=\"flex justify-between text-muted-foreground px-2 bg-background overflow-hidden rounded-full py-1\"\r\n            >\r\n              {days.map((d, index) => {\r\n                return (\r\n                  <motion.div\r\n                    key={d}\r\n                    layout\r\n                    initial={{\r\n                      filter: \"blur(8px)\",\r\n                      opacity: 0,\r\n                    }}\r\n                    animate={{\r\n                      filter: \"blur(0px)\",\r\n                      opacity: 1,\r\n                    }}\r\n                    exit={{\r\n                      filter: \"blur(8px)\",\r\n                      opacity: 0,\r\n                    }}\r\n                    transition={{\r\n                      ...springTransition,\r\n                      delay: index * 0.03,\r\n                    }}\r\n                    onClick={() => setDay(index)}\r\n                    className={cn(\r\n                      \"px-2 py-1 rounded-3xl relative transition-colors duration-300 cursor-pointer\",\r\n                      index === day\r\n                        ? \"text-foreground\"\r\n                        : \"text-muted-foreground\"\r\n                    )}\r\n                  >\r\n                    <span className=\"relative z-10\">{d}</span>\r\n                    {index === day && (\r\n                      <motion.div\r\n                        transition={springTransition}\r\n                        layoutId=\"dayOptions\"\r\n                        className=\"absolute h-full w-full bg-secondary inset-0 rounded-3xl \"\r\n                      ></motion.div>\r\n                    )}\r\n                  </motion.div>\r\n                );\r\n              })}\r\n            </motion.div>\r\n          )}\r\n        </AnimatePresence>\r\n      </motion.div>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}