@vnejs/uis.react.backdrop 0.1.10 → 0.2.1

package/dist/Backdrop.d.ts

@@ -1,5 +1,5 @@
 import { BackdropType, type BackdropProps } from "./Backdrop.types.js";
-export declare function Backdrop({ zIndex, transition, type, size, opacity, color1, color2, className, children, }: BackdropProps): import("react").JSX.Element;
+export declare function Backdrop({ zIndex, transition, type, opacity, color1, color2, stop1, stop2, scaleX, scaleY, translateX, translateY, borderRadius, className, children, }: BackdropProps): import("react").JSX.Element;
 export declare namespace Backdrop {
     export { BackdropType as TYPE };
 }

package/dist/Backdrop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../src/Backdrop.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;iCAI9C,EACvB,MAAa,EACb,UAAiB,EACjB,IAAS,EACT,IAAU,EACV,OAAW,EACX,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,GACT,EAAE,aAAa;;aAkCA,YAAY"}
+{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../src/Backdrop.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;iCAkB9C,EACvB,MAAa,EACb,UAAiB,EACjB,IAAS,EACT,OAAW,EACX,MAAM,EACN,MAAM,EACN,KAAS,EACT,KAAW,EACX,MAAU,EACV,MAAU,EACV,UAAiB,EACjB,UAAiB,EACjB,YAAmB,EACnB,SAAS,EACT,QAAQ,GACT,EAAE,aAAa;;aAwCA,YAAY"}

package/dist/Backdrop.js

@@ -3,7 +3,20 @@ import { useMemo } from "react";
 import { getVneLength } from "@vnejs/uis.utils";
 import { BackdropType } from "./Backdrop.types.js";
 import { b } from "./Backdrop.styles.js";
-export const Backdrop = ({ zIndex = null, transition = null, type = "", size = 360, opacity = 1, color1, color2, className, children, }) => {
+const setLengthField = (result, field, value) => {
+    if (value === null || value === undefined)
+        return;
+    if (value === 0) {
+        result[field] = "0";
+        return;
+    }
+    if (typeof value === "string") {
+        result[field] = value;
+        return;
+    }
+    result[field] = getVneLength(value);
+};
+export const Backdrop = ({ zIndex = null, transition = null, type = "", opacity = 1, color1, color2, stop1 = 0, stop2 = 100, scaleX = 1, scaleY = 1, translateX = null, translateY = null, borderRadius = null, className, children, }) => {
     const style = useMemo(() => {
         const TYPE_TO_DEGREE = {
             [BackdropType.BOTTOM]: 0,
@@ -13,9 +26,12 @@ export const Backdrop = ({ zIndex = null, transition = null, type = "", size = 3
         };
         const result = {
             ["--vne-backdrop-degree"]: `${TYPE_TO_DEGREE[type || BackdropType.TOP]}deg`,
+            ["--vne-backdrop-stop-1"]: `${stop1 ?? 0}%`,
+            ["--vne-backdrop-stop-2"]: `${stop2 ?? 100}%`,
+            ["--vne-backdrop-scale-x"]: scaleX ?? 1,
+            ["--vne-backdrop-scale-y"]: scaleY ?? 1,
             opacity,
         };
-        result["--vne-backdrop-length"] = getVneLength(size);
         if (color1)
             result["--vne-backdrop-color-1"] = color1;
         if (color2)
@@ -24,9 +40,12 @@ export const Backdrop = ({ zIndex = null, transition = null, type = "", size = 3
             result.zIndex = zIndex;
         if (transition !== null)
             result.transition = transition === 0 ? "none" : `${transition}ms`;
+        setLengthField(result, "--vne-backdrop-translate-x", translateX);
+        setLengthField(result, "--vne-backdrop-translate-y", translateY);
+        setLengthField(result, "--vne-backdrop-border-radius", borderRadius);
         return result;
-    }, [zIndex, size, type, color1, color2, opacity]);
-    return (_jsx("div", { className: b({ type }, [className]), style: style, children: children }));
+    }, [zIndex, type, color1, color2, stop1, stop2, opacity, transition, scaleX, scaleY, translateX, translateY, borderRadius]);
+    return (_jsx("div", { className: b({}, [className]), style: style, children: children }));
 };
 Backdrop.TYPE = BackdropType;
 //# sourceMappingURL=Backdrop.js.map

package/dist/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../src/Backdrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AAEvE,OAAO,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,MAAM,GAAG,IAAI,EACb,UAAU,GAAG,IAAI,EACjB,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,GAAG,EACV,OAAO,GAAG,CAAC,EACX,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,GACM,EAAE,EAAE;IAClB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,cAAc,GAAG;YACrB,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE;YACvB,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG;YACvB,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,GAAG;SAC1B,CAAC;QAEF,MAAM,MAAM,GAAwB;YAClC,CAAC,uBAAuB,CAAC,EAAE,GAAG,cAAc,CAAC,IAAI,IAAI,YAAY,CAAC,GAAG,CAAC,KAAK;YAC3E,OAAO;SACR,CAAC;QAEF,MAAM,CAAC,uBAAuB,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;QAErD,IAAI,MAAM;YAAE,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,CAAC;QACtD,IAAI,MAAM;YAAE,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,CAAC;QACtD,IAAI,MAAM,KAAK,IAAI;YAAE,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;QAC5C,IAAI,UAAU,KAAK,IAAI;YAAE,MAAM,CAAC,UAAU,GAAG,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC;QAE3F,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAElD,OAAO,CACL,cACE,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,EACnC,KAAK,EAAE,KAAK,YAEX,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,IAAI,GAAG,YAAY,CAAC"}
+{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../src/Backdrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAuB,MAAM,kBAAkB,CAAC;AAErE,OAAO,EAAE,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AAEvE,OAAO,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAEzC,MAAM,cAAc,GAAG,CAAC,MAA8B,EAAE,KAAa,EAAE,KAAqB,EAAE,EAAE;IAC9F,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO;IAClD,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;QAChB,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;QACpB,OAAO;IACT,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;QACtB,OAAO;IACT,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;AACtC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,MAAM,GAAG,IAAI,EACb,UAAU,GAAG,IAAI,EACjB,IAAI,GAAG,EAAE,EACT,OAAO,GAAG,CAAC,EACX,MAAM,EACN,MAAM,EACN,KAAK,GAAG,CAAC,EACT,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,CAAC,EACV,MAAM,GAAG,CAAC,EACV,UAAU,GAAG,IAAI,EACjB,UAAU,GAAG,IAAI,EACjB,YAAY,GAAG,IAAI,EACnB,SAAS,EACT,QAAQ,GACM,EAAE,EAAE;IAClB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,cAAc,GAAG;YACrB,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE;YACvB,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG;YACvB,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,GAAG;SAC1B,CAAC;QAEF,MAAM,MAAM,GAAwB;YAClC,CAAC,uBAAuB,CAAC,EAAE,GAAG,cAAc,CAAC,IAAI,IAAI,YAAY,CAAC,GAAG,CAAC,KAAK;YAC3E,CAAC,uBAAuB,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC,GAAG;YAC3C,CAAC,uBAAuB,CAAC,EAAE,GAAG,KAAK,IAAI,GAAG,GAAG;YAC7C,CAAC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;YACvC,CAAC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;YACvC,OAAO;SACR,CAAC;QAEF,IAAI,MAAM;YAAE,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,CAAC;QACtD,IAAI,MAAM;YAAE,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,CAAC;QACtD,IAAI,MAAM,KAAK,IAAI;YAAE,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;QAC5C,IAAI,UAAU,KAAK,IAAI;YAAE,MAAM,CAAC,UAAU,GAAG,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC;QAE3F,cAAc,CAAC,MAAM,EAAE,4BAA4B,EAAE,UAAU,CAAC,CAAC;QACjE,cAAc,CAAC,MAAM,EAAE,4BAA4B,EAAE,UAAU,CAAC,CAAC;QACjE,cAAc,CAAC,MAAM,EAAE,8BAA8B,EAAE,YAAY,CAAC,CAAC;QAErE,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC;IAE5H,OAAO,CACL,cACE,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,EAC7B,KAAK,EAAE,KAAK,YAEX,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,IAAI,GAAG,YAAY,CAAC"}

package/dist/Backdrop.styles.js

@@ -1,51 +1,48 @@
 import { cn, injectStyles, sel } from "@vnejs/uis.utils";
 export const b = cn("Backdrop");
-const typeTop = sel(b({ type: "top" }));
-const typeRight = sel(b({ type: "right" }));
-const typeBottom = sel(b({ type: "bottom" }));
-const typeLeft = sel(b({ type: "left" }));
 const CSS = `
+@property --vne-backdrop-color-1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: rgba(0, 0, 0, 0.85);
+}
+@property --vne-backdrop-color-2 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: rgba(0, 0, 0, 0);
+}
+@property --vne-backdrop-stop-1 {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+@property --vne-backdrop-stop-2 {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 100%;
+}
+
 ${sel(b())} {
-  --vne-backdrop-color-1: rgba(0, 0, 0, 85%);
-  --vne-backdrop-color-2: rgba(0, 0, 0, 0%);
+  --vne-backdrop-color-1: rgba(0, 0, 0, 0.85);
+  --vne-backdrop-color-2: rgba(0, 0, 0, 0);
   --vne-backdrop-degree: 0deg;
+  --vne-backdrop-stop-1: 0%;
+  --vne-backdrop-stop-2: 100%;
+  --vne-backdrop-scale-x: 1;
+  --vne-backdrop-scale-y: 1;
+  --vne-backdrop-translate-x: 0;
+  --vne-backdrop-translate-y: 0;
+  --vne-backdrop-border-radius: 0;
   display: block;
   position: absolute;
-  background: linear-gradient(var(--vne-backdrop-degree), var(--vne-backdrop-color-1) 0%, var(--vne-backdrop-color-2) 100%);
-}
-
-${typeTop},
-${typeRight},
-${typeLeft} {
   top: 0;
-}
-
-${typeTop},
-${typeRight},
-${typeBottom} {
   right: 0;
-}
-
-${typeRight},
-${typeBottom},
-${typeLeft} {
   bottom: 0;
-}
-
-${typeTop},
-${typeBottom},
-${typeLeft} {
   left: 0;
-}
-
-${typeTop},
-${typeBottom} {
-  height: var(--vne-backdrop-length);
-}
-
-${typeRight},
-${typeLeft} {
-  width: var(--vne-backdrop-length);
+  background: linear-gradient(var(--vne-backdrop-degree), var(--vne-backdrop-color-1) var(--vne-backdrop-stop-1), var(--vne-backdrop-color-2) var(--vne-backdrop-stop-2));
+  border-radius: var(--vne-backdrop-border-radius);
+  transform: translate(var(--vne-backdrop-translate-x), var(--vne-backdrop-translate-y)) scaleX(var(--vne-backdrop-scale-x)) scaleY(var(--vne-backdrop-scale-y));
+  transform-origin: 50% 50%;
 }
 `;
 injectStyles(CSS);

package/dist/Backdrop.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.styles.js","sourceRoot":"","sources":["../src/Backdrop.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhC,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AACxC,MAAM,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;AAC5C,MAAM,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;AAC9C,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;AAE1C,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;;EASR,OAAO;EACP,SAAS;EACT,QAAQ;;;;EAIR,OAAO;EACP,SAAS;EACT,UAAU;;;;EAIV,SAAS;EACT,UAAU;EACV,QAAQ;;;;EAIR,OAAO;EACP,UAAU;EACV,QAAQ;;;;EAIR,OAAO;EACP,UAAU;;;;EAIV,SAAS;EACT,QAAQ;;;CAGT,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Backdrop.styles.js","sourceRoot":"","sources":["../src/Backdrop.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhC,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;EAsBV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;CAsBT,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}

package/dist/Backdrop.types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { CssInsertValueLength, CssInsertValueNumber, CssInsertValueString } from "@vnejs/uis.utils";
+import type { CssInsertValue, CssInsertValueNumber, CssInsertValueString } from "@vnejs/uis.utils";
 export declare const BackdropType: {
     readonly TOP: "top";
     readonly RIGHT: "right";
@@ -11,10 +11,16 @@ export type BackdropProps = {
     zIndex?: CssInsertValueNumber;
     transition?: CssInsertValueNumber;
     type?: BackdropTypeValue | "";
-    size?: CssInsertValueLength;
     opacity?: CssInsertValueNumber;
     color1?: CssInsertValueString;
     color2?: CssInsertValueString;
+    stop1?: CssInsertValueNumber;
+    stop2?: CssInsertValueNumber;
+    scaleX?: CssInsertValueNumber;
+    scaleY?: CssInsertValueNumber;
+    translateX?: CssInsertValue;
+    translateY?: CssInsertValue;
+    borderRadius?: CssInsertValue;
     className?: string;
     children?: ReactNode;
 };

package/dist/Backdrop.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.types.d.ts","sourceRoot":"","sources":["../src/Backdrop.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEzG,eAAO,MAAM,YAAY;aACvB,GAAG,EAAE,KAAK;aACV,KAAK,EAAE,OAAO;aACd,MAAM,EAAE,QAAQ;aAChB,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAEjF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,IAAI,CAAC,EAAE,iBAAiB,GAAG,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}
+{"version":3,"file":"Backdrop.types.d.ts","sourceRoot":"","sources":["../src/Backdrop.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEnG,eAAO,MAAM,YAAY;aACvB,GAAG,EAAE,KAAK;aACV,KAAK,EAAE,OAAO;aACd,MAAM,EAAE,QAAQ;aAChB,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAEjF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,IAAI,CAAC,EAAE,iBAAiB,GAAG,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/uis.react.backdrop",
-  "version": "0.1.10",
+  "version": "0.2.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -10,7 +10,7 @@
     "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "peerDependencies": {
-    "@vnejs/uis.utils": "~0.1.0"
+    "@vnejs/uis.utils": "~0.2.0"
   },
   "files": [
     "dist",

package/src/Backdrop.stories.tsx

@@ -4,9 +4,15 @@ import { Backdrop } from "./Backdrop.js";
 export const Common = {
   args: {
     vneHeight: 720,
-    type: Backdrop.TYPE.TOP,
+    type: Backdrop.TYPE.BOTTOM,
     zIndex: 10,
-    size: 180,
+    scaleX: 1,
+    scaleY: 600 / 2160,
+    translateX: 0,
+    translateY: 1560,
+    stop1: 0,
+    stop2: 100,
+    borderRadius: 0,
   },
 };
 
@@ -24,9 +30,15 @@ export default {
     // Backdrop
     zIndex: { control: { type: "number", min: -100, max: 100, step: 5 } },
     type: { control: { type: "select" }, options: Object.values(Backdrop.TYPE) },
-    size: { control: { type: "number", min: 120, max: 600, step: 12 } },
     color1: { control: { type: "select" }, options: ["", "red", "green", "blue", "black"] },
     color2: { control: { type: "select" }, options: ["", "red", "green", "blue", "black"] },
     transition: { control: { type: "number", min: 0, max: 600, step: 30 } },
+    scaleX: { control: { type: "number", min: 0, max: 1, step: 0.01 } },
+    scaleY: { control: { type: "number", min: 0, max: 1, step: 0.01 } },
+    translateX: { control: { type: "number", min: -2160, max: 2160, step: 12 } },
+    translateY: { control: { type: "number", min: -2160, max: 2160, step: 12 } },
+    stop1: { control: { type: "number", min: 0, max: 100, step: 1 } },
+    stop2: { control: { type: "number", min: 0, max: 100, step: 1 } },
+    borderRadius: { control: { type: "number", min: 0, max: 120, step: 6 } },
   },
 };

package/src/Backdrop.styles.ts

@@ -2,53 +2,49 @@ import { cn, injectStyles, sel } from "@vnejs/uis.utils";
 
 export const b = cn("Backdrop");
 
-const typeTop = sel(b({ type: "top" }));
-const typeRight = sel(b({ type: "right" }));
-const typeBottom = sel(b({ type: "bottom" }));
-const typeLeft = sel(b({ type: "left" }));
-
 const CSS = `
+@property --vne-backdrop-color-1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: rgba(0, 0, 0, 0.85);
+}
+@property --vne-backdrop-color-2 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: rgba(0, 0, 0, 0);
+}
+@property --vne-backdrop-stop-1 {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+@property --vne-backdrop-stop-2 {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 100%;
+}
+
 ${sel(b())} {
-  --vne-backdrop-color-1: rgba(0, 0, 0, 85%);
-  --vne-backdrop-color-2: rgba(0, 0, 0, 0%);
+  --vne-backdrop-color-1: rgba(0, 0, 0, 0.85);
+  --vne-backdrop-color-2: rgba(0, 0, 0, 0);
   --vne-backdrop-degree: 0deg;
+  --vne-backdrop-stop-1: 0%;
+  --vne-backdrop-stop-2: 100%;
+  --vne-backdrop-scale-x: 1;
+  --vne-backdrop-scale-y: 1;
+  --vne-backdrop-translate-x: 0;
+  --vne-backdrop-translate-y: 0;
+  --vne-backdrop-border-radius: 0;
   display: block;
   position: absolute;
-  background: linear-gradient(var(--vne-backdrop-degree), var(--vne-backdrop-color-1) 0%, var(--vne-backdrop-color-2) 100%);
-}
-
-${typeTop},
-${typeRight},
-${typeLeft} {
   top: 0;
-}
-
-${typeTop},
-${typeRight},
-${typeBottom} {
   right: 0;
-}
-
-${typeRight},
-${typeBottom},
-${typeLeft} {
   bottom: 0;
-}
-
-${typeTop},
-${typeBottom},
-${typeLeft} {
   left: 0;
-}
-
-${typeTop},
-${typeBottom} {
-  height: var(--vne-backdrop-length);
-}
-
-${typeRight},
-${typeLeft} {
-  width: var(--vne-backdrop-length);
+  background: linear-gradient(var(--vne-backdrop-degree), var(--vne-backdrop-color-1) var(--vne-backdrop-stop-1), var(--vne-backdrop-color-2) var(--vne-backdrop-stop-2));
+  border-radius: var(--vne-backdrop-border-radius);
+  transform: translate(var(--vne-backdrop-translate-x), var(--vne-backdrop-translate-y)) scaleX(var(--vne-backdrop-scale-x)) scaleY(var(--vne-backdrop-scale-y));
+  transform-origin: 50% 50%;
 }
 `;
 

package/src/Backdrop.tsx

@@ -1,19 +1,39 @@
 import { useMemo } from "react";
 
-import { getVneLength } from "@vnejs/uis.utils";
+import { getVneLength, type CssInsertValue } from "@vnejs/uis.utils";
 
 import { BackdropType, type BackdropProps } from "./Backdrop.types.js";
 
 import { b } from "./Backdrop.styles.js";
 
+const setLengthField = (result: Record<string, string>, field: string, value: CssInsertValue) => {
+  if (value === null || value === undefined) return;
+  if (value === 0) {
+    result[field] = "0";
+    return;
+  }
+  if (typeof value === "string") {
+    result[field] = value;
+    return;
+  }
+
+  result[field] = getVneLength(value);
+};
+
 export const Backdrop = ({
   zIndex = null,
   transition = null,
   type = "",
-  size = 360,
   opacity = 1,
   color1,
   color2,
+  stop1 = 0,
+  stop2 = 100,
+  scaleX = 1,
+  scaleY = 1,
+  translateX = null,
+  translateY = null,
+  borderRadius = null,
   className,
   children,
 }: BackdropProps) => {
@@ -27,22 +47,28 @@ export const Backdrop = ({
 
     const result: Record<string, any> = {
       ["--vne-backdrop-degree"]: `${TYPE_TO_DEGREE[type || BackdropType.TOP]}deg`,
+      ["--vne-backdrop-stop-1"]: `${stop1 ?? 0}%`,
+      ["--vne-backdrop-stop-2"]: `${stop2 ?? 100}%`,
+      ["--vne-backdrop-scale-x"]: scaleX ?? 1,
+      ["--vne-backdrop-scale-y"]: scaleY ?? 1,
       opacity,
     };
 
-    result["--vne-backdrop-length"] = getVneLength(size);
-
     if (color1) result["--vne-backdrop-color-1"] = color1;
     if (color2) result["--vne-backdrop-color-2"] = color2;
     if (zIndex !== null) result.zIndex = zIndex;
     if (transition !== null) result.transition = transition === 0 ? "none" : `${transition}ms`;
 
+    setLengthField(result, "--vne-backdrop-translate-x", translateX);
+    setLengthField(result, "--vne-backdrop-translate-y", translateY);
+    setLengthField(result, "--vne-backdrop-border-radius", borderRadius);
+
     return result;
-  }, [zIndex, size, type, color1, color2, opacity]);
+  }, [zIndex, type, color1, color2, stop1, stop2, opacity, transition, scaleX, scaleY, translateX, translateY, borderRadius]);
 
   return (
     <div
-      className={b({ type }, [className])}
+      className={b({}, [className])}
       style={style}
     >
       {children}

package/src/Backdrop.types.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-import type { CssInsertValueLength, CssInsertValueNumber, CssInsertValueString } from "@vnejs/uis.utils";
+import type { CssInsertValue, CssInsertValueNumber, CssInsertValueString } from "@vnejs/uis.utils";
 
 export const BackdropType = {
   TOP: "top",
@@ -15,10 +15,16 @@ export type BackdropProps = {
   zIndex?: CssInsertValueNumber;
   transition?: CssInsertValueNumber;
   type?: BackdropTypeValue | "";
-  size?: CssInsertValueLength;
   opacity?: CssInsertValueNumber;
   color1?: CssInsertValueString;
   color2?: CssInsertValueString;
+  stop1?: CssInsertValueNumber;
+  stop2?: CssInsertValueNumber;
+  scaleX?: CssInsertValueNumber;
+  scaleY?: CssInsertValueNumber;
+  translateX?: CssInsertValue;
+  translateY?: CssInsertValue;
+  borderRadius?: CssInsertValue;
   className?: string;
   children?: ReactNode;
 };