1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T111e,import { useId, type ComponentProps, type ReactNode } from "react"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import * as LabelPrimitive from "@radix-ui/react-label"; import { AlertGlyph } from "@/registry/tier-2-primitives/glyphs"; /** * Field — label, hint, error, and the wiring between them. * * Not in the architecture's component list, and here anyway, because the three * accessibility rules a form has to get right are all relational: * * · the label is associated with the control (`htmlFor` / `id`) * · the hint and the error are announced with it (`aria-describedby`) * · an invalid control says so (`aria-invalid`) * * Those cannot live inside `Input` — they span the label, the control and the * message. Without a Field, every form re-implements them and about a third of * them get it wrong. * * Render-prop rather than context so the ids are visible at the call site and * the control stays an ordinary input you can pass anything to. * * * {(field) => } * */ export type FieldRenderProps = { id: string; "aria-describedby": string | undefined; "aria-invalid": boolean | undefined; required: boolean | undefined; }; export type FieldProps = { label: string; /** Helper text. Hidden while an error is showing — two messages compete. */ hint?: string; /** * The error message. Name the field and say what to do: * "Enter a 6-digit PIN code", not "Invalid input". */ error?: string; required?: boolean; /** Hide the label visually but keep it for screen readers. Rare, and a smell. */ labelHidden?: boolean; id?: string; className?: string; children: (field: FieldRenderProps) => ReactNode; }; export function Field({ label, hint, error, required, labelHidden = false, id, className, children, }: FieldProps) { const generated = useId(); const fieldId = id ?? generated; const hintId = `${fieldId}-hint`; const errorId = `${fieldId}-error`; const describedBy = [hint && !error ? hintId : null, error ? errorId : null].filter(Boolean).join(" ") || undefined; return (

{label} {children({ id: fieldId, "aria-describedby": describedBy, "aria-invalid": error ? true : undefined, required: required || undefined, })} {hint && !error && (

{hint}

)} {error && (

{error}

)}

); } export function Label({ className, required, children, ...props }: ComponentProps & { required?: boolean }) { return ( {children} {required && ( * )} ); } /** * A group of related controls — a set of radios, a set of checkboxes. * * `fieldset` + `legend` is the only construction a screen reader reads as * "these five options belong to one question". A div with a heading is not. */ export function FieldSet({ legend, hint, className, children, ...props }: ComponentProps<"fieldset"> & { legend: string; hint?: string }) { return (

{legend} {hint &&

{hint}

} {children}

); } 24:T92f8,

import { useId, type ComponentProps, type ReactNode } from "react";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import * as LabelPrimitive from "@radix-ui/react-label";
import { AlertGlyph } from "@/registry/tier-2-primitives/glyphs";

/**
 * Field — label, hint, error, and the wiring between them.
 *
 * Not in the architecture's component list, and here anyway, because the three
 * accessibility rules a form has to get right are all relational:
 *
 *   · the label is associated with the control (`htmlFor` / `id`)
 *   · the hint and the error are announced with it (`aria-describedby`)
 *   · an invalid control says so (`aria-invalid`)
 *
 * Those cannot live inside `Input` — they span the label, the control and the
 * message. Without a Field, every form re-implements them and about a third of
 * them get it wrong.
 *
 * Render-prop rather than context so the ids are visible at the call site and
 * the control stays an ordinary input you can pass anything to.
 *
 *     <Field label="Delivery address" hint="We'll only use this for the order.">
 *       {(field) => <Input placeholder="Flat, street, landmark" {...field} />}
 *     </Field>
 */

export type FieldRenderProps = {
  id: string;
  "aria-describedby": string | undefined;
  "aria-invalid": boolean | undefined;
  required: boolean | undefined;
};

export type FieldProps = {
  label: string;
  /** Helper text. Hidden while an error is showing — two messages compete. */
  hint?: string;
  /**
   * The error message. Name the field and say what to do:
   * "Enter a 6-digit PIN code", not "Invalid input".
   */
  error?: string;
  required?: boolean;
  /** Hide the label visually but keep it for screen readers. Rare, and a smell. */
  labelHidden?: boolean;
  id?: string;
  className?: string;
  children: (field: FieldRenderProps) => ReactNode;
};

export function Field({
  label,
  hint,
  error,
  required,
  labelHidden = false,
  id,
  className,
  children,
}: FieldProps) {
  const generated = useId();
  const fieldId = id ?? generated;
  const hintId = `${fieldId}-hint`;
  const errorId = `${fieldId}-error`;

  const describedBy =
    [hint && !error ? hintId : null, error ? errorId : null].filter(Boolean).join(" ") || undefined;

  return (
    <div data-slot="field" className={cn("font-ui", className)}>
      <Label htmlFor={fieldId} required={required} className={labelHidden ? "sr-only" : undefined}>
        {label}
      </Label>

      {children({
        id: fieldId,
        "aria-describedby": describedBy,
        "aria-invalid": error ? true : undefined,
        required: required || undefined,
      })}

      {hint && !error && (
        <p id={hintId} data-slot="field-hint" className="mt-[7px] text-caption text-text-muted">
          {hint}
        </p>
      )}

      {error && (
        <p
          id={errorId}
          data-slot="field-error"
          /* role=alert so the message is announced when it appears, not only
             when the field is next focused. */
          role="alert"
          className="mt-[7px] flex items-center gap-1.5 text-caption text-danger"
        >
          <AlertGlyph size={13} />
          {error}
        </p>
      )}
    </div>
  );
}

export function Label({
  className,
  required,
  children,
  ...props
}: ComponentProps<typeof LabelPrimitive.Root> & { required?: boolean }) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn("mb-[7px] block text-label text-text-primary", className)}
      {...props}
    >
      {children}
      {required && (
        <span className="ml-0.5 text-danger" aria-hidden>
          *
        </span>
      )}
    </LabelPrimitive.Root>
  );
}

/**
 * A group of related controls — a set of radios, a set of checkboxes.
 *
 * `fieldset` + `legend` is the only construction a screen reader reads as
 * "these five options belong to one question". A div with a heading is not.
 */
export function FieldSet({
  legend,
  hint,
  className,
  children,
  ...props
}: ComponentProps<"fieldset"> & { legend: string; hint?: string }) {
  return (
    <fieldset data-slot="fieldset" className={cn("font-ui", className)} {...props}>
      <legend className="mb-[7px] text-label text-text-primary">{legend}</legend>
      {hint && <p className="mb-3 text-caption text-text-muted">{hint}</p>}
      {children}
    </fieldset>
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Components"}],["$","$L1e",null,{"children":"Field & Label"}],["$","$L1f",null,{"children":"Label, hint, error and the aria wiring between them."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"field"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/field","source":"$23","highlighted":"$24","npm":["@radix-ui/react-label"],"registry":["@woohl/glyphs","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]