Auto Grid

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

// Auto Grid — shadcn-htmx, htmx v4 + Tailwind v4.
//
// A responsive, intrinsically-wrapping grid of equal cells with NO media
// queries: children flow into as many columns as fit at a configurable
// minimum item width, then grow to share the leftover space. This is the
// "RAM" pattern (Repeat, Auto, Minmax) — the card-grid recipe most people
// reach for. Pure CSS Grid; zero JavaScript.
//
// Built on (read before editing):
//   repos/web.dev/src/site/content/en/patterns/layout/repeat-auto-minmax/index.md
//     — the canonical recipe: `grid-template-columns: repeat(auto-fit,
//       minmax(150px, 1fr))`. auto-fit collapses empty tracks so filled
//       tracks grow; auto-fill keeps empty tracks (their width reserved).
//   repos/web.dev/src/site/content/en/learn/css/grid/index.md:295-389
//     — `minmax(0, 1fr)` forces equal share minus gaps; the
//       `auto-fill`/`auto-fit` keywords create "as many tracks as will fit"
//       with no media queries; the subtle auto-fill vs auto-fit difference.
//   repos/mdn/files/en-us/web/css/minmax/index.md (minmax function)
//   repos/mdn/files/en-us/web/css/min/index.md
//     — `min(var(--auto-grid-min), 100%)` guards the lower bound so a single
//       wide item can never overflow a container narrower than the min.
//
// shadcn/ui has no Auto Grid (React libraries leave layout to the consumer),
// so there is no class string to mirror — this is a layout primitive.
//
// API shape:
//   - `min`  : the per-item minimum width (any CSS length). Drives how many
//              columns fit. Default "16rem".
//   - `gap`  : the Tailwind gap step (number → gap-<n>) or a class. Default 4.
//   - `fill` : false (default) uses auto-fit — empty tracks collapse and
//              real items stretch to fill the row. true uses auto-fill —
//              empty tracks are kept, so a half-empty last row stays aligned
//              to the column rhythm rather than stretching.
//   - `as`   : the element/role. Default <div>. Use "ul"/"ol" for a list of
//              cards (each child should then be an <li>), or "section".
//
// We publish `--auto-grid-min` on the root and read it in an arbitrary
// `grid-template-columns` utility, exactly like RangeSlider publishes
// `--range-min`/`--range-max`. No runtime; the browser does the layout.

export type AutoGridAs = "div" | "ul" | "ol" | "section"

// repeat(auto-fit|auto-fill, minmax(min(var(--auto-grid-min), 100%), 1fr)).
// The min() guard means: never demand more than the container width, so one
// item in a too-narrow container shrinks instead of forcing a scrollbar.
const FIT_CLASS =
  "grid [grid-template-columns:repeat(auto-fit,minmax(min(var(--auto-grid-min,16rem),100%),1fr))]"
const FILL_CLASS =
  "grid [grid-template-columns:repeat(auto-fill,minmax(min(var(--auto-grid-min,16rem),100%),1fr))]"

// Gap presets so callers can pass a plain number; any other value (string)
// is treated as an explicit class and appended verbatim.
const GAP_CLASS: Record<number, string> = {
  0: "gap-0",
  1: "gap-1",
  2: "gap-2",
  3: "gap-3",
  4: "gap-4",
  5: "gap-5",
  6: "gap-6",
  8: "gap-8",
  10: "gap-10",
  12: "gap-12",
}

type AutoGridProps = PropsWithChildren<{
  // Minimum per-item width. Any CSS length ("16rem", "200px", "20ch").
  min?: string
  // Gap between cells: a number maps to gap-<n>; a string is used verbatim.
  gap?: number | string
  // auto-fill (keep empty tracks) instead of auto-fit (collapse them).
  fill?: boolean
  // Semantic element / role. "ul"/"ol" for a card list.
  as?: AutoGridAs
  ariaLabel?: string
  ariaLabelledby?: string
  class?: ClassValue
  id?: string
  [key: `hx-${string}`]: any
  [key: `data-${string}`]: any
  [key: `aria-${string}`]: any
}>

export function AutoGrid(props: AutoGridProps) {
  const {
    min = "16rem",
    gap = 4,
    fill = false,
    as = "div",
    ariaLabel,
    ariaLabelledby,
    class: className,
    children,
    ...rest
  } = props as any
  const Tag: any = as
  const gapClass = typeof gap === "number" ? (GAP_CLASS[gap] ?? "gap-4") : gap
  return (
    <Tag
      data-slot="auto-grid"
      data-fill={fill ? "true" : undefined}
      // Publish the per-item minimum; the grid-template-columns utility reads
      // it. Keeping it a custom property means callers tune density without
      // touching the (uncompilable-at-runtime) arbitrary class.
      style={`--auto-grid-min:${min}`}
      aria-label={ariaLabel}
      aria-labelledby={ariaLabelledby}
      class={cn(fill ? FILL_CLASS : FIT_CLASS, gapClass, className)}
      {...rest}
    >
      {children}
    </Tag>
  )
}

{# Auto Grid macro — shadcn-htmx, htmx v4 + Tailwind v4.
   Mirrors registry/ui/auto-grid.tsx.

   A responsive, intrinsically-wrapping grid of equal cells with no media
   queries (the RAM pattern: repeat, auto-fit/auto-fill, minmax). Pure CSS.

   Usage:
     {% from "components/auto-grid.html" import auto_grid %}

     {% call auto_grid() %}                      {# default: 16rem min, gap-4 #}
       <div>…card…</div>
     {% endcall %}

     {% call auto_grid(min="20rem", gap="gap-6", fill=true, tag="ul") %}
       <li>…</li>
     {% endcall %}

   Args:
     min       per-item minimum width (any CSS length). Default "16rem".
     gap       a gap-* class (string). Default "gap-4".
     fill      true → auto-fill (keep empty tracks); false → auto-fit. Default false.
     tag       div | ul | ol | section. Default "div".
     attrs     dict of extra attributes (hx-*, data-*, aria-*). #}

{% macro auto_grid(
    min="16rem",
    gap="gap-4",
    fill=false,
    tag="div",
    aria_label=none,
    aria_labelledby=none,
    extra_class="",
    attrs={}
) %}
{%- set tracks -%}
{% if fill %}repeat(auto-fill,minmax(min(var(--auto-grid-min,16rem),100%),1fr)){% else %}repeat(auto-fit,minmax(min(var(--auto-grid-min,16rem),100%),1fr)){% endif %}
{%- endset -%}
<{{ tag }}
  data-slot="auto-grid"
  {%- if fill %} data-fill="true"{% endif %}
  style="--auto-grid-min:{{ min }}"
  {%- if aria_label %} aria-label="{{ aria_label }}"{% endif %}
  {%- if aria_labelledby %} aria-labelledby="{{ aria_labelledby }}"{% endif %}
  {%- for k, v in attrs.items() %} {{ k|replace('_','-') }}="{{ v }}"{% endfor %}
  class="grid [grid-template-columns:{{ tracks }}] {{ gap }} {{ extra_class }}">
  {{ caller() }}
</{{ tag }}>
{% endmacro %}

{{/*
  Auto Grid template — shadcn-htmx, htmx v4 + Tailwind v4.
  Mirrors registry/ui/auto-grid.tsx.

  A responsive, intrinsically-wrapping grid of equal cells with no media
  queries (the RAM pattern: repeat, auto-fit/auto-fill, minmax). Pure CSS.

      type AutoGridArgs struct {
          Min   string // per-item minimum width (any CSS length); default "16rem"
          Gap   string // a gap-* class; default "gap-4"
          Fill  bool   // true = auto-fill (keep empty tracks); false = auto-fit
          Tag   string // div | ul | ol | section; default "div"
          Class string // extra classes appended to the root
          Body  string // inner HTML (use htmlSafe)
      }

  Usage:
      {{template "auto-grid" (dict "Body" (htmlSafe $cards))}}
      {{template "auto-grid" (dict "Min" "20rem" "Gap" "gap-6" "Fill" true "Tag" "ul" "Body" (htmlSafe $items))}}
*/}}

{{define "auto-grid"}}
{{- $min := or .Min "16rem" -}}
{{- $gap := or .Gap "gap-4" -}}
{{- $tag := or .Tag "div" -}}
{{- $tracks := "repeat(auto-fit,minmax(min(var(--auto-grid-min,16rem),100%),1fr))" -}}
{{- if .Fill}}{{- $tracks = "repeat(auto-fill,minmax(min(var(--auto-grid-min,16rem),100%),1fr))"}}{{end -}}
<{{$tag}} data-slot="auto-grid"{{if .Fill}} data-fill="true"{{end}} style="--auto-grid-min:{{$min}}"{{if .AriaLabel}} aria-label="{{.AriaLabel}}"{{end}}{{if .AriaLabelledby}} aria-labelledby="{{.AriaLabelledby}}"{{end}} class="grid [grid-template-columns:{{$tracks}}] {{$gap}}{{if .Class}} {{.Class}}{{end}}">{{htmlSafe .Body}}</{{$tag}}>
{{end}}

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

  Mirrors registry/ui/auto-grid.tsx.

  A responsive, intrinsically-wrapping grid of equal cells with no media
  queries — children flow into as many columns as fit at a configurable
  minimum item width, then grow to share the leftover space. This is the
  "RAM" pattern (Repeat, Auto, Minmax). Pure CSS Grid; zero JavaScript.

    - `min`  — per-item minimum width (any CSS length). Default "16rem".
    - `gap`  — a gap-* class. Default "gap-4".
    - `fill` — true → auto-fill (keep empty tracks); false → auto-fit
               (collapse them so real items stretch). Default false.
    - `tag`  — div | ul | ol | section. Default "div".

  ## Examples

      <.auto_grid>
        <div :for={item <- @items}>…</.auto_grid>

      <.auto_grid min="20rem" gap="gap-6" fill tag="ul">
        <li :for={item <- @items}>…</li>
      </.auto_grid>
  """

  use Phoenix.Component

  attr :min, :string, default: "16rem"
  attr :gap, :string, default: "gap-4"
  attr :fill, :boolean, default: false
  attr :tag, :string, default: "div", values: ~w(div ul ol section)
  attr :class, :string, default: nil
  attr :rest, :global, include: ~w(aria-label aria-labelledby)
  slot :inner_block, required: true

  def auto_grid(assigns) do
    tracks =
      if assigns.fill do
        "repeat(auto-fill,minmax(min(var(--auto-grid-min,16rem),100%),1fr))"
      else
        "repeat(auto-fit,minmax(min(var(--auto-grid-min,16rem),100%),1fr))"
      end

    assigns = assign(assigns, :tracks, tracks)

    ~H"""
    <.dynamic_tag
      tag_name={@tag}
      data-slot="auto-grid"
      data-fill={if @fill, do: "true"}
      style={"--auto-grid-min:#{@min}"}
      class={["grid", "[grid-template-columns:#{@tracks}]", @gap, @class]}
      {@rest}
    >
      {render_slot(@inner_block)}
    </.dynamic_tag>
    """
  end
end

<!--
  shadcn-htmx — raw HTML Auto Grid snippet.
  Mirrors registry/ui/auto-grid.tsx.

  A responsive, intrinsically-wrapping grid of equal cells with NO media
  queries (the RAM pattern: repeat, auto-fit/auto-fill, minmax). Pure CSS;
  no script. Relies only on theme tokens.

  Tune density with the --auto-grid-min custom property in the inline style.
  The grid-template-columns utility reads it:
    repeat(auto-fit,  minmax(min(var(--auto-grid-min), 100%), 1fr))  → collapse empty tracks
    repeat(auto-fill, minmax(min(var(--auto-grid-min), 100%), 1fr))  → keep empty tracks
-->

<!-- Default: 16rem minimum per item, gap-4, auto-fit (items stretch) -->
<div data-slot="auto-grid"
     style="--auto-grid-min:16rem"
     class="grid [grid-template-columns:repeat(auto-fit,minmax(min(var(--auto-grid-min,16rem),100%),1fr))] gap-4">
  <div class="rounded-lg border bg-card p-4 text-card-foreground">Item 1</div>
  <div class="rounded-lg border bg-card p-4 text-card-foreground">Item 2</div>
  <div class="rounded-lg border bg-card p-4 text-card-foreground">Item 3</div>
  <div class="rounded-lg border bg-card p-4 text-card-foreground">Item 4</div>
</div>

<!-- As a list of cards: <ul> root, <li> children, wider min, larger gap -->
<ul data-slot="auto-grid"
    style="--auto-grid-min:20rem"
    class="grid [grid-template-columns:repeat(auto-fit,minmax(min(var(--auto-grid-min,16rem),100%),1fr))] gap-6">
  <li class="rounded-lg border bg-card p-4 text-card-foreground">Card A</li>
  <li class="rounded-lg border bg-card p-4 text-card-foreground">Card B</li>
  <li class="rounded-lg border bg-card p-4 text-card-foreground">Card C</li>
</ul>

<!-- auto-fill: empty trailing tracks are kept so a half-empty row stays
     aligned to the column rhythm instead of stretching -->
<div data-slot="auto-grid" data-fill="true"
     style="--auto-grid-min:12rem"
     class="grid [grid-template-columns:repeat(auto-fill,minmax(min(var(--auto-grid-min,16rem),100%),1fr))] gap-4">
  <div class="rounded-lg border bg-card p-4 text-card-foreground">One</div>
  <div class="rounded-lg border bg-card p-4 text-card-foreground">Two</div>
</div>