{
  "title": "Sidebar",
  "description": "A composable, themeable, and customizable sidebar component with collapsible states, variants, and responsive sheet behavior.",
  "name": "motion-sidebar",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input",
    "separator",
    "sheet",
    "skeleton"
  ],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/sidebar.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { PanelLeftIcon } from \"lucide-react\";\nimport { motion } from \"motion/react\";\n\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { TooltipContent } from \"@/components/paceui/motion/tooltip\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from \"@/components/ui/sheet\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\n\ninterface SidebarMenuHighlightContextType {\n    highlightLayoutId: string;\n    activeItemId: string | null;\n    setActiveItem: (id: string) => void;\n    clearActiveItemWithDelay: () => void;\n}\n\nconst SidebarMenuHighlightContext = React.createContext<SidebarMenuHighlightContextType | null>(null);\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\ntype SidebarContextProps = {\n    state: \"expanded\" | \"collapsed\";\n    open: boolean;\n    setOpen: (open: boolean) => void;\n    openMobile: boolean;\n    setOpenMobile: (open: boolean) => void;\n    isMobile: boolean;\n    toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n    const context = React.useContext(SidebarContext);\n    if (!context) {\n        return {\n            state: \"expanded\" as const,\n            open: true,\n            setOpen: () => {},\n            openMobile: false,\n            setOpenMobile: () => {},\n            isMobile: false,\n            toggleSidebar: () => {},\n        };\n    }\n\n    return context;\n}\n\nexport interface SidebarProviderProps extends React.ComponentProps<\"div\"> {\n    defaultOpen?: boolean;\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n}\n\nfunction SidebarProvider({\n    defaultOpen = true,\n    open: openProp,\n    onOpenChange: setOpenProp,\n    className,\n    style,\n    children,\n    ...props\n}: SidebarProviderProps) {\n    const isMobile = useIsMobile();\n    const [openMobile, setOpenMobile] = React.useState(false);\n\n    const [_open, _setOpen] = React.useState(defaultOpen);\n    const open = openProp ?? _open;\n    const setOpen = React.useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const openState = typeof value === \"function\" ? value(open) : value;\n            if (setOpenProp) {\n                setOpenProp(openState);\n            } else {\n                _setOpen(openState);\n            }\n\n            document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n        },\n        [setOpenProp, open],\n    );\n\n    const toggleSidebar = React.useCallback(() => {\n        return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n    }, [isMobile, setOpen, setOpenMobile]);\n\n    React.useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n                event.preventDefault();\n                toggleSidebar();\n            }\n        };\n\n        window.addEventListener(\"keydown\", handleKeyDown);\n        return () => window.removeEventListener(\"keydown\", handleKeyDown);\n    }, [toggleSidebar]);\n\n    const state = open ? \"expanded\" : \"collapsed\";\n\n    const contextValue = React.useMemo<SidebarContextProps>(\n        () => ({\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n        }),\n        [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n    );\n\n    return (\n        <SidebarContext.Provider value={contextValue}>\n            <div\n                data-slot=\"sidebar-wrapper\"\n                style={\n                    {\n                        \"--sidebar-width\": SIDEBAR_WIDTH,\n                        \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n                        ...style,\n                    } as React.CSSProperties\n                }\n                className={cn(\n                    \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n                    className,\n                )}\n                {...props}>\n                {children}\n            </div>\n        </SidebarContext.Provider>\n    );\n}\n\nexport interface SidebarProps extends React.ComponentProps<\"div\"> {\n    side?: \"left\" | \"right\";\n    variant?: \"sidebar\" | \"floating\" | \"inset\";\n    collapsible?: \"offExamples\" | \"icon\" | \"none\";\n}\n\nfunction Sidebar({\n    side = \"left\",\n    variant = \"sidebar\",\n    collapsible = \"offExamples\",\n    className,\n    children,\n    ...props\n}: SidebarProps) {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n    const generatedLayoutId = React.useId();\n    const [activeItemId, setActiveItemId] = React.useState<string | null>(null);\n    const timeoutRef = React.useRef<any>(null);\n\n    const setActiveItem = React.useCallback((id: string) => {\n        if (timeoutRef.current) clearTimeout(timeoutRef.current);\n        setActiveItemId(id);\n    }, []);\n\n    const clearActiveItemWithDelay = React.useCallback((delay = 500) => {\n        if (timeoutRef.current) clearTimeout(timeoutRef.current);\n        if (delay === 0) {\n            setActiveItemId(null);\n        } else {\n            timeoutRef.current = setTimeout(() => {\n                setActiveItemId(null);\n            }, delay);\n        }\n    }, []);\n\n    const highlightValue = React.useMemo<SidebarMenuHighlightContextType>(\n        () => ({\n            highlightLayoutId: generatedLayoutId,\n            activeItemId,\n            setActiveItem,\n            clearActiveItemWithDelay,\n        }),\n        [generatedLayoutId, activeItemId, setActiveItem, clearActiveItemWithDelay],\n    );\n\n    if (collapsible === \"none\") {\n        return (\n            <SidebarMenuHighlightContext.Provider value={highlightValue}>\n                <div\n                    data-slot=\"sidebar\"\n                    className={cn(\n                        \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n                        className,\n                    )}\n                    onPointerLeave={() => clearActiveItemWithDelay(500)}\n                    {...props}>\n                    {children}\n                </div>\n            </SidebarMenuHighlightContext.Provider>\n        );\n    }\n\n    if (isMobile) {\n        return (\n            <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n                <SheetContent\n                    data-sidebar=\"sidebar\"\n                    data-slot=\"sidebar\"\n                    data-mobile=\"true\"\n                    className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width)! p-0 [&>button]:hidden\"\n                    style={\n                        {\n                            \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n                        } as React.CSSProperties\n                    }\n                    side={side}>\n                    <SheetHeader className=\"sr-only\">\n                        <SheetTitle>Sidebar</SheetTitle>\n                        <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n                    </SheetHeader>\n                    <SidebarMenuHighlightContext.Provider value={highlightValue}>\n                        <div\n                            className=\"flex h-full w-full flex-col pe-2\"\n                            onPointerLeave={() => clearActiveItemWithDelay(500)}>\n                            {children}\n                        </div>\n                    </SidebarMenuHighlightContext.Provider>\n                </SheetContent>\n            </Sheet>\n        );\n    }\n\n    return (\n        <div\n            className=\"group peer text-sidebar-foreground hidden md:block\"\n            data-state={state}\n            data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n            data-variant={variant}\n            data-side={side}\n            data-slot=\"sidebar\">\n            <div\n                data-slot=\"sidebar-gap\"\n                className={cn(\n                    \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]\",\n                    \"group-data-[collapsible=offExamples]:w-0\",\n                    \"group-data-[side=right]:rotate-180\",\n                    variant === \"floating\" || variant === \"inset\"\n                        ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n                        : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n                )}\n            />\n            <div\n                data-slot=\"sidebar-container\"\n                className={cn(\n                    \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] md:flex\",\n                    side === \"left\"\n                        ? \"left-0 group-data-[collapsible=offExamples]:-left-(--sidebar-width)\"\n                        : \"right-0 group-data-[collapsible=offExamples]:-right-(--sidebar-width)\",\n                    variant === \"floating\" || variant === \"inset\"\n                        ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n                        : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n                    className,\n                )}\n                {...props}>\n                <div\n                    data-sidebar=\"sidebar\"\n                    data-slot=\"sidebar-inner\"\n                    onPointerLeave={() => clearActiveItemWithDelay(500)}\n                    className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-md group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\">\n                    <SidebarMenuHighlightContext.Provider value={highlightValue}>\n                        {children}\n                    </SidebarMenuHighlightContext.Provider>\n                </div>\n            </div>\n        </div>\n    );\n}\n\nexport interface SidebarTriggerProps extends React.ComponentProps<typeof Button> {}\n\nfunction SidebarTrigger({ className, onClick, ...props }: SidebarTriggerProps) {\n    const { toggleSidebar } = useSidebar();\n\n    return (\n        <Button\n            data-sidebar=\"trigger\"\n            data-slot=\"sidebar-trigger\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            className={cn(className)}\n            onClick={(event) => {\n                onClick?.(event);\n                toggleSidebar();\n            }}\n            {...props}>\n            <PanelLeftIcon />\n            <span className=\"sr-only\">Toggle Sidebar</span>\n        </Button>\n    );\n}\n\nexport interface SidebarRailProps extends React.ComponentProps<\"button\"> {}\n\nfunction SidebarRail({ className, ...props }: SidebarRailProps) {\n    const { toggleSidebar } = useSidebar();\n\n    return (\n        <button\n            data-sidebar=\"rail\"\n            data-slot=\"sidebar-rail\"\n            aria-label=\"Toggle Sidebar\"\n            tabIndex={-1}\n            onClick={toggleSidebar}\n            title=\"Toggle Sidebar\"\n            className={cn(\n                \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n                \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n                \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n                \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n                \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n                \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface SidebarInsetProps extends React.ComponentProps<\"main\"> {}\n\nfunction SidebarInset({ className, ...props }: SidebarInsetProps) {\n    return (\n        <main\n            data-slot=\"sidebar-inset\"\n            className={cn(\n                \"bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-md md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface SidebarInputProps extends React.ComponentProps<typeof Input> {}\n\nfunction SidebarInput({ className, ...props }: SidebarInputProps) {\n    return (\n        <Input\n            data-slot=\"sidebar-input\"\n            data-sidebar=\"input\"\n            className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n            {...props}\n        />\n    );\n}\n\nexport interface SidebarHeaderProps extends React.ComponentProps<\"div\"> {}\n\nfunction SidebarHeader({ className, ...props }: SidebarHeaderProps) {\n    return (\n        <div\n            data-slot=\"sidebar-header\"\n            data-sidebar=\"header\"\n            className={cn(\"flex flex-col gap-2 p-2\", className)}\n            {...props}\n        />\n    );\n}\n\nexport interface SidebarFooterProps extends React.ComponentProps<\"div\"> {}\n\nfunction SidebarFooter({ className, ...props }: SidebarFooterProps) {\n    return (\n        <div\n            data-slot=\"sidebar-footer\"\n            data-sidebar=\"footer\"\n            className={cn(\"flex flex-col gap-2 p-2\", className)}\n            {...props}\n        />\n    );\n}\n\nexport interface SidebarSeparatorProps extends React.ComponentProps<typeof Separator> {}\n\nfunction SidebarSeparator({ className, ...props }: SidebarSeparatorProps) {\n    return (\n        <Separator\n            data-slot=\"sidebar-separator\"\n            data-sidebar=\"separator\"\n            className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n            {...props}\n        />\n    );\n}\n\nexport interface SidebarContentProps extends React.ComponentProps<\"div\"> {}\n\nfunction SidebarContent({ className, ...props }: SidebarContentProps) {\n    return (\n        <div\n            data-slot=\"sidebar-content\"\n            data-sidebar=\"content\"\n            className={cn(\n                \"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface SidebarGroupProps extends React.ComponentProps<\"div\"> {}\n\nfunction SidebarGroup({ className, ...props }: SidebarGroupProps) {\n    return (\n        <div\n            data-slot=\"sidebar-group\"\n            data-sidebar=\"group\"\n            className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n            {...props}\n        />\n    );\n}\n\nexport interface SidebarGroupLabelProps extends useRender.ComponentProps<\"div\">, React.ComponentProps<\"div\"> {}\n\nfunction SidebarGroupLabel({ className, render, ...props }: SidebarGroupLabelProps) {\n    return useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(\n            {\n                className: cn(\n                    \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n                    className,\n                ),\n            },\n            props,\n        ),\n        render,\n        state: {\n            slot: \"sidebar-group-label\",\n            sidebar: \"group-label\",\n        },\n    });\n}\n\nexport interface SidebarGroupActionProps extends useRender.ComponentProps<\"button\">, React.ComponentProps<\"button\"> {\n    showOnHover?: boolean;\n}\n\nfunction SidebarGroupAction({ className, render, showOnHover = false, ...props }: SidebarGroupActionProps) {\n    return useRender({\n        defaultTagName: \"button\",\n        props: mergeProps<\"button\">(\n            {\n                className: cn(\n                    \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n                    showOnHover &&\n                        \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n                    className,\n                ),\n            },\n            props,\n        ),\n        render,\n        state: {\n            slot: \"sidebar-group-action\",\n            sidebar: \"group-action\",\n        },\n    });\n}\n\nexport interface SidebarGroupContentProps extends React.ComponentProps<\"div\"> {}\n\nfunction SidebarGroupContent({ className, ...props }: SidebarGroupContentProps) {\n    return (\n        <div\n            data-slot=\"sidebar-group-content\"\n            data-sidebar=\"group-content\"\n            className={cn(\"w-full text-sm\", className)}\n            {...props}\n        />\n    );\n}\n\nexport interface SidebarMenuProps extends React.ComponentProps<\"ul\"> {}\n\nfunction SidebarMenu({ className, onPointerLeave, children, ...props }: SidebarMenuProps) {\n    const parentHighlightContext = React.useContext(SidebarMenuHighlightContext);\n\n    const generatedLayoutId = React.useId();\n    const highlightLayoutId = parentHighlightContext?.highlightLayoutId ?? generatedLayoutId;\n\n    const [localActiveItemId, setLocalActiveItemId] = React.useState<string | null>(null);\n    const timeoutRef = React.useRef<any>(null);\n\n    const setActiveItem =\n        parentHighlightContext?.setActiveItem ??\n        React.useCallback((id: string) => {\n            if (timeoutRef.current) clearTimeout(timeoutRef.current);\n            setLocalActiveItemId(id);\n        }, []);\n\n    const clearActiveItemWithDelay =\n        parentHighlightContext?.clearActiveItemWithDelay ??\n        React.useCallback((delay = 500) => {\n            if (timeoutRef.current) clearTimeout(timeoutRef.current);\n            if (delay === 0) {\n                setLocalActiveItemId(null);\n            } else {\n                timeoutRef.current = setTimeout(() => {\n                    setLocalActiveItemId(null);\n                }, delay);\n            }\n        }, []);\n\n    const activeItemId = parentHighlightContext ? parentHighlightContext.activeItemId : localActiveItemId;\n\n    const highlightValue: SidebarMenuHighlightContextType = parentHighlightContext ?? {\n        highlightLayoutId,\n        activeItemId,\n        setActiveItem,\n        clearActiveItemWithDelay,\n    };\n\n    return (\n        <SidebarMenuHighlightContext.Provider value={highlightValue}>\n            <ul\n                data-slot=\"sidebar-menu\"\n                data-sidebar=\"menu\"\n                className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n                onPointerLeave={(e) => {\n                    onPointerLeave?.(e);\n                    clearActiveItemWithDelay(500);\n                }}\n                {...props}>\n                {children}\n            </ul>\n        </SidebarMenuHighlightContext.Provider>\n    );\n}\n\nexport interface SidebarMenuItemProps extends React.ComponentProps<\"li\"> {}\n\nfunction SidebarMenuItem({ className, ...props }: SidebarMenuItemProps) {\n    return (\n        <li\n            data-slot=\"sidebar-menu-item\"\n            data-sidebar=\"menu-item\"\n            className={cn(\"group/menu-item relative\", className)}\n            {...props}\n        />\n    );\n}\n\nconst sidebarMenuButtonVariants = cva(\n    \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding,background-color,color,transform] active:scale-[0.98] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0 relative\",\n    {\n        variants: {\n            variant: {\n                default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n                outline:\n                    \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n            },\n            size: {\n                default: \"h-8 text-sm\",\n                sm: \"h-7 text-xs\",\n                lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n            },\n        },\n        defaultVariants: {\n            variant: \"default\",\n            size: \"default\",\n        },\n    },\n);\n\nconst sidebarMenuButtonAnimatedVariants = cva(\n    \"ring-sidebar-ring gap-2 rounded-md p-2 text-left text-sm group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0 relative select-none cursor-default active:scale-[0.98] transition-colors duration-150\",\n    {\n        variants: {\n            variant: {\n                default: \"\",\n                outline: \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))]\",\n            },\n            size: {\n                default: \"h-8 text-sm\",\n                sm: \"h-7 text-xs\",\n                lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n            },\n        },\n        defaultVariants: {\n            variant: \"default\",\n            size: \"default\",\n        },\n    },\n);\n\nexport interface SidebarMenuButtonProps\n    extends\n        useRender.ComponentProps<\"button\">,\n        React.ComponentProps<\"button\">,\n        VariantProps<typeof sidebarMenuButtonVariants> {\n    isActive?: boolean;\n    showHighlight?: boolean;\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n}\n\nfunction SidebarMenuButton({\n    render,\n    isActive = false,\n    showHighlight = true,\n    variant = \"default\",\n    size = \"default\",\n    tooltip,\n    className,\n    children,\n    onPointerEnter,\n    onFocus,\n    ...props\n}: SidebarMenuButtonProps) {\n    const highlightContext = React.useContext(SidebarMenuHighlightContext);\n    const itemId = React.useId();\n\n    const highlightLayoutId = highlightContext?.highlightLayoutId ?? \"sidebar-active-indicator\";\n    const isHovered = highlightContext?.activeItemId === itemId;\n    const isHighlighted = showHighlight && (highlightContext?.activeItemId ? isHovered : isActive);\n\n    const handlePointerEnter = (e: any) => {\n        onPointerEnter?.(e);\n        if (showHighlight) {\n            highlightContext?.setActiveItem(itemId);\n        }\n    };\n\n    const handleFocus = (e: any) => {\n        onFocus?.(e);\n        if (showHighlight) {\n            highlightContext?.setActiveItem(itemId);\n        }\n    };\n\n    const resolvedChildren = children ?? (React.isValidElement(render) ? (render.props as any).children : null);\n    const finalRender =\n        React.isValidElement(render) && (render.props as any).children !== undefined\n            ? React.cloneElement(render, { children: undefined } as any)\n            : render;\n\n    const animatedChildren = (\n        <>\n            {isHighlighted && (\n                <motion.div\n                    layoutId={highlightLayoutId}\n                    className={cn(\n                        \"bg-muted pointer-events-none absolute inset-0 z-0 rounded-md\",\n                        variant === \"outline\" && \"shadow-[0_0_0_1px_hsl(var(--sidebar-border))]\",\n                    )}\n                    transition={{ type: \"spring\", stiffness: 420, damping: 28, mass: 0.8 }}\n                />\n            )}\n            <span className=\"relative z-10 flex w-full min-w-0 items-center gap-2 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate\">\n                {resolvedChildren}\n            </span>\n        </>\n    );\n\n    return useRender({\n        defaultTagName: \"button\",\n        props: mergeProps<\"button\">(\n            {\n                className: cn(\n                    sidebarMenuButtonAnimatedVariants({ variant, size }),\n                    (isActive || isHovered) && \"text-sidebar-accent-foreground\",\n                    className,\n                ),\n                onPointerEnter: handlePointerEnter,\n                onFocus: handleFocus,\n                children: animatedChildren,\n            },\n            props,\n        ),\n        render: finalRender,\n        state: {\n            slot: \"sidebar-menu-button\",\n            sidebar: \"menu-button\",\n            size,\n            active: isActive,\n        },\n    });\n}\n\nexport interface SidebarMenuActionProps extends useRender.ComponentProps<\"button\">, React.ComponentProps<\"button\"> {\n    showOnHover?: boolean;\n}\n\nfunction SidebarMenuAction({ className, render, showOnHover = false, ...props }: SidebarMenuActionProps) {\n    return useRender({\n        defaultTagName: \"button\",\n        props: mergeProps<\"button\">(\n            {\n                className: cn(\n                    \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n                    showOnHover &&\n                        \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n                    className,\n                ),\n            },\n            props,\n        ),\n        render,\n        state: {\n            slot: \"sidebar-menu-action\",\n            sidebar: \"menu-action\",\n        },\n    });\n}\n\nexport interface SidebarMenuBadgeProps extends React.ComponentProps<\"div\"> {}\n\nfunction SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps) {\n    return (\n        <div\n            data-slot=\"sidebar-menu-badge\"\n            data-sidebar=\"menu-badge\"\n            className={cn(\n                \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface SidebarMenuSkeletonProps extends React.ComponentProps<\"div\"> {\n    showIcon?: boolean;\n}\n\nfunction SidebarMenuSkeleton({ className, showIcon = false, ...props }: SidebarMenuSkeletonProps) {\n    const [width] = React.useState(() => {\n        return `${Math.floor(Math.random() * 40) + 50}%`;\n    });\n\n    return (\n        <div\n            data-slot=\"sidebar-menu-skeleton\"\n            data-sidebar=\"menu-skeleton\"\n            className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n            {...props}>\n            {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n            <Skeleton\n                className=\"h-4 max-w-(--skeleton-width) flex-1\"\n                data-sidebar=\"menu-skeleton-text\"\n                style={\n                    {\n                        \"--skeleton-width\": width,\n                    } as React.CSSProperties\n                }\n            />\n        </div>\n    );\n}\n\nexport interface SidebarMenuSubProps extends React.ComponentProps<\"ul\"> {}\n\nfunction SidebarMenuSub({ className, onPointerLeave, children, ...props }: SidebarMenuSubProps) {\n    const parentHighlightContext = React.useContext(SidebarMenuHighlightContext);\n\n    const generatedLayoutId = React.useId();\n    const highlightLayoutId = parentHighlightContext?.highlightLayoutId ?? generatedLayoutId;\n\n    const [localActiveItemId, setLocalActiveItemId] = React.useState<string | null>(null);\n    const timeoutRef = React.useRef<any>(null);\n\n    const setActiveItem =\n        parentHighlightContext?.setActiveItem ??\n        React.useCallback((id: string) => {\n            if (timeoutRef.current) clearTimeout(timeoutRef.current);\n            setLocalActiveItemId(id);\n        }, []);\n\n    const clearActiveItemWithDelay =\n        parentHighlightContext?.clearActiveItemWithDelay ??\n        React.useCallback((delay = 500) => {\n            if (timeoutRef.current) clearTimeout(timeoutRef.current);\n            if (delay === 0) {\n                setLocalActiveItemId(null);\n            } else {\n                timeoutRef.current = setTimeout(() => {\n                    setLocalActiveItemId(null);\n                }, delay);\n            }\n        }, []);\n\n    const activeItemId = parentHighlightContext ? parentHighlightContext.activeItemId : localActiveItemId;\n\n    const highlightValue: SidebarMenuHighlightContextType = parentHighlightContext ?? {\n        highlightLayoutId,\n        activeItemId,\n        setActiveItem,\n        clearActiveItemWithDelay,\n    };\n\n    return (\n        <SidebarMenuHighlightContext.Provider value={highlightValue}>\n            <ul\n                data-slot=\"sidebar-menu-sub\"\n                data-sidebar=\"menu-sub\"\n                className={cn(\n                    \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden\",\n                    className,\n                )}\n                onPointerLeave={(e) => {\n                    onPointerLeave?.(e);\n                    clearActiveItemWithDelay(500);\n                }}\n                {...props}>\n                {children}\n            </ul>\n        </SidebarMenuHighlightContext.Provider>\n    );\n}\n\nexport interface SidebarMenuSubItemProps extends React.ComponentProps<\"li\"> {}\n\nfunction SidebarMenuSubItem({ className, ...props }: SidebarMenuSubItemProps) {\n    return (\n        <li\n            data-slot=\"sidebar-menu-sub-item\"\n            data-sidebar=\"menu-sub-item\"\n            className={cn(\"group/menu-sub-item relative\", className)}\n            {...props}\n        />\n    );\n}\n\nexport interface SidebarMenuSubButtonProps extends useRender.ComponentProps<\"a\">, React.ComponentProps<\"a\"> {\n    size?: \"sm\" | \"md\";\n    isActive?: boolean;\n}\n\nfunction SidebarMenuSubButton({\n    render,\n    size = \"md\",\n    isActive = false,\n    className,\n    children,\n    onPointerEnter,\n    onFocus,\n    ...props\n}: SidebarMenuSubButtonProps) {\n    const highlightContext = React.useContext(SidebarMenuHighlightContext);\n    const itemId = React.useId();\n\n    const isCurrentActive = highlightContext?.activeItemId === itemId;\n\n    const handlePointerEnter = (e: any) => {\n        onPointerEnter?.(e);\n        highlightContext?.setActiveItem(itemId);\n    };\n\n    const handleFocus = (e: any) => {\n        onFocus?.(e);\n        highlightContext?.setActiveItem(itemId);\n    };\n\n    const resolvedChildren = children ?? (React.isValidElement(render) ? (render.props as any).children : null);\n    const finalRender =\n        React.isValidElement(render) && (render.props as any).children !== undefined\n            ? React.cloneElement(render, { children: undefined } as any)\n            : render;\n\n    const animatedChildren = (\n        <>\n            {isActive && (\n                <motion.div\n                    layoutId=\"sidebar-sub-active-indicator\"\n                    className=\"bg-muted pointer-events-none absolute inset-0 z-0 rounded-md\"\n                    transition={{ type: \"spring\", stiffness: 420, damping: 28, mass: 0.8 }}\n                />\n            )}\n            {isCurrentActive && !isActive && highlightContext?.highlightLayoutId && (\n                <motion.div\n                    layoutId={highlightContext.highlightLayoutId}\n                    className=\"bg-muted/70 pointer-events-none absolute inset-0 z-0 rounded-md\"\n                    transition={{ type: \"spring\", stiffness: 420, damping: 28, mass: 0.8 }}\n                />\n            )}\n            <span className=\"relative z-10 flex w-full min-w-0 items-center gap-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\">\n                {resolvedChildren}\n            </span>\n        </>\n    );\n\n    return useRender({\n        defaultTagName: \"a\",\n        props: mergeProps<\"a\">(\n            {\n                className: cn(\n                    \"text-sidebar-foreground ring-sidebar-ring h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0 relative active:scale-[0.98] transition-colors duration-150\",\n                    (isActive || isCurrentActive) && \"text-sidebar-accent-foreground\",\n                    className,\n                ),\n                onPointerEnter: handlePointerEnter,\n                onFocus: handleFocus,\n                children: animatedChildren,\n            },\n            props,\n        ),\n        render: finalRender,\n        state: {\n            slot: \"sidebar-menu-sub-button\",\n            sidebar: \"menu-sub-button\",\n            size,\n            active: isActive,\n        },\n    });\n}\n\nexport {\n    Sidebar,\n    SidebarContent,\n    SidebarFooter,\n    SidebarGroup,\n    SidebarGroupAction,\n    SidebarGroupContent,\n    SidebarGroupLabel,\n    SidebarHeader,\n    SidebarInput,\n    SidebarInset,\n    SidebarMenu,\n    SidebarMenuAction,\n    SidebarMenuBadge,\n    SidebarMenuButton,\n    SidebarMenuItem,\n    SidebarMenuSkeleton,\n    SidebarMenuSub,\n    SidebarMenuSubButton,\n    SidebarMenuSubItem,\n    SidebarProvider,\n    SidebarRail,\n    SidebarSeparator,\n    SidebarTrigger,\n    useSidebar,\n};\n"
    },
    {
      "path": "hooks/use-mobile.ts",
      "type": "registry:ui",
      "content": "import { useEffect, useState } from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n    const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);\n\n    useEffect(() => {\n        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n        const onChange = () => {\n            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n        };\n        mql.addEventListener(\"change\", onChange);\n        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n        return () => mql.removeEventListener(\"change\", onChange);\n    }, []);\n\n    return !!isMobile;\n}\n"
    },
    {
      "path": "components/paceui/motion/tooltip.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { AnimatePresence, type Transition, motion } from \"motion/react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface TooltipItemData {\n    content: React.ReactNode;\n    side?: TooltipPrimitive.Positioner.Props[\"side\"];\n    sideOffset?: TooltipPrimitive.Positioner.Props[\"sideOffset\"];\n    align?: TooltipPrimitive.Positioner.Props[\"align\"];\n    alignOffset?: TooltipPrimitive.Positioner.Props[\"alignOffset\"];\n    className?: string | ((state: any) => string | undefined);\n    showArrow?: boolean;\n}\n\ninterface TooltipProviderContextValue {\n    activeId: string | null;\n    openTooltip: (id: string, element: HTMLElement, data?: TooltipItemData | null) => void;\n    closeTooltip: (id: string) => void;\n    updateTooltipData: (id: string, data: TooltipItemData) => void;\n}\n\nconst TooltipProviderContext = React.createContext<TooltipProviderContextValue | null>(null);\n\nconst TooltipItemContext = React.createContext<{\n    id: string;\n    triggerRef: React.RefObject<HTMLElement | null>;\n    dataRef: React.RefObject<TooltipItemData>;\n} | null>(null);\n\nexport interface TooltipProviderProps extends TooltipPrimitive.Provider.Props {\n    transition?: Transition;\n}\n\nconst contentVariants = {\n    initial: (offset: { x: number; y: number }) => {\n        if (offset.x === 0 && offset.y === 0) {\n            return {\n                opacity: 0,\n                scale: 0.96,\n                filter: \"blur(4px)\",\n                x: 0,\n                y: 4,\n            };\n        }\n        return {\n            opacity: 0,\n            filter: \"blur(4px)\",\n            x: offset.x,\n            y: offset.y,\n            scale: 0.96,\n        };\n    },\n    animate: {\n        opacity: 1,\n        filter: \"blur(0px)\",\n        x: 0,\n        y: 0,\n        scale: 1,\n    },\n    exit: (offset: { x: number; y: number }) => {\n        if (offset.x === 0 && offset.y === 0) {\n            return {\n                opacity: 0,\n                scale: 0.96,\n                filter: \"blur(4px)\",\n                x: 0,\n                y: -4,\n            };\n        }\n        return {\n            opacity: 0,\n            filter: \"blur(4px)\",\n            x: -offset.x * 0.6,\n            y: -offset.y * 0.6,\n            scale: 0.96,\n        };\n    },\n};\n\nfunction TooltipProvider({\n    delay = 0,\n    closeDelay = 150,\n    transition = { type: \"spring\", stiffness: 420, damping: 28, mass: 0.7 },\n    children,\n    ...props\n}: TooltipProviderProps) {\n    const [activeId, setActiveId] = React.useState<string | null>(null);\n    const [activeRect, setActiveRect] = React.useState<DOMRect | null>(null);\n    const [activeData, setActiveData] = React.useState<TooltipItemData | null>(null);\n    const [offset, setOffset] = React.useState<{ x: number; y: number }>({ x: 0, y: 0 });\n    const [isMounted, setIsMounted] = React.useState(false);\n\n    const itemsDataRef = React.useRef<Map<string, TooltipItemData>>(new Map());\n    const triggerElementsRef = React.useRef<Map<string, HTMLElement>>(new Map());\n    const activeRectRef = React.useRef<DOMRect | null>(null);\n    const closeTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n    const openTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    React.useEffect(() => {\n        setIsMounted(true);\n    }, []);\n\n    const updatePosition = React.useCallback(() => {\n        if (!activeId) return;\n        const el = triggerElementsRef.current.get(activeId);\n        if (el) {\n            const rect = el.getBoundingClientRect();\n            setActiveRect(rect);\n            activeRectRef.current = rect;\n        }\n    }, [activeId]);\n\n    React.useEffect(() => {\n        if (!activeId) return;\n        window.addEventListener(\"scroll\", updatePosition, true);\n        window.addEventListener(\"resize\", updatePosition);\n        return () => {\n            window.removeEventListener(\"scroll\", updatePosition, true);\n            window.removeEventListener(\"resize\", updatePosition);\n        };\n    }, [activeId, updatePosition]);\n\n    const openTooltip = React.useCallback(\n        (id: string, element: HTMLElement, directData?: TooltipItemData | null) => {\n            if (closeTimeoutRef.current) {\n                clearTimeout(closeTimeoutRef.current);\n                closeTimeoutRef.current = null;\n            }\n\n            triggerElementsRef.current.set(id, element);\n            if (directData) {\n                itemsDataRef.current.set(id, directData);\n            }\n\n            const data = directData || itemsDataRef.current.get(id) || null;\n            const isAlreadyOpen = Boolean(activeId);\n            const newRect = element.getBoundingClientRect();\n\n            if (isAlreadyOpen && activeRectRef.current) {\n                const prevCenterX = activeRectRef.current.left + activeRectRef.current.width / 2;\n                const prevCenterY = activeRectRef.current.top + activeRectRef.current.height / 2;\n                const newCenterX = newRect.left + newRect.width / 2;\n                const newCenterY = newRect.top + newRect.height / 2;\n\n                const dx = prevCenterX - newCenterX;\n                const dy = prevCenterY - newCenterY;\n\n                const clampedX = Math.max(Math.min(dx, 80), -80);\n                const clampedY = Math.max(Math.min(dy, 40), -40);\n                setOffset({ x: clampedX, y: clampedY });\n            } else {\n                setOffset({ x: 0, y: 0 });\n            }\n\n            activeRectRef.current = newRect;\n\n            if (isAlreadyOpen || delay <= 0) {\n                setActiveId(id);\n                setActiveRect(newRect);\n                if (data) setActiveData(data);\n            } else {\n                if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);\n                openTimeoutRef.current = setTimeout(() => {\n                    setActiveId(id);\n                    const rect = element.getBoundingClientRect();\n                    setActiveRect(rect);\n                    activeRectRef.current = rect;\n                    const latestData = itemsDataRef.current.get(id) || directData || null;\n                    if (latestData) setActiveData(latestData);\n                }, delay);\n            }\n        },\n        [activeId, delay],\n    );\n\n    const closeTooltip = React.useCallback(\n        (id: string) => {\n            if (openTimeoutRef.current) {\n                clearTimeout(openTimeoutRef.current);\n                openTimeoutRef.current = null;\n            }\n\n            if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);\n            closeTimeoutRef.current = setTimeout(() => {\n                setActiveId((current) => {\n                    if (current === id) {\n                        setActiveRect(null);\n                        activeRectRef.current = null;\n                        setActiveData(null);\n                        setOffset({ x: 0, y: 0 });\n                        return null;\n                    }\n                    return current;\n                });\n            }, closeDelay);\n        },\n        [closeDelay],\n    );\n\n    const updateTooltipData = React.useCallback((id: string, data: TooltipItemData) => {\n        itemsDataRef.current.set(id, data);\n    }, []);\n\n    const side = activeData?.side ?? \"top\";\n    const sideOffset = typeof activeData?.sideOffset === \"number\" ? activeData.sideOffset : 6;\n    const align = activeData?.align ?? \"center\";\n    const alignOffset = typeof activeData?.alignOffset === \"number\" ? activeData.alignOffset : 0;\n\n    let targetX = 0;\n    let targetY = 0;\n    let translateX = \"-50%\";\n    let translateY = \"-100%\";\n\n    if (activeRect) {\n        if (side === \"top\") {\n            targetX =\n                align === \"start\"\n                    ? activeRect.left + alignOffset\n                    : align === \"end\"\n                      ? activeRect.right + alignOffset\n                      : activeRect.left + activeRect.width / 2 + alignOffset;\n            targetY = activeRect.top - sideOffset;\n            translateX = align === \"start\" ? \"0%\" : align === \"end\" ? \"-100%\" : \"-50%\";\n            translateY = \"-100%\";\n        } else if (side === \"bottom\") {\n            targetX =\n                align === \"start\"\n                    ? activeRect.left + alignOffset\n                    : align === \"end\"\n                      ? activeRect.right + alignOffset\n                      : activeRect.left + activeRect.width / 2 + alignOffset;\n            targetY = activeRect.bottom + sideOffset;\n            translateX = align === \"start\" ? \"0%\" : align === \"end\" ? \"-100%\" : \"-50%\";\n            translateY = \"0%\";\n        } else if (side === \"left\") {\n            targetX = activeRect.left - sideOffset;\n            targetY =\n                align === \"start\"\n                    ? activeRect.top + alignOffset\n                    : align === \"end\"\n                      ? activeRect.bottom + alignOffset\n                      : activeRect.top + activeRect.height / 2 + alignOffset;\n            translateX = \"-100%\";\n            translateY = align === \"start\" ? \"0%\" : align === \"end\" ? \"-100%\" : \"-50%\";\n        } else if (side === \"right\") {\n            targetX = activeRect.right + sideOffset;\n            targetY =\n                align === \"start\"\n                    ? activeRect.top + alignOffset\n                    : align === \"end\"\n                      ? activeRect.bottom + alignOffset\n                      : activeRect.top + activeRect.height / 2 + alignOffset;\n            translateX = \"0%\";\n            translateY = align === \"start\" ? \"0%\" : align === \"end\" ? \"-100%\" : \"-50%\";\n        }\n    }\n\n    return (\n        <TooltipProviderContext.Provider\n            value={{\n                activeId,\n                openTooltip,\n                closeTooltip,\n                updateTooltipData,\n            }}>\n            <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delay={delay} {...props}>\n                {children}\n            </TooltipPrimitive.Provider>\n            {isMounted &&\n                createPortal(\n                    <AnimatePresence>\n                        {activeId && activeRect && activeData && activeData.content && (\n                            <motion.div\n                                key=\"shared-tooltip-wrapper\"\n                                initial={{\n                                    opacity: 0,\n                                    scale: 0.94,\n                                    filter: \"blur(4px)\",\n                                    x: targetX,\n                                    y: targetY,\n                                }}\n                                animate={{\n                                    opacity: 1,\n                                    scale: 1,\n                                    filter: \"blur(0px)\",\n                                    x: targetX,\n                                    y: targetY,\n                                }}\n                                exit={{\n                                    opacity: 0,\n                                    scale: 0.94,\n                                    filter: \"blur(4px)\",\n                                }}\n                                transition={transition}\n                                style={{\n                                    position: \"fixed\",\n                                    left: 0,\n                                    top: 0,\n                                    pointerEvents: \"none\",\n                                    zIndex: 99999,\n                                }}>\n                                <div\n                                    style={{\n                                        transform: `translate(${translateX}, ${translateY})`,\n                                    }}>\n                                    <motion.div\n                                        layout\n                                        transition={transition}\n                                        className={cn(\n                                            \"bg-foreground text-background relative w-fit max-w-xs rounded-md px-3 py-1.5 text-xs shadow-md select-none\",\n                                            activeData.className,\n                                        )}>\n                                        <div className=\"relative flex items-center justify-center overflow-hidden\">\n                                            <AnimatePresence mode=\"popLayout\" custom={offset} initial={false}>\n                                                <motion.div\n                                                    key={activeId}\n                                                    custom={offset}\n                                                    variants={contentVariants}\n                                                    initial=\"initial\"\n                                                    animate=\"animate\"\n                                                    exit=\"exit\"\n                                                    transition={transition}\n                                                    className=\"flex items-center gap-1.5 whitespace-nowrap\">\n                                                    {activeData.content}\n                                                </motion.div>\n                                            </AnimatePresence>\n                                        </div>\n                                        {activeData.showArrow !== false && (\n                                            <div\n                                                className={cn(\n                                                    \"bg-foreground pointer-events-none absolute size-2 rotate-45 rounded-[1px]\",\n                                                    side === \"top\" && \"-bottom-1 left-1/2 -translate-x-1/2\",\n                                                    side === \"bottom\" && \"-top-1 left-1/2 -translate-x-1/2\",\n                                                    side === \"left\" && \"top-1/2 -right-1 -translate-y-1/2\",\n                                                    side === \"right\" && \"top-1/2 -left-1 -translate-y-1/2\",\n                                                )}\n                                            />\n                                        )}\n                                    </motion.div>\n                                </div>\n                            </motion.div>\n                        )}\n                    </AnimatePresence>,\n                    document.body,\n                )}\n        </TooltipProviderContext.Provider>\n    );\n}\n\nexport interface TooltipProps extends TooltipPrimitive.Root.Props {\n    id?: string;\n}\n\nfunction Tooltip({ id: propId, children, ...props }: TooltipProps) {\n    const parentProvider = React.useContext(TooltipProviderContext);\n    const generatedId = React.useId();\n    const id = propId ?? generatedId;\n    const triggerRef = React.useRef<HTMLElement | null>(null);\n    const dataRef = React.useRef<TooltipItemData>({ content: null });\n\n    if (!parentProvider) {\n        return (\n            <TooltipProvider>\n                <TooltipItemContext.Provider value={{ id, triggerRef, dataRef }}>\n                    <TooltipPrimitive.Root data-slot=\"tooltip\" {...props}>\n                        {children}\n                    </TooltipPrimitive.Root>\n                </TooltipItemContext.Provider>\n            </TooltipProvider>\n        );\n    }\n\n    return (\n        <TooltipItemContext.Provider value={{ id, triggerRef, dataRef }}>\n            <TooltipPrimitive.Root data-slot=\"tooltip\" {...props}>\n                {children}\n            </TooltipPrimitive.Root>\n        </TooltipItemContext.Provider>\n    );\n}\n\nexport interface TooltipTriggerProps extends TooltipPrimitive.Trigger.Props {}\n\nfunction TooltipTrigger({\n    className,\n    onMouseEnter,\n    onMouseLeave,\n    onPointerEnter,\n    onPointerLeave,\n    onFocus,\n    onBlur,\n    ...props\n}: TooltipTriggerProps) {\n    const itemContext = React.useContext(TooltipItemContext);\n    const providerContext = React.useContext(TooltipProviderContext);\n    const localRef = React.useRef<HTMLElement | null>(null);\n\n    const handleOpen = (e: any) => {\n        if (itemContext && providerContext) {\n            const el = (e.currentTarget || itemContext.triggerRef.current || localRef.current) as HTMLElement;\n            if (el) {\n                providerContext.openTooltip(itemContext.id, el, itemContext.dataRef.current);\n            }\n        }\n    };\n\n    const handleClose = () => {\n        if (itemContext && providerContext) {\n            providerContext.closeTooltip(itemContext.id);\n        }\n    };\n\n    return (\n        <TooltipPrimitive.Trigger\n            data-slot=\"tooltip-trigger\"\n            ref={(node: any) => {\n                localRef.current = node;\n                if (itemContext) {\n                    itemContext.triggerRef.current = node;\n                }\n            }}\n            onMouseEnter={(e: any) => {\n                onMouseEnter?.(e);\n                handleOpen(e);\n            }}\n            onMouseLeave={(e: any) => {\n                onMouseLeave?.(e);\n                handleClose();\n            }}\n            onPointerEnter={(e: any) => {\n                onPointerEnter?.(e);\n                handleOpen(e);\n            }}\n            onPointerLeave={(e: any) => {\n                onPointerLeave?.(e);\n                handleClose();\n            }}\n            onFocus={(e: any) => {\n                onFocus?.(e);\n                handleOpen(e);\n            }}\n            onBlur={(e: any) => {\n                onBlur?.(e);\n                handleClose();\n            }}\n            className={className}\n            {...props}\n        />\n    );\n}\n\nexport interface TooltipContentProps\n    extends\n        TooltipPrimitive.Popup.Props,\n        Pick<TooltipPrimitive.Positioner.Props, \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"> {\n    transition?: Transition;\n    showArrow?: boolean;\n}\n\nfunction TooltipContent({\n    className,\n    side = \"top\",\n    sideOffset = 6,\n    align = \"center\",\n    alignOffset = 0,\n    showArrow = true,\n    children,\n    ...props\n}: TooltipContentProps) {\n    const itemContext = React.useContext(TooltipItemContext);\n    const providerContext = React.useContext(TooltipProviderContext);\n\n    const data: TooltipItemData = {\n        content: children,\n        side,\n        sideOffset,\n        align,\n        alignOffset,\n        className,\n        showArrow,\n    };\n\n    if (itemContext) {\n        itemContext.dataRef.current = data;\n    }\n\n    React.useEffect(() => {\n        if (itemContext && providerContext) {\n            providerContext.updateTooltipData(itemContext.id, data);\n        }\n    }, [itemContext, providerContext, children, side, sideOffset, align, alignOffset, className, showArrow]);\n\n    if (providerContext) {\n        return null;\n    }\n\n    return (\n        <TooltipPrimitive.Portal>\n            <TooltipPrimitive.Positioner\n                align={align}\n                alignOffset={alignOffset}\n                side={side}\n                sideOffset={sideOffset}\n                className=\"isolate z-50\">\n                <TooltipPrimitive.Popup\n                    data-slot=\"tooltip-content\"\n                    className={cn(\n                        \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs shadow-md\",\n                        className,\n                    )}\n                    {...props}>\n                    {children}\n                    {showArrow && (\n                        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n                    )}\n                </TooltipPrimitive.Popup>\n            </TooltipPrimitive.Positioner>\n        </TooltipPrimitive.Portal>\n    );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"
    }
  ],
  "mcp": {
    "description": "A composable, themeable sidebar component supporting collapsible modes (icon, offcanvas), floating and inset variants, responsive mobile sheet view, and optional `animate` prop.",
    "tags": [
      "component",
      "sidebar",
      "navigation",
      "layout",
      "drawer",
      "paceui",
      "animation"
    ]
  }
}