Label

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

// Native <label> with shadcn styling. Source of truth:
//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/label.tsx
//
// We render a real <label> instead of wrapping Radix Label.Root — the only
// behaviour Radix adds is "click anywhere on the label focuses the linked
// input," which the platform gives us for free via the `for` (htmlFor)
// attribute. So we keep things simple and inherit native semantics.
//
// Wire-up patterns:
//   - Explicit:  <Label htmlFor="email">Email</Label> <Input id="email" />
//   - Implicit:  <Label>Email <Input /></Label>
// Both work; explicit is preferred because it survives the input being moved
// inside a wrapper later (e.g. for layout).

const base =
  "flex items-center gap-2 text-sm leading-none font-medium select-none " +
  // Dim the label when the input inside its group is disabled (data-disabled=true
  // is shadcn's convention for "this wrapper is in a disabled state").
  "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 " +
  // Dim when a sibling marked .peer carries `disabled` (the input next to us).
  "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"

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

type LabelProps = PropsWithChildren<{
  htmlFor?: string
  class?: ClassValue
  id?: string
}>

export function Label(props: LabelProps) {
  const { children, htmlFor, class: className, id, ...rest } = props
  return (
    <label
      id={id}
      for={htmlFor}
      class={labelClasses({ class: className })}
      data-slot="label"
      {...rest}
    >
      {children}
    </label>
  )
}

{# Label macro — shadcn-htmx, htmx v4 + Tailwind v4.
   Mirrors registry/ui/label.tsx for Python/Flask/FastAPI/Django/Jinja2.

   Usage (explicit, preferred):
       {% from "components/label.html" import label %}
       {{ label("Email", for_="email") }}
       {{ input(id="email", name="email", type="email") }}

   Implicit wrapping also works — pass the inner HTML via the caller block:
       {% call label_block() %}Email {{ input(...) }}{% endcall %}
   See repos/mdn/files/en-us/web/html/reference/elements/label/. #}

{% macro label(
    text,
    for_=none,
    id=none,
    extra_class="",
    **attrs
) %}
{%- set base -%}
flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50
{%- endset -%}
<label class="{{ base }} {{ extra_class }}"
       {%- if for_ %} for="{{ for_ }}"{% endif %}
       {%- if id %} id="{{ id }}"{% endif %}
       data-slot="label"
       {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}="{{ v }}"{% endfor -%}
>{{ text }}</label>
{% endmacro %}

{# Block form — accepts arbitrary inner HTML (e.g. wrapping an input):

   {% call label_block(for_="email") %}
       Email {{ input(id="email", name="email", type="email") }}
   {% endcall %}                                                       #}
{% macro label_block(for_=none, id=none, extra_class="") %}
{%- set base -%}
flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50
{%- endset -%}
<label class="{{ base }} {{ extra_class }}"
       {%- if for_ %} for="{{ for_ }}"{% endif %}
       {%- if id %} id="{{ id }}"{% endif %}
       data-slot="label"
>{{ caller() }}</label>
{% endmacro %}

{{/*
  Label template — shadcn-htmx, htmx v4 + Tailwind v4.
  Mirrors registry/ui/label.tsx for Go projects using html/template.

  Usage:

      type LabelArgs struct {
          Text  string
          For   string // the input id this label points at
          ID    string
          Attrs map[string]string
      }

      tpl.ExecuteTemplate(w, "label", LabelArgs{Text: "Email", For: "email"})

  For implicit wrapping (label contains the input), use the "label_block"
  variant and provide an `Inner` field of pre-rendered HTML.
*/}}

{{define "label"}}
{{- $base := "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50" -}}
<label class="{{$base}}"
       {{- if .For}} for="{{.For}}"{{end}}
       {{- if .ID}} id="{{.ID}}"{{end}}
       data-slot="label"
       {{- range $k, $v := .Attrs}} {{$k}}="{{$v}}"{{end -}}
>{{.Text}}</label>
{{end}}

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

  Mirrors registry/ui/label.tsx. Native <label> with the `for` attribute does
  the work — clicking the label focuses the input it points at.

  ## Examples

      <.label for="email">Email</.label>
      <.input id="email" name="email" type="email" />

      # Implicit wrapping
      <.label>
        Email <.input name="email" type="email" />
      </.label>
  """

  use Phoenix.Component

  @base "flex items-center gap-2 text-sm leading-none font-medium select-none " <>
          "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 " <>
          "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"

  attr :for, :string, default: nil
  attr :class, :string, default: nil
  attr :rest, :global

  slot :inner_block, required: true

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

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

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

  Drop these onto any page with Tailwind v4 + the shadcn theme variables.

  BASE (shared by every label):
    flex items-center gap-2 text-sm leading-none font-medium select-none
    group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50
    peer-disabled:cursor-not-allowed peer-disabled:opacity-50
-->

<!-- Explicit (preferred) — for points at the input id -->
<label for="email" data-slot="label"
  class="flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50">
  Email
</label>
<input id="email" name="email" type="email"
  class="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs">

<!-- Implicit — label wraps the input; click anywhere on the label focuses it -->
<label data-slot="label"
  class="flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50">
  Email
  <input name="email" type="email"
    class="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs">
</label>

<!-- Required indicator — visual + an aria-hidden asterisk inside the label -->
<label for="password" data-slot="label"
  class="flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50">
  Password <span class="text-destructive" aria-hidden="true">*</span>
</label>
<input id="password" name="password" type="password" required aria-required="true"
  class="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs">

<!-- Peer-disabled — wrap label+input in a group and add `peer` to the input;
     the label dims itself when the input is disabled -->
<div class="flex flex-col gap-2">
  <input id="locked" name="locked" type="text" disabled value="locked"
         class="peer flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs disabled:opacity-50">
  <label for="locked" data-slot="label"
    class="flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50">
    Locked field (auto-dims when input is disabled)
  </label>
</div>