{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "list-item",
  "title": "List Item",
  "description": "Interactive list items with hover and focus effects.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/list-item.tsx",
      "content": "\"use client\";\r\nimport { motion, MotionConfig } from \"motion/react\";\r\nimport { Dispatch, SetStateAction, useState } from \"react\";\r\nimport clsx from \"clsx\";\r\n\r\nimport {\r\n  Appointment01Icon,\r\n  BalloonsIcon,\r\n  GoogleMapsIcon,\r\n  ZoomIcon,\r\n  ReminderIcon,\r\n  TaskDaily01Icon,\r\n  Tick02Icon,\r\n  FilterHorizontalIcon,\r\n} from \"@hugeicons/core-free-icons\";\r\nimport { HugeiconsFreeIcons } from \"@hugeicons/core-free-icons\";\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\n\r\nexport type FilterKey = (typeof filterKeys)[number];\r\n\r\n// Change Here\r\nexport const filterKeys = [\r\n  {\r\n    name: \"tasks\",\r\n    Icon: ({ size }: { size: number }) => (\r\n      <HugeiconsIcon icon={TaskDaily01Icon} size={size} />\r\n    ),\r\n  },\r\n  {\r\n    name: \"events\",\r\n    Icon: ({ size }: { size: number }) => (\r\n      <HugeiconsIcon icon={GoogleMapsIcon} size={size} />\r\n    ),\r\n  },\r\n  {\r\n    name: \"reminders\",\r\n    Icon: ({ size }: { size: number }) => (\r\n      <HugeiconsIcon icon={ReminderIcon} size={size} />\r\n    ),\r\n  },\r\n  {\r\n    name: \"appointments\",\r\n    Icon: ({ size }: { size: number }) => (\r\n      <HugeiconsIcon icon={Appointment01Icon} size={size} />\r\n    ),\r\n  },\r\n  {\r\n    name: \"meetings\",\r\n    Icon: ({ size }: { size: number }) => (\r\n      <HugeiconsIcon icon={ZoomIcon} size={size} />\r\n    ),\r\n  },\r\n  {\r\n    name: \"celebrations\",\r\n    Icon: ({ size }: { size: number }) => (\r\n      <HugeiconsIcon icon={BalloonsIcon} size={size} />\r\n    ),\r\n  },\r\n];\r\n\r\nfunction ListItem(props: {\r\n  index: number;\r\n  filterKey: FilterKey;\r\n  selectedFilterKey: FilterKey;\r\n  setSelectedFilterKey: Dispatch<SetStateAction<FilterKey>>;\r\n  setIsOpened: Dispatch<SetStateAction<boolean>>;\r\n}) {\r\n  const {\r\n    index,\r\n    filterKey,\r\n    selectedFilterKey,\r\n    setSelectedFilterKey,\r\n    setIsOpened,\r\n  } = props;\r\n  const delay = (index + 8) * 0.025;\r\n\r\n  return (\r\n    <motion.div\r\n      initial={{ opacity: 0, y: 40 }}\r\n      animate={{ opacity: 1, y: 0 }}\r\n      transition={{\r\n        type: \"spring\",\r\n        bounce: 0.1,\r\n        duration: 0.25,\r\n        delay,\r\n        ease: [0.215, 0.61, 0.355, 1],\r\n      }}\r\n      onClick={() => {\r\n        setSelectedFilterKey(filterKey);\r\n\r\n        setTimeout(() => {\r\n          setIsOpened(false);\r\n        }, 150);\r\n      }}\r\n      className=\"px-3 py-2 rounded-2xl flex justify-between items-center cursor-default hover:bg-accent  text-foreground\"\r\n    >\r\n      <div className=\"flex items-center gap-x-3\">\r\n        <span className=\"text-muted-foreground\">\r\n          <filterKey.Icon size={24} />\r\n        </span>\r\n        <span className=\"capitalize\">{filterKey.name}</span>\r\n      </div>\r\n      <div\r\n        className={clsx(\r\n          \"relative border-border w-6 h-6 overflow-hidden rounded-full\",\r\n          selectedFilterKey.name == filterKey.name\r\n            ? \"border-none\"\r\n            : \"border-[2px]\"\r\n        )}\r\n      >\r\n        {selectedFilterKey.name == filterKey.name && (\r\n          <div className=\"absolute inset-0 bg-primary flex justify-center items-center text-primary-foreground\">\r\n            <HugeiconsIcon icon={Tick02Icon} size={16} />\r\n          </div>\r\n        )}\r\n      </div>\r\n    </motion.div>\r\n  );\r\n}\r\n\r\nconst FilterInteraction = () => {\r\n  const [selectedFilterKey, setSelectedFilterKey] = useState(filterKeys[0]);\r\n  const [isOpened, setIsOpened] = useState(false);\r\n\r\n  return (\r\n    <section className=\"flex justify-center items-center fill-muted-foreground/70\">\r\n      <MotionConfig\r\n        transition={{ type: \"spring\", duration: 0.85, bounce: 0.35 }}\r\n      >\r\n        <div\r\n          onClick={() => setIsOpened(true)}\r\n          className=\"relative left-2.5 w-20 h-20 flex justify-center items-center\"\r\n        >\r\n          <HugeiconsIcon\r\n            icon={FilterHorizontalIcon}\r\n            className=\"text-foreground relative z-10 fill-none\"\r\n            size={36}\r\n          />\r\n          <motion.div\r\n            layoutId=\"wrapper\"\r\n            className=\"absolute inset-0 z-[2] bg-background border-border\"\r\n            style={{ borderRadius: 40, borderWidth: 1 }}\r\n          />\r\n        </div>\r\n        <motion.div\r\n          initial={{ x: 0 }}\r\n          animate={{\r\n            x: isOpened ? -20 : 0,\r\n            // transition: { delay: isOpened ? 0 : 0.2 },\r\n          }}\r\n          transition={{ type: \"spring\", bounce: 0.3, duration: 1.5 }}\r\n          className=\"relative right-2.5 w-20 h-20 border border-border rounded-full flex justify-center items-center bg-background\"\r\n        >\r\n          <span className=\"text-muted-foreground\">\r\n            <selectedFilterKey.Icon size={36} />\r\n          </span>\r\n        </motion.div>\r\n\r\n        {isOpened && (\r\n          <motion.section\r\n            layoutId=\"wrapper\"\r\n            className=\"absolute z-20 w-72 px-1 py-1 bg-card border border-border text-xl overflow-hidden \"\r\n            style={{ borderRadius: 20, borderWidth: 1 }}\r\n          >\r\n            <div className=\"flex flex-col gap-1\">\r\n              {filterKeys.map((item, index) => (\r\n                <ListItem\r\n                  key={item.name}\r\n                  index={index}\r\n                  filterKey={item}\r\n                  selectedFilterKey={selectedFilterKey}\r\n                  setSelectedFilterKey={setSelectedFilterKey}\r\n                  setIsOpened={setIsOpened}\r\n                />\r\n              ))}\r\n            </div>\r\n          </motion.section>\r\n        )}\r\n      </MotionConfig>\r\n    </section>\r\n  );\r\n};\r\n\r\nexport default FilterInteraction;\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}