{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "discrete-tabs",
  "title": "Discrete Tabs",
  "description": "A tab component with discrete sliding animations.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/discrete-tabs.tsx",
      "content": "\"use client\";\r\n\r\nimport { SetStateAction, useState, useEffect } from \"react\";\r\nimport { motion, AnimatePresence } from \"motion/react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst Calendar: React.FC<React.SVGProps<SVGSVGElement> & { size?: number }> = ({\r\n  className,\r\n  size = 20,\r\n  ...props\r\n}) => {\r\n  return (\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width={size}\r\n      height={size}\r\n      viewBox=\"0 0 20 20\"\r\n      className={className}\r\n      {...props}\r\n    >\r\n      <g fill=\"currentColor\">\r\n        <path d=\"M5.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75V12ZM6 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75H6ZM7.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H8a.75.75 0 0 1-.75-.75V12ZM8 13.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75H8ZM9.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75V10Zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75H10ZM9.25 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75V14ZM12 9.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V10a.75.75 0 0 0-.75-.75H12ZM11.25 12a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75V12Zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V14a.75.75 0 0 0-.75-.75H12ZM13.25 10a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75H14a.75.75 0 0 1-.75-.75V10Zm.75 1.25a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75h.01a.75.75 0 0 0 .75-.75V12a.75.75 0 0 0-.75-.75H14Z\" />\r\n        <path\r\n          fillRule=\"evenodd\"\r\n          d=\"M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2Zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75Z\"\r\n          clipRule=\"evenodd\"\r\n        />\r\n      </g>\r\n    </svg>\r\n  );\r\n};\r\n\r\nconst Alert: React.FC<React.SVGProps<SVGSVGElement> & { size?: number }> = ({\r\n  className,\r\n  size = 20,\r\n  ...props\r\n}) => {\r\n  return (\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width={size}\r\n      height={size}\r\n      viewBox=\"0 0 24 24\"\r\n      className={className}\r\n      {...props}\r\n    >\r\n      <path\r\n        fill=\"currentColor\"\r\n        d=\"M17.1 12.6v-1.8A5.4 5.4 0 0 0 13 5.6V3a1 1 0 0 0-2 0v2.4a5.4 5.4 0 0 0-4 5.5v1.8c0 2.4-1.9 3-1.9 4.2c0 .6 0 1.2.5 1.2h13c.5 0 .5-.6.5-1.2c0-1.2-1.9-1.8-1.9-4.2ZM8.8 19a3.5 3.5 0 0 0 6.4 0z\"\r\n      />\r\n    </svg>\r\n  );\r\n};\r\n\r\nconst Inbox: React.FC<React.SVGProps<SVGSVGElement> & { size?: number }> = ({\r\n  className,\r\n  size = 20,\r\n  ...props\r\n}) => {\r\n  return (\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width={size}\r\n      height={size}\r\n      viewBox=\"0 0 24 24\"\r\n      className={className}\r\n      {...props}\r\n    >\r\n      <g id=\"evaEmailFill0\">\r\n        <g id=\"evaEmailFill1\">\r\n          <path\r\n            id=\"evaEmailFill2\"\r\n            fill=\"currentColor\"\r\n            d=\"M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3Zm0 2l-6.5 4.47a1 1 0 0 1-1 0L5 6Z\"\r\n          />\r\n        </g>\r\n      </g>\r\n    </svg>\r\n  );\r\n};\r\n\r\n// Change Here\r\nconst TABS = [\r\n  { id: \"Inbox\", title: \"Inbox\", icon: Inbox },\r\n  { id: \"Planner\", title: \"Planner\", icon: Calendar },\r\n  { id: \"Alerts\", title: \"Alerts\", icon: Alert },\r\n];\r\n\r\nexport default function DiscreteTabs() {\r\n  const [activeButton, setActiveButton] = useState(TABS[0].id);\r\n  return (\r\n    <div className=\"flex gap-4 items-center\">\r\n      {TABS.map((tab) => (\r\n        <Button\r\n          key={tab.id}\r\n          title={tab.title}\r\n          ButtonIcon={tab.icon}\r\n          isActive={activeButton === tab.id}\r\n          setActiveButton={setActiveButton}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction Button({\r\n  title,\r\n  ButtonIcon,\r\n  isActive,\r\n  setActiveButton,\r\n}: {\r\n  title: string;\r\n  ButtonIcon: React.ComponentType<\r\n    React.SVGProps<SVGSVGElement> & { size?: number }\r\n  >;\r\n  isActive: boolean;\r\n  setActiveButton: React.Dispatch<SetStateAction<string>>;\r\n}) {\r\n  const [showShine, setShowShine] = useState(false);\r\n  const [isLoaded, setIsLoaded] = useState(false);\r\n\r\n  useEffect(() => {\r\n    if (isActive && isLoaded) {\r\n      setShowShine(true);\r\n      const timer = setTimeout(() => setShowShine(false), 800);\r\n      return () => clearTimeout(timer);\r\n    }\r\n  }, [isActive, isLoaded]);\r\n\r\n  const activeColor = \"text-primary\";\r\n\r\n  return (\r\n    <motion.div\r\n      layoutId={\"button-id-\" + title}\r\n      transition={{\r\n        layout: {\r\n          type: \"spring\",\r\n          damping: 20,\r\n          stiffness: 230,\r\n          mass: 1.2,\r\n          ease: [0.215, 0.61, 0.355, 1],\r\n        },\r\n      }}\r\n      onClick={() => {\r\n        setActiveButton(title), setIsLoaded(true);\r\n      }}\r\n      className=\"w-fit h-fit flex\"\r\n      style={{ willChange: \"transform\" }}\r\n    >\r\n      <motion.div\r\n        layout\r\n        transition={{\r\n          layout: {\r\n            type: \"spring\",\r\n            damping: 20,\r\n            stiffness: 230,\r\n            mass: 1.2,\r\n          },\r\n        }}\r\n        className={cn(\r\n          \"flex items-center font-mono uppercase gap-1.5 bg-secondary outline outline-2 outline-background overflow-hidden shadow-md transition-colors duration-75 ease-out  p-3 cursor-pointer\",\r\n          isActive && activeColor,\r\n          isActive ? \"px-4\" : \"px-3\"\r\n        )}\r\n        style={{\r\n          borderRadius: \"25px\",\r\n          //   paddingTop: \"12px\",\r\n          //   paddingBottom: \"12px\",\r\n          //   paddingLeft: isActive ? \"15px\" : \"12px\",\r\n          //   paddingRight: isActive ? \"15px\" : \"12px\",\r\n        }}\r\n      >\r\n        <motion.div\r\n          layoutId={\"icon-id\" + title}\r\n          className=\"shrink-0\"\r\n          style={{ willChange: \"transform\" }}\r\n        >\r\n          <ButtonIcon size={22} />\r\n        </motion.div>\r\n        {isActive && (\r\n          <motion.div\r\n            className=\"flex items-center\"\r\n            initial={isLoaded ? { opacity: 0, filter: \"blur(4px)\" } : false}\r\n            animate={{ opacity: 1, filter: \"blur(0px)\" }}\r\n            transition={{\r\n              duration: isLoaded ? 0.2 : 0,\r\n              ease: [0.86, 0, 0.07, 1],\r\n            }}\r\n          >\r\n            <motion.span\r\n              layoutId={\"text-id-\" + title}\r\n              className=\"text-sm font-medium font-mono uppercase whitespace-nowrap relative inline-block\"\r\n              style={{ willChange: \"transform\" }}\r\n            >\r\n              {title}\r\n            </motion.span>\r\n          </motion.div>\r\n        )}\r\n      </motion.div>\r\n    </motion.div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}