{ "$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", "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: \"text-black font-bold\",\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 px-6 py-2 transition-all duration-150 ease-in-out disabled:pointer-events-none disabled:opacity-50 text-sm overflow-hidden\",\n {\n variants: {\n size: {\n sm: \"text-xs px-4 py-1\",\n default: \"text-sm px-6 py-2\",\n lg: \"text-base px-8 py-3\",\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: \"text-black font-bold\",\n ocean: \"text-black font-bold\",\n candy: \"text-black font-bold\",\n forest: \"text-black font-bold\",\n sunset: \"text-black font-bold\",\n nebula: \"text-white font-bold\",\n default: \"text-white font-bold\",\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 {\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(\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 \n {gradient && (\n \n )}\n\n \n {props.children || \"Button\"}\n \n \n )\n }\n)\n\nBgAnimateButton.displayName = \"BgAnimateButton\"\n\nexport { BgAnimateButton }\nexport default BgAnimateButton\n", "type": "registry:ui" } ] }