Merge branch 'patch' of github.com:gluestack/gluestack-ui into patch

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 node_modules
+patches
 .pnp
 .pnp.js
 .env

example/storybook-nativewind/package.json

@@ -29,7 +29,7 @@
     "@geometricpanda/storybook-addon-iframe": "^0.2.2",
     "@gluestack-style/react": "^1.0.56",
     "@gluestack-ui/config": "^1.1.18",
-    "@gluestack-ui/themed": "^1.1.25",
+    "@gluestack-ui/themed": "^1.1.26",
     "@gluestack/design-system": "^0.5.36",
     "@legendapp/motion": "^2.2.0",
     "@react-aria/button": "^3.7.0",

example/storybook-nativewind/src/components/Actionsheet/index.stories.mdx

@@ -1103,7 +1103,7 @@ Default styling of the component can be found in the `components/actionsheet` fi
 
 ## Unstyled
 
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.
 
 ### Examples
 

example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx

@@ -105,7 +105,7 @@ This is an illustration of **Icon** component.
     showArgsController={true}
     metaData={{
       code: `
-        <Icon as={CalendarDaysIcon}  {...props}/>
+        <Icon as={CalendarDaysIcon}  {...props} className="text-typography-500"/>
       `,
       transformCode: (code) => {
         return transformedCode(code);
@@ -260,61 +260,61 @@ Below is a list of all of the icons in the library.
       code: `
       <Center>
   <HStack className="w-[70%] flex flex-wrap">
-        <Icon as={AddIcon} className="m-2 w-4 h-4" />
-        <Icon as={ArrowLeftIcon} className="m-2 w-4 h-4" />
-        <Icon as={ArrowRightIcon} className="m-2 w-4 h-4" />
-        <Icon as={ArrowUpIcon} className="m-2 w-4 h-4" />
-        <Icon as={ArrowDownIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronsLeftIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronsRightIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronsUpDownIcon} className="m-2 w-4 h-4" />
-        <Icon as={AtSignIcon} className="m-2 w-4 h-4" />
-        <Icon as={PaperclipIcon} className="m-2 w-4 h-4" />
-        <Icon as={BellIcon} className="m-2 w-4 h-4" />
-        <Icon as={CalendarDaysIcon} className="m-2 w-4 h-4" />
-        <Icon as={MessageCircleIcon} className="m-2 w-4 h-4" />
-        <Icon as={CheckIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronDownIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronUpIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronLeftIcon} className="m-2 w-4 h-4" />
-        <Icon as={ChevronRightIcon} className="m-2 w-4 h-4" />
-        <Icon as={CloseIcon} className="m-2 w-4 h-4" />
-        <Icon as={CopyIcon} className="m-2 w-4 h-4" />
-        <Icon as={TrashIcon} className="m-2 w-4 h-4" />
-        <Icon as={DownloadIcon} className="m-2 w-4 h-4" />
-        <Icon as={GripVerticalIcon} className="m-2 w-4 h-4" />
-        <Icon as={EditIcon} className="m-2 w-4 h-4" />
-        <Icon as={MailIcon} className="m-2 w-4 h-4" />
-        <Icon as={ExternalLinkIcon} className="m-2 w-4 h-4" />
-        <Icon as={MenuIcon} className="m-2 w-4 h-4" />
-        <Icon as={InfoIcon} className="m-2 w-4 h-4" />
-        <Icon as={LinkIcon} className="m-2 w-4 h-4" />
-        <Icon as={LockIcon} className="m-2 w-4 h-4" />
-        <Icon as={RemoveIcon} className="m-2 w-4 h-4" />
-        <Icon as={MoonIcon} className="m-2 w-4 h-4" />
-        <Icon as={SlashIcon} className="m-2 w-4 h-4" />
-        <Icon as={CheckCircleIcon} className="m-2 w-4 h-4" />
-        <Icon as={PhoneIcon} className="m-2 w-4 h-4" />
-        <Icon as={HelpCircleIcon} className="m-2 w-4 h-4" />
-        <Icon as={RepeatIcon} className="m-2 w-4 h-4" />
-        <Icon as={Repeat1Icon} className="m-2 w-4 h-4" />
-        <Icon as={SearchIcon} className="m-2 w-4 h-4" />
-        <Icon as={SettingsIcon} className="m-2 w-4 h-4" />
-        <Icon as={LoaderIcon} className="m-2 w-4 h-4" />
-        <Icon as={StarIcon} className="m-2 w-4 h-4" />
-        <Icon as={SunIcon} className="m-2 w-4 h-4" />
-        <Icon as={ClockIcon} className="m-2 w-4 h-4" />
-        <Icon as={UnlockIcon} className="m-2 w-4 h-4" />
-        <Icon as={EyeIcon} className="m-2 w-4 h-4" />
-        <Icon as={EyeOffIcon} className="m-2 w-4 h-4" />
-        <Icon as={AlertCircleIcon} className="m-2 w-4 h-4" />
-        <Icon as={CloseCircleIcon} className="m-2 w-4 h-4" />
-        <Icon as={ShareIcon} className="m-2 w-4 h-4" />
-        <Icon as={CircleIcon} className="m-2 w-4 h-4" />
-        <Icon as={FavouriteIcon} className="m-2 w-4 h-4" />
-        <Icon as={GlobeIcon} className="m-2 w-4 h-4" />
-        <Icon as={ThreeDotsIcon} className="m-2 w-4 h-4" />
-        <Icon as={PlayIcon} className="m-2 w-4 h-4" />
+        <Icon as={AddIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ArrowLeftIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ArrowRightIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ArrowUpIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ArrowDownIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronsLeftIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronsRightIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronsUpDownIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={AtSignIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={PaperclipIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={BellIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CalendarDaysIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={MessageCircleIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CheckIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronDownIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronUpIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronLeftIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ChevronRightIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CloseIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CopyIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={TrashIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={DownloadIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={GripVerticalIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={EditIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={MailIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ExternalLinkIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={MenuIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={InfoIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={LinkIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={LockIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={RemoveIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={MoonIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={SlashIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CheckCircleIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={PhoneIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={HelpCircleIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={RepeatIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={Repeat1Icon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={SearchIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={SettingsIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={LoaderIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={StarIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={SunIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ClockIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={UnlockIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={EyeIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={EyeOffIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={AlertCircleIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CloseCircleIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ShareIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={CircleIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={FavouriteIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={GlobeIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={ThreeDotsIcon} className="text-typography-500 m-2 w-4 h-4" />
+        <Icon as={PlayIcon} className="text-typography-500 m-2 w-4 h-4" />
   </HStack>
   </Center>
 `,
@@ -398,10 +398,10 @@ Below is a list of all of the icons in the library.
     metaData={{
       code: `
       <VStack space="md" className="items-center">
-        <Icon as={Camera} />
-        <Icon as={ChromeIcon}  />
-        <Icon as={InstagramIcon} />
-        <Icon as={FacebookIcon} />
+        <Icon className="text-typography-500" as={Camera} />
+        <Icon className="text-typography-500" as={ChromeIcon}  />
+        <Icon className="text-typography-500" as={InstagramIcon} />
+        <Icon className="text-typography-500" as={FacebookIcon} />
       </VStack>
 `,
       transformCode: (code) => {

example/storybook-nativewind/src/components/Pressable/index.stories.mdx

@@ -112,7 +112,7 @@ component and i.e. `focus` , `hover` , `pressed` , `disabled` and `focusVisible`
 
 ## Unstyled
 
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.
 
 <!--
 ### Customizing the Pressable

example/storybook-nativewind/src/components/Select/index.stories.mdx

@@ -807,7 +807,7 @@ The Select component with FormControl example demonstrates how to manage its sta
 
 ## Unstyled
 
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.
 
 <!--
 ### Customizing the Select

example/storybook-nativewind/src/components/Text/index.stories.mdx

@@ -388,7 +388,7 @@ Text component also accepts some shorthands for basic quick styling.
 
 ## Unstyled
 
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.
 
 <!--
 

example/storybook-nativewind/src/components/Textarea/index.stories.mdx

@@ -397,7 +397,7 @@ The Textarea Component can be incorporated within the FormControl.
 
 ## Unstyled
 
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.
 
 <!--
 ### Customizing the Textarea

example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/config.ts

@@ -145,7 +145,7 @@ export const config = {
     '--color-background-error': '#FEF1F1',
     '--color-background-warning': '#FFF4EB',
     '--color-background-success': '#EDFCF2',
-    '--color-background-muted': '#F6F6F7',
+    '--color-background-muted': '#F7F8F7',
     '--color-background-info': '#EBF8FE',
   }),
   dark: vars({
@@ -292,7 +292,7 @@ export const config = {
     '--color-background-error': '#422B2B',
     '--color-background-warning': '#412F23',
     '--color-background-success': '#1C2B21',
-    '--color-background-muted': '#252526',
+    '--color-background-muted': '#333333',
     '--color-background-info': '#1A282E',
   }),
 };

example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx

@@ -1,45 +1,48 @@
 import React, { useCallback } from 'react';
 import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
-import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
+import { cssInterop } from 'nativewind';
 import { headingStyle } from './styles';
 
-cssInterop(H4, { className: 'style' });
-
 const Heading = ({ className, size = 'lg', as: AsComp, ...props }: any) => {
   const MappedHeading = useCallback(
     () => {
       switch (size) {
         case '5xl':
         case '4xl':
         case '3xl':
+          cssInterop(H1, { className: 'style' });
           return (
             <H1
               className={headingStyle({ size, class: className })}
               {...props}
             />
           );
         case '2xl':
+          cssInterop(H2, { className: 'style' });
           return (
             <H2
               className={headingStyle({ size, class: className })}
               {...props}
             />
           );
         case 'xl':
+          cssInterop(H3, { className: 'style' });
           return (
             <H3
               className={headingStyle({ size, class: className })}
               {...props}
             />
           );
         case 'lg':
+          cssInterop(H4, { className: 'style' });
           return (
             <H4
               className={headingStyle({ size, class: className })}
               {...props}
             />
           );
         case 'md':
+          cssInterop(H5, { className: 'style' });
           return (
             <H5
               className={headingStyle({ size, class: className })}
@@ -48,13 +51,15 @@ const Heading = ({ className, size = 'lg', as: AsComp, ...props }: any) => {
           );
         case 'sm':
         case 'xs':
+          cssInterop(H6, { className: 'style' });
           return (
             <H6
               className={headingStyle({ size, class: className })}
               {...props}
             />
           );
         default:
+          cssInterop(H4, { className: 'style' });
           return (
             <H4
               className={headingStyle({ size, class: className })}

example/storybook-nativewind/src/home/getting-started/Installation/index.nw.stories.mdx

@@ -454,4 +454,9 @@ export default Document;
 </>
     </Tabs.TabPanel>
   </Tabs.TabPanels>
-</Tabs>
+</Tabs>
+
+## Common issues
+**Expo app stuck in `tailwindcss(ios) rebuilding...` while running `expo start` command**
+
+In this case, you may have your app stored in a directory with a name containing spaces, such as 'Expo App', renaming it to just 'Expo-App' will resolve the issue.

example/storybook/src/ui/components/DataDisplay/Badge/index.stories.mdx

@@ -465,7 +465,7 @@ An example of the Badge component being used with the Composition component, all
 
 ## Unstyled
 
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.
 
 ## Spec Doc
 

example/storybook/src/ui/components/DataDisplay/Card/index.stories.mdx

@@ -657,4 +657,4 @@ Wrapper,
 
 ## Unstyled
 
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.

example/storybook/src/ui/components/DataDisplay/Divider/index.stories.mdx

@@ -421,7 +421,7 @@ A Divider component with added content allows for the inclusion of additional te
 
 ## Unstyled
 
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.
 
 ## Spec Doc
 

example/storybook/src/ui/components/Disclosure/Actionsheet/index.stories.mdx

@@ -1103,7 +1103,7 @@ Default styling of the component can be found in the `components/actionsheet` fi
 
 ## Unstyled
 
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.
 
 <!--
 

example/storybook/src/ui/components/Feedback/Alert/index.stories.mdx

@@ -264,7 +264,7 @@ An example of an alert component with a heading, which further contains another
 
 ## Unstyled
 
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.
 
 <!--
 

example/storybook/src/ui/components/Feedback/Progress/index.stories.mdx

@@ -340,7 +340,7 @@ You can customize the progress bar. Below is the example where we have change th
 
 ## Unstyled
 
-All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
+All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme/eject-library). The import names of components serve as keys to customize each component.
 
 <!--