[docs] Tabs examples with motion

[mj12albert]

#1494
#1486

Demo: https://deploy-preview-1613--base-ui.netlify.app/experiments/tabs/motion

• Used mode="wait" on AnimatePresence, the entering child waits until the exiting child has animated out, other modes should be possible, though extra display/positioning styles would be required (set via motion) to prevent overlap:
  
• If using Tailwind v4, setting hidden={undefined} on Tabs.Panel is required to ensure the panel is visible during the exit animation (same workaround as Collapsible)
• Replicating the indicator transition from the docs styles with motion turns out to be tricker than the panel, it can't seem to transition the same CSS variable that changes value:

// doesn't work even with the entries repeated in `initial`/`exit`
<Tabs.Indicator render={
  <motion.div
    animate={{
      translate: 'var(--active-tab-left) -50%',
      width: 'var(--active-tab-width)',
    }}
  />
}

• I have followed (at least) the PR section of the contributing guide.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	6692c29
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/67ebb9e814ff670008af9c57
😎 Deploy Preview	https://deploy-preview-1613--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mj12albert]

It would be handy for the state here to provide all the --active-tab-* values to plug into motion

[mj12albert]

Actually it doesn't matter, it accepts CSS variables anyway

https://motion.dev/docs/react-animation#css-variables

[mj12albert]

Couldn't get motion to animate based on these value, raw values are actually already in state.selectedTabSize/Position.*

Maybe motion values have to be used: https://motion.dev/docs/react-motion-value