Responsive Image

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

// Responsive Image — shadcn-htmx, htmx v4 + Tailwind v4.
//
// Art-directed / format-switching image. Renders a <picture> with zero or
// more <source> children and exactly one fallback <img>. The browser walks
// the <source> list top-to-bottom, picks the first whose `media` and `type`
// match, and falls back to the <img> when none match (or <picture> isn't
// supported). All selection happens natively — zero JS.
//
// Source of truth:
//   repos/mdn/files/en-us/web/html/reference/elements/picture/index.md
//     - <source media> for art direction + (prefers-color-scheme) theme swaps
//     - <source type> for format negotiation (image/avif, image/webp)
//     - the <img> is required: it sizes the box AND is the universal fallback
//   repos/mdn/files/en-us/web/html/reference/elements/source/index.md
//     - inside <picture>, `srcset` is required and `src` is NOT allowed
//     - <source> is a void element (no closing tag)
//     - `sizes` only takes effect with width (`w`) descriptors, not density (`x`)
//
// Accessibility:
//   - <picture> and <source> have NO corresponding ARIA role; the accessible
//     name + role come entirely from the child <img>'s `alt`. So `alt` is
//     required on the component (empty string only for decorative images).
//   - Per MDN, object-fit / object-position go on the <img>, never <picture>.

// One <source>: a candidate the browser may pick before the fallback <img>.
export type ResponsiveImageSource = {
  // Comma-separated candidate list. Inside <picture> this is REQUIRED and
  // `src` is not allowed. e.g. "hero.avif" or "small.jpg 480w, large.jpg 1200w".
  srcset: string
  // MIME type for format negotiation; unsupported types are skipped without
  // a network hit. e.g. "image/avif", "image/webp".
  type?: string
  // Media condition for art direction / theming, e.g.
  // "(min-width: 800px)" or "(prefers-color-scheme: dark)".
  media?: string
  // Only meaningful with width (`w`) descriptors in srcset.
  sizes?: string
  // Intrinsic dimensions (integers, no units) to reserve layout space.
  width?: number
  height?: number
}

const rootBase = "block overflow-hidden rounded-lg border bg-muted"

// The <img> fills the box; object-fit/position live here per MDN, not on <picture>.
const imgBase = "block size-full object-cover"

type ResponsiveImageProps = {
  // The fallback image — also the element that sizes the box and carries the
  // accessible name. Required by the platform.
  src: string
  // Required: empty string ("") only for purely decorative images.
  alt: string
  // The art-directed / format-switching candidates, in priority order.
  sources?: ResponsiveImageSource[]
  // Intrinsic dimensions on the fallback <img>; reserve space to avoid CLS.
  width?: number
  height?: number
  // Native lazy loading + async decode for off-screen hero/gallery images.
  loading?: "lazy" | "eager"
  decoding?: "sync" | "async" | "auto"
  fetchpriority?: "high" | "low" | "auto"
  // Density/width candidates for the fallback <img> itself (Retina without
  // explicit media queries — see MDN note on <img srcset>).
  srcset?: string
  sizes?: string
  class?: ClassValue
  // Extra classes applied to the inner <img> (e.g. object-contain, aspect-*).
  imgClass?: ClassValue
  id?: string
  // Render extra <source> elements by hand (advanced) instead of `sources`.
  children?: Child
  // Pass-through for htmx / data-* / aria-* on the <picture> root.
  [key: `data-${string}`]: any
  [key: `hx-${string}`]: any
  [key: `aria-${string}`]: any
}

export function ResponsiveImage(props: ResponsiveImageProps) {
  const {
    src,
    alt,
    sources = [],
    width,
    height,
    loading,
    decoding,
    fetchpriority,
    srcset,
    sizes,
    class: className,
    imgClass,
    id,
    children,
    ...rest
  } = props

  return (
    <picture
      id={id}
      data-slot="responsive-image"
      class={cn(rootBase, className)}
      {...rest}
    >
      {sources.map((s) => (
        // <source> is a void element; inside <picture> srcset is required and
        // src is not allowed. The first matching source wins.
        <source
          srcset={s.srcset}
          type={s.type}
          media={s.media}
          sizes={s.sizes}
          width={s.width}
          height={s.height}
        />
      ))}
      {children}
      {/* The fallback <img> sizes the box and provides the accessible name.
          object-fit / object-position go HERE per MDN, never on <picture>. */}
      <img
        src={src}
        alt={alt}
        srcset={srcset}
        sizes={sizes}
        width={width}
        height={height}
        loading={loading}
        decoding={decoding}
        fetchpriority={fetchpriority}
        data-slot="responsive-image-img"
        class={cn(imgBase, imgClass)}
      />
    </picture>
  )
}

{# Responsive Image macro — shadcn-htmx, htmx v4 + Tailwind v4.
   Mirrors registry/ui/responsive-image.tsx. Native <picture> + <source>s + <img>.

   `sources` is a list of dicts: { srcset, type, media, sizes, width, height }.
   The browser picks the first matching <source>; the <img> is the fallback
   and carries the accessible name via `alt` (empty "" only for decorative).

   Usage:
     {% from "components/responsive-image.html" import responsive_image %}
     {{ responsive_image(
          src="/img/hero.jpg", alt="A surfer at golden hour",
          sources=[
            {"srcset": "/img/hero.avif", "type": "image/avif"},
            {"srcset": "/img/hero.webp", "type": "image/webp"},
          ]) }} #}

{% macro responsive_image(src, alt, sources=[], width=none, height=none,
                          loading=none, decoding=none, fetchpriority=none,
                          srcset=none, sizes=none, extra_class="", img_class="",
                          id=none, attrs={}) %}
<picture data-slot="responsive-image"{% if id %} id="{{ id }}"{% endif %}
         class="block overflow-hidden rounded-lg border bg-muted {{ extra_class }}"
         {%- for k, v in attrs.items() %} {{ k|replace('_','-') }}="{{ v }}"{% endfor %}>
  {%- for s in sources %}
  <source srcset="{{ s.srcset }}"
          {%- if s.type %} type="{{ s.type }}"{% endif %}
          {%- if s.media %} media="{{ s.media }}"{% endif %}
          {%- if s.sizes %} sizes="{{ s.sizes }}"{% endif %}
          {%- if s.width %} width="{{ s.width }}"{% endif %}
          {%- if s.height %} height="{{ s.height }}"{% endif %}>
  {%- endfor %}
  <img src="{{ src }}" alt="{{ alt }}" data-slot="responsive-image-img"
       {%- if srcset %} srcset="{{ srcset }}"{% endif %}
       {%- if sizes %} sizes="{{ sizes }}"{% endif %}
       {%- if width %} width="{{ width }}"{% endif %}
       {%- if height %} height="{{ height }}"{% endif %}
       {%- if loading %} loading="{{ loading }}"{% endif %}
       {%- if decoding %} decoding="{{ decoding }}"{% endif %}
       {%- if fetchpriority %} fetchpriority="{{ fetchpriority }}"{% endif %}
       class="block size-full object-cover {{ img_class }}">
</picture>
{% endmacro %}

{{/*
  Responsive Image template — shadcn-htmx, htmx v4 + Tailwind v4.

  Mirrors registry/ui/responsive-image.tsx. Native <picture> + <source>s + <img>.
  The browser picks the first matching <source>; the <img> is the universal
  fallback and carries the accessible name via Alt (empty "" only decorative).

      type SourceArgs struct {
          Srcset, Type, Media, Sizes string
          Width, Height              int
      }
      type ResponsiveImageArgs struct {
          Src, Alt, Srcset, Sizes              string
          Loading, Decoding, Fetchpriority     string
          Width, Height                        int
          Sources                              []SourceArgs
          ExtraClass, ImgClass, ID             string
      }

  Usage:
      {{template "responsive-image" (dict
          "Src" "/img/hero.jpg" "Alt" "A surfer at golden hour"
          "Sources" (list
              (dict "Srcset" "/img/hero.avif" "Type" "image/avif")
              (dict "Srcset" "/img/hero.webp" "Type" "image/webp")))}}
*/}}

{{define "responsive-image"}}
<picture data-slot="responsive-image"{{if .ID}} id="{{.ID}}"{{end}}
         class="block overflow-hidden rounded-lg border bg-muted {{or .ExtraClass ""}}"{{with .Attrs}} {{. | htmlSafe}}{{end}}>
  {{- range .Sources}}
  <source srcset="{{.Srcset}}"{{if .Type}} type="{{.Type}}"{{end}}{{if .Media}} media="{{.Media}}"{{end}}{{if .Sizes}} sizes="{{.Sizes}}"{{end}}{{if .Width}} width="{{.Width}}"{{end}}{{if .Height}} height="{{.Height}}"{{end}}>
  {{- end}}
  <img src="{{.Src}}" alt="{{.Alt}}" data-slot="responsive-image-img"{{if .Srcset}} srcset="{{.Srcset}}"{{end}}{{if .Sizes}} sizes="{{.Sizes}}"{{end}}{{if .Width}} width="{{.Width}}"{{end}}{{if .Height}} height="{{.Height}}"{{end}}{{if .Loading}} loading="{{.Loading}}"{{end}}{{if .Decoding}} decoding="{{.Decoding}}"{{end}}{{if .Fetchpriority}} fetchpriority="{{.Fetchpriority}}"{{end}}
       class="block size-full object-cover {{or .ImgClass ""}}">
</picture>
{{end}}

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

  Mirrors registry/ui/responsive-image.tsx. A native `<picture>` with zero or
  more `<source>` children and exactly one fallback `<img>`. The browser walks
  the source list top-to-bottom, picks the first whose `media`/`type` match,
  and falls back to the `<img>` when none match. Zero JS.

  Source of truth:
    repos/mdn/files/en-us/web/html/reference/elements/picture/index.md
    repos/mdn/files/en-us/web/html/reference/elements/source/index.md

  Accessibility: `<picture>`/`<source>` carry no ARIA role; the accessible name
  comes from the fallback `<img>`'s `alt` (empty "" only for decorative images).

  ## Examples

      <.responsive_image src={~p"/img/hero.jpg"} alt="A surfer at golden hour">
        <:source srcset={~p"/img/hero.avif"} type="image/avif" />
        <:source srcset={~p"/img/hero.webp"} type="image/webp" />
      </.responsive_image>
  """

  use Phoenix.Component

  attr :src, :string, required: true
  attr :alt, :string, required: true
  attr :srcset, :string, default: nil
  attr :sizes, :string, default: nil
  attr :width, :integer, default: nil
  attr :height, :integer, default: nil
  attr :loading, :string, default: nil, values: ~w(lazy eager) ++ [nil]
  attr :decoding, :string, default: nil, values: ~w(sync async auto) ++ [nil]
  attr :fetchpriority, :string, default: nil, values: ~w(high low auto) ++ [nil]
  attr :class, :string, default: nil
  attr :img_class, :string, default: nil
  attr :id, :string, default: nil
  attr :rest, :global

  slot :source do
    attr :srcset, :string, required: true
    attr :type, :string
    attr :media, :string
    attr :sizes, :string
    attr :width, :integer
    attr :height, :integer
  end

  def responsive_image(assigns) do
    ~H"""
    <picture
      id={@id}
      data-slot="responsive-image"
      class={["block overflow-hidden rounded-lg border bg-muted", @class]}
      {@rest}
    >
      <source
        :for={s <- @source}
        srcset={s.srcset}
        type={s[:type]}
        media={s[:media]}
        sizes={s[:sizes]}
        width={s[:width]}
        height={s[:height]}
      />
      <img
        src={@src}
        alt={@alt}
        srcset={@srcset}
        sizes={@sizes}
        width={@width}
        height={@height}
        loading={@loading}
        decoding={@decoding}
        fetchpriority={@fetchpriority}
        data-slot="responsive-image-img"
        class={["block size-full object-cover", @img_class]}
      />
    </picture>
    """
  end
end

<!--
  shadcn-htmx — raw HTML responsive-image snippet.

  Mirrors registry/ui/responsive-image.tsx. Native <picture> + <source>s +
  fallback <img>. The browser picks the first matching <source> by media/type
  and falls back to the <img>, which sizes the box and carries the accessible
  name via `alt` (empty "" only for decorative images). Tailwind tokens only.
-->

<!-- Format negotiation: AVIF → WebP → JPEG fallback -->
<picture data-slot="responsive-image"
  class="block overflow-hidden rounded-lg border bg-muted">
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="A surfer at golden hour"
       data-slot="responsive-image-img" class="block size-full object-cover">
</picture>

<!-- Theme swap: dark vs light asset via prefers-color-scheme -->
<picture data-slot="responsive-image"
  class="block overflow-hidden rounded-lg border bg-muted">
  <source srcset="/img/diagram-dark.png" media="(prefers-color-scheme: dark)">
  <source srcset="/img/diagram-light.png" media="(prefers-color-scheme: light)">
  <img src="/img/diagram-light.png" alt="System architecture diagram"
       data-slot="responsive-image-img" class="block size-full object-contain">
</picture>

<!-- Art direction: wide crop on large screens, square on small -->
<picture data-slot="responsive-image"
  class="block overflow-hidden rounded-lg border bg-muted">
  <source srcset="/img/banner-wide.jpg" media="(min-width: 800px)" width="1200" height="400">
  <img src="/img/banner-square.jpg" alt="Conference keynote stage"
       width="600" height="600" loading="lazy" decoding="async"
       data-slot="responsive-image-img" class="block size-full object-cover">
</picture>