{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "family-button",
  "title": "Family status indicator",
  "author": "Dhruvin D.<dhruvinddev@gmail.com>",
  "description": "Family like dynamic status indicator",
  "dependencies": [
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "src/registry/family-button/index.tsx",
      "content": "import { cva } from \"class-variance-authority\";\nimport {\n    motion,\n    MotionConfig,\n    AnimatePresence,\n    MotionProps,\n    Transition,\n    HTMLMotionProps\n} from \"motion/react\";\nimport { TbAlertTriangleFilled, TbCircleCheckFilled } from \"react-icons/tb\";\n\ninterface ButtonProps {\n  variant?: \"loading\" | \"error\" | \"success\";\n  children: React.ReactNode;\n  icon?: React.ReactNode;\n  transition?: Transition;\n  className?: string;\n  text?: {\n    error?: string;\n    loading?: string;\n    success?: string;\n  };\n}\n\nconst tAni: MotionProps = {\n  variants: {\n    initial: { opacity: 0, x: 40 },\n    animate: { opacity: 1, x: 0 },\n    exit: { opacity: 0, x: -40, filter: \"blur(4px)\" },\n  },\n  initial: \"initial\",\n  animate: \"animate\",\n  exit: \"exit\",\n};\n\nconst iAni: MotionProps = {\n  variants: {\n    initial: { opacity: 0, scale: 0 },\n    animate: { opacity: 1, scale: 1 },\n    exit: { opacity: 0, scale: 0 },\n  },\n  initial: \"initial\",\n  animate: \"animate\",\n  exit: \"exit\",\n};\n\nconst buttonStyles = cva(\n  \"relative flex h-14 cursor-pointer items-center justify-center gap-3 overflow-hidden px-6 text-center text-xl font-bold text-nowrap transition-colors duration-500 select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-gray-100 text-black/80\",\n        loading: \"bg-sky-100 text-sky-400\",\n        error: \"bg-rose-100 text-rose-400\",\n        success: \"bg-green-100 text-green-400\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nconst FamilyButton = ({\n  variant,\n  text: _text,\n  children,\n  icon,\n  className,\n  transition = { type: \"spring\", duration: 0.6, bounce: 0.3 },\n  ...rest\n}: ButtonProps & HTMLMotionProps<\"button\">) => {\n  const text = {\n    success: \"Transaction Safe\",\n    loading: \"Analyzing Transaction\",\n    error: \"Transaction Warning\",\n    ..._text,\n  };\n\n  function renderIcon() {\n    if (variant === \"loading\") {\n      return (\n        <div>\n          <svg\n            className=\"size-6\"\n            width=\"32\"\n            height=\"32\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n          >\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              className=\"stroke-sky-200\"\n              strokeWidth=\"4\"\n              fill=\"none\"\n            ></circle>\n            <motion.circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              className=\"stroke-sky-400\"\n              strokeWidth=\"4\"\n              fill=\"none\"\n              strokeDasharray=\"62.33185307179586\"\n              strokeDashoffset=\"43.66456772333291\"\n              strokeLinecap=\"round\"\n              animate={{\n                rotate: [0, 360 * 3],\n                transition: {\n                  duration: 1,\n                  repeat: Infinity,\n                  ease: \"easeOut\",\n                },\n              }}\n            ></motion.circle>\n          </svg>\n        </div>\n      );\n    } else if (variant === \"error\") {\n      return (\n        <motion.div\n          animate={{\n            x: [0, 6, -6, 0, 6, -6, 0, 6, -6, 0],\n            transition: {\n              duration: 0.4,\n              repeat: Infinity,\n              repeatType: \"loop\",\n              repeatDelay: 1.2,\n            },\n          }}\n        >\n          <TbAlertTriangleFilled />\n        </motion.div>\n      );\n    } else if (variant === \"success\") {\n      return <TbCircleCheckFilled size={24} />;\n    } else return icon;\n  }\n\n  function renderTxt() {\n    if (variant === \"loading\") return text.loading;\n    else if (variant === \"error\") return text.error;\n    else if (variant === \"success\") return text.success;\n    return children;\n  }\n\n  return (\n    <MotionConfig transition={transition}>\n      <motion.button\n        {...rest}\n        className={buttonStyles({ variant, className })}\n        style={{ borderRadius: 100 }}\n        layout\n      >\n        <AnimatePresence mode=\"popLayout\" initial={false}>\n          {(variant || icon) && (\n            <motion.div key={`${variant}-icon`} {...iAni} layout=\"position\">\n              {renderIcon()}\n            </motion.div>\n          )}\n          <motion.div key={`${variant}-text`} {...tAni} layout=\"position\">\n            {renderTxt()}\n          </motion.div>\n        </AnimatePresence>\n      </motion.button>\n    </MotionConfig>\n  );\n};\n\nexport default FamilyButton;\n",
      "type": "registry:component",
      "target": "components/ui/family-button/index.tsx"
    }
  ],
  "type": "registry:component"
}