feat(tabs): component improvements and new features

[ravisuhag]

Summary

Improvements and new features for the Tabs component to enhance flexibility, user experience, and alignment with modern UI patterns.

Proposed Features

1. Visual Variants

Add style variants via props instead of single fixed style:

<Tabs.Root variant="underline" | "pills" | "enclosed" | "soft">

• underline - Bottom border indicator (common in navigation)
• pills - Rounded pill-style tabs
• enclosed - Boxed tabs connected to content
• soft - Current style (subtle background)

2. Size Variants

Support different sizes for various contexts:

<Tabs.Root size="sm" | "md" | "lg">

Currently fixed at 28px height - adding size variants improves flexibility.

3. Animated Tab Indicator

Add a sliding indicator that animates between tabs:

<Tabs.Root animated={true}>

Provides visual feedback during tab transitions.

4. Lazy Content Loading

Defer rendering content until tab is activated:

<Tabs.Content value="heavy" lazy>

Useful for tabs with expensive content or data fetching.

5. Scrollable Tabs

Handle overflow when many tabs exist:

<Tabs.List scrollable>

Add scroll arrows or horizontal scroll when tabs overflow container width.

6. Closable Tabs

Support removable tabs for editor-like interfaces:

<Tabs.Trigger value="file1" closable onClose={() => {}}>

7. Badge/Count Support

Display notification badges on tabs:

<Tabs.Trigger value="notifications" badge={5}>

8. Activation Mode

Configure when tab activates (click vs focus):

<Tabs.Root activationMode="automatic" | "manual">

Manual mode requires Enter/Space to activate after focus.

9. Content Transitions

Add smooth transitions between content panels:

<Tabs.Root transition="fade" | "slide" | "none">

10. Full Width Option

Stretch tabs to fill container:

<Tabs.List fullWidth>

Minor Enhancements

Feature	Description
Loading state	Spinner in tab trigger during async operations
Tab tooltip	Native tooltip support on triggers
Tab groups	Visual separators between tab groups
forceMount	Keep inactive content in DOM (for forms)

Priority

High impact, moderate effort:

1. Visual variants (underline, pills, enclosed)
2. Size variants (sm, md, lg)
3. Scrollable tabs

High impact, higher effort:
4. Animated tab indicator
5. Content transitions

[ravisuhag]

We can also add orientation for horizontal vs vertical tabs.