{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "button-pro", "title": "Button Pro", "author": "SAASTRO ", "description": "Enhanced button with CVA variants, icon effects, shine, gooey, underline, and gradient animations.", "dependencies": [ "@base-ui/react", "class-variance-authority" ], "registryDependencies": [], "files": [ { "path": "registry/default/ui/button-pro.tsx", "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst buttonProVariants = cva(\n `\n inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0\n\n font-medium text-base\n\n transition-all\n\n disabled:pointer-events-none\n disabled:opacity-50\n\n [&_svg]:pointer-events-none\n [&_svg:not([class*='size-'])]:size-6\n [&_svg]:shrink-0\n\n outline-none\n focus-visible:border-ring\n focus-visible:ring-ring/50\n focus-visible:ring-[3px]\n aria-invalid:ring-destructive/20\n dark:aria-invalid:ring-destructive/40\n aria-invalid:border-destructive\n `,\n {\n variants: {\n variant: {\n default: `\n bg-primary\n text-primary-foreground\n hover:bg-yellow-500\n `,\n destructive: `\n bg-destructive\n text-destructive-foreground\n hover:bg-destructive/90\n `,\n outline: `\n border\n border-input\n bg-background\n hover:bg-accent\n hover:text-accent-foreground\n `,\n secondary: `\n bg-secondary\n text-secondary-foreground\n hover:bg-secondary/80\n `,\n ghost: `\n hover:bg-accent\n hover:text-accent-foreground\n `,\n link: `\n text-primary\n underline-offset-4\n hover:underline\n `,\n accent: `\n bg-accent\n text-accent-foreground\n hover:bg-accent/90\n `,\n foreground: `\n bg-foreground\n text-muted\n `,\n },\n iconfx: {\n none: \"\",\n left: `\n [&>svg]:w-0\n [&>svg]:translate-x-[0%]\n [&>svg]:pr-0\n [&>svg]:opacity-0\n [&>svg]:transition-all\n [&>svg]:duration-200\n group-hover:[&>svg]:w-5\n group-hover:[&>svg]:translate-x-100\n group-hover:[&>svg]:pr-2\n group-hover:[&>svg]:opacity-100\n `,\n right: `\n [&>svg]:w-0\n [&>svg]:translate-x-[100%]\n [&>svg]:pl-0\n [&>svg]:opacity-0\n [&>svg]:transition-all\n [&>svg]:duration-200\n group-hover:[&>svg]:w-5\n group-hover:[&>svg]:translate-x-0\n group-hover:[&>svg]:pl-2\n group-hover:[&>svg]:opacity-100\n `,\n },\n effect: {\n default: \"\",\n expandIcon: `\n group\n gap-0\n relative\n `,\n ringHover: `\n transition-all\n duration-300\n hover:ring-2\n hover:ring-primary/90\n hover:ring-offset-2\n `,\n shine: `\n relative\n overflow-hidden\n before:absolute\n before:inset-0\n before:rounded-[inherit]\n before:content-['']\n before:bg-[linear-gradient(45deg,transparent_25%,rgba(255,255,255,0.5)_50%,transparent_75%,transparent_100%)]\n before:bg-[length:250%_250%]\n before:bg-no-repeat\n before:bg-[position:200%_0]\n before:animate-[shine_3s_ease-out_infinite]\n `,\n\n shineHover: `\n relative\n overflow-hidden\n before:absolute\n before:inset-0\n before:rounded-[inherit]\n before:content-['']\n before:bg-[linear-gradient(45deg,transparent_25%,rgba(255,255,255,0.5)_50%,transparent_75%,transparent_100%)]\n before:bg-[length:250%_250%]\n before:bg-no-repeat\n before:bg-[position:200%_0]\n before:transition-[background-position]\n hover:before:bg-[position:-100%_0]\n before:duration-1000\n `,\n gooeyRight: `\n relative\n z-0\n overflow-hidden\n transition-all\n duration-500\n before:absolute\n before:inset-0\n before:-z-10\n before:translate-x-[150%]\n before:translate-y-[150%]\n before:scale-[2.5]\n before:rounded-[100%]\n before:bg-gradient-to-r\n before:from-white/40\n before:transition-transform\n before:duration-1000\n hover:before:translate-x-[0%]\n hover:before:translate-y-[0%]\n `,\n gooeyLeft: `\n relative z-0 overflow-hidden transition-all duration-500\n after:absolute after:inset-0 after:-z-10\n after:translate-x-[-150%] after:translate-y-[150%] after:scale-[2.5]\n after:rounded-[100%] after:bg-gradient-to-l after:from-white/40\n after:transition-transform after:duration-1000\n hover:after:translate-x-[0%] hover:after:translate-y-[0%]\n `,\n underline: `\n relative\n !no-underline\n after:absolute\n after:bg-[currentColor]\n after:bottom-2\n after:h-[1px]\n after:w-2/3\n after:origin-bottom-left\n after:scale-x-100\n hover:after:origin-bottom-right\n hover:after:scale-x-0\n after:transition-transform\n after:ease-in-out\n after:duration-300\n `,\n hoverUnderline: `\n relative\n !no-underline\n after:absolute\n after:bg-[currentColor]\n after:bottom-2\n after:h-[1px]\n after:w-2/3\n after:origin-bottom-right\n after:scale-x-0\n hover:after:origin-bottom-left\n hover:after:scale-x-100\n after:transition-transform\n after:ease-in-out\n after:duration-300\n `,\n gradientSlideShow: `\n bg-[size:400%]\n bg-linear-to-r/longer from-indigo-500 to-teal-400\n animate-gradient-flow\n `,\n },\n rounded: {\n xs: \"rounded-xs\",\n sm: \"rounded-sm\",\n md: \"rounded-md\",\n lg: \"rounded-lg\",\n xl: \"rounded-xl\",\n \"2xl\": \"rounded-2xl\",\n \"3xl\": \"rounded-3xl\",\n \"4xl\": \"rounded-4xl\",\n },\n size: {\n xxs: \"h-6 px-2 text-xs font-semibold\",\n xs: \"h-8 px-4 text-sm font-semibold\",\n sm: \"h-9 px-4 text-sm font-semibold\",\n md: \"h-10 px-4 text-base font-semibold\",\n lg: \"h-12 px-6 text-lg font-semibold\",\n xl: \"h-12 px-8 text-xl font-semibold\",\n \"2xl\": \"h-14 px-8 text-2xl font-semibold\",\n \"3xl\": \"h-16 px-8 text-3xl font-semibold\",\n \"4xl\": \"h-20 px-10 text-4xl font-semibold\",\n icon: \"h-10 w-10 p-0\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"md\",\n rounded: \"md\",\n effect: \"default\",\n iconfx: \"none\",\n },\n },\n);\n\nfunction ButtonPro({\n className,\n variant,\n size,\n effect,\n rounded,\n iconfx,\n render,\n href,\n ...props\n}: React.ComponentProps &\n VariantProps & {\n /** Base UI sustituye `asChild` por `render`: el elemento a renderizar. */\n render?: React.ReactElement;\n href?: string;\n }) {\n return useRender({\n defaultTagName: href ? \"a\" : \"button\",\n render,\n props: mergeProps(\n {\n \"data-slot\": \"button\",\n className: cn(\n buttonProVariants({ variant, size, effect, rounded, iconfx }),\n className,\n ),\n ...(href ? { href } : {}),\n },\n props as Record,\n ),\n });\n}\n\nexport { ButtonPro, buttonProVariants };\n\nexport type ButtonProVariantProps = VariantProps;\nexport type ButtonProBaseProps = React.ComponentProps<\"button\"> & {\n href?: string;\n};\nexport type ButtonProProps = ButtonProBaseProps &\n ButtonProVariantProps & { render?: React.ReactElement };\n", "type": "registry:ui", "target": "@ui/button-pro.tsx" } ], "meta": { "group": "Buttons", "iframeHeight": "640px" }, "docs": "Import: `import { ButtonPro } from '@/components/ui/button-pro'`. Built on Base UI useRender/mergeProps: use render={} instead of asChild. Variants: variant, size, rounded, effect (shine, gooeyRight, underline, gradientSlideShow…), iconfx.", "categories": [ "ui", "buttons" ], "type": "registry:ui" }