chore: Add checkbox-controlled example

[AlexMunoz]

Add controlled checkbox example #939

The default example is when the checkbox is uncontrolled. #949

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

reakit – ./

🔍 Inspect: https://vercel.com/ariakit/reakit/ANLjFvaPET8mw5GRLEyBjCYKYZ1q
✅ Preview: Canceled

[Deployment for eb47aea canceled]

ariakit – ./

🔍 Inspect: https://vercel.com/ariakit/ariakit/79fhpg59qvFtdUxMda4mE7Lc2y7m
✅ Preview: https://ariakit-git-fork-alexmunoz-chore-controlled-chec-b672fe-ariakit.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

Merging #950 (eb47aea) into v2 (db52841) will increase coverage by 0.05%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##               v2     #950      +/-   ##
==========================================
+ Coverage   42.12%   42.17%   +0.05%     
==========================================
  Files         155      156       +1     
  Lines        4107     4111       +4     
  Branches     1158     1158              
==========================================
+ Hits         1730     1734       +4     
  Misses       2376     2376              
  Partials        1        1              

Impacted Files	Coverage Δ
...heckbox/__examples__/checkbox-controlled/index.tsx	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update db52841...eb47aea. Read the comment docs.

[diegohaz]

Also, let's rename the example to checkbox-controlled to keep the convention component-stuff.

[diegohaz]

Let's be more explicit since it's going to be part of the documentation. I'll see if there's an eslint rule for this.

Suggested change

	onChange={(e) => setChecked(e.target.checked)}
	onChange={(event) => setChecked(event.target.checked)}

[diegohaz]

Does it work if we just import the base checkbox styles?

Suggested change

	.label {
	@apply flex flex-row items-center gap-2;
	}
	.checkbox {
	@apply ariakit-focus-visible:ariakit-outline;
	}
	@import url("../checkbox/style.css");

[diegohaz]

I guess we should use container here.

Suggested change

	render(<Example />);
	expect(getByRole("checkbox")).toMatchInlineSnapshot(`
	const { container } = render(<Example />);
	expect(container).toMatchInlineSnapshot(`

[diegohaz]

Thank you @AlexMunoz! ❤️