@niibase/uniwind 1.1.4 → 1.1.5

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Uniwind
+Copyright (c) 2026 Uniwind
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights

package/dist/common/css/insets.js

@@ -4,61 +4,80 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateCSSForInsets = void 0;
-const types = ["m", "p"];
-const sides = ["", "x", "y", "t", "b", "l", "r"];
+const types = ["margin", "padding", "inset"];
+const sides = ["inset", "x", "y", "top", "bottom", "left", "right"];
+const safeAreaTypes = ["safe", "safe-or-*", "safe-offset-*"];
 const spacing = "--spacing(--value(integer))";
 const length = "--value([length])";
 const generateCSSForInsets = () => {
   let css = `@utility h-screen-safe {
     height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
 }
+
 `;
   const getInsetsForSide = side => {
     switch (side) {
-      case "t":
+      case "top":
         return ["top"];
-      case "b":
+      case "bottom":
         return ["bottom"];
-      case "l":
+      case "left":
         return ["left"];
-      case "r":
+      case "right":
         return ["right"];
       case "x":
         return ["left", "right"];
       case "y":
         return ["top", "bottom"];
-      default:
+      case "inset":
         return ["top", "bottom", "left", "right"];
+      default:
+        side;
+        return [];
+    }
+  };
+  const getUtilityName = (typeName, side, safeAreaType) => {
+    if (typeName === "inset") {
+      return `${side}-${safeAreaType}`;
+    }
+    const sideSuffix = side === "inset" ? "" : side.at(0);
+    return `${typeName.at(0)}${sideSuffix}-${safeAreaType}`;
+  };
+  const getStyleProperty = (typeName, inset) => {
+    if (typeName === "inset") {
+      return inset;
+    }
+    return `${typeName}-${inset}`;
+  };
+  const getStylesForSafeAreaType = (safeAreaType, styles) => {
+    switch (safeAreaType) {
+      case "safe":
+        return styles;
+      case "safe-or-*":
+        return styles.flatMap(style => {
+          const styleWithoutSemicolon = style.replace(";", "");
+          return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)];
+        });
+      case "safe-offset-*":
+        return styles.flatMap(style => {
+          const styleWithoutSemicolon = style.replace(";", "");
+          return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)];
+        });
+      default:
+        safeAreaType;
+        return [];
     }
   };
   types.forEach(type => {
     sides.forEach(side => {
-      const styleName = type === "m" ? "margin" : "padding";
       const insets = getInsetsForSide(side);
-      const styles = insets.map(inset => `${styleName}-${inset}: env(safe-area-inset-${inset});`);
-      const safeStyles = styles.flatMap(style => {
-        const styleWithoutSemicolon = style.replace(";", "");
-        return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)];
-      });
-      const safeOffsetStyles = styles.flatMap(style => {
-        const styleWithoutSemicolon = style.replace(";", "");
-        return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)];
+      const styles = insets.map(inset => `${getStyleProperty(type, inset)}: env(safe-area-inset-${inset});`);
+      safeAreaTypes.forEach(safeAreaType => {
+        const utilityName = getUtilityName(type, side, safeAreaType);
+        css += [`@utility ${utilityName} {`, ...getStylesForSafeAreaType(safeAreaType, styles).map(style => `    ${style}`), "}", "", ""].join("\n");
       });
-      css += `
-                @utility ${type}${side}-safe {
-                    ${styles.join("\n    ")}
-                }
-                
-                @utility ${type}${side}-safe-or-* {
-                    ${safeStyles.join("\n    ")}
-                }
-                
-                @utility ${type}${side}-safe-offset-* {
-                    ${safeOffsetStyles.join("\n    ")}
-                }
-            `;
     });
   });
-  return css.replaceAll("        ", "").trim() + "\n";
+  return css.slice(0, -1);
 };
 exports.generateCSSForInsets = generateCSSForInsets;

package/dist/metro/index.cjs

@@ -79,10 +79,8 @@ const nativeResolver = (extraComponents) => ({
 }) => {
   const resolution = resolver(context, moduleName, platform);
   const isInternal = isFromThisModule(context.originModulePath);
-  const isReactNativeIndex = context.originModulePath.endsWith(
-    `react-native${node_path.sep}index.js`
-  );
-  if (isInternal || resolution.type !== "sourceFile" || isReactNativeIndex) {
+  const isFromReactNative = context.originModulePath.includes(`${node_path.sep}react-native${node_path.sep}`) || context.originModulePath.includes(`${node_path.sep}@react-native${node_path.sep}`);
+  if (isInternal || resolution.type !== "sourceFile" || isFromReactNative) {
     return resolution;
   }
   if (moduleName === "react-native") {

package/dist/metro/index.mjs

@@ -71,10 +71,8 @@ const nativeResolver = (extraComponents) => ({
 }) => {
   const resolution = resolver(context, moduleName, platform);
   const isInternal = isFromThisModule(context.originModulePath);
-  const isReactNativeIndex = context.originModulePath.endsWith(
-    `react-native${sep}index.js`
-  );
-  if (isInternal || resolution.type !== "sourceFile" || isReactNativeIndex) {
+  const isFromReactNative = context.originModulePath.includes(`${sep}react-native${sep}`) || context.originModulePath.includes(`${sep}@react-native${sep}`);
+  if (isInternal || resolution.type !== "sourceFile" || isFromReactNative) {
     return resolution;
   }
   if (moduleName === "react-native") {

package/dist/metro/metro-transformer.cjs

@@ -6,7 +6,7 @@ const common = require('../shared/uniwind.BDoX4wlN.cjs');
 const node = require('@tailwindcss/node');
 const oxide = require('@tailwindcss/oxide');
 const types = require('../shared/uniwind.BZIuaszw.cjs');
-const stringifyThemes = require('../shared/uniwind.DeQhDtT7.cjs');
+const stringifyThemes = require('../shared/uniwind.DWS2R6_d.cjs');
 const lightningcss = require('lightningcss');
 const culori = require('culori');
 

package/dist/metro/metro-transformer.mjs

@@ -4,7 +4,7 @@ import { p as pipe, r as roundToPrecision, i as isNumber, a as isValidJSValue, s
 import { compile } from '@tailwindcss/node';
 import { Scanner } from '@tailwindcss/oxide';
 import { P as Platform } from '../shared/uniwind.CyoRUwOj.mjs';
-import { L as Logger, p as processFunctions, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.D8_HBWsJ.mjs';
+import { L as Logger, p as processFunctions, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.BiEpLI6n.mjs';
 import { transform as transform$1 } from 'lightningcss';
 import { converter, parse, formatHex, formatHex8 } from 'culori';
 

package/dist/module/css/insets.js

@@ -1,63 +1,88 @@
-const types = ["m", "p"];
-const sides = ["", "x", "y", "t", "b", "l", "r"];
+const types = ["margin", "padding", "inset"];
+const sides = ["inset", "x", "y", "top", "bottom", "left", "right"];
+const safeAreaTypes = ["safe", "safe-or-*", "safe-offset-*"];
 const spacing = "--spacing(--value(integer))";
 const length = "--value([length])";
 export const generateCSSForInsets = () => {
   let css = `@utility h-screen-safe {
     height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
 }
+
 `;
   const getInsetsForSide = (side) => {
     switch (side) {
-      case "t":
+      case "top":
         return ["top"];
-      case "b":
+      case "bottom":
         return ["bottom"];
-      case "l":
+      case "left":
         return ["left"];
-      case "r":
+      case "right":
         return ["right"];
       case "x":
         return ["left", "right"];
       case "y":
         return ["top", "bottom"];
-      default:
+      case "inset":
         return ["top", "bottom", "left", "right"];
+      default:
+        side;
+        return [];
+    }
+  };
+  const getUtilityName = (typeName, side, safeAreaType) => {
+    if (typeName === "inset") {
+      return `${side}-${safeAreaType}`;
+    }
+    const sideSuffix = side === "inset" ? "" : side.at(0);
+    return `${typeName.at(0)}${sideSuffix}-${safeAreaType}`;
+  };
+  const getStyleProperty = (typeName, inset) => {
+    if (typeName === "inset") {
+      return inset;
+    }
+    return `${typeName}-${inset}`;
+  };
+  const getStylesForSafeAreaType = (safeAreaType, styles) => {
+    switch (safeAreaType) {
+      case "safe":
+        return styles;
+      case "safe-or-*":
+        return styles.flatMap((style) => {
+          const styleWithoutSemicolon = style.replace(";", "");
+          return [
+            styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`),
+            styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)
+          ];
+        });
+      case "safe-offset-*":
+        return styles.flatMap((style) => {
+          const styleWithoutSemicolon = style.replace(";", "");
+          return [
+            styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
+            styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)
+          ];
+        });
+      default:
+        safeAreaType;
+        return [];
     }
   };
   types.forEach((type) => {
     sides.forEach((side) => {
-      const styleName = type === "m" ? "margin" : "padding";
       const insets = getInsetsForSide(side);
-      const styles = insets.map((inset) => `${styleName}-${inset}: env(safe-area-inset-${inset});`);
-      const safeStyles = styles.flatMap((style) => {
-        const styleWithoutSemicolon = style.replace(";", "");
-        return [
-          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`),
-          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)
-        ];
-      });
-      const safeOffsetStyles = styles.flatMap((style) => {
-        const styleWithoutSemicolon = style.replace(";", "");
-        return [
-          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
-          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)
-        ];
+      const styles = insets.map((inset) => `${getStyleProperty(type, inset)}: env(safe-area-inset-${inset});`);
+      safeAreaTypes.forEach((safeAreaType) => {
+        const utilityName = getUtilityName(type, side, safeAreaType);
+        css += [
+          `@utility ${utilityName} {`,
+          ...getStylesForSafeAreaType(safeAreaType, styles).map((style) => `    ${style}`),
+          "}",
+          "",
+          ""
+        ].join("\n");
       });
-      css += `
-                @utility ${type}${side}-safe {
-                    ${styles.join("\n    ")}
-                }
-                
-                @utility ${type}${side}-safe-or-* {
-                    ${safeStyles.join("\n    ")}
-                }
-                
-                @utility ${type}${side}-safe-offset-* {
-                    ${safeOffsetStyles.join("\n    ")}
-                }
-            `;
     });
   });
-  return css.replaceAll("        ", "").trim() + "\n";
+  return css.slice(0, -1);
 };

package/dist/shared/{uniwind.D8_HBWsJ.mjs → uniwind.BiEpLI6n.mjs}

@@ -76,68 +76,91 @@ const processFunctions = {
   hairlineWidth: () => ONE_PX
 };
 
-const types = ["m", "p"];
-const sides = ["", "x", "y", "t", "b", "l", "r"];
+const types = ["margin", "padding", "inset"];
+const sides = ["inset", "x", "y", "top", "bottom", "left", "right"];
+const safeAreaTypes = ["safe", "safe-or-*", "safe-offset-*"];
 const spacing = "--spacing(--value(integer))";
 const length = "--value([length])";
 const generateCSSForInsets = () => {
   let css = `@utility h-screen-safe {
     height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
 }
+
 `;
   const getInsetsForSide = (side) => {
     switch (side) {
-      case "t":
+      case "top":
         return ["top"];
-      case "b":
+      case "bottom":
         return ["bottom"];
-      case "l":
+      case "left":
         return ["left"];
-      case "r":
+      case "right":
         return ["right"];
       case "x":
         return ["left", "right"];
       case "y":
         return ["top", "bottom"];
-      default:
+      case "inset":
         return ["top", "bottom", "left", "right"];
+      default:
+        return [];
+    }
+  };
+  const getUtilityName = (typeName, side, safeAreaType) => {
+    if (typeName === "inset") {
+      return `${side}-${safeAreaType}`;
+    }
+    const sideSuffix = side === "inset" ? "" : side.at(0);
+    return `${typeName.at(0)}${sideSuffix}-${safeAreaType}`;
+  };
+  const getStyleProperty = (typeName, inset) => {
+    if (typeName === "inset") {
+      return inset;
+    }
+    return `${typeName}-${inset}`;
+  };
+  const getStylesForSafeAreaType = (safeAreaType, styles) => {
+    switch (safeAreaType) {
+      case "safe":
+        return styles;
+      case "safe-or-*":
+        return styles.flatMap((style) => {
+          const styleWithoutSemicolon = style.replace(";", "");
+          return [
+            styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`),
+            styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)
+          ];
+        });
+      case "safe-offset-*":
+        return styles.flatMap((style) => {
+          const styleWithoutSemicolon = style.replace(";", "");
+          return [
+            styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
+            styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)
+          ];
+        });
+      default:
+        return [];
     }
   };
   types.forEach((type) => {
     sides.forEach((side) => {
-      const styleName = type === "m" ? "margin" : "padding";
       const insets = getInsetsForSide(side);
-      const styles = insets.map((inset) => `${styleName}-${inset}: env(safe-area-inset-${inset});`);
-      const safeStyles = styles.flatMap((style) => {
-        const styleWithoutSemicolon = style.replace(";", "");
-        return [
-          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`),
-          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)
-        ];
-      });
-      const safeOffsetStyles = styles.flatMap((style) => {
-        const styleWithoutSemicolon = style.replace(";", "");
-        return [
-          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
-          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)
-        ];
+      const styles = insets.map((inset) => `${getStyleProperty(type, inset)}: env(safe-area-inset-${inset});`);
+      safeAreaTypes.forEach((safeAreaType) => {
+        const utilityName = getUtilityName(type, side, safeAreaType);
+        css += [
+          `@utility ${utilityName} {`,
+          ...getStylesForSafeAreaType(safeAreaType, styles).map((style) => `    ${style}`),
+          "}",
+          "",
+          ""
+        ].join("\n");
       });
-      css += `
-                @utility ${type}${side}-safe {
-                    ${styles.join("\n    ")}
-                }
-                
-                @utility ${type}${side}-safe-or-* {
-                    ${safeStyles.join("\n    ")}
-                }
-                
-                @utility ${type}${side}-safe-offset-* {
-                    ${safeOffsetStyles.join("\n    ")}
-                }
-            `;
     });
   });
-  return css.replaceAll("        ", "").trim() + "\n";
+  return css.slice(0, -1);
 };
 
 const readFileSafe = (filePath) => {

package/dist/shared/{uniwind.DeQhDtT7.cjs → uniwind.DWS2R6_d.cjs}

@@ -83,68 +83,91 @@ const processFunctions = {
   hairlineWidth: () => ONE_PX
 };
 
-const types = ["m", "p"];
-const sides = ["", "x", "y", "t", "b", "l", "r"];
+const types = ["margin", "padding", "inset"];
+const sides = ["inset", "x", "y", "top", "bottom", "left", "right"];
+const safeAreaTypes = ["safe", "safe-or-*", "safe-offset-*"];
 const spacing = "--spacing(--value(integer))";
 const length = "--value([length])";
 const generateCSSForInsets = () => {
   let css = `@utility h-screen-safe {
     height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
 }
+
 `;
   const getInsetsForSide = (side) => {
     switch (side) {
-      case "t":
+      case "top":
         return ["top"];
-      case "b":
+      case "bottom":
         return ["bottom"];
-      case "l":
+      case "left":
         return ["left"];
-      case "r":
+      case "right":
         return ["right"];
       case "x":
         return ["left", "right"];
       case "y":
         return ["top", "bottom"];
-      default:
+      case "inset":
         return ["top", "bottom", "left", "right"];
+      default:
+        return [];
+    }
+  };
+  const getUtilityName = (typeName, side, safeAreaType) => {
+    if (typeName === "inset") {
+      return `${side}-${safeAreaType}`;
+    }
+    const sideSuffix = side === "inset" ? "" : side.at(0);
+    return `${typeName.at(0)}${sideSuffix}-${safeAreaType}`;
+  };
+  const getStyleProperty = (typeName, inset) => {
+    if (typeName === "inset") {
+      return inset;
+    }
+    return `${typeName}-${inset}`;
+  };
+  const getStylesForSafeAreaType = (safeAreaType, styles) => {
+    switch (safeAreaType) {
+      case "safe":
+        return styles;
+      case "safe-or-*":
+        return styles.flatMap((style) => {
+          const styleWithoutSemicolon = style.replace(";", "");
+          return [
+            styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`),
+            styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)
+          ];
+        });
+      case "safe-offset-*":
+        return styles.flatMap((style) => {
+          const styleWithoutSemicolon = style.replace(";", "");
+          return [
+            styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
+            styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)
+          ];
+        });
+      default:
+        return [];
     }
   };
   types.forEach((type) => {
     sides.forEach((side) => {
-      const styleName = type === "m" ? "margin" : "padding";
       const insets = getInsetsForSide(side);
-      const styles = insets.map((inset) => `${styleName}-${inset}: env(safe-area-inset-${inset});`);
-      const safeStyles = styles.flatMap((style) => {
-        const styleWithoutSemicolon = style.replace(";", "");
-        return [
-          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`),
-          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)
-        ];
-      });
-      const safeOffsetStyles = styles.flatMap((style) => {
-        const styleWithoutSemicolon = style.replace(";", "");
-        return [
-          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
-          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)
-        ];
+      const styles = insets.map((inset) => `${getStyleProperty(type, inset)}: env(safe-area-inset-${inset});`);
+      safeAreaTypes.forEach((safeAreaType) => {
+        const utilityName = getUtilityName(type, side, safeAreaType);
+        css += [
+          `@utility ${utilityName} {`,
+          ...getStylesForSafeAreaType(safeAreaType, styles).map((style) => `    ${style}`),
+          "}",
+          "",
+          ""
+        ].join("\n");
       });
-      css += `
-                @utility ${type}${side}-safe {
-                    ${styles.join("\n    ")}
-                }
-                
-                @utility ${type}${side}-safe-or-* {
-                    ${safeStyles.join("\n    ")}
-                }
-                
-                @utility ${type}${side}-safe-offset-* {
-                    ${safeOffsetStyles.join("\n    ")}
-                }
-            `;
     });
   });
-  return css.replaceAll("        ", "").trim() + "\n";
+  return css.slice(0, -1);
 };
 
 const readFileSafe = (filePath) => {

package/dist/vite/index.cjs

@@ -3,7 +3,7 @@
 const node = require('@tailwindcss/node');
 const path = require('path');
 const common = require('../shared/uniwind.BDoX4wlN.cjs');
-const stringifyThemes = require('../shared/uniwind.DeQhDtT7.cjs');
+const stringifyThemes = require('../shared/uniwind.DWS2R6_d.cjs');
 require('fs');
 require('lightningcss');
 

package/dist/vite/index.mjs

@@ -1,7 +1,7 @@
 import { normalizePath } from '@tailwindcss/node';
 import path from 'path';
 import { u as uniq, n as name } from '../shared/uniwind.DhluOugg.mjs';
-import { s as stringifyThemes, p as processFunctions, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.D8_HBWsJ.mjs';
+import { s as stringifyThemes, p as processFunctions, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.BiEpLI6n.mjs';
 import 'fs';
 import 'lightningcss';
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "private": false,
     "name": "@niibase/uniwind",
-    "version": "1.1.4",
+    "version": "1.1.5",
     "description": "The fastest Tailwind bindings for React Native",
     "homepage": "https://uniwind.dev",
     "author": "Unistack",

package/readme.md

@@ -1,4 +1,4 @@
-[<img alt="uniwind" src="assets/banner.png">](https://uniwind.dev/)
+[<img alt="uniwind" src="https://raw.githubusercontent.com/uni-stack/uniwind/main/assets/banner.png">](https://uniwind.dev/)
 
 <div align="center">
     <p align="center">

package/src/css/insets.ts

@@ -1,73 +1,106 @@
-const types = ['m', 'p'] as const
-const sides = ['', 'x', 'y', 't', 'b', 'l', 'r'] as const
+const types = ['margin', 'padding', 'inset'] as const
+const sides = ['inset', 'x', 'y', 'top', 'bottom', 'left', 'right'] as const
+const safeAreaTypes = ['safe', 'safe-or-*', 'safe-offset-*'] as const
 const spacing = '--spacing(--value(integer))'
 const length = '--value([length])'
 
 type Side = (typeof sides)[number]
+type TypeName = (typeof types)[number]
+type SafeAreaType = (typeof safeAreaTypes)[number]
+type Inset = 'top' | 'bottom' | 'left' | 'right'
 
 export const generateCSSForInsets = () => {
     let css = `@utility h-screen-safe {
     height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
-}\n`
+}\n\n`
 
-    const getInsetsForSide = (side: Side) => {
+    const getInsetsForSide = (side: Side): Array<Inset> => {
         switch (side) {
-            case 't':
+            case 'top':
                 return ['top']
-            case 'b':
+            case 'bottom':
                 return ['bottom']
-            case 'l':
+            case 'left':
                 return ['left']
-            case 'r':
+            case 'right':
                 return ['right']
             case 'x':
                 return ['left', 'right']
             case 'y':
                 return ['top', 'bottom']
-            default:
+            case 'inset':
                 return ['top', 'bottom', 'left', 'right']
+            default:
+                side satisfies never
+                return []
+        }
+    }
+
+    const getUtilityName = (typeName: TypeName, side: Side, safeAreaType: SafeAreaType) => {
+        if (typeName === 'inset') {
+            return `${side}-${safeAreaType}`
+        }
+
+        const sideSuffix = side === 'inset' ? '' : side.at(0)
+
+        return `${typeName.at(0)}${sideSuffix}-${safeAreaType}`
+    }
+
+    const getStyleProperty = (typeName: TypeName, inset: Inset) => {
+        if (typeName === 'inset') {
+            return inset
+        }
+
+        return `${typeName}-${inset}`
+    }
+
+    const getStylesForSafeAreaType = (safeAreaType: SafeAreaType, styles: Array<string>) => {
+        switch (safeAreaType) {
+            case 'safe':
+                return styles
+            case 'safe-or-*':
+                return styles.flatMap(style => {
+                    const styleWithoutSemicolon = style.replace(';', '')
+
+                    return [
+                        styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`),
+                        styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`),
+                    ]
+                })
+            case 'safe-offset-*':
+                return styles.flatMap(style => {
+                    const styleWithoutSemicolon = style.replace(';', '')
+
+                    return [
+                        styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
+                        styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`),
+                    ]
+                })
+            default:
+                safeAreaType satisfies never
+                return []
         }
     }
 
     types.forEach(type => {
         sides.forEach(side => {
-            const styleName = type === 'm' ? 'margin' : 'padding'
             const insets = getInsetsForSide(side)
-            const styles = insets.map(inset => `${styleName}-${inset}: env(safe-area-inset-${inset});`)
-            const safeStyles = styles.flatMap(style => {
-                const styleWithoutSemicolon = style.replace(';', '')
+            const styles = insets.map(inset => `${getStyleProperty(type, inset)}: env(safe-area-inset-${inset});`)
 
-                return [
-                    styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`),
-                    styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`),
-                ]
-            })
-            const safeOffsetStyles = styles.flatMap(style => {
-                const styleWithoutSemicolon = style.replace(';', '')
+            safeAreaTypes.forEach(safeAreaType => {
+                const utilityName = getUtilityName(type, side, safeAreaType)
 
-                return [
-                    styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
-                    styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`),
-                ]
+                css += [
+                    `@utility ${utilityName} {`,
+                    ...getStylesForSafeAreaType(safeAreaType, styles).map(style => `    ${style}`),
+                    '}',
+                    '',
+                    '',
+                ].join('\n')
             })
-
-            css += `
-                @utility ${type}${side}-safe {
-                    ${styles.join('\n    ')}
-                }
-                
-                @utility ${type}${side}-safe-or-* {
-                    ${safeStyles.join('\n    ')}
-                }
-                
-                @utility ${type}${side}-safe-offset-* {
-                    ${safeOffsetStyles.join('\n    ')}
-                }
-            `
         })
     })
 
-    // Remove all 8 spaces groups
-    // eslint-disable-next-line prefer-template
-    return css.replaceAll('        ', '').trim() + '\n'
+    // Remove the last newline character
+    return css.slice(0, -1)
 }

package/src/metro/resolvers.ts

@@ -48,11 +48,10 @@ export const nativeResolver = (extraComponents: Record<string, string>) =>
 }: ResolverConfig) => {
     const resolution = resolver(context, moduleName, platform)
     const isInternal = isFromThisModule(context.originModulePath)
-    const isReactNativeIndex = context.originModulePath.endsWith(
-        `react-native${sep}index.js`,
-    )
+    const isFromReactNative = context.originModulePath.includes(`${sep}react-native${sep}`)
+        || context.originModulePath.includes(`${sep}@react-native${sep}`)
 
-    if (isInternal || resolution.type !== 'sourceFile' || isReactNativeIndex) {
+    if (isInternal || resolution.type !== 'sourceFile' || isFromReactNative) {
         return resolution
     }
 

package/uniwind.css

@@ -35,7 +35,7 @@
     margin-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
     margin-right: calc(env(safe-area-inset-right) + --value([length]));
 }
-    
+
 @utility mx-safe {
     margin-left: env(safe-area-inset-left);
     margin-right: env(safe-area-inset-right);
@@ -54,7 +54,7 @@
     margin-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
     margin-right: calc(env(safe-area-inset-right) + --value([length]));
 }
-    
+
 @utility my-safe {
     margin-top: env(safe-area-inset-top);
     margin-bottom: env(safe-area-inset-bottom);
@@ -73,7 +73,7 @@
     margin-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
     margin-bottom: calc(env(safe-area-inset-bottom) + --value([length]));
 }
-    
+
 @utility mt-safe {
     margin-top: env(safe-area-inset-top);
 }
@@ -87,7 +87,7 @@
     margin-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
     margin-top: calc(env(safe-area-inset-top) + --value([length]));
 }
-    
+
 @utility mb-safe {
     margin-bottom: env(safe-area-inset-bottom);
 }
@@ -101,7 +101,7 @@
     margin-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
     margin-bottom: calc(env(safe-area-inset-bottom) + --value([length]));
 }
-    
+
 @utility ml-safe {
     margin-left: env(safe-area-inset-left);
 }
@@ -115,7 +115,7 @@
     margin-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
     margin-left: calc(env(safe-area-inset-left) + --value([length]));
 }
-    
+
 @utility mr-safe {
     margin-right: env(safe-area-inset-right);
 }
@@ -129,7 +129,7 @@
     margin-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
     margin-right: calc(env(safe-area-inset-right) + --value([length]));
 }
-    
+
 @utility p-safe {
     padding-top: env(safe-area-inset-top);
     padding-bottom: env(safe-area-inset-bottom);
@@ -158,7 +158,7 @@
     padding-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
     padding-right: calc(env(safe-area-inset-right) + --value([length]));
 }
-    
+
 @utility px-safe {
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
@@ -177,7 +177,7 @@
     padding-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
     padding-right: calc(env(safe-area-inset-right) + --value([length]));
 }
-    
+
 @utility py-safe {
     padding-top: env(safe-area-inset-top);
     padding-bottom: env(safe-area-inset-bottom);
@@ -196,7 +196,7 @@
     padding-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
     padding-bottom: calc(env(safe-area-inset-bottom) + --value([length]));
 }
-    
+
 @utility pt-safe {
     padding-top: env(safe-area-inset-top);
 }
@@ -210,7 +210,7 @@
     padding-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
     padding-top: calc(env(safe-area-inset-top) + --value([length]));
 }
-    
+
 @utility pb-safe {
     padding-bottom: env(safe-area-inset-bottom);
 }
@@ -224,7 +224,7 @@
     padding-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
     padding-bottom: calc(env(safe-area-inset-bottom) + --value([length]));
 }
-    
+
 @utility pl-safe {
     padding-left: env(safe-area-inset-left);
 }
@@ -238,7 +238,7 @@
     padding-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
     padding-left: calc(env(safe-area-inset-left) + --value([length]));
 }
-    
+
 @utility pr-safe {
     padding-right: env(safe-area-inset-right);
 }
@@ -253,5 +253,128 @@
     padding-right: calc(env(safe-area-inset-right) + --value([length]));
 }
 
+@utility inset-safe {
+    top: env(safe-area-inset-top);
+    bottom: env(safe-area-inset-bottom);
+    left: env(safe-area-inset-left);
+    right: env(safe-area-inset-right);
+}
+
+@utility inset-safe-or-* {
+    top: max(env(safe-area-inset-top), --spacing(--value(integer)));
+    top: max(env(safe-area-inset-top), --value([length]));
+    bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
+    bottom: max(env(safe-area-inset-bottom), --value([length]));
+    left: max(env(safe-area-inset-left), --spacing(--value(integer)));
+    left: max(env(safe-area-inset-left), --value([length]));
+    right: max(env(safe-area-inset-right), --spacing(--value(integer)));
+    right: max(env(safe-area-inset-right), --value([length]));
+}
+
+@utility inset-safe-offset-* {
+    top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
+    top: calc(env(safe-area-inset-top) + --value([length]));
+    bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
+    bottom: calc(env(safe-area-inset-bottom) + --value([length]));
+    left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
+    left: calc(env(safe-area-inset-left) + --value([length]));
+    right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
+    right: calc(env(safe-area-inset-right) + --value([length]));
+}
+
+@utility x-safe {
+    left: env(safe-area-inset-left);
+    right: env(safe-area-inset-right);
+}
+
+@utility x-safe-or-* {
+    left: max(env(safe-area-inset-left), --spacing(--value(integer)));
+    left: max(env(safe-area-inset-left), --value([length]));
+    right: max(env(safe-area-inset-right), --spacing(--value(integer)));
+    right: max(env(safe-area-inset-right), --value([length]));
+}
+
+@utility x-safe-offset-* {
+    left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
+    left: calc(env(safe-area-inset-left) + --value([length]));
+    right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
+    right: calc(env(safe-area-inset-right) + --value([length]));
+}
+
+@utility y-safe {
+    top: env(safe-area-inset-top);
+    bottom: env(safe-area-inset-bottom);
+}
+
+@utility y-safe-or-* {
+    top: max(env(safe-area-inset-top), --spacing(--value(integer)));
+    top: max(env(safe-area-inset-top), --value([length]));
+    bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
+    bottom: max(env(safe-area-inset-bottom), --value([length]));
+}
+
+@utility y-safe-offset-* {
+    top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
+    top: calc(env(safe-area-inset-top) + --value([length]));
+    bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
+    bottom: calc(env(safe-area-inset-bottom) + --value([length]));
+}
+
+@utility top-safe {
+    top: env(safe-area-inset-top);
+}
+
+@utility top-safe-or-* {
+    top: max(env(safe-area-inset-top), --spacing(--value(integer)));
+    top: max(env(safe-area-inset-top), --value([length]));
+}
+
+@utility top-safe-offset-* {
+    top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
+    top: calc(env(safe-area-inset-top) + --value([length]));
+}
+
+@utility bottom-safe {
+    bottom: env(safe-area-inset-bottom);
+}
+
+@utility bottom-safe-or-* {
+    bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
+    bottom: max(env(safe-area-inset-bottom), --value([length]));
+}
+
+@utility bottom-safe-offset-* {
+    bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
+    bottom: calc(env(safe-area-inset-bottom) + --value([length]));
+}
+
+@utility left-safe {
+    left: env(safe-area-inset-left);
+}
+
+@utility left-safe-or-* {
+    left: max(env(safe-area-inset-left), --spacing(--value(integer)));
+    left: max(env(safe-area-inset-left), --value([length]));
+}
+
+@utility left-safe-offset-* {
+    left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
+    left: calc(env(safe-area-inset-left) + --value([length]));
+}
+
+@utility right-safe {
+    right: env(safe-area-inset-right);
+}
+
+@utility right-safe-or-* {
+    right: max(env(safe-area-inset-right), --spacing(--value(integer)));
+    right: max(env(safe-area-inset-right), --value([length]));
+}
+
+@utility right-safe-offset-* {
+    right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
+    right: calc(env(safe-area-inset-right) + --value([length]));
+}
+
 @custom-variant light (&:where(.light, .light *));
-@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant dark (&:where(.dark, .dark *));