@arthurzakharov/ui-kit 1.8.9 → 1.9.0

package/dist/animations/fade-grow/fade-grow.component.js

@@ -1,27 +1,28 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import m from "clsx";
 import { withBaseAnimationDefaults as r } from "../utils/default-props.js";
-import { useAnimationLifecycle as s } from "../hooks/use-animation-lifecycle/use-animation-lifecycle.hook.js";
-import { c as d } from "../../animation.module-DQXuL9kR.js";
+import { useAnimationLifecycle as d } from "../hooks/use-animation-lifecycle/use-animation-lifecycle.hook.js";
+import { c as s } from "../../animation.module-DQXuL9kR.js";
 import { m as c } from "../../proxy-CmTphuYR.js";
-const A = (o) => {
-  const t = r(o), i = s({
+const y = (o) => {
+  const t = r(o), i = d({
     condition: t.condition,
-    animateOnStart: t.animateOnStart
-  }), a = {
+    animateOnStart: t.animateOnStart,
+    onAnimationEnd: t.onAnimationEnd
+  }), n = {
     height: 0,
     opacity: 0
-  }, e = { height: "auto", opacity: 1 };
-  return !i.shouldRender && !t.keepMount ? null : /* @__PURE__ */ n(
+  }, a = { height: "auto", opacity: 1 };
+  return !i.shouldRender && !t.keepMount ? null : /* @__PURE__ */ e(
     "div",
     {
       "data-testid": t["data-testid"] || "animation-fade-grow",
-      className: m(d.Animation, t.className),
-      children: /* @__PURE__ */ n(
+      className: m(s.Animation, t.className),
+      children: /* @__PURE__ */ e(
         c.div,
         {
-          initial: i.getInitialState(a, e),
-          animate: i.getAnimateState(a, e),
+          initial: i.getInitialState(n, a),
+          animate: i.getAnimateState(n, a),
           transition: {
             ease: t.ease,
             duration: t.duration,
@@ -37,5 +38,5 @@ const A = (o) => {
   );
 };
 export {
-  A as FadeGrow
+  y as FadeGrow
 };

package/dist/animations/fade-scale/fade-scale.component.js

@@ -2,33 +2,34 @@ import { jsx as o } from "react/jsx-runtime";
 import m from "clsx";
 import { withBaseAnimationDefaults as r } from "../utils/default-props.js";
 import { useAnimationLifecycle as s } from "../hooks/use-animation-lifecycle/use-animation-lifecycle.hook.js";
-import { c } from "../../animation.module-DQXuL9kR.js";
-import { m as d } from "../../proxy-CmTphuYR.js";
-const h = (i) => {
-  const t = r(i), a = s({
-    condition: i.condition,
-    animateOnStart: t.animateOnStart
-  }), e = {
+import { c as d } from "../../animation.module-DQXuL9kR.js";
+import { m as c } from "../../proxy-CmTphuYR.js";
+const S = (n) => {
+  const t = r(n), i = s({
+    condition: n.condition,
+    animateOnStart: t.animateOnStart,
+    onAnimationEnd: t.onAnimationEnd
+  }), a = {
     opacity: 0,
     scale: 0.95
-  }, n = { opacity: 1, scale: 1 };
-  return !a.shouldRender && !t.keepMount ? null : /* @__PURE__ */ o(
+  }, e = { opacity: 1, scale: 1 };
+  return !i.shouldRender && !t.keepMount ? null : /* @__PURE__ */ o(
     "div",
     {
       "data-testid": t["data-testid"] || "animation-fade-scale",
-      className: m(c.Animation, t.className),
+      className: m(d.Animation, t.className),
       children: /* @__PURE__ */ o(
-        d.div,
+        c.div,
         {
-          initial: a.getInitialState(e, n),
-          animate: a.getAnimateState(e, n),
+          initial: i.getInitialState(a, e),
+          animate: i.getAnimateState(a, e),
           transition: {
             ease: t.ease,
             duration: t.duration,
             delay: t.delay,
             type: t.type
           },
-          onAnimationComplete: a.onAnimationComplete,
+          onAnimationComplete: i.onAnimationComplete,
           children: t.children
         },
         t.name
@@ -37,5 +38,5 @@ const h = (i) => {
   );
 };
 export {
-  h as FadeScale
+  S as FadeScale
 };

package/dist/animations/fade-slide/fade-slide.component.js

@@ -1,27 +1,28 @@
 import { jsx as a } from "react/jsx-runtime";
-import r from "clsx";
-import { withBaseAnimationDefaults as m } from "../utils/default-props.js";
+import m from "clsx";
+import { withBaseAnimationDefaults as r } from "../utils/default-props.js";
 import { useAnimationLifecycle as d } from "../hooks/use-animation-lifecycle/use-animation-lifecycle.hook.js";
 import { c as s } from "../../animation.module-DQXuL9kR.js";
 import { m as l } from "../../proxy-CmTphuYR.js";
-const S = (o) => {
-  const t = m(o), i = d({
+const h = (o) => {
+  const t = r(o), i = d({
     condition: t.condition,
-    animateOnStart: t.animateOnStart
-  }), e = {
+    animateOnStart: t.animateOnStart,
+    onAnimationEnd: t.onAnimationEnd
+  }), n = {
     x: (t.direction ?? "ltr") === "ltr" ? "-100%" : "100%",
     opacity: 0
-  }, n = { x: 0, opacity: 1 };
+  }, e = { x: 0, opacity: 1 };
   return !i.shouldRender && !t.keepMount ? null : /* @__PURE__ */ a(
     "div",
     {
       "data-testid": t["data-testid"] || "animation-fade-slide",
-      className: r(s.Animation, t.className),
+      className: m(s.Animation, t.className),
       children: /* @__PURE__ */ a(
         l.div,
         {
-          initial: i.getInitialState(e, n),
-          animate: i.getAnimateState(e, n),
+          initial: i.getInitialState(n, e),
+          animate: i.getAnimateState(n, e),
           transition: {
             ease: t.ease,
             duration: t.duration,
@@ -38,5 +39,5 @@ const S = (o) => {
   );
 };
 export {
-  S as FadeSlide
+  h as FadeSlide
 };

package/dist/animations/hooks/use-animation-lifecycle/use-animation-lifecycle.hook.d.ts

@@ -1,9 +1,10 @@
 type UseAnimationLifecycleOptions = {
     condition: boolean;
     animateOnStart: boolean;
+    onAnimationEnd?: (condition: boolean) => void;
 };
 type AnimationState<T, U> = T | U | false;
-export declare const useAnimationLifecycle: ({ condition, animateOnStart }: UseAnimationLifecycleOptions) => {
+export declare const useAnimationLifecycle: ({ condition, animateOnStart, onAnimationEnd }: UseAnimationLifecycleOptions) => {
     shouldRender: boolean;
     getInitialState: <T, U>(hiddenState: T, visibleState: U) => AnimationState<T, U>;
     getAnimateState: <T, U>(hiddenState: T, visibleState: U) => T | U;

package/dist/animations/hooks/use-animation-lifecycle/use-animation-lifecycle.hook.js

@@ -1,31 +1,31 @@
-import { useState as i, useRef as c, useEffect as s } from "react";
-const S = ({ condition: e, animateOnStart: m }) => {
-  const [a, o] = i(m), [n, u] = i(e || m), f = c(e);
-  return s(() => {
-    f.current = e;
-  }, [e]), s(() => {
-    if (!a) {
+import { useState as f, useRef as l, useEffect as m } from "react";
+const g = ({ condition: e, animateOnStart: u, onAnimationEnd: i }) => {
+  const [r, o] = f(u), [a, c] = f(e || u), n = l(e);
+  return m(() => {
+    n.current = e;
+  }, [e]), m(() => {
+    if (!r) {
       const t = requestAnimationFrame(() => {
         o(!0);
       });
       return () => cancelAnimationFrame(t);
     }
-  }, [a]), s(() => {
-    if (e && !n) {
+  }, [r]), m(() => {
+    if (e && !a) {
       const t = requestAnimationFrame(() => {
-        u(!0);
+        c(!0);
       });
       return () => cancelAnimationFrame(t);
     }
-  }, [e, n]), {
-    shouldRender: n,
-    getInitialState: (t, r) => a ? e ? t : r : !1,
-    getAnimateState: (t, r) => e ? r : t,
+  }, [e, a]), {
+    shouldRender: a,
+    getInitialState: (t, s) => r ? e ? t : s : !1,
+    getAnimateState: (t, s) => e ? s : t,
     onAnimationComplete: () => {
-      f.current || u(!1);
+      n.current || c(!1), i?.(n.current);
     }
   };
 };
 export {
-  S as useAnimationLifecycle
+  g as useAnimationLifecycle
 };

package/dist/animations/rotate/rotate.component.js

@@ -1,26 +1,26 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as d } from "react/jsx-runtime";
 import { useRef as f, useState as l, useEffect as u } from "react";
 import { withBaseAnimationDefaults as p } from "../utils/default-props.js";
 import { m as R } from "../../proxy-CmTphuYR.js";
-const n = {
+const i = {
   top: 0,
   right: 90,
   bottom: 180,
   left: 270
-}, C = (a) => {
-  const t = p(a), o = f(t.condition), [e, r] = l(t.animateOnStart), i = `${n[t.from ?? "left"]}deg`, s = `${n[t.to ?? "top"]}deg`, c = (e ? t.condition : !1) ? s : i;
+}, y = (a) => {
+  const t = p(a), e = f(t.condition), [o, r] = l(t.animateOnStart), n = `${i[t.from ?? "left"]}deg`, s = `${i[t.to ?? "top"]}deg`, c = (o ? t.condition : !1) ? s : n;
   return u(() => {
-    if (o.current !== t.condition && (o.current = t.condition, !e)) {
-      const d = requestAnimationFrame(() => {
+    if (e.current !== t.condition && (e.current = t.condition, !o)) {
+      const m = requestAnimationFrame(() => {
         r(!0);
       });
-      return () => cancelAnimationFrame(d);
+      return () => cancelAnimationFrame(m);
     }
-  }, [t.condition, e]), /* @__PURE__ */ m(
+  }, [t.condition, o]), /* @__PURE__ */ d(
     R.div,
     {
       "data-testid": t["data-testid"] || "animation-rotate",
-      initial: { rotate: i },
+      initial: { rotate: n },
       animate: { rotate: c },
       transition: {
         ease: t.ease,
@@ -29,11 +29,12 @@ const n = {
         type: t.type
       },
       className: t.className,
+      onAnimationComplete: () => t.onAnimationEnd?.(t.condition),
       children: t.children
     },
     t.name
   );
 };
 export {
-  C as Rotate
+  y as Rotate
 };

package/dist/animations/utils/types.d.ts

@@ -9,6 +9,7 @@ export interface BaseAnimationProps extends PropsWithChildren<Base> {
     ease?: EasingDefinition;
     duration?: number;
     delay?: number;
+    onAnimationEnd?: (condition: boolean) => void;
 }
 export interface BaseFadeAnimationProps extends BaseAnimationProps {
     keepMount?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arthurzakharov/ui-kit",
   "private": false,
-  "version": "1.8.9",
+  "version": "1.9.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",