[Tabs] Add use client directive, forward activation/loop props, and replace hardcoded sizes

[ravisuhag]

Summary

Tabs wraps Base UI's Tabs primitive. Missing 'use client' directive, several Base UI props not forwarded, and hardcoded CSS values.

Improvements

1. Add 'use client' directive

Missing for Next.js App Router compatibility. Accordion has it; Tabs doesn't.

2. Forward activation prop from Base UI

Base UI supports "automatic" vs "manual" activation modes. Not exposed.

3. Forward loop prop for keyboard navigation

Base UI's loop prop for cycling keyboard navigation is not forwarded.

4. Replace hardcoded CSS values with design tokens

• height: 28px for tab — should use token
• width: 16px; height: 16px for icon — should use token

5. Add aria-hidden control for leadingIcon

Decorative icons wrapped via leadingIcon prop have no aria-hidden attribute, potentially confusing screen readers.

6. Make indicator customizable

TabsPrimitive.Indicator is always auto-injected in TabsList with no way to customize or disable it.

Props Not Forwarded from Base UI

Base UI Prop	Status	Notes
activation	Missing	automatic vs manual tab activation
loop	Missing	Keyboard navigation cycling
selectionFollowsFocus	Missing	Focus follows selection behavior

API Differences from Base UI

Base UI	Apsara	Notes
Tabs.Root	Tabs	Flattened naming
Tabs.List	Tabs.List	Same
Tabs.Tab	Tabs.Tab	Adds leadingIcon prop
Tabs.Panel	Tabs.Content	Renamed
Tabs.Indicator	(internal)	Auto-injected, not exposed

Files

• packages/raystack/raystack/components/tabs/