Feat/ph banner

apps/starter-kit-expo/components/ui/button/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '@gluestack-ui/utils/nativewind-utils';
 import { cssInterop } from 'nativewind';
 import { ActivityIndicator, Pressable, Text, View } from 'react-native';
-import type { VariantProps } from 'tailwind-variants';
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
 import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator';
 
 const SCOPE = 'BUTTON';

apps/starter-kit-expo/package.json

@@ -17,8 +17,8 @@
   "dependencies": {
     "@expo/html-elements": "^0.12.5",
     "@expo/vector-icons": "^14.1.0",
-    "@gluestack-ui/core": "3.0.2",
-    "@gluestack-ui/utils": "3.0.2",
+    "@gluestack-ui/core": "^3.0.4",
+    "@gluestack-ui/utils": "^3.0.5",
     "@gorhom/bottom-sheet": "^5.0.0-alpha.11",
     "@legendapp/motion": "^2.4.0",
     "@react-aria/utils": "^3.29.0",

apps/starter-kit-expo/yarn.lock

@@ -1136,28 +1136,18 @@
   dependencies:
     tslib "^2.8.0"
 
-"@gluestack-ui/core@^1.2.10":
-  version "1.2.10"
-  resolved "https://registry.npmjs.org/@gluestack-ui/core/-/core-1.2.10.tgz#2be465638e2098fb54c9a5274258ee430973f568"
-  integrity sha512-ilHiV/vifimZ+1Vo8PIJ8hnMgO7xosEDKl+YwELlVeaAUFBOeN+kj0jEERJy6NxKBEVZeW7lGYFaJ01fw4xDkg==
+"@gluestack-ui/core@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/@gluestack-ui/core/-/core-3.0.4.tgz#426eea6cd2aebd5e3c11c30fe4231cb4d6260e11"
+  integrity sha512-Xai2E/iumjtVTVM/0klYcdfDAuS3fOJNOIvl8aU4x45bv2EH0aS/iGhAMiU1C1SQDY3uVn8fck4FFJaJNuEAfg==
   dependencies:
-    "@gluestack-ui/utils" "*"
+    "@gluestack-ui/utils" "^3.0.5"
     react-native-svg "^15.12.0"
 
-"@gluestack-ui/utils@*":
-  version "0.1.16"
-  resolved "https://registry.npmjs.org/@gluestack-ui/utils/-/utils-0.1.16.tgz#a1d0a825483a49496061b2ad546fb39e06f78888"
-  integrity sha512-23ADKc1msn8ST2pQNfc8nPpM8HyFFi01cKN2MTmj6LMMJUzmBMJxPa3jOE66IQUuowO7V0ZQ5G8+mvJrTB+H3w==
-  dependencies:
-    dom-helpers "^6.0.1"
-    react-aria "^3.41.1"
-    react-stately "^3.39.0"
-    tailwind-variants "0.1.14"
-
-"@gluestack-ui/utils@^1.0.23":
-  version "1.0.23"
-  resolved "https://registry.npmjs.org/@gluestack-ui/utils/-/utils-1.0.23.tgz#365a114b6bf643712f28c0342962e87e805ae3fa"
-  integrity sha512-Kk9oXlpPlhRAy+a3xwsHxDWpbEfxYF5vXTaaaMBm/zi+rIT3i/6MOarT6s77hr4mhX4iYN85ANFxophmtDj7jQ==
+"@gluestack-ui/utils@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.npmjs.org/@gluestack-ui/utils/-/utils-3.0.5.tgz#22b553d9e9586269673bfb8bfb324686d1860b1a"
+  integrity sha512-3CxHP7c5OVOw37FRKP4RFmQtOhYeTXFkZAevU44Aql0HIi1NjTnYXc3WJhuW9cBhKJsYbV0dzKkMKIWZ1fS8Gg==
   dependencies:
     dom-helpers "^6.0.1"
     react-aria "^3.41.1"

apps/starter-kit-next/components/ui/button/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '@gluestack-ui/utils/nativewind-utils';
 import { cssInterop } from 'nativewind';
 import { ActivityIndicator, Pressable, Text, View } from 'react-native';
-import type { VariantProps } from 'tailwind-variants';
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
 import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator';
 
 const SCOPE = 'BUTTON';

packages/gluestack-core/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @gluestack-ui/core
 
+## 3.0.5
+
+### Patch Changes
+
+- chore: updated utils version
+
+## 3.0.4
+
+### Patch Changes
+
+- chore: bumped utils version
+- Updated dependencies
+  - @gluestack-ui/utils@3.0.5
+
+## 3.0.3
+
+### Patch Changes
+
+- chore: updated utils version
+
 ## 3.0.2
 
 ### Patch Changes

packages/gluestack-core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-ui/core",
   "description": "Universal UI components for React Native, Expo, and Next.js",
-  "version": "3.0.2",
+  "version": "3.0.5",
   "main": "./lib/esm/index.js",
   "module": "./lib/esm/index.js",
   "types": "./lib/esm/index.d.ts",
@@ -157,7 +157,7 @@
     }
   },
   "dependencies": {
-    "@gluestack-ui/utils": "^3.0.2",
+    "@gluestack-ui/utils": "^3.0.6",
     "react-native-svg": "^15.12.0"
   },
   "peerDependencies": {

packages/gluestack-ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 ## 0.4.9-alpha.0 (2023-07-21)
 
+## 3.0.4
+
+### Patch Changes
+
+- fix: fixed global.css imports
+
 ## 3.0.3
 
 ### Patch Changes

packages/gluestack-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gluestack-ui",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "main": "dist/index.js",
   "bin": {
     "gluestack-ui": "./dist/index.js"

packages/gluestack-ui/src/util/init/modify-layout.ts

@@ -237,54 +237,65 @@ async function modifyReactNativeLayout(
  */
 function addImportsToFile(content: string, newImports: string): string {
   // Split new imports into individual import statements
-  const newImportLines = newImports.split('\n').filter(line => line.trim());
-  
+  const newImportLines = newImports.split('\n').filter((line) => line.trim());
+
   // Find existing imports
   const importRegex = /^import\s+.*?;?\s*$/gm;
   const existingImports = content.match(importRegex) || [];
-  
+
   // Check which imports already exist to avoid duplicates
   const importsToAdd: string[] = [];
-
-  newImportLines.forEach(newImport => {
+  const cssBareImportRegex = /^import\s+['"]([^'\"]+)['"];?\s*$/;
+
+  newImportLines.forEach((newImport) => {
     const newImportTrimmed = newImport.trim();
-    
+
     // Skip empty lines
     if (!newImportTrimmed) return;
-    
+
     // Extract the import path for comparison
     const importPathMatch = newImportTrimmed.match(/from\s+['"]([^'"]+)['"]/);
     const importPath = importPathMatch ? importPathMatch[1] : '';
-    
+
     // For CSS imports, check the import path directly
-    const isCssImport = newImportTrimmed.match(/^import\s+['"][^'"]+['"];?\s*$/);
-
+    const isCssImport = cssBareImportRegex.test(newImportTrimmed);
+    const newCssPath = isCssImport
+      ? newImportTrimmed.match(cssBareImportRegex)?.[1] || ''
+      : '';
+
     // Extract imported items for more precise matching
     const importItemsMatch = newImportTrimmed.match(/import\s+(.+?)\s+from/);
     const importItems = importItemsMatch ? importItemsMatch[1].trim() : '';
-    
+
     // Check if this import already exists
-    const isDuplicate = existingImports.some(existingImport => {
+    const isDuplicate = existingImports.some((existingImport) => {
       const existingPathMatch = existingImport.match(/from\s+['"]([^'"]+)['"]/);
       const existingPath = existingPathMatch ? existingPathMatch[1] : '';
-      
+
       // For CSS imports, just compare paths
       if (isCssImport) {
-        const existingIsCssImport = existingImport.match(/^import\s+['"][^'"]+['"];?\s*$/);
-        return existingIsCssImport && existingPath === importPath;
+        const existingCssMatch = existingImport.match(cssBareImportRegex);
+        const existingIsCssImport = Boolean(existingCssMatch);
+        const existingCssPath = existingCssMatch ? existingCssMatch[1] : '';
+        return existingIsCssImport && existingCssPath === newCssPath;
       }
-      
+
       const existingItemsMatch = existingImport.match(/import\s+(.+?)\s+from/);
-      const existingItems = existingItemsMatch ? existingItemsMatch[1].trim() : '';
-
+      const existingItems = existingItemsMatch
+        ? existingItemsMatch[1].trim()
+        : '';
+
       // Check if same path and similar import structure
-      return existingPath === importPath && (
-        existingItems === importItems ||
-        (importItems.includes('GluestackUIProvider') && existingItems.includes('GluestackUIProvider')) ||
-        (importItems.includes('StyledJsxRegistry') && existingItems.includes('StyledJsxRegistry'))
+      return (
+        existingPath === importPath &&
+        (existingItems === importItems ||
+          (importItems.includes('GluestackUIProvider') &&
+            existingItems.includes('GluestackUIProvider')) ||
+          (importItems.includes('StyledJsxRegistry') &&
+            existingItems.includes('StyledJsxRegistry')))
       );
     });
-    
+
     if (!isDuplicate) {
       importsToAdd.push(newImportTrimmed);
     }

packages/gluestack-utils/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @gluestack-ui/utils
 
+## 3.0.6
+
+### Patch Changes
+
+- chore: try to figure out types issue
+
+## 3.0.5
+
+### Patch Changes
+
+- chore: updated tsconfig
+
+## 3.0.4
+
+### Patch Changes
+
+- fix: tva config
+
 ## 3.0.3
 
 ### Patch Changes

packages/gluestack-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/utils",
-  "version": "3.0.3",
+  "version": "3.0.6",
   "description": "Utility functions and hooks for gluestack-ui",
   "main": "./lib/esm/index.js",
   "module": "./lib/esm/index.js",
@@ -95,8 +95,12 @@
     "expo",
     "nextjs",
     "cross-platform",
-    "utilities",
+    "utils",
     "hooks",
-    "aria"
+    "aria",
+    "nativewind",
+    "gluestack-ui",
+    "universal",
+    "typescript"
   ]
 }

packages/gluestack-utils/src/nativewind-utils/types.ts

@@ -37,7 +37,7 @@ export type TVA = {
       ES extends undefined ? {} : ES
     >,
     EV extends TVVariants<ES, B, E['variants'], ES> = E['variants'],
-    ES extends TVSlots = E['slots'] extends TVSlots ? E['slots'] : undefined,
+    ES extends TVSlots = E['slots'] extends TVSlots ? E['slots'] : undefined
   >(
     options: {
       /**
@@ -94,7 +94,7 @@ export type TVReturnType<
   EV extends TVVariants<ES>,
   ES extends TVSlots,
   // @ts-expect-error
-  E extends TVReturnType = undefined,
+  E extends TVReturnType = undefined
 > = {
   (
     props?: TVProps<V, S, C, EV, ES> & {
@@ -125,7 +125,7 @@ type HasSlots<S extends TVSlots, ES extends TVSlots> = S extends undefined
 
 type TVSlotsWithBase<
   S extends TVSlots,
-  B extends ClassValue,
+  B extends ClassValue
 > = B extends undefined ? keyof S : keyof S | TVBaseName;
 
 type TVBaseName = 'base';
@@ -135,4 +135,4 @@ export type VariantProps<T extends (...args: any) => any> = Omit<
     className?: string;
   },
   'parentVariants'
->;
+>;

packages/gluestack-utils/src/nativewind-utils/utils/deepMerge.ts

@@ -21,4 +21,4 @@ export function deepMergeObjects(...objects: any) {
     }
     return prev;
   }, {});
-}
+}

packages/gluestack-utils/src/nativewind-utils/utils/index.ts

@@ -62,4 +62,4 @@ export function extractDataClassName(className: string, states: any) {
   });
 
   return classNamesFinal;
-}
+}

src/components/ui/button/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '@gluestack-ui/utils/nativewind-utils';
 import { cssInterop } from 'nativewind';
 import { ActivityIndicator, Pressable, Text, View } from 'react-native';
-import type { VariantProps } from 'tailwind-variants';
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
 import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator';
 
 const SCOPE = 'BUTTON';
@@ -420,8 +420,8 @@ const ButtonGroup = React.forwardRef<
         className={buttonGroupStyle({
           class: className,
           space,
-          isAttached: isAttached as boolean,
-          flexDirection: flexDirection as any,
+          isAttached,
+          flexDirection,
         })}
         {...props}
         ref={ref}