@konstructio/ui/dist/plugins/utils/animation.styles.js

A set of reusable and customizable React components built for konstruct.io

function i(a) {
  return Object.fromEntries(
    Object.entries(a).filter(([e]) => e !== "DEFAULT")
  );
}
const r = ({
  addUtilities: a,
  matchUtilities: e,
  theme: n
}) => {
  a({
    "@keyframes enter": n("keyframes.enter"),
    "@keyframes exit": n("keyframes.exit"),
    ".animate-in": {
      animationName: "enter",
      animationDuration: n("animationDuration.DEFAULT"),
      "--tw-enter-opacity": "initial",
      "--tw-enter-scale": "initial",
      "--tw-enter-rotate": "initial",
      "--tw-enter-translate-x": "initial",
      "--tw-enter-translate-y": "initial"
    },
    ".animate-out": {
      animationName: "exit",
      animationDuration: n("animationDuration.DEFAULT"),
      "--tw-exit-opacity": "initial",
      "--tw-exit-scale": "initial",
      "--tw-exit-rotate": "initial",
      "--tw-exit-translate-x": "initial",
      "--tw-exit-translate-y": "initial"
    }
  }), e(
    {
      "fade-in": (t) => ({ "--tw-enter-opacity": t }),
      "fade-out": (t) => ({ "--tw-exit-opacity": t })
    },
    { values: n("animationOpacity") }
  ), e(
    {
      "zoom-in": (t) => ({ "--tw-enter-scale": t }),
      "zoom-out": (t) => ({ "--tw-exit-scale": t })
    },
    { values: n("animationScale") }
  ), e(
    {
      "spin-in": (t) => ({ "--tw-enter-rotate": t }),
      "spin-out": (t) => ({ "--tw-exit-rotate": t })
    },
    { values: n("animationRotate") }
  ), e(
    {
      "slide-in-from-top": (t) => ({
        "--tw-enter-translate-y": `-${t}`
      }),
      "slide-in-from-bottom": (t) => ({
        "--tw-enter-translate-y": t
      }),
      "slide-in-from-left": (t) => ({
        "--tw-enter-translate-x": `-${t}`
      }),
      "slide-in-from-right": (t) => ({
        "--tw-enter-translate-x": t
      }),
      "slide-out-to-top": (t) => ({
        "--tw-exit-translate-y": `-${t}`
      }),
      "slide-out-to-bottom": (t) => ({
        "--tw-exit-translate-y": t
      }),
      "slide-out-to-left": (t) => ({
        "--tw-exit-translate-x": `-${t}`
      }),
      "slide-out-to-right": (t) => ({
        "--tw-exit-translate-x": t
      })
    },
    { values: n("animationTranslate") }
  ), e(
    { duration: (t) => ({ animationDuration: t }) },
    { values: i(n("animationDuration")) }
  ), e(
    { delay: (t) => ({ animationDelay: t }) },
    { values: n("animationDelay") }
  ), e(
    { ease: (t) => ({ animationTimingFunction: t }) },
    { values: i(n("animationTimingFunction")) }
  ), a({
    ".running": { animationPlayState: "running" },
    ".paused": { animationPlayState: "paused" }
  }), e(
    { "fill-mode": (t) => ({ animationFillMode: t }) },
    { values: n("animationFillMode") }
  ), e(
    { direction: (t) => ({ animationDirection: t }) },
    { values: n("animationDirection") }
  ), e(
    { repeat: (t) => ({ animationIterationCount: t }) },
    { values: n("animationRepeat") }
  );
}, o = {
  animationDelay: ({ theme: a }) => ({
    ...a("transitionDelay")
  }),
  animationDuration: ({ theme: a }) => ({
    0: "0ms",
    ...a("transitionDuration")
  }),
  animationTimingFunction: ({ theme: a }) => ({
    ...a("transitionTimingFunction")
  }),
  animationFillMode: {
    none: "none",
    forwards: "forwards",
    backwards: "backwards",
    both: "both"
  },
  animationDirection: {
    normal: "normal",
    reverse: "reverse",
    alternate: "alternate",
    "alternate-reverse": "alternate-reverse"
  },
  animationOpacity: ({ theme: a }) => ({
    DEFAULT: 0,
    ...a("opacity")
  }),
  animationTranslate: ({ theme: a }) => ({
    DEFAULT: "100%",
    ...a("translate")
  }),
  animationScale: ({ theme: a }) => ({
    DEFAULT: 0,
    ...a("scale")
  }),
  animationRotate: ({ theme: a }) => ({
    DEFAULT: "30deg",
    ...a("rotate")
  }),
  animationRepeat: {
    0: "0",
    1: "1",
    infinite: "infinite"
  },
  keyframes: {
    enter: {
      from: {
        opacity: "var(--tw-enter-opacity, 1)",
        transform: "translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))"
      }
    },
    exit: {
      to: {
        opacity: "var(--tw-exit-opacity, 1)",
        transform: "translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))"
      }
    }
  }
};
export {
  r as addAnimationStyles,
  o as defaultAnimationThemeValues
};