{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "button", "title": "Button", "author": "AlgorizeTech", "description": "A button with variants, sizes, loading state, and a click ripple effect. Reach for it as the default action element anywhere in an interface.", "dependencies": [], "registryDependencies": [ "https://avaraui.com/r/icons.json", "utils" ], "files": [ { "path": "src/components/custom/blocks/Button.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport React, { useEffect, useState } from \"react\";\nimport { getButtonThemeStyle } from \"./button-theme\";\n\nconst Loader2: React.FC<{ className?: string }> = ({ className }) => (\n \n \n \n);\n\nconst ArrowRightIcon: React.FC<{ className?: string }> = ({ className }) => (\n \n \n \n \n);\n\nexport type ButtonVariant =\n | \"outline\"\n | \"spin-border\"\n | \"pulse-glow\"\n | \"shimmer-beam\"\n | \"neon-aura\"\n | \"ripple-wave\"\n | \"gradient-flow\"\n | \"border-beam\"\n | \"radar-ping\"\n | \"breathe-glow\"\n | \"spotlight\"\n | \"cosmic-orbit\"\n | \"cyber-scan\"\n | \"expand-icon\"\n | \"slide-icon\"\n | \"slide-icon-loop\"\n | \"slide-bg\"\n | \"slide-bg-top\"\n | \"slide-bg-bottom\"\n | \"slide-bg-right\"\n | \"slide-text\"\n | \"slide-text-down\"\n | \"slide-text-bounce\"\n | \"scale-up\"\n | \"shine-sweep\"\n | \"glow-pulse\"\n | \"skew-slide\"\n | \"border-expand\"\n | \"icon-rotate\"\n | \"icon-bounce\"\n | \"icon-spin\"\n | \"curtain-reveal\"\n | \"corner-expand\"\n | \"glassmorphism\"\n | \"floating-shadow\"\n | \"magnetic-pull\"\n | \"glitch-cyber\"\n | \"3d\"\n | \"3d-press\"\n | \"liquid-fill\"\n | \"border-chase\"\n | \"3d-flip\"\n | \"holographic\"\n | \"laser-border\"\n | \"wave-ripple\"\n | \"electric-pulse\"\n | \"neon-sign\"\n | \"morphing-blob\"\n | \"split-door-reveal\"\n | \"expanding-circle-center\"\n | \"diamond-glare-wipe\"\n | \"border-draw-outline\"\n | \"vertical-curtain-rise\"\n | \"magnetic-pulse-ring\"\n | \"aura-glow-stream\"\n | \"neon-portal-ring\"\n | \"cyber-matrix-pulse\"\n | \"liquid-gradient-flow\"\n | \"magnetic-laser-ring\"\n | \"quantum-flux-beam\"\n | \"border-corner-pulse\"\n | \"beacon-radar-pulse\"\n | \"dual-ring-pulse\"\n | \"square-frame-pulse\"\n | \"corner-dash-pulse\"\n | \"horizontal-shutter-split\"\n | \"diagonal-slash-fill\"\n | \"corner-cross-bracket\"\n | \"inset-box-shadow-fill\"\n | \"glowing-line-trace\"\n | \"prism-reflection-shimmer\"\n | \"dual-spin-border\"\n | \"shards-control\"\n // The plain shadcn-style surfaces. Everything above is an animated\n // treatment; these five are the ordinary buttons most pages actually need,\n // and the docs have always advertised them.\n | \"default\"\n | \"destructive\"\n | \"secondary\"\n | \"ghost\"\n | \"link\"\n | \"pricing-primary\"\n | \"pricing-outline\"\n | \"pricing-glow\"\n | \"pricing-muted\"\n | \"pricing-pill\"\n | \"pricing-dark\"\n | \"pricing-typographic\"\n | \"pricing-typographic-muted\";\ntype ButtonSize = \"default\" | \"sm\" | \"lg\";\n\n/**\n * Decoration a \"shards-control\" tile plays when it lands on something: a\n * slider reaching full, a toggle switching on, or a new select / colour pick.\n */\nexport type ShardsEffect = \"none\" | \"sparkle\" | \"orbit\" | \"beacon\" | \"shimmer\";\n/** `once` plays per landing; `continuous` loops for as long as the tile stays active. */\nexport type ShardsEffectMode = \"once\" | \"continuous\";\n\n/**\n * The plain variants, styled from theme tokens so they follow whatever palette\n * the consumer has in globals.css.\n *\n * `outline` is deliberately absent: it is the default value and already has its\n * own treatment further down, so listing it here would silently restyle every\n * button that never passed a variant.\n */\nconst PLAIN_VARIANTS: Record = {\n default:\n \"bg-primary text-primary-foreground border-transparent hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-white border-transparent hover:bg-destructive/90\",\n secondary:\n \"bg-secondary text-secondary-foreground border-transparent hover:bg-secondary/80\",\n ghost:\n \"bg-transparent text-foreground border-transparent shadow-none hover:bg-accent hover:text-accent-foreground\",\n link: \"bg-transparent text-primary border-transparent shadow-none underline-offset-4 hover:underline\",\n \"pricing-primary\":\n \"rounded-lg font-sans text-[13.5px] font-semibold px-7 py-3.5 bg-primary text-primary-foreground border-transparent shadow-xs hover:bg-primary/90 hover:shadow-md hover:shadow-primary/20 hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] transition-all duration-200\",\n \"pricing-outline\":\n \"rounded-lg font-sans text-[13.5px] font-semibold px-6 py-3 border border-border bg-muted/50 dark:bg-card text-foreground hover:bg-muted/80 dark:hover:bg-muted/40 hover:border-foreground/15 dark:hover:border-foreground/25 hover:shadow-xs hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] transition-all duration-200\",\n \"pricing-glow\":\n \"rounded-lg font-sans text-sm font-semibold px-7 py-3.5 bg-primary text-primary-foreground border border-primary/30 shadow-[0_0_20px_-3px_color-mix(in_oklab,var(--primary)_45%,transparent)] hover:shadow-[0_0_32px_-1px_color-mix(in_oklab,var(--primary)_70%,transparent)] hover:brightness-105 hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] transition-all duration-200\",\n \"pricing-muted\":\n \"rounded-lg font-sans text-[13.5px] font-semibold px-7 py-3.5 bg-muted text-foreground border-transparent shadow-2xs hover:bg-muted/70 hover:shadow-xs hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] transition-all duration-200\",\n \"pricing-pill\":\n \"rounded-lg font-sans text-xs sm:text-[13px] font-bold uppercase tracking-wider px-8 py-3.5 bg-primary text-primary-foreground border-transparent shadow-md hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/25 hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] transition-all duration-200\",\n \"pricing-dark\":\n \"rounded-lg font-sans text-xs sm:text-[13.5px] font-semibold px-7 py-3.5 bg-gradient-to-b from-foreground/85 to-foreground text-background border-transparent shadow-md hover:from-foreground/95 hover:to-foreground hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] transition-all duration-200\",\n \"pricing-typographic\":\n \"rounded-lg font-sans text-xs sm:text-sm font-semibold uppercase tracking-widest px-8 py-4 bg-primary text-primary-foreground border-transparent shadow-md active:scale-[0.99] transition-all duration-300\",\n \"pricing-typographic-muted\":\n \"rounded-lg font-sans text-xs sm:text-sm font-semibold uppercase tracking-widest px-8 py-4 bg-muted text-foreground border-transparent shadow-none active:scale-[0.99] transition-all duration-300\",\n};\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes {\n variant?: ButtonVariant;\n size?: ButtonSize;\n loading?: boolean;\n color?: string;\n iconLeft?: React.ReactNode;\n iconRight?: React.ReactNode;\n /** Whether to show a default trailing arrow icon (e.g. for pricing CTAs like \"Continue →\"). */\n showArrow?: boolean;\n\n /* Props for \"shards-control\" glass dark parameter tile variant */\n controlType?: \"color\" | \"select\" | \"slider\" | \"toggle\";\n label?: string;\n value?: string | number;\n options?: string[];\n checked?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n colorHex?: string;\n onColorChange?: (color: string) => void;\n min?: number;\n max?: number;\n step?: number;\n onValueChange?: (value: number | string) => void;\n /**\n * Effect played by a \"shards-control\" tile. Left unset, the tile keeps its\n * built-in feedback (slider beacon at full, colour burst on a pick).\n */\n effect?: ShardsEffect;\n effectMode?: ShardsEffectMode;\n /**\n * Whether a `continuous` effect is running. Defaults to: slider at full,\n * toggle on, select / colour once something has been picked.\n */\n effectActive?: boolean;\n}\n\ninterface Ripple {\n x: number;\n y: number;\n size: number;\n id: number;\n}\n\n/* Helper HSV/HSL conversion for full interactive Color Canvas and Hue Slider */\nfunction hsvToHex(h: number, s: number, v: number): string {\n const f = (n: number, k = (n + h / 60) % 6) =>\n v - v * s * Math.max(0, Math.min(k, 4 - k, 1));\n const r = Math.round(f(5) * 255);\n const g = Math.round(f(3) * 255);\n const b = Math.round(f(1) * 255);\n return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;\n}\n\nfunction hexToHsv(hex: string): { h: number; s: number; v: number } {\n let c = hex.replace(\"#\", \"\");\n if (c.length === 3) {\n c = c.split(\"\").map((x) => x + x).join(\"\");\n }\n const num = parseInt(c, 16);\n if (isNaN(num)) return { h: 270, s: 0.7, v: 0.7 };\n const r = ((num >> 16) & 255) / 255;\n const g = ((num >> 8) & 255) / 255;\n const b = (num & 255) / 255;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const d = max - min;\n let h = 0;\n const s = max === 0 ? 0 : d / max;\n const v = max;\n\n if (max !== min) {\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h /= 6;\n }\n return { h: Math.round(h * 360), s, v };\n}\n\nfunction colorWithAlpha(color: string, alpha: number): string {\n if (color.startsWith(\"#\")) {\n let hex = color.slice(1);\n if (hex.length === 3) {\n hex = hex.split(\"\").map((x) => x + x).join(\"\");\n }\n if (hex.length === 6) {\n const r = parseInt(hex.slice(0, 2), 16);\n const g = parseInt(hex.slice(2, 4), 16);\n const b = parseInt(hex.slice(4, 6), 16);\n return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n }\n }\n return color;\n}\n\nconst ColorPickerPopover: React.FC<{\n color: string;\n onChange: (hex: string) => void;\n onClose: () => void;\n}> = ({ color, onChange, onClose }) => {\n const initialHsv = React.useMemo(() => hexToHsv(color), []);\n const [hue, setHue] = useState(initialHsv.h);\n const [sat, setSat] = useState(initialHsv.s);\n const [val, setVal] = useState(initialHsv.v);\n\n const canvasRef = React.useRef(null);\n const hueRef = React.useRef(null);\n\n const [isDraggingCanvas, setIsDraggingCanvas] = useState(false);\n const [isDraggingHue, setIsDraggingHue] = useState(false);\n\n // Sync internal state when external color changes (e.g. swatch click), and\n // again when a drag ends. Done while rendering, against the last values seen.\n const [synced, setSynced] = useState({ color, isDraggingCanvas, isDraggingHue });\n if (\n synced.color !== color ||\n synced.isDraggingCanvas !== isDraggingCanvas ||\n synced.isDraggingHue !== isDraggingHue\n ) {\n setSynced({ color, isDraggingCanvas, isDraggingHue });\n if (!isDraggingCanvas && !isDraggingHue) {\n const hsv = hexToHsv(color);\n setSat(hsv.s);\n setVal(hsv.v);\n if (hsv.s > 0.05) {\n setHue(hsv.h);\n }\n }\n }\n\n const handleCanvasMove = React.useCallback(\n (clientX: number, clientY: number) => {\n if (!canvasRef.current) return;\n const rect = canvasRef.current.getBoundingClientRect();\n const x = Math.max(0, Math.min(rect.width, clientX - rect.left));\n const y = Math.max(0, Math.min(rect.height, clientY - rect.top));\n\n const newSat = x / rect.width;\n const newVal = 1 - y / rect.height;\n\n setSat(newSat);\n setVal(newVal);\n onChange(hsvToHex(hue, newSat, newVal));\n },\n [hue, onChange]\n );\n\n const handleHueMove = React.useCallback(\n (clientX: number) => {\n if (!hueRef.current) return;\n const rect = hueRef.current.getBoundingClientRect();\n const x = Math.max(0, Math.min(rect.width, clientX - rect.left));\n const newHue = (x / rect.width) * 360;\n\n setHue(newHue);\n onChange(hsvToHex(newHue, sat, val));\n },\n [sat, val, onChange]\n );\n\n useEffect(() => {\n if (!isDraggingCanvas) return;\n const onMove = (e: MouseEvent) => handleCanvasMove(e.clientX, e.clientY);\n const onUp = () => setIsDraggingCanvas(false);\n window.addEventListener(\"mousemove\", onMove);\n window.addEventListener(\"mouseup\", onUp);\n return () => {\n window.removeEventListener(\"mousemove\", onMove);\n window.removeEventListener(\"mouseup\", onUp);\n };\n }, [isDraggingCanvas, handleCanvasMove]);\n\n useEffect(() => {\n if (!isDraggingHue) return;\n const onMove = (e: MouseEvent) => handleHueMove(e.clientX);\n const onUp = () => setIsDraggingHue(false);\n window.addEventListener(\"mousemove\", onMove);\n window.addEventListener(\"mouseup\", onUp);\n return () => {\n window.removeEventListener(\"mousemove\", onMove);\n window.removeEventListener(\"mouseup\", onUp);\n };\n }, [isDraggingHue, handleHueMove]);\n\n const hueColor = hsvToHex(hue, 1, 1);\n\n return (\n <>\n {\n e.stopPropagation();\n onClose();\n }}\n />\n
\n {/* 1. Interactive 2D Color Spectrum Field Box */}\n {\n e.stopPropagation();\n setIsDraggingCanvas(true);\n handleCanvasMove(e.clientX, e.clientY);\n }}\n className=\"relative w-full h-32 rounded-xl overflow-hidden cursor-crosshair select-none\"\n style={{\n backgroundColor: hueColor,\n backgroundImage:\n \"linear-gradient(to top, #000 0%, transparent 80%), linear-gradient(to right, #fff 0%, transparent 65%)\",\n }}\n >\n {/* Selector Pointer Circle */}\n \n
\n\n {/* 2. Rainbow Hue Spectrum Drag Bar */}\n {\n e.stopPropagation();\n setIsDraggingHue(true);\n handleHueMove(e.clientX);\n }}\n className=\"relative w-full h-3.5 rounded-full cursor-pointer select-none\"\n >\n \n {/* Slider Ring Handle */}\n \n \n\n {/* 3. Palette Color Swatches Grid */}\n
\n {[\n \"#a855f7\",\n \"#8b5cf6\",\n \"#6366f1\",\n \"#3b82f6\",\n \"#06b6d4\",\n \"#10b981\",\n \"#84cc16\",\n \"#eab308\",\n \"#f97316\",\n \"#ef4444\",\n \"#ec4899\",\n \"#f43f5e\",\n \"#ffffff\",\n \"#94a3b8\",\n \"#000000\",\n ].map((hex) => (\n {\n e.stopPropagation();\n onChange(hex);\n }}\n className=\"w-5 h-5 rounded-md transition-transform hover:scale-110 active:scale-95 border border-foreground/15 shadow-xs cursor-pointer\"\n style={{ backgroundColor: hex }}\n />\n ))}\n
\n \n \n );\n};\n\ntype PlayableShardsEffect = Exclude;\n\n/** Length of one `once` play, per effect, in seconds. */\nconst FX_ONCE_S: Record = {\n sparkle: 2.2,\n orbit: 1.6,\n beacon: 2,\n shimmer: 1.2,\n};\nconst FX_SPECKS = 16;\n\n/** Deterministic 0–1 noise so server and client scatter the specks alike. */\nconst fxNoise = (i: number, salt: number) => {\n const x = Math.sin(i * 12.9898 + salt * 78.233) * 43758.5453;\n return x - Math.floor(x);\n};\n\n/** Shows only a 2px ring at the padding edge — the track the orbit beams run in. */\nconst FX_RING_MASK: React.CSSProperties = {\n WebkitMask: \"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)\",\n WebkitMaskComposite: \"xor\",\n mask: \"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)\",\n maskComposite: \"exclude\",\n};\n\nconst SHARDS_FX_CSS = `\n@keyframes shards-fx-life { 0% { opacity: 0; } 8%, 75% { opacity: 1; } 100% { opacity: 0; } }\n@keyframes shards-fx-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes shards-fx-out { from { opacity: 1; } to { opacity: 0; } }\n@keyframes shards-fx-breathe { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.75; } }\n@keyframes shards-fx-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }\n@keyframes shards-fx-speck {\n 0% { opacity: 0; transform: translateY(0) scale(0.4); }\n 50% { opacity: 0.9; transform: translateY(-6px) scale(1.3); }\n 100% { opacity: 0; transform: translateY(-12px) scale(0.4); }\n}\n@keyframes shards-fx-orbit {\n from { transform: translate(-50%, -50%) rotate(0deg); }\n to { transform: translate(-50%, -50%) rotate(360deg); }\n}\n@keyframes shards-fx-sheen {\n from { transform: translateX(-120%) skewX(-20deg); }\n to { transform: translateX(420%) skewX(-20deg); }\n}\n@keyframes shards-fx-sheen-loop {\n 0% { transform: translateX(-120%) skewX(-20deg); }\n 40%, 100% { transform: translateX(420%) skewX(-20deg); }\n}\n@keyframes shards-fx-bloom {\n 0% { opacity: 0; transform: scale(0.98); }\n 35% { opacity: 0.6; }\n 100% { opacity: 0; transform: scale(1.04); }\n}\n@keyframes shards-fx-ping {\n 0% { transform: scale(1); opacity: 0.85; }\n 70%, 100% { transform: scale(1.18, 1.55); opacity: 0; }\n}\n@keyframes shards-fx-aura { 0% { opacity: 0.95; } 45% { opacity: 0.6; } 100% { opacity: 0; } }\n`;\n\n/**\n * One effect layer over a control tile, tinted by `color` (the theme primary\n * when omitted). `once` runs its single play and calls `onDone`; `continuous`\n * fades in, loops, and fades out when `leaving` turns on, then calls `onDone`.\n */\nfunction ShardsEffectLayer({\n effect,\n mode,\n leaving = false,\n color,\n onDone,\n}: {\n effect: PlayableShardsEffect;\n mode: ShardsEffectMode;\n leaving?: boolean;\n color?: string;\n onDone: () => void;\n}) {\n const loop = mode === \"continuous\";\n // The same layers serve both modes: once they play a single time, looped\n // they repeat forever while the wrapper holds them on screen.\n const run = (name: string, seconds: number, ease: string, delay = 0): React.CSSProperties => ({\n animation: `${name} ${seconds}s ${ease} ${delay}s ${loop ? \"infinite\" : 1} both`,\n });\n const life = loop\n ? `${leaving ? \"shards-fx-out\" : \"shards-fx-in\"} 0.4s ease-out both`\n : `shards-fx-life ${FX_ONCE_S[effect]}s linear both`;\n\n return (\n {\n if (e.target === e.currentTarget && (!loop || leaving)) onDone();\n }}\n className=\"pointer-events-none absolute inset-0 z-0 rounded-xl text-primary\"\n style={{ animation: life, color }}\n >\n