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:T4eeb,"use client" import * as React from "react" import Image from "next/image" import { CheckIcon, ExternalLinkIcon } from "lucide-react" import { AnimatePresence, motion, useAnimation, type PanInfo, } from "motion/react" import { cn } from "@/lib/utils" import { AspectRatio } from "@/components/ui/aspect-ratio" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, } from "@/components/ui/drawer" import { Progress } from "@/components/ui/progress" function useMediaQuery(query: string) { const [matches, setMatches] = React.useState(null) React.useEffect(() => { const media = window.matchMedia(query) setMatches(media.matches) const listener = (e: MediaQueryListEvent) => setMatches(e.matches) media.addEventListener("change", listener) return () => media.removeEventListener("change", listener) }, [query]) return matches ?? false } function useFeatureVisibility( featureId: string, variant: "desktop" | "mobile" ) { const storageKey = `feature_${featureId}_${variant}` const [isVisible, setIsVisible] = React.useState(null) React.useEffect(() => { const storedValue = localStorage.getItem(storageKey) setIsVisible(storedValue ? JSON.parse(storedValue) : true) }, [storageKey]) const hideFeature = () => { localStorage.setItem(storageKey, JSON.stringify(false)) setIsVisible(false) } return { isVisible: isVisible === null ? false : isVisible, hideFeature } } function useSwipe(onSwipe: (direction: "left" | "right") => void) { const handleDragEnd = ( event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo ) => { if (info.offset.x > 100) { onSwipe("right") } else if (info.offset.x < -100) { onSwipe("left") } } return { handleDragEnd } } const fadeInScale = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.95 }, transition: { duration: 0.2, ease: [0.23, 1, 0.32, 1] as const }, } const slideInOut = (direction: 1 | -1) => ({ initial: { opacity: 0, x: 20 * direction }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -20 * direction }, transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1] as const }, }) const hoverScale = { whileHover: { scale: 1.01 }, whileTap: { scale: 0.95 }, transition: { duration: 0.2 }, } function StepPreview({ step, direction }: { step: Step; direction: 1 | -1 }) { const controls = useAnimation() React.useEffect(() => { controls.start({ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.3 }, }) }, [controls, step]) return ( {step.media ? (

{step.media.type === "image" ? ( {step.media.alt

) : (

{step.title}

{step.full_description}

) : (

{step.title}

{step.full_description}

)} ) } interface StepTabProps { step: Step isActive: boolean onClick: () => void isCompleted: boolean } function StepTab({ step, isActive, onClick, isCompleted }: StepTabProps) { return (

{step.title}

{step.short_description}

{isCompleted && (

)} ) } interface Step { title: string short_description: string full_description: string action?: { label: string onClick?: () => void href?: string } media?: { type: "image" | "video" src: string alt?: string } } interface FeatureDisclosureProps { steps: Step[] featureId: string onComplete?: () => void onSkip?: () => void showProgressBar?: boolean open: boolean setOpen: (open: boolean) => void forceVariant?: "mobile" | "desktop" } interface StepContentProps { steps: Step[] currentStep: number onSkip: () => void onNext: () => void onPrevious: () => void hideFeature: () => void completedSteps: number[] onStepSelect: (index: number) => void direction: 1 | -1 isDesktop: boolean } function StepContent({ steps, currentStep, onSkip, onNext, onPrevious, hideFeature, completedSteps, onStepSelect, direction, isDesktop, stepRef, }: StepContentProps & { stepRef: React.RefObject }) { const [skipNextTime, setSkipNextTime] = React.useState(false) const renderActionButton = (action: Step["action"]) => { if (!action) return null if (action.href) { return ( ) } return ( ) } return (

{isDesktop && (

{steps.map((step, index) => ( onStepSelect(index)} isCompleted={completedSteps.includes(index)} /> ))}

)} {!isDesktop && steps[currentStep]?.media && ( {steps[currentStep]?.media?.type === "image" ? ( {steps[currentStep]?.media?.alt

) : (

)} {steps[currentStep]?.action ? (

{renderActionButton(steps[currentStep]?.action)}

) : (

)} {/* Navigation buttons */}

{currentStep > 0 && ( )}

{/* Don't show again checkbox */}

setSkipNextTime(checked as boolean)} /> Don't show this again

) } export function IntroDisclosure({ steps, open, setOpen, featureId, onComplete, onSkip, showProgressBar = true, forceVariant, }: FeatureDisclosureProps) { const [currentStep, setCurrentStep] = React.useState(0) const [completedSteps, setCompletedSteps] = React.useState([0]) const [direction, setDirection] = React.useState<1 | -1>(1) const isDesktopQuery = useMediaQuery("(min-width: 768px)") const isDesktop = forceVariant ? forceVariant === "desktop" : isDesktopQuery const variant = isDesktop ? "desktop" : "mobile" const { isVisible, hideFeature } = useFeatureVisibility(featureId, variant) const stepRef = React.useRef(null) // Close the dialog if feature is hidden React.useEffect(() => { if (!isVisible) { setOpen(false) } }, [isVisible, setOpen]) // Focus management React.useEffect(() => { if (open && stepRef.current) { stepRef.current.focus() } }, [open, currentStep]) // Early return if feature should be hidden if (!isVisible || !open) { return null } const handleNext = () => { setDirection(1) setCompletedSteps((prev) => prev.includes(currentStep) ? prev : [...prev, currentStep] ) if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } else { setOpen(false) onComplete?.() } } const handlePrevious = () => { setDirection(-1) if (currentStep > 0) { setCurrentStep(currentStep - 1) } } const handleSkip = () => { setOpen(false) onSkip?.() } const handleStepSelect = (index: number) => { setDirection(index > currentStep ? 1 : -1) // Mark all steps up to and including the selected step as completed setCompletedSteps((prev) => { const newCompletedSteps = new Set(prev) // If moving forward, mark all steps up to the selected one as completed if (index > currentStep) { for (let i = currentStep; i <= index; i++) { newCompletedSteps.add(i) } } return Array.from(newCompletedSteps) }) setCurrentStep(index) } const handleSwipe = (swipeDirection: "left" | "right") => { if (swipeDirection === "left") { handleNext() } else { handlePrevious() } } const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === "ArrowRight" || event.key === "ArrowDown") { handleNext() } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") { handlePrevious() } } const { handleDragEnd } = useSwipe(handleSwipe) if (isDesktop) { return ( ) } return ( {showProgressBar && ( )} {steps[currentStep]?.title}

{/* Step tabs */}

{steps.map((step, index) => ( handleStepSelect(index)} isCompleted={completedSteps.includes(index)} /> ))}

{/* Preview */}

{/* Step content */}

{steps[currentStep]?.short_description}

{steps[currentStep]?.action && ( )} )}

{/* Fixed bottom navigation */}

{currentStep > 0 && ( )}

{ hideFeature() }} /> Don't show this again

) } export default IntroDisclosure 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","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","react-use-measure",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-use-measure","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":"react-use-measure"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":["button","aspect-ratio","checkbox","dialog","drawer","progress"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/intro-disclosure.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]