Kbd

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

// Kbd — shadcn-htmx, htmx v4 + Tailwind v4.
//
// Native element (source of truth):
//   repos/mdn/files/en-us/web/html/reference/elements/kbd/index.md
//     - <kbd> denotes textual user input from a keyboard / voice / other
//       text-entry device. Implicit ARIA role: "no corresponding role"
//       (it's phrasing content, announced as plain text). No interaction,
//       so this component ships ZERO JavaScript.
//     - MDN's "Representing keystrokes within an input" pattern nests a
//       <kbd> per key inside an outer <kbd> that represents the whole
//       shortcut. We follow that: <KbdGroup> is the outer <kbd>, each
//       <Kbd> is an inner key. A lone <Kbd> (no group) is still a valid
//       single-key <kbd>.
//
// Visual styling translated from shadcn/ui's Kbd (kept on-brand with our
// theme tokens, not copied verbatim):
//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/kbd.tsx
//
// We use ONLY existing theme tokens (bg-muted / text-muted-foreground /
// border). select-none + pointer-events-none keep the key glyphs from being
// selected or clicked — they are a label, not a control.

const kbdBase =
  "pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none items-center justify-center gap-1 " +
  "rounded-sm border bg-muted px-1 font-sans text-xs font-medium text-muted-foreground " +
  "[&_svg:not([class*='size-'])]:size-3"

// The outer <kbd> that wraps a sequence of keys. MDN allows nesting <kbd>
// inside <kbd>; the group carries no background of its own so the inner
// keys read as discrete caps with separators (the "+" text) between them.
const kbdGroupBase = "inline-flex w-fit items-center gap-1 align-middle"

export function kbdClasses(opts?: { class?: ClassValue }): string {
  return cn(kbdBase, opts?.class)
}

export function kbdGroupClasses(opts?: { class?: ClassValue }): string {
  return cn(kbdGroupBase, opts?.class)
}

type KbdProps = PropsWithChildren<{
  class?: ClassValue
  id?: string
  // Accessible name override — useful for symbol-only keys (e.g. content
  // "⌘" with ariaLabel="Command"). See aria-label on MDN.
  ariaLabel?: string
  title?: string
  // htmx attrs / data-* / aria-* flow through via {...rest}.
}>

// A single key cap. Renders one <kbd>. Use inside <KbdGroup> for shortcuts.
export function Kbd(props: KbdProps) {
  const { children, class: className, id, ariaLabel, title, ...rest } = props
  return (
    <kbd
      id={id}
      data-slot="kbd"
      class={kbdClasses({ class: className })}
      aria-label={ariaLabel}
      title={title}
      {...rest}
    >
      {children}
    </kbd>
  )
}

type KbdGroupProps = PropsWithChildren<{
  class?: ClassValue
  id?: string
  // Convenience: render a shortcut from a list of key labels, joined by a
  // visible separator. Omit `keys` and pass children to compose manually.
  keys?: Child[]
  // Separator rendered between keys (default "+"). Set "" for none.
  separator?: Child
  // Accessible name for the whole shortcut, e.g. "Control Shift R". The
  // outer <kbd> is the labelled unit; per-key caps inherit no extra role.
  ariaLabel?: string
}>

// The outer <kbd> wrapping a key sequence (MDN nested-kbd pattern). When
// `keys` is supplied it renders one <Kbd> per entry with a separator text
// node between them; otherwise it renders `children` verbatim so callers
// can mix keys, "+" text, and icons by hand.
export function KbdGroup(props: KbdGroupProps) {
  const {
    children,
    class: className,
    id,
    keys,
    separator = "+",
    ariaLabel,
    ...rest
  } = props

  let body: Child
  if (keys && keys.length > 0) {
    const parts: Child[] = []
    keys.forEach((k, i) => {
      if (i > 0 && separator !== "" && separator != null) {
        parts.push(
          <span aria-hidden="true" class="text-muted-foreground/70">
            {separator}
          </span>,
        )
      }
      parts.push(<Kbd>{k}</Kbd>)
    })
    body = parts
  } else {
    body = children
  }

  return (
    <kbd
      id={id}
      data-slot="kbd-group"
      class={kbdGroupClasses({ class: className })}
      aria-label={ariaLabel}
      {...rest}
    >
      {body}
    </kbd>
  )
}

{# Kbd macros — shadcn-htmx, htmx v4 + Tailwind v4.
   Mirrors registry/ui/kbd.tsx. Zero JavaScript — <kbd> is phrasing
   content with no interaction.

   Native element:
     repos/mdn/files/en-us/web/html/reference/elements/kbd/index.md
     (nested <kbd> per key inside an outer <kbd> = MDN keystroke pattern)

   Usage:
     {% from "components/kbd.html" import kbd, kbd_group %}
     {{ kbd("Esc") }}
     {{ kbd_group(["Ctrl", "Shift", "R"]) }}
     {% call kbd_group() %}<kbd ...>⌘</kbd> + <kbd ...>K</kbd>{% endcall %} #}

{%- set kbd_base -%}
pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none items-center justify-center gap-1 rounded-sm border bg-muted px-1 font-sans text-xs font-medium text-muted-foreground [&_svg:not([class*='size-'])]:size-3
{%- endset -%}

{%- set kbd_group_base -%}
inline-flex w-fit items-center gap-1 align-middle
{%- endset -%}

{# A single key cap → one <kbd>. #}
{% macro kbd(
    text,
    id=none,
    aria_label=none,
    title=none,
    extra_class="",
    **attrs
) %}
<kbd
  {%- if id %} id="{{ id }}"{% endif %}
  data-slot="kbd"
  class="{{ kbd_base }} {{ extra_class }}"
  {%- if aria_label %} aria-label="{{ aria_label }}"{% endif %}
  {%- if title %} title="{{ title }}"{% endif %}
  {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}="{{ v }}"{% endfor -%}
>{{ text }}</kbd>
{%- endmacro %}

{# The outer <kbd> wrapping a shortcut. Pass `keys` (a list) to render a
   key cap per entry joined by `separator`, or use {% call %} with a body. #}
{% macro kbd_group(
    keys=none,
    separator="+",
    id=none,
    aria_label=none,
    extra_class="",
    **attrs
) %}
<kbd
  {%- if id %} id="{{ id }}"{% endif %}
  data-slot="kbd-group"
  class="{{ kbd_group_base }} {{ extra_class }}"
  {%- if aria_label %} aria-label="{{ aria_label }}"{% endif %}
  {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}="{{ v }}"{% endfor -%}
>
  {%- if keys -%}
    {%- for key in keys -%}
      {%- if not loop.first and separator -%}<span aria-hidden="true" class="text-muted-foreground/70">{{ separator }}</span>{%- endif -%}
      <kbd data-slot="kbd" class="{{ kbd_base }}">{{ key }}</kbd>
    {%- endfor -%}
  {%- else -%}
    {{ caller() }}
  {%- endif -%}
</kbd>
{%- endmacro %}

{{/*
  Kbd templates — shadcn-htmx, htmx v4 + Tailwind v4.
  Mirrors registry/ui/kbd.tsx. Zero JavaScript — <kbd> is phrasing content.

  Native element:
    repos/mdn/files/en-us/web/html/reference/elements/kbd/index.md
    (nested <kbd> per key inside an outer <kbd> = MDN keystroke pattern)

  Usage:

      type KbdArgs struct {
          Text             string
          ID, AriaLabel    string
          Title            string
          Attrs            map[string]string
      }
      type KbdGroupArgs struct {
          Keys             []string // one cap per entry
          Separator        string   // default "+"
          ID, AriaLabel    string
          Body             template.HTML // used when Keys is empty
          Attrs            map[string]string
      }

      {{template "kbd" (dict "Text" "Esc")}}
      {{template "kbd-group" (dict "Keys" (list "Ctrl" "Shift" "R"))}}
*/}}

{{define "kbd"}}
{{- $base := "pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none items-center justify-center gap-1 rounded-sm border bg-muted px-1 font-sans text-xs font-medium text-muted-foreground [&_svg:not([class*='size-'])]:size-3" -}}
<kbd
  {{- if .ID}} id="{{.ID}}"{{end}}
  data-slot="kbd"
  class="{{$base}}"
  {{- if .AriaLabel}} aria-label="{{.AriaLabel}}"{{end}}
  {{- if .Title}} title="{{.Title}}"{{end}}
  {{- range $k, $v := .Attrs}} {{$k}}="{{$v}}"{{end -}}
>{{.Text}}</kbd>
{{end}}

{{define "kbd-group"}}
{{- $base := "pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none items-center justify-center gap-1 rounded-sm border bg-muted px-1 font-sans text-xs font-medium text-muted-foreground [&_svg:not([class*='size-'])]:size-3" -}}
{{- $groupBase := "inline-flex w-fit items-center gap-1 align-middle" -}}
{{- $sep := or .Separator "+" -}}
<kbd
  {{- if .ID}} id="{{.ID}}"{{end}}
  data-slot="kbd-group"
  class="{{$groupBase}}"
  {{- if .AriaLabel}} aria-label="{{.AriaLabel}}"{{end}}
  {{- range $k, $v := .Attrs}} {{$k}}="{{$v}}"{{end -}}
>
  {{- if .Keys -}}
    {{- range $i, $key := .Keys -}}
      {{- if and (gt $i 0) $sep -}}<span aria-hidden="true" class="text-muted-foreground/70">{{$sep}}</span>{{- end -}}
      <kbd data-slot="kbd" class="{{$base}}">{{$key}}</kbd>
    {{- end -}}
  {{- else -}}
    {{- htmlSafe .Body -}}
  {{- end -}}
</kbd>
{{end}}

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

  Mirrors registry/ui/kbd.tsx. Zero JavaScript — `<kbd>` is phrasing
  content with no interaction.

  Native element:
    repos/mdn/files/en-us/web/html/reference/elements/kbd/index.md
    (nested `<kbd>` per key inside an outer `<kbd>` = MDN keystroke pattern)

  `kbd/1` renders one key cap. `kbd_group/1` renders the outer `<kbd>`
  wrapping a shortcut — pass `keys` for an auto-joined sequence, or use the
  default slot to compose the body by hand.
  """

  use Phoenix.Component

  @base "pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none items-center justify-center gap-1 " <>
          "rounded-sm border bg-muted px-1 font-sans text-xs font-medium text-muted-foreground " <>
          "[&_svg:not([class*='size-'])]:size-3"

  @group_base "inline-flex w-fit items-center gap-1 align-middle"

  attr :id, :string, default: nil
  attr :aria_label, :string, default: nil
  attr :title, :string, default: nil
  attr :class, :string, default: nil
  attr :rest, :global

  slot :inner_block, required: true

  def kbd(assigns) do
    assigns = assign(assigns, :base_class, @base)

    ~H"""
    <kbd
      id={@id}
      data-slot="kbd"
      class={[@base_class, @class]}
      aria-label={@aria_label}
      title={@title}
      {@rest}
    >
      {render_slot(@inner_block)}
    </kbd>
    """
  end

  attr :keys, :list, default: nil
  attr :separator, :string, default: "+"
  attr :id, :string, default: nil
  attr :aria_label, :string, default: nil
  attr :class, :string, default: nil
  attr :rest, :global

  slot :inner_block

  def kbd_group(assigns) do
    assigns =
      assigns
      |> assign(:base_class, @base)
      |> assign(:group_class, @group_base)

    ~H"""
    <kbd
      id={@id}
      data-slot="kbd-group"
      class={[@group_class, @class]}
      aria-label={@aria_label}
      {@rest}
    >
      <%= if @keys && @keys != [] do %>
        <%= for {key, i} <- Enum.with_index(@keys) do %>
          <span :if={i > 0 && @separator != ""} aria-hidden="true" class="text-muted-foreground/70">{@separator}</span>
          <kbd data-slot="kbd" class={@base_class}>{key}</kbd>
        <% end %>
      <% else %>
        {render_slot(@inner_block)}
      <% end %>
    </kbd>
    """
  end
end

<!--
  shadcn-htmx — raw <kbd> snippets. Mirrors registry/ui/kbd.tsx.
  Zero JavaScript — <kbd> is phrasing content with no interaction.

  Native element:
    repos/mdn/files/en-us/web/html/reference/elements/kbd/index.md
    (nested <kbd> per key inside an outer <kbd> = MDN keystroke pattern)

  KEY CAP base (data-slot="kbd"):
    pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none
    items-center justify-center gap-1 rounded-sm border bg-muted px-1
    font-sans text-xs font-medium text-muted-foreground
    [&_svg:not([class*='size-'])]:size-3

  GROUP base (data-slot="kbd-group", the outer wrapping <kbd>):
    inline-flex w-fit items-center gap-1 align-middle
  Relies only on theme tokens; no script.
-->

<!-- Single key -->
<kbd data-slot="kbd"
  class="pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none items-center justify-center gap-1 rounded-sm border bg-muted px-1 font-sans text-xs font-medium text-muted-foreground [&_svg:not([class*='size-'])]:size-3">
  Esc
</kbd>

<!-- Shortcut: outer <kbd> groups inner key caps, "+" between them -->
<kbd data-slot="kbd-group" class="inline-flex w-fit items-center gap-1 align-middle">
  <kbd data-slot="kbd"
    class="pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none items-center justify-center gap-1 rounded-sm border bg-muted px-1 font-sans text-xs font-medium text-muted-foreground [&_svg:not([class*='size-'])]:size-3">Ctrl</kbd>
  <span aria-hidden="true" class="text-muted-foreground/70">+</span>
  <kbd data-slot="kbd"
    class="pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none items-center justify-center gap-1 rounded-sm border bg-muted px-1 font-sans text-xs font-medium text-muted-foreground [&_svg:not([class*='size-'])]:size-3">Shift</kbd>
  <span aria-hidden="true" class="text-muted-foreground/70">+</span>
  <kbd data-slot="kbd"
    class="pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none items-center justify-center gap-1 rounded-sm border bg-muted px-1 font-sans text-xs font-medium text-muted-foreground [&_svg:not([class*='size-'])]:size-3">R</kbd>
</kbd>

<!-- Symbol key with an accessible name (aria-label) for screen readers -->
<kbd data-slot="kbd" aria-label="Command"
  class="pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none items-center justify-center gap-1 rounded-sm border bg-muted px-1 font-sans text-xs font-medium text-muted-foreground [&_svg:not([class*='size-'])]:size-3">
  ⌘
</kbd>