{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card",
  "dependencies": [
    "@data-slot/hover-card"
  ],
  "files": [
    {
      "path": "ui/hover-card/HoverCard.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/hover-card/HoverCard.astro directly.\n/**\n * @component HoverCard\n * @title Hover Card\n * @description For sighted users to preview content available behind a link.\n *\n * @preview\n *\n * <HoverCard delay={10} closeDelay={100}>\n *   <HoverCardTrigger asChild>\n *     <Button variant=\"link\">@data-slot</Button>\n *   </HoverCardTrigger>\n *   <HoverCardContent class=\"flex w-64 flex-col gap-0.5\">\n *     <div class=\"font-semibold\">@data-slot</div>\n *     <div>Headless UI components for vanilla JavaScript.</div>\n *     <div class=\"text-muted-foreground mt-1 text-xs\">\n *       Created by Bejamas in 2026\n *     </div>\n *   </HoverCardContent>\n * </HoverCard>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import {\n *   HoverCard,\n *   HoverCardContent,\n *   HoverCardTrigger,\n * } from '@bejamas/ui/components/hover-card';\n * import { Button } from '@bejamas/ui/components/button';\n * ---\n *\n * <HoverCard>\n *   <HoverCardTrigger asChild>\n *     <Button variant=\"link\">Hover Here</Button>\n *   </HoverCardTrigger>\n *   <HoverCardContent>\n *     <div class=\"font-semibold\">@nextjs</div>\n *     <div>The React Framework - created and maintained by @vercel.</div>\n *   </HoverCardContent>\n * </HoverCard>\n * ```\n *\n * @api\n *\n * ### Events\n *\n * The hover card emits custom events that you can listen to:\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `hover-card:change` | `{ open: boolean, reason: string, trigger: HTMLElement, content: HTMLElement }` | Fired when visibility changes |\n *\n * ```astro nocollapse console\n * <HoverCard id=\"my-hover-card\">\n *   <HoverCardTrigger asChild>\n *     <Button variant=\"outline\">Hover me</Button>\n *   </HoverCardTrigger>\n *   <HoverCardContent>\n *     Hover card content\n *   </HoverCardContent>\n * </HoverCard>\n * ```\n *\n * ```js nocollapse\n *   const hoverCard = document.getElementById('my-hover-card');\n *\n *   hoverCard.addEventListener('hover-card:change', (e) => {\n *     console.log('Is open:', e.detail.open);\n *     console.log('Reason:', e.detail.reason);\n *   });\n * ```\n *\n * ### Programmatic Control\n *\n * You can control the hover card programmatically by dispatching a `hover-card:set` event:\n *\n * ```js nocollapse\n * const hoverCard = document.getElementById('my-hover-card');\n *\n * // Open the hover card\n * hoverCard.dispatchEvent(new CustomEvent('hover-card:set', {\n *   detail: { open: true }\n * }));\n *\n * // Close the hover card\n * hoverCard.dispatchEvent(new CustomEvent('hover-card:set', {\n *   detail: { open: false }\n * }));\n * ```\n *\n * ### Data Attributes\n *\n * The hover card sets these data attributes that you can use for styling or querying state:\n *\n * | Attribute | Element | Description |\n * |-----------|---------|-------------|\n * | `data-state` | hover-card, hover-card-content | Current state (`open` or `closed`) |\n * | `data-open` | hover-card, hover-card-content | Present while open |\n * | `data-closed` | hover-card, hover-card-content | Present while closed |\n * | `data-side` | hover-card-content | Position relative to trigger (`top`, `right`, `bottom`, or `left`) |\n * | `data-align` | hover-card-content | Alignment (`start`, `center`, or `end`) |\n * | `data-side-offset` | hover-card-content | Distance from trigger in pixels (default `4`) |\n * | `data-align-offset` | hover-card-content | Alignment-axis offset in pixels (default `0`) |\n *\n * @examples\n *\n * ### With Avatar\n *\n * <HoverCard>\n *   <HoverCardTrigger asChild>\n *     <Button variant=\"link\">@thom</Button>\n *   </HoverCardTrigger>\n *   <HoverCardContent class=\"flex w-72 gap-3 p-3\">\n *     <Avatar class=\"size-10 rounded-full\">\n *       <AvatarImage>\n *         <img src=\"https://github.com/thomkrupa.png\" alt=\"@thom\" />\n *       </AvatarImage>\n *       <AvatarFallback>TK</AvatarFallback>\n *     </Avatar>\n *     <div class=\"space-y-1\">\n *       <div class=\"text-sm font-semibold leading-none\">@thom</div>\n *       <p class=\"text-muted-foreground text-sm\">\n *         Building design systems and UI tooling.\n *       </p>\n *     </div>\n *   </HoverCardContent>\n * </HoverCard>\n *\n * ### Different sides\n *\n * <div class=\"flex flex-wrap items-center gap-3 py-8\">\n *   <HoverCard delay={10} closeDelay={80} skipDelayDuration={0}>\n *     <HoverCardTrigger asChild>\n *       <Button variant=\"outline\">Left</Button>\n *     </HoverCardTrigger>\n *     <HoverCardContent side=\"left\">Appears on left.</HoverCardContent>\n *   </HoverCard>\n *   <HoverCard delay={10} closeDelay={80} skipDelayDuration={0}>\n *     <HoverCardTrigger asChild>\n *       <Button variant=\"outline\">Top</Button>\n *     </HoverCardTrigger>\n *     <HoverCardContent side=\"top\">Appears on top.</HoverCardContent>\n *   </HoverCard>\n *   <HoverCard delay={10} closeDelay={80} skipDelayDuration={0}>\n *     <HoverCardTrigger asChild>\n *       <Button variant=\"outline\">Bottom</Button>\n *     </HoverCardTrigger>\n *     <HoverCardContent side=\"bottom\">Appears on bottom.</HoverCardContent>\n *   </HoverCard>\n *   <HoverCard delay={10} closeDelay={80} skipDelayDuration={0}>\n *     <HoverCardTrigger asChild>\n *       <Button variant=\"outline\">Right</Button>\n *     </HoverCardTrigger>\n *     <HoverCardContent side=\"right\">Appears on right.</HoverCardContent>\n *   </HoverCard>\n * </div>\n *\n * ### Positioning options\n *\n * Configure placement options on `HoverCardContent`:\n *\n * <HoverCard>\n *   <HoverCardTrigger asChild>\n *     <Button variant=\"outline\">Custom positioning</Button>\n *   </HoverCardTrigger>\n *   <HoverCardContent\n *     side=\"top\"\n *     sideOffset={8}\n *     align=\"start\"\n *   >\n *     Uses content-level positioning options.\n *   </HoverCardContent>\n * </HoverCard>\n *\n * ### Custom timing\n *\n * <HoverCard delay={600} closeDelay={200} skipDelayDuration={300}>\n *   <HoverCardTrigger asChild>\n *     <Button variant=\"outline\">Hover with delay</Button>\n *   </HoverCardTrigger>\n *   <HoverCardContent>\n *     Opens after 600ms, closes after 200ms.\n *   </HoverCardContent>\n * </HoverCard>\n */\n\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n  defaultOpen?: boolean;\n  delay?: number;\n  skipDelayDuration?: number;\n  closeDelay?: number;\n  closeOnClickOutside?: boolean;\n  closeOnEscape?: boolean;\n}\n\nconst {\n  class: className = \"\",\n  defaultOpen = false,\n  delay = 700,\n  skipDelayDuration = 300,\n  closeDelay = 300,\n  closeOnClickOutside = true,\n  closeOnEscape = true,\n  ...rest\n} = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"hover-card\"\n  data-default-open={String(defaultOpen)}\n  data-delay={delay}\n  data-skip-delay-duration={skipDelayDuration}\n  data-close-delay={closeDelay}\n  data-close-on-click-outside={String(closeOnClickOutside)}\n  data-close-on-escape={String(closeOnEscape)}\n  class={cn(\"\", \"inline-block\", className)}\n>\n  <slot />\n</div>\n\n<script>\n  import { createHoverCard } from \"@data-slot/hover-card\";\n\n  document.querySelectorAll('[data-slot=\"hover-card\"]').forEach((el) => {\n    createHoverCard(el);\n  });\n</script>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/hover-card/HoverCardContent.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/hover-card/HoverCardContent.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  sideOffset?: number;\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  class?: string;\n}\n\nconst {\n  class: className = \"\",\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  ...rest\n} = Astro.props as Props;\n\nconst contentVariants = cva([\n  // visibility\n  \"duration-150 ease data-instant:duration-0 transition-discrete outline-hidden\",\n  // animations\n  \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n  \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n  \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n  \"data-[instant]:transition-none! data-[instant]:animate-none!\",\n  \"data-instant:data-[state=closed]:animate-none! data-instant:data-[state=closed]:fade-out-0! data-instant:data-[state=closed]:opacity-100! data-instant:data-[state=closed]:scale-100! data-instant:data-[state=closed]:translate-x-0! data-instant:data-[state=closed]:translate-y-0!\",\n  // styles\n  \"ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1\",\n  // origin from positioner\n  \"origin-(--transform-origin)\",\n]);\n---\n\n<div data-slot=\"hover-card-portal\" class=\"\">\n  <div data-slot=\"hover-card-positioner\" class=\"isolate z-50\">\n    <div\n      {...rest}\n      hidden\n      data-slot=\"hover-card-content\"\n      data-side={side}\n      data-side-offset={sideOffset}\n      data-align={align}\n      data-align-offset={alignOffset}\n      class={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-4 text-sm shadow-md ring-1 duration-100\", contentVariants(), className)}\n    >\n      <slot />\n    </div>\n  </div>\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/hover-card/HoverCardTrigger.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/hover-card/HoverCardTrigger.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"button\"> {\n  class?: string;\n  /** Radix-like: render wrapper so the child can be the interactive element */\n  asChild?: boolean;\n}\n\nconst {\n  class: className = \"\",\n  asChild = false,\n  type = \"button\",\n  ...rest\n} = Astro.props as Props;\n---\n\n{\n  asChild ? (\n    <div\n      data-slot=\"hover-card-trigger\"\n      data-as-child\n      class={cn(\"\", \"inline-flex items-center\", className)}\n    >\n      <slot />\n    </div>\n  ) : (\n    <button\n      {...rest}\n      type={type}\n      data-slot=\"hover-card-trigger\"\n      class={cn(\"\", \"inline-flex items-center\", className)}\n    >\n      <slot />\n    </button>\n  )\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/hover-card/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/hover-card/index.ts directly.\nexport { default as HoverCard } from \"./HoverCard.astro\";\nexport { default as HoverCardTrigger } from \"./HoverCardTrigger.astro\";\nexport { default as HoverCardContent } from \"./HoverCardContent.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}