{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "context-card",
  "title": "ContextCard",
  "description": "A preview on hover or keyboard focus. Focus never moves into it.",
  "dependencies": [
    "@radix-ui/react-popover@^1.2.0"
  ],
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json",
    "https://creance.pages.dev/r/menu.json"
  ],
  "files": [
    {
      "path": "context-card/ContextCard.css",
      "content": ".cr-context-card {\n  z-index: 50;\n  box-sizing: border-box;\n  display: grid;\n  gap: var(--cr-space-3);\n  width: 320px;\n  max-width: calc(100vw - 2 * var(--cr-space-4));\n  padding: 18px;\n  border-radius: var(--cr-radius-lg);\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n  font-size: var(--cr-font-size-md);\n  animation: cr-menu-in var(--cr-motion-duration-fast) var(--cr-motion-easing-standard);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .cr-context-card { animation: none; }\n}\n",
      "type": "registry:file",
      "target": "@components/creance/context-card/ContextCard.css"
    },
    {
      "path": "context-card/ContextCard.tsx",
      "content": "'use client';\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { useEffect, useRef, useState, type ReactElement, type ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport '@/components/creance/menu/Menu.css';\nimport './ContextCard.css';\n\nexport interface ContextCardProps {\n  /** One focusable element, such as a link to the agent. */\n  children: ReactElement;\n  /** A preview. Supplementary: everything here must also be reachable by following the trigger. */\n  content: ReactNode;\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  /** Milliseconds of hover or focus before it shows. Default 400. */\n  delay?: number;\n  className?: string;\n}\n\n/**\n * A preview card that appears on hover or keyboard focus and stays while the pointer is over it.\n * Escape dismisses it. Focus never moves into it, so it never traps anyone.\n */\nexport function ContextCard({ children, content, side = 'bottom', delay = 400, className }: ContextCardProps) {\n  const [open, setOpen] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const show = () => {\n    clearTimeout(timer.current);\n    timer.current = setTimeout(() => setOpen(true), delay);\n  };\n  const hide = () => {\n    clearTimeout(timer.current);\n    timer.current = setTimeout(() => setOpen(false), 120);\n  };\n  useEffect(() => () => clearTimeout(timer.current), []);\n\n  return (\n    <RadixPopover.Root open={open} onOpenChange={setOpen}>\n      {/* An anchor, not a trigger: activating the element does what it always does (follow the link). */}\n      <RadixPopover.Anchor asChild onPointerEnter={show} onPointerLeave={hide} onFocus={show} onBlur={hide}>\n        {children}\n      </RadixPopover.Anchor>\n      <RadixPopover.Portal>\n        <RadixPopover.Content\n          className={cx('cr-context-card cr-popover', className)}\n          side={side}\n          sideOffset={8}\n          onOpenAutoFocus={(e) => e.preventDefault()}\n          onCloseAutoFocus={(e) => e.preventDefault()}\n          onPointerEnter={() => clearTimeout(timer.current)}\n          onPointerLeave={hide}\n        >\n          {content}\n        </RadixPopover.Content>\n      </RadixPopover.Portal>\n    </RadixPopover.Root>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/context-card/ContextCard.tsx"
    }
  ],
  "categories": [
    "molecule",
    "overlays"
  ],
  "type": "registry:ui"
}