Card

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

// Card — shadcn-htmx, htmx v4 + Tailwind v4.
//
// Source of truth (1:1 class strings):
//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/card.tsx
//
// Card is structural — a rounded container with a Header / Title /
// Description / Content / Footer layout. No interactivity, no JS.
// Pair it with htmx attributes on inner elements when you need to swap
// the contents server-side.

type CardAs = "div" | "article" | "section" | "li" | "aside"

export function Card(
  props: PropsWithChildren<
    {
      class?: ClassValue
      id?: string
      // Semantic element. shadcn upstream hardcodes <div>; we default to
      // <div> for backwards-compat but encourage <article> for self-
      // contained content (product card, blog tile, comment) and
      // <section> for thematic groups inside a landmark.
      // See repos/mdn/files/en-us/web/html/reference/elements/article/index.md:10,65-68
      as?: CardAs
      // Pair with the id of the CardTitle inside so the rendered <article>
      // / <section> has an accessible name for AT landmark navigation.
      ariaLabelledby?: string
      ariaLabel?: string
    } & Record<string, any>
  >,
) {
  const { class: className, children, as = "div", ariaLabelledby, ariaLabel, ...rest } = props
  const Tag: any = as
  return (
    <Tag
      data-slot="card"
      class={cn(
        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
        className,
      )}
      aria-labelledby={ariaLabelledby}
      aria-label={ariaLabel}
      {...rest}
    >
      {children}
    </Tag>
  )
}

export function CardHeader(
  props: PropsWithChildren<{ class?: ClassValue }>,
) {
  return (
    <div
      data-slot="card-header"
      class={cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
        props.class,
      )}
    >
      {props.children}
    </div>
  )
}

type CardTitleAs = "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

export function CardTitle(
  props: PropsWithChildren<{
    class?: ClassValue
    // Render as a real heading so an `as="article"|"section"` Card gets a
    // child heading and contributes to the document outline. Default "div"
    // preserves shadcn upstream behaviour.
    // See repos/mdn/files/en-us/web/html/reference/elements/article/index.md:66
    //     repos/mdn/files/en-us/web/html/reference/elements/section/index.md:55
    as?: CardTitleAs
    // Lets Card's aria-labelledby reference this visible title, giving a
    // section/article card its accessible name (region landmark naming).
    // See repos/mdn/files/en-us/web/accessibility/aria/reference/roles/region_role/index.md:25,29
    id?: string
  }>,
) {
  const { class: className, children, as = "div", id } = props
  const Tag: any = as
  return (
    <Tag data-slot="card-title" id={id} class={cn("leading-none font-semibold", className)}>
      {children}
    </Tag>
  )
}

export function CardDescription(
  props: PropsWithChildren<{ class?: ClassValue }>,
) {
  return (
    <div
      data-slot="card-description"
      class={cn("text-sm text-muted-foreground", props.class)}
    >
      {props.children}
    </div>
  )
}

// Sits in the top-right of CardHeader; the header grid auto-detects it and
// switches to two columns via `has-data-[slot=card-action]:grid-cols-[1fr_auto]`.
export function CardAction(
  props: PropsWithChildren<{ class?: ClassValue }>,
) {
  return (
    <div
      data-slot="card-action"
      class={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        props.class,
      )}
    >
      {props.children}
    </div>
  )
}

export function CardContent(
  props: PropsWithChildren<{ class?: ClassValue }>,
) {
  return (
    <div data-slot="card-content" class={cn("px-6", props.class)}>
      {props.children}
    </div>
  )
}

export function CardFooter(
  props: PropsWithChildren<{ class?: ClassValue }>,
) {
  return (
    <div
      data-slot="card-footer"
      class={cn("flex items-center px-6 [.border-t]:pt-6", props.class)}
    >
      {props.children}
    </div>
  )
}

{# Card macros — shadcn-htmx, htmx v4 + Tailwind v4.
   Mirrors registry/ui/card.tsx.

   Usage:
     {% from "components/card.html" import card_open, card_close,
        card_header_open, card_header_close,
        card_title, card_description,
        card_content_open, card_content_close,
        card_footer_open, card_footer_close %}

     {{ card_open() }}
       {{ card_header_open() }}
         {{ card_title("Account") }}
         {{ card_description("Update your account settings here.") }}
       {{ card_header_close() }}
       {{ card_content_open() }}
         <p>Body content…</p>
       {{ card_content_close() }}
       {{ card_footer_open() }}
         <button class="…">Save</button>
       {{ card_footer_close() }}
     {{ card_close() }} #}

{% macro card_open(extra_class="") -%}
<div data-slot="card" class="flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm {{ extra_class }}">
{%- endmacro %}
{% macro card_close() %}</div>{% endmacro %}

{% macro card_header_open(extra_class="") -%}
<div data-slot="card-header" class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 {{ extra_class }}">
{%- endmacro %}
{% macro card_header_close() %}</div>{% endmacro %}

{# `as` renders a real heading (h1-h6) so an as="article"/"section" card gets a
   child heading per the document-outline guidance; default "div" keeps shadcn
   upstream behaviour. `id` lets card_open(aria_labelledby=...) name the card.
   See repos/mdn/files/en-us/web/html/reference/elements/article/index.md:66
       repos/mdn/files/en-us/web/accessibility/aria/reference/roles/region_role/index.md:25,29 #}
{% macro card_title(text, extra_class="", as="div", id="") -%}
<{{ as }} data-slot="card-title"{% if id %} id="{{ id }}"{% endif %} class="leading-none font-semibold {{ extra_class }}">{{ text }}</{{ as }}>
{%- endmacro %}

{% macro card_description(text, extra_class="") -%}
<div data-slot="card-description" class="text-sm text-muted-foreground {{ extra_class }}">{{ text }}</div>
{%- endmacro %}

{% macro card_action_open(extra_class="") -%}
<div data-slot="card-action" class="col-start-2 row-span-2 row-start-1 self-start justify-self-end {{ extra_class }}">
{%- endmacro %}
{% macro card_action_close() %}</div>{% endmacro %}

{% macro card_content_open(extra_class="") -%}
<div data-slot="card-content" class="px-6 {{ extra_class }}">
{%- endmacro %}
{% macro card_content_close() %}</div>{% endmacro %}

{% macro card_footer_open(extra_class="") -%}
<div data-slot="card-footer" class="flex items-center px-6 [.border-t]:pt-6 {{ extra_class }}">
{%- endmacro %}
{% macro card_footer_close() %}</div>{% endmacro %}

{{/*
  Card templates — shadcn-htmx, htmx v4 + Tailwind v4.
  Mirrors registry/ui/card.tsx.

  Each named template wraps an HTML chunk. To compose, hand-assemble the
  HTML in your handler (Go html/template has no caller block syntax):

      type CardArgs struct {
          Title       string
          Description string
          Content     template.HTML
          Footer      template.HTML
          Action      template.HTML // optional, sits in the top-right
          // Optional: render CardTitle as a real heading (h1-h6) so an
          // article/section card has a child heading for the document
          // outline; empty => "div" (shadcn upstream default).
          // See repos/mdn/.../elements/article/index.md:66 ; section/index.md:55
          TitleAs string
          // Optional: id on CardTitle so a section/article card can name
          // itself via aria-labelledby (region landmark naming).
          // See repos/mdn/.../roles/region_role/index.md:25,29
          TitleID string
      }

      tpl.ExecuteTemplate(w, "card", CardArgs{
          Title:       "Account",
          Description: "Update your settings here.",
          Content:     template.HTML(`<p>Body content…</p>`),
          Footer:      template.HTML(`<button>Save</button>`),
      })
*/}}

{{define "card"}}
<div data-slot="card" class="flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm">
  {{- if or .Title .Description .Action}}
  <div data-slot="card-header" class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6">
    {{- if .Title}}{{$t := or .TitleAs "div"}}<{{$t}} data-slot="card-title"{{if .TitleID}} id="{{.TitleID}}"{{end}} class="leading-none font-semibold">{{.Title}}</{{$t}}>{{end}}
    {{- if .Description}}<div data-slot="card-description" class="text-sm text-muted-foreground">{{.Description}}</div>{{end}}
    {{- if .Action}}<div data-slot="card-action" class="col-start-2 row-span-2 row-start-1 self-start justify-self-end">{{.Action}}</div>{{end}}
  </div>
  {{- end}}
  {{- if .Content}}
  <div data-slot="card-content" class="px-6">{{.Content}}</div>
  {{- end}}
  {{- if .Footer}}
  <div data-slot="card-footer" class="flex items-center px-6 [.border-t]:pt-6">{{.Footer}}</div>
  {{- end}}
</div>
{{end}}

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

  Mirrors registry/ui/card.tsx. Structural container with
  Header / Title / Description / Action / Content / Footer slots.

  ## Examples

      <.card>
        <.card_header>
          <.card_title>Account</.card_title>
          <.card_description>Update your settings here.</.card_description>
        </.card_header>
        <.card_content>
          <p>Body content…</p>
        </.card_content>
        <.card_footer>
          <button>Save</button>
        </.card_footer>
      </.card>
  """

  use Phoenix.Component

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

  def card(assigns) do
    ~H"""
    <div
      data-slot="card"
      class={["flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm", @class]}
      {@rest}
    >
      {render_slot(@inner_block)}
    </div>
    """
  end

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

  def card_header(assigns) do
    ~H"""
    <div
      data-slot="card-header"
      class={[
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
        @class
      ]}
    >
      {render_slot(@inner_block)}
    </div>
    """
  end

  attr :class, :string, default: nil
  # Render as a real heading (h1-h6) so an as="article"/"section" card gets a
  # child heading for the document outline; default "div" keeps shadcn upstream.
  # See repos/mdn/files/en-us/web/html/reference/elements/article/index.md:66
  #     repos/mdn/files/en-us/web/html/reference/elements/section/index.md:55
  attr :as, :string, default: "div", values: ~w(div h1 h2 h3 h4 h5 h6)
  # id lets a section/article card reference this title via aria-labelledby
  # (region landmark naming).
  # See repos/mdn/files/en-us/web/accessibility/aria/reference/roles/region_role/index.md:25,29
  attr :id, :string, default: nil
  slot :inner_block, required: true

  def card_title(assigns) do
    ~H"""
    <.dynamic_tag tag_name={@as} data-slot="card-title" id={@id} class={["leading-none font-semibold", @class]}>
      {render_slot(@inner_block)}
    </.dynamic_tag>
    """
  end

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

  def card_description(assigns) do
    ~H"""
    <div data-slot="card-description" class={["text-sm text-muted-foreground", @class]}>
      {render_slot(@inner_block)}
    </div>
    """
  end

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

  def card_action(assigns) do
    ~H"""
    <div
      data-slot="card-action"
      class={["col-start-2 row-span-2 row-start-1 self-start justify-self-end", @class]}
    >
      {render_slot(@inner_block)}
    </div>
    """
  end

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

  def card_content(assigns) do
    ~H"""
    <div data-slot="card-content" class={["px-6", @class]}>
      {render_slot(@inner_block)}
    </div>
    """
  end

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

  def card_footer(assigns) do
    ~H"""
    <div
      data-slot="card-footer"
      class={["flex items-center px-6 [.border-t]:pt-6", @class]}
    >
      {render_slot(@inner_block)}
    </div>
    """
  end
end

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

  Mirrors registry/ui/card.tsx. Just divs with the right Tailwind classes —
  no JS, no special CSS.

  CARD:             flex flex-col gap-6 rounded-xl border bg-card py-6
                    text-card-foreground shadow-sm
  CARD HEADER:      @container/card-header grid auto-rows-min
                    grid-rows-[auto_auto] items-start gap-2 px-6
                    has-data-[slot=card-action]:grid-cols-[1fr_auto]
                    [.border-b]:pb-6
  CARD TITLE:       leading-none font-semibold
  CARD DESCRIPTION: text-sm text-muted-foreground
  CARD ACTION:      col-start-2 row-span-2 row-start-1 self-start
                    justify-self-end
  CARD CONTENT:     px-6
  CARD FOOTER:      flex items-center px-6 [.border-t]:pt-6
-->

<!-- Basic -->
<div data-slot="card"
  class="flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm">
  <div data-slot="card-header"
    class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6">
    <div data-slot="card-title" class="leading-none font-semibold">Account</div>
    <div data-slot="card-description" class="text-sm text-muted-foreground">
      Update your account preferences and notification settings.
    </div>
  </div>
  <div data-slot="card-content" class="px-6">
    <p class="text-sm">Body content goes here.</p>
  </div>
  <div data-slot="card-footer" class="flex items-center px-6 [.border-t]:pt-6">
    <button class="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90">
      Save
    </button>
  </div>
</div>

<!-- With CardAction (top-right header slot) -->
<div data-slot="card"
  class="flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm">
  <div data-slot="card-header"
    class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6">
    <div data-slot="card-title" class="leading-none font-semibold">Untitled draft</div>
    <div data-slot="card-description" class="text-sm text-muted-foreground">
      Last edited 12 minutes ago.
    </div>
    <div data-slot="card-action" class="col-start-2 row-span-2 row-start-1 self-start justify-self-end">
      <button class="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground" aria-label="More">
        <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" class="size-4" aria-hidden="true">
          <circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" />
        </svg>
      </button>
    </div>
  </div>
  <div data-slot="card-content" class="px-6">
    <p class="text-sm text-muted-foreground">3 unread comments.</p>
  </div>
</div>

<!-- As a landmark: <section> card named by its heading.
     CardTitle is rendered as a real heading (h2) with an id, and the card
     references it via aria-labelledby so the region landmark gets its name
     from the visible title. A <section> with an accessible name is exposed
     as role=region — prefer the semantic element over an explicit role.
     See repos/mdn/.../elements/section/index.md:55
         repos/mdn/.../roles/region_role/index.md:25,29 -->
<section data-slot="card" aria-labelledby="card-title-billing"
  class="flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm">
  <div data-slot="card-header"
    class="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6">
    <h2 data-slot="card-title" id="card-title-billing" class="leading-none font-semibold">Billing</h2>
    <div data-slot="card-description" class="text-sm text-muted-foreground">
      Manage your subscription and payment method.
    </div>
  </div>
  <div data-slot="card-content" class="px-6">
    <p class="text-sm">Your plan renews on the 1st of each month.</p>
  </div>
</section>