Collapsible

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

// Collapsible — shadcn-htmx, htmx v4 + Tailwind v4.
//
// shadcn upstream uses Radix Collapsible (a CollapsibleTrigger button + a
// CollapsibleContent region wired together with aria-expanded / aria-controls
// and JS state). We use the native HTML disclosure widget instead:
//   <details><summary>Trigger</summary>...content...</details>
// so the platform gives us, with zero JS:
//   - Click / Space / Enter toggles open (browser default on <summary>).
//   - <summary> is implicitly role="button", focusable, with its text as the
//     accessible name; the browser sets aria-expanded to mirror `open`.
//   - The content is the accessible description of the summary.
//
// This is the WAI-ARIA Disclosure (Show/Hide) pattern: a single button that
// shows/hides one section of content. Distinct from Accordion — Collapsible
// is a standalone, single show/hide, NOT a group, so there is no `name`
// attribute and no exclusive grouping. No public/site.js hook is required:
// the entire keyboard contract (Enter / Space) is native to <summary>.
//
// Refs:
//   repos/aria-practices/content/patterns/disclosure/disclosure-pattern.html
//     (Keyboard: Enter / Space toggle; role=button; aria-expanded true/false)
//   repos/mdn/files/en-us/web/html/reference/elements/details/index.md
//     (`open` boolean; implicit ARIA role=group; toggle event)
//   repos/mdn/files/en-us/web/html/reference/elements/summary/index.md
//     (click/Space toggles parent <details>; display:list-item marker)

type CollapsibleProps = PropsWithChildren<{
  // Pre-open the disclosure on initial render.
  open?: boolean
  disabled?: boolean
  class?: ClassValue
}>

export function Collapsible(props: CollapsibleProps) {
  const { open, disabled, class: className, children, ...rest } = props
  return (
    <details
      data-slot="collapsible"
      data-disabled={disabled ? "true" : undefined}
      open={open}
      class={cn(
        "w-full",
        disabled && "pointer-events-none opacity-50",
        className,
      )}
      {...rest}
    >
      {children}
    </details>
  )
}

type CollapsibleTriggerProps = PropsWithChildren<{ class?: ClassValue }>

export function CollapsibleTrigger(props: CollapsibleTriggerProps) {
  const { class: className, children, ...rest } = props
  return (
    <summary
      data-slot="collapsible-trigger"
      class={cn(
        "flex cursor-pointer items-center justify-between gap-4 rounded-md py-2 text-left text-sm font-medium transition-all outline-none select-none marker:hidden " +
          "hover:underline " +
          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " +
          "list-none [&::-webkit-details-marker]:hidden " +
          // Rotate the chevron when the parent <details> is open.
          "[details[open]>&_[data-slot=collapsible-chevron]]:rotate-180",
        className,
      )}
      {...rest}
    >
      {children}
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        data-slot="collapsible-chevron"
        class="pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200"
        aria-hidden="true"
      >
        <polyline points="6 9 12 15 18 9" />
      </svg>
    </summary>
  )
}

type CollapsibleContentProps = PropsWithChildren<{ class?: ClassValue }>

export function CollapsibleContent(props: CollapsibleContentProps) {
  const { class: className, children, ...rest } = props
  return (
    <div
      data-slot="collapsible-content"
      class={cn("overflow-hidden pt-2 pb-1 text-sm", className)}
      {...rest}
    >
      {children}
    </div>
  )
}

{# Collapsible macros — shadcn-htmx, htmx v4 + Tailwind v4.
   Mirrors registry/ui/collapsible.tsx. Native <details>/<summary> single
   disclosure (WAI-ARIA Disclosure pattern). Enter/Space toggle and
   aria-expanded are all native to <summary> — zero JS.

   Distinct from accordion: a standalone show/hide, no group `name`.

   Usage:
     {% from "components/collapsible.html" import collapsible_open, collapsible_close,
        collapsible_trigger, collapsible_content_open, collapsible_content_close %}

     {{ collapsible_open(open=true) }}
       {{ collapsible_trigger("Can I use this without JS?") }}
       {{ collapsible_content_open() }}
         Yes — it is native <details>/<summary>.
       {{ collapsible_content_close() }}
     {{ collapsible_close() }} #}

{% macro collapsible_open(open=false, disabled=false, extra_class="", attrs={}) -%}
<details data-slot="collapsible"
         {%- if disabled %} data-disabled="true"{% endif %}
         {%- if open %} open{% endif %}
         class="w-full {% if disabled %}pointer-events-none opacity-50{% endif %} {{ extra_class }}"
         {%- for k, v in attrs.items() %} {{ k|replace('_','-') }}="{{ v }}"{% endfor %}>
{%- endmacro %}

{% macro collapsible_close() %}</details>{% endmacro %}

{% macro collapsible_trigger(text, extra_class="") -%}
<summary data-slot="collapsible-trigger"
  class="flex cursor-pointer items-center justify-between gap-4 rounded-md py-2 text-left text-sm font-medium transition-all outline-none select-none marker:hidden hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 list-none [&::-webkit-details-marker]:hidden [details[open]>&_[data-slot=collapsible-chevron]]:rotate-180 {{ extra_class }}">
  {{ text }}
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
       data-slot="collapsible-chevron"
       class="pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" aria-hidden="true">
    <polyline points="6 9 12 15 18 9" />
  </svg>
</summary>
{%- endmacro %}

{% macro collapsible_content_open(extra_class="") -%}
<div data-slot="collapsible-content" class="overflow-hidden pt-2 pb-1 text-sm {{ extra_class }}">
{%- endmacro %}

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

{{/*
  Collapsible templates — shadcn-htmx, htmx v4 + Tailwind v4.
  Mirrors registry/ui/collapsible.tsx. Native <details>/<summary> single
  disclosure (WAI-ARIA Disclosure pattern). Enter/Space toggle and
  aria-expanded are native to <summary> — zero JS. No group `name`.

  Two named templates compose:
    - "collapsible"          — full <details> with trigger + content
    - "collapsible_trigger"  — just the <summary> (when composing manually)

  Usage:
    {{template "collapsible" (dict
      "Title" "Can I use this without JS?" "Open" true
      "Body" (htmlSafe "Yes — it is native <details>/<summary>.")
    )}}
*/}}

{{/* .Attrs (htmlSafe) forwards hx-* / global attributes onto the <details>
     so the native `toggle` event it fires can drive zero-JS lazy loading:
     hx-trigger="toggle once" hx-get=...  (toggle event: HTMLElement;
     hx-trigger accepts any DOM event). */}}
{{define "collapsible"}}
<details data-slot="collapsible"
         {{if .Disabled}}data-disabled="true"{{end}}
         {{if .Open}}open{{end}}
         class="w-full{{if .Disabled}} pointer-events-none opacity-50{{end}}"{{with .Attrs}} {{.}}{{end}}>
  {{template "collapsible_trigger" (dict "Text" .Title)}}
  <div data-slot="collapsible-content" class="overflow-hidden pt-2 pb-1 text-sm">{{.Body}}</div>
</details>
{{end}}

{{define "collapsible_trigger"}}
<summary data-slot="collapsible-trigger"
  class="flex cursor-pointer items-center justify-between gap-4 rounded-md py-2 text-left text-sm font-medium transition-all outline-none select-none marker:hidden hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 list-none [&::-webkit-details-marker]:hidden [details[open]>&_[data-slot=collapsible-chevron]]:rotate-180">
  {{.Text}}
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
       data-slot="collapsible-chevron"
       class="pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" aria-hidden="true">
    <polyline points="6 9 12 15 18 9" />
  </svg>
</summary>
{{end}}

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

  Native `<details>` + `<summary>` single disclosure (WAI-ARIA Disclosure
  pattern). Enter/Space toggle, focusable summary, and the browser-managed
  aria-expanded are all native — zero JS.

  Distinct from accordion: a standalone show/hide, not a group, so there is
  no `name` attribute and no exclusive grouping.

  ## Examples

      <.collapsible open>
        <.collapsible_trigger>Can I use this without JS?</.collapsible_trigger>
        <.collapsible_content>Yes — it is native &lt;details&gt;/&lt;summary&gt;.</.collapsible_content>
      </.collapsible>
  """

  use Phoenix.Component

  attr :open, :boolean, default: false
  attr :disabled, :boolean, default: false
  attr :class, :string, default: nil
  attr :rest, :global
  slot :inner_block, required: true

  def collapsible(assigns) do
    ~H"""
    <details
      data-slot="collapsible"
      data-disabled={@disabled && "true"}
      open={@open}
      class={[
        "w-full",
        @disabled && "pointer-events-none opacity-50",
        @class
      ]}
      {@rest}
    >
      {render_slot(@inner_block)}
    </details>
    """
  end

  attr :class, :string, default: nil
  attr :rest, :global
  slot :inner_block, required: true

  def collapsible_trigger(assigns) do
    ~H"""
    <summary
      data-slot="collapsible-trigger"
      class={[
        "flex cursor-pointer items-center justify-between gap-4 rounded-md py-2 text-left text-sm font-medium",
        "transition-all outline-none select-none marker:hidden hover:underline",
        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
        "list-none [&::-webkit-details-marker]:hidden",
        "[details[open]>&_[data-slot=collapsible-chevron]]:rotate-180",
        @class
      ]}
      {@rest}
    >
      {render_slot(@inner_block)}
      <svg
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
        data-slot="collapsible-chevron"
        class="pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200"
        aria-hidden="true"
      >
        <polyline points="6 9 12 15 18 9" />
      </svg>
    </summary>
    """
  end

  attr :class, :string, default: nil
  attr :rest, :global
  slot :inner_block, required: true

  def collapsible_content(assigns) do
    ~H"""
    <div data-slot="collapsible-content" class={["overflow-hidden pt-2 pb-1 text-sm", @class]} {@rest}>
      {render_slot(@inner_block)}
    </div>
    """
  end
end

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

  Native <details> + <summary> single disclosure (WAI-ARIA Disclosure
  pattern). Click / Space / Enter toggle open, the summary is focusable and
  implicitly role="button", and the browser mirrors aria-expanded — all with
  zero JavaScript. Distinct from accordion: a single standalone show/hide,
  with no `name` group attribute.

  Relies only on the theme tokens in styles.css.
-->

<details data-slot="collapsible" open class="w-full">
  <summary data-slot="collapsible-trigger"
    class="flex cursor-pointer items-center justify-between gap-4 rounded-md py-2 text-left text-sm font-medium transition-all outline-none select-none marker:hidden hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 list-none [&::-webkit-details-marker]:hidden [details[open]>&_[data-slot=collapsible-chevron]]:rotate-180">
    Can I use this without JavaScript?
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
         data-slot="collapsible-chevron" class="pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" aria-hidden="true">
      <polyline points="6 9 12 15 18 9" />
    </svg>
  </summary>
  <div data-slot="collapsible-content" class="overflow-hidden pt-2 pb-1 text-sm">
    Yes. The open/close toggle, keyboard handling (Space / Enter), focus, and
    aria-expanded are all native to &lt;details&gt;/&lt;summary&gt;.
  </div>
</details>