From 30325c94116f40391726bc9d81e6bfbcb8c3e30d Mon Sep 17 00:00:00 2001
From: Arslan Bekbolotov <arslanbekbolotov58@gmail.com>
Date: Wed, 8 Oct 2025 13:07:12 +0600
Subject: [PATCH] =?UTF-8?q?fix:=20[EV-8284]=20=D0=BF=D0=BE=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D1=83?=
 =?UTF-8?q?=20=D0=B2=20=D1=85=D1=83=D0=BA=D0=B5=20usePosition?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/flex/Flex.tsx         |  3 ++-
 src/components/types.ts              | 12 ++++++++++++
 src/components/use-flex/index.ts     | 28 ++++++++++++++++++++++++++++
 src/components/use-position/index.ts |  9 ++++++---
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index 523ff6d2..77f789e4 100644
--- a/src/components/flex/Flex.tsx
+++ b/src/components/flex/Flex.tsx
@@ -39,11 +39,12 @@ export const Flex = forwardRef(
       gap,
       align,
       justify,
+      flexGrow,
       style,
     } = props;
 
     const flex = useFlex({
-      m: { flexWrap, gap, align, flexDirection, justify },
+      m: { flexWrap, gap, align, flexDirection, justify, flexGrow },
       md: { ...md },
       d: { ...d },
     });
diff --git a/src/components/types.ts b/src/components/types.ts
index fe0c46a1..81684630 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -214,6 +214,7 @@ export type UiKitFlexParams = {
   gap?: UiKitGap;
   flexDirection?: UiKitFlexDirection;
   flexWrap?: UiKitFlexWrap;
+  flexGrow?: number;
 };
 
 export type UiKitBackgroundProps = {
@@ -350,6 +351,17 @@ export type UiKitEffectProps = {
   opacity?: number;
   overflow?: "visible" | "hidden" | "scroll" | "auto" | "clip";
   backdropBlur?: string | number;
+  cursor?:
+    | "auto"
+    | "default"
+    | "pointer"
+    | "not-allowed"
+    | "text"
+    | "move"
+    | "wait"
+    | "crosshair"
+    | "grab"
+    | "grabbing";
 };
 
 export type ElementRef<E extends ElementType> =
diff --git a/src/components/use-flex/index.ts b/src/components/use-flex/index.ts
index 8afeaa00..fd875a88 100644
--- a/src/components/use-flex/index.ts
+++ b/src/components/use-flex/index.ts
@@ -221,6 +221,7 @@ export const useFlex = (params: {
   const styles: Record<string, string | number> = {};
   let className = "";
 
+  // === GAP ===
   if (typeof params.m.gap !== "undefined") {
     styles["--gap"] = styleTransformer(params.m.gap);
     className += "gap-[var(--gap)] ";
@@ -237,6 +238,7 @@ export const useFlex = (params: {
     className += "lg:gap-[var(--d-gap)] ";
   }
 
+  // === JUSTIFY ===
   if (params.m.justify) {
     className += justifyStyle(params.m.justify) + " ";
   }
@@ -250,6 +252,7 @@ export const useFlex = (params: {
     className += justifyStyle(params.d.justify, "lg") + " ";
   }
 
+  // === FLEX WRAP ===
   if (params.m.flexWrap) {
     className += flexWrapStyle(params.m.flexWrap) + " ";
   }
@@ -264,6 +267,7 @@ export const useFlex = (params: {
     className += flexWrapStyle(params.d.flexWrap, "lg") + " ";
   }
 
+  // === ALIGN ===
   if (params.m.align) {
     className += alignStyle(params.m.align) + " ";
   }
@@ -278,6 +282,7 @@ export const useFlex = (params: {
     className += alignStyle(params.d.align, "lg") + " ";
   }
 
+  // === DIRECTION ===
   if (params.m.flexDirection) {
     className += directionStyle(params.m.flexDirection) + " ";
   }
@@ -295,6 +300,29 @@ export const useFlex = (params: {
     className += directionStyle(params.d.flexDirection, "lg") + " ";
   }
 
+  // === FLEX GROW ===
+  if (typeof params.m.flexGrow !== "undefined") {
+    styles["--grow"] = params.m.flexGrow;
+    className += "grow-[var(--grow)] ";
+  }
+
+  const mdGrow = params.md.flexGrow ?? params.m.flexGrow;
+  if (
+    typeof params.md.flexGrow !== "undefined" &&
+    params.md.flexGrow !== params.m.flexGrow
+  ) {
+    styles["--md-grow"] = params.md.flexGrow;
+    className += "md:grow-[var(--md-grow)] ";
+  }
+
+  if (
+    typeof params.d.flexGrow !== "undefined" &&
+    params.d.flexGrow !== mdGrow
+  ) {
+    styles["--d-grow"] = params.d.flexGrow;
+    className += "lg:grow-[var(--d-grow)] ";
+  }
+
   return {
     styles,
     className,
diff --git a/src/components/use-position/index.ts b/src/components/use-position/index.ts
index 61bfc72a..88c84540 100644
--- a/src/components/use-position/index.ts
+++ b/src/components/use-position/index.ts
@@ -18,7 +18,8 @@ export const usePosition = ({
 
   if (m) {
     if (m.position.type) {
-      className += `${m.position.type} `;
+      styles["--positionType"] = m.position.type;
+      className += `[position:var(--positionType)] `;
     }
 
     if (typeof m.position.top !== "undefined") {
@@ -68,7 +69,8 @@ export const usePosition = ({
   if (md) {
     if (md.position.type) {
       if (m?.position.type !== md.position.type) {
-        className += `md:${md.position.type} `;
+        styles["--mdPositionType"] = md.position.type;
+        className += `md:[position:var(--mdPositionType)] `;
       }
       mdCalculatedValues.position.type = md.position.type;
     }
@@ -128,7 +130,8 @@ export const usePosition = ({
 
   if (d) {
     if (d.position.type) {
-      className += `lg:${d.position.type} `;
+      styles["--dPositionType"] = d.position.type;
+      className += `lg:[position:var(--dPositionType)] `;
     }
 
     if (