fix: merge confict resolved

example/storybook-nativewind/babel.config.js

@@ -58,17 +58,34 @@ module.exports = function (api) {
               __dirname,
               '../../packages/unstyled/provider/src'
             ),
+            '@gluestack-ui/popover': path.resolve(
+              __dirname,
+              '../../packages/unstyled/popover/src'
+            ),
             '@gluestack-style/react': path.resolve(
               __dirname,
               '../../packages/styled/react/src'
             ),
-            '@gluestack-ui/nativewind-utils': path.resolve(
+            '@gluestack-ui/nativewind-utils/withStyleContext': path.resolve(
               __dirname,
-              '../../packages/nativewind/utils/src'
+              '../../packages/nativewind/utils/src/withStyleContext'
+            ),
+            '@gluestack-ui/nativewind-utils/withStyleContextAndStates':
+              path.resolve(
+                __dirname,
+                '../../packages/nativewind/utils/src/withStyleContextAndStates'
+              ),
+            '@gluestack-ui/nativewind-utils/cssInterop': path.resolve(
+              __dirname,
+              '../../packages/nativewind/utils/src/cssInterop'
             ),
-            '@gluestack-ui/config': path.resolve(
+            '@gluestack-ui/nativewind-utils/tva': path.resolve(
               __dirname,
-              '../../packages/config/src/gluestack-ui.config.ts'
+              '../../packages/nativewind/utils/src/tva'
+            ),
+            '@gluestack-ui/nativewind-utils': path.resolve(
+              __dirname,
+              '../../packages/nativewind/utils/src'
             ),
           },
         },

example/storybook-nativewind/package.json

@@ -27,9 +27,9 @@
     "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^0.17.2",
     "@geometricpanda/storybook-addon-iframe": "^0.2.2",
-    "@gluestack-style/react": "^1.0.49",
+    "@gluestack-style/react": "^1.0.50",
     "@gluestack-ui/config": "^1.1.10",
-    "@gluestack-ui/themed": "^1.1.8",
+    "@gluestack-ui/themed": "^1.1.11",
     "@gluestack/design-system": "^0.5.27",
     "@legendapp/motion": "^2.2.0",
     "@react-aria/button": "^3.7.0",

example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: Accordion | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Accordion Component | Installation, Usage, and API
 
 description: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.
 

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

@@ -1,5 +1,5 @@
 ---
-title: Actionsheet | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Actionsheet Component | Installation, Usage, and API
 
 description: The Actionsheet component presents a set of options to the user, overlaid on top of the app's content, allowing them to take quick actions without leaving the current page or view.
 

example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: gluestack-ui Slider Alert | Installation, Usage, and API
+title: gluestack-ui Alert Component | Installation, Usage, and API
 
 description: Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user.
 

example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: AlertDialog | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui AlertDialog Component | Installation, Usage, and API
 
 description: AlertDialog effectively interrupts a user's flow and prompts them to take a specific action. It's commonly used for mandatory confirmations or call-to-actions.
 

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

@@ -104,15 +104,8 @@ This is an illustration of **Badge** component.
 
 ## Installation
 
-### Step 1: Install the following dependencies:
 
-```bash
-
-npm i @gluestack-ui/badge
-
-```
-
-### Step 2: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into your project.
 
 <CollapsibleCode>
 
@@ -122,7 +115,7 @@ npm i @gluestack-ui/badge
 
 </CollapsibleCode>
 
-### Step 3: Update the import paths to match your project setup.
+### Step 2: Update the import paths to match your project setup.
 
 ## API Reference
 

example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: Badge | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Badge Component | Installation, Usage, and API
 
 description: The badge component lets you quickly and easily add status indicators to your interface for improved usability. They are designed to be attention-grabbing and quickly convey important information.
 
@@ -103,15 +103,7 @@ This is an illustration of **Badge** component.
 
 ## Installation
 
-### Step 1: Install the following dependencies:
-
-```bash
-
-npm i @gluestack-ui/badge
-
-```
-
-### Step 2: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into your project.
 
 <CollapsibleCode>
 
@@ -121,7 +113,7 @@ npm i @gluestack-ui/badge
 
 </CollapsibleCode>
 
-### Step 3: Update the import paths to match your project setup.
+### Step 2: Update the import paths to match your project setup.
 
 ## API Reference
 
@@ -265,54 +257,6 @@ Badge component is created using View component from react-native. It extends al
   </TableContainer>
 </>
 
-
-## Spec Doc
-
-Explore the comprehensive details of the Badge in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
-
-<iframe
-  style={{
-    borderRadius: '8px',
-    border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
-  }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6030-27780%26t%3DdmNaOHvCSb4QGYGL-1%26scaling%3Dscale-down%26page-id%3D6030%253A25864%26starting-point-node-id%3D6030%253A27780%26mode%3Ddesign"
-  allowFullScreen
-/> 
-
-<!--
-
-### Advanced
-
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
-
-### Customizing the Badge
-
-For customizing the Badge, you have to map styled view to Badge You can refer [gluestack.io/style](/style) on how to use styled components.
-
-#### Usage
-
-Default styling of the component can be found in the `components/badge` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Badge) of the styled `Badge` component.
-
-```jsx
-// import the styles
-import { Root, Text, Icon } from 'components/core/badge/styled-components';
-
-// mapping the Badge to root component and compounding the Text and Icon components
-const Badge = Root;
-BadgeText = Text;
-BadgeIcon = Icon;
-
-// Using the badge component
-export default () => (
-  <Badge>
-    <BadgeText></BadgeText>
-    <BadgeIcon></BadgeIcon>
-  </Badge>
-);
-```
--->
-
 ### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

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

@@ -1,5 +1,5 @@
 ---
-title: Box | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Box Component | Installation, Usage, and API
 
 description: If you're looking for a flexible component to help with low-level layout needs, the Box component might be just what you need. With its customizable styles and props, it can be used to create a wide range of UI elements, from simple containers to complex layout structures.
 

example/storybook-nativewind/src/components/Box/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: Box | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Box Component | Installation, Usage, and API
 
 description: If you're looking for a flexible component to help with low-level layout needs, the Box component might be just what you need. With its customizable styles and props, it can be used to create a wide range of UI elements, from simple containers to complex layout structures.
 

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

@@ -89,15 +89,8 @@ This is an illustration of a **Card** component.
 
 ## Installation
 
-### Step 1: Install the following dependencies:
 
-```bash
-
-npm i @gluestack-ui/card
-
-```
-
-### Step 2: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into your project.
 
 <CollapsibleCode>
 
@@ -107,7 +100,7 @@ npm i @gluestack-ui/card
 
 </CollapsibleCode>
 
-### Step 3: Update the import paths to match your project setup.
+### Step 2: Update the import paths to match your project setup.
 
 ## API Reference
 

example/storybook-nativewind/src/components/Card/index.themed.stories.mdx

@@ -89,15 +89,8 @@ This is an illustration of a **Card** component.
 
 ## Installation
 
-### Step 1: Install the following dependencies:
 
-```bash
-
-npm i @gluestack-ui/card
-
-```
-
-### Step 2: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into your project.
 
 <CollapsibleCode>
 
@@ -107,7 +100,7 @@ npm i @gluestack-ui/card
 
 </CollapsibleCode>
 
-### Step 3: Update the import paths to match your project setup.
+### Step 2: Update the import paths to match your project setup.
 
 ## API Reference
 
@@ -129,7 +122,7 @@ This section provides a comprehensive reference list for the component props, de
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-<Wrapper>
+<>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -175,7 +168,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
       </Table.TBody>
     </Table>
   </TableContainer>
-</Wrapper>
+</>
 
 <!--
 ## Examples

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

@@ -1,5 +1,5 @@
 ---
-title: Center | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Center Component | Installation, Usage, and API
 
 description: When you need to center-align content, the Center component comes in handy. It is a layout component that can be used with other components to create complex layouts and positioning.
 

example/storybook-nativewind/src/components/Center/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: Center | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Center Component | Installation, Usage, and API
 
 description: When you need to center-align content, the Center component comes in handy. It is a layout component that can be used with other components to create complex layouts and positioning.
 

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

@@ -1,5 +1,5 @@
 ---
-title: Checkbox | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Checkbox Component | Installation, Usage, and API
 
 description: Whether you're building a simple form or a complex data collection system, the Checkbox component offers a user-friendly way for users to select multiple options from a list.
 

example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: Checkbox | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Checkbox Component | Installation, Usage, and API
 
 description: Whether you're building a simple form or a complex data collection system, the Checkbox component offers a user-friendly way for users to select multiple options from a list.
 

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

@@ -1,5 +1,5 @@
 ---
-title: Divider | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Divider Component | Installation, Usage, and API
 
 description: Revamp your content organization with the Divider component! Use it to visually separate different sections of a list or group for a more structured and easy-to-read interface.
 

example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: Divider | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Divider Component | Installation, Usage, and API
 
 description: Revamp your content organization with the Divider component! Use it to visually separate different sections of a list or group for a more structured and easy-to-read interface.
 

example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: Fab | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Fab Component | Installation, Usage, and API
 
 description: The Floating Action Button (FAB) is a dynamic button that stays visible and provides access to a primary action throughout the user's journey in the application. It is a powerful UI element that adds a touch of elegance and convenience to the user experience.
 

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

@@ -1,5 +1,5 @@
 ---
-title: HStack | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui HStack Component | Installation, Usage, and API
 
 description: HStack arranges its child elements horizontally, making it a suitable layout component for creating a row of items. It is worth noting that Row is just an alternative name for HStack.
 

example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: HStack | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui HStack Component | Installation, Usage, and API
 
 description: HStack arranges its child elements horizontally, making it a suitable layout component for creating a row of items. It is worth noting that Row is just an alternative name for HStack.
 

example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: Heading | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Heading Component | Installation, Usage, and API
 
 description: Heading component gives you the ability to create headings for your page with different sizes and semantics from h1 to h6.
 
@@ -97,7 +97,7 @@ It inherits all the properties of @expo/html-elements's [H1](https://github.com/
 
 Heading component is created using H1 component from @expo/html-elements. It extends all the props supported by [Expo HTML Heading Elements](https://www.npmjs.com/package/@expo/html-elements/v/0.0.5), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.
 
-#### Button
+#### Heading
 
 <>
   <TableContainer>

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

@@ -1,5 +1,5 @@
 ---
-title: Image | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Image Component | Installation, Usage, and API
 
 description: With the Image component, you can enhance the look and feel of your app or website by incorporating compelling imagery.
 

example/storybook-nativewind/src/components/Image/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: Image | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Image Component | Installation, Usage, and API
 
 description: With the Image component, you can enhance the look and feel of your app or website by incorporating compelling imagery.
 

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

@@ -478,19 +478,6 @@ Input component is created using TextInput component from react-native. It exten
   </TableContainer>
 </>
 
-## Spec Doc
-
-Explore the comprehensive details of the Input in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
-
-<iframe
-  style={{
-    borderRadius: '8px',
-    border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
-  }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D213%253A12091%26type%3Ddesign%26node-id%3D213-12092%26viewport%3D256%252C289%252C0.03%26t%3DYlY4Jjtl91JuXCZS-1%26scaling%3Dscale-down%26starting-point-node-id%3D213%253A12092%26mode%3Ddesign"
-  allowFullScreen
-></iframe>
 
 ### Examples
 

example/storybook-nativewind/src/components/Link/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: Link | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Link Component | Installation, Usage, and API
 
 description: With links, users can navigate seamlessly throughout a website. This component has a hyperlinked appearance for a user-friendly experience.