Badge

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

// Badge — shadcn-htmx, htmx v4 + Tailwind v4.
//
// Source of truth (variants + base class 1:1):
//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/badge.tsx
//
// A non-interactive visual marker. Renders as <span> by default. Pass
// `as="a"` (or `asChild` with a child anchor) to make it a link — the
// upstream uses Radix Slot.Root; we use cloneElement.
//
// Accessibility:
//   - The badge's content (text) IS the accessible name. If you render an
//     icon-only badge, set `ariaLabel` so screen readers can name it.
//   - Status-style badges ("New", "3 unread") that update in place should
//     live inside an aria-live region (use Alert / Toast for that, not
//     Badge). Badge itself is presentational.
//   - See repos/mdn/files/en-us/web/html/reference/elements/span/index.md for
//     <span> semantics (none — it's a generic inline container).

export type BadgeVariant =
  | "default"
  | "secondary"
  | "destructive"
  | "outline"
  | "ghost"
  | "link"

const base =
  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] " +
  "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " +
  "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " +
  "[&>svg]:pointer-events-none [&>svg]:size-3"

const variants: Record<BadgeVariant, string> = {
  default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
  secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
  destructive:
    "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
  outline:
    "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
  ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
  link: "text-primary underline-offset-4 [a&]:hover:underline",
}

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

type BadgeProps = PropsWithChildren<{
  variant?: BadgeVariant
  class?: ClassValue
  id?: string
  ariaLabel?: string
  ariaLabelledby?: string
  // Render as a different element. <a> is the common case (link badge).
  as?: "span" | "a" | "div" | "button"
  href?: string
  // SSR-friendly equivalent of shadcn's asChild — clone the single JSX
  // child and merge classes onto it. Useful for wrapping a custom <Link>.
  asChild?: boolean
}>

export function Badge(props: BadgeProps) {
  const {
    children,
    variant,
    class: className,
    as,
    href,
    asChild,
    ariaLabel,
    ariaLabelledby,
    id,
    ...rest
  } = props

  const classes = badgeClasses({ variant, class: className })

  if (asChild && isValidElement(children)) {
    const child = children as any
    return cloneElement(child, {
      ...rest,
      class: cn(classes, child?.props?.class),
      "data-slot": "badge",
      "data-variant": variant ?? "default",
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledby,
    })
  }

  const Tag: any = as ?? (href ? "a" : "span")
  return (
    <Tag
      id={id}
      href={href}
      data-slot="badge"
      data-variant={variant ?? "default"}
      class={classes}
      aria-label={ariaLabel}
      aria-labelledby={ariaLabelledby}
      {...rest}
    >
      {children}
    </Tag>
  )
}

{# Badge macro — shadcn-htmx, htmx v4 + Tailwind v4.
   Mirrors registry/ui/badge.tsx. Renders <span> by default; pass tag="a"
   + href for a link badge, tag="button" for an interactive one.

   Usage:
     {% from "components/badge.html" import badge %}
     {{ badge("New", variant="default") }}
     {{ badge("Unstable", variant="destructive") }}
     {{ badge("Docs", tag="a", href="/docs") }} #}

{% macro badge(
    text,
    variant="default",
    tag="span",
    href=none,
    id=none,
    aria_label=none,
    aria_labelledby=none,
    extra_class="",
    **attrs
) %}
{%- set base -%}
inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3
{%- endset -%}
{%- set variants = {
    "default": "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
    "secondary": "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
    "destructive": "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
    "outline": "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
    "ghost": "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
    "link": "text-primary underline-offset-4 [a&]:hover:underline"
} -%}
<{{ tag }}
  {%- if id %} id="{{ id }}"{% endif %}
  {%- if href and tag == "a" %} href="{{ href }}"{% endif %}
  {%- if aria_label %} aria-label="{{ aria_label }}"{% endif %}
  {%- if aria_labelledby %} aria-labelledby="{{ aria_labelledby }}"{% endif %}
  data-slot="badge"
  data-variant="{{ variant }}"
  class="{{ base }} {{ variants[variant] }} {{ extra_class }}"
  {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}="{{ v }}"{% endfor -%}
>{{ text }}</{{ tag }}>
{% endmacro %}

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

  Usage:

      type BadgeArgs struct {
          Text                 string
          Variant              string // default | secondary | destructive | outline | ghost | link
          Tag                  string // "span" (default) | "a" | "div" | "button"
          Href                 string
          ID, AriaLabel        string
          AriaLabelledby       string
          Attrs                map[string]string
      }
*/}}

{{define "badge"}}
{{- $tag := or .Tag "span" -}}
{{- $variant := or .Variant "default" -}}
{{- $base := "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3" -}}
{{- $variants := dict
    "default" "bg-primary text-primary-foreground [a&]:hover:bg-primary/90"
    "secondary" "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90"
    "destructive" "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90"
    "outline" "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
    "ghost" "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
    "link" "text-primary underline-offset-4 [a&]:hover:underline" -}}
<{{$tag}}
  {{- if .ID}} id="{{.ID}}"{{end}}
  {{- if and (eq $tag "a") .Href}} href="{{.Href}}"{{end}}
  {{- if .AriaLabel}} aria-label="{{.AriaLabel}}"{{end}}
  {{- if .AriaLabelledby}} aria-labelledby="{{.AriaLabelledby}}"{{end}}
  data-slot="badge" data-variant="{{$variant}}"
  class="{{$base}} {{index $variants $variant}}"
  {{- range $k, $v := .Attrs}} {{$k}}="{{$v}}"{{end -}}
>{{.Text}}</{{$tag}}>
{{end}}

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

  Mirrors registry/ui/badge.tsx. Non-interactive visual marker; renders
  as `<span>` by default. Pass `as="a"` + `href` for a link badge,
  `as="button"` for a clickable one.

  Accessibility: badge text is the accessible name. Use `aria-label` for
  icon-only badges. Status badges that change in place should live inside
  an `aria-live` region (see Alert / Toast).
  """

  use Phoenix.Component

  @base "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] " <>
          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " <>
          "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " <>
          "[&>svg]:pointer-events-none [&>svg]:size-3"

  @variants %{
    "default" => "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
    "secondary" =>
      "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
    "destructive" =>
      "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
    "outline" =>
      "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
    "ghost" => "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
    "link" => "text-primary underline-offset-4 [a&]:hover:underline"
  }

  attr :variant, :string,
    default: "default",
    values: ~w(default secondary destructive outline ghost link)

  attr :as, :string, default: "span", values: ~w(span a div button)
  attr :href, :string, default: nil
  attr :class, :string, default: nil
  attr :rest, :global

  slot :inner_block, required: true

  def badge(assigns) do
    assigns =
      assigns
      |> assign(:variant_class, Map.fetch!(@variants, assigns.variant))
      |> assign(:base_class, @base)

    ~H"""
    <.dynamic_tag
      tag_name={@as}
      data-slot="badge"
      data-variant={@variant}
      href={if @as == "a", do: @href}
      class={[@base_class, @variant_class, @class]}
      {@rest}
    >
      {render_slot(@inner_block)}
    </.dynamic_tag>
    """
  end
end

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

  BASE (all variants):
    inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden
    rounded-full border border-transparent px-2 py-0.5 text-xs font-medium
    whitespace-nowrap transition-[color,box-shadow]
    focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50
    aria-invalid:border-destructive aria-invalid:ring-destructive/20
    dark:aria-invalid:ring-destructive/40
    [&>svg]:pointer-events-none [&>svg]:size-3
-->

<!-- default -->
<span data-slot="badge" data-variant="default"
  class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3 bg-primary text-primary-foreground">
  New
</span>

<!-- secondary -->
<span data-slot="badge" data-variant="secondary"
  class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3 bg-secondary text-secondary-foreground">
  Beta
</span>

<!-- destructive -->
<span data-slot="badge" data-variant="destructive"
  class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3 bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40">
  Unstable
</span>

<!-- outline -->
<span data-slot="badge" data-variant="outline"
  class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3 border-border text-foreground">
  Draft
</span>

<!-- ghost -->
<span data-slot="badge" data-variant="ghost"
  class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3 text-foreground">
  Pinned
</span>

<!-- Link variant (as anchor) -->
<a href="/docs/badge" data-slot="badge" data-variant="link"
  class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3 text-primary underline-offset-4 hover:underline">
  Read docs
</a>

<!-- Icon-only badge — set aria-label so it has an accessible name -->
<span data-slot="badge" data-variant="destructive" aria-label="3 unread notifications"
  class="inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3 bg-destructive text-white">
  3
</span>