Popover

package popover

props {
  // Id is the id of the root element. The trigger opens the popover by this id.
  Id       string
  // Align sets the edge of the trigger that the popover lines up with: Center, Start or End.
  Align    Align = Center
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the popover.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div id={p.Id} popover="auto" data-gx-dismiss data-gx-place={p.place()} style={p.style()} class={gx.Cx("z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-hidden", motionClass, alignClass[p.align()], p.Class)} {...p.Attrs}>{p.Children}</div>

package popover

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the text of the description.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<p class={gx.Cx("text-muted-foreground", p.Class)} {...p.Attrs}>{p.Children}</p>

package popover

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the header, usually a title and a description.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div class={gx.Cx("flex flex-col gap-1 text-sm", p.Class)} {...p.Attrs}>{p.Children}</div>

package popover

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the text of the title.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<div class={gx.Cx("font-medium", p.Class)} {...p.Attrs}>{p.Children}</div>

package popover

import "github.com/alternayte/gx/registry/button"

props {
  // Id is the id of the popover that the trigger opens.
  Id       string
  // Variant sets the visual style of the button: button.Default, button.Secondary,
  // button.Destructive, button.Outline, button.Ghost or button.Link.
  Variant  button.Variant = button.Outline
  // Size sets the height and padding of the button: button.Xs, button.Sm, button.Md, button.Lg,
  // or an Icon size for a square button.
  Size     button.Size = button.Md
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the button label.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<button.Button variant={p.variant()} size={p.Size} class={p.Class} attrs={p.attrs()}>{p.Children}</button.Button>

package popover

import "github.com/alternayte/gx"

var PopoverFixtures = gx.Fixtures[PopoverProps]{
	"Content": {Id: "demo-popover", Children: PopoverHeader(PopoverHeaderProps{Children: gx.Frag(
		PopoverTitle(PopoverTitleProps{Children: gx.Text("Dimensions")}),
		PopoverDescription(PopoverDescriptionProps{Children: gx.Text("Set the dimensions for the layer.")}),
	)})},
	"Start": {Id: "demo-popover-start", Align: Start, Children: gx.Text("Place content for the popover here.")},
	"End":   {Id: "demo-popover-end", Align: End, Children: gx.Text("Place content for the popover here.")},
}

package popover

import "github.com/alternayte/gx"

var PopoverDescriptionFixtures = gx.Fixtures[PopoverDescriptionProps]{"Default": {Children: gx.Text("Set the dimensions for the layer.")}}

package popover

import "github.com/alternayte/gx"

var PopoverHeaderFixtures = gx.Fixtures[PopoverHeaderProps]{
	"Default": {Children: gx.Frag(
		PopoverTitle(PopoverTitleProps{Children: gx.Text("Dimensions")}),
		PopoverDescription(PopoverDescriptionProps{Children: gx.Text("Set the dimensions for the layer.")}),
	)},
}

package popover

import "github.com/alternayte/gx"

var PopoverTitleFixtures = gx.Fixtures[PopoverTitleProps]{"Default": {Children: gx.Text("Dimensions")}}

package popover

import (
	"github.com/alternayte/gx"
	"github.com/alternayte/gx/registry/button"
)

var PopoverTriggerFixtures = gx.Fixtures[PopoverTriggerProps]{
	"Default": {Id: "demo-popover", Children: gx.Text("Open popover")},
	"Start":   {Id: "demo-popover-start", Children: gx.Text("Open at the start")},
	"End":     {Id: "demo-popover-end", Variant: button.Secondary, Class: "ml-64", Children: gx.Text("Open at the end")},
}

package popover

import (
	"github.com/alternayte/gx"
	"github.com/alternayte/gx/registry/button"
)

// Align is the edge of the trigger that the popover lines up with.
type Align string

// The alignments of popover.Popover.
const (
	Center Align = "center"
	Start  Align = "start"
	End    Align = "end"
)

// The popover zooms from the edge that touches the trigger. The overlay
// module writes data-side: a popover that flips opens above the trigger.
var alignClass = gx.Enum[Align]{
	Center: "origin-top data-[side=top]:origin-bottom",
	Start:  "origin-top-left data-[side=top]:origin-bottom-left",
	End:    "origin-top-right data-[side=top]:origin-bottom-right",
}

var alignStyle = gx.Enum[Align]{
	Center: "justify-self: anchor-center",
	Start:  "left: anchor(left)",
	End:    "right: anchor(right)",
}

// align returns the alignment of one popover; a zero value is Center.
func (p PopoverProps) align() Align {
	if p.Align == "" {
		return Center
	}
	return p.Align
}

// style anchors the popover below its trigger for a page whose scripts did
// not run. The overlay module then writes the measured place.
func (p PopoverProps) style() gx.Style {
	return gx.Style("position-anchor: --gx-pop-" + p.Id + "; inset: auto; margin: 0.25rem 0 0; top: anchor(bottom); " + alignStyle[p.align()])
}

// place tells the overlay module where the popover goes: below the trigger,
// 4px away, and inside the viewport.
func (p PopoverProps) place() string {
	return "bottom " + string(p.align()) + " 4"
}

// variant returns the button variant of one trigger; a zero value is
// button.Outline.
func (p PopoverTriggerProps) variant() button.Variant {
	if p.Variant == "" {
		return button.Outline
	}
	return p.Variant
}

// attrs wires the trigger to its popover and names it as the anchor.
func (p PopoverTriggerProps) attrs() gx.Attrs {
	return gx.JoinAttrs(gx.Attrs{
		{Key: "popovertarget", Value: p.Id},
		{Key: "popovertargetaction", Value: "toggle"},
		{Key: "style", Value: "anchor-name: --gx-pop-" + p.Id, Kind: gx.AttrStyle},
	}, p.Attrs)
}

// motionClass fades and zooms the popover from 95% and slides it 2 units from
// the trigger, from below when the popover took the top side. Safari 26.0 never ends a display transition on an element
// that CSS anchor positioning places, which leaves a closed popover rendered.
// The @supports test matches every engine but WebKit, so Safari closes the
// popover at once and still animates the enter.
const motionClass = "opacity-0 scale-95 transition-[opacity,scale,translate,overlay,display] not-supports-[font:-apple-system-body]:transition-discrete duration-150 open:opacity-100 open:scale-100 starting:open:opacity-0 starting:open:scale-95 starting:open:-translate-y-2 data-[side=top]:starting:open:translate-y-2 motion-reduce:transition-none"