52: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"] 53: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"] 54:T28d0,"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { createContext, use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react"; import type { Dispatch, ReactNode, Ref, SetStateAction } from "react"; import { flushSync } from "react-dom"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; import { cn } from "@/lib/utils"; interface UseOnboardingReturn { canGoToNextStep: boolean; canGoToPrevStep: boolean; currentStep: number; goToNextStep: () => void; goToPrevStep: () => void; reset: () => void; setStep: Dispatch>; totalSteps: number; } type OnboardingDirection = "next" | "previous"; interface OnboardingContextValue { api: UseOnboardingReturn; direction?: OnboardingDirection; onComplete?: () => void; } const OnboardingContext = createContext(null); function useOnboardingContext() { const context = use(OnboardingContext); if (!context) { throw new Error( "useOnboarding must be used within an Onboarding component" ); } return context; } function useOnboarding(): UseOnboardingReturn { return useOnboardingContext().api; } interface OnboardingProps extends React.ComponentProps<"div"> { defaultValue?: number; onComplete?: () => void; totalSteps: number; } function Onboarding({ children, className, defaultValue = 1, onComplete, totalSteps, ...props }: OnboardingProps) { const [currentStep, setCurrentStep] = useState(defaultValue); const [direction, setDirection] = useState(); const canGoToNextStep = currentStep < totalSteps; const canGoToPrevStep = currentStep > 1; const goToStep = useCallback( (nextStep: number) => { if (nextStep === currentStep) { return; } setDirection(nextStep > currentStep ? "next" : "previous"); setCurrentStep(nextStep); }, [currentStep] ); const setStep = useCallback>>( (step) => { const nextStep = typeof step === "function" ? step(currentStep) : step; if (nextStep < 1 || nextStep > totalSteps) { throw new Error(`Step ${nextStep} is out of range 1–${totalSteps}`); } goToStep(nextStep); }, [currentStep, goToStep, totalSteps] ); const api = useMemo( () => ({ canGoToNextStep, canGoToPrevStep, currentStep, goToNextStep: () => { if (canGoToNextStep) { goToStep(currentStep + 1); } }, goToPrevStep: () => { if (canGoToPrevStep) { goToStep(currentStep - 1); } }, reset: () => goToStep(1), setStep, totalSteps, }), [ canGoToNextStep, canGoToPrevStep, currentStep, goToStep, setStep, totalSteps, ] ); const context = useMemo( () => ({ api, direction, onComplete }), [api, direction, onComplete] ); return (

{children}

); } interface OnboardingStepProps extends React.ComponentProps<"div"> { value: number; } function OnboardingContent(props: React.ComponentProps<"div">) { return

; } type TransitionStatus = "starting" | "ending" | undefined; const runningAnimations = (element: HTMLElement) => element .getAnimations?.({ subtree: true }) .filter( (animation) => animation.playState === "running" && animation.effect?.getComputedTiming().endTime !== Number.POSITIVE_INFINITY ) ?? []; function assignRef(ref: Ref | undefined, node: T | null) { if (typeof ref === "function") { return ref(node); } if (ref) { ref.current = node; } } function useStepTransition(isCurrent: boolean) { const ref = useRef(null); const [mounted, setMounted] = useState(isCurrent); const [status, setStatus] = useState(); const [wasCurrent, setWasCurrent] = useState(isCurrent); if (isCurrent !== wasCurrent) { setWasCurrent(isCurrent); setMounted(true); if (!isCurrent) { setStatus("ending"); } else if (mounted) { setStatus(undefined); } else { setStatus("starting"); } } useEffect(() => { if (status !== "starting") { return; } const frame = requestAnimationFrame(() => setStatus(undefined)); return () => cancelAnimationFrame(frame); }, [status]); useLayoutEffect(() => { const element = ref.current; if (status !== "ending" || !element) { return; } let cancelled = false; const unmountWhenDone = async () => { const unmount = () => { setMounted(false); setStatus(undefined); }; let animations = runningAnimations(element); if (animations.length === 0) { unmount(); return; } while (animations.length > 0) { await Promise.allSettled( animations.map((animation) => animation.finished) ); if (cancelled) { return; } animations = runningAnimations(element); } flushSync(unmount); }; void unmountWhenDone(); return () => { cancelled = true; }; }, [status]); return { mounted, ref, status }; } function OnboardingStep({ className, ref: forwardedRef, value, ...props }: OnboardingStepProps) { const { currentStep } = useOnboarding(); const { direction } = useOnboardingContext(); const { mounted, ref, status } = useStepTransition(value === currentStep); const setRefs = useCallback( (node: HTMLDivElement | null) => { ref.current = node; return assignRef(forwardedRef, node); }, [forwardedRef, ref] ); if (!mounted) { return null; } return (

); } function OnboardingMedia({ className, ...props }: React.ComponentProps<"div">) { return (

); } function OnboardingHeader({ className, ...props }: React.ComponentProps<"div">) { return (

); } function OnboardingTitle({ children, className, ...props }: React.ComponentProps<"h2">) { return (

{children}

); } function OnboardingDescription({ className, ...props }: React.ComponentProps<"p">) { return (

); } function OnboardingFooter({ className, ...props }: React.ComponentProps<"div">) { return (

); } function OnboardingIndicator({ className, ...props }: React.ComponentProps<"div">) { const { currentStep, totalSteps } = useOnboarding(); const steps = Array.from({ length: totalSteps }, (_, index) => index + 1); return (

{steps.map((step) => ( ))}

); } function OnboardingNav({ className, ...props }: React.ComponentProps<"div">) { return (

); } interface OnboardingPrevButtonProps extends React.ComponentProps< typeof Button > { children?: ReactNode; } function OnboardingPrevButton({ children = "Previous", ...props }: OnboardingPrevButtonProps) { const { goToPrevStep, canGoToPrevStep } = useOnboarding(); return ( ); } interface OnboardingNextButtonProps extends React.ComponentProps< typeof Button > { children?: ReactNode; lastLabel?: ReactNode; } function OnboardingNextButton({ children = "Continue", lastLabel = "Got it", ...props }: OnboardingNextButtonProps) { const { goToNextStep, canGoToNextStep } = useOnboarding(); const { onComplete } = useOnboardingContext(); const isLastStep = !canGoToNextStep; const handleClick = () => { if (isLastStep) { onComplete?.(); } else { goToNextStep(); } }; return ( ); } export { Onboarding, OnboardingContent, OnboardingDescription, OnboardingFooter, OnboardingHeader, OnboardingIndicator, OnboardingMedia, OnboardingNav, OnboardingNextButton, OnboardingPrevButton, OnboardingStep, OnboardingTitle, useOnboarding, }; export type { UseOnboardingReturn }; 51:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}]]}],["$","$L52",null,{"namespace":"@alexandrejoly","registryDependencies":["button","progress"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/onboarding.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]