{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "preview-card",
  "title": "Preview Card",
  "description": "An accessible popup anchored to a button.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils",
    "@lumi-ui/arrow-svg"
  ],
  "files": [
    {
      "path": "registry/ui/preview-card.tsx",
      "content": "\"use client\";\n\nimport {\n  PreviewCard as BasePreviewCard,\n  type PreviewCardTriggerProps,\n} from \"@base-ui/react/preview-card\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { ArrowSvg } from \"@/registry/ui/arrow-svg\";\n\nfunction PreviewCard<Payload>(props: BasePreviewCard.Root.Props<Payload>) {\n  return <BasePreviewCard.Root data-slot=\"preview-card\" {...props} />;\n}\n\nfunction PreviewCardTrigger<Payload>({\n  className,\n  ...props\n}: PreviewCardTriggerProps<Payload>) {\n  return (\n    <BasePreviewCard.Trigger\n      className={className}\n      data-slot=\"preview-card-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction PreviewPortal({ className, ...props }: BasePreviewCard.Portal.Props) {\n  return (\n    <BasePreviewCard.Portal\n      className={className}\n      data-slot=\"preview-card-portal\"\n      {...props}\n    />\n  );\n}\n\nfunction PreviewBackdrop({\n  className,\n  ...props\n}: BasePreviewCard.Backdrop.Props) {\n  return (\n    <BasePreviewCard.Backdrop\n      className={className}\n      data-slot=\"preview-card-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction PreviewPositioner({\n  className,\n  ...props\n}: BasePreviewCard.Positioner.Props) {\n  return (\n    <BasePreviewCard.Positioner\n      className={className}\n      data-slot=\"preview-card-positioner\"\n      {...props}\n    />\n  );\n}\n\nfunction PreviewCardPopup({\n  className,\n  ...props\n}: BasePreviewCard.Popup.Props) {\n  return (\n    <BasePreviewCard.Popup\n      className={className}\n      data-slot=\"preview-card-popup\"\n      {...props}\n    />\n  );\n}\n\nfunction PreviewCardArrow({\n  className,\n  ...props\n}: BasePreviewCard.Arrow.Props) {\n  return (\n    <BasePreviewCard.Arrow\n      className={cn(\n        \"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\",\n        className,\n      )}\n      data-slot=\"preview-card-arrow\"\n      {...props}\n    >\n      <ArrowSvg />\n    </BasePreviewCard.Arrow>\n  );\n}\n\nfunction PreviewCardContent({\n  children,\n  className,\n  align = \"center\",\n  side = \"bottom\",\n  alignOffset = 6,\n  sideOffset = 4,\n  showArrow = false,\n  ...props\n}: BasePreviewCard.Popup.Props & {\n  children: React.ReactNode;\n  align?: BasePreviewCard.Positioner.Props[\"align\"];\n  alignOffset?: BasePreviewCard.Positioner.Props[\"alignOffset\"];\n  side?: BasePreviewCard.Positioner.Props[\"side\"];\n  sideOffset?: BasePreviewCard.Positioner.Props[\"sideOffset\"];\n  showArrow?: boolean;\n}) {\n  return (\n    <BasePreviewCard.Portal>\n      <BasePreviewCard.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        data-slot=\"preview-card-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <BasePreviewCard.Popup\n          className={cn(\n            \"bg-popover text-popover-foreground w-64 rounded-md p-4 shadow-md\",\n            \"overlay-outline animate-popup\",\n            className,\n          )}\n          data-slot=\"preview-card-content\"\n          {...props}\n        >\n          {showArrow && <PreviewCardArrow />}\n          {children}\n        </BasePreviewCard.Popup>\n      </BasePreviewCard.Positioner>\n    </BasePreviewCard.Portal>\n  );\n}\n\nconst createPreviewCardHandle = BasePreviewCard.createHandle;\n\nexport {\n  PreviewCard,\n  PreviewCardTrigger,\n  PreviewPortal,\n  PreviewBackdrop,\n  PreviewPositioner,\n  PreviewCardPopup,\n  PreviewCardArrow,\n  createPreviewCardHandle,\n  // Composite component\n  PreviewCardContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}