Alert

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

// Alert — shadcn-htmx, htmx v4 + Tailwind v4.
//
// Source of truth (visual layout):
//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/alert.tsx
//
// Spec divergence from upstream — important: shadcn hardcodes role="alert"
// on every instance. That role is implicit aria-live="assertive" and
// interrupts the user's current screen-reader output. APG and WCAG advice
// is to reserve "assertive" announcements for genuinely time-sensitive
// content (errors after submit, lost connection). For typical
// informational messages ("Saved", "Filter updated") "polite" is correct;
// for static page content that's there on load, no role at all is
// correct. So we expose `live` and default to "polite" (role="status").
//
// Refs:
//   repos/aria-practices/content/patterns/alert/  ("alert" role guidance)
//   repos/mdn/files/en-us/web/accessibility/aria/reference/roles/alert_role/
//   repos/mdn/files/en-us/web/accessibility/aria/reference/roles/status_role/
//   repos/mdn/files/en-us/web/accessibility/aria/reference/attributes/aria-live/
//
// Composition (matches shadcn):
//   <Alert>
//     <SomeIcon />
//     <AlertTitle>Heads up!</AlertTitle>
//     <AlertDescription>Body of the alert…</AlertDescription>
//   </Alert>

export type AlertVariant = "default" | "destructive" | "success" | "warning" | "info"

// "off"      — static informational content; no aria-live region.
// "polite"   — implicit role="status". AT waits until idle to announce.
// "assertive"— implicit role="alert". AT interrupts current speech. Use sparingly.
export type AlertLive = "off" | "polite" | "assertive"

const base =
  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm " +
  "has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 " +
  "[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"

const variants: Record<AlertVariant, string> = {
  default: "bg-card text-card-foreground",
  destructive:
    "border-destructive/30 bg-destructive/5 text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
  success:
    "border-emerald-500/30 bg-emerald-500/5 text-emerald-700 *:data-[slot=alert-description]:text-emerald-700/90 dark:text-emerald-300 dark:*:data-[slot=alert-description]:text-emerald-300/90 [&>svg]:text-current",
  warning:
    "border-amber-500/30 bg-amber-500/10 text-amber-800 *:data-[slot=alert-description]:text-amber-800/90 dark:text-amber-200 dark:*:data-[slot=alert-description]:text-amber-200/90 [&>svg]:text-current",
  info:
    "border-sky-500/30 bg-sky-500/5 text-sky-800 *:data-[slot=alert-description]:text-sky-800/90 dark:text-sky-200 dark:*:data-[slot=alert-description]:text-sky-200/90 [&>svg]:text-current",
}

export function alertClasses(opts?: {
  variant?: AlertVariant
  class?: ClassValue
}): string {
  const variant = opts?.variant ?? "default"
  return cn(base, variants[variant], opts?.class)
}

type AlertProps = PropsWithChildren<{
  variant?: AlertVariant
  // ARIA live-region politeness. "polite" (default) sets role="status".
  // "assertive" sets role="alert". "off" omits both — use for static info.
  live?: AlertLive
  // Override the role directly if you need something unusual; takes
  // precedence over `live`.
  role?: "alert" | "status" | "log" | "none"
  // Most alerts contain the full message at render time, so aria-atomic
  // defaults to true (read the whole alert, not just changed bits).
  ariaAtomic?: boolean
  // Name the live region for AT. Point ariaLabelledby at the id of the
  // AlertTitle inside, or pass ariaLabel for a literal name.
  // status_role lists aria-label / aria-labelledby as associated properties:
  // repos/mdn/files/en-us/web/accessibility/aria/reference/roles/status_role/index.md:28-29
  ariaLabelledby?: string
  ariaLabel?: string
  id?: string
  class?: ClassValue
}>

export function Alert(props: AlertProps) {
  const {
    children,
    variant,
    live = "polite",
    role: roleOverride,
    ariaAtomic = true,
    ariaLabelledby,
    ariaLabel,
    id,
    class: className,
  } = props
  // Map live → role + aria-live. Both attributes communicate the same
  // thing; some older AT pays attention to one and not the other, so we
  // set both for resilience.
  const role =
    roleOverride ??
    (live === "assertive" ? "alert" : live === "polite" ? "status" : undefined)
  const ariaLive = live === "off" ? undefined : live
  return (
    <div
      id={id}
      data-slot="alert"
      data-variant={variant ?? "default"}
      role={role}
      aria-live={ariaLive}
      aria-atomic={ariaAtomic ? "true" : undefined}
      aria-labelledby={ariaLabelledby}
      aria-label={ariaLabel}
      class={alertClasses({ variant, class: className })}
    >
      {children}
    </div>
  )
}

export function AlertTitle(
  props: PropsWithChildren<{ class?: ClassValue }>,
) {
  return (
    <div
      data-slot="alert-title"
      class={cn(
        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
        props.class,
      )}
    >
      {props.children}
    </div>
  )
}

export function AlertDescription(
  props: PropsWithChildren<{ class?: ClassValue }>,
) {
  return (
    <div
      data-slot="alert-description"
      class={cn(
        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
        props.class,
      )}
    >
      {props.children}
    </div>
  )
}

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

   - live="polite"    (default) → role="status",  aria-live="polite"
   - live="assertive"           → role="alert",   aria-live="assertive"
   - live="off"                 → no role; static informational content

   Usage:
     {% from "components/alert.html" import alert_open, alert_close, alert_title, alert_description %}

     {{ alert_open(variant="success") }}
       {{ alert_title("Saved") }}
       {{ alert_description("Your changes have been recorded.") }}
     {{ alert_close() }} #}

{# aria_labelledby / aria_label name the live region for AT — point
   aria_labelledby at the id of an alert_title, or pass aria_label.
   status_role associated properties:
   repos/mdn/files/en-us/web/accessibility/aria/reference/roles/status_role/index.md:28-29 #}
{% macro alert_open(
    variant="default",
    live="polite",
    role=none,
    aria_atomic=true,
    aria_labelledby=none,
    aria_label=none,
    id=none,
    extra_class=""
) -%}
{%- set base -%}
relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current
{%- endset -%}
{%- set variants = {
    "default": "bg-card text-card-foreground",
    "destructive": "border-destructive/30 bg-destructive/5 text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
    "success": "border-emerald-500/30 bg-emerald-500/5 text-emerald-700 *:data-[slot=alert-description]:text-emerald-700/90 dark:text-emerald-300 dark:*:data-[slot=alert-description]:text-emerald-300/90 [&>svg]:text-current",
    "warning": "border-amber-500/30 bg-amber-500/10 text-amber-800 *:data-[slot=alert-description]:text-amber-800/90 dark:text-amber-200 dark:*:data-[slot=alert-description]:text-amber-200/90 [&>svg]:text-current",
    "info": "border-sky-500/30 bg-sky-500/5 text-sky-800 *:data-[slot=alert-description]:text-sky-800/90 dark:text-sky-200 dark:*:data-[slot=alert-description]:text-sky-200/90 [&>svg]:text-current"
} -%}
{%- set computed_role = role or ({"assertive":"alert","polite":"status","off":none}[live]) -%}
<div
  {%- if id %} id="{{ id }}"{% endif %}
  data-slot="alert"
  data-variant="{{ variant }}"
  {%- if computed_role %} role="{{ computed_role }}"{% endif %}
  {%- if live != "off" %} aria-live="{{ live }}"{% endif %}
  {%- if aria_atomic %} aria-atomic="true"{% endif %}
  {%- if aria_labelledby %} aria-labelledby="{{ aria_labelledby }}"{% endif %}
  {%- if aria_label %} aria-label="{{ aria_label }}"{% endif %}
  class="{{ base }} {{ variants[variant] }} {{ extra_class }}">
{%- endmacro %}

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

{% macro alert_title(text, extra_class="") -%}
<div data-slot="alert-title" class="col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight {{ extra_class }}">{{ text }}</div>
{%- endmacro %}

{% macro alert_description(text, extra_class="") -%}
<div data-slot="alert-description" class="col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed {{ extra_class }}">{{ text }}</div>
{%- endmacro %}

{{/*
  Alert template — shadcn-htmx, htmx v4 + Tailwind v4.
  Mirrors registry/ui/alert.tsx.

      type AlertArgs struct {
          Variant   string // default | destructive | success | warning | info
          Live      string // off | polite (default) | assertive
          Role      string // override; one of alert | status | log | none
          Title     string
          Body      template.HTML
          AriaAtomic *bool  // nil = default true (read full alert); set to &false to omit
          // Name the live region for AT: AriaLabelledby points at an
          // alert-title id; AriaLabel is a literal name. status_role
          // associated properties:
          //   repos/mdn/.../roles/status_role/index.md:28-29
          AriaLabelledby string
          AriaLabel      string
          ID        string
      }
*/}}

{{define "alert"}}
{{- $variant := or .Variant "default" -}}
{{- $live := or .Live "polite" -}}
{{- $ariaAtomic := true -}}{{- if ne .AriaAtomic nil -}}{{- $ariaAtomic = deref .AriaAtomic -}}{{- end -}}
{{- $base := "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current" -}}
{{- $variants := dict
    "default" "bg-card text-card-foreground"
    "destructive" "border-destructive/30 bg-destructive/5 text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
    "success" "border-emerald-500/30 bg-emerald-500/5 text-emerald-700 *:data-[slot=alert-description]:text-emerald-700/90 dark:text-emerald-300 dark:*:data-[slot=alert-description]:text-emerald-300/90 [&>svg]:text-current"
    "warning" "border-amber-500/30 bg-amber-500/10 text-amber-800 *:data-[slot=alert-description]:text-amber-800/90 dark:text-amber-200 dark:*:data-[slot=alert-description]:text-amber-200/90 [&>svg]:text-current"
    "info" "border-sky-500/30 bg-sky-500/5 text-sky-800 *:data-[slot=alert-description]:text-sky-800/90 dark:text-sky-200 dark:*:data-[slot=alert-description]:text-sky-200/90 [&>svg]:text-current" -}}
{{- $role := .Role -}}
{{- if not $role -}}
  {{- if eq $live "assertive" -}}{{- $role = "alert" -}}
  {{- else if eq $live "polite" -}}{{- $role = "status" -}}
  {{- end -}}
{{- end -}}
<div {{if .ID}}id="{{.ID}}"{{end}}
     data-slot="alert" data-variant="{{$variant}}"
     {{if $role}}role="{{$role}}"{{end}}
     {{if ne $live "off"}}aria-live="{{$live}}"{{end}}
     {{if $ariaAtomic}}aria-atomic="true"{{end}}
     {{if .AriaLabelledby}}aria-labelledby="{{.AriaLabelledby}}"{{end}}
     {{if .AriaLabel}}aria-label="{{.AriaLabel}}"{{end}}
     class="{{$base}} {{index $variants $variant}}">
  {{- if .Title}}<div data-slot="alert-title" class="col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight">{{.Title}}</div>{{end}}
  {{- if .Body}}<div data-slot="alert-description" class="col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed">{{.Body}}</div>{{end}}
</div>
{{end}}

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

  Mirrors registry/ui/alert.tsx. Spec-divergence note: shadcn upstream
  hardcodes role="alert" (assertive). We expose `live` so polite/static
  cases use role="status" or no role, per APG.

  ## Examples

      <.alert variant="success">
        <.alert_title>Saved</.alert_title>
        <.alert_description>Your changes have been recorded.</.alert_description>
      </.alert>

      # Truly time-critical — interrupts AT
      <.alert variant="destructive" live="assertive">
        <.alert_title>Connection lost</.alert_title>
        <.alert_description>Trying to reconnect…</.alert_description>
      </.alert>
  """

  use Phoenix.Component

  @base "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm " <>
          "has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 " <>
          "[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"

  @variants %{
    "default" => "bg-card text-card-foreground",
    "destructive" =>
      "border-destructive/30 bg-destructive/5 text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
    "success" =>
      "border-emerald-500/30 bg-emerald-500/5 text-emerald-700 *:data-[slot=alert-description]:text-emerald-700/90 dark:text-emerald-300 dark:*:data-[slot=alert-description]:text-emerald-300/90 [&>svg]:text-current",
    "warning" =>
      "border-amber-500/30 bg-amber-500/10 text-amber-800 *:data-[slot=alert-description]:text-amber-800/90 dark:text-amber-200 dark:*:data-[slot=alert-description]:text-amber-200/90 [&>svg]:text-current",
    "info" =>
      "border-sky-500/30 bg-sky-500/5 text-sky-800 *:data-[slot=alert-description]:text-sky-800/90 dark:text-sky-200 dark:*:data-[slot=alert-description]:text-sky-200/90 [&>svg]:text-current"
  }

  attr :variant, :string, default: "default", values: ~w(default destructive success warning info)
  attr :live, :string, default: "polite", values: ~w(off polite assertive)
  attr :role, :string, default: nil
  attr :aria_atomic, :boolean, default: true
  # Name the live region for AT: aria_labelledby points at an alert_title id,
  # aria_label is a literal name. status_role associated properties —
  # repos/mdn/files/en-us/web/accessibility/aria/reference/roles/status_role/index.md:28-29
  attr :aria_labelledby, :string, default: nil
  attr :aria_label, :string, default: nil
  attr :class, :string, default: nil
  attr :rest, :global
  slot :inner_block, required: true

  def alert(assigns) do
    role =
      assigns.role ||
        case assigns.live do
          "assertive" -> "alert"
          "polite" -> "status"
          _ -> nil
        end

    assigns =
      assigns
      |> assign(:variant_class, Map.fetch!(@variants, assigns.variant))
      |> assign(:base, @base)
      |> assign(:computed_role, role)

    ~H"""
    <div
      data-slot="alert"
      data-variant={@variant}
      role={@computed_role}
      aria-live={if @live != "off", do: @live}
      aria-atomic={if @aria_atomic, do: "true"}
      aria-labelledby={@aria_labelledby}
      aria-label={@aria_label}
      class={[@base, @variant_class, @class]}
      {@rest}
    >
      {render_slot(@inner_block)}
    </div>
    """
  end

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

  def alert_title(assigns) do
    ~H"""
    <div
      data-slot="alert-title"
      class={["col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", @class]}
    >
      {render_slot(@inner_block)}
    </div>
    """
  end

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

  def alert_description(assigns) do
    ~H"""
    <div
      data-slot="alert-description"
      class={[
        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
        @class
      ]}
    >
      {render_slot(@inner_block)}
    </div>
    """
  end
end

<!--
  shadcn-htmx — raw HTML alert snippets.

  Spec note (important): shadcn upstream hardcodes role="alert" (assertive,
  interrupts screen reader). APG prefers role="status" (polite) for most
  informational messages, and no role at all for static content. Pick:

    - role="status"  + aria-live="polite"     — "Saved", "Filter applied"
    - role="alert"   + aria-live="assertive"  — "Connection lost", critical errors
    - (no role)                               — static page-load content

  BASE:
    relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5
    rounded-lg border px-4 py-3 text-sm
    has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3
    [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current
-->

<!-- Default (polite) -->
<div data-slot="alert" data-variant="default" role="status" aria-live="polite" aria-atomic="true"
  class="relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border bg-card px-4 py-3 text-sm text-card-foreground has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current">
  <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" aria-hidden="true">
    <circle cx="12" cy="12" r="10" />
    <line x1="12" y1="8" x2="12" y2="12" />
    <line x1="12" y1="16" x2="12.01" y2="16" />
  </svg>
  <div data-slot="alert-title" class="col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight">Heads up</div>
  <div data-slot="alert-description" class="col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed">
    You can add components to your app using the CLI.
  </div>
</div>

<!-- Destructive (assertive — critical error) -->
<div data-slot="alert" data-variant="destructive" role="alert" aria-live="assertive" aria-atomic="true"
  class="relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current">
  <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" aria-hidden="true">
    <circle cx="12" cy="12" r="10" />
    <line x1="15" y1="9" x2="9" y2="15" />
    <line x1="9" y1="9" x2="15" y2="15" />
  </svg>
  <div data-slot="alert-title" class="col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight">Connection lost</div>
  <div data-slot="alert-description" class="col-start-2 grid justify-items-start gap-1 text-sm text-destructive/90">
    Trying to reconnect…
  </div>
</div>

<!-- Named live region: aria-labelledby points at the title so AT prefaces
     the announcement with it. status_role associated properties —
     repos/mdn/files/en-us/web/accessibility/aria/reference/roles/status_role/index.md:28-29 -->
<div data-slot="alert" data-variant="info" role="status" aria-live="polite" aria-atomic="true" aria-labelledby="alert-deploy-title"
  class="relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border border-sky-500/30 bg-sky-500/5 px-4 py-3 text-sm text-sky-800 dark:text-sky-200 has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current">
  <div id="alert-deploy-title" data-slot="alert-title" class="col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight">Deploy finished</div>
  <div data-slot="alert-description" class="col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed">
    Your site is live.
  </div>
</div>