feat: add VscCheckbox component

[khamudom]

Summary

Adds a new VscCheckbox component that wraps Fluent UI's Checkbox with VS Code design tokens.

Changes

• src/components/Checkbox/VscCheckbox.tsx — Component wrapping Fluent Checkbox with forwardRef
• src/components/Checkbox/useCheckboxStyles.ts — Griffel style hook using --vscode-checkbox-* tokens for all colors/states
• src/components/Checkbox/index.ts — Barrel exports
• src/index.ts — Registers VscCheckbox and VscCheckboxProps in the public API
• test/VscCheckbox.test.tsx — 8 unit tests (render, ref forwarding, className merge, size variants, disabled, onChange, checked, indeterminate)
• playground/main.tsx — Checkbox preview section with size × state matrix; adds rowGap/columnGap props to Matrix component
• playground/vscode-tokens.css — Checkbox token definitions for dark/light themes + .vsc-force-focus rule

Features

• Sizes: medium (default), large
• States: unchecked, checked, indeterminate/mixed, disabled
• Focus outline using --vscode-focusBorder with 6px offset
• Hover states preserve correct background/border per checked state
• All colors sourced from --vscode-checkbox-* CSS custom properties with sensible fallbacks

Testing

npm run typecheck  # passes
npm run test       # 100 tests pass (8 new for checkbox)
npm run lint:fix   # clean

[huimiu]

The CHECKBOX_SIZE_ROWS defines small, medium, large, but VscCheckbox only supports medium | large. Is it expected?

[khamudom]

The previous code was misleading. The playground listed a "Small" row but silently mapped it to medium, so both sections rendered identically. I've added proper small support to VscCheckbox with a 14px indicator and 11px label font.

Fluent's Checkbox only supports medium | large, so there is no native small size. We use Omit<CheckboxProps, 'size'> to extend the type with our own 'small' | 'medium' | 'large', map small to Fluent's medium internally, and layer our own CSS overrides on top to achieve the smaller visual.