Add 'use client' directive for RSC compatibility

[ravisuhag]

Summary

Several components that use React hooks, refs, or browser APIs are missing the "use client" directive required for Next.js App Router (React Server Components) compatibility. Some components in the library already have it (Accordion, Checkbox), but others don't.

Goal

Audit all components and add "use client" directive to every component file that uses client-side React features (hooks, refs, event handlers, browser APIs).

Affected Components (known missing)

Component	Issue	Details
Tabs (#643)	item 1	Uses hooks but missing directive
Switch (#641)	item 1	Uses hooks but missing directive
Separator (#634)	item 2	Wraps Base UI component
Radio (#630)	item 2	Uses hooks but missing directive

Components to Audit

All components wrapping Base UI or Radix primitives, or using any of:

• useState, useEffect, useRef, useCallback, useMemo
• useContext with client-side context providers
• Event handlers (onClick, onChange, etc.)
• Browser APIs (document, window, localStorage)

Acceptance Criteria

• All client components have "use client" at the top of the file
• Components that are truly server-safe do NOT have the directive
• No runtime errors when importing components in Next.js App Router