Popover

/** @jsxImportSource hono/jsx */
import type { PropsWithChildren } from "hono/jsx"
import { cn, type ClassValue } from "@/registry/lib/cn"

// Popover — shadcn-htmx, htmx v4 + Tailwind v4.
//
// Uses the native HTML Popover API (popover + popovertarget attributes).
// The platform gives us:
//   - Top-layer rendering           (no z-index race with siblings).
//   - Light dismiss in "auto" mode  (click outside closes it).
//   - ESC closes the popover.
//   - aria-haspopup / aria-expanded auto-managed on the trigger.
//   - Focus restoration to the opener.
//
// shadcn upstream uses Radix Popover; we use the native equivalent.
//
// Refs:
//   repos/mdn/files/en-us/web/api/popover_api/  (overview)
//   repos/mdn/files/en-us/web/html/global_attributes/popover.md
//   repos/mdn/files/en-us/web/html/reference/attributes/popovertarget.md

export type PopoverSide = "top" | "right" | "bottom" | "left"

// Positioning is JS-driven in public/site.js (reads data-side and writes
// inline top/left on `toggle`). CSS Anchor Positioning would replace
// this, but it's Chrome-only at time of writing.

const base =
  "z-50 m-0 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none " +
  // Native [popover] is display:none by default and only revealed when
  // open. We add :popover-open animation via Tailwind.
  "[&:not(:popover-open)]:hidden " +
  // animate-fade-in is keyframed in input.css.
  "[&:popover-open]:animate-[scn-popover-in_120ms_ease-out]"

export function popoverClasses(opts?: { class?: ClassValue }): string {
  return cn(base, opts?.class)
}

type PopoverProps = PropsWithChildren<{
  // Required — used by the trigger via popovertarget.
  id: string
  // "auto" (default): light dismiss + ESC. "manual": only code can toggle.
  // "hint": light-dismissable but does NOT close an open `auto` popover —
  // for tooltip/teaching-UI that should coexist with an open menu. Falls
  // back to manual in non-supporting browsers (progressive enhancement).
  // repos/mdn/files/en-us/web/html/reference/global_attributes/popover/index.md:22-24
  mode?: "auto" | "hint" | "manual"
  // Side hint — used for anchor positioning if the browser supports it.
  side?: PopoverSide
  class?: ClassValue
  // The native popover attribute assigns NO role and NO accessible name to
  // the popover element itself — only an implicit aria relationship on the
  // invoker. Supply these for menu/listbox/labelled-dialog popovers.
  // repos/mdn/files/en-us/web/api/popover_api/using/index.md:79-86
  role?: string
  ariaLabelledby?: string
  ariaLabel?: string
}>

export function Popover(props: PopoverProps) {
  const {
    id,
    mode = "auto",
    side = "bottom",
    class: className,
    role,
    ariaLabelledby,
    ariaLabel,
    children,
  } = props
  return (
    <div
      id={id}
      // Native popover attribute. `popover=""` is equivalent to popover="auto".
      // Cast: "hint" is a valid platform keyword the Hono JSX types don't list yet.
      popover={
        (mode === "manual" ? "manual" : mode === "hint" ? "hint" : "auto") as "auto" | "manual"
      }
      data-slot="popover"
      data-side={side}
      // role / accessible name emitted only when provided.
      role={role}
      aria-labelledby={ariaLabelledby}
      aria-label={ariaLabel}
      class={cn(popoverClasses(), className)}
    >
      {children}
    </div>
  )
}

type PopoverTriggerProps = PropsWithChildren<{
  // ID of the popover this triggers.
  popoverTarget: string
  // What clicking the trigger does. Default "toggle".
  popoverTargetAction?: "show" | "hide" | "toggle"
  class?: ClassValue
  id?: string
}>

export function PopoverTrigger(props: PopoverTriggerProps) {
  const {
    popoverTarget,
    popoverTargetAction = "toggle",
    children,
    class: className,
    id,
  } = props
  // Renders a native <button> carrying the popovertarget attributes. For
  // richer chrome, spread { popovertarget, popovertargetaction } onto a
  // styled <Button> directly instead of using this trigger.
  return (
    <button
      id={id}
      type="button"
      popovertarget={popoverTarget}
      popovertargetaction={popoverTargetAction}
      data-slot="popover-trigger"
      class={cn(className)}
    >
      {children}
    </button>
  )
}

{# Popover macros — shadcn-htmx, htmx v4 + Tailwind v4.
   Native HTML Popover API (popover + popovertarget). Browser provides
   light dismiss, ESC close, top-layer rendering, focus restoration.

   Usage:
     {% from "components/popover.html" import popover_trigger, popover_open, popover_close %}

     {{ popover_trigger("Open", popover_target="my-popover", class_="…btn…") }}

     {% call popover_open(id="my-popover") %}
       <p>Popover body — anything not interactive, like a form, can live here.</p>
     {% endcall %} #}

{% macro popover_trigger(label, popover_target, action="toggle", class_="", id=none) %}
<button {% if id %}id="{{ id }}"{% endif %}
        type="button"
        popovertarget="{{ popover_target }}"
        popovertargetaction="{{ action }}"
        data-slot="popover-trigger"
        class="{{ class_ }}">{{ label }}</button>
{% endmacro %}

{# mode: "auto" (default) | "hint" | "manual".
   hint = light-dismissable but does NOT close an open auto popover (falls
   back to manual in non-supporting browsers).
   repos/mdn/files/en-us/web/html/reference/global_attributes/popover/index.md:22-24
   role / aria_labelledby / aria_label: the native popover attribute assigns
   no role or accessible name to the popover itself — supply for menu/listbox
   popovers. repos/mdn/files/en-us/web/api/popover_api/using/index.md:79-86 #}
{% macro popover_open(id, mode="auto", side="bottom", extra_class="", role=none, aria_labelledby=none, aria_label=none) %}
{%- set sides = {
    "top":    "anchor-popover-top",
    "bottom": "anchor-popover-bottom",
    "left":   "anchor-popover-left",
    "right":  "anchor-popover-right"
} -%}
<div id="{{ id }}"
     popover="{{ 'manual' if mode == 'manual' else 'hint' if mode == 'hint' else 'auto' }}"
     data-slot="popover" data-side="{{ side }}"
     {% if role %}role="{{ role }}"{% endif %}
     {% if aria_labelledby %}aria-labelledby="{{ aria_labelledby }}"{% endif %}
     {% if aria_label %}aria-label="{{ aria_label }}"{% endif %}
     class="z-50 m-0 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none [&:not(:popover-open)]:hidden [&:popover-open]:animate-[scn-popover-in_120ms_ease-out] {{ sides[side] }} {{ extra_class }}">
{% endmacro %}

{% macro popover_close() %}</div>{% endmacro %}

{{/*
  Popover templates — shadcn-htmx, htmx v4 + Tailwind v4.
  Native HTML Popover API.

      type PopoverArgs struct {
          // Mode: "auto" (default) | "hint" | "manual". hint = light-dismissable
          // but does NOT close an open auto popover (falls back to manual in
          // non-supporting browsers).
          // mdn .../global_attributes/popover/index.md:22-24
          ID, Mode, Side string
          // Role / AriaLabelledby / AriaLabel: the native popover attribute
          // assigns no role or accessible name to the popover itself — supply
          // for menu/listbox popovers.
          // mdn .../api/popover_api/using/index.md:79-86
          Role, AriaLabelledby, AriaLabel string
          Body                            template.HTML
      }
      type PopoverTriggerArgs struct {
          Label, PopoverTarget, Action, Class, ID string
      }
*/}}

{{define "popover"}}
{{- $mode := or .Mode "auto" -}}
{{- $side := or .Side "bottom" -}}
{{- $sides := dict "top" "anchor-popover-top" "bottom" "anchor-popover-bottom" "left" "anchor-popover-left" "right" "anchor-popover-right" -}}
<div id="{{.ID}}" popover="{{$mode}}" data-slot="popover" data-side="{{$side}}"
     {{if .Role}}role="{{.Role}}"{{end}}
     {{if .AriaLabelledby}}aria-labelledby="{{.AriaLabelledby}}"{{end}}
     {{if .AriaLabel}}aria-label="{{.AriaLabel}}"{{end}}
     class="z-50 m-0 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none [&:not(:popover-open)]:hidden [&:popover-open]:animate-[scn-popover-in_120ms_ease-out] {{index $sides $side}}">
  {{.Body}}
</div>
{{end}}

{{define "popover_trigger"}}
<button {{if .ID}}id="{{.ID}}"{{end}} type="button"
        popovertarget="{{.PopoverTarget}}"
        popovertargetaction="{{or .Action "toggle"}}"
        data-slot="popover-trigger"
        class="{{.Class}}">{{.Label}}</button>
{{end}}

defmodule ShadcnHtmx.Components.Popover do
  @moduledoc """
  Popover — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.

  Native HTML Popover API. The browser handles light dismiss, ESC close,
  top-layer rendering, focus restoration.

  ## Examples

      <.popover_trigger popover_target="my-popover" class="…btn…">
        Open
      </.popover_trigger>

      <.popover id="my-popover">
        <p>Body content.</p>
      </.popover>
  """

  use Phoenix.Component

  @sides %{
    "top" => "anchor-popover-top",
    "bottom" => "anchor-popover-bottom",
    "left" => "anchor-popover-left",
    "right" => "anchor-popover-right"
  }

  attr :id, :string, required: true
  # "hint" = light-dismissable but does NOT close an open auto popover (falls
  # back to manual in non-supporting browsers).
  # mdn .../global_attributes/popover/index.md:22-24
  attr :mode, :string, default: "auto", values: ~w(auto hint manual)
  attr :side, :string, default: "bottom", values: ~w(top right bottom left)
  attr :class, :string, default: nil
  # The native popover attribute assigns no role or accessible name to the
  # popover element itself — supply these for menu/listbox popovers.
  # mdn .../api/popover_api/using/index.md:79-86
  attr :role, :string, default: nil
  attr :aria_labelledby, :string, default: nil
  attr :aria_label, :string, default: nil
  slot :inner_block, required: true

  def popover(assigns) do
    assigns = assign(assigns, :side_class, Map.fetch!(@sides, assigns.side))

    ~H"""
    <div
      id={@id}
      popover={@mode}
      data-slot="popover"
      data-side={@side}
      role={@role}
      aria-labelledby={@aria_labelledby}
      aria-label={@aria_label}
      class={[
        "z-50 m-0 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
        "[&:not(:popover-open)]:hidden",
        "[&:popover-open]:animate-[scn-popover-in_120ms_ease-out]",
        @side_class,
        @class
      ]}
    >
      {render_slot(@inner_block)}
    </div>
    """
  end

  attr :popover_target, :string, required: true
  attr :action, :string, default: "toggle", values: ~w(show hide toggle)
  attr :class, :string, default: nil
  attr :rest, :global
  slot :inner_block, required: true

  def popover_trigger(assigns) do
    ~H"""
    <button
      type="button"
      popovertarget={@popover_target}
      popovertargetaction={@action}
      data-slot="popover-trigger"
      class={@class}
      {@rest}
    >
      {render_slot(@inner_block)}
    </button>
    """
  end
end

<!--
  shadcn-htmx — raw HTML popover snippet.

  Uses the native HTML Popover API — no JS required. The platform handles
  light dismiss (click outside), ESC close, top-layer rendering, and
  focus restoration when closed.

  The popover attribute takes three states:
    popover / popover="auto"  — light dismiss + ESC (shown below).
    popover="hint"            — light-dismissable but does NOT close an open
                                auto popover; for tooltip/teaching UI. Falls
                                back to manual in non-supporting browsers.
    popover="manual"          — only code can show/hide it.
    mdn .../global_attributes/popover/index.md:22-24

  The popover element gets NO role or accessible name from the platform.
  For menu/listbox/labelled popovers, add role plus an accessible name, e.g.:
    <div id="menu-popover" popover role="menu" aria-label="Actions">…</div>
    mdn .../api/popover_api/using/index.md:79-86
-->

<button type="button" popovertarget="my-popover" popovertargetaction="toggle"
  class="inline-flex h-9 items-center rounded-md border bg-background px-4 text-sm font-medium shadow-xs hover:bg-accent">
  Open popover
</button>

<div id="my-popover" popover data-slot="popover" data-side="bottom"
  class="z-50 m-0 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none [&:not(:popover-open)]:hidden [&:popover-open]:animate-[scn-popover-in_120ms_ease-out] anchor-popover-bottom">
  <h4 class="text-sm font-semibold">Popover content</h4>
  <p class="mt-1 text-sm text-muted-foreground">
    Click outside or press ESC to close. The browser handles it all.
  </p>
</div>