"use client"; import { Share2, X } from "lucide-react"; import type React from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Button, buttonVariants, } from "@/components/registry/primitives/core/button"; import { cn } from "@/lib/registry/cn"; /** Minimum touch target; use px so size is not affected by ancestor font-size. */ const MOBILE_TRIGGER_PX = 48; const MOBILE_ICON_PX = 24; export interface FloatingDockItem { title: string; icon: React.ReactNode; href: string; onClick?: () => void; } export interface FloatingDockProps { items: FloatingDockItem[]; displayOptions?: { /** Controls responsive rendering mode for CMS/preview usage. */ mode?: "auto" | "mobile" | "desktop"; /** * Render the mobile dock's item menu already open. Preview seam * only — the menu is state-gated and renders nothing until tapped, * so a static preview paints a bare trigger and the dock items can * never be seen or measured. */ defaultMenuOpen?: boolean; }; styleOptions?: { desktopClassName?: string; mobileClassName?: string; }; } const iconWrapperClass = "inline-flex size-5 shrink-0 items-center justify-center [&>svg]:size-5 [&>svg]:shrink-0"; export function FloatingDock({ items, displayOptions, styleOptions, }: FloatingDockProps) { const mode = displayOptions?.mode ?? "auto"; const showDesktop = mode === "desktop" || mode === "auto"; const showMobile = mode === "mobile" || mode === "auto"; return (

{showDesktop && ( )} {showMobile && ( )}

); } function FloatingDockDesktop({ items, className, }: { items: FloatingDockItem[]; className?: string; }) { return (

{items.map((item) => ( ))}

); } function FloatingDockMobile({ items, className, isForcedMobile = false, defaultOpen, }: { items: FloatingDockItem[]; className?: string; isForcedMobile?: boolean; defaultOpen?: boolean; }) { const [open, setOpen] = useState(defaultOpen ?? false); const triggerRef = useRef(null); const firstItemRef = useRef(null); const closeMenu = useCallback(() => { setOpen(false); setTimeout(() => triggerRef.current?.focus(), 0); }, []); const toggleMenu = useCallback(() => { setOpen((prev) => !prev); }, []); useEffect(() => { if (open && firstItemRef.current) { firstItemRef.current.focus(); } }, [open]); const triggerIcon = useMemo( () => open ? ( ) : ( ), [open], ); return (

{open && ( <>

{items.map((item, index) => ( ))}

); }

Floating Dock

Showcase

Floating Dock