Merge pull request #3068 from gluestack/feat/update-npm-v

Sanchitv3 · web-flow · commit 3356c7b1fb09 · 2025-07-29T18:21:27.000+05:30
Feat/update npm v
diff --git a/PREVIEW_DEPLOYMENT.md b/PREVIEW_DEPLOYMENT.md
diff --git a/apps/starter-kit-expo/components/ui/alert/index.tsx b/apps/starter-kit-expo/components/ui/alert/index.tsx
@@ -9,7 +9,7 @@ import {
 import React from 'react';
 import { cssInterop } from 'nativewind';
 import type { VariantProps } from '@gluestack-ui-nightly/utils/nativewind-utils';
-import { PrimitiveIcon, UIIcon } from '@/components/ui/icon/creator';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui-nightly/core/icon/creator';
 
 const SCOPE = 'ALERT';
 
diff --git a/apps/starter-kit-expo/components/ui/badge/index.tsx b/apps/starter-kit-expo/components/ui/badge/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { Text, View } from 'react-native';
-import { PrimitiveIcon, UIIcon } from '@/components/ui/icon/creator';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui-nightly/core/icon/creator';
 import { tva } from '@gluestack-ui-nightly/utils/nativewind-utils';
 import {
   withStyleContext,
diff --git a/apps/starter-kit-expo/components/ui/icon/index.tsx b/apps/starter-kit-expo/components/ui/icon/index.tsx
@@ -18,7 +18,7 @@ export const UIIcon = createIcon({
 >;
 
 const iconStyle = tva({
-  base: 'text-typography-950 fill-none pointer-events-none',
+  base: 'text-typography-950 fill-none stroke-current pointer-events-none',
   variants: {
     size: {
       '2xs': 'h-3 w-3',
@@ -38,7 +38,7 @@ cssInterop(UIIcon, {
       height: true,
       width: true,
       fill: true,
-      color: 'classNameColor',
+      color: true,
       stroke: true,
     },
   },
@@ -50,11 +50,17 @@ type IIConProps = IPrimitiveIcon &
 
 const Icon = React.forwardRef<React.ComponentRef<typeof UIIcon>, IIConProps>(
   function Icon({ size = 'md', className, ...props }, ref) {
+    const iconProps = {
+      fill: 'none',
+      stroke: 'currentColor',
+      ...props,
+    };
+
     if (typeof size === 'number') {
       return (
         <UIIcon
           ref={ref}
-          {...props}
+          {...iconProps}
           className={iconStyle({ class: className })}
           size={size}
         />
@@ -66,15 +72,15 @@ const Icon = React.forwardRef<React.ComponentRef<typeof UIIcon>, IIConProps>(
       return (
         <UIIcon
           ref={ref}
-          {...props}
+          {...iconProps}
           className={iconStyle({ class: className })}
         />
       );
     }
     return (
       <UIIcon
         ref={ref}
-        {...props}
+        {...iconProps}
         className={iconStyle({ size, class: className })}
       />
     );
@@ -103,10 +109,16 @@ const createIconUI = ({ ...props }: ParameterTypes) => {
       React.ComponentPropsWithoutRef<typeof UIIconCreateIcon>,
     ref
   ) {
+    const iconProps = {
+      fill: 'none',
+      stroke: 'currentColor',
+      ...inComingProps,
+    };
+
     return (
       <UIIconCreateIcon
         ref={ref}
-        {...inComingProps}
+        {...iconProps}
         className={iconStyle({ size, class: className })}
       />
     );
diff --git a/apps/starter-kit-expo/components/ui/link/index.tsx b/apps/starter-kit-expo/components/ui/link/index.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { createLink } from './creator';
+import { createLink } from '@gluestack-ui-nightly/core/link/creator';
 import { Pressable } from 'react-native';
 import { Text } from 'react-native';
 
diff --git a/apps/starter-kit-next/components/ui/alert/index.tsx b/apps/starter-kit-next/components/ui/alert/index.tsx
@@ -9,7 +9,7 @@ import {
 import React from 'react';
 import { cssInterop } from 'nativewind';
 import type { VariantProps } from '@gluestack-ui-nightly/utils/nativewind-utils';
-import { PrimitiveIcon, UIIcon } from '@/components/ui/icon/creator';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui-nightly/core/icon/creator';
 
 const SCOPE = 'ALERT';
 
diff --git a/apps/starter-kit-next/components/ui/badge/index.tsx b/apps/starter-kit-next/components/ui/badge/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { Text, View } from 'react-native';
-import { PrimitiveIcon, UIIcon } from '@/components/ui/icon/creator';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui-nightly/core/icon/creator';
 import { tva } from '@gluestack-ui-nightly/utils/nativewind-utils';
 import {
   withStyleContext,
diff --git a/apps/starter-kit-next/components/ui/gluestack-ui-provider/index.web.tsx b/apps/starter-kit-next/components/ui/gluestack-ui-provider/index.web.tsx
@@ -1,4 +1,3 @@
-// This is a Next.js 15 compatible version of the GluestackUIProvider
 'use client';
 import React, { useEffect, useLayoutEffect } from 'react';
 import { config } from './config';
@@ -7,6 +6,8 @@ import { ToastProvider } from '@gluestack-ui-nightly/core/toast/creator';
 import { setFlushStyles } from '@gluestack-ui-nightly/utils/nativewind-utils';
 import { script } from './script';
 
+export type ModeType = 'light' | 'dark' | 'system';
+
 const variableStyleTagId = 'nativewind-style';
 const createStyle = (styleTagId: string) => {
   const style = document.createElement('style');
@@ -22,7 +23,7 @@ export function GluestackUIProvider({
   mode = 'light',
   ...props
 }: {
-  mode?: 'light' | 'dark' | 'system';
+  mode?: ModeType;
   children?: React.ReactNode;
 }) {
   let cssVariablesWithMode = ``;
@@ -80,8 +81,16 @@ export function GluestackUIProvider({
   }, []);
 
   return (
-    <OverlayProvider>
-      <ToastProvider>{props.children}</ToastProvider>
-    </OverlayProvider>
+    <>
+      <script
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{
+          __html: `(${script.toString()})('${mode}')`,
+        }}
+      />
+      <OverlayProvider>
+        <ToastProvider>{props.children}</ToastProvider>
+      </OverlayProvider>
+    </>
   );
 }
diff --git a/apps/starter-kit-next/components/ui/icon/index.tsx b/apps/starter-kit-next/components/ui/icon/index.tsx
@@ -18,7 +18,7 @@ export const UIIcon = createIcon({
 >;
 
 const iconStyle = tva({
-  base: 'text-typography-950 fill-none pointer-events-none',
+  base: 'text-typography-950 fill-none stroke-current pointer-events-none',
   variants: {
     size: {
       '2xs': 'h-3 w-3',
@@ -38,7 +38,7 @@ cssInterop(UIIcon, {
       height: true,
       width: true,
       fill: true,
-      color: 'classNameColor',
+      color: true,
       stroke: true,
     },
   },
@@ -50,11 +50,17 @@ type IIConProps = IPrimitiveIcon &
 
 const Icon = React.forwardRef<React.ComponentRef<typeof UIIcon>, IIConProps>(
   function Icon({ size = 'md', className, ...props }, ref) {
+    const iconProps = {
+      fill: 'none',
+      stroke: 'currentColor',
+      ...props,
+    };
+
     if (typeof size === 'number') {
       return (
         <UIIcon
           ref={ref}
-          {...props}
+          {...iconProps}
           className={iconStyle({ class: className })}
           size={size}
         />
@@ -66,15 +72,15 @@ const Icon = React.forwardRef<React.ComponentRef<typeof UIIcon>, IIConProps>(
       return (
         <UIIcon
           ref={ref}
-          {...props}
+          {...iconProps}
           className={iconStyle({ class: className })}
         />
       );
     }
     return (
       <UIIcon
         ref={ref}
-        {...props}
+        {...iconProps}
         className={iconStyle({ size, class: className })}
       />
     );
@@ -103,10 +109,16 @@ const createIconUI = ({ ...props }: ParameterTypes) => {
       React.ComponentPropsWithoutRef<typeof UIIconCreateIcon>,
     ref
   ) {
+    const iconProps = {
+      fill: 'none',
+      stroke: 'currentColor',
+      ...inComingProps,
+    };
+
     return (
       <UIIconCreateIcon
         ref={ref}
-        {...inComingProps}
+        {...iconProps}
         className={iconStyle({ size, class: className })}
       />
     );
diff --git a/apps/starter-kit-next/components/ui/link/index.tsx b/apps/starter-kit-next/components/ui/link/index.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { createLink } from './creator';
+import { createLink } from '@gluestack-ui-nightly/core/link/creator';
 import { Pressable } from 'react-native';
 import { Text } from 'react-native';
 
diff --git a/package.json b/package.json
@@ -11,16 +11,18 @@
     "dev": "tsx --watch scripts/dev.ts",
     "dev:kitchen-sink": "tsx --watch scripts/dev.ts --mapper=kitchen-sink",
     "dev:website": "tsx --watch scripts/dev.ts --mapper=website",
+    "dev:starter-kits": "tsx --watch scripts/dev.ts --mapper=starter-kits",
     "sync": "tsx scripts/dev.ts --sync",
     "sync:kitchen-sink": "tsx scripts/dev.ts --mapper=kitchen-sink --sync",
     "sync:website": "tsx scripts/dev.ts --mapper=website --sync",
     "sync:website:alt": "ts-node scripts/dev.ts --mapper=website --sync",
+    "sync:starter-kits": "tsx scripts/dev.ts --mapper=starter-kits --sync",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,mdx}\"",
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md,mdx}\"",
     "build": "yarn build:packages",
     "build:packages": "yarn workspaces foreach -pt run build",
     "build:website": "cd apps/website && yarn build",
-    "link:create": "concurrently \"yarn link:create-utils\" \"sleep 10 && yarn link:create-core\"",
+    "link:create": "concurrently \"yarn link:create-utils\" \"sleep 15 && yarn link:create-core\"",
     "link:create-utils": "cd packages/gluestack-utils && yarn && yarn prepare && yalc publish && yarn dev",
     "link:create-core": "cd packages/gluestack-core && yarn && yarn prepare && yalc publish && yarn dev",
     "link:apps": "yarn link:apps-website && yarn link:apps-kitchen-sink",
@@ -30,8 +32,8 @@
     "unlink:apps-website": "cd apps/website && yalc remove @gluestack-ui-nightly/utils && yalc remove @gluestack-ui-nightly/core && rm -rf node_modules/@gluestack-ui-nightly && rm -rf .yalc",
     "unlink:apps-kitchen-sink": "cd apps/kitchen-sink && yalc remove @gluestack-ui-nightly/utils && yalc remove @gluestack-ui-nightly/core && rm -rf node_modules/@gluestack-ui-nightly && rm -rf .yalc",
     "update:starter-kit": "yarn update:starter-kit-next && yarn update:starter-kit-expo",
-    "update:starter-kit-next": "cd apps/starter-kit-next && yarn && yarn add @gluestack-ui-nightly/utils@latest @gluestack-ui-nightly/core@latest && npx gluestack-ui-nightly add --all && rm -rf package-lock.json",
-    "update:starter-kit-expo": "cd apps/starter-kit-expo && yarn && yarn add @gluestack-ui-nightly/utils@latest @gluestack-ui-nightly/core@latest && npx gluestack-ui-nightly add --all && rm -rf package-lock.json",
+    "update:starter-kit-next": "yarn sync:starter-kits && cd apps/starter-kit-next && yarn && yarn add @gluestack-ui-nightly/utils@latest @gluestack-ui-nightly/core@latest",
+    "update:starter-kit-expo": "yarn sync:starter-kits && cd apps/starter-kit-expo && yarn && yarn add @gluestack-ui-nightly/utils@latest @gluestack-ui-nightly/core@latest",
     "changeset": "changeset",
     "changeset:version": "changeset version",
     "release": "changeset publish",
diff --git a/published_versions.txt b/published_versions.txt
diff --git a/scripts/mappers/index.ts b/scripts/mappers/index.ts
@@ -1,5 +1,6 @@
 import websiteMapper from './website';
 import kitchenSinkMapper from './kitchen-sink';
+import starterKitsMapper from './starter-kits';
 
 export default [
   {
@@ -10,4 +11,8 @@ export default [
     name: 'kitchen-sink',
     mapper: kitchenSinkMapper,
   },
+  {
+    name: 'starter-kits',
+    mapper: starterKitsMapper,
+  },
 ];
diff --git a/scripts/mappers/starter-kits/componentOperations.ts b/scripts/mappers/starter-kits/componentOperations.ts
diff --git a/scripts/mappers/starter-kits/index.ts b/scripts/mappers/starter-kits/index.ts
