Popover

1// Base UI base popover — runs on @octanejs/base-ui's Popover.
2//
3// TWO POSITIONING DIFFERENCES FROM THE RADIX BASE, both verified by rendering the primitive and
4// reading the DOM rather than inferred:
5//
6//   1. THE TRANSFORM-ORIGIN CSS VAR IS NAMED DIFFERENTLY. Radix publishes
7//      `--radix-popover-content-transform-origin`; Base UI's Positioner publishes plain
8//      `--transform-origin`. Copying radix's `origin-(--radix-popover-content-transform-origin)`
9//      leaves the utility referencing a variable nothing ever sets, so the popup would scale
10//      from the wrong corner on open — visible only in motion, and invisible to any class
11//      comparison.
12//
13//   2. THERE IS A POSITIONER LAYER. Radix goes Portal > Content; Base UI goes
14//      Portal > Positioner > Popup, and the Positioner owns side/align/offset. `data-side` and
15//      `data-align` land on BOTH the positioner and the popup, so the `data-[side=…]` slide
16//      utilities still resolve on the popup where the radix base put them.
17//
18// NO PopoverAnchor. Radix ships an Anchor part for positioning against something other than the
19// trigger; Base UI's Positioner takes an `anchor` prop instead, so there is no element to render
20// and no slot to emit. Recorded in tests/cross-base.test.ts rather than faked.
21//
22// UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
23// transcribed from upstream's Base UI source.
24// POSITIONING PROPS BELONG TO THE POSITIONER, NOT THE POPUP. Radix has one `Content` element that
25// takes them all; Base UI splits positioning into its own layer, so anything forwarded to `Popup`
26// instead is inert — `side="top"` silently leaves the popup on the default side, and the prop lands
27// on the DOM as an invalid attribute. They are destructured and routed explicitly.
28//
29import { createElement } from 'octane';
30import { Popover as PopoverPrimitive } from '@octanejs/base-ui/popover';
31 
32import { cn } from '@/lib/utils';
33 
34type Props = { className?: string } & Record<string, unknown>;
35 
36export function Popover(props: Record<string, unknown>) @{
37	<PopoverPrimitive.Root data-slot="popover" {...props} />
38}
39 
40export function PopoverTrigger(props: Record<string, unknown>) @{
41	<PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
42}
43 
44export interface BaseUiPositioningProps {
45	/** Forwarded to the Positioner; see the note at the top of this file. */
46	side?: 'top' | 'right' | 'bottom' | 'left';
47	sideOffset?: number;
48// … truncated