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:T2ddc,"use client"; import * as React from "react"; import { Popover as PopoverPrimitive } from "@base-ui/react/popover"; import { Popover, PopoverTrigger, PopoverContent, } from "@/registry/optics/popover"; import { cn } from "@/registry/optics/lib/utils"; import { Button } from "@/registry/optics/button"; import { X } from "lucide-react"; const GuidedTourContext = React.createContext({ activeTour: null, setActiveTour: () => {}, currentStep: 0, setCurrentStep: () => {}, steps: [], setSteps: () => {}, totalSteps: 0, }); function GuidedTourProvider({ children = null, ...props }) { const [activeTour, setActiveTour] = React.useState(null); const [currentStep, setCurrentStep] = React.useState(0); const [steps, setSteps] = React.useState([]); const [totalSteps, setTotalSteps] = React.useState(0); const contextValue = React.useMemo( () => ({ activeTour, setActiveTour, currentStep, setCurrentStep, steps, setSteps, totalSteps, setTotalSteps, }), [activeTour, currentStep, steps, totalSteps], ); return ( {children} ); } function useGuidedTour() { const context = React.useContext(GuidedTourContext); if (!context) { throw new Error("useGuidedTour must be used within GuidedTourProvider"); } return context; } const GuidedTourOverlay = React.forwardRef(({ className, ...props }, ref) => { const { activeTour } = useGuidedTour(); if (!activeTour) return null; return (

); }); GuidedTourOverlay.displayName = "GuidedTourOverlay"; function GuidedTour({ children = null, ...props }) { return (

{children}

); } function GuidedTourTrigger({ tourId = "", children = null, className = "", render = null, ...props }) { const { onClick, ...restProps } = props; const { setActiveTour, setCurrentStep, setTotalSteps } = useGuidedTour(); const handleClick = (event) => { if (onClick) { onClick(event); } if (event?.defaultPrevented) return; const tourSteps = document.querySelectorAll( `[data-tour="${tourId}"][data-step]`, ); const sortedSteps = Array.from(tourSteps).sort((a, b) => { const stepA = parseInt(a.getAttribute("data-step")) || 0; const stepB = parseInt(b.getAttribute("data-step")) || 0; return stepA - stepB; }); if (sortedSteps.length > 0) { setTotalSteps(sortedSteps.length); setCurrentStep(0); setActiveTour(tourId); // Scroll to the first element setTimeout(() => { sortedSteps[0]?.scrollIntoView({ behavior: "smooth", block: "center", }); }, 100); } }; const triggerProps = { "data-slot": "guided-tour-trigger", onClick: handleClick, className: cn(!render && "cursor-pointer", className), type: render ? undefined : "button", ...restProps, }; if (render && React.isValidElement(render)) { return React.cloneElement(render, triggerProps); } return ; } const GuidedTourStep = React.forwardRef( ( { tourId = "", step = 0, children = null, className = "", content = null, ...props }, ref, ) => { const { activeTour, currentStep, setActiveTour, setCurrentStep } = useGuidedTour(); const isActive = activeTour === tourId && currentStep === step - 1; const elementRef = React.useRef(null); const [open, setOpen] = React.useState(false); React.useEffect(() => { if (isActive && elementRef.current) { setOpen(true); // Scroll to the active element setTimeout(() => { elementRef.current?.scrollIntoView({ behavior: "smooth", block: "center", }); }, 100); } else { setOpen(false); } }, [isActive]); const handleOpenChange = (newOpen) => { setOpen(newOpen); // If the popover is closed by user interaction (click outside), deactivate the tour if (!newOpen && isActive && activeTour === tourId) { // Capture current values to check after timeout const currentTourId = activeTour; const currentStepValue = currentStep; // Use a small timeout to allow step transitions to complete // If we're transitioning to another step, the tour will remain active setTimeout(() => { // Only deactivate if the tour is still active and we're still on this step // This means the user closed the popover manually, not by navigating if ( activeTour === currentTourId && currentStep === currentStepValue ) { setActiveTour(null); setCurrentStep(0); } }, 100); } }; const clonedElement = React.cloneElement(children, { ref: (node) => { elementRef.current = node; if (typeof children.ref === "function") { children.ref(node); } else if (ref) { if (typeof ref === "function") { ref(node); } else { ref.current = node; } } }, "data-tour": tourId, "data-step": step, className: cn( className, isActive && "relative z-[101]", children.props?.className, ), ...props, }); const isNativeButton = typeof clonedElement.type === "string" && clonedElement.type.toLowerCase() === "button"; if (!isActive || !content) { return clonedElement; } return ( handleOpenChange(nextOpen)} > {content} ); }, ); GuidedTourStep.displayName = "GuidedTourStep"; function GuidedTourStepContent({ children }) { const { currentStep, setCurrentStep, setActiveTour, totalSteps } = useGuidedTour(); const handleNext = () => { if (currentStep < totalSteps - 1) { setCurrentStep(currentStep + 1); } else { handleFinish(); } }; const handleBack = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1); } }; const handleSkip = () => { setActiveTour(null); setCurrentStep(0); }; const handleFinish = () => { setActiveTour(null); setCurrentStep(0); }; const isLastStep = currentStep === totalSteps - 1; const isFirstStep = currentStep === 0; return ( {children} ); } function GuidedTourContent({ children = null, className = "", onSkip = undefined, onNext = undefined, onBack = undefined, onFinish = undefined, isLastStep = false, isFirstStep = false, align = "start", alignOffset = 0, side = "bottom", sideOffset = 8, ...props }) { const { currentStep, totalSteps } = useGuidedTour(); return (

{children}

{onSkip && ( } /> )}

Step {currentStep + 1} of {totalSteps}

{onSkip && ( )} {onBack && !isFirstStep && ( )} {isLastStep ? ( ) : ( )}

); } // GuidedTourPopover is now deprecated - use GuidedTourStep with content prop instead function GuidedTourPopover({ children = null, ...props }) { const { activeTour, currentStep, setCurrentStep, setActiveTour, totalSteps } = useGuidedTour(); const [open, setOpen] = React.useState(false); const [currentElement, setCurrentElement] = React.useState(null); React.useEffect(() => { if (activeTour) { const element = document.querySelector( `[data-tour="${activeTour}"][data-step="${currentStep + 1}"]`, ); if (element) { setCurrentElement(element); setOpen(true); // Scroll to the element setTimeout(() => { element.scrollIntoView({ behavior: "smooth", block: "center", }); }, 100); } else { setOpen(false); setCurrentElement(null); } } else { setOpen(false); setCurrentElement(null); } }, [activeTour, currentStep]); const handleNext = () => { if (currentStep < totalSteps - 1) { setCurrentStep(currentStep + 1); } else { handleFinish(); } }; const handleBack = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1); } }; const handleSkip = () => { setActiveTour(null); setCurrentStep(0); setOpen(false); setCurrentElement(null); }; const handleFinish = () => { setActiveTour(null); setCurrentStep(0); setOpen(false); setCurrentElement(null); }; const isLastStep = currentStep === totalSteps - 1; const isFirstStep = currentStep === 0; if (!activeTour || !open || !currentElement) return null; return ( setOpen(nextOpen)} {...props} > } /> {children} ); } GuidedTourProvider.displayName = "GuidedTourProvider"; GuidedTour.displayName = "GuidedTour"; GuidedTourTrigger.displayName = "GuidedTourTrigger"; // GuidedTourStep already has displayName set in its forwardRef GuidedTourOverlay.displayName = "GuidedTourOverlay"; GuidedTourContent.displayName = "GuidedTourContent"; GuidedTourPopover.displayName = "GuidedTourPopover"; export { GuidedTourProvider, GuidedTour, GuidedTourTrigger, GuidedTourStep, GuidedTourOverlay, GuidedTourContent, GuidedTourPopover, useGuidedTour, }; 4d:["$","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"}]]}]}],["$","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","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","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@optics","registryDependencies":["https://optics.agusmayol.com.ar/r/button.json","https://optics.agusmayol.com.ar/r/popover.json","https://optics.agusmayol.com.ar/r/utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/optics/guided-tour.jsx","content":"$50","type":"registry:component","target":"components/optics/guided-tour.jsx"}],"className":"h-[70svh] min-h-80"}]]}]