{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "title": "Field",
  "description": "Underline inputs with a mono label row for a counter or requirement. Errors say how to fix the problem.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://spotcheckui.com/r/spotcheck-base.json"
  ],
  "files": [
    {
      "path": "registry/spotcheck/components/spotcheck/field.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Field as BaseField } from \"@base-ui/react/field\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst CONTROL =\n  \"border-ink focus:border-accent-ink data-invalid:border-bad w-full border-0 border-b-(length:--rule) bg-transparent pt-1.5 pb-1 font-(family-name:--f-display) text-xl [font-stretch:80%] outline-none\"\n\ntype FieldProps = {\n  label: string\n  /** Printed opposite the label, for a counter or a requirement. */\n  hint?: React.ReactNode\n  /** Says how to fix the problem. Setting it marks the field invalid. */\n  error?: string\n  /** One Input, Textarea or Select. */\n  children: React.ReactNode\n  className?: string\n}\n\nexport function Field({ label, hint, error, children, className }: FieldProps) {\n  return (\n    <BaseField.Root invalid={Boolean(error)} className={cn(\"flex min-w-0 flex-col gap-1 font-(family-name:--f-body)\", className)}>\n      <div className=\"flex justify-between gap-3\">\n        <BaseField.Label className=\"spotcheck-label\">{label}</BaseField.Label>\n        {hint && <BaseField.Description className=\"spotcheck-label tabular-nums\">{hint}</BaseField.Description>}\n      </div>\n      {children}\n      {error && (\n        <BaseField.Error match className=\"text-bad font-(family-name:--f-mono) text-[11.5px]\">\n          {error}\n        </BaseField.Error>\n      )}\n    </BaseField.Root>\n  )\n}\n\ntype InputProps = Omit<BaseField.Control.Props, \"className\"> & { className?: string }\n\nexport function Input({ className, ...props }: InputProps) {\n  return <BaseField.Control className={cn(CONTROL, className)} {...props} />\n}\n\nexport function Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return <BaseField.Control render={<textarea className={cn(CONTROL, \"resize-y\", className)} {...props} />} />\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "core"
  ],
  "type": "registry:component"
}