{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"tooltip","title":"Tooltip","type":"registry:ui","description":"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.","dependencies":["@radix-ui/react-tooltip","class-variance-authority"],"registryDependencies":["utils","https://fysk.dev/r/kbd.json"],"files":[{"path":"fysk/tooltip.tsx","type":"registry:ui","content":"\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Kbd } from \"@/components/fysk/kbd\"\r\n\r\n// --- Context ---\r\ninterface TooltipContextValue {\r\n    variant?: \"default\" | \"outline\" | \"glass\"\r\n    size?: \"sm\" | \"md\" | \"lg\"\r\n}\r\n\r\nconst TooltipContext = React.createContext<TooltipContextValue>({})\r\n\r\n/**\r\n * Global provider for Tooltips. Usually placed in the root layout.\r\n */\r\nconst TooltipProvider = TooltipPrimitive.Provider\r\n\r\n/**\r\n * The Root component for a Tooltip.\r\n * If you haven't wrapped your app in TooltipProvider, this component\r\n * still behaves as a single-instance provider for convenience.\r\n */\r\nconst Tooltip = ({\r\n    children,\r\n    variant = \"default\",\r\n    size = \"md\",\r\n    delayDuration = 200,\r\n    skipDelayDuration,\r\n    disableHoverableContent,\r\n    ...props\r\n}: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> &\r\n    TooltipContextValue & {\r\n        delayDuration?: number\r\n        skipDelayDuration?: number\r\n        disableHoverableContent?: boolean\r\n    }) => {\r\n    return (\r\n        <TooltipPrimitive.Provider\r\n            delayDuration={delayDuration}\r\n            skipDelayDuration={skipDelayDuration}\r\n            disableHoverableContent={disableHoverableContent}\r\n        >\r\n            <TooltipPrimitive.Root {...props}>\r\n                <TooltipContext.Provider value={{ variant, size }}>\r\n                    {children}\r\n                </TooltipContext.Provider>\r\n            </TooltipPrimitive.Root>\r\n        </TooltipPrimitive.Provider>\r\n    )\r\n}\r\n\r\nconst TooltipTrigger = TooltipPrimitive.Trigger\r\nconst TooltipPortal = TooltipPrimitive.Portal\r\n\r\nconst tooltipVariants = cva(\r\n    \"z-50 overflow-hidden rounded-lg border shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=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 selection:bg-primary selection:text-primary-foreground\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                default: \"bg-primary text-primary-foreground border-primary\",\r\n                outline: \"bg-background border-border text-foreground\",\r\n                glass: \"bg-foreground/10 backdrop-blur-md border-border/50 text-foreground shadow-xl supports-[backdrop-filter]:bg-background/60\",\r\n            },\r\n            size: {\r\n                sm: \"px-2 py-1 text-[10px]\",\r\n                md: \"px-3 py-1.5 text-xs\",\r\n                lg: \"px-4 py-2 text-sm\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            variant: \"default\",\r\n            size: \"md\",\r\n        },\r\n    }\r\n)\r\n\r\nexport interface TooltipContentProps\r\n    extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\r\n    VariantProps<typeof tooltipVariants> {\r\n    showArrow?: boolean\r\n}\r\n\r\nconst TooltipContent = React.forwardRef<\r\n    React.ComponentRef<typeof TooltipPrimitive.Content>,\r\n    TooltipContentProps\r\n>(({ className, variant: propsVariant, size: propsSize, sideOffset = 4, showArrow, children, ...props }, ref) => {\r\n    const context = React.useContext(TooltipContext)\r\n\r\n    const variant = propsVariant || context.variant || \"default\"\r\n    const size = propsSize || context.size || \"md\"\r\n\r\n    return (\r\n        <TooltipPrimitive.Content\r\n            ref={ref}\r\n            sideOffset={sideOffset}\r\n            className={cn(tooltipVariants({ variant, size }), className)}\r\n            {...props}\r\n        >\r\n            <div className=\"flex flex-col gap-1 max-w-[280px]\">\r\n                {children}\r\n            </div>\r\n\r\n            {showArrow && (\r\n                <TooltipPrimitive.Arrow\r\n                    className={cn(\r\n                        \"fill-current\",\r\n                        variant === \"default\" && \"text-primary\",\r\n                        variant === \"outline\" && \"text-background stroke-border\",\r\n                        variant === \"glass\" && \"text-background/70\"\r\n                    )}\r\n                />\r\n            )}\r\n        </TooltipPrimitive.Content>\r\n    )\r\n})\r\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\r\n\r\nconst TooltipHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\r\n    <div className={cn(\"font-bold tracking-tight leading-none mb-0.5\", className)} {...props} />\r\n)\r\n\r\nconst TooltipDescription = ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {\r\n    const { variant } = React.useContext(TooltipContext)\r\n    return (\r\n        <p\r\n            className={cn(\r\n                \"font-normal leading-snug\",\r\n                variant === \"default\" ? \"opacity-85\" : \"text-muted-foreground\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nconst TooltipShortcut = ({ className, keys, ...props }: React.ComponentPropsWithoutRef<typeof Kbd>) => {\r\n    const { variant } = React.useContext(TooltipContext)\r\n\r\n    const getKbdClassName = () => {\r\n        if (variant === \"default\") return \"bg-primary-foreground/20 border-primary-foreground/30 text-primary-foreground\"\r\n        return \"\"\r\n    }\r\n\r\n    return (\r\n        <Kbd\r\n            keys={keys}\r\n            variant=\"ghost\"\r\n            size=\"sm\"\r\n            className={cn(\r\n                \"ml-auto h-5 min-h-0 py-0 text-[10px] font-medium border-none\",\r\n                getKbdClassName(),\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nexport {\r\n    Tooltip,\r\n    TooltipTrigger,\r\n    TooltipContent,\r\n    TooltipPortal,\r\n    TooltipProvider,\r\n    TooltipHeader,\r\n    TooltipDescription,\r\n    TooltipShortcut\r\n}\r\n"}]}