feat(react): implement reusable Tabs component (#234)

[Hollujay]

Summary

Implements a reusable, accessible Tabs compound component for @bc-forge/react per issue #234.

Deliverables

File	Purpose
react/src/components/Tabs.tsx	Compound component implementation
react/src/components/Tabs.test.tsx	27 unit tests
react/src/components/Tabs.stories.mdx	Isolated component documentation
react/src/components/index.ts	Updated barrel export

Component API

<Tabs defaultValue="tab1" variant="underline" size="md">
  <Tabs.List>
    <Tabs.Tab value="tab1">Overview</Tabs.Tab>
    <Tabs.Tab value="tab2">Details</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="tab1">Overview content</Tabs.Panel>
  <Tabs.Panel value="tab2">Details content</Tabs.Panel>
</Tabs>

Props

Prop	Type	Default	Description
variant	'underline' | 'pills' | 'tabs'	'underline'	Visual style
size	'sm' | 'md' | 'lg'	'md'	Tab trigger size
value	string	—	Controlled active tab
defaultValue	string	''	Uncontrolled initial tab
onChange	(value: string) => void	—	Tab change callback

All subcomponents (List, Tab, Panel) accept standard HTML attributes via ...rest.

Accessibility

• role="tablist" / role="tab" / role="tabpanel" per WAI-ARIA tabs pattern
• aria-selected, aria-controls, aria-labelledby wired between tabs and panels
• Roving tabIndex (only active tab reachable via keyboard)
• Full keyboard navigation: ArrowLeft/Right (wrap), Home (first), End (last)
• Screen-reader friendly — follows APG design pattern

Testing

PASS src/components/Tabs.test.tsx
  ✓ renders tabs and the active panel
  ✓ shows only the active panel
  ✓ switches panel on tab click
  ✓ calls onChange when a tab is clicked
  ✓ works in controlled mode
  ✓ renders with role="tablist" on the list
  ✓ renders tabs with role="tab"
  ✓ marks only the active tab as aria-selected
  ✓ links tabs and panels via aria-controls / aria-labelledby
  ✓ has tabIndex -1 on inactive tabs and 0 on the active tab
  ✓ ArrowRight activates the next tab
  ✓ ArrowLeft activates the previous tab
  ✓ ArrowRight wraps to the first tab from the last
  ✓ ArrowLeft wraps to the last tab from the first
  ✓ Home activates the first tab
  ✓ End activates the last tab
  ✓ does not swallow other key presses
  ✓ renders different variants without error
  ✓ renders different sizes without error
  ✓ forwards a ref to the root element
  ✓ passes data attributes and class names through
  ✓ throws if subcomponents are rendered outside of Tabs

Notes

• Follows existing Alert component conventions (forwardRef, named function expressions, inline styles, explicit type exports)
• Zero TypeScript errors in new files (pre-existing SDK module errors unaffected)

Closes #234

[drips-wave]

@Hollujay Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits