@unicom-cloud/ui 0.8.156 → 0.8.158

package/splitter/hooks/useResize.js

@@ -1,54 +1,54 @@
-/* 潘启宝 2026-04-14 16:51:07 星期二 */
+/* 潘启宝 2026-05-08 09:13:14 星期五 */
 import { isString as e } from "../../utils/is.js";
 import { getPtg as t } from "./useSizes.js";
-import n from "react";
+import { useRef as n, useState as r } from "react";
 //#region components/pc/splitter/hooks/useResize.ts
-function r(r, i, a, o, s) {
-	let c = r.map((e) => [e.min, e.max]), l = a || 0, u = (e) => e * l;
-	function d(n, r) {
-		return e(n) ? u(t(n)) : n ?? r;
+function i(i, a, o, s, c) {
+	let l = i.map((e) => [e.min, e.max]), u = o || 0, d = (e) => e * u;
+	function f(n, r) {
+		return e(n) ? d(t(n)) : n ?? r;
 	}
-	let [f, p] = n.useState([]), m = n.useRef([]), [h, g] = n.useState(null), _ = () => i.map(u);
+	let [p, m] = r([]), h = n([]), [g, _] = r(null), v = () => a.map(d);
 	return [
 		(e) => {
-			p(_()), g({
+			m(v()), _({
 				index: e,
 				confirmed: !1
 			});
 		},
 		(e, t) => {
 			let n = null;
-			if ((!h || !h.confirmed) && t !== 0) {
-				if (t > 0) n = e, g({
+			if ((!g || !g.confirmed) && t !== 0) {
+				if (t > 0) n = e, _({
 					index: e,
 					confirmed: !0
 				});
-				else for (let t = e; t >= 0; --t) if (f[t] > 0) {
-					n = t, g({
+				else for (let t = e; t >= 0; --t) if (p[t] > 0) {
+					n = t, _({
 						index: t,
 						confirmed: !0
 					});
 					break;
 				}
 			}
-			let r = n ?? h?.index ?? e, i = [...f], a = r + 1, s = d(c[r][0], 0), u = d(c[a][0], 0), p = d(c[r][1], l), m = d(c[a][1], l), _ = t;
-			return i[r] + _ < s && (_ = s - i[r]), i[a] - _ < u && (_ = i[a] - u), i[r] + _ > p && (_ = p - i[r]), i[a] - _ > m && (_ = i[a] - m), i[r] += _, i[a] -= _, o(i), i;
+			let r = n ?? g?.index ?? e, i = [...p], a = r + 1, o = f(l[r][0], 0), c = f(l[a][0], 0), d = f(l[r][1], u), m = f(l[a][1], u), h = t;
+			return i[r] + h < o && (h = o - i[r]), i[a] - h < c && (h = i[a] - c), i[r] + h > d && (h = d - i[r]), i[a] - h > m && (h = i[a] - m), i[r] += h, i[a] -= h, s(i), i;
 		},
 		() => {
-			g(null);
+			_(null);
 		},
 		(e, t) => {
-			let n = _(), r = s ? t === "start" ? "end" : "start" : t, i = r === "start" ? e : e + 1, a = r === "start" ? e + 1 : e, u = n[i], f = n[a];
-			if (u !== 0 && f !== 0) n[i] = 0, n[a] += u, m.current[e] = u;
+			let n = v(), r = c ? t === "start" ? "end" : "start" : t, i = r === "start" ? e : e + 1, a = r === "start" ? e + 1 : e, o = n[i], d = n[a];
+			if (o !== 0 && d !== 0) n[i] = 0, n[a] += o, h.current[e] = o;
 			else {
-				let t = u + f, r = d(c[i][0], 0), o = d(c[i][1], l), s = d(c[a][0], 0), p = d(c[a][1], l), h = Math.max(r, t - p), g = Math.min(o, t - s), _ = s || (g - h) / 2, v = m.current[e], y = t - v;
-				v && v <= p && v >= s && y <= o && y >= r ? (n[a] = v, n[i] = y) : (n[i] -= _, n[a] += _);
+				let t = o + d, r = f(l[i][0], 0), s = f(l[i][1], u), c = f(l[a][0], 0), p = f(l[a][1], u), m = Math.max(r, t - p), g = Math.min(s, t - c), _ = c || (g - m) / 2, v = h.current[e], y = t - v;
+				v && v <= p && v >= c && y <= s && y >= r ? (n[a] = v, n[i] = y) : (n[i] -= _, n[a] += _);
 			}
-			return o(n), n;
+			return s(n), n;
 		},
-		h?.index
+		g?.index
 	];
 }
 //#endregion
-export { r as default };
+export { i as default };
 /* 独立思考，明辨是非 */

package/splitter/hooks/useSizes.js

@@ -1,59 +1,59 @@
-/* 潘启宝 2026-04-14 16:51:07 星期二 */
-import { isString as e } from "../../utils/is.js";
-import t from "react";
+/* 潘启宝 2026-05-08 09:13:14 星期五 */
+import { isString as e, isUndefined as t } from "../../utils/is.js";
+import n from "react";
 //#region components/pc/splitter/hooks/useSizes.ts
-function n(e) {
+function r(e) {
 	return Number(e.slice(0, -1)) / 100;
 }
-function r(t) {
+function i(t) {
 	return e(t) && t.endsWith("%");
 }
-function i(e, i) {
-	let a = e.map((e) => e.size), o = e.length, s = i || 0, [c, l] = t.useState(() => e.map((e) => e.defaultSize)), u = t.useMemo(() => {
+function a(e, a) {
+	let o = e.map((e) => e.size), s = e.length, c = a || 0, [l, u] = n.useState(() => e.map((e) => e.defaultSize)), d = n.useMemo(() => {
 		let e = [];
-		for (let t = 0; t < o; t += 1) e[t] = a[t] ?? c[t];
+		for (let t = 0; t < s; t += 1) e[t] = o[t] ?? l[t];
 		return e;
 	}, [
-		o,
-		c,
-		a
-	]), d = t.useMemo(() => {
-		let e = [], t = 0;
-		for (let i = 0; i < o; i += 1) {
-			let a = u[i];
-			if (r(a)) e[i] = n(a);
+		s,
+		l,
+		o
+	]), f = n.useMemo(() => {
+		let e = [], n = 0;
+		for (let t = 0; t < s; t += 1) {
+			let a = d[t];
+			if (i(a)) e[t] = r(a);
 			else if (a || a === 0) {
-				let t = Number(a);
-				Number.isNaN(t) || (e[i] = t / s);
-			} else t += 1, e[i] = void 0;
+				let n = Number(a);
+				Number.isNaN(n) || (e[t] = n / c);
+			} else n += 1, e[t] = void 0;
 		}
-		let i = e.reduce((e, t) => e + (t || 0), 0);
-		if (i > 1 || !t) {
-			let t = 1 / i;
-			e = e.map((e) => e === void 0 ? 0 : e * t);
+		let a = e.reduce((e, t) => e + (t || 0), 0);
+		if (a > 1 || !n) {
+			let n = 1 / a;
+			e = e.map((e) => t(e) ? 0 : e * n);
 		} else {
-			let n = (1 - i) / t;
-			e = e.map((e) => e === void 0 ? n : e);
+			let r = (1 - a) / n;
+			e = e.map((e) => t(e) ? r : e);
 		}
 		return e;
 	}, [
-		o,
-		u,
-		s
-	]), f = t.useMemo(() => d.map((e) => e * s), [s, d]), p = t.useMemo(() => e.map((e) => r(e.min) ? n(e.min) : (e.min || 0) / s), [e, s]), m = t.useMemo(() => e.map((e) => r(e.max) ? n(e.max) : (e.max || s) / s), [e, s]);
+		s,
+		d,
+		c
+	]), p = n.useMemo(() => f.map((e) => e * c), [c, f]), m = n.useMemo(() => e.map((e) => i(e.min) ? r(e.min) : (e.min || 0) / c), [e, c]), h = n.useMemo(() => e.map((e) => i(e.max) ? r(e.max) : (e.max || c) / c), [e, c]);
 	return [
-		t.useMemo(() => i ? f : u, [
-			i,
-			f,
-			u
+		n.useMemo(() => a ? p : d, [
+			a,
+			p,
+			d
 		]),
-		f,
-		d,
 		p,
+		f,
 		m,
-		l
+		h,
+		u
 	];
 }
 //#endregion
-export { i as default, n as getPtg };
+export { a as default, r as getPtg };
 /* 独立思考，明辨是非 */

package/splitter/index.js

@@ -1,4 +1,4 @@
-/* 潘启宝 2026-04-14 16:51:07 星期二 */
+/* 潘启宝 2026-05-08 09:13:14 星期五 */
 import e from "./Panel.js";
 import t from "./Splitter.js";
 //#region components/pc/splitter/index.tsx

package/splitter/interface.d.ts

@@ -12,7 +12,7 @@ export interface SplitterProps {
      * @zh 自定义类名（字符串或数组）
      * @en Custom class name (string or array)
      */
-    className?: string | string[];
+    className?: string;
     /**
      * @zh 自定义类名前缀
      * @en Custom prefix class name
@@ -61,7 +61,7 @@ export interface PanelProps {
      * @zh 自定义类名（字符串或数组）
      * @en Custom class name (string or array)
      */
-    className?: string | string[];
+    className?: string;
     /**
      * @zh 自定义样式
      * @en Custom style

package/statistic/Statistic.d.ts

@@ -1,8 +1,4 @@
-import Countdown from '../countdown';
 import type { StatisticProps } from './interface';
-declare const ForwardRefStatistic: import("react").ForwardRefExoticComponent<StatisticProps & import("react").RefAttributes<unknown>>;
-declare const StatisticComponent: typeof ForwardRefStatistic & {
-    Countdown: typeof Countdown;
-};
+declare const StatisticComponent: import("react").ForwardRefExoticComponent<StatisticProps & import("react").RefAttributes<unknown>>;
 export default StatisticComponent;
 export type { StatisticProps };

package/statistic/Statistic.js

@@ -1,108 +1,107 @@
-/* 潘启宝 2026-04-14 16:51:07 星期二 */
-import { isFunction as e, isNumber as t } from "../utils/is.js";
-import n from "../utils/className.js";
-import r from "../hooks/use-merge-props/index.js";
-import i from "../config-provider/context.js";
-import a from "../utils/omit.js";
+/* 潘启宝 2026-05-08 09:13:14 星期五 */
+import { isFunction as e, isNumber as t, isUndefined as n, isUndefinedOrNull as r } from "../utils/is.js";
+import i from "../utils/className.js";
+import a from "../hooks/use-merge-props/index.js";
+import o from "../config-provider/context.js";
+import s from "../utils/omit.js";
 import "../config-provider/index.js";
-import o, { easing as s } from "../utils/tween.js";
-import { PREFIX_CLASS_STATISTIC as c } from "./interface.js";
-import "../countdown/index.js";
-import l from "../skeleton/index.js";
-import { forwardRef as u, useContext as d, useEffect as f, useImperativeHandle as p, useMemo as m, useRef as h, useState as g } from "react";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
-import b from "dayjs";
+import c, { easing as l } from "../utils/tween.js";
+import { PREFIX_CLASS_STATISTIC as u } from "./interface.js";
+import d from "../skeleton/index.js";
+import { forwardRef as f, useContext as p, useEffect as m, useImperativeHandle as h, useMemo as g, useRef as _, useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import S from "dayjs";
 //#region components/pc/statistic/Statistic.tsx
-function x(u, x) {
-	let S = {
+function C(f, C) {
+	let w = {
 		countFrom: 0,
 		countDuration: 2e3
-	}, { getPrefixCls: C, componentConfig: w, rtl: T } = d(i), E = r(u, S, w?.Statistic), { className: D, style: O, title: k, extra: A, groupSeparator: j, precision: M, prefix: N, suffix: P, format: F, renderFormat: I, styleValue: L, styleDecimal: R, loading: z, ...B } = E, V = h(void 0), H = h(void 0), [U, W] = g("value" in E ? E.value : void 0), G = C?.(c), K = (e = E.countFrom, t = E.value) => {
-		let { countDuration: n } = E;
-		e !== t && (V.current = new o({
+	}, { getPrefixCls: T, componentConfig: E, rtl: D } = p(o), O = a(f, w, E?.Statistic), { className: k, style: A, title: j, extra: M, groupSeparator: N, precision: P, prefix: F, suffix: I, format: L, renderFormat: R, styleValue: z, styleDecimal: B, loading: V, ...H } = O, U = _(void 0), W = _(null), [G, K] = v("value" in O ? O.value : void 0), q = T?.(u), J = (e = O.countFrom, t = O.value) => {
+		let { countDuration: n } = O;
+		e !== t && (U.current = new c({
 			from: { value: e },
 			to: { value: t },
 			duration: n,
-			easing: s.quartOut,
+			easing: l.quartOut,
 			onUpdate: (e) => {
-				W(e.value.toFixed(M));
+				K(e.value.toFixed(P));
 			},
 			onFinish: () => {
-				W(t);
+				K(t);
 			}
-		}), V.current.start());
+		}), U.current.start());
 	};
-	f(() => (E.countUp ? (V.current && V.current.stop(), U === E.value ? K() : K(Number(U), E.value)) : W(E.value), () => {
-		V.current && V.current.stop(), V.current = null;
-	}), [E.value]), p(x, () => ({
-		countUp: K,
+	m(() => (O.countUp ? (U.current && U.current.stop(), G === O.value ? J() : J(Number(G), O.value)) : K(O.value), () => {
+		U.current && U.current.stop(), U.current = null;
+	}), [O.value]), h(C, () => ({
+		countUp: J,
 		getRootElement() {
-			return H.current;
+			return W.current;
 		}
 	}));
-	let { int: q, decimal: J } = m(() => {
-		let e = U;
-		F && (e = b(U).format(F)), t(M) && M >= 0 && (e = Number(U).toFixed(M));
+	let { int: Y, decimal: X } = g(() => {
+		let e = G;
+		L && (e = S(G).format(L)), t(P) && P >= 0 && (e = Number(G).toFixed(P));
 		let n = String(e).split(".")[0], r = String(e).split(".")[1];
-		return j && t(Number(U)) && (n = Number(n).toLocaleString("en-US")), {
+		return N && t(Number(G)) && (n = Number(n).toLocaleString("en-US")), {
 			int: n,
 			decimal: r
 		};
 	}, [
-		F,
-		j,
-		M,
-		U
-	]), Y = e(I) ? I : (e, t) => t, X = t(Number(U)), Z = /* @__PURE__ */ y(_, { children: [N == null ? null : /* @__PURE__ */ v("span", {
-		className: `${G}-value-prefix`,
-		children: N
-	}), Y(U, X ? q : U)] });
-	return /* @__PURE__ */ y("div", {
-		className: n(`${G}`, { [`${G}-rtl`]: T }, D),
-		style: O,
-		...a(B, [
+		L,
+		N,
+		P,
+		G
+	]), Z = e(R) ? R : (e, t) => t, Q = t(Number(G)), $ = /* @__PURE__ */ x(y, { children: [r(F) ? null : /* @__PURE__ */ b("span", {
+		className: `${q}-value-prefix`,
+		children: F
+	}), Z(G, Q ? Y : G)] });
+	return /* @__PURE__ */ x("div", {
+		className: i(`${q}`, { [`${q}-rtl`]: D }, k),
+		style: A,
+		...s(H, [
 			"value",
 			"countUp",
 			"countFrom",
 			"countDuration"
 		]),
-		ref: H,
-		children: [k && /* @__PURE__ */ v("div", {
-			className: `${G}-title`,
-			children: k
-		}), /* @__PURE__ */ y("div", {
-			className: `${G}-content`,
-			children: [/* @__PURE__ */ v(l, {
+		ref: W,
+		children: [j && /* @__PURE__ */ b("div", {
+			className: `${q}-title`,
+			children: j
+		}), /* @__PURE__ */ x("div", {
+			className: `${q}-content`,
+			children: [/* @__PURE__ */ b(d, {
 				animation: !0,
-				loading: !!z,
+				loading: !!V,
 				text: {
 					rows: 1,
 					width: "100%"
 				},
-				children: /* @__PURE__ */ y("div", {
-					className: `${G}-value`,
-					style: L,
-					children: [X ? /* @__PURE__ */ v("span", {
-						className: `${G}-value-int`,
-						children: Z
-					}) : Z, J !== void 0 || P ? /* @__PURE__ */ y("span", {
-						className: `${G}-value-decimal`,
-						style: R,
-						children: [t(Number(U)) && J !== void 0 && `.${J}`, P == null ? null : /* @__PURE__ */ v("span", {
-							className: `${G}-value-suffix`,
-							children: P
+				children: /* @__PURE__ */ x("div", {
+					className: `${q}-value`,
+					style: z,
+					children: [Q ? /* @__PURE__ */ b("span", {
+						className: `${q}-value-int`,
+						children: $
+					}) : $, !n(X) || I ? /* @__PURE__ */ x("span", {
+						className: `${q}-value-decimal`,
+						style: B,
+						children: [t(Number(G)) && !n(X) && `.${X}`, r(I) ? null : /* @__PURE__ */ b("span", {
+							className: `${q}-value-suffix`,
+							children: I
 						})]
 					}) : null]
 				})
-			}), A && /* @__PURE__ */ v("div", {
-				className: `${G}-extra`,
-				children: A
+			}), M && /* @__PURE__ */ b("div", {
+				className: `${q}-extra`,
+				children: M
 			})]
 		})]
 	});
 }
-var S = u(x);
-S.displayName = "Statistic";
+var w = f(C);
+w.displayName = "Statistic";
 //#endregion
-export { S as default };
+export { w as default };
 /* 独立思考，明辨是非 */

package/statistic/index.d.ts

@@ -1,8 +1,6 @@
 import Countdown from '../countdown';
 import type { StatisticProps } from './interface';
 declare const Statistic: import("react").ForwardRefExoticComponent<StatisticProps & import("react").RefAttributes<unknown>> & {
-    Countdown: typeof Countdown;
-} & {
     Countdown: import("react").ForwardRefExoticComponent<import("..").CountdownProps & import("react").RefAttributes<unknown>>;
 };
 export { Countdown as StatisticCountdown };

package/statistic/index.js

@@ -1,4 +1,4 @@
-/* 潘启宝 2026-04-14 16:51:07 星期二 */
+/* 潘启宝 2026-05-08 09:13:14 星期五 */
 import e from "../countdown/index.js";
 import t from "./Statistic.js";
 //#region components/pc/statistic/index.tsx

package/statistic/interface.d.ts

@@ -6,7 +6,7 @@ export declare const PREFIX_CLASS_STATISTIC = "statistic";
  */
 export interface StatisticProps {
     style?: CSSProperties;
-    className?: string | string[];
+    className?: string;
     /**
      * @zh 数值的样式
      * @en The css style of statistic's value

package/statistic/interface.js

@@ -1,4 +1,4 @@
-/* 潘启宝 2026-04-14 16:51:07 星期二 */
+/* 潘启宝 2026-05-08 09:13:14 星期五 */
 import "react";
 import "dayjs";
 //#region components/pc/statistic/interface.ts

package/steps/Step.js

@@ -1,4 +1,4 @@
-/* 潘启宝 2026-04-14 16:51:07 星期二 */
+/* 潘启宝 2026-05-08 09:13:14 星期五 */
 import e from "../utils/className.js";
 import { forwardRef as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";

package/steps/Steps.d.ts

@@ -1,10 +1,5 @@
 import React from 'react';
-import Step from './Step';
 import type { StepsProps } from './interface';
-declare const ForwardRefSteps: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<unknown>>;
-declare const StepsComponent: typeof ForwardRefSteps & {
-    Step: typeof Step;
-    Item: typeof Step;
-};
+declare const StepsComponent: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<unknown>>;
 export default StepsComponent;
 export type { StepsProps };

package/steps/Steps.js

@@ -1,11 +1,10 @@
-/* 潘启宝 2026-04-14 16:51:07 星期二 */
+/* 潘启宝 2026-05-08 09:13:14 星期五 */
 import { isFunction as e } from "../utils/is.js";
 import t from "../utils/className.js";
 import { pickDataAttributes as n } from "../utils/pick.js";
 import r from "../hooks/use-merge-props/index.js";
 import i from "../config-provider/context.js";
 import "../config-provider/index.js";
-import "./Step.js";
 import a, { forwardRef as o, useContext as s, useImperativeHandle as c, useRef as l } from "react";
 import { jsx as u } from "react/jsx-runtime";
 //#region components/pc/steps/Steps.tsx
@@ -34,7 +33,7 @@ function f(o, f) {
 		style: v,
 		className: M,
 		...n(g),
-		children: a.Children.toArray(y).filter((e) => e && e.type && e.type.displayName === "Step").map((e, t) => {
+		children: a.Children.toArray(y).filter((e) => e?.type?.displayName === "Step").map((e, t) => {
 			if (t += 1, e) {
 				let n = {
 					prefixCls: k,

package/steps/index.d.ts

@@ -1,9 +1,6 @@
 import type { StepsProps } from './interface';
 import Step from './Step';
 declare const Steps: import("react").ForwardRefExoticComponent<StepsProps & import("react").RefAttributes<unknown>> & {
-    Step: typeof Step;
-    Item: typeof Step;
-} & {
     Step: import("react").ForwardRefExoticComponent<import("./interface").StepProps & import("react").RefAttributes<unknown>>;
     Item: import("react").ForwardRefExoticComponent<import("./interface").StepProps & import("react").RefAttributes<unknown>>;
 };

package/steps/index.js

@@ -1,4 +1,4 @@
-/* 潘启宝 2026-04-14 16:51:07 星期二 */
+/* 潘启宝 2026-05-08 09:13:14 星期五 */
 import e from "./Step.js";
 import t from "./Steps.js";
 //#region components/pc/steps/index.tsx

package/steps/interface.d.ts

@@ -4,7 +4,7 @@ import { CSSProperties, ReactNode } from 'react';
  */
 export interface StepsProps {
     style?: CSSProperties;
-    className?: string | string[];
+    className?: string;
     /**
      * @zh 节点样式类型
      * @en Type of step
@@ -76,7 +76,7 @@ export interface StepProps {
      * @zh 节点类名
      * @en The additional css className
      */
-    className?: string | string[];
+    className?: string;
     prefixCls?: string;
     index?: number;
     current?: number;

package/style/animation/fade.less

@@ -2,60 +2,48 @@
 
 .@{prefix}-fade-in-standard-appear,
 .@{prefix}-fade-in-standard-appear-active,
-.@{prefix}-fade-in-standard-appear-done,
 .@{prefix}-fade-in-standard-enter,
-.@{prefix}-fade-in-standard-enter-active,
-.@{prefix}-fade-in-standard-enter-done,
-.@{prefix}-fade-in-standard-exit,
-.@{prefix}-fade-in-standard-exit-active,
-.@{prefix}-fade-in-standard-exit-done {
-  transition: opacity var(--pqb-transition-duration-3)
+.@{prefix}-fade-in-standard-enter-active {
+  transition: opacity var(--pqb-transition-duration-4)
     var(--pqb-transition-timing-function-standard);
 }
+.@{prefix}-fade-in-standard-exit,
+.@{prefix}-fade-in-standard-exit-active {
+  transition-duration: var(--pqb-transition-duration-3);
+}
 .@{prefix}-fade-in-standard-appear,
-.@{prefix}-fade-in-standard-enter {
+.@{prefix}-fade-in-standard-enter,
+.@{prefix}-fade-in-standard-exit-active,
+.@{prefix}-fade-in-standard-exit-done {
   opacity: 0;
 }
 .@{prefix}-fade-in-standard-appear-active,
 .@{prefix}-fade-in-standard-appear-done,
 .@{prefix}-fade-in-standard-enter-active,
-.@{prefix}-fade-in-standard-enter-done {
-  opacity: 1;
-}
+.@{prefix}-fade-in-standard-enter-done,
 .@{prefix}-fade-in-standard-exit {
   opacity: 1;
 }
-.@{prefix}-fade-in-standard-exit-active,
-.@{prefix}-fade-in-standard-exit-done {
-  opacity: 0;
-}
 
 .@{prefix}-fade-in-appear,
 .@{prefix}-fade-in-appear-active,
-.@{prefix}-fade-in-appear-done,
 .@{prefix}-fade-in-enter,
 .@{prefix}-fade-in-enter-active,
-.@{prefix}-fade-in-enter-done,
 .@{prefix}-fade-in-exit,
-.@{prefix}-fade-in-exit-active,
-.@{prefix}-fade-in-exit-done {
+.@{prefix}-fade-in-exit-active {
   transition: opacity var(--pqb-transition-duration-1)
     var(--pqb-transition-timing-function-linear);
 }
 .@{prefix}-fade-in-enter,
-.@{prefix}-fade-in-appear {
+.@{prefix}-fade-in-appear,
+.@{prefix}-fade-in-exit-active,
+.@{prefix}-fade-in-exit-done {
   opacity: 0;
 }
 .@{prefix}-fade-in-appear-active,
 .@{prefix}-fade-in-appear-done,
 .@{prefix}-fade-in-enter-active,
-.@{prefix}-fade-in-enter-done {
-  opacity: 1;
-}
+.@{prefix}-fade-in-enter-done,
 .@{prefix}-fade-in-exit {
   opacity: 1;
 }
-.@{prefix}-fade-in-exit-active,
-.@{prefix}-fade-in-exit-done {
-  opacity: 0;
-}