@cube-dev/ui-kit 0.199.1 → 0.199.2

package/dist/components/status/LoadingAnimation/LoadingAnimation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { Block } from "../../Block.js";
 import { useI18n } from "../../../i18n/useI18n.js";
@@ -36,6 +36,12 @@ const CubeElement = tasty({
 			"": 0,
 			"index=0 | index=1 | index=2": 0
 		},
+		transform: {
+			"": "none",
+			"base=left": "translate(0%, 72.5%)",
+			"base=right": "translate(98%, 72.5%)",
+			"base=bottom": "translate(49%, 96.5%)"
+		},
 		"@keyframes": {
 			dice0: {
 				from: {
@@ -142,19 +148,23 @@ function useTimelineSyncedAnimation(ref, isAnimated) {
 }
 function Cube(t0) {
 	const $ = c(8);
-	const { index, style } = t0;
+	const { index, base } = t0;
 	const ref = useRef(null);
 	useTimelineSyncedAnimation(ref, index != null);
 	let t1;
-	if ($[0] !== index) {
-		t1 = index != null ? { index } : void 0;
-		$[0] = index;
-		$[1] = t1;
-	} else t1 = $[1];
+	if ($[0] !== base || $[1] !== index) {
+		t1 = {
+			index,
+			base
+		};
+		$[0] = base;
+		$[1] = index;
+		$[2] = t1;
+	} else t1 = $[2];
 	let t2;
 	let t3;
 	let t4;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ jsx("path", {
 			fill: "var(--loading-face-1-color)",
 			d: "M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z"
@@ -167,20 +177,19 @@ function Cube(t0) {
 			fill: "var(--loading-face-3-color)",
 			d: "M36 30.75L18 41V20.6l17.899-10.25L36 30.75z"
 		});
-		$[2] = t2;
-		$[3] = t3;
-		$[4] = t4;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
 	} else {
-		t2 = $[2];
-		t3 = $[3];
-		t4 = $[4];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
 	}
 	let t5;
-	if ($[5] !== style || $[6] !== t1) {
+	if ($[6] !== t1) {
 		t5 = /* @__PURE__ */ jsxs(CubeElement, {
 			ref,
 			mods: t1,
-			style,
 			viewBox: "0 0 36 41",
 			fill: "none",
 			xmlns: "http://www.w3.org/2000/svg",
@@ -192,7 +201,6 @@ function Cube(t0) {
 				t4
 			]
 		});
-		$[5] = style;
 		$[6] = t1;
 		$[7] = t5;
 	} else t5 = $[7];
@@ -204,7 +212,7 @@ const SIZE_MAP = {
 	large: 96
 };
 function LoadingAnimation(t0) {
-	const $ = c(17);
+	const $ = c(16);
 	let props;
 	let t1;
 	if ($[0] !== t0) {
@@ -227,64 +235,57 @@ function LoadingAnimation(t0) {
 	} else t2 = $[4];
 	const t3 = numSize * 1.1388888889;
 	let t4;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = { position: "relative" };
-		$[5] = t4;
-	} else t4 = $[5];
 	let t5;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx(Cube, { style: { transform: "translate(0%, 72.5%)" } });
-		$[6] = t5;
-	} else t5 = $[6];
 	let t6;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(Cube, { style: { transform: "translate(98%, 72.5%)" } });
-		$[7] = t6;
-	} else t6 = $[7];
-	let t10;
 	let t7;
 	let t8;
 	let t9;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsx(Cube, { style: { transform: "translate(49%, 96.5%)" } });
-		t8 = /* @__PURE__ */ jsx(Cube, { index: 0 });
-		t9 = /* @__PURE__ */ jsx(Cube, { index: 1 });
-		t10 = /* @__PURE__ */ jsx(Cube, { index: 2 });
-		$[8] = t10;
-		$[9] = t7;
-		$[10] = t8;
-		$[11] = t9;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Cube, { base: "left" });
+		t5 = /* @__PURE__ */ jsx(Cube, { base: "right" });
+		t6 = /* @__PURE__ */ jsx(Cube, { base: "bottom" });
+		t7 = /* @__PURE__ */ jsx(Cube, { index: 0 });
+		t8 = /* @__PURE__ */ jsx(Cube, { index: 1 });
+		t9 = /* @__PURE__ */ jsx(Cube, { index: 2 });
+		$[5] = t4;
+		$[6] = t5;
+		$[7] = t6;
+		$[8] = t7;
+		$[9] = t8;
+		$[10] = t9;
 	} else {
-		t10 = $[8];
-		t7 = $[9];
-		t8 = $[10];
-		t9 = $[11];
+		t4 = $[5];
+		t5 = $[6];
+		t6 = $[7];
+		t7 = $[8];
+		t8 = $[9];
+		t9 = $[10];
 	}
-	let t11;
-	if ($[12] !== numSize || $[13] !== props || $[14] !== t2 || $[15] !== t3) {
-		t11 = /* @__PURE__ */ jsxs(Block, {
+	let t10;
+	if ($[11] !== numSize || $[12] !== props || $[13] !== t2 || $[14] !== t3) {
+		t10 = /* @__PURE__ */ jsxs(Block, {
 			role: "img",
 			"aria-label": t2,
 			width: numSize,
 			height: t3,
-			style: t4,
+			position: "relative",
 			...props,
 			children: [
+				t4,
 				t5,
 				t6,
 				t7,
 				t8,
-				t9,
-				t10
+				t9
 			]
 		});
-		$[12] = numSize;
-		$[13] = props;
-		$[14] = t2;
-		$[15] = t3;
-		$[16] = t11;
-	} else t11 = $[16];
-	return t11;
+		$[11] = numSize;
+		$[12] = props;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t10;
+	} else t10 = $[15];
+	return t10;
 }
 //#endregion
 export { LoadingAnimation };

package/dist/components/status/LoadingAnimation/LoadingAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingAnimation.js","names":["tasty","CSSProperties","RefObject","useRef","useI18n","useLayoutEffect","Block","CubeBlockProps","CubeElement","as","styles","display","position","width","height","animationName","animationDuration","animationIterationCount","animationTimingFunction","zIndex","dice0","from","transform","to","dice1","dice2","useTimelineSyncedAnimation","ref","isAnimated","$","_c","t0","element","current","getAnimations","animation","timeline","ownerDocument","startTime","t1","CubeProps","index","style","Cube","undefined","t2","t3","t4","Symbol","for","t5","SIZE_MAP","small","medium","large","CubeLoadingAnimationProps","size","LoadingAnimation","props","t","numSize","t6","t10","t7","t8","t9","t11","_c"],"sources":["../../../../src/components/status/LoadingAnimation/LoadingAnimation.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { CSSProperties, RefObject, useRef } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { Block, CubeBlockProps } from '../../Block';\n\nconst CubeElement = tasty({\n  as: 'svg',\n  styles: {\n    display: 'block',\n    position: 'absolute',\n    width: '50%',\n    height: '50%',\n\n    // The three visible faces of the cube get their colors via the SVG\n    // `fill=\"…\"` attribute on each `<path>` (see the JSX below), NOT via a\n    // tasty `fill` style. Tasty's `fill` is a typed shorthand for\n    // `background-color` — applying it to an SVG `<path>` would inject\n    // `background-color: …` which paths simply ignore (this was the\n    // \"invisible cube\" bug). Pointing the SVG `fill` attribute at the\n    // adaptive `--loading-face-N-color` CSS variables published by Glaze\n    // (defined in `src/tokens/palette.ts`) keeps the three faces driven by\n    // the design system without going through a style property tasty would\n    // re-route to the wrong CSS slot.\n    //\n    // Those three tokens are the kit's shared isometric-cube ramp — `NoDataIcon`\n    // draws its crate from the same ones — and they are pinned by a WCAG floor\n    // against `surface` rather than by a tone delta, so the faces hold the same\n    // separation in light, dark, and high contrast. See the recipe's comment for\n    // why that matters.\n\n    animationName: {\n      '': 'none',\n      'index=0': 'dice0',\n      'index=1': 'dice1',\n      'index=2': 'dice2',\n    },\n    animationDuration: {\n      '': '0s',\n      'index=0 | index=1 | index=2': '2s',\n    },\n    animationIterationCount: {\n      '': 1,\n      'index=0 | index=1 | index=2': 'infinite',\n    },\n    animationTimingFunction: {\n      '': 'ease',\n      'index=0 | index=1 | index=2': 'ease',\n    },\n    zIndex: {\n      '': 0,\n      'index=0 | index=1 | index=2': 0,\n    },\n\n    '@keyframes': {\n      dice0: {\n        from: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '25%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '50%': { transform: 'translate(0%, 25%)', zIndex: 0 },\n        '51%': { zIndex: 1 },\n        '75%': { zIndex: 1 },\n        to: { transform: 'translate(0%, 25%)', zIndex: 1 },\n      },\n      dice1: {\n        from: { transform: 'translate(0%, 25%)', zIndex: 3 },\n        '25%': { transform: 'translate(49%, 49%)', zIndex: 3 },\n        '75%': { transform: 'translate(49%, 49%)', zIndex: 2 },\n        to: { transform: 'translate(98%, 25%)', zIndex: 1 },\n      },\n      dice2: {\n        from: { transform: 'translate(98%, 25%)', zIndex: 1 },\n        '50%': { transform: 'translate(98%, 25%)', zIndex: 0 },\n        '75%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        to: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n      },\n    },\n  },\n});\n\n/**\n * Phase-lock a cube's `dice*` animation to the document timeline.\n *\n * A page under load mounts these animations at whatever moment each level of\n * the tree resolves — a route shell, then a panel, then the table inside it —\n * and every wrapper that appears around a running `LoadingAnimation` remounts\n * it. A CSS animation is created with its start time at \"now\", so each of\n * those events snapped the cubes back to the first frame: the visible symptom\n * is a loader that keeps stuttering back to the start while the page settles.\n *\n * Moving the start time to 0 puts it at the origin of the document timeline,\n * so the cube's position is a function of the timeline's current reading and\n * nothing else. Two consequences: a remount picks up exactly where the removed\n * element was, and every instance in the document runs in lockstep, because\n * they all read the same clock.\n *\n * Done through the animation object in a layout effect (before the first paint\n * of the new element) rather than through a negative `animation-delay`: the\n * delay would have to be computed during render from `Date.now()`, which is\n * both a different clock than the one the animation runs on — so the phase\n * would be off by the render-to-paint gap — and a value that differs between\n * the server and the client, i.e. a hydration mismatch on every render.\n */\nfunction useTimelineSyncedAnimation(\n  ref: RefObject<SVGSVGElement | null>,\n  isAnimated: boolean,\n) {\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    // `getAnimations` is absent in jsdom, where there is nothing to sync.\n    if (!isAnimated || !element?.getAnimations) return;\n\n    for (const animation of element.getAnimations()) {\n      // These elements carry nothing but the `dice*` animation, and it always\n      // runs on the document timeline — the one timeline an explicit numeric\n      // start time is meaningful against.\n      if (animation.timeline === element.ownerDocument.timeline) {\n        animation.startTime = 0;\n      }\n    }\n  }, [isAnimated]);\n}\n\ninterface CubeProps {\n  index?: 0 | 1 | 2;\n  style?: CSSProperties;\n}\n\nfunction Cube({ index, style }: CubeProps) {\n  const ref = useRef<SVGSVGElement>(null);\n\n  useTimelineSyncedAnimation(ref, index != null);\n\n  return (\n    <CubeElement\n      ref={ref}\n      mods={index != null ? { index } : undefined}\n      style={style}\n      viewBox=\"0 0 36 41\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fill=\"var(--loading-face-1-color)\"\n        d=\"M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z\"\n      />\n      <path\n        fill=\"var(--loading-face-2-color)\"\n        d=\"M18 41L0 30.75l.101-20.5L18 20.5\"\n      />\n      <path\n        fill=\"var(--loading-face-3-color)\"\n        d=\"M36 30.75L18 41V20.6l17.899-10.25L36 30.75z\"\n      />\n    </CubeElement>\n  );\n}\n\nconst SIZE_MAP = {\n  small: 32,\n  medium: 64,\n  large: 96,\n};\n\nexport interface CubeLoadingAnimationProps extends CubeBlockProps {\n  size?: 'small' | 'medium' | 'large' | number;\n}\n\nexport function LoadingAnimation({\n  size = 'medium',\n  ...props\n}: CubeLoadingAnimationProps) {\n  const { t } = useI18n();\n  const numSize: number = SIZE_MAP[size] || size || SIZE_MAP.medium;\n\n  return (\n    <Block\n      role=\"img\"\n      aria-label={t('loadingAnimation.ariaLabel', 'Loading animation')}\n      width={numSize}\n      height={numSize * 1.1388888889}\n      style={{ position: 'relative' }}\n      {...props}\n    >\n      <Cube style={{ transform: 'translate(0%, 72.5%)' }} />\n      <Cube style={{ transform: 'translate(98%, 72.5%)' }} />\n      <Cube style={{ transform: 'translate(49%, 96.5%)' }} />\n      <Cube index={0} />\n      <Cube index={1} />\n      <Cube index={2} />\n    </Block>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"LoadingAnimation.js","names":["tasty","RefObject","useRef","useI18n","useLayoutEffect","Block","CubeBlockProps","CubeElement","as","styles","display","position","width","height","animationName","animationDuration","animationIterationCount","animationTimingFunction","zIndex","transform","dice0","from","to","dice1","dice2","useTimelineSyncedAnimation","ref","isAnimated","$","_c","t0","element","current","getAnimations","animation","timeline","ownerDocument","startTime","t1","CubeProps","index","base","Cube","t2","t3","t4","Symbol","for","t5","SIZE_MAP","small","medium","large","CubeLoadingAnimationProps","size","LoadingAnimation","props","undefined","t","numSize","t6","t7","t8","t9","t10","_c"],"sources":["../../../../src/components/status/LoadingAnimation/LoadingAnimation.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { RefObject, useRef } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { Block, CubeBlockProps } from '../../Block';\n\nconst CubeElement = tasty({\n  as: 'svg',\n  styles: {\n    display: 'block',\n    position: 'absolute',\n    width: '50%',\n    height: '50%',\n\n    // The three visible faces of the cube get their colors via the SVG\n    // `fill=\"…\"` attribute on each `<path>` (see the JSX below), NOT via a\n    // tasty `fill` style. Tasty's `fill` is a typed shorthand for\n    // `background-color` — applying it to an SVG `<path>` would inject\n    // `background-color: …` which paths simply ignore (this was the\n    // \"invisible cube\" bug). Pointing the SVG `fill` attribute at the\n    // adaptive `--loading-face-N-color` CSS variables published by Glaze\n    // (defined in `src/tokens/palette.ts`) keeps the three faces driven by\n    // the design system without going through a style property tasty would\n    // re-route to the wrong CSS slot.\n    //\n    // Those three tokens are the kit's shared isometric-cube ramp — `NoDataIcon`\n    // draws its crate from the same ones — and they are pinned by a WCAG floor\n    // against `surface` rather than by a tone delta, so the faces hold the same\n    // separation in light, dark, and high contrast. See the recipe's comment for\n    // why that matters.\n\n    animationName: {\n      '': 'none',\n      'index=0': 'dice0',\n      'index=1': 'dice1',\n      'index=2': 'dice2',\n    },\n    animationDuration: {\n      '': '0s',\n      // oxlint-disable-next-line tasty/no-raw-motion-duration -- the length of one dice loop, tuned with its keyframes; not a UI transition\n      'index=0 | index=1 | index=2': '2s',\n    },\n    animationIterationCount: {\n      '': 1,\n      'index=0 | index=1 | index=2': 'infinite',\n    },\n    animationTimingFunction: {\n      '': 'ease',\n      'index=0 | index=1 | index=2': 'ease',\n    },\n    zIndex: {\n      '': 0,\n      'index=0 | index=1 | index=2': 0,\n    },\n    // The three cubes of the base row stand still; the animated ones move\n    // through the keyframes below.\n    transform: {\n      '': 'none',\n      'base=left': 'translate(0%, 72.5%)',\n      'base=right': 'translate(98%, 72.5%)',\n      'base=bottom': 'translate(49%, 96.5%)',\n    },\n\n    '@keyframes': {\n      dice0: {\n        from: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '25%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '50%': { transform: 'translate(0%, 25%)', zIndex: 0 },\n        '51%': { zIndex: 1 },\n        '75%': { zIndex: 1 },\n        to: { transform: 'translate(0%, 25%)', zIndex: 1 },\n      },\n      dice1: {\n        from: { transform: 'translate(0%, 25%)', zIndex: 3 },\n        '25%': { transform: 'translate(49%, 49%)', zIndex: 3 },\n        '75%': { transform: 'translate(49%, 49%)', zIndex: 2 },\n        to: { transform: 'translate(98%, 25%)', zIndex: 1 },\n      },\n      dice2: {\n        from: { transform: 'translate(98%, 25%)', zIndex: 1 },\n        '50%': { transform: 'translate(98%, 25%)', zIndex: 0 },\n        '75%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        to: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n      },\n    },\n  },\n});\n\n/**\n * Phase-lock a cube's `dice*` animation to the document timeline.\n *\n * A page under load mounts these animations at whatever moment each level of\n * the tree resolves — a route shell, then a panel, then the table inside it —\n * and every wrapper that appears around a running `LoadingAnimation` remounts\n * it. A CSS animation is created with its start time at \"now\", so each of\n * those events snapped the cubes back to the first frame: the visible symptom\n * is a loader that keeps stuttering back to the start while the page settles.\n *\n * Moving the start time to 0 puts it at the origin of the document timeline,\n * so the cube's position is a function of the timeline's current reading and\n * nothing else. Two consequences: a remount picks up exactly where the removed\n * element was, and every instance in the document runs in lockstep, because\n * they all read the same clock.\n *\n * Done through the animation object in a layout effect (before the first paint\n * of the new element) rather than through a negative `animation-delay`: the\n * delay would have to be computed during render from `Date.now()`, which is\n * both a different clock than the one the animation runs on — so the phase\n * would be off by the render-to-paint gap — and a value that differs between\n * the server and the client, i.e. a hydration mismatch on every render.\n */\nfunction useTimelineSyncedAnimation(\n  ref: RefObject<SVGSVGElement | null>,\n  isAnimated: boolean,\n) {\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    // `getAnimations` is absent in jsdom, where there is nothing to sync.\n    if (!isAnimated || !element?.getAnimations) return;\n\n    for (const animation of element.getAnimations()) {\n      // These elements carry nothing but the `dice*` animation, and it always\n      // runs on the document timeline — the one timeline an explicit numeric\n      // start time is meaningful against.\n      if (animation.timeline === element.ownerDocument.timeline) {\n        animation.startTime = 0;\n      }\n    }\n  }, [isAnimated]);\n}\n\ninterface CubeProps {\n  index?: 0 | 1 | 2;\n  base?: 'left' | 'right' | 'bottom';\n}\n\nfunction Cube({ index, base }: CubeProps) {\n  const ref = useRef<SVGSVGElement>(null);\n\n  useTimelineSyncedAnimation(ref, index != null);\n\n  return (\n    <CubeElement\n      ref={ref}\n      mods={{ index, base }}\n      viewBox=\"0 0 36 41\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fill=\"var(--loading-face-1-color)\"\n        d=\"M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z\"\n      />\n      <path\n        fill=\"var(--loading-face-2-color)\"\n        d=\"M18 41L0 30.75l.101-20.5L18 20.5\"\n      />\n      <path\n        fill=\"var(--loading-face-3-color)\"\n        d=\"M36 30.75L18 41V20.6l17.899-10.25L36 30.75z\"\n      />\n    </CubeElement>\n  );\n}\n\nconst SIZE_MAP = {\n  small: 32,\n  medium: 64,\n  large: 96,\n};\n\nexport interface CubeLoadingAnimationProps extends CubeBlockProps {\n  size?: 'small' | 'medium' | 'large' | number;\n}\n\nexport function LoadingAnimation({\n  size = 'medium',\n  ...props\n}: CubeLoadingAnimationProps) {\n  const { t } = useI18n();\n  const numSize: number = SIZE_MAP[size] || size || SIZE_MAP.medium;\n\n  return (\n    <Block\n      role=\"img\"\n      aria-label={t('loadingAnimation.ariaLabel', 'Loading animation')}\n      width={numSize}\n      height={numSize * 1.1388888889}\n      position=\"relative\"\n      {...props}\n    >\n      <Cube base=\"left\" />\n      <Cube base=\"right\" />\n      <Cube base=\"bottom\" />\n      <Cube index={0} />\n      <Cube index={1} />\n      <Cube index={2} />\n    </Block>\n  );\n}\n"],"mappings":"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"}

package/dist/components/status/Spin/Cube.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { memo } from "react";

package/dist/components/status/Spin/Cube.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cube.js","names":["tasty","memo","SpinCubeProps","CubeElement","role","styles","boxSizing","position","top","left","width","height","border","overflow","contain","pointerEvents","userSelect","animationName","animationDuration","animationIterationCount","animationTimingFunction","animationPlayState","content","display","radius","fill","transform","Cube","t0","$","_c","$position","t1","_c"],"sources":["../../../../src/components/status/Spin/Cube.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { memo } from 'react';\n\nimport { SpinCubeProps } from './types';\n\nconst CubeElement = tasty({\n  role: 'presentation',\n  styles: {\n    '$cube-border-width': '(4 / 100 * $cube-spin-size)',\n    '$cube-border-compensation': '(-1 * $cube-border-width)',\n    '$cube-size': '((100% - 2 * $cube-border-width) / 2)',\n\n    boxSizing: 'content-box',\n    position: 'absolute',\n    top: '$cube-border-compensation',\n    left: '$cube-border-compensation',\n    width: '$cube-size',\n    height: '$cube-size',\n    border: '$cube-border-width solid #clear',\n    overflow: 'hidden',\n    contain: 'size layout style paint',\n    pointerEvents: 'none',\n    userSelect: 'none',\n\n    animationName: {\n      '': 'none',\n      'position=top': 'cube-spin-top',\n      'position=right': 'cube-spin-right',\n      'position=bottom': 'cube-spin-bottom',\n    },\n    animationDuration: '2.2s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'cubic-bezier(0.5, 0.05, 0.3, 0.95)',\n    animationPlayState: {\n      '': 'running',\n      '@media(prefers-reduced-motion)': 'paused',\n    },\n\n    '&::before': {\n      '$cube-round-radius': '(4 / 100 * $cube-spin-size)',\n      content: '\"\"',\n      display: 'block',\n      width: '100%',\n      height: '100%',\n      radius: '$cube-round-radius',\n      fill: {\n        'position=top': '#7a77ff',\n        'position=right': '#727290',\n        'position=bottom': '#ff6492',\n      },\n    },\n\n    '@keyframes': {\n      'cube-spin-top': {\n        '0%': { transform: 'translate(0%, 0)' },\n        '8%': { transform: 'translate(100%, 0)' },\n        '17%': { transform: 'translate(100%, 0)' },\n        '25%': { transform: 'translate(100%, 0)' },\n        '33%': { transform: 'translate(100%, 100%)' },\n        '42%': { transform: 'translate(100%, 100%)' },\n        '50%': { transform: 'translate(100%, 100%)' },\n        '58%': { transform: 'translate(0, 100%)' },\n        '67%': { transform: 'translate(0, 100%)' },\n        '75%': { transform: 'translate(0, 100%)' },\n        '83%': { transform: 'translate(0, 0)' },\n        '92%': { transform: 'translate(0, 0)' },\n        '100%': { transform: 'translate(0, 0)' },\n      },\n      'cube-spin-right': {\n        '0%': { transform: 'translate(100%, 100%)' },\n        '8%': { transform: 'translate(100%, 100%)' },\n        '17%': { transform: 'translate(100%, 100%)' },\n        '25%': { transform: 'translate(0, 100%)' },\n        '33%': { transform: 'translate(0, 100%)' },\n        '42%': { transform: 'translate(0, 100%)' },\n        '50%': { transform: 'translate(0, 0)' },\n        '58%': { transform: 'translate(0, 0)' },\n        '67%': { transform: 'translate(0, 0)' },\n        '75%': { transform: 'translate(100%, 0)' },\n        '83%': { transform: 'translate(100%, 0)' },\n        '92%': { transform: 'translate(100%, 0)' },\n        '100%': { transform: 'translate(100%, 100%)' },\n      },\n      'cube-spin-bottom': {\n        '0%': { transform: 'translate(0, 100%)' },\n        '8%': { transform: 'translate(0, 100%)' },\n        '17%': { transform: 'translate(0, 0)' },\n        '25%': { transform: 'translate(0, 0)' },\n        '33%': { transform: 'translate(0, 0)' },\n        '42%': { transform: 'translate(100%, 0)' },\n        '50%': { transform: 'translate(100%, 0)' },\n        '58%': { transform: 'translate(100%, 0)' },\n        '67%': { transform: 'translate(100%, 100%)' },\n        '75%': { transform: 'translate(100%, 100%)' },\n        '83%': { transform: 'translate(100%, 100%)' },\n        '92%': { transform: 'translate(0, 100%)' },\n        '100%': { transform: 'translate(0, 100%)' },\n      },\n    },\n  },\n});\n\nexport const Cube = memo(function Cube({ $position }: SpinCubeProps) {\n  return <CubeElement mods={{ position: $position }} />;\n});\n"],"mappings":";;;;;;AAKA,MAAMG,cAAcH,MAAM;CACxBI,MAAM;CACNC,QAAQ;EACN,sBAAsB;EACtB,6BAA6B;EAC7B,cAAc;EAEdC,WAAW;EACXC,UAAU;EACVC,KAAK;EACLC,MAAM;EACNC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,SAAS;EACTC,eAAe;EACfC,YAAY;EAEZC,eAAe;GACb,IAAI;GACJ,gBAAgB;GAChB,kBAAkB;GAClB,mBAAmB;EACrB;EACAC,mBAAmB;EACnBC,yBAAyB;EACzBC,yBAAyB;EACzBC,oBAAoB;GAClB,IAAI;GACJ,kCAAkC;EACpC;EAEA,aAAa;GACX,sBAAsB;GACtBC,SAAS;GACTC,SAAS;GACTb,OAAO;GACPC,QAAQ;GACRa,QAAQ;GACRC,MAAM;IACJ,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;GACrB;EACF;EAEA,cAAc;GACZ,iBAAiB;IACf,MAAM,EAAEC,WAAW,mBAAmB;IACtC,MAAM,EAAEA,WAAW,qBAAqB;IACxC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,QAAQ,EAAEA,WAAW,kBAAkB;GACzC;GACA,mBAAmB;IACjB,MAAM,EAAEA,WAAW,wBAAwB;IAC3C,MAAM,EAAEA,WAAW,wBAAwB;IAC3C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,QAAQ,EAAEA,WAAW,wBAAwB;GAC/C;GACA,oBAAoB;IAClB,MAAM,EAAEA,WAAW,qBAAqB;IACxC,MAAM,EAAEA,WAAW,qBAAqB;IACxC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,qBAAqB;IACzC,QAAQ,EAAEA,WAAW,qBAAqB;GAC5C;EACF;CACF;AACF,CAAC;AAED,MAAaC,OAAO1B,KAAK,SAAA0B,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAc,MAAA,EAAAC,cAAAH;CAA4B,IAAAI;CAAA,IAAAH,EAAA,OAAAE,WAAA;EAC1DC,KAAA,oBAAC,aAAD,EAAmB,MAAA,EAAAzB,UAAYwB,UAAU,EAAC,CAAA;EAAIF,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAA9CG;AAA8C,CACtD"}
+{"version":3,"file":"Cube.js","names":["tasty","memo","SpinCubeProps","CubeElement","role","styles","boxSizing","position","top","left","width","height","border","overflow","contain","pointerEvents","userSelect","animationName","animationDuration","animationIterationCount","animationTimingFunction","animationPlayState","content","display","radius","fill","transform","Cube","t0","$","_c","$position","t1","_c"],"sources":["../../../../src/components/status/Spin/Cube.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { memo } from 'react';\n\nimport { SpinCubeProps } from './types';\n\nconst CubeElement = tasty({\n  role: 'presentation',\n  styles: {\n    '$cube-border-width': '(4 / 100 * $cube-spin-size)',\n    '$cube-border-compensation': '(-1 * $cube-border-width)',\n    '$cube-size': '((100% - 2 * $cube-border-width) / 2)',\n\n    boxSizing: 'content-box',\n    position: 'absolute',\n    top: '$cube-border-compensation',\n    left: '$cube-border-compensation',\n    width: '$cube-size',\n    height: '$cube-size',\n    border: '$cube-border-width solid #clear',\n    overflow: 'hidden',\n    contain: 'size layout style paint',\n    pointerEvents: 'none',\n    userSelect: 'none',\n\n    animationName: {\n      '': 'none',\n      'position=top': 'cube-spin-top',\n      'position=right': 'cube-spin-right',\n      'position=bottom': 'cube-spin-bottom',\n    },\n    // oxlint-disable-next-line tasty/no-raw-motion-duration -- the length of one spin loop, tuned with its keyframes; not a UI transition\n    animationDuration: '2.2s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'cubic-bezier(0.5, 0.05, 0.3, 0.95)',\n    animationPlayState: {\n      '': 'running',\n      '@media(prefers-reduced-motion)': 'paused',\n    },\n\n    '&::before': {\n      '$cube-round-radius': '(4 / 100 * $cube-spin-size)',\n      content: '\"\"',\n      display: 'block',\n      width: '100%',\n      height: '100%',\n      radius: '$cube-round-radius',\n      fill: {\n        'position=top': '#7a77ff',\n        'position=right': '#727290',\n        'position=bottom': '#ff6492',\n      },\n    },\n\n    '@keyframes': {\n      'cube-spin-top': {\n        '0%': { transform: 'translate(0%, 0)' },\n        '8%': { transform: 'translate(100%, 0)' },\n        '17%': { transform: 'translate(100%, 0)' },\n        '25%': { transform: 'translate(100%, 0)' },\n        '33%': { transform: 'translate(100%, 100%)' },\n        '42%': { transform: 'translate(100%, 100%)' },\n        '50%': { transform: 'translate(100%, 100%)' },\n        '58%': { transform: 'translate(0, 100%)' },\n        '67%': { transform: 'translate(0, 100%)' },\n        '75%': { transform: 'translate(0, 100%)' },\n        '83%': { transform: 'translate(0, 0)' },\n        '92%': { transform: 'translate(0, 0)' },\n        '100%': { transform: 'translate(0, 0)' },\n      },\n      'cube-spin-right': {\n        '0%': { transform: 'translate(100%, 100%)' },\n        '8%': { transform: 'translate(100%, 100%)' },\n        '17%': { transform: 'translate(100%, 100%)' },\n        '25%': { transform: 'translate(0, 100%)' },\n        '33%': { transform: 'translate(0, 100%)' },\n        '42%': { transform: 'translate(0, 100%)' },\n        '50%': { transform: 'translate(0, 0)' },\n        '58%': { transform: 'translate(0, 0)' },\n        '67%': { transform: 'translate(0, 0)' },\n        '75%': { transform: 'translate(100%, 0)' },\n        '83%': { transform: 'translate(100%, 0)' },\n        '92%': { transform: 'translate(100%, 0)' },\n        '100%': { transform: 'translate(100%, 100%)' },\n      },\n      'cube-spin-bottom': {\n        '0%': { transform: 'translate(0, 100%)' },\n        '8%': { transform: 'translate(0, 100%)' },\n        '17%': { transform: 'translate(0, 0)' },\n        '25%': { transform: 'translate(0, 0)' },\n        '33%': { transform: 'translate(0, 0)' },\n        '42%': { transform: 'translate(100%, 0)' },\n        '50%': { transform: 'translate(100%, 0)' },\n        '58%': { transform: 'translate(100%, 0)' },\n        '67%': { transform: 'translate(100%, 100%)' },\n        '75%': { transform: 'translate(100%, 100%)' },\n        '83%': { transform: 'translate(100%, 100%)' },\n        '92%': { transform: 'translate(0, 100%)' },\n        '100%': { transform: 'translate(0, 100%)' },\n      },\n    },\n  },\n});\n\nexport const Cube = memo(function Cube({ $position }: SpinCubeProps) {\n  return <CubeElement mods={{ position: $position }} />;\n});\n"],"mappings":";;;;;;AAKA,MAAMG,cAAcH,MAAM;CACxBI,MAAM;CACNC,QAAQ;EACN,sBAAsB;EACtB,6BAA6B;EAC7B,cAAc;EAEdC,WAAW;EACXC,UAAU;EACVC,KAAK;EACLC,MAAM;EACNC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,SAAS;EACTC,eAAe;EACfC,YAAY;EAEZC,eAAe;GACb,IAAI;GACJ,gBAAgB;GAChB,kBAAkB;GAClB,mBAAmB;EACrB;EAEAC,mBAAmB;EACnBC,yBAAyB;EACzBC,yBAAyB;EACzBC,oBAAoB;GAClB,IAAI;GACJ,kCAAkC;EACpC;EAEA,aAAa;GACX,sBAAsB;GACtBC,SAAS;GACTC,SAAS;GACTb,OAAO;GACPC,QAAQ;GACRa,QAAQ;GACRC,MAAM;IACJ,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;GACrB;EACF;EAEA,cAAc;GACZ,iBAAiB;IACf,MAAM,EAAEC,WAAW,mBAAmB;IACtC,MAAM,EAAEA,WAAW,qBAAqB;IACxC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,QAAQ,EAAEA,WAAW,kBAAkB;GACzC;GACA,mBAAmB;IACjB,MAAM,EAAEA,WAAW,wBAAwB;IAC3C,MAAM,EAAEA,WAAW,wBAAwB;IAC3C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,QAAQ,EAAEA,WAAW,wBAAwB;GAC/C;GACA,oBAAoB;IAClB,MAAM,EAAEA,WAAW,qBAAqB;IACxC,MAAM,EAAEA,WAAW,qBAAqB;IACxC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,qBAAqB;IACzC,QAAQ,EAAEA,WAAW,qBAAqB;GAC5C;EACF;CACF;AACF,CAAC;AAED,MAAaC,OAAO1B,KAAK,SAAA0B,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAc,MAAA,EAAAC,cAAAH;CAA4B,IAAAI;CAAA,IAAAH,EAAA,OAAAE,WAAA;EAC1DC,KAAA,oBAAC,aAAD,EAAmB,MAAA,EAAAzB,UAAYwB,UAAU,EAAC,CAAA;EAAIF,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAA9CG;AAA8C,CACtD"}

package/dist/components/status/Spin/InternalSpinner.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { Cube } from "./Cube.js";
 import { SpinsContainer } from "./SpinsContainer.js";
 import { c } from "react/compiler-runtime";

package/dist/components/status/Spin/Spin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { Block } from "../../Block.js";
 import { InternalSpinner } from "./InternalSpinner.js";
 import { c } from "react/compiler-runtime";

package/dist/components/status/Spin/SpinsContainer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.199.2 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { jsx } from "react/jsx-runtime";