50: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"] 51: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"] 52:T4bde,"use client"; // beui.dev/components/blocks/prediction-market import { Banknote, ChevronDown } from "lucide-react"; import { AnimatePresence, animate, motion, useReducedMotion, } from "motion/react"; import { useCallback, useEffect, useId, useMemo, useRef, useState, type CSSProperties, } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; import { StatefulButton, type ButtonState } from "./button/stateful"; import { NumberTicker } from "./number-ticker"; import { Tabs, TabsList, TabsTrigger } from "./tabs"; export type PredictionMarketMode = "buy" | "sell"; export type PredictionMarketOutcome = { id: string; label: string; price: number; }; export type PredictionMarketOrderValue = { mode: PredictionMarketMode; outcomeId: string; amount: string; }; export type PredictionMarketQuote = { valid: boolean; amount: number; price: number; shares: number; payout: number; error?: string; }; export type PredictionMarketClassNames = { root?: string; header?: string; tabs?: string; outcomes?: string; amount?: string; chips?: string; footer?: string; action?: string; }; export interface PredictionMarketProps { outcomes?: PredictionMarketOutcome[]; value?: PredictionMarketOrderValue; defaultValue?: Partial; onValueChange?: (value: PredictionMarketOrderValue) => void; onTrade?: ( order: PredictionMarketOrderValue, quote: PredictionMarketQuote, ) => void; onSignIn?: () => void; authenticated?: boolean; orderTypeLabel?: string; balance?: number; positions?: Record; quickAmounts?: number[]; minTrade?: number; className?: string; classNames?: PredictionMarketClassNames; } const DEFAULT_OUTCOMES: PredictionMarketOutcome[] = [ { id: "up", label: "Up", price: 0.09 }, { id: "down", label: "Down", price: 0.91 }, ]; const MODES: { id: PredictionMarketMode; label: string }[] = [ { id: "buy", label: "Buy" }, { id: "sell", label: "Sell" }, ]; const DEFAULT_QUICK_AMOUNTS = [10, 50, 100, 500]; const DIGIT_TRANSITION = { duration: 0.18, ease: EASE_OUT } as const; type AmountInputStyle = CSSProperties & { "--amount-chars": string }; function useControllableOrder({ value, defaultValue, outcomes, onValueChange, }: { value?: PredictionMarketOrderValue; defaultValue?: Partial; outcomes: PredictionMarketOutcome[]; onValueChange?: (value: PredictionMarketOrderValue) => void; }) { const initialValue: PredictionMarketOrderValue = { mode: defaultValue?.mode ?? "buy", outcomeId: defaultValue?.outcomeId ?? outcomes[0]?.id ?? "", amount: defaultValue?.amount ?? "", }; const [internalValue, setInternalValue] = useState(initialValue); const controlled = value !== undefined; const order = value ?? internalValue; const setOrder = useCallback( (next: PredictionMarketOrderValue) => { if (!controlled) { setInternalValue(next); } onValueChange?.(next); }, [controlled, onValueChange], ); return [order, setOrder] as const; } function sanitizeAmount(value: string) { const normalized = value.replace(/[^\d.]/g, ""); const [whole, ...decimalParts] = normalized.split("."); const decimal = decimalParts.join(""); if (decimalParts.length === 0) return whole; return `${whole}.${decimal.slice(0, 2)}`; } function parseAmount(value: string) { return Number(value) || 0; } function formatCurrency(value: number, maximumFractionDigits = 2) { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits, }).format(value); } function formatCompactCurrency(value: number) { return value >= 100 ? formatCurrency(value, 0) : formatCurrency(value, value % 1 === 0 ? 0 : 2); } function formatCents(value: number) { const cents = value * 100; const precision = Number.isInteger(cents) ? 0 : 1; return `${cents.toFixed(precision)}¢`; } function buildQuote({ order, outcome, balance, position, minTrade, }: { order: PredictionMarketOrderValue; outcome: PredictionMarketOutcome; balance: number; position: number; minTrade: number; }): PredictionMarketQuote { const amount = parseAmount(order.amount); const price = Math.max(0.01, Math.min(0.99, outcome.price)); const shares = order.mode === "buy" ? amount / price : amount; const payout = order.mode === "buy" ? shares : amount * price; if (amount <= 0) { return { valid: false, amount, price, shares: 0, payout: 0, error: "Enter an amount", }; } if (order.mode === "buy" && amount < minTrade) { return { valid: false, amount, price, shares, payout, error: `Minimum ${formatCompactCurrency(minTrade)}`, }; } if (order.mode === "buy" && amount > balance) { return { valid: false, amount, price, shares, payout, error: "Insufficient balance", }; } if (order.mode === "sell" && amount > position) { return { valid: false, amount, price, shares, payout, error: "Not enough shares", }; } return { valid: true, amount, price, shares, payout, }; } function keyedAmountChars(value: string) { const seen = new Map(); return value.split("").map((char) => { const count = seen.get(char) ?? 0; seen.set(char, count + 1); return { id: `${char}-${count}`, char }; }); } function amountInputSize(value: string) { const length = value.replace(/\D/g, "").length; if (length >= 10) return "text-3xl sm:text-4xl"; if (length >= 8) return "text-4xl sm:text-5xl"; if (length >= 6) return "text-[44px] sm:text-[56px]"; return "text-5xl sm:text-6xl"; } function payoutTickerSize(value: number) { const length = formatCurrency(value).length; if (length >= 16) return "text-xl sm:text-2xl"; if (length >= 13) return "text-2xl"; if (length >= 10) return "text-3xl"; return "text-4xl"; } function AnimatedAmountInput({ id, value, mode, inputSize, disabled, reduce, onChange, }: { id: string; value: string; mode: PredictionMarketMode; inputSize: string; disabled: boolean; reduce: boolean; onChange: (value: string) => void; }) { const displayValue = value || "0"; const chars = keyedAmountChars(displayValue); const inputStyle = { "--amount-chars": String(chars.length), } as AmountInputStyle; const label = mode === "buy" ? "Amount" : "Shares"; return (

{mode === "buy" ? ( $ ) : null}

onChange(sanitizeAmount(event.target.value))} placeholder="0" inputMode="decimal" aria-label={label} autoComplete="off" className={cn( "w-[calc((var(--amount-chars)+1)*0.62em)] min-w-[0.8em] max-w-[260px] bg-transparent text-left font-semibold leading-none tracking-normal text-transparent outline-none tabular-nums", "caret-foreground transition-[font-size] duration-200 placeholder:text-transparent selection:bg-foreground/10 disabled:cursor-not-allowed", inputSize, )} style={inputStyle} />

{chars.map(({ id: charId, char }) => ( {char} ))}

); } export function PredictionMarket({ outcomes = DEFAULT_OUTCOMES, value, defaultValue, onValueChange, onTrade, onSignIn, authenticated = true, orderTypeLabel = "Market", balance = 500, positions = { up: 24, down: 16 }, quickAmounts = DEFAULT_QUICK_AMOUNTS, minTrade = 1, className, classNames, }: PredictionMarketProps) { const inputId = useId(); const reduce = useReducedMotion() ?? false; const amountRef = useRef(null); const timeoutRef = useRef | null>(null); const [status, setStatus] = useState<"idle" | "placing" | "filled">("idle"); const [shakeKey, setShakeKey] = useState(0); const [order, setOrder] = useControllableOrder({ value, defaultValue, outcomes, onValueChange, }); const selectedOutcome = outcomes.find((outcome) => outcome.id === order.outcomeId) ?? outcomes[0]; const position = positions[selectedOutcome.id] ?? 0; const quote = useMemo( () => buildQuote({ order, outcome: selectedOutcome, balance, position, minTrade, }), [balance, minTrade, order, position, selectedOutcome], ); const setOrderValue = useCallback( (next: Partial) => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); timeoutRef.current = null; } setStatus("idle"); setOrder({ ...order, ...next }); }, [order, setOrder], ); useEffect(() => { return () => { if (timeoutRef.current) clearTimeout(timeoutRef.current); }; }, []); useEffect(() => { if (shakeKey === 0 || reduce || !amountRef.current) return; animate( amountRef.current, { x: [0, -5, 5, -3, 3, -1, 0] }, { duration: 0.38, ease: EASE_OUT }, ); }, [reduce, shakeKey]); const addAmount = (increment: number) => { const next = parseAmount(order.amount) + increment; setOrderValue({ amount: String(next) }); }; const setMax = () => { if (order.mode === "buy") { setOrderValue({ amount: String(Math.floor(balance)) }); return; } setOrderValue({ amount: position.toFixed(position % 1 === 0 ? 0 : 2) }); }; const submit = () => { if (!authenticated) { onSignIn?.(); return; } if (!quote.valid) { setShakeKey((key) => key + 1); return; } setStatus("placing"); timeoutRef.current = setTimeout(() => { setStatus("filled"); onTrade?.(order, quote); }, 650); }; const inputSize = amountInputSize(order.amount); const payoutSize = payoutTickerSize(quote.payout); const actionState: ButtonState = status === "placing" ? "loading" : status === "filled" ? "success" : quote.valid ? "idle" : "error"; const showFooter = authenticated; return (

setOrderValue({ mode: mode as PredictionMarketMode, amount: "", }) } variant="underline" className={cn("shrink-0", classNames?.tabs)} > {MODES.map((mode) => ( {mode.label} ))}

setOrderValue({ outcomeId })} variant="pill" className={classNames?.outcomes} > {outcomes.map((outcome) => { const selected = outcome.id === selectedOutcome.id; const isNo = outcome.label.toLowerCase() === "no" || outcome.label.toLowerCase() === "down"; return ( {outcome.label} {formatCents(outcome.price)} ); })}

{order.mode === "buy" ? "Amount" : "Shares"}

setOrderValue({ amount })} />

{quickAmounts.map((amount) => ( ))}

{showFooter ? (

{order.mode === "buy" ? "To win" : "To receive"}

Avg. Price {formatCents(quote.price)}

formatCurrency(cents / 100)} />

Trade

) : (

Connect

)}

); } 53:T1b47,"use client"; import { Check, Loader2, X } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion, type Variants, } from "motion/react"; import { forwardRef, type ReactNode, useLayoutEffect, useRef, useState, } from "react"; import { EASE_OUT, SPRING_SWAP } from "@/lib/ease"; import { Button, type ButtonProps } from "./base"; export type ButtonState = "idle" | "loading" | "success" | "error"; export interface StatefulButtonProps extends Omit { state?: ButtonState; children: ReactNode; loadingText?: ReactNode; successText?: ReactNode; errorText?: ReactNode; icon?: ReactNode; } const CASCADE_STAGGER = 0.025; const ROLL_BLUR = "blur(6px)"; const CASCADE_LETTER_VARIANTS: Variants = { initial: { opacity: 0, y: "105%", filter: ROLL_BLUR }, animate: (delay: number = 0) => ({ opacity: 1, y: "0%", filter: "blur(0px)", transition: { ...SPRING_SWAP, delay }, }), exit: (delay: number = 0) => ({ opacity: 0, y: "-105%", filter: ROLL_BLUR, transition: { duration: 0.16, ease: EASE_OUT, delay: delay * 0.5 }, }), }; const ICON_VARIANTS: Variants = { // Width collapses too, so the icon adds/removes its own space smoothly // instead of popping the row width in a single frame. initial: { opacity: 0, width: 0, scale: 0.7, filter: ROLL_BLUR }, animate: { opacity: 1, width: "1.5rem", scale: 1, filter: "blur(0px)", transition: SPRING_SWAP, }, exit: { opacity: 0, width: 0, scale: 0.7, filter: ROLL_BLUR, transition: { duration: 0.16, ease: EASE_OUT }, }, }; function IconSlot({ keyId, children }: { keyId: string; children: ReactNode }) { const reduce = useReducedMotion(); return ( {children} ); } function TextSlot({ value, children, }: { value: string; children: ReactNode; }) { const reduce = useReducedMotion(); const measureRef = useRef(null); const [width, setWidth] = useState(); const label = typeof children === "string" ? children : null; const cascade = label !== null && !reduce; // Measure strings with the same per-letter layout as the cascade. Measuring // the whole string preserves kerning, which can make it narrower than the // inline-block letters and clip the final glyph during the width animation. useLayoutEffect(() => { const nextWidth = measureRef.current?.offsetWidth; if (!nextWidth) return; setWidth((current) => (current === nextWidth ? current : nextWidth)); }); return ( {cascade ? label.split("").map((char, index) => ( {char} )) : children} {cascade ? ( <> {label} {label.split("").map((char, index) => ( {char} ))} ) : ( {children} )} ); } export const StatefulButton = forwardRef(function StatefulButton( { state = "idle", children, loadingText = "Loading", successText = "Done", errorText = "Try again", icon, disabled, ...rest }, ref, ) { const isBusy = state === "loading"; const stateText = state === "loading" ? loadingText : state === "success" ? successText : state === "error" ? errorText : children; const textKey = typeof stateText === "string" ? `${state}-${stateText}` : state; return ( ); }); 54:T14a4,"use client"; import { animate, motion, useInView, useReducedMotion } from "motion/react"; import { useEffect, useMemo, useRef, useState } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; export interface NumberTickerProps { value: number; /** Digits to pad to (left). */ pad?: number; /** Per-digit roll duration in seconds. */ duration?: number; /** Stagger between digits. */ stagger?: number; /** Render only after the element enters the viewport. */ startOnView?: boolean; prefix?: string; suffix?: string; /** Add a small blur during digit rolls. */ blur?: boolean; className?: string; digitClassName?: string; /** Insert locale group separators (commas). Server-component safe. */ locale?: boolean; /** Custom formatter. Client-only — server components must use `locale` instead. */ format?: (value: number) => string; } const DIGIT_HEIGHT_EM = 1.1; const DIGITS = Array.from({ length: 10 }, (_, n) => n); export function NumberTicker({ value, pad, duration = 0.9, stagger = 0.04, startOnView = true, prefix, suffix, blur = false, className, digitClassName, locale, format, }: NumberTickerProps) { const containerRef = useRef(null); const inView = useInView(containerRef, { once: true, amount: 0.6 }); const [armed, setArmed] = useState(!startOnView); useEffect(() => { if (startOnView && inView) setArmed(true); }, [startOnView, inView]); const text = useMemo(() => { const rounded = Math.round(value); const formatted = format ? format(rounded) : locale ? rounded.toLocaleString() : rounded.toString(); return pad ? formatted.padStart(pad, "0") : formatted; }, [value, pad, format, locale]); const glyphs = useMemo(() => { const chars = text.split(""); // Key by place value (position from the right): a changing digit keeps its // identity and rolls to the new value instead of remounting and replaying // from 0. Growing numbers add glyphs on the left without re-keying the // ones, tens, hundreds already on screen. return chars.map((char, i) => ({ char, id: `g-${chars.length - 1 - i}` })); }, [text]); const readableText = `${prefix ?? ""}${text}${suffix ?? ""}`; // Stagger is an entrance flourish. Once the reveal has played, value // changes roll every digit immediately — a per-digit delay on live updates // reads as lag. const [entered, setEntered] = useState(false); useEffect(() => { if (!armed || entered) return; const total = (duration + glyphs.length * stagger) * 1000; const t = window.setTimeout(() => setEntered(true), total); return () => window.clearTimeout(t); }, [armed, entered, duration, stagger, glyphs.length]); return ( {readableText} ); } function Digit({ digit, delay, duration, blur, className, }: { digit: number; delay: number; duration: number; blur: boolean; className?: string; }) { const reduce = useReducedMotion(); const columnRef = useRef(null); useEffect(() => { if (reduce || !blur || !columnRef.current || !Number.isFinite(digit)) { return; } const node = columnRef.current; const controls = animate( node, { filter: ["blur(10px)", "blur(0px)"] }, { duration: Math.min(duration * 0.75, 0.32), delay, ease: EASE_OUT, }, ); return () => { controls.stop(); node.style.filter = "blur(0px)"; }; }, [blur, delay, digit, duration, reduce]); return ( {DIGITS.map((n) => ( {n} ))} ); } 55:T374e,"use client"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { cancelFrame, frame, motion, MotionConfig, useReducedMotion, type Transition } from "motion/react"; import { createContext, useCallback, useContext, useId, useLayoutEffect, useRef, useMemo, useState, type ReactNode, } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; type Variant = "pill" | "underline" | "segment"; type Ctx = { value: string; setValue: (v: string) => void; layoutId: string; variant: Variant; }; const TabsCtx = createContext(null); function useTabs() { const ctx = useContext(TabsCtx); if (!ctx) throw new Error("Tabs.* must be used inside "); return ctx; } // Settle without overshoot: a scrollable tab list would turn even a small // overshoot into a transient scrollbar and layout shift. // Scale stiffness and damping together for a quicker glide with the same feel. const transition: Transition = { type: "spring", stiffness: 245, damping: 36, mass: 1.2, }; export function Tabs({ defaultValue, value, onValueChange, variant = "pill", children, className, }: { defaultValue?: string; value?: string; onValueChange?: (v: string) => void; variant?: Variant; children: ReactNode; className?: string; }) { const [internal, setInternal] = useState(defaultValue ?? ""); const layoutId = useId(); const reduce = useReducedMotion(); const controlled = value !== undefined; const current = controlled ? value : internal; const setValue = useCallback( (v: string) => { if (!controlled) setInternal(v); onValueChange?.(v); }, [controlled, onValueChange], ); const contextValue = useMemo( () => ({ value: current, setValue, layoutId, variant }), [current, layoutId, setValue, variant], ); return ( {/* layoutRoot: the indicator's layoutId measures in page coordinates, so inside fixed/scrolled containers it would replay scroll offsets as movement. The pill only ever travels within the list, so scoping projection to the Tabs wrapper is always correct. */} {children} ); } const listClasses: Record = { pill: "inline-flex items-center gap-1 rounded-full bg-card p-1", underline: "inline-flex items-center gap-1 border-b border-border", segment: "inline-flex items-center gap-0 rounded-lg bg-card p-0.5", }; export function TabsList({ children, className, wrapperClassName, }: { children: ReactNode; className?: string; wrapperClassName?: string; }) { const { variant, value } = useTabs(); const reduce = useReducedMotion(); const rootRef = useRef(null); const viewportRef = useRef(null); const listRef = useRef(null); const viewportId = useId(); const [edges, setEdges] = useState({ overflow: false, left: false, right: false }); const measure = useCallback(() => { const root = rootRef.current; const viewport = viewportRef.current; if (!root || !viewport) return; // Overlay controls do not reduce the viewport or change its scroll range. const overflow = viewport.scrollWidth > root.clientWidth + 1; const max = Math.max(0, viewport.scrollWidth - viewport.clientWidth); const rtl = getComputedStyle(viewport).direction === "rtl"; // Modern browsers expose negative scrollLeft in RTL. Clamp rubber-banding. const fromLeft = Math.max(0, Math.min(max, rtl ? max + viewport.scrollLeft : viewport.scrollLeft)); const next = { overflow, left: fromLeft > 1, right: fromLeft < max - 1 }; setEdges((previous) => previous.overflow === next.overflow && previous.left === next.left && previous.right === next.right ? previous : next); }, []); const reveal = useCallback((tab: HTMLElement | null) => { const viewport = viewportRef.current; if (!viewport || !tab) return; const frame = viewport.getBoundingClientRect(); const item = tab.getBoundingClientRect(); const max = Math.max(0, viewport.scrollWidth - viewport.clientWidth); const rtl = getComputedStyle(viewport).direction === "rtl"; const fromLeft = Math.max(0, Math.min(max, rtl ? max + viewport.scrollLeft : viewport.scrollLeft)); // Keep the selected/focused label clear of the arrows over the faded edges. const left = frame.left + (fromLeft > 1 ? 36 : 0); const right = frame.right - (fromLeft < max - 1 ? 36 : 0); const delta = item.left < left ? item.left - left : item.right > right ? item.right - right : 0; // Scroll only this viewport; scrollIntoView can also move the whole page. if (delta) viewport.scrollBy({ left: delta, behavior: reduce ? "instant" : "smooth" }); }, [reduce]); useLayoutEffect(() => { const root = rootRef.current; const viewport = viewportRef.current; const list = listRef.current; if (!root || !viewport || !list) return; const update = () => { measure(); reveal(list.querySelector('[role="tab"][aria-selected="true"]')); }; const observer = new ResizeObserver(update); observer.observe(root); observer.observe(viewport); observer.observe(list); viewport.addEventListener("scroll", measure, { passive: true }); update(); return () => { observer.disconnect(); viewport.removeEventListener("scroll", measure); }; }, [measure, reveal]); useLayoutEffect(() => { // Children may change without a resize; controlled selection must also reveal. void children; void value; void edges.overflow; measure(); reveal(listRef.current?.querySelector('[role="tab"][aria-selected="true"]') ?? null); }, [children, value, edges.overflow, measure, reveal]); useLayoutEffect(() => { if (variant === "underline") return; const list = listRef.current; if (!list) return; void children; const labels = Array.from(list.querySelectorAll("[data-tabs-label]")); const indicator = list.querySelector("[data-tabs-indicator]"); const target = list.querySelector('[role="tab"][aria-selected="true"]'); if (!indicator || !target || target.dataset.tabsValue !== value) { for (const label of labels) label.style.clipPath = "inset(0 100% 0 0)"; return; } let frames = 0; let stillFrames = 0; let previous: { left: number; right: number } | undefined; const syncClips = () => { const pill = (reduce ? target : indicator).getBoundingClientRect(); // Read ALL geometry before writing ANY masks. A loop per tab interleaved // reads and writes, forcing the browser to flush styles repeatedly. const clips = labels.map((label) => { const bounds = label.getBoundingClientRect(); const left = Math.max(0, Math.min(bounds.width, pill.left - bounds.left)); const right = Math.max(0, Math.min(bounds.width, bounds.right - pill.right)); return left + right >= bounds.width ? "inset(0 100% 0 0)" : `inset(0 ${right}px 0 ${left}px)`; }); labels.forEach((label, index) => { if (label.style.clipPath !== clips[index]) label.style.clipPath = clips[index]; }); frames += 1; stillFrames = previous && Math.abs(pill.left - previous.left) < 0.01 && Math.abs(pill.right - previous.right) < 0.01 ? stillFrames + 1 : 0; previous = { left: pill.left, right: pill.right }; if (reduce || (frames > 2 && stillFrames >= 2)) cancelFrame(syncClips); }; // One shared pass after Motion paints the projected pill keeps every label // in sync, including labels crossed during a long or interrupted glide. frame.postRender(syncClips, true); return () => cancelFrame(syncClips); }, [value, children, variant, reduce]); const scroll = (direction: number) => { const viewport = viewportRef.current; if (viewport) viewport.scrollBy({ left: direction * viewport.clientWidth * 0.8, behavior: reduce ? "instant" : "smooth" }); }; const controlClass = "absolute inset-y-0 z-20 inline-flex w-9 items-center justify-center text-foreground transition-opacity hover:opacity-70 focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-0"; const surfaceClass = variant === "pill" ? "rounded-full bg-card" : variant === "segment" ? "rounded-lg bg-card" : ""; return (

{edges.overflow && ( )} { if (event.target instanceof HTMLElement && event.target.getAttribute("role") === "tab") reveal(event.target); }} >

{children}

{edges.overflow && edges.left && (

); } export function TabsTrigger({ value, children, className, indicatorClassName, }: { value: string; children: ReactNode; className?: string; indicatorClassName?: string; }) { const { value: current, setValue, layoutId, variant } = useTabs(); const active = current === value; // React owns the initial mask only; TabsList synchronizes subsequent masks. const [initialClip] = useState(() => active ? "inset(0)" : "inset(0 100% 0 0)"); if (variant === "underline") { return ( ); } const radius = variant === "pill" ? "rounded-full" : "rounded-md"; return (

{active ? ( ) : null}

); } export function TabsContent({ value, children, className }: { value: string; children: ReactNode; className?: string }) { const { value: current } = useTabs(); const reduce = useReducedMotion(); const active = current === value; // Inactive panels stay mounted but hidden, so their content (e.g. source // code) is present in the server-rendered HTML for crawlers and assistive // tech, instead of being dropped from the DOM. if (!active) { return ( ); } return ( {children} ); } 56:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 57:T1498,"use client"; import { AnimatePresence, type HTMLMotionProps, motion, useReducedMotion, } from "motion/react"; import { forwardRef, type PointerEvent, type ReactNode, useCallback, useRef, useState, } from "react"; import { EASE_OUT, SPRING_PRESS } from "@/lib/ease"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { cn } from "@/lib/utils"; export type ButtonVariant = "primary" | "secondary" | "ghost" | "outline"; export type ButtonSize = "sm" | "md" | "lg" | "icon"; export interface ButtonProps extends Omit< HTMLMotionProps<"button">, "children" > { variant?: ButtonVariant; size?: ButtonSize; pressScale?: number; /** Spawn a Material-style ripple from the press point. Off by default. */ ripple?: boolean; children?: ReactNode; } export interface ButtonLinkProps extends Omit< HTMLMotionProps<"a">, "children" > { variant?: ButtonVariant; size?: ButtonSize; pressScale?: number; children?: ReactNode; } type Ripple = { id: number; x: number; y: number; size: number }; const VARIANT_CLASS: Record = { primary: "bg-primary text-primary-foreground hover:bg-primary/90", secondary: "border border-border bg-card text-foreground hover:border-border", ghost: "text-muted-foreground hover:text-foreground hover:bg-muted/60", outline: "border border-border bg-transparent text-foreground hover:bg-muted/60", }; const SIZE_CLASS: Record = { sm: "h-8 px-3 text-xs gap-1.5 rounded-full", md: "h-10 px-5 text-sm gap-2 rounded-full", lg: "h-12 px-6 text-base gap-2 rounded-full", icon: "h-8 w-8 rounded-lg", }; export const Button = forwardRef( function Button( { variant = "primary", size = "md", pressScale = 0.93, ripple = false, className, children, onPointerDown, ...rest }, ref, ) { const reduce = useReducedMotion(); const canHover = useHoverCapable(); const [ripples, setRipples] = useState([]); const nextId = useRef(0); const handlePointerDown = useCallback( (event: PointerEvent) => { if (ripple && !reduce) { const rect = event.currentTarget.getBoundingClientRect(); const size = Math.max(rect.width, rect.height) * 2; const id = nextId.current++; setRipples((prev) => [ ...prev, { id, x: event.clientX - rect.left, y: event.clientY - rect.top, size, }, ]); } onPointerDown?.(event); }, [ripple, reduce, onPointerDown], ); return ( {ripple && !reduce ? ( {ripples.map((r) => ( setRipples((prev) => prev.filter((x) => x.id !== r.id)) } /> ))} ) : null} {children} ); }, ); export const ButtonLink = forwardRef( function ButtonLink( { variant = "primary", size = "md", pressScale = 0.93, className, children, ...rest }, ref, ) { const reduce = useReducedMotion(); const canHover = useHoverCapable(); return ( {children} ); }, ); 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@beui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/motion/prediction-market.tsx","content":"$52","type":"registry:component","target":"@components/motion/prediction-market.tsx"},{"path":"components/motion/button/stateful.tsx","content":"$53","type":"registry:component","target":"@components/motion/button/stateful.tsx"},{"path":"components/motion/number-ticker.tsx","content":"$54","type":"registry:component","target":"@components/motion/number-ticker.tsx"},{"path":"components/motion/tabs.tsx","content":"$55","type":"registry:component","target":"@components/motion/tabs.tsx"},{"path":"lib/ease.ts","content":"$56","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"components/motion/button/base.tsx","content":"$57","type":"registry:component","target":"@components/motion/button/base.tsx"},{"path":"lib/hooks/use-hover-capable.ts","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Returns true only on devices that have a true hover (mouse / trackpad).\n * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere\n * — gate hover-only effects (scale lifts, magnetic pulls) behind this.\n */\nexport function useHoverCapable() {\n const [canHover, setCanHover] = useState(false);\n\n useEffect(() => {\n if (typeof window === \"undefined\" || !window.matchMedia) return;\n const mq = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n const update = () => setCanHover(mq.matches);\n update();\n mq.addEventListener?.(\"change\", update);\n return () => mq.removeEventListener?.(\"change\", update);\n }, []);\n\n return canHover;\n}\n","type":"registry:hook","target":"@lib/hooks/use-hover-capable.ts"}],"className":"h-[70svh] min-h-80"}]]}]