[Toast] Animations are broken

[Xelson]

Toasts just overlaping each other on the tailwind version

I have determined that some animations are not defined at all in the bundle

import * as Toast from '~/components/ui/toast'

const toaster = Toast.createToaster({
  placement: 'bottom-end',
  overlap: true,
  gap: 24,
})

function App() {
  return (
    <div>
      <button
        type="button"
        onClick={() =>
          toaster.create({
            title: 'Toast Title',
            description: 'Toast Description',
            type: 'info',
          })
        }
      >
        Add Toast
      </button>
      <Toast.Toaster toaster={toaster}>
        {(toast) => (
          <Toast.Root key={toast.id}>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
            <Toast.ActionTrigger>Do Action</Toast.ActionTrigger>
            <Toast.CloseTrigger>
              x
            </Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toast.Toaster>
    </div>
  )
}

export default App

Workaround

I extracted some styles from ark-ui docs and insterted they to my project:

.toast__root {
    background: var(--colors-bg-default);
    border-radius: var(--radii-l3);
    box-shadow: var(--shadows-lg);
    min-width: var(--sizes-xs);
    height: var(--height);
    opacity: var(--opacity);
    overflow-wrap: anywhere;
    padding: var(--spacing-4);
    position: relative;
    scale: var(--scale);
    translate: var(--x) var(--y) 0;
    will-change: translate,opacity,scale;
    z-index: var(--z-index);
    --transition-duration: var(--durations-slow);
    transition-duration: var(--durations-slow);
    --transition-prop: translate,scale,opacity,height;
    transition-property: translate,scale,opacity,height;
    --transition-easing: var(--easings-default);
    transition-timing-function: var(--easings-default)
}

.toast__title {
    color: var(--colors-fg-default);
    font-weight: var(--font-weights-semibold)
}

.toast__description,.toast__title {
    font-size: var(--font-sizes-sm);
    line-height: 1.25rem
}

.toast__description {
    color: var(--colors-fg-muted)
}

.toast__actionTrigger {
    margin-top: var(--spacing-2)
}

.toast__closeTrigger {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3)
}

Result:

Installed dependencies

vite": "^5.3.1"
@ark-ui/react: "^3.3.0"
@park-ui/tailwind-plugin: "^0.20.1"