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