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:T1f90,"use client"; import type { DialogRootChangeEventDetails } from "@base-ui/react"; import { ChevronLeft, ChevronRight, XIcon } from "lucide-react"; import * as React from "react"; import { Button } from "@/registry/ui/button"; import { createDialogHandle, Dialog, DialogBackdrop, DialogClose, DialogPopup, DialogPortal, DialogTrigger, DialogViewport, } from "@/registry/ui/dialog"; import { InfoMenu } from "./components/info-menu"; import { ProfileCard } from "./components/profile-card"; import { ShareMenu } from "./components/share-menu"; import { TooltipGroup } from "./components/tooltip-group"; const galleryHandle = createDialogHandle(); export default function UnsplashDialog() { const [open, setOpen] = React.useState(false); const [triggerId, setTriggerId] = React.useState(null); const handleOpenChange = ( isOpen: boolean, eventDetails: DialogRootChangeEventDetails, ) => { setOpen(isOpen); setTriggerId(eventDetails.trigger?.id ?? null); }; const navigate = React.useCallback( (direction: "next" | "prev") => { if (!triggerId) return; const currentIndex = parseInt(triggerId.replace("trigger-", ""), 10); if (Number.isNaN(currentIndex)) return; let nextIndex = 0; if (direction === "next") { nextIndex = (currentIndex + 1) % IMAGES.length; } else { nextIndex = (currentIndex - 1 + IMAGES.length) % IMAGES.length; } setTriggerId(`trigger-${nextIndex}`); }, [triggerId], ); return ( <>

{IMAGES.map((img, i) => ( {img.alt}

} /> ))}

); } const IMAGES: IImage[] = [ { alt: "Brown trees beside river under blue sky during daytime", downloads: 3578, src: "https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?q=80&w=1000&auto=format&fit=crop", views: 5726, }, { alt: "People watching illuminated japanese lanterns", downloads: 373, src: "https://images.unsplash.com/photo-1765614244329-22ca4157345a?q=80&w=1000&auto=format&fit=crop", views: 1253, }, { alt: "Abstract colorful waves", downloads: 2354, src: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop", views: 7676, }, ]; export type IImage = { alt: string; src: string; views: number; downloads: number; }; 51:Tb07,"use client"; import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"; import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/registry/ui/chart"; const chartConfig: ChartConfig = { downloads: { color: "var(--color-green-100)", label: "Downloads", }, views: { color: "var(--color-green-100)", label: "Views", }, }; export const StatsChart = ({ data = "views", }: { data?: "views" | "downloads"; }) => { return ( { return new Date(value as string).toLocaleDateString("en-US", { day: "numeric", month: "short", year: "numeric", }); }} /> } cursor={false} /> ); }; const chartData = [ { date: "2025-12-24", downloads: 350, views: 6452 }, { date: "2025-12-25", downloads: 120, views: 1945 }, { date: "2025-12-26", downloads: 420, views: 6576 }, { date: "2025-12-27", downloads: 180, views: 2371 }, { date: "2025-12-28", downloads: 150, views: 2335 }, { date: "2025-12-29", downloads: 380, views: 6237 }, { date: "2025-12-30", downloads: 520, views: 7528 }, { date: "2025-12-31", downloads: 110, views: 1944 }, { date: "2026-01-01", downloads: 290, views: 4837 }, { date: "2026-01-02", downloads: 160, views: 2358 }, { date: "2026-01-03", downloads: 140, views: 2350 }, { date: "2026-01-04", downloads: 410, views: 6734 }, { date: "2026-01-05", downloads: 90, views: 1232 }, { date: "2026-01-06", downloads: 230, views: 3677 }, { date: "2026-01-07", downloads: 85, views: 1269 }, { date: "2026-01-08", downloads: 115, views: 1658 }, { date: "2026-01-09", downloads: 145, views: 2001, }, { date: "2026-01-10", downloads: 395, views: 6352, }, { date: "2026-01-11", downloads: 190, views: 2954, }, { date: "2026-01-12", downloads: 310, views: 4590, }, { date: "2026-01-13", downloads: 110, views: 1843, }, ]; 52:T1472,"use client"; import { Chrome, Eye, EyeOff, Github } from "lucide-react"; import * as React from "react"; import { Button } from "@/registry/ui/button"; import { Field, FieldControl, FieldError, FieldLabel, } from "@/registry/ui/field"; import { Form } from "@/registry/ui/form"; import { Input } from "@/registry/ui/input"; import { Tabs, TabsListContent, TabsPanel, TabsTab } from "@/registry/ui/tabs"; export function LoginForm({ onSuccess }: { onSuccess: () => void }) { const [isLoading, setIsLoading] = React.useState(false); const [showPassword, setShowPassword] = React.useState(false); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); setIsLoading(true); setTimeout(() => { setIsLoading(false); onSuccess(); }, 2000); }; return (

Welcome back

Enter your credentials to access your account

Email Phone

Or continue with

); } 53:Ted3,"use client"; import * as React from "react"; import { Button } from "@/registry/ui/button"; import { Field, FieldControl, FieldError, FieldLabel, } from "@/registry/ui/field"; import { Form } from "@/registry/ui/form"; import { Input } from "@/registry/ui/input"; export type IImage = { alt: string; src: string; views: number; downloads: number; }; interface SignUpFormProps { image: IImage; onSuccess?: () => void; } export function SignUpForm({ image, onSuccess }: SignUpFormProps) { const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); setIsLoading(true); setTimeout(() => { setIsLoading(false); if (onSuccess) onSuccess(); }, 2000); }; return (

Photo viewed {image.views.toLocaleString()} times

Join Us

Already have an account?

By joining, you agree to the{" "} {" "} and{" "} .

); } 54:T656,"use client"; import { FacebookIcon, InstagramIcon, LinkIcon, ShareIcon, TwitterIcon, } from "lucide-react"; import { Button } from "@/registry/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/registry/ui/dropdown-menu"; import { toast } from "@/registry/ui/toast"; export const ShareMenu = () => { const handleCopy = () => { navigator.clipboard.writeText("https://lumiui.dev"); toast.success({ title: "Copied", }); }; return ( Share } /> Socials Facebook Twitter Instagram Copy link ); }; 55:T120d,import type { DialogRootChangeEventDetails } from "@base-ui/react"; import { BookmarkIcon, PlusIcon } from "lucide-react"; import React from "react"; import { cn } from "@/registry/lib/utils"; import { Button } from "@/registry/ui/button"; import { createDialogHandle, Dialog, DialogBackdrop, DialogPopup, DialogPortal, DialogTrigger, } from "@/registry/ui/dialog"; import { toast } from "@/registry/ui/toast"; import { createTooltipHandle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/ui/tooltip"; import type { IImage } from "../page"; import { LoginForm } from "./login-form"; import { SignUpForm } from "./signup-form"; type UserAction = "bookmark" | "add-collection"; type FormType = "signin" | "signup"; type DialogPayload = { formType: FormType; action: UserAction; title: string; }; const dialogHandle = createDialogHandle(); const tooltipHandle = createTooltipHandle<{ label: string }>(); export const TooltipGroup = ({ currentImage }: { currentImage: IImage }) => { const [isOpen, setIsOpen] = React.useState(false); const [triggerId, setTriggerId] = React.useState(null); const handleOpenChange = ( open: boolean, eventDetails: DialogRootChangeEventDetails, ) => { setIsOpen(open); if (eventDetails.trigger) { setTriggerId(eventDetails.trigger.id); } }; const handleSuccess = (action: UserAction) => { setIsOpen(false); const messages: Record = { "add-collection": `Added ${currentImage.alt} to collection`, bookmark: `Bookmarked ${currentImage.alt}`, }; toast.success({ description: messages[action] || "Action completed successfully", title: "Success", }); }; return ( <>

} > } /> } > } /> {({ payload }) => (

{payload?.label}

)}

); }; 56:T56d,import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar"; import { Button } from "@/registry/ui/button"; import { PreviewCard, PreviewCardContent, PreviewCardTrigger, } from "@/registry/ui/preview-card"; export function ProfileCard() { return ( VC } />

@base-ui

Unstyled UI components for building accessible web apps and design systems. From the creators of Radix, Floating UI, and Material UI.

Joined December 2021

); } 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","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@lumiui","registryDependencies":["@lumi-ui/dialog","@lumi-ui/alert-dialog","@lumi-ui/dropdown-menu","@lumi-ui/button","@lumi-ui/select","@lumi-ui/toast","@lumi-ui/separator"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/dialog-02/page.tsx","content":"$50","type":"registry:page","target":"app/dashboard/page.tsx"},{"path":"registry/blocks/dialog-02/components/info-menu.tsx","content":"import { InfoIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/ui/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/registry/ui/popover\";\nimport { Tabs, TabsListContent, TabsPanel, TabsTab } from \"@/registry/ui/tabs\";\nimport { StatsChart } from \"./stats-chart\";\n\nexport const InfoMenu = () => {\n return (\n \n }>\n Info\n \n \n \n \n \n \n \n \n \n \n Downloads\n Views\n \n \n \n \n );\n};\n","type":"registry:component"},{"path":"registry/blocks/dialog-02/components/stats-chart.tsx","content":"$51","type":"registry:component"},{"path":"registry/blocks/dialog-02/components/login-form.tsx","content":"$52","type":"registry:component"},{"path":"registry/blocks/dialog-02/components/signup-form.tsx","content":"$53","type":"registry:component"},{"path":"registry/blocks/dialog-02/components/share-menu.tsx","content":"$54","type":"registry:component"},{"path":"registry/blocks/dialog-02/components/tooltip-group.tsx","content":"$55","type":"registry:component"},{"path":"registry/blocks/dialog-02/components/profile-card.tsx","content":"$56","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]