Checkbox

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

// Native <input type="checkbox"> with shadcn polish. Source of truth:
//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/checkbox.tsx
//
// The upstream shadcn uses Radix Checkbox, which renders a styled div with
// role="checkbox" and hides the native input. We can't depend on Radix in
// our SSR setup, so we keep a real <input type="checkbox"> (form-submittable,
// keyboard-accessible, accessible-name aware) and layer a check icon on top.
//
// Pairing with a Label: use the htmlFor pattern — clicking the label toggles
// the checkbox. Indeterminate state must be set via JS (the HTML attribute
// alone won't do it); we mirror the data-state attribute on the wrapper so
// custom styling can react.

const inputBase =
  "peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-background shadow-xs transition-shadow outline-none " +
  "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " +
  "disabled:cursor-not-allowed disabled:opacity-50 " +
  "checked:border-primary checked:bg-primary " +
  "indeterminate:border-primary indeterminate:bg-primary " +
  "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " +
  "dark:bg-input/30"

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

type CheckboxProps = {
  id?: string
  name?: string
  value?: string
  checked?: boolean
  defaultChecked?: boolean
  // Render the SSR hook for an initially-indeterminate checkbox. `indeterminate`
  // is an IDL-only property with no HTML content attribute (WHATWG HTML: it is
  // initially false and "cannot be set using an HTML attribute"), so an SSR
  // component emits data-initial-indeterminate="true" and a tiny on-mount
  // script flips el.indeterminate. See repos/whatwg-html/source (indeterminate
  // IDL attribute) and the input/checkbox MDN reference.
  indeterminate?: boolean
  required?: boolean
  disabled?: boolean
  readonly?: boolean
  form?: string
  class?: ClassValue
  ariaLabel?: string
  ariaLabelledby?: string
  ariaDescribedby?: string
  ariaInvalid?: boolean
  // ID of a visible element containing an error message. Pair with
  // ariaInvalid for the full WCAG error-identification pattern.
  // See repos/mdn/files/en-us/web/accessibility/aria/reference/attributes/aria-errormessage/index.md
  ariaErrormessage?: string
  // ARIA flag for non-editable checkboxes. Unlike HTML readonly (not valid
  // on checkbox), aria-readonly keeps the element focusable + announces it
  // as read-only. Use when you want the user to land on the box and hear
  // *why* it's locked. See repos/mdn/files/en-us/web/accessibility/aria/reference/attributes/aria-readonly/index.md
  ariaReadonly?: boolean
  // Tri-state semantic. The DOM property `indeterminate` controls the
  // visual ::indeterminate pseudo (we set it from JS in docs); this prop
  // surfaces the same to assistive tech via aria-checked="mixed".
  // See repos/mdn/files/en-us/web/accessibility/aria/reference/roles/checkbox_role/index.md:30,66-67
  ariaChecked?: boolean | "mixed"
  // If this checkbox toggles visibility/state of other UI, point at the
  // controlled element's id.
  ariaControls?: string

  // htmx — fire on the input's change event. Useful for "save on toggle"
  // patterns where the server records the new state and may return updated
  // UI (e.g. a row swap).
  "hx-get"?: string
  "hx-post"?: string
  "hx-put"?: string
  "hx-patch"?: string
  "hx-target"?: string
  "hx-swap"?: string
  "hx-trigger"?: string
  "hx-vals"?: string
  "hx-include"?: string
}

export function Checkbox(props: CheckboxProps) {
  const {
    class: className,
    ariaLabel,
    ariaLabelledby,
    ariaDescribedby,
    ariaInvalid,
    ariaErrormessage,
    ariaReadonly,
    ariaChecked,
    ariaControls,
    checked,
    defaultChecked,
    indeterminate,
    ...rest
  } = props

  return (
    <span class="relative inline-flex size-4 shrink-0 align-middle">
      <input
        type="checkbox"
        class={checkboxClasses({ class: className })}
        aria-label={ariaLabel}
        aria-labelledby={ariaLabelledby}
        aria-describedby={ariaDescribedby}
        aria-invalid={ariaInvalid === undefined ? undefined : String(ariaInvalid)}
        aria-errormessage={ariaErrormessage}
        aria-readonly={ariaReadonly === undefined ? undefined : String(ariaReadonly)}
        aria-checked={ariaChecked === undefined ? undefined : String(ariaChecked)}
        aria-controls={ariaControls}
        data-slot="checkbox"
        // Hono JSX does not map defaultChecked -> checked like React. Resolve it
        // here so the prop is real: explicit `checked` wins, then `defaultChecked`,
        // and `false` serializes to no attribute (never an invalid defaultChecked="...").
        checked={(checked ?? defaultChecked) || undefined}
        // indeterminate has no HTML content attribute; emit the on-mount hook
        // a script reads to set el.indeterminate. See repos/whatwg-html/source.
        data-initial-indeterminate={indeterminate ? "true" : undefined}
        {...rest}
      />
      {/* Check icon — visible only when peer (the input) is :checked. */}
      <svg
        class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-checked:block"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="3"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <polyline points="20 6 9 17 4 12" />
      </svg>
      {/* Dash icon for the :indeterminate state. */}
      <svg
        class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-indeterminate:block"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="3"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <line x1="5" y1="12" x2="19" y2="12" />
      </svg>
    </span>
  )
}

{# Checkbox macro — shadcn-htmx, htmx v4 + Tailwind v4.
   Mirrors registry/ui/checkbox.tsx. The macro renders a native
   <input type="checkbox"> wrapped in a span so a check/dash SVG can layer
   on top via Tailwind's peer-checked / peer-indeterminate variants.

   Usage:
       {% from "components/checkbox.html" import checkbox %}
       <label class="flex items-center gap-2">
         {{ checkbox(id="terms", name="terms", required=true) }}
         I agree to the terms.
       </label> #}

{% macro checkbox(
    id=none,
    name=none,
    value=none,
    checked=false,
    indeterminate=false,
    required=false,
    disabled=false,
    readonly=false,
    form=none,
    aria_label=none,
    aria_labelledby=none,
    aria_describedby=none,
    aria_invalid=none,
    extra_class="",
    **attrs
) %}
{%- set base -%}
peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-background shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:bg-input/30
{%- endset -%}
<span class="relative inline-flex size-4 shrink-0 align-middle">
  <input type="checkbox"
         class="{{ base }} {{ extra_class }}"
         {%- if id %} id="{{ id }}"{% endif %}
         {%- if name %} name="{{ name }}"{% endif %}
         {%- if value is not none %} value="{{ value }}"{% endif %}
         {%- if checked %} checked{% endif %}
         {#- indeterminate is IDL-only (no HTML attribute per WHATWG HTML); emit
             the on-mount hook a script reads to set el.indeterminate. #}
         {%- if indeterminate %} data-initial-indeterminate="true"{% endif %}
         {%- if required %} required{% endif %}
         {%- if disabled %} disabled{% endif %}
         {%- if readonly %} readonly{% endif %}
         {%- if form %} form="{{ form }}"{% endif %}
         {%- if aria_label %} aria-label="{{ aria_label }}"{% endif %}
         {%- if aria_labelledby %} aria-labelledby="{{ aria_labelledby }}"{% endif %}
         {%- if aria_describedby %} aria-describedby="{{ aria_describedby }}"{% endif %}
         {%- if aria_invalid is not none %} aria-invalid="{{ aria_invalid|string|lower }}"{% endif %}
         data-slot="checkbox"
         {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}="{{ v }}"{% endfor -%}
  >
  <svg class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-checked:block"
       viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <polyline points="20 6 9 17 4 12" />
  </svg>
  <svg class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-indeterminate:block"
       viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <line x1="5" y1="12" x2="19" y2="12" />
  </svg>
</span>
{% endmacro %}

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

  Usage:

      type CheckboxArgs struct {
          ID, Name, Value string
          Checked, Indeterminate, Required, Disabled, Readonly bool
          Form, AriaLabel, AriaLabelledby, AriaDescribedby string
          AriaInvalid string // "true" | "false"
          Attrs map[string]string
      }

      tpl.ExecuteTemplate(w, "checkbox", CheckboxArgs{
          ID: "terms", Name: "terms", Required: true,
      })
*/}}

{{define "checkbox"}}
{{- $base := "peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-background shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:bg-input/30" -}}
<span class="relative inline-flex size-4 shrink-0 align-middle">
  <input type="checkbox" class="{{$base}}"
         {{- if .ID}} id="{{.ID}}"{{end}}
         {{- if .Name}} name="{{.Name}}"{{end}}
         {{- if .Value}} value="{{.Value}}"{{end}}
         {{- if .Checked}} checked{{end}}
         {{- /* indeterminate is IDL-only (no HTML attribute per WHATWG HTML);
                emit the on-mount hook a script reads to set el.indeterminate. */}}
         {{- if .Indeterminate}} data-initial-indeterminate="true"{{end}}
         {{- if .Required}} required{{end}}
         {{- if .Disabled}} disabled{{end}}
         {{- if .Readonly}} readonly{{end}}
         {{- if .Form}} form="{{.Form}}"{{end}}
         {{- if .AriaLabel}} aria-label="{{.AriaLabel}}"{{end}}
         {{- if .AriaLabelledby}} aria-labelledby="{{.AriaLabelledby}}"{{end}}
         {{- if .AriaDescribedby}} aria-describedby="{{.AriaDescribedby}}"{{end}}
         {{- if .AriaInvalid}} aria-invalid="{{.AriaInvalid}}"{{end}}
         data-slot="checkbox"
         {{- range $k, $v := .Attrs}} {{$k}}="{{$v}}"{{end -}}
  >
  <svg class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-checked:block"
       viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <polyline points="20 6 9 17 4 12" />
  </svg>
  <svg class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-indeterminate:block"
       viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <line x1="5" y1="12" x2="19" y2="12" />
  </svg>
</span>
{{end}}

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

  Native `<input type="checkbox">` styled with shadcn polish. Pair with the
  Label component for the click-target / accessible-name pattern.

  ## Examples

      <label class="flex items-center gap-2">
        <.checkbox name="terms" required />
        I agree to the terms.
      </label>

      <.checkbox name="newsletter" checked
        hx-post="/preferences/newsletter" hx-trigger="change" />
  """

  use Phoenix.Component

  @input_base "peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-background shadow-xs " <>
                "transition-shadow outline-none " <>
                "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " <>
                "disabled:cursor-not-allowed disabled:opacity-50 " <>
                "checked:border-primary checked:bg-primary " <>
                "indeterminate:border-primary indeterminate:bg-primary " <>
                "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " <>
                "dark:bg-input/30"

  attr :class, :string, default: nil

  # `indeterminate` is an IDL-only property — no HTML content attribute exists
  # for it (WHATWG HTML: initially false, "cannot be set using an HTML
  # attribute"). Emit data-initial-indeterminate="true" so an on-mount script
  # can set el.indeterminate. See repos/whatwg-html/source.
  attr :indeterminate, :boolean, default: false

  attr :rest, :global,
    include:
      ~w(hx-get hx-post hx-put hx-patch hx-target hx-swap hx-trigger hx-vals hx-include
         id name value checked required disabled readonly form
         aria-label aria-labelledby aria-describedby aria-invalid)

  def checkbox(assigns) do
    assigns = assign(assigns, :input_base, @input_base)

    ~H"""
    <span class="relative inline-flex size-4 shrink-0 align-middle">
      <input
        type="checkbox"
        class={[@input_base, @class]}
        data-slot="checkbox"
        data-initial-indeterminate={@indeterminate && "true"}
        {@rest}
      />
      <svg
        class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-checked:block"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="3"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <polyline points="20 6 9 17 4 12" />
      </svg>
      <svg
        class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-indeterminate:block"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="3"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <line x1="5" y1="12" x2="19" y2="12" />
      </svg>
    </span>
    """
  end
end

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

  Mirrors registry/ui/checkbox.tsx. The visual checkmark and dash are SVGs
  layered on top of a real <input type="checkbox">. Tailwind's peer-checked
  and peer-indeterminate variants show the right icon for the right state.

  Indeterminate state cannot be set from HTML alone — set
  `checkboxEl.indeterminate = true` from JavaScript. The styles below assume
  the browser's :indeterminate pseudo is active.

  BASE (shared by every input):
    peer size-4 shrink-0 appearance-none rounded-[4px] border border-input
    bg-background shadow-xs transition-shadow outline-none
    focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50
    disabled:cursor-not-allowed disabled:opacity-50
    checked:border-primary checked:bg-primary
    indeterminate:border-primary indeterminate:bg-primary
    aria-invalid:border-destructive aria-invalid:ring-destructive/20
    dark:aria-invalid:ring-destructive/40 dark:bg-input/30
-->

<!-- Basic (with explicit Label pairing) -->
<label for="terms" class="flex items-center gap-2 text-sm font-medium leading-none select-none">
  <span class="relative inline-flex size-4 shrink-0 align-middle">
    <input id="terms" name="terms" type="checkbox" required data-slot="checkbox"
      class="peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-background shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:bg-input/30">
    <svg class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-checked:block"
         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <polyline points="20 6 9 17 4 12" />
    </svg>
    <svg class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-indeterminate:block"
         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <line x1="5" y1="12" x2="19" y2="12" />
    </svg>
  </span>
  I agree to the terms.
</label>

<!-- Checked by default -->
<label class="flex items-center gap-2 text-sm font-medium">
  <span class="relative inline-flex size-4">
    <input type="checkbox" name="newsletter" checked data-slot="checkbox"
      class="peer size-4 appearance-none rounded-[4px] border border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 checked:border-primary checked:bg-primary dark:bg-input/30">
    <svg class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-checked:block"
         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  </span>
  Subscribe to the newsletter
</label>

<!-- Disabled -->
<label class="flex items-center gap-2 text-sm font-medium leading-none select-none peer-disabled:opacity-50">
  <span class="relative inline-flex size-4">
    <input type="checkbox" disabled data-slot="checkbox"
      class="peer size-4 appearance-none rounded-[4px] border border-input bg-background shadow-xs disabled:cursor-not-allowed disabled:opacity-50 checked:border-primary checked:bg-primary dark:bg-input/30">
    <svg class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-checked:block"
         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  </span>
  Disabled option
</label>

<!-- Indeterminate — IDL-only property, no HTML attribute (WHATWG HTML: initially
     false, "cannot be set using an HTML attribute"). Mark the input with the
     data-initial-indeterminate hook and let an on-mount script flip it; this is
     the same hook the framework flavours emit from an `indeterminate` prop. -->
<label class="flex items-center gap-2 text-sm font-medium">
  <span class="relative inline-flex size-4">
    <input id="select-all" type="checkbox" data-slot="checkbox" data-initial-indeterminate="true"
      class="peer size-4 appearance-none rounded-[4px] border border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary dark:bg-input/30">
    <svg class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-checked:block"
         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <polyline points="20 6 9 17 4 12" />
    </svg>
    <svg class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-indeterminate:block"
         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <line x1="5" y1="12" x2="19" y2="12" />
    </svg>
  </span>
  Select all
</label>
<script>
  document.querySelectorAll('[data-initial-indeterminate="true"]').forEach(function (el) { el.indeterminate = true })
</script>

<!-- htmx — save on toggle -->
<label class="flex items-center gap-2 text-sm font-medium">
  <span class="relative inline-flex size-4">
    <input type="checkbox" name="favorite" data-slot="checkbox"
           hx-post="/items/42/favorite" hx-trigger="change" hx-swap="none"
      class="peer size-4 appearance-none rounded-[4px] border border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 checked:border-primary checked:bg-primary dark:bg-input/30">
    <svg class="pointer-events-none absolute inset-0 m-auto hidden size-3 text-primary-foreground peer-checked:block"
         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  </span>
  Favourite
</label>