{
  "$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\";\n\nimport { SetStateAction, useState, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nconst Calendar: React.FC<React.SVGProps<SVGSVGElement> & { size?: number }> = ({\n  className,\n  size = 20,\n  ...props\n}) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 20 20\"\n      className={className}\n      {...props}\n    >\n      <g fill=\"currentColor\">\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\" />\n        <path\n          fillRule=\"evenodd\"\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\"\n          clipRule=\"evenodd\"\n        />\n      </g>\n    </svg>\n  );\n};\n\nconst Alert: React.FC<React.SVGProps<SVGSVGElement> & { size?: number }> = ({\n  className,\n  size = 20,\n  ...props\n}) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      className={className}\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\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\"\n      />\n    </svg>\n  );\n};\n\nconst Inbox: React.FC<React.SVGProps<SVGSVGElement> & { size?: number }> = ({\n  className,\n  size = 20,\n  ...props\n}) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      className={className}\n      {...props}\n    >\n      <g id=\"evaEmailFill0\">\n        <g id=\"evaEmailFill1\">\n          <path\n            id=\"evaEmailFill2\"\n            fill=\"currentColor\"\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\"\n          />\n        </g>\n      </g>\n    </svg>\n  );\n};\n\n// Change Here\nconst TABS = [\n  { id: \"Inbox\", title: \"Inbox\", icon: Inbox },\n  { id: \"Planner\", title: \"Planner\", icon: Calendar },\n  { id: \"Alerts\", title: \"Alerts\", icon: Alert },\n];\n\nexport default function DiscreteTabs() {\n  const [activeButton, setActiveButton] = useState(TABS[0].id);\n  return (\n    <div className=\"flex gap-4 items-center\">\n      {TABS.map((tab) => (\n        <Button\n          key={tab.id}\n          title={tab.title}\n          ButtonIcon={tab.icon}\n          isActive={activeButton === tab.id}\n          setActiveButton={setActiveButton}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction Button({\n  title,\n  ButtonIcon,\n  isActive,\n  setActiveButton,\n}: {\n  title: string;\n  ButtonIcon: React.ComponentType<\n    React.SVGProps<SVGSVGElement> & { size?: number }\n  >;\n  isActive: boolean;\n  setActiveButton: React.Dispatch<SetStateAction<string>>;\n}) {\n  const [showShine, setShowShine] = useState(false);\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  useEffect(() => {\n    if (isActive && isLoaded) {\n      setShowShine(true);\n      const timer = setTimeout(() => setShowShine(false), 800);\n      return () => clearTimeout(timer);\n    }\n  }, [isActive, isLoaded]);\n\n  const activeColor = \"text-primary\";\n\n  return (\n    <motion.div\n      layoutId={\"button-id-\" + title}\n      transition={{\n        layout: {\n          type: \"spring\",\n          damping: 20,\n          stiffness: 230,\n          mass: 1.2,\n          ease: [0.215, 0.61, 0.355, 1],\n        },\n      }}\n      onClick={() => {\n        setActiveButton(title), setIsLoaded(true);\n      }}\n      className=\"w-fit h-fit flex\"\n      style={{ willChange: \"transform\" }}\n    >\n      <motion.div\n        layout\n        transition={{\n          layout: {\n            type: \"spring\",\n            damping: 20,\n            stiffness: 230,\n            mass: 1.2,\n          },\n        }}\n        className={cn(\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\",\n          isActive && activeColor,\n          isActive ? \"px-4\" : \"px-3\"\n        )}\n        style={{\n          borderRadius: \"25px\",\n          //   paddingTop: \"12px\",\n          //   paddingBottom: \"12px\",\n          //   paddingLeft: isActive ? \"15px\" : \"12px\",\n          //   paddingRight: isActive ? \"15px\" : \"12px\",\n        }}\n      >\n        <motion.div\n          layoutId={\"icon-id\" + title}\n          className=\"shrink-0\"\n          style={{ willChange: \"transform\" }}\n        >\n          <ButtonIcon size={22} />\n        </motion.div>\n        {isActive && (\n          <motion.div\n            className=\"flex items-center\"\n            initial={isLoaded ? { opacity: 0, filter: \"blur(4px)\" } : false}\n            animate={{ opacity: 1, filter: \"blur(0px)\" }}\n            transition={{\n              duration: isLoaded ? 0.2 : 0,\n              ease: [0.86, 0, 0.07, 1],\n            }}\n          >\n            <motion.span\n              layoutId={\"text-id-\" + title}\n              className=\"text-sm font-medium font-mono uppercase whitespace-nowrap relative inline-block\"\n              style={{ willChange: \"transform\" }}\n            >\n              {title}\n            </motion.span>\n          </motion.div>\n        )}\n      </motion.div>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}