"use client"; import { MotionConfigContext, motion } from "motion/react"; import { cn } from "@/lib/utils"; import { useState, useEffect, useRef, useSyncExternalStore, useContext, type ComponentProps, type ReactNode, type RefObject, } from "react"; /** * "user" (the default) follows a surrounding , * then the visitor's "reduce motion" device setting. "always" and "never" * force the calm or the full version. */ export type ReducedMotion = "user" | "always" | "never"; const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)"; function subscribeToReducedMotion(onChange: () => void) { const query = window.matchMedia(REDUCED_MOTION_QUERY); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); } // The prop wins, then MotionConfig, then the device setting. The device is // read as "no" while server rendering, so hydration always matches. function useShouldReduceMotion(mode: ReducedMotion = "user") { const device = useSyncExternalStore( subscribeToReducedMotion, () => window.matchMedia(REDUCED_MOTION_QUERY).matches, () => false, ); const config = useContext(MotionConfigContext).reducedMotion; if (mode !== "user") return mode === "always"; if (config === "always" || config === "never") return config === "always"; return device; } type ButtonSize = "xs" | "sm" | "md" | "lg"; interface ProButtonProps extends ComponentProps<"button"> { /** The label. */ children?: ReactNode; /** * Colour of the pixel box beside the label, as any CSS colour, including a theme variable * such as `var(--primary)`. The box shades it a little darker towards the bottom. * @default "#007bff" */ color?: string; /** Colour of the lit pixels in the arrow. Unlit pixels show it faintly. @default "#ffffff" */ pixelColor?: string; /** Size step: 28, 36, 48 or 60px tall. Each sets the height, radius, text and pixel box together. @default "md" */ size?: ButtonSize; /** * "user" follows a surrounding MotionConfig, then the visitor's reduce-motion setting. * "always" and "never" force the calm or the full version. */ reducedMotion?: ReducedMotion; } interface BoxProps { color: string; pixelColor: string; size: ButtonSize; reduce: boolean; /** Hovered or focused: the arrow stops and the pixels make a smile. */ smile: boolean; } /** * Put this attribute on an element around the button, such as a pricing * card, and hovering anywhere on that element wakes the button, not just * hovering the button itself. */ const PRO_BUTTON_GROUP = "data-pro-button-group"; /** The pixels lit for the smile: two eyes, then a mouth curving up. */ const SMILE = [ [false, true, false, true, false], [false, true, false, true, false], [false, false, false, false, false], [true, false, false, false, true], [false, true, true, true, false], ]; /** * True while the pointer is over the button (or over the nearest ancestor * marked with data-pro-button-group), or while the button has keyboard * focus. A mouse click's focus does not count, so it never sticks on. */ function useAwake(anchor: RefObject, disabled?: boolean) { const [hovered, setHovered] = useState(false); const [focused, setFocused] = useState(false); useEffect(() => { const button = anchor.current?.closest("button"); if (!button) return; const area = button.closest(`[${PRO_BUTTON_GROUP}]`) ?? button; const enter = () => setHovered(true); const leave = () => setHovered(false); const focus = () => setFocused(button.matches(":focus-visible")); const blur = () => setFocused(false); area.addEventListener("pointerenter", enter); area.addEventListener("pointerleave", leave); button.addEventListener("focus", focus); button.addEventListener("blur", blur); return () => { area.removeEventListener("pointerenter", enter); area.removeEventListener("pointerleave", leave); button.removeEventListener("focus", focus); button.removeEventListener("blur", blur); }; }, [anchor]); return (hovered || focused) && !disabled; } // One fixed size per step, on an even scale: 28, 36, 48 and 60px tall. // "md" (48px) is the everyday call to action and the default; "sm" and "xs" // suit cards, toolbars and dense rows; "lg" is for a hero. A button's size // comes from its prop, never from the screen width. const sizeConfig = { xs: { button: "rounded-[8px] py-0.5 pl-0.5 pr-3 gap-2", text: "text-[12px]", box: "size-6 rounded-[5px]", pixel: "size-[2px]", gridGap: "gap-[1px]", shadow: "shadow-[inset_0_1px_2px_rgba(0,0,0,0.2),0_6px_8px_-5px_rgba(0,0,0,0.1),0_3px_3px_-5px_rgba(0,0,0,0.04)]", boxShadow: "shadow-[inset_0_1px_1px_rgba(255,255,255,0.5),0_3px_5px_rgba(0,0,0,0.35)]", }, sm: { button: "rounded-[10px] py-0.5 pl-0.5 pr-4 gap-2.5", text: "text-[13px]", box: "size-8 rounded-[6px]", pixel: "size-[3px]", gridGap: "gap-[1px]", shadow: "shadow-[inset_0_1px_2px_rgba(0,0,0,0.2),0_8px_10px_-5px_rgba(0,0,0,0.1),0_4px_4px_-5px_rgba(0,0,0,0.04)]", boxShadow: "shadow-[inset_0_1px_1px_rgba(255,255,255,0.5),0_4px_6px_rgba(0,0,0,0.35)]", }, md: { button: "rounded-[14px] py-1 pl-1 pr-5 gap-3", text: "text-[14px]", box: "size-10 rounded-[8px]", pixel: "size-[4px]", gridGap: "gap-[2px]", shadow: "shadow-[inset_0_2px_4px_rgba(0,0,0,0.2),0_16px_20px_-5px_rgba(0,0,0,0.1),0_8px_8px_-5px_rgba(0,0,0,0.04)]", boxShadow: "shadow-[inset_0_2px_2px_rgba(255,255,255,0.5),0_8px_12px_rgba(0,0,0,0.35)]", }, lg: { button: "rounded-[18px] py-1.5 pl-1.5 pr-7 gap-4", text: "text-[16px]", box: "size-12 rounded-[11px]", pixel: "size-[4px]", gridGap: "gap-[3px]", shadow: "shadow-[inset_0_2px_4px_rgba(0,0,0,0.2),0_20px_25px_-5px_rgba(0,0,0,0.1),0_10px_10px_-5px_rgba(0,0,0,0.04)]", boxShadow: "shadow-[inset_0_2px_2px_rgba(255,255,255,0.5),0_10px_16px_rgba(0,0,0,0.35)]", }, }; const ProButton = ({ className, color = "#007bff", pixelColor = "#ffffff", size = "md", reducedMotion = "user", children, type = "button", ...props }: ProButtonProps) => { const s = sizeConfig[size]; // Reduced motion parks the arrow centred in the box instead of looping it, // and keeps the label still while the button is awake. const reduce = useShouldReduceMotion(reducedMotion); const labelRef = useRef(null); const awake = useAwake(labelRef, props.disabled); const shimmer = awake && !reduce; return ( ); }; const Box = ({ color, pixelColor, size, reduce, smile }: BoxProps) => { const [frame, setFrame] = useState(0); const s = sizeConfig[size]; // The arrow loops until the button wakes, then holds still under the smile. useEffect(() => { if (reduce || smile) return; const timer = setInterval(() => { setFrame((prev) => (prev + 1) % 9); }, 150); return () => clearInterval(timer); }, [reduce, smile]); const getPattern = (offset: number) => { const pattern: boolean[][] = []; for (let i = 0; i < 5; i++) { const row: boolean[] = []; for (let j = 0; j < 5; j++) { const pos = j - offset; const isArrow = (i === 2 && pos >= 0 && pos <= 4) || (i === 1 && pos === 3) || (i === 0 && pos === 2) || (i === 3 && pos === 3) || (i === 4 && pos === 2); row.push(isArrow && pos >= 0 && pos <= 4); } pattern.push(row); } return pattern; }; const currentPattern = smile ? SMILE : getPattern(reduce ? 0 : frame - 5); return (