[DOCS]: Checkbox, lack of example for checkbox with indeterminate state

[otiscs]

I noticed that there wasn't an example in the docs for a checkbox that can have an indeterminate state.

Would it be possible to add something similar to the examples below for clarity?

For the examples when the checkbox is below when the checkbox is in an indeterminate state, the drawn path is close to the equivalent unstyled html checkbox with indeterminate state.

Example 1:

import { useState } from "react";
import { Checkbox } from "@headlessui/react";

function Example() {
  const [checkboxStatus, setCheckboxStatus] = useState("indeterminate");

  const handleClick = () => {
    // cycle through the states, checked, indeterminate, unchecked
    setCheckboxStatus((prev) => {
      if (prev === "checked") return "indeterminate";
      if (prev === "indeterminate") return "unchecked";
      return "checked";
    });
  };

  return (
    <Checkbox
      checked={checkboxStatus === "checked"}
      indeterminate={checkboxStatus === "indeterminate"}
      onClick={handleClick}
      className="group block size-4 rounded border bg-white transition data-[checked]:bg-blue-500 data-[indeterminate]:bg-blue-500"
    >
      {({ indeterminate }) => (
        <svg
          className="stroke-white opacity-0 transition group-data-[checked]:opacity-100 group-data-[indeterminate]:opacity-100"
          viewBox="0 0 14 14"
          fill="none"
        >
          {indeterminate ? (
            <path
              d={indeterminate ? "M3 7L11 7" : "M3 8L6 11L11 3.5" }
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          ) : (
            <path
              d="M3 8L6 11L11 3.5"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          )}
        </svg>
      )}
    </Checkbox>
  );
}

export default Example;

Example 2:

import { useState } from "react";
import { Checkbox } from "@headlessui/react";

function Example() {
  const [checkboxStatus, setCheckboxStatus] = useState("indeterminate");

  const handleClick = () => {
    // cycle through the states, checked, indeterminate, unchecked
    setCheckboxStatus((prev) => {
      if (prev === "checked") return "indeterminate";
      if (prev === "indeterminate") return "unchecked";
      return "checked";
    });
  };

  return (
    <Checkbox
      checked={checkboxStatus === "checked"}
      indeterminate={checkboxStatus === "indeterminate"}
      onClick={handleClick}
      className="group block size-4 rounded border bg-white transition data-[checked]:bg-blue-500 data-[indeterminate]:bg-blue-500"
    >
      {({ indeterminate }) => (
        <svg
          className="stroke-white opacity-0 transition group-data-[checked]:opacity-100 group-data-[indeterminate]:opacity-100"
          viewBox="0 0 14 14"
          fill="none"
        >
          <path
            d={indeterminate ? "M3 7L11 7" : "M3 8L6 11L11 3.5"}
            strokeWidth={2}
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      )}
    </Checkbox>
  );
}

export default Example;