Label

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Native <label> with shadcn styling. Source of truth:
6//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/label.tsx
7//
8// We render a real <label> instead of wrapping Radix Label.Root — the only
9// behaviour Radix adds is "click anywhere on the label focuses the linked
10// input," which the platform gives us for free via the `for` (htmlFor)
11// attribute. So we keep things simple and inherit native semantics.
12//
13// Wire-up patterns:
14//   - Explicit:  <Label htmlFor="email">Email</Label> <Input id="email" />
15//   - Implicit:  <Label>Email <Input /></Label>
16// Both work; explicit is preferred because it survives the input being moved
17// inside a wrapper later (e.g. for layout).
18 
19const base =
20  "flex items-center gap-2 text-sm leading-none font-medium select-none " +
21  // Dim the label when the input inside its group is disabled (data-disabled=true
22  // is shadcn's convention for "this wrapper is in a disabled state").
23  "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 " +
24  // Dim when a sibling marked .peer carries `disabled` (the input next to us).
25  "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
26 
27export function labelClasses(opts?: { class?: ClassValue }): string {
28  return cn(base, opts?.class)
29}
30 
31type LabelProps = PropsWithChildren<{
32  htmlFor?: string
33  class?: ClassValue
34  id?: string
35}>
36 
37export function Label(props: LabelProps) {
38  const { children, htmlFor, class: className, id, ...rest } = props
39  return (
40    <label
41      id={id}
42      for={htmlFor}
43      class={labelClasses({ class: className })}
44      data-slot="label"
45      {...rest}
46    >
47      {children}
48    </label>
49  )
50}