4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T22a72,"use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useState } from "react"; import { getButtonThemeStyle } from "./button-theme"; const Loader2: React.FC<{ className?: string }> = ({ className }) => ( ); const ArrowRightIcon: React.FC<{ className?: string }> = ({ className }) => ( ); export type ButtonVariant = | "outline" | "spin-border" | "pulse-glow" | "shimmer-beam" | "neon-aura" | "ripple-wave" | "gradient-flow" | "border-beam" | "radar-ping" | "breathe-glow" | "spotlight" | "cosmic-orbit" | "cyber-scan" | "expand-icon" | "slide-icon" | "slide-icon-loop" | "slide-bg" | "slide-bg-top" | "slide-bg-bottom" | "slide-bg-right" | "slide-text" | "slide-text-down" | "slide-text-bounce" | "scale-up" | "shine-sweep" | "glow-pulse" | "skew-slide" | "border-expand" | "icon-rotate" | "icon-bounce" | "icon-spin" | "curtain-reveal" | "corner-expand" | "glassmorphism" | "floating-shadow" | "magnetic-pull" | "glitch-cyber" | "3d" | "3d-press" | "liquid-fill" | "border-chase" | "3d-flip" | "holographic" | "laser-border" | "wave-ripple" | "electric-pulse" | "neon-sign" | "morphing-blob" | "split-door-reveal" | "expanding-circle-center" | "diamond-glare-wipe" | "border-draw-outline" | "vertical-curtain-rise" | "magnetic-pulse-ring" | "aura-glow-stream" | "neon-portal-ring" | "cyber-matrix-pulse" | "liquid-gradient-flow" | "magnetic-laser-ring" | "quantum-flux-beam" | "border-corner-pulse" | "beacon-radar-pulse" | "dual-ring-pulse" | "square-frame-pulse" | "corner-dash-pulse" | "horizontal-shutter-split" | "diagonal-slash-fill" | "corner-cross-bracket" | "inset-box-shadow-fill" | "glowing-line-trace" | "prism-reflection-shimmer" | "dual-spin-border" | "shards-control" // The plain shadcn-style surfaces. Everything above is an animated // treatment; these five are the ordinary buttons most pages actually need, // and the docs have always advertised them. | "default" | "destructive" | "secondary" | "ghost" | "link" | "pricing-primary" | "pricing-outline" | "pricing-glow" | "pricing-muted" | "pricing-pill" | "pricing-dark" | "pricing-typographic" | "pricing-typographic-muted"; type ButtonSize = "default" | "sm" | "lg"; /** * Decoration a "shards-control" tile plays when it lands on something: a * slider reaching full, a toggle switching on, or a new select / colour pick. */ export type ShardsEffect = "none" | "sparkle" | "orbit" | "beacon" | "shimmer"; /** `once` plays per landing; `continuous` loops for as long as the tile stays active. */ export type ShardsEffectMode = "once" | "continuous"; /** * The plain variants, styled from theme tokens so they follow whatever palette * the consumer has in globals.css. * * `outline` is deliberately absent: it is the default value and already has its * own treatment further down, so listing it here would silently restyle every * button that never passed a variant. */ const PLAIN_VARIANTS: Record = { default: "bg-primary text-primary-foreground border-transparent hover:bg-primary/90", destructive: "bg-destructive text-white border-transparent hover:bg-destructive/90", secondary: "bg-secondary text-secondary-foreground border-transparent hover:bg-secondary/80", ghost: "bg-transparent text-foreground border-transparent shadow-none hover:bg-accent hover:text-accent-foreground", link: "bg-transparent text-primary border-transparent shadow-none underline-offset-4 hover:underline", "pricing-primary": "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", "pricing-outline": "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", "pricing-glow": "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", "pricing-muted": "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", "pricing-pill": "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", "pricing-dark": "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", "pricing-typographic": "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", "pricing-typographic-muted": "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", }; export interface ButtonProps extends React.ButtonHTMLAttributes { variant?: ButtonVariant; size?: ButtonSize; loading?: boolean; color?: string; iconLeft?: React.ReactNode; iconRight?: React.ReactNode; /** Whether to show a default trailing arrow icon (e.g. for pricing CTAs like "Continue →"). */ showArrow?: boolean; /* Props for "shards-control" glass dark parameter tile variant */ controlType?: "color" | "select" | "slider" | "toggle"; label?: string; value?: string | number; options?: string[]; checked?: boolean; onCheckedChange?: (checked: boolean) => void; colorHex?: string; onColorChange?: (color: string) => void; min?: number; max?: number; step?: number; onValueChange?: (value: number | string) => void; /** * Effect played by a "shards-control" tile. Left unset, the tile keeps its * built-in feedback (slider beacon at full, colour burst on a pick). */ effect?: ShardsEffect; effectMode?: ShardsEffectMode; /** * Whether a `continuous` effect is running. Defaults to: slider at full, * toggle on, select / colour once something has been picked. */ effectActive?: boolean; } interface Ripple { x: number; y: number; size: number; id: number; } /* Helper HSV/HSL conversion for full interactive Color Canvas and Hue Slider */ function hsvToHex(h: number, s: number, v: number): string { const f = (n: number, k = (n + h / 60) % 6) => v - v * s * Math.max(0, Math.min(k, 4 - k, 1)); const r = Math.round(f(5) * 255); const g = Math.round(f(3) * 255); const b = Math.round(f(1) * 255); return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; } function hexToHsv(hex: string): { h: number; s: number; v: number } { let c = hex.replace("#", ""); if (c.length === 3) { c = c.split("").map((x) => x + x).join(""); } const num = parseInt(c, 16); if (isNaN(num)) return { h: 270, s: 0.7, v: 0.7 }; const r = ((num >> 16) & 255) / 255; const g = ((num >> 8) & 255) / 255; const b = (num & 255) / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const d = max - min; let h = 0; const s = max === 0 ? 0 : d / max; const v = max; if (max !== min) { switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return { h: Math.round(h * 360), s, v }; } function colorWithAlpha(color: string, alpha: number): string { if (color.startsWith("#")) { let hex = color.slice(1); if (hex.length === 3) { hex = hex.split("").map((x) => x + x).join(""); } if (hex.length === 6) { const r = parseInt(hex.slice(0, 2), 16); const g = parseInt(hex.slice(2, 4), 16); const b = parseInt(hex.slice(4, 6), 16); return `rgba(${r}, ${g}, ${b}, ${alpha})`; } } return color; } const ColorPickerPopover: React.FC<{ color: string; onChange: (hex: string) => void; onClose: () => void; }> = ({ color, onChange, onClose }) => { const initialHsv = React.useMemo(() => hexToHsv(color), []); const [hue, setHue] = useState(initialHsv.h); const [sat, setSat] = useState(initialHsv.s); const [val, setVal] = useState(initialHsv.v); const canvasRef = React.useRef(null); const hueRef = React.useRef(null); const [isDraggingCanvas, setIsDraggingCanvas] = useState(false); const [isDraggingHue, setIsDraggingHue] = useState(false); // Sync internal state when external color changes (e.g. swatch click), and // again when a drag ends. Done while rendering, against the last values seen. const [synced, setSynced] = useState({ color, isDraggingCanvas, isDraggingHue }); if ( synced.color !== color || synced.isDraggingCanvas !== isDraggingCanvas || synced.isDraggingHue !== isDraggingHue ) { setSynced({ color, isDraggingCanvas, isDraggingHue }); if (!isDraggingCanvas && !isDraggingHue) { const hsv = hexToHsv(color); setSat(hsv.s); setVal(hsv.v); if (hsv.s > 0.05) { setHue(hsv.h); } } } const handleCanvasMove = React.useCallback( (clientX: number, clientY: number) => { if (!canvasRef.current) return; const rect = canvasRef.current.getBoundingClientRect(); const x = Math.max(0, Math.min(rect.width, clientX - rect.left)); const y = Math.max(0, Math.min(rect.height, clientY - rect.top)); const newSat = x / rect.width; const newVal = 1 - y / rect.height; setSat(newSat); setVal(newVal); onChange(hsvToHex(hue, newSat, newVal)); }, [hue, onChange] ); const handleHueMove = React.useCallback( (clientX: number) => { if (!hueRef.current) return; const rect = hueRef.current.getBoundingClientRect(); const x = Math.max(0, Math.min(rect.width, clientX - rect.left)); const newHue = (x / rect.width) * 360; setHue(newHue); onChange(hsvToHex(newHue, sat, val)); }, [sat, val, onChange] ); useEffect(() => { if (!isDraggingCanvas) return; const onMove = (e: MouseEvent) => handleCanvasMove(e.clientX, e.clientY); const onUp = () => setIsDraggingCanvas(false); window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); }; }, [isDraggingCanvas, handleCanvasMove]); useEffect(() => { if (!isDraggingHue) return; const onMove = (e: MouseEvent) => handleHueMove(e.clientX); const onUp = () => setIsDraggingHue(false); window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); }; }, [isDraggingHue, handleHueMove]); const hueColor = hsvToHex(hue, 1, 1); return ( <>

{ e.stopPropagation(); onClose(); }} />

{/* 1. Interactive 2D Color Spectrum Field Box */}

{ e.stopPropagation(); setIsDraggingCanvas(true); handleCanvasMove(e.clientX, e.clientY); }} className="relative w-full h-32 rounded-xl overflow-hidden cursor-crosshair select-none" style={{ backgroundColor: hueColor, backgroundImage: "linear-gradient(to top, #000 0%, transparent 80%), linear-gradient(to right, #fff 0%, transparent 65%)", }} > {/* Selector Pointer Circle */}

{/* 2. Rainbow Hue Spectrum Drag Bar */}

{ e.stopPropagation(); setIsDraggingHue(true); handleHueMove(e.clientX); }} className="relative w-full h-3.5 rounded-full cursor-pointer select-none" >

{/* Slider Ring Handle */}

{/* 3. Palette Color Swatches Grid */}

{[ "#a855f7", "#8b5cf6", "#6366f1", "#3b82f6", "#06b6d4", "#10b981", "#84cc16", "#eab308", "#f97316", "#ef4444", "#ec4899", "#f43f5e", "#ffffff", "#94a3b8", "#000000", ].map((hex) => (

); }; type PlayableShardsEffect = Exclude; /** Length of one `once` play, per effect, in seconds. */ const FX_ONCE_S: Record = { sparkle: 2.2, orbit: 1.6, beacon: 2, shimmer: 1.2, }; const FX_SPECKS = 16; /** Deterministic 0–1 noise so server and client scatter the specks alike. */ const fxNoise = (i: number, salt: number) => { const x = Math.sin(i * 12.9898 + salt * 78.233) * 43758.5453; return x - Math.floor(x); }; /** Shows only a 2px ring at the padding edge — the track the orbit beams run in. */ const FX_RING_MASK: React.CSSProperties = { WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)", WebkitMaskComposite: "xor", mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)", maskComposite: "exclude", }; const SHARDS_FX_CSS = ` @keyframes shards-fx-life { 0% { opacity: 0; } 8%, 75% { opacity: 1; } 100% { opacity: 0; } } @keyframes shards-fx-in { from { opacity: 0; } to { opacity: 1; } } @keyframes shards-fx-out { from { opacity: 1; } to { opacity: 0; } } @keyframes shards-fx-breathe { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.75; } } @keyframes shards-fx-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } } @keyframes shards-fx-speck { 0% { opacity: 0; transform: translateY(0) scale(0.4); } 50% { opacity: 0.9; transform: translateY(-6px) scale(1.3); } 100% { opacity: 0; transform: translateY(-12px) scale(0.4); } } @keyframes shards-fx-orbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes shards-fx-sheen { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(420%) skewX(-20deg); } } @keyframes shards-fx-sheen-loop { 0% { transform: translateX(-120%) skewX(-20deg); } 40%, 100% { transform: translateX(420%) skewX(-20deg); } } @keyframes shards-fx-bloom { 0% { opacity: 0; transform: scale(0.98); } 35% { opacity: 0.6; } 100% { opacity: 0; transform: scale(1.04); } } @keyframes shards-fx-ping { 0% { transform: scale(1); opacity: 0.85; } 70%, 100% { transform: scale(1.18, 1.55); opacity: 0; } } @keyframes shards-fx-aura { 0% { opacity: 0.95; } 45% { opacity: 0.6; } 100% { opacity: 0; } } `; /** * One effect layer over a control tile, tinted by `color` (the theme primary * when omitted). `once` runs its single play and calls `onDone`; `continuous` * fades in, loops, and fades out when `leaving` turns on, then calls `onDone`. */ function ShardsEffectLayer({ effect, mode, leaving = false, color, onDone, }: { effect: PlayableShardsEffect; mode: ShardsEffectMode; leaving?: boolean; color?: string; onDone: () => void; }) { const loop = mode === "continuous"; // The same layers serve both modes: once they play a single time, looped // they repeat forever while the wrapper holds them on screen. const run = (name: string, seconds: number, ease: string, delay = 0): React.CSSProperties => ({ animation: `${name} ${seconds}s ${ease} ${delay}s ${loop ? "infinite" : 1} both`, }); const life = loop ? `${leaving ? "shards-fx-out" : "shards-fx-in"} 0.4s ease-out both` : `shards-fx-life ${FX_ONCE_S[effect]}s linear both`; return ( { if (e.target === e.currentTarget && (!loop || leaving)) onDone(); }} className="pointer-events-none absolute inset-0 z-0 rounded-xl text-primary" style={{ animation: life, color }} >