{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bg-animate-button",
  "type": "registry:ui",
  "description": "Button component with animated background effects and gradient transitions",
  "dependencies": [
    "@radix-ui/react-slot",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/default/ui/bg-animate-button.tsx",
      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst outerDivVariants = cva(\"relative inline-block overflow-hidden\", {\n  variants: {\n    size: {\n      sm: \"\",\n      default: \"\",\n      lg: \"\",\n    },\n    rounded: {\n      full: \"rounded-full before:rounded-full\",\n      xl: \"rounded-xl before:rounded-xl\",\n      \"2xl\": \"rounded-2xl before:rounded-2xl\",\n      \"3xl\": \"rounded-3xl before:rounded-3xl\",\n      sm: \"rounded-sm before:rounded-sm\",\n      xs: \"rounded-xs before:rounded-xs\",\n      base: \"rounded before:rounded\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n})\n\nconst innerSpanVariants = cva(\n  [\n    \"absolute inset-[-1000%] m-auto block\", // Base styles for positioning and display\n  ],\n  {\n    variants: {\n      animation: {\n        pulse: \"animate-pulse\", // Pulsating effect\n        \"spin-fast\": \"animate-[spin_2s_linear_infinite]\", // Continuous rotation\n        \"spin-slow\": \"animate-[spin_8s_linear_infinite]\", // Bouncing effect\n        spin: \"animate-[spin_4s_linear_infinite]\", // Bouncing effect\n        // Add more animations here\n      },\n      gradient: {\n        sunrise: \"font-bold text-black\",\n        ocean:\n          \"bg-[conic-gradient(from_90deg_at_50%_50%,#a1c4fd_0%,#c2e9fb_50%,#a1c4fd_100%)]\",\n        candy:\n          \"bg-[conic-gradient(from_90deg_at_50%_50%,#ff9a9e_0%,#fad0c4_50%,#fad0c4_90%,#ff9a9e_100%)]\",\n        forest:\n          \"bg-[conic-gradient(from_90deg_at_50%_50%,#85d797_0%,#1a806b_50%,#85d797_100%)]\",\n        sunset:\n          \"bg-[conic-gradient(from_90deg_at_50%_50%,#fe5d75_0%,#f5af19_50%,#fe5d75_100%)]\",\n        nebula:\n          \"bg-[conic-gradient(from_90deg_at_50%_50%,#A77BFE_0%,#8860D0_50%,#A77BFE_100%)]\",\n        default:\n          \"bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]\",\n      },\n    },\n    compoundVariants: [\n      {\n        animation: \"spin\",\n        gradient: \"sunrise\",\n        className: \"duration-4s ease-linear\", // Customizes the animation duration and easing for a specific variant\n      },\n    ],\n    defaultVariants: {\n      animation: \"spin\",\n      gradient: \"forest\",\n    },\n  }\n)\n\nconst buttonVariants = cva(\n  \"relative overflow-hidden px-6 py-2 text-sm transition-all duration-150 ease-in-out disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"px-4 py-1 text-xs\",\n        default: \"px-6 py-2 text-sm\",\n        lg: \"px-8 py-3 text-base\",\n      },\n      shadow: {\n        flat: \"\",\n        soft: \"shadow-[0_2px_4px_rgba(0,0,0,0.15),inset_0_1px_1px_rgba(255,255,255,0.15),inset_0_-1px_2px_rgba(0,0,0,0.3)] dark:shadow-[0_2px_4px_rgba(0,0,0,0.25),inset_0_1px_1px_rgba(0,0,0,0.2),inset_0_-1px_2px_rgba(0,0,0,0.5)]\",\n        base: \"shadow-[0_3px_5px_rgba(0,0,0,0.2),inset_0_0.5px_1px_rgba(255,255,255,0.1),inset_0_-2px_3px_rgba(0,0,0,0.4)] dark:shadow-[0_3px_5px_rgba(0,0,0,0.3),inset_0_0.5px_1px_rgba(0,0,0,0.2),inset_0_-2px_3px_rgba(0,0,0,0.6)]\",\n        deep: \"shadow-[0_4px_6px_rgba(0,0,0,0.25),inset_0_1px_2px_rgba(255,255,255,0.2),inset_0_-2px_4px_rgba(0,0,0,0.5)] dark:shadow-[0_4px_6px_rgba(0,0,0,0.35),inset_0_1px_2px_rgba(0,0,0,0.3),inset_0_-2px_4px_rgba(0,0,0,0.7)]\",\n        deeper:\n          \"shadow-[0_6px_8px_rgba(0,0,0,0.3),inset_0_2px_3px_rgba(255,255,255,0.25),inset_0_-3px_6px_rgba(0,0,0,0.6)] dark:shadow-[0_6px_8px_rgba(0,0,0,0.4),inset_0_2px_3px_rgba(0,0,0,0.35),inset_0_-3px_6px_rgba(0,0,0,0.8)]\",\n      },\n      gradient: {\n        sunrise: \"font-bold text-black\",\n        ocean: \"font-bold text-black\",\n        candy: \"font-bold text-black\",\n        forest: \"font-bold text-black\",\n        sunset: \"font-bold text-black\",\n        nebula: \"font-bold text-white\",\n        default: \"font-bold text-white\",\n      },\n      rounded: {\n        full: \"rounded-full before:rounded-full\",\n        xl: \"rounded-xl before:rounded-xl\",\n        \"2xl\": \"rounded-2xl before:rounded-2xl\",\n        \"3xl\": \"rounded-3xl before:rounded-3xl\",\n        sm: \"rounded-sm before:rounded-sm\",\n        xs: \"rounded-xs before:rounded-xs\",\n        base: \"rounded before:rounded\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      shadow: \"base\",\n      rounded: \"xl\",\n    },\n  }\n)\n\nexport interface UnifiedButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: \"primary\" | \"success\" | \"secondary\" | \"destructive\" | \"ghost\"\n  size?: \"sm\" | \"lg\" | \"default\"\n  shadow?: \"flat\" | \"soft\" | \"base\" | \"deep\" | \"deeper\"\n  rounded?: \"full\" | \"xl\" | \"2xl\" | \"3xl\" | \"sm\" | \"xs\" | \"base\"\n  asChild?: boolean\n  showBackground?: boolean\n  animation?: \"spin\" | \"pulse\" | \"spin-slow\" | \"spin-fast\" | \"spin\"\n  gradient?:\n    | \"sunrise\"\n    | \"ocean\"\n    | \"candy\"\n    | \"default\"\n    | \"forest\"\n    | \"sunset\"\n    | \"nebula\"\n}\n\nconst BgAnimateButton = React.forwardRef<HTMLButtonElement, UnifiedButtonProps>(\n  (\n    {\n      variant = \"primary\",\n      size = \"default\",\n      showBackground = false,\n      rounded = \"full\",\n      shadow = \"soft\",\n      gradient = null,\n      animation = null,\n      className,\n      asChild = false,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : \"button\"\n\n    return (\n      <Comp\n        className={cn(outerDivVariants({ size, rounded }), className)}\n        ref={ref}\n        {...props}\n      >\n        {gradient && (\n          <span className={cn(innerSpanVariants({ gradient, animation }))} />\n        )}\n\n        <div\n          className={cn(buttonVariants({ shadow, rounded, size, gradient }))}\n        >\n          {props.children || \"Button\"}\n        </div>\n      </Comp>\n    )\n  }\n)\n\nBgAnimateButton.displayName = \"BgAnimateButton\"\n\nexport { BgAnimateButton }\nexport default BgAnimateButton\n",
      "type": "registry:ui"
    }
  ]
}