feat: support animationStyle composition

[segunadebayo]

📝 Description

This is a spin-off from my work on Chakra. Let's introduce a new "mixin" called motion styles. The idea is to pair them with text styles and layer styles to create this three-part mixin that can make your styles a lot cleaner.

Motion styles focus solely on animations, allowing you to orchestrate animation properties.

Here's a good example of this:

import { defineMotionStyles } from "@pandacss/dev"

export const motionStyles = defineMotionStyles({
  "slide-fade-in": {
    value: {
      transformOrigin: "var(--transform-origin)",
      animationDuration: "fast",
      "&[data-placement^=top]": {
        animationName: "slide-from-top, fade-in",
      },
      "&[data-placement^=bottom]": {
        animationName: "slide-from-bottom, fade-in",
      },
      "&[data-placement^=left]": {
        animationName: "slide-from-left, fade-in",
      },
      "&[data-placement^=right]": {
        animationName: "slide-from-right, fade-in",
      },
    },
  },
})

With that defined, I can use it in my recipe or css like so:

export const popoverSlotRecipe = defineSlotRecipe({
  slots: anatomy.keys(),
  base: {
    content: {
      _open: {
        motionStyle: "scale-fade-in",
      },
      _closed: {
        motionStyle: "scale-fade-out",
      },
    },
  },
})

This feature will allow us to lean in towards CSS for animations rather than JS. Composing animation names is a powerful feature we should encourage consumers to use.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
panda-docs	✅ Ready (Inspect)	Visit Preview	Dec 8, 2024 6:04pm
panda-playground	✅ Ready (Inspect)	Visit Preview	Dec 8, 2024 6:04pm
panda-studio	✅ Ready (Inspect)	Visit Preview	Dec 8, 2024 6:04pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 8adfb42

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages

Name	Type
@pandacss/preset-panda	Minor
@pandacss/generator	Minor
@pandacss/types	Minor
@pandacss/core	Minor
@pandacss/dev	Minor
@pandacss/config	Minor
@pandacss/node	Minor
@pandacss/parser	Minor
@pandacss/logger	Minor
@pandacss/preset-atlaskit	Minor
@pandacss/preset-base	Minor
@pandacss/preset-open-props	Minor
@pandacss/studio	Minor
@pandacss/token-dictionary	Minor
@pandacss/astro-plugin-studio	Minor
@pandacss/postcss	Minor
@pandacss/extractor	Minor
@pandacss/is-valid-prop	Minor
@pandacss/shared	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[caseybaggz]

LFG! I'm ready to use this 🔥