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:T3197,"use client"; // beui.dev/components/motion/adaptive-stepper import { Minus, Plus } from "lucide-react"; import { AnimatePresence, type HTMLMotionProps, motion, useReducedMotion, } from "motion/react"; import { createContext, type MouseEvent, type ReactNode, type Ref, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { EASE_OUT, SPRING_PRESS, } from "@/lib/ease"; import { Liquid, LiquidItem, type LiquidTransition, } from "@/components/motion/liquid"; import { cn } from "@/lib/utils"; // The deliberately elastic separation curve from the liquid email reference. const STEPPER_LIQUID_TRANSITION = { duration: 600, ease: [0.22, 1.3, 0.71, 1], } as const satisfies LiquidTransition; type StepDirection = -1 | 0 | 1; type AdaptiveStepperContextValue = { value: number; valueText: string; direction: StepDirection; atMin: boolean; atMax: boolean; disabled: boolean; reduce: boolean; decrement: (restoreFocus: boolean) => void; increment: (restoreFocus: boolean) => void; decrementRef: React.MutableRefObject; incrementRef: React.MutableRefObject; }; const AdaptiveStepperContext = createContext( null, ); function useAdaptiveStepperContext(component: string) { const context = useContext(AdaptiveStepperContext); if (!context) { throw new Error(`${component} must be used within `); } return context; } function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)); } function cleanNumber(value: number) { return Number(value.toFixed(10)); } function nextStep( value: number, direction: -1 | 1, min: number, max: number, step: number, ) { if (direction === 1) { const nextIndex = Math.floor((value - min) / step + 1e-10) + 1; return cleanNumber(Math.min(max, min + nextIndex * step)); } const previousIndex = Math.ceil((value - min) / step - 1e-10) - 1; return cleanNumber(Math.max(min, min + previousIndex * step)); } function mergeRefs(...refs: Array | undefined>) { return (node: T | null) => { for (const ref of refs) { if (typeof ref === "function") ref(node); else if (ref && typeof ref === "object") { (ref as React.MutableRefObject).current = node; } } }; } export interface AdaptiveStepperProps { children: ReactNode; value?: number; defaultValue?: number; onValueChange?: (value: number) => void; min?: number; max?: number; step?: number; disabled?: boolean; name?: string; formatValueText?: (value: number) => string; className?: string; "aria-label"?: string; } export function AdaptiveStepper({ children, value: controlledValue, defaultValue = 0, onValueChange, min = 0, max = 10, step = 1, disabled = false, name, formatValueText, className, "aria-label": ariaLabel = "Quantity", }: AdaptiveStepperProps) { const reduce = useReducedMotion() ?? false; const labelId = useId(); const decrementRef = useRef(null); const incrementRef = useRef(null); const lower = Number.isFinite(min) ? min : 0; const suppliedMax = Number.isFinite(max) ? max : lower; const upper = suppliedMax > lower ? suppliedMax : lower; const stride = Number.isFinite(step) && step > 0 ? step : 1; const [internalValue, setInternalValue] = useState(() => clamp(Number.isFinite(defaultValue) ? defaultValue : lower, lower, upper), ); const controlled = controlledValue !== undefined; const suppliedValue = controlled ? controlledValue : internalValue; const currentValue = clamp( Number.isFinite(suppliedValue) ? suppliedValue : lower, lower, upper, ); const previousValueRef = useRef(currentValue); const currentValueRef = useRef(currentValue); const direction: StepDirection = currentValue === previousValueRef.current ? 0 : currentValue > previousValueRef.current ? 1 : -1; useLayoutEffect(() => { previousValueRef.current = currentValue; currentValueRef.current = currentValue; }, [currentValue]); const commit = useCallback( (nextValue: number, restoreFocus: boolean) => { const next = clamp(cleanNumber(nextValue), lower, upper); if (next === currentValue) return; if (!controlled) setInternalValue(next); onValueChange?.(next); if (!restoreFocus) return; requestAnimationFrame(() => { if (next === upper && currentValueRef.current === upper) { decrementRef.current?.focus(); } else if (next === lower && currentValueRef.current === lower) { incrementRef.current?.focus(); } }); }, [controlled, currentValue, lower, onValueChange, upper], ); const decrement = useCallback( (restoreFocus: boolean) => { if (disabled || currentValue <= lower) return; commit(nextStep(currentValue, -1, lower, upper, stride), restoreFocus); }, [commit, currentValue, disabled, lower, stride, upper], ); const increment = useCallback( (restoreFocus: boolean) => { if (disabled || currentValue >= upper) return; commit(nextStep(currentValue, 1, lower, upper, stride), restoreFocus); }, [commit, currentValue, disabled, lower, stride, upper], ); const valueText = formatValueText?.(currentValue) ?? String(currentValue); const context = useMemo( () => ({ value: currentValue, valueText, direction, atMin: currentValue <= lower, atMax: currentValue >= upper, disabled, reduce, decrement, increment, decrementRef, incrementRef, }), [ currentValue, decrement, direction, disabled, increment, lower, reduce, upper, valueText, ], ); return (

{ariaLabel}. Current value: {valueText} {children} {name ? : null}

); } export interface AdaptiveStepperActionProps extends Omit, "children" | "onClick"> { children?: ReactNode; onClick?: (event: MouseEvent) => void; ref?: Ref; } function StepperAction({ direction, children, className, onClick, ref, style, tabIndex, "aria-label": ariaLabel, ...props }: AdaptiveStepperActionProps & { direction: -1 | 1 }) { const context = useAdaptiveStepperContext("AdaptiveStepper action"); const hidden = direction === -1 ? context.atMin : context.atMax; const actionRef = direction === -1 ? context.decrementRef : context.incrementRef; const label = ariaLabel ?? (direction === -1 ? "Decrease value" : "Increase value"); const action = direction === -1 ? context.decrement : context.increment; const x = direction === -1 ? hidden ? 32 : 0 : hidden ? 136 : 168; return ( ); } export function AdaptiveStepperDecrement(props: AdaptiveStepperActionProps) { return ; } export interface AdaptiveStepperValueProps extends Omit, "children"> { children?: ReactNode | ((value: number) => ReactNode); } export function AdaptiveStepperValue({ children, className, style, ...props }: AdaptiveStepperValueProps) { const context = useAdaptiveStepperContext("AdaptiveStepperValue"); const geometry = context.atMin && context.atMax ? { x: 0, width: 216 } : context.atMin ? { x: 0, width: 152 } : context.atMax ? { x: 64, width: 152 } : { x: 64, width: 88 }; const displayValue = typeof children === "function" ? children(context.value) : children; const renderedValue = displayValue ?? context.value; const canRoll = typeof renderedValue === "number" || typeof renderedValue === "string"; const distance = context.reduce || !canRoll ? 0 : context.direction * 32; const enterFrom = `translateY(${distance}%)`; const exitTo = `translateY(${-distance}%)`; return ( {context.valueText} ); } export function AdaptiveStepperIncrement(props: AdaptiveStepperActionProps) { return ; } 53:T24b4,"use client"; import { useReducedMotion } from "motion/react"; import { createContext, forwardRef, type HTMLAttributes, type ReactNode, type Ref, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; type LiquidContextValue = { getRoot: () => HTMLDivElement | null; getPortal: () => SVGGElement | null; }; const LiquidContext = createContext(null); function useLiquidContext() { const context = useContext(LiquidContext); if (!context) throw new Error("LiquidItem must be used within "); return context; } export type LiquidEase = readonly [number, number, number, number]; export type LiquidTransition = { duration?: number; ease?: LiquidEase; }; export interface LiquidProps extends HTMLAttributes { blur?: number; contrast?: number; fill?: string; edgeColor?: string; edgeOpacity?: number; edgeWidth?: number; filterPadding?: number; } export const Liquid = forwardRef(function Liquid( { blur = 6, contrast = 18, fill = "var(--background)", edgeColor = "var(--foreground)", edgeOpacity = 0.08, edgeWidth = 1, filterPadding = 24, className, style, children, ...props }, forwardedRef: Ref, ) { const rootRef = useRef(null); const portalRef = useRef(null); const [size, setSize] = useState({ width: 0, height: 0 }); const filterId = `liquid-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`; const intercept = Math.round((0.5 - contrast * (5 / 12)) * 100) / 100; const padding = Math.ceil(blur * 3 + filterPadding); const setRootRef = useCallback( (node: HTMLDivElement | null) => { rootRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef) forwardedRef.current = node; }, [forwardedRef], ); useLayoutEffect(() => { const root = rootRef.current; if (!root) return; const measure = () => { const next = { width: root.offsetWidth, height: root.offsetHeight, }; setSize((current) => current.width === next.width && current.height === next.height ? current : next, ); }; measure(); const observer = new ResizeObserver(measure); observer.observe(root); return () => observer.disconnect(); }, []); const context = useMemo( () => ({ getRoot: () => rootRef.current, getPortal: () => portalRef.current, }), [], ); return (

{children}

); }); type LiquidBox = { x: number; y: number; width: number; height: number; radius: number; }; export interface LiquidItemProps extends Omit, "children"> { children: ReactNode; x: number; y: number; width: number; height: number; radius?: number; transition?: LiquidTransition; } function mix(from: number, to: number, progress: number) { return from + (to - from) * progress; } function cubicBezier([x1, y1, x2, y2]: LiquidEase) { return (progress: number) => { if (progress <= 0) return 0; if (progress >= 1) return 1; let lower = 0; let upper = 1; for (let index = 0; index < 20; index++) { const time = (lower + upper) / 2; const inverse = 1 - time; const x = 3 * inverse * inverse * time * x1 + 3 * inverse * time * time * x2 + time ** 3; if (x < progress) lower = time; else upper = time; } const time = (lower + upper) / 2; const inverse = 1 - time; return ( 3 * inverse * inverse * time * y1 + 3 * inverse * time * time * y2 + time ** 3 ); }; } export function LiquidItem({ children, x, y, width, height, radius = Math.min(width, height) / 2, transition, className, style, ...props }: LiquidItemProps) { const context = useLiquidContext(); const reduce = useReducedMotion() ?? false; const wrapperRef = useRef(null); const [blob, setBlob] = useState(null); const currentRef = useRef(null); const duration = reduce ? 0 : (transition?.duration ?? 280); const ease = transition?.ease ?? EASE_OUT; const [x1, y1, x2, y2] = ease; useLayoutEffect(() => { const portal = context.getPortal(); if (!portal) return; const blob = document.createElementNS( "http://www.w3.org/2000/svg", "rect", ); blob.setAttribute("x", "0"); blob.setAttribute("y", "0"); blob.style.transformBox = "fill-box"; blob.style.transformOrigin = "center"; blob.style.willChange = "transform"; portal.append(blob); setBlob(blob); return () => { blob.remove(); }; }, [context]); useLayoutEffect(() => { const wrapper = wrapperRef.current; if (!wrapper || !blob || !context.getRoot()) return; const target = { x, y, width, height, radius }; const write = (box: LiquidBox) => { // Keep the interactive surface and its filtered silhouette on the same // frame so neither can visually outrun the other during a morph. const transform = `translate(${box.x}px, ${box.y}px)`; wrapper.style.transform = transform; wrapper.style.width = `${box.width}px`; wrapper.style.height = `${box.height}px`; blob.style.transform = transform; blob.setAttribute("width", String(box.width)); blob.setAttribute("height", String(box.height)); blob.setAttribute("rx", String(box.radius)); }; const from = currentRef.current; if (!from || duration === 0) { currentRef.current = target; write(target); return; } const easing = cubicBezier([x1, y1, x2, y2]); const startedAt = performance.now(); let frame = 0; const tick = (now: number) => { const progress = Math.min(1, (now - startedAt) / duration); const eased = easing(progress); const current = { x: mix(from.x, target.x, eased), y: mix(from.y, target.y, eased), width: mix(from.width, target.width, eased), height: mix(from.height, target.height, eased), radius: mix(from.radius, target.radius, eased), }; currentRef.current = current; write(current); if (progress < 1) frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); return () => cancelAnimationFrame(frame); }, [blob, context, duration, height, radius, width, x, x1, x2, y, y1, y2]); return (

{children}

); } 54: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; 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/adaptive-stepper.tsx","content":"$52","type":"registry:component","target":"@components/motion/adaptive-stepper.tsx"},{"path":"components/motion/liquid.tsx","content":"$53","type":"registry:component","target":"@components/motion/liquid.tsx"},{"path":"lib/ease.ts","content":"$54","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"}],"className":"h-[70svh] min-h-80"}]]}]