@digo-labs/ui 0.1.19 → 0.1.20

package/dist/aws/aws-block-group.d.ts

@@ -1,11 +1,6 @@
 import { AwsBlockGroupBehavior, AwsBlockGroupFit, AwsBlockIdentity, AwsBlockPose } from '@digo-labs/common';
 import { CSSProperties } from 'react';
-import { Transition } from 'motion/react';
-import { AwsBlockTransition } from './aws-block';
 import { ComponentStylesProps } from '../utils/styles';
-export interface AwsBlockGroupTransition extends AwsBlockTransition {
-    move: Transition;
-}
 type Properties = RootProperties & ComponentStylesProps<'awsBlockGroup'>;
 export declare function AwsBlockGroup(properties: Properties): import("react").JSX.Element;
 interface RootProperties {
@@ -15,7 +10,8 @@ interface RootProperties {
     pose?: number;
     onPose?: (pose: number) => void;
     fit?: AwsBlockGroupFit;
-    transition?: Partial<AwsBlockGroupTransition>;
+    beat?: number;
+    hold?: number;
     className?: string;
     style?: CSSProperties;
 }

package/dist/aws/aws-block.d.ts

@@ -1,4 +1,4 @@
-import { AwsBlockSize, AwsGlyphFamily, AwsGlyphStage, AwsPaletteColor } from '@digo-labs/common';
+import { AwsGlyphFamily, AwsGlyphStage, AwsPaletteColor } from '@digo-labs/common';
 import { CSSProperties } from 'react';
 import { Transition } from 'motion/react';
 import { ComponentStylesProps } from '../utils/styles';
@@ -10,7 +10,7 @@ type Properties = RootProperties & ComponentStylesProps<'awsBlock'>;
 export declare function AwsBlock(properties: Properties): import("react").JSX.Element;
 interface RootProperties {
     color?: AwsPaletteColor;
-    size?: AwsBlockSize;
+    size?: number;
     family?: AwsGlyphFamily;
     stage?: AwsGlyphStage;
     onStage?: (stage: AwsGlyphStage) => void;

package/dist/index.js

@@ -2395,7 +2395,7 @@ var { ComponentStylesProvider: Lr, useComponentStyles: Rr } = q("awsBlock"), zr
 		ease: t.circle
 	},
 	resize: {
-		duration: e.resize,
+		duration: e.beat,
 		ease: t.expo
 	}
 }, Br = { duration: 0 };
@@ -2471,19 +2471,9 @@ function Ur() {
 //#endregion
 //#region src/aws/aws-block-group.tsx
 var { ComponentStylesProvider: Wr, useComponentStyles: Gr } = q("awsBlockGroup"), Kr = {
-	enter: {
-		duration: e.enter,
-		ease: t.circle
-	},
-	move: {
-		duration: e.move,
-		ease: t.expo
-	},
-	resize: {
-		duration: e.resize,
-		ease: t.expo
-	}
-}, qr = { duration: 0 }, Jr = Math.max(e.enter, e.move, e.resize);
+	duration: e.enter,
+	ease: t.circle
+}, qr = { duration: 0 }, Jr = 4;
 function Yr(e) {
 	let { classNames: t, ...n } = e;
 	return /* @__PURE__ */ W(Wr, {
@@ -2491,73 +2481,118 @@ function Yr(e) {
 		children: /* @__PURE__ */ W(Xr, { ...n })
 	});
 }
-function Xr(t) {
-	let { blocks: n, poses: r, behavior: i = "build", pose: o, onPose: s, fit: c = "all", transition: l, className: u, style: d } = t, f = Gr(), p = A(), { ref: m, width: h, height: g } = Ur(), [_, y] = U(0), x = H(s);
-	x.current = s;
-	let S = r.length - 1, C = Math.min(o ?? _, S), T = r[Math.max(C - 1, 0)], E = r[C], D = o === void 0 ? r[C >= S ? i === "iterate" ? 0 : C : C + 1] : void 0, O = !c || h > 0 && g > 0, k = p ? 0 : Jr, ee = p ? qr : l?.enter ?? Kr.enter, j = p ? qr : l?.move ?? Kr.move, M = p ? qr : l?.resize ?? Kr.resize;
+function Xr(n) {
+	let { blocks: r, poses: i, behavior: o = "build", pose: s, onPose: c, fit: l = "all", beat: u = e.beat, hold: d = e.hold, className: f, style: p } = n, m = Gr(), h = A(), { ref: g, width: _, height: y } = Ur(), [x, S] = U(0), C = H(c), T = H(0), E = H(0);
+	C.current = c;
+	let D = i.length - 1, O = Math.min(s ?? x, D);
+	O !== E.current && (T.current = E.current, E.current = O);
+	let k = i[O], ee = i[T.current], j = s === void 0 ? i[O >= D ? o === "iterate" ? 0 : O : O + 1] : void 0, M = !l || _ > 0 && y > 0, N = h ? 0 : k.beat ?? u, P = h ? 0 : j?.beat ?? u, F = {
+		duration: N,
+		ease: t.expo
+	}, I = {
+		duration: P,
+		ease: t.expo
+	}, te = h ? qr : Kr;
 	B(() => {
-		if (o !== void 0 || !O || i === "build" && _ >= S) return;
-		let t = r[_].hold ?? e.hold, n = setTimeout(() => y(_ >= S ? 0 : _ + 1), (k + t) * 1e3);
-		return () => clearTimeout(n);
+		if (s !== void 0 || !M || o === "build" && x >= D) return;
+		let e = x >= D ? 0 : x + 1, t = i[x].hold ?? d, n = h ? 0 : i[e].beat ?? u, r = setTimeout(() => S(e), (t + n) * 1e3);
+		return () => clearTimeout(r);
 	}, [
+		s,
+		M,
 		o,
-		O,
 		i,
-		r,
-		_,
-		S,
-		k
+		x,
+		D,
+		u,
+		d,
+		h
 	]), B(() => {
-		if (!O) return;
-		let e = setTimeout(() => x.current?.(C), k * 1e3);
+		if (!M) return;
+		let e = setTimeout(() => C.current?.(O), N * 1e3);
 		return () => clearTimeout(e);
 	}, [
+		M,
 		O,
-		C,
-		k
+		N
 	]);
-	let N = {
-		width: h,
-		height: g
-	}, P = a.getLayout(r, E, N, c);
-	function F(e, t) {
-		let n = {
-			x: P.offset.x + e.x * P.unit,
-			y: P.offset.y + e.y * P.unit
+	let ne = {
+		width: _,
+		height: y
+	}, re = a.getLayout(i, k, ne, l);
+	function L(e, t) {
+		return {
+			x: t.offset.x + e.x * t.unit,
+			y: t.offset.y + e.y * t.unit
+		};
+	}
+	function ie(e, t, n, r, o) {
+		let s = a.getEntry(i, e.id), c = a.getContact(e, k, t.blocks.map((e) => e.id));
+		if (s === "center" || !c || o > Jr) return null;
+		let l = t.blocks.find((e) => e.id === c.id);
+		if (l) {
+			if (s === "split") return L(l, n);
+			let i = a.projectContact(c, k, t);
+			return i ? {
+				x: n.offset.x + i.x * n.unit - (c.x - e.x) * r,
+				y: n.offset.y + i.y * n.unit - (c.y - e.y) * r
+			} : null;
+		}
+		let u = k.blocks.find((e) => e.id === c.id);
+		if (!u) return null;
+		let d = ie(u, t, n, r, o + 1) ?? L(u, re), f = +(a.getEntry(i, u.id) === "split"), p = a.getContact(u, k, t.blocks.map((e) => e.id)) ?? {
+			id: u.id,
+			x: u.x + u.size / 2,
+			y: u.y + u.size / 2
+		}, m = {
+			x: d.x + (p.x - u.x) * r + (c.x - p.x) * r * f,
+			y: d.y + (p.y - u.y) * r + (c.y - p.y) * r * f
 		};
-		if (!t || t === E) return n;
-		let i = a.getContact(e, E), o = i ? a.projectContact(i, E, t) : null;
-		if (!i || !o) return n;
-		let s = a.getLayout(r, t, N, c);
 		return {
-			x: s.offset.x + o.x * s.unit - (i.x - e.x) * P.unit,
-			y: s.offset.y + o.y * s.unit - (i.y - e.y) * P.unit
+			x: m.x - (c.x - e.x) * r,
+			y: m.y - (c.y - e.y) * r
 		};
 	}
+	function ae(e, t, n) {
+		return !t || t === k ? L(e, re) : ie(e, t, a.getLayout(i, t, ne, l), n, 0) ?? L(e, re);
+	}
+	function R(e) {
+		return a.getEntry(i, e.id) === "split" ? qr : j && !j.blocks.some((t) => t.id === e.id) ? I : k.blocks.length === 1 ? te : F;
+	}
+	function z(e) {
+		if (a.getEntry(i, e.id) !== "contact") return "50% 50%";
+		let t = ee.blocks.map((e) => e.id).concat(j?.blocks.map((e) => e.id) ?? []), n = a.getContact(e, k, t);
+		return n ? `${(n.x - e.x) / e.size * 100}% ${(n.y - e.y) / e.size * 100}%` : "50% 50%";
+	}
+	let oe = j ? a.getLayout(i, j, ne, l) : re;
 	return /* @__PURE__ */ W("div", {
-		ref: m,
+		ref: g,
 		"data-slot": "aws-block-group",
-		className: v(f.root, u),
-		style: d,
+		className: v(m.root, f),
+		style: p,
 		children: /* @__PURE__ */ W(Fr, {
-			unit: P.unit,
-			children: /* @__PURE__ */ W(b, { children: O && E.blocks.map((e) => /* @__PURE__ */ W(w.div, {
+			unit: re.unit,
+			children: /* @__PURE__ */ W(b, { children: M && k.blocks.map((e) => /* @__PURE__ */ W(w.div, {
 				"data-slot": "aws-block-group-block",
-				className: f.block,
-				initial: { ...F(e, T) },
-				animate: { ...F(e, E) },
-				exit: { ...F(e, D) },
-				transition: j,
+				className: m.block,
+				style: { zIndex: a.getEntry(i, e.id) === "split" ? 0 : 1 },
+				initial: { ...ae(e, ee, re.unit) },
+				animate: { ...ae(e, k, re.unit) },
+				exit: {
+					...ae(e, j, oe.unit),
+					transition: I
+				},
+				transition: F,
 				children: /* @__PURE__ */ W(Vr, {
-					color: n[e.id].color,
-					family: n[e.id].family,
+					color: r[e.id].color,
+					family: r[e.id].family,
 					size: e.size,
 					stage: e.stage,
 					transition: {
-						enter: ee,
-						resize: M
+						enter: R(e),
+						resize: F
 					},
-					style: { transformOrigin: a.getBlockOrigin(e, E) }
+					style: { transformOrigin: z(e) }
 				})
 			}, e.id)) })
 		})