feat(checkbox): add checkbox indeterminate prop

[grasdira]

• [x] I have followed the Your First Code Contribution section of the Contributing guide

Start from the discussion #870

Related to #871

There are no breaking API changes. Here are my changes:

1. To ensure that checkboxes with an indeterminate state display the correct style, this commit(https://github.com/themesberg/flowbite-react/commit/65e9f8bbfeb395999ccfd63cd21c606a2a181a5d) added the following CSS in both .storybook/style.css and docs.css to override the default styles:

[type='checkbox']:indeterminate {
  background-image: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0ndHJ1ZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyBmaWxsPSdub25lJyB2aWV3Qm94PScwIDAgMTYgMTInPgogIDxwYXRoIHN0cm9rZT0nd2hpdGUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLXdpZHRoPSczJyBkPSdNMCA2SDE2Jy8+Cjwvc3ZnPg==');
  background-color: currentColor;
}

2. This commit(https://github.com/themesberg/flowbite-react/commit/f1a847874af3ce786e3d04fd189273f146e31276) added a new example of using the indeterminate state to handle multiple checkboxes in a group or tree structure.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 4, 2024 1:23pm

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 73.91304% with 6 lines in your changes missing coverage. Please review.

Project coverage is 97.29%. Comparing base (7461173) to head (1586050). Report is 275 commits behind head on main.

Files with missing lines	Patch %	Lines
src/components/Checkbox/Checkbox.tsx	73.91%	6 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1155      +/-   ##
==========================================
- Coverage   99.54%   97.29%   -2.26%     
==========================================
  Files         163      216      +53     
  Lines        6621     9244    +2623     
  Branches      401      541     +140     
==========================================
+ Hits         6591     8994    +2403     
- Misses         30      250     +220     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[tulup-conner]

Hey thanks for the contribution! I don't have the time to look at this right now but forgive me for jumping in and rebasing, we're trying to figure out what's wrong with codecov. Thank you for your patience! @grasdira

[Stupidism]

Anyone still working on this?

[SutuSebastian]

Anyone still working on this?

Doesn't seem like it 🤔

[grasdira]

I'm really sorry for not keeping up with this PR 😔 Since not quite familiar with this project, I need more help to discuss how to solve this problem.

[grasdira]

Hi! After rethinking the code, I have made some adjustments to provide developers with more flexibility when using the component:

1. I am continuing to use useRef to directly set the indeterminate property on the DOM element. This enables the use of the pseudo-class modifiers indeterminate: in TailwindCSS for CSS customization. (@SutuSebastian sorry for taking so long to reply, this point is why I don't think data-... is a better way on this feature. )
2. I have removed the modifications I previously made in two .css files, realizing that this approach was limiting the developers’ ability to change the icon or other styles for the indeterminate state. (https://github.com/themesberg/flowbite-react/pull/1155/commits/90ec304ff705e76d7bb30d729df1c409f450076f)
3. In tailwind.config.ts, I have extended indeterminate backgroundImage(https://github.com/themesberg/flowbite-react/pull/1155/commits/a4af18f22c8735ea21630319064efc6bee1df8d0) and set the CSS for the indeterminate checkbox with indeterminate: modifier in Checkbox.tsx(https://github.com/themesberg/flowbite-react/pull/1155/commits/a1bfc2134cbfb233f51b49cf5372bf788973ceef).

What are your opinions on these changes?