{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "type": "registry:ui",
  "title": "Popover",
  "description": "A small panel that comes out of its trigger: the menu's frosted plate rising one nest from the trigger's side on the surface spring, fading out on release without travelling back.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/popover/popover.tsx",
      "type": "registry:ui",
      "target": "components/metalui/popover/popover.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\n\n/* ─────────────────────────────────────────────────────────\n * POPOVER, a small panel that comes out of its trigger, on Base UI Popover\n *\n *    0 ms   the trigger is pressed; the plate appears one nest (6) back toward the trigger,\n *           at 0.97, grown from the trigger's side (transform-origin), transparent\n *   ~0 ms   it rises into place and fades in together on the surface spring (no overshoot)\n *  ~290 ms  near rest; focus is in the plate (the first field, or the plate itself)\n *   close   Esc, click outside, a Close part, or the trigger again: it fades out on the\n *           release spring and does not travel back; focus returns to the trigger\n * Reduce Motion: a crossfade (the surface travel is zero).\n * The plate is the menu's frosted plate; the popover recipe adds padding, width, text and motion.\n * Slots: Popover.Root, Popover.Trigger, Popover.Content, Popover.Title, Popover.Description, Popover.Close.\n * ───────────────────────────────────────────────────────── */\n\nconst POSITIONER = 'mu-popover-positioner z-menu-z';\nconst PLATE = [\n  'mu-popover box-border min-w-popover-min-width max-w-popover-max-width p-popover-pad rounded-popover-radius outline-none',\n  'recipe-menu backdrop-menu-blur reduce-transparency:opaque-frost',\n  'popover-origin transition-popover data-starting-style:popover-away data-ending-style:popover-gone',\n].join(' ');\nconst TITLE = 'mu-popover-title m-0 type-title text-ink';\nconst DESCRIPTION = 'mu-popover-description m-0 mt-popover-gap type-body text-ink2';\nconst BODY = 'mu-popover-body mt-popover-body-gap';\n\nfunction offset() {\n  if (typeof window === 'undefined') return 6;\n  return parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--mu-r-popover-self-offset')) || 6;\n}\n\nexport type PopoverRootProps = BasePopover.Root.Props;\n\nfunction Root(props: PopoverRootProps) {\n  return <BasePopover.Root {...props} />;\n}\n\nexport interface PopoverTriggerProps extends Omit<BasePopover.Trigger.Props, 'render'> {\n  /** The control that opens it (a Button, an icon button). It must accept a ref and props. */\n  children: React.ReactElement;\n}\n\nfunction Trigger({ children, ...props }: PopoverTriggerProps) {\n  return <BasePopover.Trigger render={children} {...props} />;\n}\n\nexport interface PopoverContentProps extends Omit<BasePopover.Popup.Props, 'className'> {\n  side?: 'bottom' | 'top' | 'left' | 'right';\n  align?: 'start' | 'center' | 'end';\n  className?: string;\n}\n\n/** The plate: portalled and placed beside its trigger. */\nconst Content = React.forwardRef<HTMLDivElement, PopoverContentProps>(function PopoverContent({ side = 'bottom', align = 'center', className, ...props }, ref) {\n  return (\n    <BasePopover.Portal>\n      <BasePopover.Positioner className={POSITIONER} side={side} align={align} sideOffset={offset()} collisionPadding={8}>\n        <BasePopover.Popup ref={ref} className={className ? `${PLATE} ${className}` : PLATE} {...props} />\n      </BasePopover.Positioner>\n    </BasePopover.Portal>\n  );\n});\n\nfunction Title({ className, ...props }: BasePopover.Title.Props & { className?: string }) {\n  return <BasePopover.Title className={className ? `${TITLE} ${className}` : TITLE} {...props} />;\n}\n\nfunction Description({ className, ...props }: BasePopover.Description.Props & { className?: string }) {\n  return <BasePopover.Description className={className ? `${DESCRIPTION} ${className}` : DESCRIPTION} {...props} />;\n}\n\n/** The task's own content under the title: fields, a swatch row, actions. */\nfunction Body({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={className ? `${BODY} ${className}` : BODY} {...props} />;\n}\n\nfunction Close(props: BasePopover.Close.Props) {\n  return <BasePopover.Close {...props} />;\n}\n\nexport const Popover = Object.assign(Root, { Root, Trigger, Content, Title, Description, Body, Close });\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/popover.md. SwiftUI: MetalPopover in the MetalUI Swift package."
}