Add Checkbox component with documentation and stories

[devin-ai-integration]

Add Checkbox component with documentation and stories

Summary

This PR adds a new Checkbox component to the shared-ui library. The component is built on Radix UI's checkbox primitive and follows the established patterns from other components like Switch and Button. It includes two visual variants (default and secondary), supports all standard checkbox states (checked, unchecked, indeterminate, disabled), and integrates with the library's theme system for automatic light/dark mode adaptation.

The implementation includes:

• Checkbox component with TypeScript types
• Two variants: default (brand primary colors) and secondary (neutral colors)
• Comprehensive Storybook stories demonstrating all states and common usage patterns
• Detailed README documentation with code examples
• New dependency: @radix-ui/react-checkbox@^1.3.3

Review & Testing Checklist for Human

This is a new UI component that needs visual and functional verification:

• Visual testing in Storybook - Run npm run dev and navigate to UI/Checkbox. Verify all variants look correct in both light and dark modes. Pay special attention to:

  • Default variant checked state (should use brand primary color)
  • Secondary variant styling (should use neutral colors)
  • Disabled states have appropriate opacity
  • Border colors and focus rings match other components

• Indeterminate state rendering - Verify the indeterminate state displays correctly (should show a dash/minus icon). Test the "SelectAllPattern" story to see this in action.

• Keyboard accessibility - Tab to the checkbox and verify:

  • Focus ring is visible and styled correctly
  • Spacebar toggles the checkbox
  • Disabled checkboxes can't be focused or toggled

• Consider unit tests - I noticed Input and Textarea have test files, but Switch doesn't. Should this component have unit tests beyond Storybook stories?

Test Plan

1. Start Storybook: npm run dev
2. Navigate to UI/Checkbox in the sidebar
3. Test each story, toggling dark mode with the theme switcher
4. Try the interactive examples (WithLabel, MultipleCheckboxes, SelectAllPattern)
5. Verify keyboard navigation works as expected

Notes

• The component follows the same architectural patterns as the existing Switch component
• All Storybook stories include the ThemeSwitcherDecorator for easy theme testing
• The README includes examples for common use cases including React Hook Form integration
• Lint and existing tests pass successfully

---

Link to Devin run: https://app.devin.ai/sessions/2e16ae97462e42ceb1dc53703ce1d2c9
Requested by: Tomek Drwięga (@tomusdrw)

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[netlify]

✅ Deploy Preview for fluffy-ui ready!

Name	Link
🔨 Latest commit	1f6d62b
🔍 Latest deploy log	https://app.netlify.com/projects/fluffy-ui/deploys/690c626f269cbd00084966f5
😎 Deploy Preview	https://deploy-preview-59--fluffy-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.