{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "type": "registry:item",
  "title": "Popover",
  "description": "A floating content container.",
  "files": [
    {
      "path": "registry/brook/ui/popover/popover.tsx",
      "content": "\"use client\";\n\nimport { Popover } from \"@base-ui/react/popover\";\nimport { cn } from \"@/lib/utils\";\nimport styles from \"./popover.module.css\";\n\nconst createPopoverHandle = Popover.createHandle;\n\nfunction PopoverRoot({ ...props }: Popover.Root.Props) {\n  return <Popover.Root {...props} />;\n}\n\nfunction PopoverTrigger({ className, ...props }: Popover.Trigger.Props) {\n  return (\n    <Popover.Trigger className={cn(styles.trigger, className)} data-slot=\"popover-trigger\" nativeButton {...props} />\n  );\n}\n\nconst PopoverPortal = Popover.Portal;\n\nfunction PopoverBackdrop({ className, ...props }: Popover.Backdrop.Props) {\n  return <Popover.Backdrop className={cn(styles.backdrop, className)} data-slot=\"popover-backdrop\" {...props} />;\n}\n\nfunction PopoverPositioner({ className, ...props }: Popover.Positioner.Props) {\n  return <Popover.Positioner className={cn(styles.positioner, className)} data-slot=\"popover-positioner\" {...props} />;\n}\n\nfunction PopoverPopup({\n  children,\n  className,\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 8,\n  alignOffset = 0,\n  arrow = true,\n  ...props\n}: Popover.Popup.Props & {\n  side?: Popover.Positioner.Props[\"side\"];\n  align?: Popover.Positioner.Props[\"align\"];\n  sideOffset?: Popover.Positioner.Props[\"sideOffset\"];\n  alignOffset?: Popover.Positioner.Props[\"alignOffset\"];\n  arrow?: boolean;\n}) {\n  return (\n    <Popover.Portal>\n      <Popover.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className={styles.positioner}\n        data-slot=\"popover-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <Popover.Popup className={cn(styles.popup, className)} data-slot=\"popover-popup\" {...props}>\n          {arrow && (\n            <Popover.Arrow className={styles.arrow}>\n              <ArrowSvg />\n            </Popover.Arrow>\n          )}\n          <Popover.Viewport className={styles.viewport} data-slot=\"popover-viewport\">\n            {children}\n          </Popover.Viewport>\n        </Popover.Popup>\n      </Popover.Positioner>\n    </Popover.Portal>\n  );\n}\n\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        fill=\"var(--popover)\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        fill=\"var(--border)\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        fill=\"var(--popover)\"\n      />\n    </svg>\n  );\n}\n\nfunction PopoverArrow({ className, ...props }: Popover.Arrow.Props) {\n  return <Popover.Arrow className={cn(styles.arrow, className)} data-slot=\"popover-arrow\" {...props} />;\n}\n\nfunction PopoverTitle({ className, ...props }: Popover.Title.Props) {\n  return <Popover.Title className={cn(styles.title, className)} data-slot=\"popover-title\" {...props} />;\n}\n\nfunction PopoverDescription({ className, ...props }: Popover.Description.Props) {\n  return (\n    <Popover.Description className={cn(styles.description, className)} data-slot=\"popover-description\" {...props} />\n  );\n}\n\nfunction PopoverClose({ className, ...props }: Popover.Close.Props) {\n  return <Popover.Close className={cn(styles.close, className)} data-slot=\"popover-close\" {...props} />;\n}\n\nfunction PopoverViewport({ className, ...props }: Popover.Viewport.Props) {\n  return <Popover.Viewport className={cn(styles.viewport, className)} data-slot=\"popover-viewport\" {...props} />;\n}\n\nfunction PopoverContent({ className, style, ...props }: Popover.Popup.Props) {\n  return (\n    <PopoverPortal>\n      <PopoverPositioner sideOffset={8}>\n        <Popover.Popup className={cn(styles.popup, className)} data-slot=\"popover-popup\" style={style} {...props} />\n      </PopoverPositioner>\n    </PopoverPortal>\n  );\n}\n\nexport {\n  PopoverRoot as Popover,\n  PopoverArrow,\n  PopoverBackdrop,\n  PopoverClose,\n  PopoverContent,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverTitle,\n  PopoverTrigger,\n  PopoverViewport,\n  createPopoverHandle,\n};\n",
      "type": "registry:file",
      "target": "~/components/ui/popover/popover.tsx"
    },
    {
      "path": "registry/brook/ui/popover/popover.module.css",
      "content": ".trigger {\n  &[data-popup-open],\n  &[data-popup-open]:hover {\n    background-color: var(--accent);\n    color: var(--accent-foreground);\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--ring);\n    outline-offset: -1px;\n  }\n\n  /* Don't scale the trigger on press. The rendered Button sets data-slot=\"button\", so we\n     match on [data-slot] presence (not its value) to keep this at 0,4,0 specificity — beating\n     the button variant's active/pressed scale rule regardless of stylesheet source order. */\n  &[data-slot]:active:not([data-disabled]),\n  &[data-slot][data-pressed]:not([data-disabled]) {\n    transform: none;\n  }\n}\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  background-color: oklch(0 0 0 / 0.1);\n  z-index: 998;\n}\n\n.positioner {\n  z-index: 50;\n  width: var(--positioner-width);\n  height: var(--positioner-height);\n  max-width: var(--available-width);\n  transition-property: top, left, right, bottom, transform;\n  transition-duration: 350ms;\n  transition-timing-function: var(--ease-out-expo);\n\n  &[data-instant] {\n    transition: none;\n  }\n}\n\n.popup {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  width: var(--popup-width, auto);\n  height: var(--popup-height, auto);\n  border-radius: var(--radius);\n  border: none;\n  background-color: var(--popover);\n  background-clip: padding-box;\n  color: var(--popover-foreground);\n  transform-origin: var(--transform-origin);\n  will-change: width, height, transform, opacity;\n  box-shadow:\n    0 0 0 0.5px oklch(from var(--border) l c h / 0.8),\n    var(--shadow-lg);\n  transition:\n    width 350ms var(--ease-out-expo),\n    height 350ms var(--ease-out-expo),\n    transform 350ms var(--ease-out-expo),\n    opacity 350ms var(--ease-out-expo);\n\n  &:has([data-transitioning]) {\n    transition-property: transform, opacity;\n  }\n\n  &[data-instant] {\n    transition: none;\n  }\n\n  &::before {\n    content: \"\";\n    pointer-events: none;\n    position: absolute;\n    inset: 0;\n    border-radius: calc(var(--radius) - 1px);\n    box-shadow: 0 1px oklch(from var(--foreground) l c h / 4%);\n  }\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  &:focus-visible {\n    outline: 1px solid var(--ring);\n    outline-offset: 1px;\n  }\n\n  @media (max-width: 640px) {\n    max-width: calc(100vw - 2rem);\n    margin: 1rem;\n  }\n}\n\n.viewport {\n  --viewport-inline-padding: 1rem;\n\n  position: relative;\n  overflow: clip;\n  width: 100%;\n  height: 100%;\n  padding: 1rem var(--viewport-inline-padding);\n  outline: none;\n\n  & [data-current],\n  & [data-previous] {\n    width: calc(var(--popup-width) - 2 * var(--viewport-inline-padding));\n    transform: translateX(0);\n    opacity: 1;\n    transition:\n      transform 350ms var(--ease-out-expo),\n      opacity 175ms var(--ease-out-expo);\n  }\n\n  &[data-activation-direction~=\"left\"] [data-previous][data-ending-style] {\n    transform: translateX(50%);\n    opacity: 0;\n  }\n\n  &[data-activation-direction~=\"left\"] [data-current][data-starting-style] {\n    transform: translateX(-50%);\n    opacity: 0;\n  }\n\n  &[data-activation-direction~=\"right\"] [data-previous][data-ending-style] {\n    transform: translateX(-50%);\n    opacity: 0;\n  }\n\n  &[data-activation-direction~=\"right\"] [data-current][data-starting-style] {\n    transform: translateX(50%);\n    opacity: 0;\n  }\n}\n\n.arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &[data-side=\"top\"] {\n    bottom: -8px;\n    rotate: 180deg;\n  }\n\n  &[data-side=\"bottom\"] {\n    top: -8px;\n    rotate: 0deg;\n  }\n\n  &[data-side=\"left\"] {\n    right: -13px;\n    rotate: 90deg;\n  }\n\n  &[data-side=\"right\"] {\n    left: -13px;\n    rotate: -90deg;\n  }\n\n  & svg {\n    fill: var(--border);\n    stroke-width: 1px;\n  }\n}\n\n.arrowAnimated {\n  transition: left 350ms var(--ease-out-expo);\n}\n\n.title {\n  margin: 0;\n  font-size: 1.125rem;\n  line-height: 1;\n  font-weight: 600;\n  color: var(--popover-foreground);\n}\n\n.description {\n  margin: 0;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  color: var(--muted-foreground);\n}\n\n.close {\n  all: unset;\n  box-sizing: border-box;\n  position: absolute;\n  top: 0.25rem;\n  right: 0.25rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: 0;\n  border-radius: var(--radius);\n  cursor: pointer;\n  color: var(--muted-foreground);\n  transition:\n    background-color 150ms ease,\n    color 150ms ease;\n\n  &:hover {\n    background-color: var(--muted);\n    color: var(--foreground);\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--ring);\n    outline-offset: 2px;\n  }\n\n  & svg {\n    width: 1rem;\n    height: 1rem;\n  }\n}\n\n.actions {\n  display: flex;\n  justify-content: end;\n  gap: 1rem;\n  margin-top: 1rem;\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/popover/popover.module.css"
    }
  ]
}