feat(react-headless-components-preview): add swatch picker controls

[Dmytro Kirpa (dmytrokirpa)]

Motivation

Add an unstyled SwatchPicker family to @fluentui/react-headless-components-preview. The controls reuse the state and interaction behavior extracted in #36534 while leaving layout and visual treatment to consumers.

Changes

• add headless SwatchPicker, SwatchPickerRow, ColorSwatch, ImageSwatch, and EmptySwatch components
• compose the controls from @fluentui/react-swatch-picker base hooks and shared context
• add grid navigation behavior and state data attributes for consumer styling
• add tests and Storybook examples
• export the family through the swatch-picker package entry point
• add API output, bundle-size coverage, dependency metadata, and a change file

Review guidance

Review this PR relative to feat/swatch-picker-headless-base. The component layer intentionally adds no Griffel styles; story styles are consumer examples only.

Validation

• yarn nx run-many -t lint test type-check bundle-size -p react-headless-components-preview --nxBail

PR stack

1. test(react-swatch-picker): add hook state coverage #36533
2. feat(react-swatch-picker): expose headless base APIs #36534
3. This PR: add headless SwatchPicker controls

Depends on #36534 and should be merged last.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Note

This error may be related to your runner configuration. You can now configure runners for Copilot code review separately from Copilot cloud agent by creating a copilot-code-review.yml file with your setup steps. Read the docs for details.

[Dmytro Kirpa (dmytrokirpa)]

Up to a discussion if we want to go with something like this, or want to switch to react-tabster hook