[Bug]: Calendar & Date picker: glitch/flickering when jumping through months

[holtergram]

Environment

Computer: MacBook Pro 2021 M1
Client OS: MacOs Monterey 12.6.1 (21G217)
Browser: Firefox Dev 117.0b9, Chrome 116.0.5845.110, Safari 15.6.1 (17613.3.9.1.16)

Link to minimal reproduction

Official docs

Steps to reproduce

Visit https://www.shadcn-vue.com/docs/components/date-picker#form and click through

Describe the bug

Hey, I have a weird glitch or flickering when I'm clicking through the months. I've tried to capture/record it but since the display of my MBP M1 is probably running at 120Hz and the recording software runs at 60fps at max I can't actually show what it looks like. For a brief millisecond it shows the next/previous months below the current month and then vanishes right after. So it takes up the whole screen I'm showing in the picture. It's happening with the Calendar and Datepicker component in Firefox Dev, Safari and Chrome. It does not happen when using VCalendar. So my best guess is that it's because of the transition that's supposed to fire but doesn't actually show? At least I'm not seeing any slide animation just a hard cut right after the glitch.

Does this help to narrow down what might be happening? Thanks for the awesome port!

Expected behavior

No flickering, smooth transition.

Conext & Screenshots (if applicable)

https://github.com/radix-vue/shadcn-vue/assets/42282368/79e27f2a-b855-4d76-bac7-9e5e560a7349

[sadeghbarati]

v-calendar source is outdated I hope someone rewrites it in script setup syntax or radix-vue DatePicker primitives arrive sooner

setting transition="none" prop has no effect at all and default transition is slide even if you set it to none

---

Workaround

.vc-none-enter-active,
.vc-none-leave-active {
  transition-duration: 0s;
}

.vc-container {
  position: relative;
  display: inline-flex;
  width: max-content;
  height: max-content;
  -webkit-font-smoothing: antialiased;
}

.vc-pane-container {
  width: 100%;
  position: relative;
}
.vc-pane-container.in-transition {
    overflow: hidden;
}

.vc-none-leave-active,
.vc-fade-leave-active,
.vc-slide-left-leave-active,
.vc-slide-right-leave-active {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vc-none-enter-from,
.vc-none-leave-to,
.vc-fade-enter-from,
.vc-fade-leave-to,
.vc-slide-left-enter-from,
.vc-slide-left-leave-to,
.vc-slide-right-enter-from,
.vc-slide-right-leave-to,
.vc-slide-up-enter-from,
.vc-slide-up-leave-to,
.vc-slide-down-enter-from,
.vc-slide-down-leave-to,
.vc-slide-fade-enter-from,
.vc-slide-fade-leave-to {
  opacity: 0;
}