var Component=(()=>{var v=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var b=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),A=(n,l)=>{for(var r in l)c(n,r,{get:l[r],enumerable:!0})},p=(n,l,r,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let a of f(l))!B.call(n,a)&&a!==r&&c(n,a,{get:()=>l[a],enumerable:!(o=u(l,a))||o.enumerable});return n};var x=(n,l,r)=>(r=n!=null?v(D(n)):{},p(l||!n||!n.__esModule?c(r,"default",{value:n,enumerable:!0}):r,n)),H=n=>p(c({},"__esModule",{value:!0}),n);var C=b((k,y)=>{y.exports=_jsx_runtime});var _={};A(_,{default:()=>g});var e=x(C());function m(n){let l={a:"a",code:"code",figure:"figure",h2:"h2",pre:"pre",span:"span",...n.components},{ComponentPreview:r,ComponentSource:o,Step:a,Steps:i,Tabs:d,TabsContent:F,TabsList:h,TabsTrigger:t}=l;return r||s("ComponentPreview",!0),o||s("ComponentSource",!0),a||s("Step",!0),i||s("Steps",!0),d||s("Tabs",!0),F||s("TabsContent",!0),h||s("TabsList",!0),t||s("TabsTrigger",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(r,{name:"hover-card-demo",description:"A hover card component",children:[(0,e.jsx)(l.figure,{__src__:"registry/default/example/hover-card-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { CalendarDays } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "lucide-react"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Avatar, AvatarFallback, AvatarImage } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/avatar"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/button"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { HoverCard, HoverCardContent, HoverCardTrigger } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/hover-card"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" HoverCardDemo"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCard"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCardTrigger"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" asChild"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"link"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">@nextjs"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCardContent"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"w-80"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"flex justify-between space-x-4"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Avatar"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"https://github.com/vercel.png"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">VC"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"space-y-1"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"h4"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"text-sm font-semibold"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">@nextjs"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"text-sm"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">The React Framework \u2013 created and maintained by @vercel."})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"flex items-center pt-2"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"CalendarDays"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"mr-2 h-4 w-4 opacity-70"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'" "'}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"text-xs text-muted-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">Joined December 2021"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"}"})})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/austin/example/hover-card-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { CalendarIcon } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@radix-ui/react-icons"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Avatar, AvatarFallback, AvatarImage } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/avatar"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/button"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { HoverCard, HoverCardContent, HoverCardTrigger } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/hover-card"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" HoverCardDemo"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCard"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCardTrigger"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" asChild"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"link"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">@nextjs"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCardContent"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"w-80"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"flex justify-between space-x-4"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Avatar"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"https://github.com/vercel.png"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">VC"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"space-y-1"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"h4"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"text-sm font-semibold"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">@nextjs"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"text-sm"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">The React Framework \u2013 created and maintained by @vercel."})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"flex items-center pt-2"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"CalendarIcon"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"mr-2 h-4 w-4 opacity-70"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'" "'}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"text-xs text-muted-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">Joined December 2021"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"}"})})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/dc/example/hover-card-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { CalendarIcon } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@radix-ui/react-icons"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Avatar, AvatarFallback, AvatarImage } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/avatar"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/button"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { HoverCard, HoverCardContent, HoverCardTrigger } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/hover-card"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:" HoverCardDemo"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCard"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCardTrigger"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" asChild"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" variant"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"link"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">@nextjs"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCardContent"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"w-80"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"flex justify-between space-x-4"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"Avatar"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarImage"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"https://github.com/vercel.png"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"AvatarFallback"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">VC"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"space-y-1"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"h4"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"text-sm font-semibold"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">@nextjs"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"text-sm"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">The React Framework \u2013 created and maintained by @vercel."})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"flex items-center pt-2"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"CalendarIcon"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"mr-2 h-4 w-4 opacity-70"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'" "'}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"text-xs text-muted-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">Joined December 2021"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(d,{defaultValue:"cli",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(t,{value:"cli",children:"CLI"}),(0,e.jsx)(t,{value:"manual",children:"Manual"})]}),(0,e.jsx)(F,{value:"cli",children:(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark-high-contrast",children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"bunx"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" --bun"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" @uplusion23/forge-ui"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" hover-card"})]})})})})}),(0,e.jsxs)(F,{value:"manual",children:[(0,e.jsx)(a,{children:"Install the following dependencies:"}),(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark-high-contrast",children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" install"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:" @radix-ui/react-hover-card"})]})})})}),(0,e.jsxs)(i,{children:[(0,e.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(o,{name:"hover-card",children:[(0,e.jsx)(l.figure,{__src__:"registry/default/ui/hover-card.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@radix-ui/react-hover-card"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" HoverCard"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardPrimitive.Root;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" HoverCardTrigger"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardPrimitive.Trigger;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" HoverCardContent"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "center"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"sideOffset"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" 4"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCardPrimitive.Content"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" align"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" sideOffset"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"sideOffset"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" className,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"HoverCardContent.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardPrimitive.Content.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { HoverCard, HoverCardTrigger, HoverCardContent };"})]})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/austin/ui/hover-card.tsx",__style__:"austin","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@radix-ui/react-hover-card"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" HoverCard"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardPrimitive.Root;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" HoverCardTrigger"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardPrimitive.Trigger;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" HoverCardContent"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "center"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"sideOffset"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" 4"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCardPrimitive.Content"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" align"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" sideOffset"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"sideOffset"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" className,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"HoverCardContent.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardPrimitive.Content.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { HoverCard, HoverCardTrigger, HoverCardContent };"})]})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/dc/ui/hover-card.tsx",__style__:"dc","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@radix-ui/react-hover-card"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" HoverCard"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardPrimitive.Root;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" HoverCardTrigger"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardPrimitive.Trigger;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" HoverCardContent"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "center"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"sideOffset"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" 4"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB757"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCardPrimitive.Content"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" align"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"align"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" sideOffset"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"sideOffset"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91CBFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DBB7FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "z-50 w-64 rounded-md border bg-popover/80 p-4 text-popover-foreground shadow-md outline-none backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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"'}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" className,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"HoverCardContent.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardPrimitive.Content.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" { HoverCard, HoverCardContent, HoverCardTrigger };"})]})]})})})]}),(0,e.jsx)(a,{children:"Update the import paths to match your project setup."})]})]})]}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" {"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCard,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardContent,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" HoverCardTrigger,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#FF9492"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ADDCFF"},children:' "@/components/ui/hover-card"'})]})]})})}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark-high-contrast",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-high-contrast",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCard"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCardTrigger"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">Hover"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#72F088"},children:"HoverCardContent"}),(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:">"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" The React Framework \u2013 created and maintained by @vercel."})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F0F3F6"},children:""})]})]})})})]})}function g(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(m,{...n})}):m(n)}function s(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return H(_);})(); ;return Component;

Hover Card

Installation

Usage