@vnejs/uis.react 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/uis.react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "src/index.js",
   "scripts": {
     "storybook": "storybook dev -p 6006",

package/src/components/base/PageSelector/PageSelector.jsx

@@ -32,24 +32,12 @@ export const PageSelector = ({ page, pagesCount, pagesMinCount, gap = 120, size
   const styleArrow = useMemo(() => {
     const result = {};
 
-    if (size) {
-      const { length, count, isEmpty = false } = getVneLength(size);
-
-      if (isEmpty) console.warn("Wrong Page Selector Size:", size);
-      else result.height = `calc(${count}px * var(--vne-length-${length}))`;
-    }
-
-    if (itemWidth) {
-      const { length, count, isEmpty = false } = getVneLength(itemWidth);
-
-      if (isEmpty) console.warn("Wrong Page Selector Item Width:", itemWidth);
-      else result.width = `calc(${count}px * var(--vne-length-${length}))`;
-    }
-
+    if (size) result.height = getVneLength(size);
+    if (itemWidth) result.width = getVneLength(itemWidth);
     if (transition) result.transition = `${transition}ms`;
 
     return result;
-  }, [size, transition, itemWidth]);
+  }, [size, itemWidth, transition]);
 
   const showArrowLeft = page > pagesMinCount;
   const showArrowRight = page < pagesCount;

package/src/components/base/SmoothText/SmoothText.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 
-import { getVneLength, cn } from "@vnejs/uis.utils";
+import { cn, getVneLength } from "@vnejs/uis.utils";
 
 import { Char, Scrollbar } from "../../primitives";
 
@@ -40,13 +40,8 @@ export const SmoothText = ({
     if (color) result.color = color;
 
     if (size) {
-      const { length, count, isEmpty = false } = getVneLength(size);
-
-      if (isEmpty) console.warn("Wrong SmoothText Size:", size);
-      else {
-        result.fontSize = `calc(${count}px * var(--vne-length-${length}) * var(--vne-text-size-multiplicator, 1))`;
-        result.lineHeight = `calc(${count * 1.25}px * var(--vne-length-${length}) * var(--vne-text-size-multiplicator, 1))`;
-      }
+      result.fontSize = `round(down, calc(${getVneLength(size)} * var(--vne-text-size-multiplicator, 1)), 1px)`;
+      result.lineHeight = `round(down, calc(${getVneLength(1.25 * size)} * var(--vne-text-size-multiplicator, 1)), 1px)`;
     }
 
     if (transition && !isForce) result.transition = `${transition}ms`;

package/src/components/base/Sprite/Sprite.change.stories.jsx

@@ -15,7 +15,7 @@ export const Common = {
   },
 };
 
-const BOX_PROPS = { top: "100%", left: "50%", scale: 1, translateX: -50, translateY: -100, canvasWidth: 3840, canvasHeight: 2160, transition: 0 };
+const BOX_PROPS = { top: "100%", left: "50%", scale: 1, translateX: -50, translateY: -100, transition: 0 };
 const SPRITE_PREFIX = "./speaker/original-4k/co";
 
 export default {

package/src/components/base/Sprite/Sprite.default.stories.jsx

@@ -17,12 +17,9 @@ export const Common = {
     boxTransition: 0,
     partsTransition: 0,
 
-    canvasHeight: 2160,
-    canvasWidth: 3840,
     top: 100,
     left: 50,
     scale: 1,
-    scaleWithCanvas: false,
     translateX: -50,
     translateY: -100,
   },
@@ -32,14 +29,11 @@ export default {
   title: "Base/Sprite/Default",
   render: renderWithVneWrap(
     ({
-      canvasHeight,
-      canvasWidth,
       translateX,
       translateY,
       top,
       left,
       scale,
-      scaleWithCanvas,
       boxTransition,
       partsTransition,
 
@@ -77,8 +71,8 @@ export default {
       const indexSrc = useMemo(() => `./speaker/original-4k/co/${spritePose}/index.png`, [spritePose]);
 
       const boxProps = useMemo(
-        () => ({ top: `${top}%`, left: `${left}%`, scale, scaleWithCanvas, translateX, translateY, canvasWidth, canvasHeight, transition: boxTransition }),
-        [top, left, scale, scaleWithCanvas, translateX, translateY, canvasWidth, canvasHeight, boxTransition],
+        () => ({ top: `${top}%`, left: `${left}%`, scale, translateX, translateY, transition: boxTransition }),
+        [top, left, scale, translateX, translateY, boxTransition],
       );
 
       const partsProps = useMemo(() => ({ transition: partsTransition }), [partsTransition]);
@@ -109,8 +103,6 @@ export default {
 
     // PositionBox
     boxTransition: { control: { type: "number", min: 0, max: 1000, step: 50 } },
-    canvasHeight: { control: { type: "number", min: 180, max: 2160, step: 90 } },
-    canvasWidth: { control: { type: "number", min: 160, max: 3840, step: 160 } },
     top: { control: { type: "number", min: 0, max: 100, step: 5 } },
     left: { control: { type: "number", min: 0, max: 100, step: 5 } },
     scale: { control: { type: "number", min: 0.1, max: 2, step: 0.1 } },

package/src/components/base/Sprite/Sprite.jsx

@@ -1,19 +1,31 @@
+import { useMemo } from "react";
 import { Image, PositionBox } from "../../primitives";
 
 const POSE_STYLE = { opacity: 0, visibility: "hidden" };
 
-export const Sprite = ({ parts = [], indexSrc = "", boxProps = {}, partsProps = {} }) => (
-  <PositionBox {...boxProps}>
-    {parts.map((props, i) => (
-      <Image
-        key={i}
-        {...props}
-        {...partsProps}
+export const Sprite = ({ parts = [], indexSrc = "", boxProps = {}, partsProps = {}, transition = null, transitionBox = null }) => {
+  const realBoxProps = useMemo(() => {
+    const result = { ...boxProps };
+
+    if (transitionBox !== null) result.transition = transitionBox;
+
+    return result;
+  }, [boxProps, transitionBox]);
+
+  return (
+    <PositionBox {...realBoxProps}>
+      {parts.map((props, i) => (
+        <Image
+          key={i}
+          {...props}
+          {...partsProps}
+          transition={transition}
+        />
+      ))}
+      <img
+        src={indexSrc}
+        style={POSE_STYLE}
       />
-    ))}
-    <img
-      src={indexSrc}
-      style={POSE_STYLE}
-    />
-  </PositionBox>
-);
+    </PositionBox>
+  );
+};

package/src/components/base/Sprite/Sprite.move.stories.jsx

@@ -102,8 +102,6 @@ export default {
         scale: 1,
         translateX: -50 + boxTranslateXShift,
         translateY: -100,
-        canvasWidth: 3840,
-        canvasHeight: 2160,
         transition: boxTransition,
         opacity: boxOpacity,
       }),

package/src/components/base/WrapWithContent/WrapWithContent.jsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react";
 
-import { getVneLength, cn } from "@vnejs/uis.utils";
+import { cn, getVneLength } from "@vnejs/uis.utils";
 
 import { Text, Wrap } from "../../primitives";
 
@@ -8,13 +8,7 @@ import "./WrapWithContent.styl";
 
 const b = cn("WrapWithContent");
 
-const getCssPosition = (value) => () => {
-  if (!value) return "0";
-
-  const { length, count, isEmpty = false } = getVneLength(value);
-
-  return isEmpty ? "0" : `calc(${count}px * var(--vne-length-${length}))`;
-};
+const getCssPosition = (value) => () => value ? getVneLength(value) : "0";
 
 const renderOneItem = (props, style, renderFunc) =>
   renderFunc && (

package/src/components/complex/Screen/Screen.jsx

@@ -21,6 +21,7 @@ export const Screen = ({
   withDark = false,
   withBackgroundDark = false,
   withBackgroundBlur = false,
+  withPointerEventsNone = false,
   isDisableAutoread = true,
   isIgnoreOnScreenshot = true,
   isAllowAutoread = true,
@@ -38,7 +39,7 @@ export const Screen = ({
 
   return (
     <View
-      className={b({ view, withBlur, withDark }, [className])}
+      className={b({ view, withBlur, withDark, withPointerEventsNone }, [className])}
       top={0}
       right={0}
       bottom={0}

package/src/components/complex/Screen/Screen.styl

@@ -12,9 +12,8 @@
 
     &-background
         background-position: center
-        background-size: contain
         background-repeat: no-repeat
-        background-size: 100% 100%
+        background-size: cover
 
         &_withBlur
             filter: blur(var(--vne-screen-blur))
@@ -32,4 +31,7 @@
         backdrop-filter: brightness(var(--vne-screen-brightness))
 
     &_withBlur&_withDark
-        backdrop-filter: blur(var(--vne-screen-blur)) brightness(var(--vne-screen-brightness))
+        backdrop-filter: blur(var(--vne-screen-blur)) brightness(var(--vne-screen-brightness))
+
+    &_withPointerEventsNone
+        pointer-events: none

package/src/components/primitives/Backdrop/Backdrop.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 
-import { getVneLength, cn } from "@vnejs/uis.utils";
+import { cn, getVneLength } from "@vnejs/uis.utils";
 
 import "./Backdrop.styl";
 
@@ -12,10 +12,7 @@ export const Backdrop = ({ zIndex = null, transition = null, type = "", size = 3
 
     const result = { ["--vne-backdrop-degree"]: `${TYPE_TO_DEGREE[type || Backdrop.TYPE.TOP]}deg`, opacity };
 
-    const { length, count, isEmpty = false } = getVneLength(size);
-
-    if (isEmpty) console.warn("Wrong Backdrop Size:", size);
-    else result["--vne-backdrop-length"] = `calc(${count}px * var(--vne-length-${length}))`;
+    result["--vne-backdrop-length"] = getVneLength(size);
 
     if (color1) result["--vne-backdrop-color-1"] = color1;
     if (color2) result["--vne-backdrop-color-2"] = color2;

package/src/components/primitives/Cursor/Cursor.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 
-import { getVneLength, cn } from "@vnejs/uis.utils";
+import { cn, getVneLength } from "@vnejs/uis.utils";
 
 import "./Cursor.styl";
 
@@ -37,13 +37,8 @@ export const Cursor = ({ isShow = false, transition = 500, size = 120, forceX, f
     if (transition) result.transition = `background-image ${transition}ms, opacity ${transition}ms`;
 
     if (size) {
-      const { length, count, isEmpty = false } = getVneLength(size);
-
-      if (isEmpty) console.warn("Wrong Cursor Size:", size);
-      else {
-        result.width = `calc(${count}px * var(--vne-length-${length}))`;
-        result.height = `calc(${count}px * var(--vne-length-${length}))`;
-      }
+      result.width = getVneLength(size);
+      result.height = getVneLength(size);
     }
 
     result["--vne-cursor-src"] = `url('${cursorType === "pointer" ? srcPointer : srcDefault}')`;

package/src/components/primitives/Cursor/Cursor.styl

@@ -1,6 +1,3 @@
-#app
-    cursor: none !important
-
 .Cursor
     position: fixed
     translate: calc(-50% + 1px * var(--vne-cursor-left)) calc(-50% + 1px * var(--vne-cursor-top))
@@ -19,4 +16,4 @@
     opacity: 0
 
     &_isShow
-        opacity 1
+        opacity 1

package/src/components/primitives/Flex/Flex.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 
-import { getVneLength, cn } from "@vnejs/uis.utils";
+import { cn, getVneLength } from "@vnejs/uis.utils";
 
 import "./Flex.styl";
 
@@ -26,75 +26,19 @@ export const Flex = ({
   const style = useMemo(() => {
     const result = {};
 
-    if (width) {
-      if (typeof width === "string") {
-        result.width = width;
-      } else {
-        const { length, count, isEmpty = false } = getVneLength(width);
-        if (isEmpty) console.warn("Wrong Flex Width:", width);
-        else result.width = `calc(${count}px * var(--vne-length-${length}))`;
-      }
-    }
-
-    if (height) {
-      if (typeof height === "string") {
-        result.height = height;
-      } else {
-        const { length, count, isEmpty = false } = getVneLength(height);
-        if (isEmpty) console.warn("Wrong Flex Height:", height);
-        else result.height = `calc(${count}px * var(--vne-length-${length}))`;
-      }
-    }
-
-    if (gap) {
-      const { length, count, isEmpty = false } = getVneLength(gap);
-      if (isEmpty) console.warn("Wrong Flex Gap:", gap);
-      else {
-        result.gap = `calc(${count}px * var(--vne-length-${length}))`;
-      }
-    }
-
-    if (gapHorizontal) {
-      const { length, count, isEmpty = false } = getVneLength(gapHorizontal);
-      if (isEmpty) console.warn("Wrong Flex Gap Horizontal:", gapHorizontal);
-      else {
-        result.columnGap = `calc(${count}px * var(--vne-length-${length}))`;
-      }
-    }
-
-    if (gapVertical) {
-      const { length, count, isEmpty = false } = getVneLength(gapVertical);
-      if (isEmpty) console.warn("Wrong Flex Gap Vertical:", gapVertical);
-      else {
-        result.rowGap = `calc(${count}px * var(--vne-length-${length}))`;
-      }
-    }
-
-    if (padding) {
-      const { length, count, isEmpty = false } = getVneLength(padding);
-
-      if (isEmpty) console.warn("Wrong Flex Padding:", padding);
-      else result.padding = `calc(${count}px * var(--vne-length-${length}))`;
-    }
-
+    if (width) result.width = typeof width === "string" ? width : getVneLength(width);
+    if (height) result.height = typeof height === "string" ? height : getVneLength(height);
+    if (gap) result.gap = getVneLength(gap);
+    if (gapHorizontal) result.columnGap = getVneLength(gapHorizontal);
+    if (gapVertical) result.rowGap = getVneLength(gapVertical);
+    if (padding) result.padding = getVneLength(padding);
     if (paddingHorizontal) {
-      const { length, count, isEmpty = false } = getVneLength(paddingHorizontal);
-
-      if (isEmpty) console.warn("Wrong Flex Padding Horizontal:", paddingHorizontal);
-      else {
-        result.paddingLeft = `calc(${count}px * var(--vne-length-${length}))`;
-        result.paddingRight = `calc(${count}px * var(--vne-length-${length}))`;
-      }
+      result.paddingLeft = getVneLength(paddingHorizontal);
+      result.paddingRight = getVneLength(paddingHorizontal);
     }
-
     if (paddingVertical) {
-      const { length, count, isEmpty = false } = getVneLength(paddingVertical);
-
-      if (isEmpty) console.warn("Wrong Flex Padding Vertical:", paddingVertical);
-      else {
-        result.paddingTop = `calc(${count}px * var(--vne-length-${length}))`;
-        result.paddingBottom = `calc(${count}px * var(--vne-length-${length}))`;
-      }
+      result.paddingTop = getVneLength(paddingVertical);
+      result.paddingBottom = getVneLength(paddingVertical);
     }
 
     if (transition !== null) result.transition = `${transition}ms`;

package/src/components/primitives/Icon/Icon.jsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react";
 
-import { getVneLength, cn } from "@vnejs/uis.utils";
+import { cn, getVneLength } from "@vnejs/uis.utils";
 
 import "./Icon.styl";
 
@@ -33,32 +33,14 @@ export const Icon = ({
   const style = useMemo(() => {
     const result = {};
 
-    if (width) {
-      const { length, count, isEmpty = false } = getVneLength(width);
-
-      if (isEmpty) console.warn("Wrong Icon Width:", width);
-      else result.width = `calc(${count}px * var(--vne-length-${length}))`;
-    }
-
-    if (height) {
-      const { length, count, isEmpty = false } = getVneLength(height);
-
-      if (isEmpty) console.warn("Wrong Icon Height:", height);
-      else result.height = `calc(${count}px * var(--vne-length-${length}))`;
-    }
-
-    if (scale) {
-      result.transform = `scale(${scale})`;
-    }
-
-    if (transformOriginX !== null || transformOriginY !== null) {
-      result.transformOrigin = `${transformOriginX || 0} ${transformOriginY || 0}`;
-    }
+    if (width) result.width = getVneLength(width);
+    if (height) result.height = getVneLength(height);
 
+    if (scale) result.transform = `scale(${scale})`;
+    if (transformOriginX !== null || transformOriginY !== null) result.transformOrigin = `${transformOriginX || 0} ${transformOriginY || 0}`;
     if (aspectRatioX || aspectRatioY) result.aspectRatio = `${aspectRatioX || 1} / ${aspectRatioY || 1}`;
     if (zIndex !== null) result.zIndex = zIndex;
     if (opacity !== null) result.opacity = opacity;
-
     if (transition) result.transition = `${transition}ms`;
 
     if (src) result["--vne-icon-src"] = `url("${src}")`;

package/src/components/primitives/Image/Image.jsx

@@ -8,7 +8,18 @@ const b = cn("Image");
 
 const TRANSPARENT_IMAGE = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiLz4=";
 
-export const Image = ({ translateX = 0, translateY = 0, scale = 1, transition = 0, src = "", className = "", filter = "", isSwitchDisabled = false }) => {
+export const Image = ({
+  translateX = 0,
+  translateY = 0,
+  scale = 1,
+  transition = 0,
+  opacity = null,
+  src = "",
+  className = "",
+  filter = "",
+  isSwitchDisabled = false,
+  isAllSrcRendered = false,
+}) => {
   const [srcIndex, setSrcIndex] = useState(0);
   const [switchInProcess, setSwitchInProcess] = useState(false);
   const [switchTransition, setSwitchTransition] = useState(0);
@@ -25,15 +36,18 @@ export const Image = ({ translateX = 0, translateY = 0, scale = 1, transition =
   const style = useMemo(() => {
     const result = {
       translate: `${translateX}% ${translateY}%`,
-      transition: `${realTransition}ms`,
+      transition: !realTransition ? "none" : `${realTransition}ms`,
       transform: `scale(${scale})`,
       transformOrigin: `${-translateX}% ${-translateY}%`,
       backgroundImage: `url(${realSrc})`,
       filter,
     };
 
+    if (isAllSrcRendered) result.backgroundImage = src.map((s, i) => `url(${src[src.length - i - 1].url})`).join(", ");
+    if (opacity !== null) result.opacity = opacity;
+
     return result;
-  }, [scale, translateX, translateY, realTransition, realSrc, filter]);
+  }, [scale, translateX, translateY, realTransition, transition, realSrc, filter, opacity, isAllSrcRendered]);
 
   useEffect(() => {
     setSwitchInProcess(!isSwitchDisabled && !transition);

package/src/components/primitives/Image/Image.styl

@@ -5,5 +5,6 @@
     width: 100%
     height: 100%
 
-    background-size: 100%
-    background-repeat: no-repeat
+    background-size: cover
+    background-repeat: no-repeat
+    background-position: center

package/src/components/primitives/PositionBox/PositionBox.jsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react";
 
-import { getVneLength, cn } from "@vnejs/uis.utils";
+import { cn, getVneLength } from "@vnejs/uis.utils";
 
 import "./PositionBox.styl";
 
@@ -15,10 +15,7 @@ const setPositionField = (result, field, value) => {
   if (value === 0) return setField(result, field, "0");
   if (typeof value === "string") return setField(result, field, value);
 
-  const { length, count, isEmpty = false } = getVneLength(value);
-
-  if (isEmpty) console.warn(`Wrong Position Box Filed(${field}):`, value);
-  else setField(result, field, `calc(${count}px * var(--vne-length-${length}))`);
+  setField(result, field, getVneLength(value));
 };
 
 export const PositionBox = ({
@@ -31,15 +28,12 @@ export const PositionBox = ({
   transformOriginX = null,
   transformOriginY = null,
   scale = null,
-  scaleWithCanvas = false,
   transition = null,
   zIndex = null,
   opacity = null,
   boxRef = null,
-  canvasHeight = 2160,
-  canvasWidth = 3840,
   isCentered = false,
-  iscenteredVertical = false,
+  isCenteredVertical = false,
   isCenteredHorizontal = false,
   isNotRender = false,
   background = null,
@@ -56,44 +50,24 @@ export const PositionBox = ({
     setPositionField(result, "bottom", bottom);
     setPositionField(result, "left", left);
 
-    if (scale) {
-      result["--vne-bounding-box-scale-y"] = `calc(${scale} * var(${scaleWithCanvas ? `--vne-length-100vh` : `--vne-length-2160`}) / ${canvasHeight})`;
-      result["--vne-bounding-box-scale-x"] = `calc(${scale} * var(${scaleWithCanvas ? `--vne-length-100vw` : `--vne-length-3840`}) / ${canvasWidth})`;
-    }
-
     if (translateX !== null || translateY !== null) {
-      result.translate = `${translateX || 0} ${translateY || 0}`;
-      result.transformOrigin = `${-translateX || 0} ${-translateY || 0}`;
+      result["--vne-position-box-transform-x"] = translateX || "0%";
+      result["--vne-position-box-transform-y"] = translateY || "0%";
+      result["--vne-position-box-translate-x"] = translateX || "0%";
+      result["--vne-position-box-translate-y"] = translateY || "0%";
     }
-
     if (transformOriginX !== null || transformOriginY !== null) {
-      result.transformOrigin = `${transformOriginX || 0} ${transformOriginY || 0}`;
+      result["--vne-position-box-transform-x"] = transformOriginX || 0;
+      result["--vne-position-box-transform-y"] = transformOriginY || 0;
     }
-
-    if (transition !== null) result.transition = `${transition}ms`;
+    if (scale) result["--vne-position-box-scale"] = scale;
+    if (transition !== null) result.transition = transition === 0 ? "none" : `${transition}ms`;
     if (zIndex !== null) result.zIndex = zIndex;
     if (opacity !== null) result.opacity = opacity;
     if (background !== null) result.background = background;
 
     return result;
-  }, [
-    top,
-    right,
-    bottom,
-    left,
-    scale,
-    scaleWithCanvas,
-    canvasHeight,
-    canvasWidth,
-    translateX,
-    translateY,
-    transformOriginX,
-    transformOriginY,
-    transition,
-    zIndex,
-    opacity,
-    background,
-  ]);
+  }, [top, right, bottom, left, translateX, translateY, transformOriginX, transformOriginY, zIndex, scale, transition, opacity, background]);
 
   const onClickHandler = useCallback(() => onClick && onClick(value), [onClick, value]);
 
@@ -101,7 +75,7 @@ export const PositionBox = ({
 
   return (
     <div
-      className={b({ isCentered, isCenteredHorizontal, iscenteredVertical, isHided: opacity === 0 }, [className])}
+      className={b({ isCentered, isCenteredHorizontal, isCenteredVertical, isHided: opacity === 0 }, [className])}
       style={style}
       onClick={onClickHandler}
       ref={boxRef}

package/src/components/primitives/PositionBox/PositionBox.stories.jsx

@@ -6,8 +6,6 @@ export const Common = {
   args: {
     ...VneWrap.DEFAULT_ARGS,
 
-    canvasHeight: 2160,
-    canvasWidth: 3840,
     top: null,
     useTop: false,
     right: null,
@@ -17,7 +15,6 @@ export const Common = {
     left: null,
     useLeft: false,
     scale: null,
-    scaleWithCanvas: false,
     transition: 300,
     translateX: null,
     translateY: null,
@@ -41,8 +38,6 @@ export default {
     ...VneWrap.ARGS,
 
     // PositionBox
-    canvasHeight: { control: { type: "number", min: 180, max: 2160, step: 90 } },
-    canvasWidth: { control: { type: "number", min: 160, max: 3840, step: 160 } },
     top: { control: { type: "number", min: -720, max: 2160, step: 60 } },
     right: { control: { type: "number", min: -720, max: 2160, step: 60 } },
     bottom: { control: { type: "number", min: -720, max: 2160, step: 60 } },

package/src/components/primitives/PositionBox/PositionBox.styl

@@ -2,7 +2,9 @@
     display: inline-block
     position: absolute
 
-    transform: scaleY(var(--vne-bounding-box-scale-y, 1)) scaleX(var(--vne-bounding-box-scale-x, 1))
+    transform: scaleY(var(--vne-position-box-scale, 1)) scaleX(var(--vne-position-box-scale, 1))
+    transform-origin: var(--vne-position-box-transform-x, 0) var(--vne-position-box-transform-y, 0)
+    translate: var(--vne-position-box-translate-x, 0%) var(--vne-position-box-translate-y, 0%)
 
     &-children
         position: relative

package/src/components/primitives/Range/Range.jsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react";
 
-import { getVneLength, cn } from "@vnejs/uis.utils";
+import { cn, getVneLength } from "@vnejs/uis.utils";
 
 import "./Range.styl";
 
@@ -10,21 +10,10 @@ export const Range = ({ isSelected = false, width = 360, height = 6, transition
   const style = useMemo(() => {
     const result = {};
 
-    if (width) {
-      const { length, count, isEmpty = false } = getVneLength(width);
-
-      if (isEmpty) console.warn("Wrong Range Width:", width);
-      else result.width = `calc(${count}px * var(--vne-length-${length}))`;
-    }
-
+    if (width) result.width = getVneLength(width);
     if (height) {
-      const { length, count, isEmpty = false } = getVneLength(height);
-
-      if (isEmpty) console.warn("Wrong Range Height:", height);
-      else {
-        result.height = `calc(${count}px * var(--vne-length-${length}))`;
-        result.borderRadius = `calc(${count}px * var(--vne-length-${length}))`;
-      }
+      result.height = getVneLength(height);
+      result.borderRadius = getVneLength(height);
     }
 
     if (transition) result.transition = `${transition}ms`;
@@ -38,13 +27,8 @@ export const Range = ({ isSelected = false, width = 360, height = 6, transition
     const result = { translate: `-${curPercent + 0.75 * (50 - curPercent)}% -25%`, left: `${curPercent}%` };
 
     if (height) {
-      const { length, count, isEmpty = false } = getVneLength(height);
-
-      if (isEmpty) console.warn("Wrong Range Height:", height);
-      else {
-        result.height = `calc(${count * 2}px * var(--vne-length-${length}))`;
-        result.width = `calc(${count * 2}px * var(--vne-length-${length}))`;
-      }
+      result.height = getVneLength(height * 1.5);
+      result.width = getVneLength(height * 1.5);
     }
 
     return result;

package/src/components/primitives/Scrollbar/Scrollbar.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "react";
 
-import { getVneLength, cn } from "@vnejs/uis.utils";
+import { cn, getVneLength } from "@vnejs/uis.utils";
 
 import { useThumbHook } from "./hooks/thumb.hook";
 import { useScrollHook } from "./hooks/scroll.hook";
@@ -21,21 +21,8 @@ export const Scrollbar = ({ className = "", children, width = 0, height = 0, scr
   const style = useMemo(() => {
     const result = {};
 
-    if (width) {
-      const { length, count, isEmpty = false } = getVneLength(width);
-      if (isEmpty) console.warn("Wrong Scrollbar Width:", width);
-      else {
-        result.width = `calc(${count}px * var(--vne-length-${length}))`;
-      }
-    }
-
-    if (height) {
-      const { length, count, isEmpty = false } = getVneLength(height);
-      if (isEmpty) console.warn("Wrong Scrollbar Height:", height);
-      else {
-        result.height = `calc(${count}px * var(--vne-length-${length}))`;
-      }
-    }
+    if (width) result.width = getVneLength(width);
+    if (height) result.height = getVneLength(height);
 
     return result;
   }, [width, height]);
@@ -46,21 +33,8 @@ export const Scrollbar = ({ className = "", children, width = 0, height = 0, scr
     if (shouldRenderHorizontal) result.overflowX = "auto";
     if (shouldRenderVertical) result.overflowY = "auto";
 
-    if (width) {
-      const { length, count, isEmpty = false } = getVneLength(width);
-      if (isEmpty) console.warn("Wrong Scrollbar Width:", width);
-      else {
-        result.maxWidth = `calc(${count}px * var(--vne-length-${length}))`;
-      }
-    }
-
-    if (height) {
-      const { length, count, isEmpty = false } = getVneLength(height);
-      if (isEmpty) console.warn("Wrong Scrollbar Height:", height);
-      else {
-        result.maxHeight = `calc(${count}px * var(--vne-length-${length}))`;
-      }
-    }
+    if (width) result.maxWidth = getVneLength(width);
+    if (height) result.maxHeight = getVneLength(height);
 
     return result;
   }, [width, height, scrollbarWrapRef.current, shouldRenderHorizontal, shouldRenderVertical]);

package/src/components/primitives/Scrollbar/Scrollbar.styl

@@ -14,42 +14,42 @@
 
     transition: 1000ms
 
-    border-radius: calc(1px * var(--vne-length-8))
+    border-radius: s('round(down, min(calc(8 * 100vw / 3840), calc(8 * 100vh / 2160)), 1px)')
     opacity: 0
 
   &-thumb
     position: absolute
 
     background: var(--vne-scrollbar-color-thumb)
-    border-radius: calc(1px * var(--vne-length-12))
+    border-radius: s('round(down, min(calc(12 * 100vw / 3840), calc(12 * 100vh / 2160)), 1px)')
 
   &-scroll_vertical
-    right: calc(-1px * var(--vne-length-24))
+    right: s('round(down, min(calc(-24 * 100vw / 3840), calc(-24 * 100vh / 2160)), 1px)')
     top: 0;
-    bottom: calc(1px * var(--vne-length-36));
+    bottom: s('round(down, min(calc(36 * 100vw / 3840), calc(36 * 100vh / 2160)), 1px)')
 
-    width: calc(1px * var(--vne-length-12))
+    width: s('round(down, min(calc(12 * 100vw / 3840), calc(12 * 100vh / 2160)), 1px)')
 
     background: var(--vne-scrollbar-color-vertical)
 
   &-thumb_vertical
-    right: calc(-1px * var(--vne-length-6))
-    width: calc(1px * var(--vne-length-24))
-    height: calc(2px * var(--vne-length-48))
+    right: s('round(down, min(calc(-6 * 100vw / 3840), calc(-6 * 100vh / 2160)), 1px)')
+    width: s('round(down, min(calc(24 * 100vw / 3840), calc(24 * 100vh / 2160)), 1px)')
+    height: s('round(down, min(calc(96 * 100vw / 3840), calc(96 * 100vh / 2160)), 1px)')
 
   &-scroll_horizontal
-    bottom: calc(-1px * var(--vne-length-24))
+    bottom: s('round(down, min(calc(-24 * 100vw / 3840), calc(-24 * 100vh / 2160)), 1px)')
     left: 0;
-    right: calc(1px * var(--vne-length-36));
+    right: s('round(down, min(calc(36 * 100vw / 3840), calc(36 * 100vh / 2160)), 1px)')
 
-    height: calc(1px * var(--vne-length-12))
+    height: s('round(down, min(calc(12 * 100vw / 3840), calc(12 * 100vh / 2160)), 1px)')
 
     background: var(--vne-scrollbar-color-horizontal)
 
   &-thumb_horizontal    
-    top: calc(-1px * var(--vne-length-6))
-    width: calc(2px * var(--vne-length-48))
-    height: calc(1px * var(--vne-length-24)) 
+    top: s('round(down, min(calc(-6 * 100vw / 3840), calc(-6 * 100vh / 2160)), 1px)')
+    width: s('round(down, min(calc(96 * 100vw / 3840), calc(96 * 100vh / 2160)), 1px)')
+    height: s('round(down, min(calc(24 * 100vw / 3840), calc(24 * 100vh / 2160)), 1px)')
 
   &-scroll_isVisible
     opacity: 1

package/src/components/primitives/Scrollbar/hooks/thumb.hook.jsx

@@ -1,22 +1,25 @@
-import { useEffect, useRef } from "react";
+import { getVneLength } from "@vnejs/uis.utils";
+import { useEffect } from "react";
 
 export const useThumbHook = (scrollbarWrapRef, thumbVerticalRef, thumbHorizontalRef) => {
   useEffect(() => {
     const handleScroll = () => {
       if (!scrollbarWrapRef.current) return;
 
+      const l24 = getVneLength(24);
+
       if (thumbHorizontalRef.current) {
         const maxScrollLeft = scrollbarWrapRef.current.scrollWidth - scrollbarWrapRef.current.clientWidth;
         const percentleft = 100 * (scrollbarWrapRef.current.scrollLeft / maxScrollLeft);
 
-        thumbHorizontalRef.current.style.left = `calc(${percentleft}% + ${(100 - percentleft) / 100}px * var(--vne-length-24) - ${percentleft / 100}px * 5 * var(--vne-length-24))`;
+        thumbHorizontalRef.current.style.left = `calc(${percentleft}% + ${(100 - percentleft) / 100}px * ${l24} - ${percentleft / 100}px * 5 * ${l24})`;
       }
 
       if (thumbVerticalRef.current) {
         const maxScrollTop = scrollbarWrapRef.current.scrollHeight - scrollbarWrapRef.current.clientHeight;
         const percentTop = 100 * (scrollbarWrapRef.current.scrollTop / maxScrollTop);
 
-        thumbVerticalRef.current.style.top = `calc(${percentTop}% + ${(100 - percentTop) / 100}px * var(--vne-length-24) - ${percentTop / 100}px * 5 * var(--vne-length-24))`;
+        thumbVerticalRef.current.style.top = `calc(${percentTop}% + ${(100 - percentTop) / 100}px * ${l24} - ${percentTop / 100}px * 5 * ${l24})`;
       }
     };
 

package/src/components/primitives/Svg/Svg.jsx

@@ -13,13 +13,8 @@ const useHooks = ({ isNotRender = false, color = null, size = 60, opacity = null
     if (opacity !== null) result.opacity = opacity;
 
     if (size) {
-      const { length, count, isEmpty = false } = getVneLength(size);
-
-      if (isEmpty) console.warn("Wrong Svg Size:", size);
-      else {
-        result.width = `calc(${count}px * var(--vne-length-${length}))`;
-        result.height = `calc(${count}px * var(--vne-length-${length}))`;
-      }
+      result.width = getVneLength(size);
+      result.height = getVneLength(size);
     }
 
     return result;

package/src/components/primitives/Text/Text.jsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react";
 
-import { getVneLength, cn } from "@vnejs/uis.utils";
+import { cn, getVneLength } from "@vnejs/uis.utils";
 
 import "./Text.styl";
 
@@ -43,35 +43,12 @@ export const Text = ({
     if (opacity !== null) result.opacity = opacity;
 
     if (size) {
-      const { length, count, isEmpty = false } = getVneLength(size);
-
-      if (isEmpty) console.warn("Wrong Text Size:", size);
-      else {
-        result.fontSize = `calc(${count}px * var(--vne-length-${length}) * var(--vne-text-size-multiplicator, 1))`;
-        result.lineHeight = `calc(${count * 1.25}px * var(--vne-length-${length}))`;
-      }
-    }
-
-    if (padding) {
-      const { length, count, isEmpty = false } = getVneLength(padding);
-
-      if (isEmpty) console.warn("Wrong Text Padding:", padding);
-      else result.padding = `calc(${count}px * var(--vne-length-${length}))`;
-    }
-
-    if (width) {
-      const { length, count, isEmpty = false } = getVneLength(width);
-
-      if (isEmpty) console.warn("Wrong Text Width:", width);
-      else result.width = `calc(${count}px * var(--vne-length-${length}))`;
-    }
-
-    if (marginTop) {
-      const { length, count, isEmpty = false } = getVneLength(marginTop);
-
-      if (isEmpty) console.warn("Wrong Text Margin Top:", marginTop);
-      else result.marginTop = `calc(${count}px * var(--vne-length-${length}))`;
+      result.fontSize = `round(down, calc(${getVneLength(size)} * var(--vne-text-size-multiplicator, 1)), 1px)`;
+      result.lineHeight = `round(down, calc(${getVneLength(1.25 * size)} * var(--vne-text-size-multiplicator, 1)), 1px)`;
     }
+    if (padding) result.padding = getVneLength(padding);
+    if (width) result.width = getVneLength(width);
+    if (marginTop) result.marginTop = getVneLength(marginTop);
 
     return result;
   }, [font, color, whiteSpace, size, weight, padding, marginTop, opacity, width, transition]);

package/src/components/primitives/Text/Text.styl

@@ -24,7 +24,7 @@
 
     &_isSelected
       font-weight: bold
-      text-shadow: 0 0 calc(1px * var(--vne-length-24)) rgba(255, 255, 255, 90%)
+      text-shadow: 0 0 s('round(down, min(calc(12 * 100vw / 3840), calc(12 * 100vh / 2160)), 1px)') rgba(255, 255, 255, 90%)
 
     &_isHoverable[vne-cursor-target],
     .TextHoverParent[vne-cursor-target] &,

package/src/components/primitives/Toggle/Toggle.jsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react";
 
-import { getVneLength, cn } from "@vnejs/uis.utils";
+import { cn, getVneLength } from "@vnejs/uis.utils";
 
 import "./Toggle.styl";
 
@@ -11,14 +11,9 @@ export const Toggle = ({ isSelected = false, size = 96, transition = 300, classN
     const result = {};
 
     if (size) {
-      const { length, count, isEmpty = false } = getVneLength(size);
-
-      if (isEmpty) console.warn("Wrong Toggle Size:", size);
-      else {
-        result.width = `calc(${count * 2}px * var(--vne-length-${length}))`;
-        result.height = `calc(${count}px * var(--vne-length-${length}))`;
-        result.borderRadius = `calc(${count * 0.5}px * var(--vne-length-${length}))`;
-      }
+      result.width = getVneLength(2 * size);
+      result.height = getVneLength(size);
+      result.borderRadius = getVneLength(0.5 * size);
     }
 
     if (transition) result.transition = `${transition}ms`;

package/src/components/primitives/Toggle/Toggle.styl

@@ -5,7 +5,7 @@
     --vne-toggle-color-toggled: var(--vne-color-primary, rgba(255, 255, 255, 60%))
     --vne-toggle-color-button: var(--vne-color-active, rgba(255, 255, 255, 90%))
 
-    --vne-toggle-shadow-selected: var(--vne-shadow-selected, 0 0 calc(1px * var(--vne-length-24)) var(--vne-color-active, rgba(255, 255, 255, 90%)))
+    --vne-toggle-shadow-selected: var(--vne-shadow-selected, 0 0 s('round(down, min(calc(24 * 100vw / 3840), calc(24 * 100vh / 2160)), 1px)') var(--vne-color-active, rgba(255, 255, 255, 90%)))
 
     background: var(--vne-toggle-color-untoggled)
 

package/src/components/primitives/View/View.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { cn } from "@bem-react/classname";
 
@@ -34,6 +34,8 @@ export const View = ({
   onClick,
   children,
 }) => {
+  const [isRender, setIsRender] = useState(isShow);
+  const [isRealShow, setIsRealShow] = useState(isShow);
   const ref = useRef(null);
 
   useEffect(() => {
@@ -44,9 +46,30 @@ export const View = ({
     setAttribute(ref.current, "data-html2canvas-ignore", isIgnoreOnScreenshot);
   }, [ref.current, isDisableAutoread, isAllowAutoread, isIgnoreOnScreenshot, isShow]);
 
+  useEffect(() => {
+    if (!isShow) {
+      setIsRealShow(false);
+      if (isForce) {
+        setIsRender(false);
+      } else {
+        const tm = setTimeout(() => setIsRender(false), transition);
+
+        return () => clearTimeout(tm);
+      }
+    } else {
+      setIsRender(true);
+
+      if (isForce) {
+        setIsRealShow(true);
+      } else {
+        requestAnimationFrame(() => setImmediate(() => setIsRealShow(true)));
+      }
+    }
+  }, [isShow]);
+
   return (
     <PositionBox
-      className={b({ isShow, isForce, isHidden, view }, [className])}
+      className={b({ isShow: isRealShow, isForce, isHidden, view }, [className])}
       top={top}
       right={right}
       bottom={bottom}
@@ -61,6 +84,7 @@ export const View = ({
       onClick={onClick}
       background={background}
       boxRef={ref}
+      isNotRender={!isRender}
     >
       {children}
     </PositionBox>

package/src/components/primitives/View/View.stories.jsx

@@ -1,5 +1,7 @@
 import { useMemo } from "react";
 
+import { getVneLength } from "@vnejs/uis.utils";
+
 import { renderWithVneWrap, VneWrap } from "../../storybook/VneWrap/VneWrap";
 
 import { View } from "../";
@@ -43,10 +45,11 @@ export default {
       }, [top, right, bottom, left, isUseTop, isUseRight, isUseBottom, isUseLeft]);
 
       const props = useMemo(() => ({ ...positionProps, ...args }), [positionProps, args]);
+      const style = useMemo(() => ({ width: getVneLength(720), height: getVneLength(540), background: "red" }), []);
 
       return (
         <View {...props}>
-          <div style={{ width: `calc(2px * var(--vne-length-360))`, height: `calc(2px * var(--vne-length-270))`, background: "red" }} />
+          <div style={style} />
         </View>
       );
     },

package/src/components/primitives/Wrap/Wrap.jsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from "react";
 
-import { getVneLength, cn } from "@vnejs/uis.utils";
+import { cn, getVneLength } from "@vnejs/uis.utils";
 
 import "./Wrap.styl";
 
@@ -33,74 +33,22 @@ export const Wrap = ({
       result.backgroundColor = "";
       result.backgroundImage = `url("${imageSrc}")`;
     }
+    if (transition) result.transition = `${transition}ms`;
+    if (opacity !== null) result.opacity = opacity;
 
-    if (padding) {
-      const { length, count, isEmpty = false } = getVneLength(padding);
-
-      if (isEmpty) console.warn("Wrong Wrap Padding:", padding);
-      else result.padding = `calc(${count}px * var(--vne-length-${length}))`;
-    }
-
+    if (padding) result.padding = getVneLength(padding);
     if (paddingHorizontal) {
-      const { length, count, isEmpty = false } = getVneLength(paddingHorizontal);
-
-      if (isEmpty) console.warn("Wrong Wrap Padding Horizontal:", paddingHorizontal);
-      else {
-        result.paddingLeft = `calc(${count}px * var(--vne-length-${length}))`;
-        result.paddingRight = `calc(${count}px * var(--vne-length-${length}))`;
-      }
+      result.paddingLeft = getVneLength(paddingHorizontal);
+      result.paddingRight = getVneLength(paddingHorizontal);
     }
-
     if (paddingVertical) {
-      const { length, count, isEmpty = false } = getVneLength(paddingVertical);
-
-      if (isEmpty) console.warn("Wrong Wrap Padding Vertical:", paddingVertical);
-      else {
-        result.paddingTop = `calc(${count}px * var(--vne-length-${length}))`;
-        result.paddingBottom = `calc(${count}px * var(--vne-length-${length}))`;
-      }
-    }
-
-    if (borderWidth) {
-      const { length, count, isEmpty = false } = getVneLength(borderWidth);
-
-      if (isEmpty) console.warn("Wrong Wrap BorderWidth:", borderWidth);
-      else result.borderWidth = `calc(${count}px * var(--vne-length-${length}))`;
+      result.paddingTop = getVneLength(paddingVertical);
+      result.paddingBottom = getVneLength(paddingVertical);
     }
-
-    if (borderRadius !== null) {
-      if (borderRadius === 0) result.borderRadius = "0";
-      else {
-        const { length, count, isEmpty = false } = getVneLength(borderRadius);
-
-        if (isEmpty) console.warn("Wrong Wrap BorderRadius:", borderRadius);
-        else result.borderRadius = `calc(${count}px * var(--vne-length-${length}))`;
-      }
-    }
-
-    if (width) {
-      if (typeof width === "string") {
-        result.width = width;
-      } else {
-        const { length, count, isEmpty = false } = getVneLength(width);
-        if (isEmpty) console.warn("Wrong Wrap Width:", width);
-        else result.width = `calc(${count}px * var(--vne-length-${length}))`;
-      }
-    }
-
-    if (height) {
-      if (typeof height === "string") {
-        result.height = height;
-      } else {
-        const { length, count, isEmpty = false } = getVneLength(height);
-        if (isEmpty) console.warn("Wrong Wrap Height:", height);
-        else result.height = `calc(${count}px * var(--vne-length-${length}))`;
-      }
-    }
-
-    if (transition) result.transition = `${transition}ms`;
-
-    if (opacity !== null) result.opacity = opacity;
+    if (borderWidth) result.borderWidth = getVneLength(borderWidth);
+    if (borderRadius !== null) result.borderRadius = borderRadius === 0 ? "0" : getVneLength(borderRadius);
+    if (width) result.width = typeof width === "string" ? width : getVneLength(width);
+    if (height) result.height = typeof height === "string" ? height : getVneLength(height);
 
     return result;
   }, [padding, paddingHorizontal, paddingVertical, borderWidth, borderRadius, width, height, imageSrc, transition, opacity]);

package/src/components/primitives/Wrap/Wrap.stories.jsx

@@ -1,6 +1,7 @@
 import { renderWithVneWrap, VneWrap } from "../../storybook/VneWrap/VneWrap";
 
 import { Wrap } from "../";
+import { getVneLength } from "@vnejs/uis.utils";
 
 export const Common = {
   args: {
@@ -23,7 +24,7 @@ export default {
   title: "Primitives/Wrap",
   render: renderWithVneWrap((args) => (
     <Wrap {...args}>
-      <div style={{ width: "calc(15px * var(--vne-length-80))", height: "calc(15px * var(--vne-length-45))", background: "transparent" }} />
+      <div style={{ width: getVneLength(15 * 80), height: getVneLength(15 * 45), background: "transparent" }} />
     </Wrap>
   )),
   argTypes: {

package/src/components/primitives/Wrap/Wrap.styl

@@ -7,11 +7,11 @@
   --vne-wrap-border-color-selected: var(--vne-color-selected, rgba(255, 255, 255, 75%))
   --vne-wrap-border-color-active: var(--vne-color-active, rgba(255, 255, 255, 90%));
 
-  --vne-wrap-border-radius-primary: var(--vne-length-24);
-  --vne-wrap-border-radius-selected: var(--vne-length-36);
-  --vne-wrap-border-radius-active: var(--vne-length-48);
+  --vne-wrap-border-radius-primary: s('round(down, min(calc(24 * 100vw / 3840), calc(24 * 100vh / 2160)), 1px)');
+  --vne-wrap-border-radius-selected: s('round(down, min(calc(36 * 100vw / 3840), calc(36 * 100vh / 2160)), 1px)');
+  --vne-wrap-border-radius-active: s('round(down, min(calc(48 * 100vw / 3840), calc(48 * 100vh / 2160)), 1px)')
 
-  --vne-wrap-shadow-selected: var(--vne-shadow-selected, 0 0 calc(1px * var(--vne-length-24)) var(--vne-color-active, rgba(255, 255, 255, 90%)))
+  --vne-wrap-shadow-selected: var(--vne-shadow-selected, 0 0 s('round(down, min(calc(24 * 100vw / 3840), calc(24 * 100vh / 2160)), 1px)') var(--vne-color-active, rgba(255, 255, 255, 90%)))
 
   background-color: var(--vne-wrap-background-color-primary);
   border: 0px solid var(--vne-wrap-border-color-primary);

package/src/components/screens/Coraline/Interface.stories.jsx

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import { renderWithVneWrap, VneWrap } from "../../storybook";
 
 import { Backdrop, Flex, Icon, PositionBox, Text, SmoothText, Screen } from "../../";
+import { getVneLength } from "@vnejs/uis.utils";
 
 const VIEWS = { DIALOG: "dialog", LINE: "line", WALL: "wall" };
 
@@ -91,7 +92,7 @@ export default {
               width: "100%",
               height: "100%",
               background: "rgba(0, 0, 0, 0.3)",
-              borderRadius: view === VIEWS.WALL ? "calc(1px * var(--vne-length-48))" : "0",
+              borderRadius: view === VIEWS.WALL ? getVneLength(48) : "0",
             }}
           />
         </PositionBox>
@@ -116,8 +117,8 @@ export default {
         >
           <div
             style={{
-              height: "calc(1px * var(--vne-length-6))",
-              width: "calc(5px * var(--vne-length-360))",
+              height: getVneLength(6),
+              width: getVneLength(1800),
               background: "linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)",
             }}
           />

package/src/components/storybook/VneWrap/VneWrap.jsx

@@ -1,7 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 
-import { HEIGHT, WIDTH, LENGTH_ARRAY } from "@vnejs/uis.utils";
-
 import { Flex } from "../../primitives";
 
 import "./VneWrap.styl";
@@ -15,20 +13,6 @@ export const VneWrap = ({ children, height, width, textSize, aspectRatio, backgr
   const style = useMemo(() => {
     const result = { width: `${realWidth}px`, height: `${height}px`, position: "relative", background };
 
-    LENGTH_ARRAY.forEach((len) => {
-      const h = Math.max(Math.floor((height * len) / HEIGHT), 1);
-      const w = Math.max(Math.floor((realWidth * len) / WIDTH), 1);
-
-      result[`--vne-length-${len}`] = Math.min(h, w);
-    });
-
-    console.log(childrenRef.current);
-
-    if (childrenRef.current) {
-      result[`--vne-length-100vh`] = childrenRef.current.clientHeight;
-      result[`--vne-length-100vw`] = childrenRef.current.clientWidth;
-    }
-
     if (textSize) result["--vne-text-size-multiplicator"] = textSize;
 
     return result;

package/src/components/storybook/VneWrap/VneWrap.styl

@@ -14,7 +14,7 @@
     --vne-color-negative-active: rgba(0, 0, 0, 90%);
     --vne-color-negative-main: rgba(0, 0, 0, 100%);
 
-    --vne-shadow-selected: 0 0 calc(1px * var(--vne-length-24)) var(--vne-color-active, rgba(255, 255, 255, 90%))
+    --vne-shadow-selected: 0 0 s('round(down, min(calc(12 * 100vw / 3840), calc(12 * 100vh / 2160)), 1px)') var(--vne-color-active, rgba(255, 255, 255, 90%))
 
     font-family: Montserrat