{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label",
  "type": "registry:ui",
  "title": "Label",
  "description": "Native <label> with shadcn polish — peer-disabled-aware, click-to-focus from the platform.",
  "files": [
    {
      "path": "registry/ui/label.tsx",
      "type": "registry:ui",
      "target": "components/ui/label.tsx",
      "content": "/** @jsxImportSource hono/jsx */\nimport type { PropsWithChildren } from \"hono/jsx\"\nimport { cn, type ClassValue } from \"@/registry/lib/cn\"\n\n// Native <label> with shadcn styling. Source of truth:\n//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/label.tsx\n//\n// We render a real <label> instead of wrapping Radix Label.Root — the only\n// behaviour Radix adds is \"click anywhere on the label focuses the linked\n// input,\" which the platform gives us for free via the `for` (htmlFor)\n// attribute. So we keep things simple and inherit native semantics.\n//\n// Wire-up patterns:\n//   - Explicit:  <Label htmlFor=\"email\">Email</Label> <Input id=\"email\" />\n//   - Implicit:  <Label>Email <Input /></Label>\n// Both work; explicit is preferred because it survives the input being moved\n// inside a wrapper later (e.g. for layout).\n\nconst base =\n  \"flex items-center gap-2 text-sm leading-none font-medium select-none \" +\n  // Dim the label when the input inside its group is disabled (data-disabled=true\n  // is shadcn's convention for \"this wrapper is in a disabled state\").\n  \"group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 \" +\n  // Dim when a sibling marked .peer carries `disabled` (the input next to us).\n  \"peer-disabled:cursor-not-allowed peer-disabled:opacity-50\"\n\nexport function labelClasses(opts?: { class?: ClassValue }): string {\n  return cn(base, opts?.class)\n}\n\ntype LabelProps = PropsWithChildren<{\n  htmlFor?: string\n  class?: ClassValue\n  id?: string\n}>\n\nexport function Label(props: LabelProps) {\n  const { children, htmlFor, class: className, id, ...rest } = props\n  return (\n    <label\n      id={id}\n      for={htmlFor}\n      class={labelClasses({ class: className })}\n      data-slot=\"label\"\n      {...rest}\n    >\n      {children}\n    </label>\n  )\n}\n"
    },
    {
      "path": "registry/jinja2/label.html",
      "type": "registry:file",
      "target": "templates/components/label.html",
      "content": "{# Label macro — shadcn-htmx, htmx v4 + Tailwind v4.\n   Mirrors registry/ui/label.tsx for Python/Flask/FastAPI/Django/Jinja2.\n\n   Usage (explicit, preferred):\n       {% from \"components/label.html\" import label %}\n       {{ label(\"Email\", for_=\"email\") }}\n       {{ input(id=\"email\", name=\"email\", type=\"email\") }}\n\n   Implicit wrapping also works — pass the inner HTML via the caller block:\n       {% call label_block() %}Email {{ input(...) }}{% endcall %}\n   See repos/mdn/files/en-us/web/html/reference/elements/label/. #}\n\n{% macro label(\n    text,\n    for_=none,\n    id=none,\n    extra_class=\"\",\n    **attrs\n) %}\n{%- set base -%}\nflex 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\n{%- endset -%}\n<label class=\"{{ base }} {{ extra_class }}\"\n       {%- if for_ %} for=\"{{ for_ }}\"{% endif %}\n       {%- if id %} id=\"{{ id }}\"{% endif %}\n       data-slot=\"label\"\n       {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}=\"{{ v }}\"{% endfor -%}\n>{{ text }}</label>\n{% endmacro %}\n\n{# Block form — accepts arbitrary inner HTML (e.g. wrapping an input):\n\n   {% call label_block(for_=\"email\") %}\n       Email {{ input(id=\"email\", name=\"email\", type=\"email\") }}\n   {% endcall %}                                                       #}\n{% macro label_block(for_=none, id=none, extra_class=\"\") %}\n{%- set base -%}\nflex 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\n{%- endset -%}\n<label class=\"{{ base }} {{ extra_class }}\"\n       {%- if for_ %} for=\"{{ for_ }}\"{% endif %}\n       {%- if id %} id=\"{{ id }}\"{% endif %}\n       data-slot=\"label\"\n>{{ caller() }}</label>\n{% endmacro %}\n"
    },
    {
      "path": "registry/go-templates/label.tmpl",
      "type": "registry:file",
      "target": "components/label.tmpl",
      "content": "{{/*\n  Label template — shadcn-htmx, htmx v4 + Tailwind v4.\n  Mirrors registry/ui/label.tsx for Go projects using html/template.\n\n  Usage:\n\n      type LabelArgs struct {\n          Text  string\n          For   string // the input id this label points at\n          ID    string\n          Attrs map[string]string\n      }\n\n      tpl.ExecuteTemplate(w, \"label\", LabelArgs{Text: \"Email\", For: \"email\"})\n\n  For implicit wrapping (label contains the input), use the \"label_block\"\n  variant and provide an `Inner` field of pre-rendered HTML.\n*/}}\n\n{{define \"label\"}}\n{{- $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\" -}}\n<label class=\"{{$base}}\"\n       {{- if .For}} for=\"{{.For}}\"{{end}}\n       {{- if .ID}} id=\"{{.ID}}\"{{end}}\n       data-slot=\"label\"\n       {{- range $k, $v := .Attrs}} {{$k}}=\"{{$v}}\"{{end -}}\n>{{.Text}}</label>\n{{end}}\n"
    },
    {
      "path": "registry/phoenix/label.ex",
      "type": "registry:file",
      "target": "lib/my_app_web/components/label.ex",
      "content": "defmodule ShadcnHtmx.Components.Label do\n  @moduledoc \"\"\"\n  Label — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.\n\n  Mirrors registry/ui/label.tsx. Native <label> with the `for` attribute does\n  the work — clicking the label focuses the input it points at.\n\n  ## Examples\n\n      <.label for=\"email\">Email</.label>\n      <.input id=\"email\" name=\"email\" type=\"email\" />\n\n      # Implicit wrapping\n      <.label>\n        Email <.input name=\"email\" type=\"email\" />\n      </.label>\n  \"\"\"\n\n  use Phoenix.Component\n\n  @base \"flex items-center gap-2 text-sm leading-none font-medium select-none \" <>\n          \"group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 \" <>\n          \"peer-disabled:cursor-not-allowed peer-disabled:opacity-50\"\n\n  attr :for, :string, default: nil\n  attr :class, :string, default: nil\n  attr :rest, :global\n\n  slot :inner_block, required: true\n\n  def label(assigns) do\n    assigns = assign(assigns, :base_class, @base)\n\n    ~H\"\"\"\n    <label\n      for={@for}\n      class={[@base_class, @class]}\n      data-slot=\"label\"\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </label>\n    \"\"\"\n  end\nend\n"
    },
    {
      "path": "registry/html/label.html",
      "type": "registry:file",
      "target": "snippets/label.html",
      "content": "<!--\n  shadcn-htmx — raw HTML label snippets.\n\n  Drop these onto any page with Tailwind v4 + the shadcn theme variables.\n\n  BASE (shared by every label):\n    flex items-center gap-2 text-sm leading-none font-medium select-none\n    group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50\n    peer-disabled:cursor-not-allowed peer-disabled:opacity-50\n-->\n\n<!-- Explicit (preferred) — for points at the input id -->\n<label for=\"email\" data-slot=\"label\"\n  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\">\n  Email\n</label>\n<input id=\"email\" name=\"email\" type=\"email\"\n  class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs\">\n\n<!-- Implicit — label wraps the input; click anywhere on the label focuses it -->\n<label data-slot=\"label\"\n  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\">\n  Email\n  <input name=\"email\" type=\"email\"\n    class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs\">\n</label>\n\n<!-- Required indicator — visual + an aria-hidden asterisk inside the label -->\n<label for=\"password\" data-slot=\"label\"\n  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\">\n  Password <span class=\"text-destructive\" aria-hidden=\"true\">*</span>\n</label>\n<input id=\"password\" name=\"password\" type=\"password\" required aria-required=\"true\"\n  class=\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs\">\n\n<!-- Peer-disabled — wrap label+input in a group and add `peer` to the input;\n     the label dims itself when the input is disabled -->\n<div class=\"flex flex-col gap-2\">\n  <input id=\"locked\" name=\"locked\" type=\"text\" disabled value=\"locked\"\n         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\">\n  <label for=\"locked\" data-slot=\"label\"\n    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\">\n    Locked field (auto-dims when input is disabled)\n  </label>\n</div>\n"
    }
  ]
}