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:T26fb,"use client"; import { motion } from "motion/react"; import Image from "next/image"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/ui/button"; import { Carousel, type CarouselApi, CarouselContent, CarouselItem, } from "@/registry/ui/carousel"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/registry/ui/dialog"; export function OnboardingDialog() { const [open, setOpen] = React.useState(true); const [carouselApi, setCarouselApi] = React.useState(); const [activeIndex, setActiveIndex] = React.useState(0); React.useEffect(() => { if (!carouselApi) return; const onSelect = () => { setActiveIndex(carouselApi.selectedScrollSnap()); }; onSelect(); carouselApi.on("select", onSelect); carouselApi.on("reInit", onSelect); return () => { carouselApi.off("select", onSelect); carouselApi.off("reInit", onSelect); }; }, [carouselApi]); const isFirstSlide = activeIndex === 0; const isLastSlide = activeIndex === slides.length - 1; const currentSlide = slides[activeIndex] ?? slides[0]; const handleNext = () => { if (isLastSlide) { setOpen(false); return; } carouselApi?.scrollNext(); }; const handlePrevious = () => { carouselApi?.scrollPrev(); }; const handlePillsKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (!carouselApi) return; const currentIndex = carouselApi.selectedScrollSnap(); const lastIndex = slides.length - 1; let targetIndex: number | null = null; if (event.key === "ArrowLeft") { targetIndex = currentIndex <= 0 ? lastIndex : currentIndex - 1; } else if (event.key === "ArrowRight") { targetIndex = currentIndex >= lastIndex ? 0 : currentIndex + 1; } else if (event.key === "Home") { targetIndex = 0; } else if (event.key === "End") { targetIndex = lastIndex; } if (targetIndex === null) { return; } event.preventDefault(); carouselApi.scrollTo(targetIndex); const targetPill = event.currentTarget.querySelector( `button[data-pill-index="${targetIndex}"]`, ); targetPill?.focus(); }, [carouselApi], ); return ( ); } type PlaceholderImageOptions = { title: string; startColor: string; endColor: string; accentColor: string; }; const createPlaceholderImage = ({ title, startColor, endColor, accentColor, }: PlaceholderImageOptions) => { const svg = ` `; return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`; }; const slides = [ { alt: "Dashboard preview", description: "Track tasks, documents, and progress from one focused dashboard built for daily execution. Track tasks, documents, and progress from one focused dashboard built for daily execution.", id: "welcome", image: createPlaceholderImage({ accentColor: "#0B1E47", endColor: "#CDE2FF", startColor: "#EAF2FF", title: "Welcome Dashboard", }), title: "Welcome to your new workspace", }, { alt: "Automation workflow preview", description: "Use smart flows to remove manual busywork and keep your team aligned without extra status meetings.", id: "automations", image: createPlaceholderImage({ accentColor: "#0A3D30", endColor: "#CAF6E8", startColor: "#E8FFF7", title: "Automations", }), title: "Automate repetitive work", }, { alt: "Collaboration preview", description: "Share feedback directly where decisions happen so updates stay clear, timely, and easy to follow.", id: "collaboration", image: createPlaceholderImage({ accentColor: "#4A2B00", endColor: "#FFE8C2", startColor: "#FFF6E8", title: "Team Collaboration", }), title: "Collaborate in context", }, { alt: "Insights reporting preview", description: "Turn activity into insights with reporting views that highlight what is improving and what needs attention. Turn activity into insights with reporting views that highlight what is improving and what needs attention.Turn activity into insights with reporting views that highlight what is improving and what needs attention.", id: "insights", image: createPlaceholderImage({ accentColor: "#2D1457", endColor: "#E1D4FF", startColor: "#F2ECFF", title: "Insights Reporting", }), title: "Measure outcomes", }, ] 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","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","@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"}]]}]}]]}],["$","$L50",null,{"namespace":"@lumiui","registryDependencies":["utils","@lumi-ui/button","@lumi-ui/carousel","@lumi-ui/dialog"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/components/onboarding-dialog.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]