{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:ui",
  "title": "Apocalypse Button",
  "description": "A web3 ui library button with async loading state and CVA variants.",
  "dependencies": [
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/apocalypseui/button/button.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/registry/apocalypseui/lib/utils\";\nimport { Loader } from \"@/registry/apocalypseui/button/loader\";\n\nconst buttonVariants = cva(\n  \"relative inline-flex items-center justify-center gap-2 border font-mono font-medium tracking-wide transition-colors disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-black dark:bg-white text-white dark:text-black border-white dark:border-black\",\n        secondary:\n          \"bg-white/10 text-white dark:text-black border-white/20 dark:border-black/20 backdrop-blur\",\n        outline:\n          \"bg-transparent text-white dark:text-black border-white/30 dark:border-black/30\",\n      },\n      size: {\n        sm: \"px-3 py-1 text-[14px] rounded-md\",\n        md: \"px-4 py-2 text-[16px] rounded-lg\",\n        lg: \"px-4 py-3 text-[18px] rounded-lg\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"lg\",\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  isLoading?: boolean;\n  loaderSize?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      isLoading = false,\n      loaderSize,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(buttonVariants({ variant, size }), className)}\n        disabled={isLoading || props.disabled}\n        {...props}\n      >\n        <span className={cn(\"flex items-center\", isLoading && \"invisible\")}>\n          {children}\n        </span>\n        {isLoading && (\n          <span className=\"absolute inset-0 flex items-center justify-center\">\n            <Loader size={loaderSize ?? size ?? \"md\"} />\n          </span>\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n",
      "type": "registry:component"
    },
    {
      "path": "registry/apocalypseui/button/loader.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/registry/apocalypseui/lib/utils\";\n\nconst sizes = {\n  sm: \"h-3 w-3\",\n  md: \"h-4 w-4\",\n  lg: \"h-5 w-5\",\n};\n\nexport interface LoaderProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: keyof typeof sizes;\n}\n\nexport function Loader({ size = \"md\", className, ...props }: LoaderProps) {\n  return (\n    <span className={cn(\"relative inline-flex\", className)} {...props}>\n      <span\n        className={cn(\n          \"inline-flex animate-ping rounded-full bg-white/40\",\n          sizes[size]\n        )}\n      />\n      <span\n        className={cn(\n          \"absolute inline-flex rounded-full bg-white\",\n          sizes[size]\n        )}\n      />\n    </span>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/apocalypseui/lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n",
      "type": "registry:lib"
    }
  ]
}