diff --git a/example/storybook-nativewind/.storybook/preview.js b/example/storybook-nativewind/.storybook/preview.js
index 8201d81410..693855c586 100644
--- a/example/storybook-nativewind/.storybook/preview.js
+++ b/example/storybook-nativewind/.storybook/preview.js
@@ -31,11 +31,13 @@ export const parameters = {
method: '',
order: [
'Overview',
- ['Introduction'],
+ ['Introduction', 'All Components'],
'Getting Started',
- ['Installation', 'Tooling Setup'],
+ ['Installation', 'Tooling Setup', 'Figma UI Kit'],
'Core Concepts',
['Accessibility', 'Universal'],
+ 'Theme Configuration',
+ ['Default Tokens', 'Customizing Theme'],
'Components',
[
'Typography',
diff --git a/example/storybook-nativewind/babel.config.js b/example/storybook-nativewind/babel.config.js
index 8f54b5c7e2..ac70512697 100644
--- a/example/storybook-nativewind/babel.config.js
+++ b/example/storybook-nativewind/babel.config.js
@@ -95,6 +95,18 @@ module.exports = function (api) {
__dirname,
'../../packages/nativewind/utils/'
),
+ '@gluestack-ui/overlay': path.join(
+ __dirname,
+ '../../packages/unstyled/overlay/src'
+ ),
+ '@gluestack-ui/toast': path.join(
+ __dirname,
+ '../../packages/unstyled/toast/src'
+ ),
+ 'tailwind.config': path.join(
+ __dirname,
+ '../../example/storybook-nativewind/tailwind.config.js'
+ ),
},
},
],
diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
index ce1f7a3088..b41039fbe9 100644
--- a/example/storybook-nativewind/package.json
+++ b/example/storybook-nativewind/package.json
@@ -29,7 +29,7 @@
"@geometricpanda/storybook-addon-iframe": "^0.2.2",
"@gluestack-style/react": "^1.0.52",
"@gluestack-ui/config": "^1.1.17",
- "@gluestack-ui/themed": "^1.1.17",
+ "@gluestack-ui/themed": "^1.1.19",
"@gluestack/design-system": "^0.5.36",
"@legendapp/motion": "^2.2.0",
"@react-aria/button": "^3.7.0",
diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx
index f39f378e5e..1d9bdfdbce 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx
@@ -61,6 +61,7 @@ import {
AddIcon,
InfoIcon,
Alert,
+ Tabs
} from '@gluestack/design-system';
import {Platform, KeyboardAvoidingView,} from 'react-native';
import {CreditCardIcon} from 'lucide-react-native';
@@ -134,6 +135,28 @@ function App(){
## Installation
+
+
+
+ CLI
+
+
+ Manual
+
+
+
+
+<>
+
+### Run the following command:
+ ```bash
+ npx gluestack-ui add actionsheet
+ ```
+
+
+
+<>
+
### Step 1: Install the following dependencies:
```bash
npm i @gluestack-ui/actionsheet
@@ -146,6 +169,12 @@ npm i @gluestack-ui/actionsheet
```
+### Step 3: Update the import paths to match your project setup.
+
+
+
+
+
## API Reference
To use this component in your project, include the following import statement in your file.
diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx
index 1944349bce..22357afaa2 100644
--- a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx
@@ -385,22 +385,6 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
{`If true, the keyboard can dismiss the AlertDialog`}
-
-
-
- animationPreset
-
-
-
- slide | fade
-
-
- slide
-
-
- {`Specifies the animation preset for the AlertDialog`}
-
-
diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
index 6b748bcf6b..1c6863e222 100644
--- a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
@@ -391,22 +391,6 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
{`If true, the keyboard can dismiss the AlertDialog`}
-
-
-
- animationPreset
-
-
-
- slide | fade
-
-
- slide
-
-
- {`Specifies the animation preset for the AlertDialog`}
-
-
diff --git a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx
index edc75b6fac..43e0117682 100644
--- a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx
@@ -80,7 +80,7 @@ This is an illustration of **Box** component.
<>
-### Step 1: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into index.tsx in your project.
```jsx
@@ -88,7 +88,25 @@ This is an illustration of **Box** component.
```
-### Step 2: Update the import paths to match your project setup.
+> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+
+### Step 2: Copy and paste the following code into index.web.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/box/index.web.tsx --%%
+```
+
+
+### Step 3: Copy and paste the following code into styles.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/box/styles.tsx --%%
+```
+
+
+### Step 4: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx
index f012b808bd..5d168ed347 100644
--- a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx
@@ -112,7 +112,7 @@ This is an illustration of a **Card** component.
<>
-### Step 1: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into index.tsx in your project.
```jsx
@@ -120,7 +120,25 @@ This is an illustration of a **Card** component.
```
-### Step 2: Update the import paths to match your project setup.
+> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+
+### Step 2: Copy and paste the following code into index.web.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/card/index.web.tsx --%%
+```
+
+
+### Step 3: Copy and paste the following code into styles.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/card/styles.tsx --%%
+```
+
+
+### Step 4: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/Center/Center.tsx b/example/storybook-nativewind/src/components/Center/Center.tsx
index 7f9e782225..d61ff5a691 100644
--- a/example/storybook-nativewind/src/components/Center/Center.tsx
+++ b/example/storybook-nativewind/src/components/Center/Center.tsx
@@ -4,10 +4,8 @@ import React from 'react';
const CenterBasic = () => {
return (
-
-
- This is the center.
-
+
+ This is the center.
);
};
diff --git a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx
index ba511a920d..dc015ed490 100644
--- a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx
@@ -78,7 +78,7 @@ This is an illustration of **Center** component.
<>
-### Step 1: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into index.tsx in your project.
```jsx
@@ -86,7 +86,25 @@ This is an illustration of **Center** component.
```
-### Step 2: Update the import paths to match your project setup.
+> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+
+### Step 2: Copy and paste the following code into index.web.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/center/index.web.tsx --%%
+```
+
+
+### Step 3: Copy and paste the following code into styles.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/center/styles.tsx --%%
+```
+
+
+### Step 4: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx
index 8b33e504c4..e8cc4f07fc 100644
--- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx
@@ -89,7 +89,7 @@ This is an illustration of **HStack** component.
<>
-### Step 1: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into index.tsx in your project.
```jsx
@@ -97,7 +97,25 @@ This is an illustration of **HStack** component.
```
-### Step 2: Update the import paths to match your project setup.
+> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+
+### Step 2: Copy and paste the following code into index.web.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/hstack/index.web.tsx --%%
+```
+
+
+### Step 3: Copy and paste the following code into styles.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/hstack/styles.tsx --%%
+```
+
+
+### Step 4: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx
index bcc4d18453..35aa8d1153 100644
--- a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx
@@ -77,20 +77,33 @@ This is an illustration of **Heading** component.
<>
-### Step 1: Install the following dependencies:
-```bash
-npm i @expo/html-elements
+### Step 1: Copy and paste the following code into index.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/heading/index.tsx --%%
```
+
+
+> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
-### Step 2: Copy and paste the following code into your project.
+### Step 2: Copy and paste the following code into index.web.tsx in your project.
```jsx
-%%-- File: core-components/nativewind/heading/index.tsx --%%
+%%-- File: core-components/nativewind/heading/index.web.tsx --%%
+```
+
+
+### Step 3: Copy and paste the following code into styles.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/heading/styles.tsx --%%
```
-### Step 3: Update the import paths to match your project setup.
+### Step 4: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx
index f5691c007c..0b7e088316 100644
--- a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx
@@ -82,7 +82,7 @@ This is an illustration of **Modal** component.
Engage with Modals
-
@@ -762,7 +762,7 @@ A versatile modal component offering different sizes to accommodate various cont
Delete Folder
-
diff --git a/example/storybook-nativewind/src/components/Select/Select.tsx b/example/storybook-nativewind/src/components/Select/Select.tsx
index 99dcc38fa5..20fba565d9 100644
--- a/example/storybook-nativewind/src/components/Select/Select.tsx
+++ b/example/storybook-nativewind/src/components/Select/Select.tsx
@@ -1,7 +1,6 @@
import React from 'react';
-
-import { Center, ChevronDownIcon, Icon } from '@gluestack-ui/themed';
-
+import { Center } from '@/components/ui/center';
+import { Icon, ChevronDownIcon } from '@/components/ui/icon';
import {
Select,
SelectIcon,
@@ -20,11 +19,7 @@ const SelectBasic = ({ size = 'md', variant = 'outline', ...props }: any) => {
<>
-### Step 1: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into index.tsx in your project.
```jsx
@@ -85,7 +85,25 @@ This is an illustration of **Text** component.
```
-### Step 2: Update the import paths to match your project setup.
+> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+
+### Step 2: Copy and paste the following code into index.web.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/text/index.web.tsx --%%
+```
+
+
+### Step 3: Copy and paste the following code into styles.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/text/styles.tsx --%%
+```
+
+
+### Step 4: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
index d990dcb28f..4be2cd25e6 100644
--- a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
@@ -1,5 +1,5 @@
---
-title: Toast | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Toast Component | Installation, Usage, and API
description: Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.
@@ -7,15 +7,819 @@ pageTitle: Toast
pageDescription: Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.
-showHeader: false
-
-tag: coming soon
+showHeader: true
---
import { Meta } from '@storybook/addon-docs';
{
+ toast.show({
+ placement:"top",
+ render: ({ id }) => {
+ const toastId = "toast-" + id;
+ return (
+
+
+ New Message
+
+ Hey, just wanted to touch base and see how you're doing. Let's catch up soon!
+
+
+
+ );
+ },
+ });
+ }}
+ >
+ Press Me
+
+ );
+ };
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'Example');
+ },
+ scope: {
+ Wrapper,
+ Toast,
+ ToastTitle,
+ ToastDescription,
+ useToast,
+ Text,
+ Button,
+ ButtonText,
+ VStack,
+ },
+ argsType: {
+ action: {
+ control: 'select',
+ options: ['success', 'info', 'error', 'warning', 'attention'],
+ default: 'attention',
+ },
+ variant: {
+ control: 'select',
+ options: ['accent', 'solid', 'outline'],
+ default: 'solid',
+ },
+ },
+ }}
+ />
+
+
+
+
+
+ CLI
+
+
+ Manual
+
+
+
+
+<>
+
+### Run the following command:
+ ```bash
+ npx gluestack-ui add toast
+ ```
+
+
+
+<>
+
+### Step 1: Install the following dependencies:
+
+```bash
+
+npm i @gluestack-ui/toast
+
+```
+
+### Step 2: Copy and paste the following code into your project.
+
+
+
+```jsx
+%%-- File: core-components/nativewind/toast/index.tsx --%%
+```
+
+
+
+### Step 3: Update the import paths to match your project setup.
+
+
+
+
+
+## API Reference
+
+To use this component in your project, include the following import statement in your file.
+
+```jsx
+import { useToast, Toast } from '@/components/ui/toast';
+```
+
+```jsx
+export default () => (
+
+
+);
+```
+### Component Props
+
+This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
+
+#### Toast
+
+It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
+
+<>
+
+
+
+
+
+ Prop
+
+
+ Type
+
+
+ Default
+
+
+ Description
+
+
+
+
+
+
+
+ duration
+
+
+
+ number or null
+
+
+ 5000
+
+
+ {`The delay before the toast hides (in milliseconds). If set to null, toast will never dismiss.`}
+
+
+
+
+
+ onCloseComplete
+
+
+
+ {`()=>{}`}
+
+
+ -
+
+
+ {`Callback function to run side effects after the toast has closed.`}
+
+
+
+
+
+ placement
+
+
+
+
+ 'top'| 'top right' | 'top left' | 'bottom' | 'bottom left' |
+ 'bottom right'
+
+
+
+ bottom
+
+
+ Position of toast on the web page.
+
+
+
+
+
+ render?: (props: any)
+
+
+
+ ReactNode
+
+
+ -
+
+
+ Renders a toast component
+
+
+
+
+
+ avoidKeyboard
+
+
+
+ bool
+
+
+ false
+
+
+ {`If true and the keyboard is opened, the Toast will move up equivalent to the keyboard height.`}
+
+
+
+
+
+ containerStyle
+
+
+
+ ViewStyle
+
+
+ -
+
+
+ Container style object for the toast.
+
+
+
+
+
+
+
+#### ToastTitle
+
+Contains all Text related layout style props and actions.
+It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
+
+#### ToastDescription
+
+Contains all Text related layout style props and actions.
+It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
+
+### Accessibility
+
+We have outlined the various features that ensure the Toast component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).
+
+#### Keyboard
+
+- `Tab + Enter`: Triggers the toast's action.
+
+#### Screen Reader
+
+- VoiceOver: When the toast is focused, the screen reader will announce the toast's title.
+
+### Props
+
+Toast component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props) and the props mentioned below.
+
+#### Toast
+
+<>
+
+
+
+
+
+ Name
+
+
+ Value
+
+
+ Default
+
+
+
+
+
+
+
+ action
+
+
+
+
+ error | warning | success | info | attention
+
+
+
+ attention
+
+
+
+
+
+ variant
+
+
+
+ solid | outline | accent
+
+
+ solid
+
+
+
+
+
+
+
+### 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.
+
+#### Toast with actions
+
+A versatile Toast component with customizable actions, enabling users to take various actions directly from the notification popup for enhanced usability and convenience.
+
+
+
+
+ {
+ toastActions.map((action, index)=>{
+ return (
+ {
+ toast.show({
+ placement:"top",
+ render: ({ id }) => {
+ const toastId = "toast-" + id;
+ return (
+
+
+ {action.title}
+
+ {action.description}
+
+
+
+ );
+ },
+ });
+ }}
+ >
+ {action.actionType}
+
+ )
+ })
+ }
+
+
+ );
+ };
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'Example');
+ },
+ scope: {
+ View,
+ Wrapper,
+ Toast,
+ ToastTitle,
+ ToastDescription,
+ useToast,
+ Text,
+ Button,
+ ButtonText,
+ VStack,
+ Center,
+ },
+ argsType: {},
+ }}
+ />
+
+
+#### Toast with variants
+
+A versatile Toast component with multiple variants, offering different styles and visual cues to effectively convey various types of notifications and feedback to users.
+
+
+ {
+ toast.show({
+ placement:"top",
+ render: ({ id }) => {
+ const toastId = "toast-" + id;
+ return (
+
+
+ Attention!
+
+ Please review and accept our updated terms and conditions before continuing to use the application.
+
+
+
+ );
+ },
+ });
+ }}
+ >
+ Press Me
+
+ );
+ };
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'Example');
+ },
+ scope: {
+ View,
+ Wrapper,
+ Toast,
+ ToastTitle,
+ ToastDescription,
+ useToast,
+ Text,
+ Button,
+ ButtonText,
+ VStack,
+ },
+ argsType: {
+ variant: {
+ control: 'select',
+ options: ['accent', 'solid', 'outline'],
+ default: 'solid',
+ },
+ },
+ }}
+ />
+
+
+#### Toast with placement
+
+A Toast component with different placement options allows for the flexible positioning of toast notifications, enabling them to appear in various locations within a user interface, enhancing user visibility and providing a customizable approach to displaying temporary messages or alerts.
+
+
+ {
+ toast.show({
+ placement: placement,
+ render: ({ id }) => {
+ const toastId = "toast-" + id;
+ return (
+
+ {placements[placement]}
+
+ );
+ },
+ });
+ }}
+ >
+ Press Me
+
+ );
+ };
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'Example');
+ },
+ scope: {
+ View,
+ Wrapper,
+ Toast,
+ ToastTitle,
+ ToastDescription,
+ useToast,
+ Text,
+ Button,
+ ButtonText,
+ },
+ argsType: {
+ placement: {
+ control: 'select',
+ options: [
+ 'bottom',
+ 'top',
+ 'top right',
+ 'top left',
+ 'bottom left',
+ 'bottom right',
+ ],
+ default: 'bottom',
+ },
+ },
+ }}
+ />
+
+
+#### Dismissable Toast
+
+A dismissable Toast component offers users the ability to dismiss or close the toast notification, providing control and convenience in managing temporary messages or alerts within a user interface.
+
+
+ {
+ toast.show({
+ placement: 'top',
+ render: ({ id }) => {
+ const toastId = "toast-" + id;
+ return (
+
+
+ Download Complete
+ Your file 'wadewarren.docx' has been downloaded successfully. You can find it in your Downloads folder.
+
+ toast.close(id)} className="mt-1">
+
+
+ );
+ },
+ });
+ }}
+ >
+ Press Me
+
+ );
+ };
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'Example');
+ },
+ scope: {
+ View,
+ Wrapper,
+ Toast,
+ ToastTitle,
+ ToastDescription,
+ useToast,
+ Text,
+ Icon,
+ CloseIcon,
+ VStack,
+ CheckIcon,
+ Button,
+ ButtonText,
+ Pressable,
+ },
+ argsType: {},
+ }}
+ />
+
+
+#### Toast custom duration
+
+A Toast component with custom duration allows for specifying the length of time the toast notification remains visible, offering flexibility in controlling the duration of temporary messages or alerts within a user interface.
+
+
+ {
+ toast.show({
+ placement: 'top',
+ duration: duration,
+ render: ({ id }) => {
+ const toastId = "toast-" + id;
+ return (
+
+
+ New Message
+ Hey, just wanted to touch base and see how you're doing. Let's catch up soon!
+
+ toast.close(id)} className="mt-1">
+
+
+ );
+ },
+ });
+ }}
+ >
+ Press Me
+
+ );
+ };
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'Example');
+ },
+ scope: {
+ View,
+ Wrapper,
+ Toast,
+ ToastTitle,
+ ToastDescription,
+ useToast,
+ Text,
+ Button,
+ ButtonText,
+ Pressable,
+ Icon,
+ CloseIcon,
+ VStack,
+ MessageCircleIcon,
+ },
+ argsType: {
+ duration: {
+ control: 'input',
+ default: 5000,
+ },
+ },
+ }}
+ />
+
+
+#### Preserve Toast
+
+A Toast component with preserve toast functionality retains the notification on the screen until explicitly dismissed, ensuring important messages or alerts remain visible and accessible to the user, even during subsequent interactions within the user interface.
-Coming Soon!
\ No newline at end of file
+
+ {
+ toast.show({
+ placement: 'top',
+ duration: null,
+ render: ({ id }) => {
+ const toastId = "toast-" + id;
+ return (
+
+
+ Account Security Alert
+ Your account password was recently changed.
+ If you did not authorize this change, please contact our support team immediately.
+
+
+ toast.close(id)} className="mt-1">
+
+
+ );
+ },
+ });
+ }}
+ >
+ Press Me
+
+ );
+ };
+ `,
+ transformCode: (code) => {
+ return transformedCode(code, 'function', 'Example');
+ },
+ scope: {
+ View,
+ Wrapper,
+ Toast,
+ ToastTitle,
+ ToastDescription,
+ useToast,
+ Text,
+ Icon,
+ CloseIcon,
+ Pressable,
+ VStack,
+ AlertTriangle,
+ Button,
+ ButtonText,
+ },
+ argsType: {},
+ }}
+ />
+
diff --git a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx
index 02005ec3d9..5904aede56 100644
--- a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx
@@ -95,7 +95,7 @@ This is an illustration of **VStack** component.
<>
-### Step 1: Copy and paste the following code into your project.
+### Step 1: Copy and paste the following code into index.tsx in your project.
```jsx
@@ -103,7 +103,25 @@ This is an illustration of **VStack** component.
```
-### Step 2: Update the import paths to match your project setup.
+> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+
+### Step 2: Copy and paste the following code into index.web.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/vstack/index.web.tsx --%%
+```
+
+
+### Step 3: Copy and paste the following code into styles.tsx in your project.
+
+
+```jsx
+%%-- File: core-components/nativewind/vstack/styles.tsx --%%
+```
+
+
+### Step 4: Update the import paths to match your project setup.
diff --git a/example/storybook-nativewind/src/components/docs-components/DefaultComponent.tsx b/example/storybook-nativewind/src/components/docs-components/DefaultComponent.tsx
new file mode 100644
index 0000000000..16684b96c9
--- /dev/null
+++ b/example/storybook-nativewind/src/components/docs-components/DefaultComponent.tsx
@@ -0,0 +1,99 @@
+import React, { useContext, Fragment, useMemo } from 'react';
+import tailwindConfig from 'tailwind.config';
+import { GluestackUIProvider } from '../../core-components/nativewind/gluestack-ui-provider';
+import { config } from '../../core-components/nativewind/gluestack-ui-provider/config';
+import {
+ VStack,
+ HStack,
+ Box,
+ Text,
+ Heading,
+} from '../../core-components/nativewind';
+import { LayoutContext } from '@gluestack/design-system';
+
+const ColorPaletteComponent = () => {
+ const { colorMode } = useContext(LayoutContext);
+
+ const colorPalette = useMemo(() => {
+ const sourceObject = tailwindConfig!.theme!.extend!.colors; // get the source object to loop
+ const paletteData: {
+ name: string;
+ variants: {
+ name: string;
+ variant: string;
+ color: string;
+ className: string;
+ };
+ }[] = []; // result array to push data into
+
+ for (const [name, colors] of Object.entries(sourceObject)) {
+ // object.entries gives us the key value pair of the object and makes it iterable. {primary: [{0: '#fff'}]} where primary is the key (name) and the value is an object with the color variants (colors)
+
+ const variants: {
+ name: string;
+ variant: string;
+ color: string;
+ className: string;
+ }[] = [];
+
+ for (const [variant, color] of Object.entries(colors)) {
+ // loop over all the variants of the color i.e. the {0: '#fff'} object in the same way as the above loop
+ const variableName = extractVariableName(color); // extract the --color-name part from the var(---color-name) string using regex, it will return null if we pass it a hex code
+ const colorName = variableName || color; // variableName will be null in case there was a hex code passed to the extract function
+
+ const colorCode =
+ colorMode === 'light'
+ ? config.light[colorName]
+ : config.dark[colorName]; // get the color code from the config based on the color name and the color mode
+
+ const className = `bg-${name}-${variant}`; // need to save the class name for the color to use in the UI
+
+ variants.push({
+ name,
+ variant,
+ color: colorCode || color,
+ className,
+ }); // push the data into the result array
+ }
+
+ paletteData.push({ name, variants }); // push the data into the result array
+ }
+
+ return paletteData; // return the result array
+ }, [colorMode]);
+
+ function extractVariableName(text: string): string | null {
+ const pattern = /\bvar\((.*?)\)/g;
+ const match = pattern.exec(text);
+ return match?.[1] ?? null;
+ }
+
+ return (
+
+
+ {colorPalette.map(({ name }, i) => (
+
+
+ {name}
+
+
+ {colorPalette[i].variants.map((variant, j) => (
+
+
+ {variant.variant}
+ {variant.color}
+
+
+ ))}
+
+
+ ))}
+
+
+ );
+};
+
+export { ColorPaletteComponent };
diff --git a/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx b/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx
new file mode 100644
index 0000000000..a58a3c0554
--- /dev/null
+++ b/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx
@@ -0,0 +1,471 @@
+import React, {
+ Fragment,
+ useContext,
+ useState,
+ useEffect,
+ useMemo,
+} from 'react';
+import {
+ Text,
+ VStack,
+ HStack,
+ Box,
+ GluestackUIProvider,
+ Divider,
+ Tooltip,
+ TooltipContent,
+ TooltipText,
+ Pressable,
+} from '@gluestack-ui/themed';
+import { config } from '../../core-components/themed/gluestack-ui-provider/config';
+import { LayoutContext } from '@gluestack/design-system';
+
+const ColorPaletteComponent = () => {
+ const { colorMode } = useContext(LayoutContext);
+ const [colors, setColors] = useState([]);
+
+ useEffect(() => {
+ if (!colorMode) return;
+ if (colorMode === 'light') {
+ setColors(config.tokens.colors);
+ } else {
+ setColors(config.themes[colorMode].colors);
+ }
+ }, [colorMode]);
+
+ const sortedPalette = useMemo(() => {
+ const colorPalette: any = {
+ primary: {},
+ secondary: {},
+ tertiary: {},
+ others: {},
+ };
+
+ for (const colorKey in colors) {
+ const category = colorKey.replace(/\d+/g, '');
+ const shade = colorKey.replace(/\D+/g, '');
+
+ if (shade === '') {
+ colorPalette.others[category] = colors[colorKey];
+ continue;
+ }
+
+ if (!colorPalette[category]) {
+ colorPalette[category] = {};
+ }
+
+ colorPalette[category][shade] = colors[colorKey];
+ }
+
+ const sortedColorPalette: any = {};
+
+ for (const category in colorPalette) {
+ if (category !== 'others') {
+ sortedColorPalette[category] = Object.fromEntries(
+ Object.entries(colorPalette[category]).sort()
+ );
+ }
+ }
+
+ sortedColorPalette.others = { ...colorPalette.others };
+
+ return sortedColorPalette;
+ }, [colors]);
+ return (
+
+
+ {Object.keys(sortedPalette).map((category: string) => {
+ return (
+
+
+ {category}
+
+
+ {Object.keys(sortedPalette[category]).map((shade: string) => {
+ return (
+
+
+
+ {category === 'others'
+ ? `${shade}`
+ : `${category}${shade}`}
+
+ {sortedPalette[category][shade]}
+
+
+ );
+ })}
+
+
+ );
+ })}
+
+
+ );
+};
+
+const spaces: any = config.tokens.space;
+
+const sortedSpaceObject: any = spaces;
+
+// Convert the map to an array of key-value pairs for sorting
+const mapEntries = Object.entries(sortedSpaceObject);
+
+// Sort the map entries based on the keys
+mapEntries.sort(([keyA, valueA]: any, [keyB, valueB]: any) => {
+ // Treat 'px' as the smallest and 'full' as the largest
+ // Place '0' at the top
+ if (keyA === '0') return -1;
+ if (keyB === '0') return 1;
+
+ // Treat 'px' as the second smallest
+ if (keyA === 'px') return -1;
+ if (keyB === 'px') return 1;
+
+ // Treat 'full' as the largest
+ if (keyA === 'full') return 1;
+ if (keyB === 'full') return -1;
+
+ // Values with '%' should be grouped and sorted at the end
+ const isValueAPercentage = valueA.toString().includes('%');
+ const isValueBPercentage = valueB.toString().includes('%');
+ if (isValueAPercentage && !isValueBPercentage) return 1;
+ if (isValueBPercentage && !isValueAPercentage) return -1;
+
+ // Group values with the same denominator and sort them
+ const [numA, denomA] = keyA.split('/').map(parseFloat);
+ const [numB, denomB] = keyB.split('/').map(parseFloat);
+
+ if (!isNaN(numA) && !isNaN(denomA) && !isNaN(numB) && !isNaN(denomB)) {
+ if (denomA === denomB) {
+ return numA - numB;
+ } else {
+ return denomA - denomB; // Sort by denominator if they are different
+ }
+ }
+
+ // For numeric keys, compare them as numbers
+ if (!isNaN(numA) && !isNaN(numB)) {
+ return numA - numB;
+ }
+
+ // For other keys, compare them as strings
+ return keyA.localeCompare(keyB);
+});
+// const spaceElementsArray =
+// Create a new Map from the sorted map entries
+
+const SpaceComponent = () => {
+ const { colorMode } = useContext(LayoutContext);
+ return (
+
+
+
+
+ Tokens
+
+
+ Value (Pixels)
+
+ Representation
+
+ {mapEntries.map(([key, value]: any) => {
+ return (
+
+
+
+ {key}
+
+
+ {value}
+
+
+
+
+
+ );
+ })}
+
+
+ );
+};
+
+const opacity: any = config.tokens.opacity;
+
+const OpacityComponent = () => {
+ const { colorMode } = useContext(LayoutContext);
+ return (
+
+
+ {Object.keys(opacity).map((op: string) => {
+ return (
+
+
+
+ {op}
+
+
+ ({opacity[op]})
+
+
+
+ );
+ })}
+
+
+ );
+};
+
+const ShadowsComponent = () => {
+ const { colorMode } = useContext(LayoutContext);
+ const hardShadows: any = config.globalStyle.variants.hardShadow;
+ const softShadows: any = config.globalStyle.variants.softShadow;
+
+ return (
+
+
+
+ Hard Shadows
+
+
+ {Object.keys(hardShadows).map((shadow: string) => {
+ return (
+ {
+ return (
+
+
+ {shadow}
+
+
+ );
+ }}
+ >
+
+
+ {JSON.stringify(hardShadows[shadow], null, 2)}
+
+
+
+ );
+ })}
+
+
+ Soft Shadows
+
+
+ {Object.keys(softShadows).map((shadow: string) => {
+ return (
+ {
+ return (
+
+
+ {shadow}
+
+
+ );
+ }}
+ >
+
+
+ {JSON.stringify(softShadows[shadow], null, 2)}
+
+
+
+ );
+ })}
+
+
+
+ );
+};
+
+const borderWidths = config.tokens.borderWidths;
+const BorderWidthComponent = () => {
+ const { colorMode } = useContext(LayoutContext);
+ return (
+
+
+ {Object.keys(borderWidths).map((borderWidth: any) => {
+ return (
+
+ {borderWidth}
+
+ ({borderWidths[borderWidth]})
+
+
+ );
+ })}
+
+
+ );
+};
+
+const radii = config.tokens.radii;
+const RadiiComponent = () => {
+ const { colorMode } = useContext(LayoutContext);
+ return (
+
+
+ {Object.keys(radii).map((borderRadiusValue: any) => {
+ return (
+
+ {borderRadiusValue}
+
+ ({radii[borderRadiusValue]})
+
+
+ );
+ })}
+
+
+ );
+};
+
+export {
+ ColorPaletteComponent,
+ SpaceComponent,
+ OpacityComponent,
+ ShadowsComponent,
+ BorderWidthComponent,
+ RadiiComponent,
+};
+
+export { Text, VStack, HStack, Box };
diff --git a/example/storybook-nativewind/src/core-components/nativewind/Wrapper.tsx b/example/storybook-nativewind/src/core-components/nativewind/Wrapper.tsx
index b0c5b269c8..54ab86a8ed 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/Wrapper.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/Wrapper.tsx
@@ -1,7 +1,30 @@
'use client';
import React from 'react';
import { Box, Center, useColorMode } from '@gluestack-ui/themed';
-import { GluestackUIProvider } from './gluestack-ui-provider';
+import { config } from './gluestack-ui-provider/config';
+
+export function GluestackUIProvider({
+ mode = 'light',
+ ...props
+}: {
+ mode?: 'light' | 'dark';
+ children?: any;
+}) {
+ if (config[mode] && typeof document !== 'undefined') {
+ const element = document.documentElement;
+ if (element) {
+ const head = element.querySelector('head');
+ const style = document.createElement('style');
+ const stringcssvars = Object.keys(config[mode]).reduce((acc, cur) => {
+ acc += `${cur}:${config[mode][cur]};`;
+ return acc;
+ }, '');
+ style.innerHTML = `:root {${stringcssvars}} `;
+ if (head) head.appendChild(style);
+ }
+ }
+ return props.children;
+}
const Wrapper = ({ children, ...props }: any) => {
const colorMode: any = useColorMode();
diff --git a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx
index c949bd7333..fd5463bba3 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx
@@ -13,6 +13,7 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt
import { H3 } from '@expo/html-elements';
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
+const SCOPE = 'ACCORDION';
/** Styles */
const accordionStyle = tva({
@@ -21,6 +22,11 @@ const accordionStyle = tva({
variant: {
filled: 'bg-white',
},
+ size: {
+ sm: '',
+ md: '',
+ lg: '',
+ },
},
});
const accordionItemStyle = tva({
@@ -74,17 +80,18 @@ const accordionTriggerStyle = tva({
base: 'w-full py-5 px-5 flex-row justify-between items-center web:outline-none focus:outline-none data-[disabled=true]:opacity-40 data-[disabled=true]:cursor-not-allowed data-[focus-visible=true]:bg-background-50',
});
+const Root =
+ Platform.OS === 'web'
+ ? withStyleContext(View, SCOPE)
+ : withStyleContextAndStates(View, SCOPE);
+
+const Header = Platform.OS === 'web' ? H3 : View;
/** Creator */
const UIAccordion = createAccordion({
- //@ts-ignore
- Root:
- Platform.OS === 'web'
- ? withStyleContext(View)
- : withStyleContextAndStates(View),
+ Root: Root,
Item: View,
- // @ts-ignore
- Header: Platform.OS === 'web' ? H3 : View,
//@ts-ignore
+ Header: Header,
Trigger: Pressable,
Icon: View,
TitleText: Text,
@@ -138,7 +145,6 @@ const Accordion = React.forwardRef(
{
className,
variant = 'filled',
- //@ts-ignore
size = 'md',
...props
}: { className?: string } & IAccordionProps,
@@ -160,7 +166,7 @@ const AccordionItem = React.forwardRef(
{ className, ...props }: { className?: string } & IAccordionItemProps,
ref?: any
) => {
- const { variant } = useStyleContext();
+ const { variant } = useStyleContext(SCOPE);
return (
{
- const { size } = useStyleContext();
+ const { size } = useStyleContext(SCOPE);
return (
{
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
if (AsComp) {
return (
@@ -243,6 +249,7 @@ const AccordionIcon = React.forwardRef(
return (
{
- const { size } = useStyleContext();
+ const { size } = useStyleContext(SCOPE);
return (
{
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
{
- return (
- , 'context'> &
+ VariantProps;
+const Alert = React.forwardRef(
+ (
+ {
+ className,
+ variant = 'solid',
+ action = 'info',
+ ...props
+ }: { className?: string } & IAlertProps,
+ ref?: any
+ ) => {
+ return (
+ &
+ VariantProps;
+const AlertText = React.forwardRef(
+ (
+ {
+ className,
+ isTruncated,
+ bold,
+ underline,
+ strikeThrough,
+ size = 'md',
+ sub,
+ italic,
+ highlight,
+ ...props
+ }: { className?: string } & IAlertTextProps,
+ ref?: any
+ ) => {
+ return (
+ &
+ VariantProps;
const AlertIcon = ({
className,
size = 'md',
fill = 'none',
as: AsComp,
...props
-}: any) => {
- const { action } = useStyleContext();
+}: {
+ className?: string;
+ as?: any;
+ fill?: string;
+ color?: any;
+} & IAlertIconProps) => {
+ const { action: parentAction } = useStyleContext(SCOPE);
+ const { color = defaultColors[parentAction as keyof DefaultColors] } = props;
+
if (AsComp) {
return (
- , 'context'> &
+ VariantProps;
export const Avatar = React.forwardRef(
(
- {
- className,
- variant = 'solid',
- size = 'md',
- action = 'primary',
- ...props
- }: any,
- ref
+ { className, size = 'md', ...props }: { className?: string } & IAvatarProps,
+ ref?: any
) => {
return (
&
+ VariantProps;
export const AvatarBadge = React.forwardRef(
- ({ className, variant, size, action, ...props }: any, ref) => {
- const {
- variant: parentVariant,
- size: parentSize,
- action: parentAction,
- } = useStyleContext();
+ (
+ { className, size, ...props }: { className?: string } & IAvatarBadgeProps,
+ ref?: any
+ ) => {
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
;
export const AvatarFallbackText = React.forwardRef(
- ({ className, variant, size, action, ...props }: any, ref) => {
- const {
- variant: parentVariant,
- size: parentSize,
- action: parentAction,
- } = useStyleContext();
+ (
+ {
+ className,
+ size,
+ ...props
+ }: { className?: string } & IAvatarFallbackTextProps,
+ ref?: any
+ ) => {
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
&
+ VariantProps;
export const AvatarImage = React.forwardRef(
- ({ className, ...props }: any, ref) => {
+ (
+ { className, ...props }: { className?: string } & IAvatarImageProps,
+ ref?: any
+ ) => {
return (
&
+ VariantProps;
export const AvatarGroup = React.forwardRef(
- ({ className, ...props }: any, ref) => {
+ (
+ { className, ...props }: { className?: string } & IAvatarGroupProps,
+ ref?: any
+ ) => {
return (
{
- const { size: parentSize, action: parentAction } = useStyleContext();
+ const { size: parentSize, action: parentAction } = useStyleContext(SCOPE);
return (
& {
- as?: any;
+interface DefaultColors {
+ info: string;
+ success: string;
+ error: string;
+ warning: string;
+ muted: string;
+}
+const defaultColors: DefaultColors = {
+ info: '#0B8DCD',
+ success: '#2A7948',
+ error: '#DC2626',
+ warning: '#D76C1F',
+ muted: '#515252',
};
+type IBadgeIconProps = React.ComponentProps &
+ VariantProps;
const BadgeIcon = ({
className,
size,
as: AsComp,
+ fill = 'none',
...props
-}: IBadgeIconProps & { className?: any }) => {
- const { size: parentSize, action: parentAction } = useStyleContext();
+}: IBadgeIconProps & { className?: any } & {
+ color?: any;
+ fill?: string;
+ as?: any;
+}) => {
+ const { size: parentSize, action: parentAction } = useStyleContext(SCOPE);
+ const { color = defaultColors[parentAction as keyof DefaultColors] } = props;
+
if (AsComp) {
return (
- &
VariantProps;
diff --git a/example/storybook-nativewind/src/core-components/nativewind/box/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/box/index.web.tsx
new file mode 100644
index 0000000000..11a28108d0
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/box/index.web.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { boxStyle } from './styles';
+
+const Box = React.forwardRef(({ className, ...props }: any, ref) => {
+ return (
+
+ );
+});
+
+Box.displayName = 'Box';
+export { Box };
diff --git a/example/storybook-nativewind/src/core-components/nativewind/box/styles.tsx b/example/storybook-nativewind/src/core-components/nativewind/box/styles.tsx
new file mode 100644
index 0000000000..95ace8c57f
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/box/styles.tsx
@@ -0,0 +1,2 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+export const boxStyle = tva({});
diff --git a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
index c48ddfb3e6..aaa356b91a 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
@@ -19,12 +19,14 @@ import {
Platform,
} from 'react-native';
+const SCOPE = 'BUTTON';
+const Root =
+ Platform.OS === 'web'
+ ? withStyleContext(Pressable, SCOPE)
+ : withStyleContextAndStates(Pressable, SCOPE);
+
const UIButton = createButton({
- // @ts-ignore
- Root:
- Platform.OS === 'web'
- ? withStyleContext(Pressable)
- : withStyleContextAndStates(Pressable),
+ Root: Root,
Text,
Group: View,
Spinner: ActivityIndicator,
@@ -219,10 +221,6 @@ const buttonIconStyle = tva({
type IButtonProps = Omit, 'context'> &
VariantProps;
-
-type IButtonTextProps = React.ComponentProps &
- VariantProps;
-
const Button = React.forwardRef(
(
{
@@ -232,11 +230,10 @@ const Button = React.forwardRef(
action = 'primary',
...props
}: { className?: string } & IButtonProps,
- ref
+ ref?: any
) => {
return (
;
-
-type IButtonIcon = React.ComponentProps & {
- as?: any;
-};
+type IButtonTextProps = React.ComponentProps &
+ VariantProps;
const ButtonText = React.forwardRef(
(
{
@@ -266,13 +260,13 @@ const ButtonText = React.forwardRef(
variant: parentVariant,
size: parentSize,
action: parentAction,
- } = useStyleContext();
+ } = useStyleContext(SCOPE);
return (
&
+ VariantProps;
const ButtonIcon = ({
className,
as: AsComp,
+ fill = 'none',
size,
...props
-}: IButtonIcon & { className?: any }) => {
+}: IButtonIcon & {
+ className?: any;
+ fill?: string;
+ color?: string;
+ as?: any;
+}) => {
const {
variant: parentVariant,
size: parentSize,
action: parentAction,
- } = useStyleContext();
+ } = useStyleContext(SCOPE);
+
+ let localColor;
+ if (parentVariant !== 'solid') {
+ localColor = defaultColors[parentAction as keyof DefaultColors];
+ } else {
+ localColor = '#FEFEFF';
+ }
+ const { color = localColor } = props;
if (AsComp) {
return (
- &
+ VariantProps;
-const Card = ({
- className,
- size = 'md',
- variant = 'elevated',
- ...props
-}: any) => {
- return (
-
+ );
+};
+
+Card.displayName = 'Card';
+
+export { Card };
diff --git a/example/storybook-nativewind/src/core-components/nativewind/card/styles.tsx b/example/storybook-nativewind/src/core-components/nativewind/card/styles.tsx
new file mode 100644
index 0000000000..d5fa01f8e3
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/card/styles.tsx
@@ -0,0 +1,16 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+export const cardStyle = tva({
+ variants: {
+ size: {
+ sm: 'p-3 rounded',
+ md: 'p-4 rounded-md',
+ lg: 'p-6 rounded-xl',
+ },
+ variant: {
+ elevated: 'bg-background-0',
+ outline: 'border border-outline-200 ',
+ ghost: 'rounded-none',
+ filled: 'bg-background-50',
+ },
+ },
+});
diff --git a/example/storybook-nativewind/src/core-components/nativewind/center/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/center/index.tsx
index a0d3514458..f5bc459a7c 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/center/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/center/index.tsx
@@ -1,10 +1,6 @@
-'use client';
import { View } from 'react-native';
import React from 'react';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-const centerStyle = tva({
- base: 'justify-center items-center',
-});
+import { centerStyle } from './styles';
const Center = ({ className, ...props }: any) => {
return
;
+};
+
+Center.displayName = 'Center';
+
+export { Center };
diff --git a/example/storybook-nativewind/src/core-components/nativewind/center/styles.tsx b/example/storybook-nativewind/src/core-components/nativewind/center/styles.tsx
new file mode 100644
index 0000000000..d247d80ca4
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/center/styles.tsx
@@ -0,0 +1,4 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+export const centerStyle = tva({
+ base: 'web:flex web:flex-col justify-center items-center',
+});
diff --git a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
index bd746e5920..60a7815e13 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
@@ -11,18 +11,17 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
import { Platform } from 'react-native';
-import { Check } from 'lucide-react-native';
+const SCOPE = 'CHECKBOX';
const UICheckbox = createCheckbox({
// @ts-ignore
Root:
Platform.OS === 'web'
- ? withStyleContext(View)
- : withStyleContextAndStates(Pressable),
+ ? withStyleContext(View, SCOPE)
+ : withStyleContextAndStates(Pressable, SCOPE),
Group: withStates(View),
- Icon: withStates(Check),
+ Icon: withStates(View),
Label: withStates(Text),
Indicator: withStates(View),
});
@@ -60,7 +59,7 @@ const checkboxLabelStyle = tva({
});
const checkboxIconStyle = tva({
- base: 'text-typography-0 data-[disabled=true]:opacity-40 fill-none',
+ base: 'text-typography-0 data-[disabled=true]:opacity-40',
parentVariants: {
size: {
@@ -81,8 +80,8 @@ const Checkbox = React.forwardRef(
className,
size = 'md',
...props
- }: { className?: string } & ICheckboxProps,
- ref
+ }: { className?: string; size?: string } & ICheckboxProps,
+ ref?: any
) => {
return (
{
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
&
const CheckboxLabel = React.forwardRef(
(
{ className, ...props }: { className?: string } & ICheckboxLabelProps,
- ref
+ ref?: any
) => {
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
& {
- as?: any;
-};
+type ICheckboxIconProps = React.ComponentProps &
+ VariantProps;
const CheckboxIcon = React.forwardRef(
- (
- {
- className,
- as: AsComp,
- ...props
- }: ICheckboxIconProps & { className?: any },
- ref
- ) => {
- const { size: parentSize } = useStyleContext();
+ ({
+ className,
+ as: AsComp,
+ fill = 'none',
+ size,
+ ...props
+ }: ICheckboxIconProps & {
+ className?: any;
+ fill?: string;
+ color?: string;
+ as?: any;
+ }) => {
+ const { size: parentSize } = useStyleContext(SCOPE);
+ const { color = 'gray' } = props;
+
if (AsComp) {
return (
-
+
);
@@ -185,15 +195,17 @@ const CheckboxIcon = React.forwardRef(
size: parentSize,
},
class: className,
+ size,
})}
{...props}
- ref={ref}
+ //@ts-ignore
+ fill={fill}
+ color={color}
/>
);
}
);
-// Assign display names
Checkbox.displayName = 'Checkbox';
CheckboxIndicator.displayName = 'CheckboxIndicator';
CheckboxLabel.displayName = 'CheckboxLabel';
diff --git a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
index 9044e8f60c..20a3e5be5f 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
@@ -11,18 +11,16 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
import React from 'react';
-
+const SCOPE = 'FAB';
export const UIFab = createFab({
- // @ts-ignore
Root:
Platform.OS === 'web'
- ? withStyleContext(Pressable)
- : withStyleContextAndStates(Pressable),
+ ? withStyleContext(Pressable, SCOPE)
+ : withStyleContextAndStates(Pressable, SCOPE),
Label: Text,
Icon: View,
});
-// @ts-ignore
cssInterop(UIFab, { className: 'style' });
cssInterop(UIFab.Label, { className: 'style' });
cssInterop(UIFab.Icon, { className: 'style' });
@@ -142,7 +140,7 @@ const FabLabel = React.forwardRef(
}: any,
ref: any
) => {
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
{
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
if (AsComp) {
return (
{
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
{
};
export const UIFormControl = createFormControl({
- Root: withStyleContext(View),
+ Root: withStyleContext(View, SCOPE),
Error: View,
ErrorText: Text,
ErrorIcon: View,
@@ -282,7 +283,7 @@ const FormControlErrorText = ({
size,
...props
}: { className?: string } & IFormControlErrorTextProps) => {
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
{
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
if (AsComp) {
return (
{
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
{
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
- {props.children}
+
+ {props.children}
+
);
}
diff --git a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx
index df62bbd792..71d6147949 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx
@@ -1,12 +1,15 @@
'use client';
+import React from 'react';
import { config } from './config';
+import { OverlayProvider } from '@gluestack-ui/overlay';
+import { ToastProvider } from '@gluestack-ui/toast';
export function GluestackUIProvider({
mode = 'light',
...props
}: {
- mode: 'light' | 'dark';
- children: any;
+ mode?: 'light' | 'dark';
+ children?: any;
}) {
if (config[mode] && typeof document !== 'undefined') {
const element = document.documentElement;
@@ -21,5 +24,9 @@ export function GluestackUIProvider({
if (head) head.appendChild(style);
}
}
- return props.children;
+ return (
+
+ {props.children}
+
+ );
}
diff --git a/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx
index 438d214ed4..027beba6ce 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx
@@ -1,46 +1,7 @@
-'use client';
import React, { useCallback } from 'react';
import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
-
-const headingStyle = tva({
- base: 'text-typography-900 font-bold font-heading tracking-sm my-0',
- variants: {
- isTruncated: {
- true: 'web:truncate',
- },
- bold: {
- true: 'font-bold',
- },
- underline: {
- true: 'underline',
- },
- strikeThrough: {
- true: 'line-through',
- },
- sub: {
- true: 'text-xs',
- },
- italic: {
- true: 'italic',
- },
- highlight: {
- true: 'bg-yellow-500',
- },
- size: {
- '5xl': 'text-6xl',
- '4xl': 'text-5xl',
- '3xl': 'text-4xl',
- '2xl': 'text-3xl',
- 'xl': 'text-2xl',
- 'lg': 'text-xl',
- 'md': 'text-lg',
- 'sm': 'text-base',
- 'xs': 'text-sm',
- },
- },
-});
+import { headingStyle } from './styles';
cssInterop(H4, { className: 'style' });
diff --git a/example/storybook-nativewind/src/core-components/nativewind/heading/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/heading/index.web.tsx
new file mode 100644
index 0000000000..48ad1a818b
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/heading/index.web.tsx
@@ -0,0 +1,78 @@
+import React, { memo } from 'react';
+import { headingStyle } from './styles';
+
+const Heading = memo(
+ ({ className, size = 'lg', as: AsComp, ...props }: any) => {
+ const MappedHeading = ({ size }: any) => {
+ switch (size) {
+ case '5xl':
+ case '4xl':
+ case '3xl':
+ return (
+ &
+ VariantProps;
-const HStack = ({ className, space, reversed, ...props }: any) => {
- return (
- ;
+
+const HStack = React.forwardRef(
+ ({ className, space, reversed, ...props }: IHStackProps, ref?: any) => {
+ return (
+
+ );
+ }
+);
+
+HStack.displayName = 'HStack';
+
+export { HStack };
diff --git a/example/storybook-nativewind/src/core-components/nativewind/hstack/styles.tsx b/example/storybook-nativewind/src/core-components/nativewind/hstack/styles.tsx
new file mode 100644
index 0000000000..da89d00240
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/hstack/styles.tsx
@@ -0,0 +1,19 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+export const hstackStyle = tva({
+ base: 'web:flex flex-row',
+ variants: {
+ space: {
+ 'xs': 'gap-1',
+ 'sm': 'gap-2',
+ 'md': 'gap-3',
+ 'lg': 'gap-4',
+ 'xl': 'gap-5',
+ '2xl': 'gap-6',
+ '3xl': 'gap-7',
+ '4xl': 'gap-8',
+ },
+ reversed: {
+ true: 'flex-row-reverse',
+ },
+ },
+});
diff --git a/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx
index e9e734d529..2e92fa3bd0 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx
@@ -4,13 +4,14 @@ import { createIcon } from '@gluestack-ui/icon';
import { Path, Svg } from 'react-native-svg';
import { tva } from '@gluestack-ui/nativewind-utils/tva';
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
+import { View } from 'react-native';
export const UIIcon = createIcon({
Root: Svg,
});
const iconStyle = tva({
- base: 'text-typography-900',
+ // base: 'text-typography-900',
variants: {
size: {
'2xs': 'h-3 w-3',
@@ -30,12 +31,20 @@ export const Icon = React.forwardRef(
) => {
if (AsComp) {
return (
-
+
);
}
return (
diff --git a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
index de9b02c382..6ce64aae15 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
@@ -11,20 +11,21 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt
import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+const SCOPE = 'INPUT';
const UIInput = createInput({
// @ts-ignore
Root:
Platform.OS === 'web'
- ? withStyleContext(View)
- : withStyleContextAndStates(View),
+ ? withStyleContext(View, SCOPE)
+ : withStyleContextAndStates(View, SCOPE),
Icon: View,
Slot: Pressable,
Input: Platform.OS === 'web' ? TextInput : withStates(TextInput),
});
const inputStyle = tva({
- base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300',
+ base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300 items-center',
variants: {
size: {
@@ -36,7 +37,7 @@ const inputStyle = tva({
variant: {
underlined:
- 'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
+ 'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700',
outline:
'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700',
@@ -48,7 +49,7 @@ const inputStyle = tva({
});
const inputIconStyle = tva({
- base: 'text-typography-400',
+ // base: 'text-typography-400',
parentVariants: {
size: {
'2xs': 'h-3 w-3',
@@ -76,17 +77,17 @@ const inputFieldStyle = tva({
},
size: {
- '2xs': 'text-2xs',
- 'xs': 'text-xs',
- 'sm': 'text-sm',
- 'md': 'text-base',
- 'lg': 'text-lg',
- 'xl': 'text-xl',
- '2xl': 'text-2xl',
- '3xl': 'text-3xl',
- '4xl': 'text-4xl',
- '5xl': 'text-5xl',
- '6xl': 'text-6xl',
+ '2xs': 'text-2xs leading-[0px]',
+ 'xs': 'text-xs leading-[0px]',
+ 'sm': 'text-sm leading-[0px]',
+ 'md': 'text-base leading-none',
+ 'lg': 'text-lg leading-[0px]',
+ 'xl': 'text-xl leading-[0px]',
+ '2xl': 'text-2xl leading-[0px]',
+ '3xl': 'text-3xl leading-[0px]',
+ '4xl': 'text-4xl leading-[0px]',
+ '5xl': 'text-5xl leading-[0px]',
+ '6xl': 'text-6xl leading-[0px]',
},
},
});
@@ -98,7 +99,6 @@ cssInterop(UIInput.Input, { className: 'style' });
type IInputProps = React.ComponentProps &
VariantProps;
-//@ts-ignore
const Input = React.forwardRef(
(
{
@@ -107,7 +107,7 @@ const Input = React.forwardRef(
size = 'md',
...props
}: { className?: string } & IInputProps,
- ref
+ ref?: any
) => {
return (
& { as: any };
-
const InputIcon = React.forwardRef(
(
{
@@ -129,30 +128,37 @@ const InputIcon = React.forwardRef(
fill = 'none',
as: AsComp,
...props
- }: { className?: any } & IInputIconProps,
- ref
+ }: { className?: any; fill?: string; color?: string } & IInputIconProps,
+ ref?: any
) => {
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
+ const { color = '#8C8C8C' } = props;
if (AsComp) {
return (
- &
VariantProps;
-
const InputSlot = React.forwardRef(
- ({ className, ...props }: { className?: string } & IInputSlotProps, ref) => {
+ (
+ { className, ...props }: { className?: string } & IInputSlotProps,
+ ref?: any
+ ) => {
return (
&
VariantProps;
-
const InputField = React.forwardRef(
- ({ className, ...props }: { className?: string } & IInputFieldProps, ref) => {
- const { variant: parentVariant, size: parentSize } = useStyleContext();
+ (
+ { className, ...props }: { className?: string } & IInputFieldProps,
+ ref?: any
+ ) => {
+ const { variant: parentVariant, size: parentSize } = useStyleContext(SCOPE);
return (
&
VariantProps;
+
const LinkText = React.forwardRef(
(
{ className, ...props }: { className?: string } & ILinkTextProps,
diff --git a/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx
index 4a1f2c940f..d5f8a63c91 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx
@@ -18,12 +18,13 @@ import type { VariantProps } from '@gluestack-ui/nativewind-utils';
const AnimatedPressable = createMotionAnimatedComponent(Pressable);
+const SCOPE = 'MODAL';
+
const UIModal = createModal({
- // @ts-ignore
Root:
Platform.OS === 'web'
- ? withStyleContext(View)
- : withStyleContextAndStates(View),
+ ? withStyleContext(View, SCOPE)
+ : withStyleContextAndStates(View, SCOPE),
Backdrop: AnimatedPressable,
Content: Motion.View,
Body: ScrollView,
@@ -163,7 +164,7 @@ const ModalContent = React.forwardRef(
{ className, size, ...props }: { className?: string } & IModalContentProps,
ref?: any
) => {
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
{
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
{
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
{
- return (
- , 'context'> &
+ VariantProps;
+const Radio = React.forwardRef(
+ (
+ { className, size = 'md', ...props }: { className?: string } & IRadioProps,
+ ref?: any
+ ) => {
+ return (
+ &
+ VariantProps;
+const RadioGroup = React.forwardRef(
+ (
+ { className, ...props }: { className?: string } & IRadioGroupProps,
+ ref?: any
+ ) => {
+ return (
+ &
+ VariantProps;
+const RadioIndicator = React.forwardRef(
+ (
+ { className, ...props }: { className?: string } & IRadioIndicatorProps,
+ ref?: any
+ ) => {
+ const { size } = useStyleContext(SCOPE);
+ return (
+ &
+ VariantProps;
+const RadioLabel = React.forwardRef(
+ (
+ { className, ...props }: { className?: string } & IRadioLabelProps,
+ ref?: any
+ ) => {
+ const { size } = useStyleContext(SCOPE);
+ return (
+ &
+ VariantProps;
+const RadioIcon = ({
+ className,
+ as: AsComp,
+ size,
+ fill = 'none',
+ ...props
+}: IRadioIconProps & {
+ className?: string;
+ fill?: string;
+ color?: string;
+ as?: any;
+}) => {
+ const { size: parentSize } = useStyleContext(SCOPE);
+ const { color = 'gray' } = props;
-const RadioIcon = ({ className, as: AsComp, size, ...props }: any) => {
- const { size: parentSize } = useStyleContext();
if (AsComp) {
return (
-
+
);
@@ -128,13 +206,16 @@ const RadioIcon = ({ className, as: AsComp, size, ...props }: any) => {
return (
&
+ React.ComponentProps;
+
+const Select = React.forwardRef(
+ (
+ {
+ className,
+ size = 'md',
+ variant = 'outline',
+ ...props
+ }: ISelectProps & { className?: string },
+ ref?: any
+ ) => {
+ return (
+ &
+ React.ComponentProps;
+
+const SelectTrigger = React.forwardRef(
+ (
+ { className, ...props }: ISelectTriggerProps & { className?: string },
+ ref?: any
+ ) => {
+ const { size: parentSize, variant: parentVariant } = useStyleContext();
+ return (
+ &
+ React.ComponentProps;
+
+const SelectInput = React.forwardRef(
+ (
+ { className, ...props }: ISelectInputProps & { className?: string },
+ ref?: any
+ ) => {
+ const { size: parentSize, variant: parentVariant } = useStyleContext();
+ return (
+ &
+ React.ComponentProps;
+
+const SelectIcon = React.forwardRef(
+ (
+ {
+ className,
+ as: AsComp,
+ size,
+ // @ts-ignore
+ fill = 'none',
+ ...props
+ }: ISelectIcon & { as?: any },
+ ref?: any
+ ) => {
+ const { size: parentSize } = useStyleContext();
+ if (AsComp) {
+ return (
+
+
+ );
+ }
+ return (
+ &
+ React.ComponentProps;
+
+type IActionsheetContentProps = VariantProps &
+ React.ComponentProps;
+
+type IActionsheetItemProps = VariantProps &
+ React.ComponentProps;
+
+type IActionsheetItemTextProps = VariantProps &
+ React.ComponentProps;
+
+type IActionsheetDragIndicatorProps = VariantProps<
+ typeof actionsheetDragIndicatorStyle
+> &
+ React.ComponentProps;
+
+type IActionsheetDragIndicatorWrapperProps = VariantProps<
+ typeof actionsheetDragIndicatorWrapperStyle
+> &
+ React.ComponentProps;
+
+type IActionsheetBackdropProps = VariantProps &
+ React.ComponentProps;
+
+type IActionsheetScrollViewProps = VariantProps<
+ typeof actionsheetScrollViewStyle
+> &
+ React.ComponentProps;
+
+type IActionsheetVirtualizedListProps = VariantProps<
+ typeof actionsheetVirtualizedListStyle
+> &
+ React.ComponentProps;
+
+type IActionsheetFlatListProps = VariantProps &
+ React.ComponentProps;
+
+type IActionsheetSectionListProps = VariantProps<
+ typeof actionsheetSectionListStyle
+> &
+ React.ComponentProps;
+
+type IActionsheetSectionHeaderTextProps = VariantProps<
+ typeof actionsheetSectionHeaderTextStyle
+> &
+ React.ComponentProps;
+
+type IActionsheetIconProps = VariantProps &
+ React.ComponentProps;
+
+const Actionsheet = React.forwardRef(
+ ({ className, ...props }: IActionsheetProps, ref?: any) => {
+ return (
+ {
- const { size: parentSize } = useStyleContext();
+ ({ className, size, ...props }: any, ref?: any) => {
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
{
+ ({ className, ...props }: any, ref?: any) => {
const {
orientation: parentOrientation,
size: parentSize,
isReversed,
- } = useStyleContext();
+ } = useStyleContext(SCOPE);
return (
{
- const { orientation: parentOrientation } = useStyleContext();
+ ({ className, ...props }: any, ref?: any) => {
+ const { orientation: parentOrientation } = useStyleContext(SCOPE);
return (
&
const Switch = React.forwardRef(
(
{ className, size = 'md', ...props }: { className?: string } & ISwitchProps,
- ref
+ ref?: any
) => {
return (
&
VariantProps;
diff --git a/example/storybook-nativewind/src/core-components/nativewind/text/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/text/index.web.tsx
new file mode 100644
index 0000000000..19834245dc
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/text/index.web.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { textStyle } from './styles';
+
+type ITextProps = React.ComponentProps<'span'> & VariantProps;
+
+const Text = React.forwardRef(
+ (
+ {
+ className,
+ isTruncated,
+ bold,
+ underline,
+ strikeThrough,
+ size = 'md',
+ sub,
+ italic,
+ highlight,
+ ...props
+ }: { className?: string } & ITextProps,
+ ref?: any
+ ) => {
+ return (
+ &
const TextareaInput = React.forwardRef(
(
{ className, ...props }: { className?: string } & ITextareaInputProps,
- ref
+ ref?: any
) => {
- const { size: parentSize } = useStyleContext();
+ const { size: parentSize } = useStyleContext(SCOPE);
return (
{
return (
&
VariantProps;
diff --git a/example/storybook-nativewind/src/core-components/nativewind/vstack/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/vstack/index.web.tsx
new file mode 100644
index 0000000000..4d52aae9c2
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/vstack/index.web.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+import { vstackStyle } from './styles';
+
+type IVStackProps = React.ComponentProps<'div'> &
+ VariantProps;
+
+const VStack = React.forwardRef(
+ ({ className, space, reversed, ...props }: IVStackProps, ref?: any) => {
+ return (
+
+ );
+ }
+);
+
+VStack.displayName = 'VStack';
+
+export { VStack };
diff --git a/example/storybook-nativewind/src/core-components/nativewind/vstack/styles.tsx b/example/storybook-nativewind/src/core-components/nativewind/vstack/styles.tsx
new file mode 100644
index 0000000000..8e5601f77f
--- /dev/null
+++ b/example/storybook-nativewind/src/core-components/nativewind/vstack/styles.tsx
@@ -0,0 +1,19 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+export const vstackStyle = tva({
+ base: 'web:flex flex-col',
+ variants: {
+ space: {
+ 'xs': 'gap-1',
+ 'sm': 'gap-2',
+ 'md': 'gap-3',
+ 'lg': 'gap-4',
+ 'xl': 'gap-5',
+ '2xl': 'gap-6',
+ '3xl': 'gap-7',
+ '4xl': 'gap-8',
+ },
+ reversed: {
+ true: 'flex-col-reverse',
+ },
+ },
+});
diff --git a/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx b/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx
index 05ad7427e5..22159937de 100644
--- a/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx
@@ -3,6 +3,8 @@ import React from 'react';
import { Box, Center } from '@gluestack-ui/themed';
import { StyledProvider, useColorMode } from '@gluestack-style/react';
import { createProvider } from '@gluestack-ui/provider';
+import { OverlayProvider } from '@gluestack-ui/overlay';
+import { ToastProvider } from '@gluestack-ui/toast';
const Provider = createProvider({ StyledProvider }) as any;
Provider.displayName = 'Provider';
@@ -20,7 +22,11 @@ const Wrapper = ({ children, ...props }: any) => {
}}
{...props}
>
- {children}
+
+
+ {children}
+
+
);
diff --git a/example/storybook-nativewind/src/core-components/themed/image/index.tsx b/example/storybook-nativewind/src/core-components/themed/image/index.tsx
index f971e2d95e..d808a0d390 100644
--- a/example/storybook-nativewind/src/core-components/themed/image/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/image/index.tsx
@@ -53,6 +53,15 @@ const StyledRoot = styled(
size: 'md',
},
},
- {}
+ {
+ componentName: 'Image',
+ resolveProps: ['tintColor'],
+ } as const,
+ {
+ propertyTokenMap: {
+ tintColor: 'colors',
+ },
+ }
);
+
export const Image = createImage({ Root: StyledRoot });
diff --git a/example/storybook-nativewind/src/getting-started/figma-ui-kit/index.nw.stories.mdx b/example/storybook-nativewind/src/getting-started/figma-ui-kit/index.nw.stories.mdx
new file mode 100644
index 0000000000..f45c09d866
--- /dev/null
+++ b/example/storybook-nativewind/src/getting-started/figma-ui-kit/index.nw.stories.mdx
@@ -0,0 +1,35 @@
+---
+title: Figma UI Kit | gluestack-ui
+description: The Figma UI Kit provides a collection of ready-to-use UI components from the gluestack-ui library.
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+
+
+```jsx
+export const config = {
+ light: vars({
+
+ ... // other tokens
+ //updated '--color-primary-0' value
+ '--color-primary-0': '#C0C0C0',
+
+ /* Added a new background color for light mode */
+ '--color-background-new': '#BAE7FC',
+
+ }),
+ dark: vars({
+ ... // other tokens
+ /* Added a new background color for dark mode */
+ '--color-background-new': '#89D6FA',
+ }),
+};
+
+```
+
+
+2. In case you are adding a new color in your config file, you need to update it in the tailwind.config.js file as well.
+
+
+```jsx
+ theme: {
+ extend: {
+ colors: {
+ background: {
+ ... // other color values,
+ /* Added a new background color */
+ new: 'var(--color-background-new)',
+ },
+ },
+ },
+ plugins: [],
+ },
+```
+
+You can customize all the tokens in `config`. For a complete list of tokens and default values, please check [default Tokens](https://gluestack.io/ui/nativewind/docs/theme-configuration/default-tokens).
+
+By utilizing this approach, you can seamlessly modify the primary color tokens of the theme while maintaining the overall theme configuration intact.
+
+If you want to extend the default tailwind config and add fonts, breakpoints, border radius values, and more, please refer to the [tailwindcss](https://tailwindcss.com/docs/theme#customizing-the-default-theme) documentation.
\ No newline at end of file
diff --git a/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.themed.stories.mdx b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.themed.stories.mdx
new file mode 100644
index 0000000000..f88f830148
--- /dev/null
+++ b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.themed.stories.mdx
@@ -0,0 +1,63 @@
+---
+title: Customizing Theme
+
+description: Customizing the theme in gluestack-ui with gluestack-style involves defining a theme configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences.
+
+showHeader: true
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { CollapsibleCode } from '@gluestack/design-system';
+
+
+
+```jsx
+
+
+export const config = createConfig({
+ // ... config
+ tokens: {
+ colors: {
+ // replacing primary color
+ primary0: '#ffffff',
+ primary50: '#a3fff4',
+ primary100: '#82fff0',
+ primary200: '#61ffed',
+ primary300: '#45fae5',
+ primary400: '#24f9e1',
+ primary500: '#17f3d9',
+ primary600: '#12e4cb',
+ primary700: '#17ccb7',
+ primary800: '#1ab5a3',
+ primary900: '#1c9f90',
+ primary950: '#000000',
+ ... // Other tokens
+ },
+ },
+});
+
+type Config = typeof config;
+
+declare module '@gluestack-style/react' {
+ interface ICustomConfig extends Config {}
+}
+
+```
+
+
+You can customize all the tokens in the `config`. For a complete list of tokens and default values, please check [default Tokens](https://gluestack.io/ui/gluestack-style/docs/theme-configuration/default-tokens).
+
+By utilizing this approach, you can seamlessly modify the primary color tokens of the theme while maintaining the overall theme configuration intact.
\ No newline at end of file
diff --git a/example/storybook-nativewind/src/theme-configuration/default-tokens/index.nw.stories.mdx b/example/storybook-nativewind/src/theme-configuration/default-tokens/index.nw.stories.mdx
new file mode 100644
index 0000000000..4b11f04490
--- /dev/null
+++ b/example/storybook-nativewind/src/theme-configuration/default-tokens/index.nw.stories.mdx
@@ -0,0 +1,27 @@
+---
+title: Default Tokens | gluestack-ui
+
+description: gluestack-ui with nativewind ships with default tokens that provide access to theme values and lets you build and customize your own themed components.
+
+pageTitle: Default Tokens
+
+pageDescription: gluestack-ui with nativewind ships with default tokens that provide access to theme values and lets you build and customize your own themed components.
+
+showHeader: true
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { ColorPaletteComponent } from "../../components/docs-components/DefaultComponent.tsx"
+
+(
) => React.ForwardRefExoticComponent<
React.PropsWithoutRef & React.RefAttributes
>;
+export {};
diff --git a/packages/nativewind/utils/withStates/index.js b/packages/nativewind/utils/withStates/index.js
index a7970d534f..3bde0c0e65 100644
--- a/packages/nativewind/utils/withStates/index.js
+++ b/packages/nativewind/utils/withStates/index.js
@@ -1,12 +1,11 @@
'use client';
import React from 'react';
import { extractDataClassName } from '../utils';
-export { useStyleContext } from '../context';
export const withStates = (Component) =>
React.forwardRef(({ states, className, ...props }, ref) => {
const classNamesFinal = React.useMemo(() => {
if (!className) return;
- extractDataClassName(className, states);
+ return extractDataClassName(className, states);
}, [className, states]);
return React.createElement(Component, {
className: classNamesFinal,
diff --git a/packages/nativewind/utils/withStates/index.tsx b/packages/nativewind/utils/withStates/index.tsx
index 7d3ead0bc2..983336ff12 100644
--- a/packages/nativewind/utils/withStates/index.tsx
+++ b/packages/nativewind/utils/withStates/index.tsx
@@ -1,7 +1,7 @@
'use client';
import React from 'react';
import { extractDataClassName } from '../utils';
-export { useStyleContext } from '../context';
+
type WithStatesProps = {
className?: string;
states?: any;
@@ -12,7 +12,7 @@ export const withStates = (Component: React.ComponentType) =>
({ states, className, ...props }: T & WithStatesProps, ref?: any) => {
const classNamesFinal = React.useMemo(() => {
if (!className) return;
- extractDataClassName(className, states);
+ return extractDataClassName(className, states);
}, [className, states]);
return (
diff --git a/packages/nativewind/utils/withStyleContext/index.d.ts b/packages/nativewind/utils/withStyleContext/index.d.ts
index e2ea322ab3..423f69f70e 100644
--- a/packages/nativewind/utils/withStyleContext/index.d.ts
+++ b/packages/nativewind/utils/withStyleContext/index.d.ts
@@ -1,11 +1,13 @@
import React from 'react';
-export { useStyleContext } from '../context';
type WithStyleContextProps = {
context?: any;
};
export declare const withStyleContext: (
- Component: React.ComponentType
+ Component: React.ComponentType,
+ scope?: string
) => React.ForwardRefExoticComponent<
React.PropsWithoutRef &
React.RefAttributes
>;
+export declare const useStyleContext: (scope?: string) => any;
+export {};
diff --git a/packages/nativewind/utils/withStyleContext/index.js b/packages/nativewind/utils/withStyleContext/index.js
index 0b6b9b6b06..986a4e50e6 100644
--- a/packages/nativewind/utils/withStyleContext/index.js
+++ b/packages/nativewind/utils/withStyleContext/index.js
@@ -1,13 +1,25 @@
'use client';
import React from 'react';
import { ParentContext } from '../context';
-export { useStyleContext } from '../context';
-export const withStyleContext = (Component) => {
+import { useParentContext } from '../context';
+export const withStyleContext = (Component, scope = 'Global') => {
return React.forwardRef(({ context, ...props }, ref) => {
+ let contextValues = {};
+ const parentContextValues = useParentContext();
+ if (parentContextValues[scope] !== undefined) {
+ parentContextValues[scope] = context;
+ contextValues = parentContextValues;
+ } else {
+ contextValues = { ...parentContextValues, [scope]: context };
+ }
return React.createElement(
ParentContext.Provider,
- { value: context },
+ { value: contextValues },
React.createElement(Component, { ...props, ref: ref })
);
});
};
+export const useStyleContext = (scope = 'Global') => {
+ const parentContextValues = useParentContext();
+ return parentContextValues[scope];
+};
diff --git a/packages/nativewind/utils/withStyleContext/index.tsx b/packages/nativewind/utils/withStyleContext/index.tsx
index 6f99c63466..ebce0f7a39 100644
--- a/packages/nativewind/utils/withStyleContext/index.tsx
+++ b/packages/nativewind/utils/withStyleContext/index.tsx
@@ -1,21 +1,34 @@
'use client';
import React from 'react';
import { ParentContext } from '../context';
-export { useStyleContext } from '../context';
-
+import { useParentContext } from '../context';
type WithStyleContextProps = {
context?: any;
};
export const withStyleContext = (
- Component: React.ComponentType
+ Component: React.ComponentType,
+ scope: string = 'Global'
) => {
return React.forwardRef(
({ context, ...props }: T & WithStyleContextProps, ref?: any) => {
+ let contextValues = {};
+ const parentContextValues = useParentContext();
+ if (parentContextValues[scope] !== undefined) {
+ parentContextValues[scope] = context;
+ contextValues = parentContextValues;
+ } else {
+ contextValues = { ...parentContextValues, [scope]: context };
+ }
return (
-
+
);
}
);
};
+
+export const useStyleContext = (scope: string = 'Global') => {
+ const parentContextValues = useParentContext();
+ return parentContextValues[scope];
+};
diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.d.ts b/packages/nativewind/utils/withStyleContextAndStates/index.d.ts
index 57aa5a2a7d..fc48d865f3 100644
--- a/packages/nativewind/utils/withStyleContextAndStates/index.d.ts
+++ b/packages/nativewind/utils/withStyleContextAndStates/index.d.ts
@@ -1,13 +1,15 @@
import React from 'react';
-export { useStyleContext } from '../context';
type WithStyleContextProps = {
context?: any;
className?: string;
states?: any;
};
export declare const withStyleContextAndStates: (
- Component: React.ComponentType
+ Component: React.ComponentType,
+ scope?: string
) => React.ForwardRefExoticComponent<
React.PropsWithoutRef &
React.RefAttributes
>;
+export declare const useStyleContext: (scope?: string) => any;
+export {};
diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.js b/packages/nativewind/utils/withStyleContextAndStates/index.js
index 6acde5282f..127c0c9536 100644
--- a/packages/nativewind/utils/withStyleContextAndStates/index.js
+++ b/packages/nativewind/utils/withStyleContextAndStates/index.js
@@ -2,16 +2,24 @@
import React from 'react';
import { extractDataClassName } from '../utils';
import { ParentContext } from '../context';
-export { useStyleContext } from '../context';
-export const withStyleContextAndStates = (Component) => {
+import { useParentContext } from '../context';
+export const withStyleContextAndStates = (Component, scope = 'Global') => {
return React.forwardRef(({ context, className, states, ...props }, ref) => {
+ let contextValues = {};
+ const parentContextValues = useParentContext();
+ if (parentContextValues[scope] !== undefined) {
+ parentContextValues[scope] = context;
+ contextValues = parentContextValues;
+ } else {
+ contextValues = { ...parentContextValues, [scope]: context };
+ }
const classNamesFinal = React.useMemo(() => {
if (!className) return;
return extractDataClassName(className, states);
}, [className, states]);
return React.createElement(
ParentContext.Provider,
- { value: context },
+ { value: contextValues },
React.createElement(Component, {
className: classNamesFinal,
...props,
@@ -20,3 +28,7 @@ export const withStyleContextAndStates = (Component) => {
);
});
};
+export const useStyleContext = (scope = 'Global') => {
+ const parentContextValues = useParentContext();
+ return parentContextValues[scope];
+};
diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.tsx b/packages/nativewind/utils/withStyleContextAndStates/index.tsx
index 91838c64d5..9e0a136811 100644
--- a/packages/nativewind/utils/withStyleContextAndStates/index.tsx
+++ b/packages/nativewind/utils/withStyleContextAndStates/index.tsx
@@ -2,7 +2,7 @@
import React from 'react';
import { extractDataClassName } from '../utils';
import { ParentContext } from '../context';
-export { useStyleContext } from '../context';
+import { useParentContext } from '../context';
type WithStyleContextProps = {
context?: any;
@@ -11,19 +11,30 @@ type WithStyleContextProps = {
};
export const withStyleContextAndStates = (
- Component: React.ComponentType
+ Component: React.ComponentType,
+ scope: string = 'Global'
) => {
return React.forwardRef(
(
{ context, className, states, ...props }: T & WithStyleContextProps,
ref?: any
) => {
+ let contextValues = {};
+ const parentContextValues = useParentContext();
+ if (parentContextValues[scope] !== undefined) {
+ parentContextValues[scope] = context;
+ contextValues = parentContextValues;
+ } else {
+ contextValues = { ...parentContextValues, [scope]: context };
+ }
+
const classNamesFinal = React.useMemo(() => {
if (!className) return;
return extractDataClassName(className, states);
}, [className, states]);
+
return (
-
+
(
}
);
};
+
+export const useStyleContext = (scope: string = 'Global') => {
+ const parentContextValues = useParentContext();
+ return parentContextValues[scope];
+};
diff --git a/packages/themed/CHANGELOG.md b/packages/themed/CHANGELOG.md
index 45f6c69c22..76ebfbb318 100644
--- a/packages/themed/CHANGELOG.md
+++ b/packages/themed/CHANGELOG.md
@@ -1,5 +1,26 @@
# @gluestack-ui/themed
+## 1.1.19
+
+### Patch Changes
+
+- Updated dependencies
+ - @gluestack-ui/alert-dialog@0.1.28
+ - @gluestack-ui/form-control@0.1.17
+ - @gluestack-ui/actionsheet@0.2.41
+ - @gluestack-ui/accordion@1.0.4
+ - @gluestack-ui/checkbox@0.1.27
+ - @gluestack-ui/progress@0.1.14
+ - @gluestack-ui/textarea@0.1.21
+ - @gluestack-ui/tooltip@0.1.30
+ - @gluestack-ui/avatar@0.1.16
+ - @gluestack-ui/button@1.0.4
+ - @gluestack-ui/alert@0.1.13
+ - @gluestack-ui/input@0.1.28
+ - @gluestack-ui/radio@0.1.28
+ - @gluestack-ui/link@0.1.20
+ - @gluestack-ui/menu@0.2.33
+
## 1.1.17
### Patch Changes
diff --git a/packages/themed/package.json b/packages/themed/package.json
index 1d466333ac..6ca3276fd8 100644
--- a/packages/themed/package.json
+++ b/packages/themed/package.json
@@ -1,6 +1,6 @@
{
"name": "@gluestack-ui/themed",
- "version": "1.1.18",
+ "version": "1.1.19",
"main": "build/index.js",
"types": "build/index.d.ts",
"module": "build/index",
@@ -37,36 +37,36 @@
"@expo/html-elements": "latest",
"@gluestack-style/animation-resolver": "1.0.4",
"@gluestack-style/legend-motion-animation-driver": "1.0.3",
- "@gluestack-ui/accordion": "1.0.3",
- "@gluestack-ui/actionsheet": "0.2.40",
- "@gluestack-ui/alert": "0.1.12",
- "@gluestack-ui/alert-dialog": "0.1.27",
- "@gluestack-ui/avatar": "0.1.15",
- "@gluestack-ui/button": "1.0.3",
- "@gluestack-ui/checkbox": "0.1.26",
+ "@gluestack-ui/accordion": "1.0.4",
+ "@gluestack-ui/actionsheet": "0.2.41",
+ "@gluestack-ui/alert": "0.1.13",
+ "@gluestack-ui/alert-dialog": "0.1.28",
+ "@gluestack-ui/avatar": "0.1.16",
+ "@gluestack-ui/button": "1.0.4",
+ "@gluestack-ui/checkbox": "0.1.27",
"@gluestack-ui/divider": "0.1.8",
"@gluestack-ui/fab": "0.1.20",
- "@gluestack-ui/form-control": "0.1.16",
+ "@gluestack-ui/form-control": "0.1.17",
"@gluestack-ui/icon": "0.1.20",
"@gluestack-ui/image": "0.1.9",
- "@gluestack-ui/input": "0.1.27",
- "@gluestack-ui/link": "0.1.19",
- "@gluestack-ui/menu": "0.2.32",
+ "@gluestack-ui/input": "0.1.28",
+ "@gluestack-ui/link": "0.1.20",
+ "@gluestack-ui/menu": "0.2.33",
"@gluestack-ui/modal": "0.1.31",
"@gluestack-ui/overlay": "0.1.14",
"@gluestack-ui/popover": "0.1.34",
"@gluestack-ui/pressable": "0.1.16",
- "@gluestack-ui/progress": "0.1.13",
+ "@gluestack-ui/progress": "0.1.14",
"@gluestack-ui/provider": "0.1.12",
- "@gluestack-ui/radio": "0.1.27",
+ "@gluestack-ui/radio": "0.1.28",
"@gluestack-ui/select": "0.1.25",
"@gluestack-ui/slider": "0.1.23",
"@gluestack-ui/spinner": "0.1.14",
"@gluestack-ui/switch": "0.1.21",
"@gluestack-ui/tabs": "0.1.16",
- "@gluestack-ui/textarea": "0.1.20",
+ "@gluestack-ui/textarea": "0.1.21",
"@gluestack-ui/toast": "1.0.4",
- "@gluestack-ui/tooltip": "0.1.29",
+ "@gluestack-ui/tooltip": "0.1.30",
"@legendapp/motion": "latest"
},
"devDependencies": {
diff --git a/packages/themed/src/components/Image/styled-components/Root.tsx b/packages/themed/src/components/Image/styled-components/Root.tsx
index 0f9aa86bec..faaafa3d57 100644
--- a/packages/themed/src/components/Image/styled-components/Root.tsx
+++ b/packages/themed/src/components/Image/styled-components/Root.tsx
@@ -1,6 +1,16 @@
import { Image } from 'react-native';
import { styled } from '@gluestack-style/react';
-export default styled(Image, {}, {
- componentName: 'Image',
-} as const);
+export default styled(
+ Image,
+ {},
+ {
+ componentName: 'Image',
+ resolveProps: ['tintColor'],
+ } as const,
+ {
+ propertyTokenMap: {
+ tintColor: 'colors',
+ },
+ }
+);
diff --git a/packages/unstyled/accordion/CHANGELOG.md b/packages/unstyled/accordion/CHANGELOG.md
index ad8242ec87..351ae119fe 100644
--- a/packages/unstyled/accordion/CHANGELOG.md
+++ b/packages/unstyled/accordion/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gluestack-ui/accordion
+## 1.0.4
+
+### Patch Changes
+
+- fix: ref typing issue
+
## 1.0.3
### Patch Changes
diff --git a/packages/unstyled/accordion/package.json b/packages/unstyled/accordion/package.json
index cb46b1191d..d6b822b753 100644
--- a/packages/unstyled/accordion/package.json
+++ b/packages/unstyled/accordion/package.json
@@ -15,7 +15,7 @@
"ios",
"nextjs"
],
- "version": "1.0.3",
+ "version": "1.0.4",
"main": "lib/commonjs/index",
"module": "lib/module/index",
"types": "lib/typescript/index.d.ts",
diff --git a/packages/unstyled/accordion/src/types.ts b/packages/unstyled/accordion/src/types.ts
index 6956bd9223..60a7333fb2 100644
--- a/packages/unstyled/accordion/src/types.ts
+++ b/packages/unstyled/accordion/src/types.ts
@@ -90,14 +90,28 @@ export type IAccordionComponentType<
IconProps,
TitleTextProps,
ContentTextProps
-> = React.ForwardRefExoticComponent & {
- Item: React.ForwardRefExoticComponent;
- Header: React.ForwardRefExoticComponent;
+> = React.ForwardRefExoticComponent<
+ AccordionProps & React.RefAttributes & IAccordionProps
+> & {
+ Item: React.ForwardRefExoticComponent<
+ ItemProps & React.RefAttributes & IAccordionItemProps
+ >;
+ Header: React.ForwardRefExoticComponent<
+ HeaderProps & React.RefAttributes
+ >;
Trigger: React.ForwardRefExoticComponent<
Omit & IAccordionTriggerProps
>;
- Content: React.ForwardRefExoticComponent;
- TitleText: React.ForwardRefExoticComponent;
- ContentText: React.ForwardRefExoticComponent;
- Icon: React.ForwardRefExoticComponent;
+ Content: React.ForwardRefExoticComponent<
+ ContentProps & React.RefAttributes
+ >;
+ TitleText: React.ForwardRefExoticComponent<
+ TitleTextProps & React.RefAttributes
+ >;
+ ContentText: React.ForwardRefExoticComponent<
+ ContentTextProps & React.RefAttributes
+ >;
+ Icon: React.ForwardRefExoticComponent<
+ IconProps & React.RefAttributes
+ >;
};
diff --git a/packages/unstyled/actionsheet/CHANGELOG.md b/packages/unstyled/actionsheet/CHANGELOG.md
index 56be37c4f4..a52f21e665 100644
--- a/packages/unstyled/actionsheet/CHANGELOG.md
+++ b/packages/unstyled/actionsheet/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gluestack-ui/actionsheet
+## 0.2.41
+
+### Patch Changes
+
+- fix: ref typing issue
+
## 0.2.40
### Patch Changes
diff --git a/packages/unstyled/actionsheet/package.json b/packages/unstyled/actionsheet/package.json
index fa1841ed30..6fcb209a89 100644
--- a/packages/unstyled/actionsheet/package.json
+++ b/packages/unstyled/actionsheet/package.json
@@ -15,7 +15,7 @@
"ios",
"nextjs"
],
- "version": "0.2.40",
+ "version": "0.2.41",
"main": "lib/commonjs/index",
"module": "lib/module/index",
"types": "lib/typescript/index.d.ts",
diff --git a/packages/unstyled/actionsheet/src/types.ts b/packages/unstyled/actionsheet/src/types.ts
index 09f3e0c36b..06f7dd1378 100644
--- a/packages/unstyled/actionsheet/src/types.ts
+++ b/packages/unstyled/actionsheet/src/types.ts
@@ -60,23 +60,47 @@ export type IActionsheetComponentType<
SectionListProps,
SectionHeaderTextProps,
IconProps
-> = React.ForwardRefExoticComponent & {
+> = React.ForwardRefExoticComponent<
+ ActionsheetProps & React.RefAttributes & IActionsheetProps
+> & {
Content: React.ForwardRefExoticComponent<
- ContentProps & InterfaceActionsheetContentProps
+ ContentProps &
+ React.RefAttributes &
+ InterfaceActionsheetContentProps
>;
Item: React.ForwardRefExoticComponent<
- ItemProps & InterfaceActionsheetItemProps
+ ItemProps & InterfaceActionsheetItemProps & React.RefAttributes
+ >;
+ ItemText: React.ForwardRefExoticComponent<
+ React.RefAttributes & ItemTextProps
+ >;
+ DragIndicator: React.ForwardRefExoticComponent<
+ React.RefAttributes & DragIndicatorProps
+ >;
+ Backdrop: React.ForwardRefExoticComponent<
+ React.RefAttributes & BackdropProps
+ >;
+ DragIndicatorWrapper: React.ForwardRefExoticComponent<
+ React.RefAttributes & IndicatorWrapperProps
+ >;
+ ScrollView: React.ForwardRefExoticComponent<
+ React.RefAttributes & ScrollViewProps
+ >;
+ VirtualizedList: React.ForwardRefExoticComponent<
+ React.RefAttributes & VirtualizedListProps
+ >;
+ FlatList: React.ForwardRefExoticComponent<
+ React.RefAttributes & FlatListProps
+ >;
+ SectionList: React.ForwardRefExoticComponent<
+ React.RefAttributes & SectionListProps
+ >;
+ SectionHeaderText: React.ForwardRefExoticComponent<
+ React.RefAttributes & SectionHeaderTextProps
+ >;
+ Icon: React.ForwardRefExoticComponent<
+ React.RefAttributes & IconProps
>;
- ItemText: React.ForwardRefExoticComponent;
- DragIndicator: React.ForwardRefExoticComponent;
- Backdrop: React.ForwardRefExoticComponent;
- DragIndicatorWrapper: React.ForwardRefExoticComponent;
- ScrollView: React.ForwardRefExoticComponent;
- VirtualizedList: React.ForwardRefExoticComponent;
- FlatList: React.ForwardRefExoticComponent;
- SectionList: React.ForwardRefExoticComponent;
- SectionHeaderText: React.ForwardRefExoticComponent;
- Icon: React.ForwardRefExoticComponent;
};
export type IActionsheetProps = InterfaceActionsheetProps;
diff --git a/packages/unstyled/alert-dialog/CHANGELOG.md b/packages/unstyled/alert-dialog/CHANGELOG.md
index b4b79e179e..315e317bf2 100644
--- a/packages/unstyled/alert-dialog/CHANGELOG.md
+++ b/packages/unstyled/alert-dialog/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gluestack-ui/alert-dialog
+## 0.1.28
+
+### Patch Changes
+
+- fix: ref typing issue
+
## 0.1.27
### Patch Changes
diff --git a/packages/unstyled/alert-dialog/package.json b/packages/unstyled/alert-dialog/package.json
index 9fc9813053..c22c85f855 100644
--- a/packages/unstyled/alert-dialog/package.json
+++ b/packages/unstyled/alert-dialog/package.json
@@ -15,7 +15,7 @@
"ios",
"nextjs"
],
- "version": "0.1.27",
+ "version": "0.1.28",
"main": "lib/commonjs/index",
"module": "lib/module/index",
"types": "lib/typescript/index.d.ts",
diff --git a/packages/unstyled/alert-dialog/src/types.ts b/packages/unstyled/alert-dialog/src/types.ts
index 2211df5065..4eb676508d 100644
--- a/packages/unstyled/alert-dialog/src/types.ts
+++ b/packages/unstyled/alert-dialog/src/types.ts
@@ -58,13 +58,28 @@ export type IAlertDialogComponentType<
StyledAlertDialogFooter,
StyledAlertDialogBody,
StyledAlertDialogBackdrop
-> = React.ForwardRefExoticComponent & {
- Content: React.ForwardRefExoticComponent;
- CloseButton: React.ForwardRefExoticComponent;
- Header: React.ForwardRefExoticComponent;
- Footer: React.ForwardRefExoticComponent;
- Body: React.ForwardRefExoticComponent;
- Backdrop: React.ForwardRefExoticComponent;
+> = React.ForwardRefExoticComponent<
+ React.RefAttributes & StyledAlertDialog & IAlertDialogProps
+> & {
+ Content: React.ForwardRefExoticComponent<
+ React.RefAttributes & StyledAlertDialogContent
+ >;
+ CloseButton: React.ForwardRefExoticComponent<
+ React.RefAttributes &
+ StyledAlertDialogCloseButton
+ >;
+ Header: React.ForwardRefExoticComponent<
+ React.RefAttributes & StyledAlertDialogHeader
+ >;
+ Footer: React.ForwardRefExoticComponent<
+ React.RefAttributes & StyledAlertDialogFooter
+ >;
+ Body: React.ForwardRefExoticComponent<
+ React.RefAttributes & StyledAlertDialogBody
+ >;
+ Backdrop: React.ForwardRefExoticComponent<
+ React.RefAttributes & StyledAlertDialogBackdrop
+ >;
};
export type IAlertDialogProps = InterfaceAlertDialogProps;
diff --git a/packages/unstyled/alert/CHANGELOG.md b/packages/unstyled/alert/CHANGELOG.md
index c1cd42645b..4aec899666 100644
--- a/packages/unstyled/alert/CHANGELOG.md
+++ b/packages/unstyled/alert/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gluestack-ui/alert
+## 0.1.13
+
+### Patch Changes
+
+- fix: ref typing issue
+
## 0.1.8
### Patch Changes
diff --git a/packages/unstyled/alert/package.json b/packages/unstyled/alert/package.json
index a965bccb6d..3f706e9cb3 100644
--- a/packages/unstyled/alert/package.json
+++ b/packages/unstyled/alert/package.json
@@ -1,6 +1,6 @@
{
"name": "@gluestack-ui/alert",
- "version": "0.1.12",
+ "version": "0.1.13",
"main": "lib/commonjs/index",
"module": "lib/module/index",
"types": "lib/typescript/index.d.ts",
diff --git a/packages/unstyled/alert/src/types.ts b/packages/unstyled/alert/src/types.ts
index 724b10b652..3dda080817 100644
--- a/packages/unstyled/alert/src/types.ts
+++ b/packages/unstyled/alert/src/types.ts
@@ -5,9 +5,15 @@ export interface InterfaceAlertProps extends ViewProps {
}
export type IAlertComponentType =
- React.ForwardRefExoticComponent & {
- Text: React.ForwardRefExoticComponent;
- Icon: React.ForwardRefExoticComponent;
+ React.ForwardRefExoticComponent<
+ React.RefAttributes & StyledAlert & InterfaceAlertProps
+ > & {
+ Text: React.ForwardRefExoticComponent<
+ React.RefAttributes
+ >;
+ Icon: React.ForwardRefExoticComponent<
+ React.RefAttributes & StyledAlertIcon
+ >;
};
export type IAlertProps = InterfaceAlertProps;
diff --git a/packages/unstyled/avatar/CHANGELOG.md b/packages/unstyled/avatar/CHANGELOG.md
index 9b5791d301..959c762ebb 100644
--- a/packages/unstyled/avatar/CHANGELOG.md
+++ b/packages/unstyled/avatar/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gluestack-ui/avatar
+## 0.1.16
+
+### Patch Changes
+
+- fix: ref typing issue
+
## 0.1.10
### Patch Changes
diff --git a/packages/unstyled/avatar/package.json b/packages/unstyled/avatar/package.json
index 8cefa0fef3..560d43c546 100644
--- a/packages/unstyled/avatar/package.json
+++ b/packages/unstyled/avatar/package.json
@@ -1,7 +1,7 @@
{
"name": "@gluestack-ui/avatar",
"description": "A universal headless avatar component for React Native, Next.js & React",
- "version": "0.1.15",
+ "version": "0.1.16",
"main": "lib/commonjs/index",
"module": "lib/module/index",
"types": "lib/typescript/index.d.ts",
diff --git a/packages/unstyled/avatar/src/types.ts b/packages/unstyled/avatar/src/types.ts
index 44ef9cc55b..396f3a5798 100644
--- a/packages/unstyled/avatar/src/types.ts
+++ b/packages/unstyled/avatar/src/types.ts
@@ -14,11 +14,21 @@ export type IAvatarComponentType<
GroupProps,
ImageProps,
FallbackTextProps
-> = React.ForwardRefExoticComponent & {
- Badge: React.ForwardRefExoticComponent;
- Group: React.ForwardRefExoticComponent;
- Image: React.ForwardRefExoticComponent;
- FallbackText: React.ForwardRefExoticComponent;
+> = React.ForwardRefExoticComponent<
+ IAvatarProps & AvatarProps & React.RefAttributes
+> & {
+ Badge: React.ForwardRefExoticComponent<
+ BadgeProps & React.RefAttributes
+ >;
+ Group: React.ForwardRefExoticComponent<
+ GroupProps & React.RefAttributes & IAvatarGroupProps
+ >;
+ Image: React.ForwardRefExoticComponent<
+ ImageProps & React.RefAttributes
+ >;
+ FallbackText: React.ForwardRefExoticComponent<
+ FallbackTextProps & React.RefAttributes
+ >;
};
export type IAvatarProps = InterfaceAvatarProps;
diff --git a/packages/unstyled/button/CHANGELOG.md b/packages/unstyled/button/CHANGELOG.md
index 5a370544ba..69af7a2193 100644
--- a/packages/unstyled/button/CHANGELOG.md
+++ b/packages/unstyled/button/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gluestack-ui/button
+## 1.0.4
+
+### Patch Changes
+
+- fix: ref typing issue
+
## 1.0.3
### Patch Changes
diff --git a/packages/unstyled/button/package.json b/packages/unstyled/button/package.json
index 5a2d4c483e..d0bec96c22 100644
--- a/packages/unstyled/button/package.json
+++ b/packages/unstyled/button/package.json
@@ -1,6 +1,6 @@
{
"name": "@gluestack-ui/button",
- "version": "1.0.3",
+ "version": "1.0.4",
"main": "lib/commonjs/index",
"module": "lib/module/index",
"types": "lib/typescript/index.d.ts",
diff --git a/packages/unstyled/button/src/types.ts b/packages/unstyled/button/src/types.ts
index bce3a5b035..13f07dfe3d 100644
--- a/packages/unstyled/button/src/types.ts
+++ b/packages/unstyled/button/src/types.ts
@@ -52,11 +52,21 @@ export type IButtonComponentType<
SpinnerProps,
TextProps,
IconProps
-> = React.ForwardRefExoticComponent & {
- Group: React.ForwardRefExoticComponent;
- Spinner: React.ForwardRefExoticComponent;
- Text: React.ForwardRefExoticComponent;
- Icon: React.ForwardRefExoticComponent;
+> = React.ForwardRefExoticComponent<
+ React.RefAttributes & ButtonProps & IButtonProps
+> & {
+ Group: React.ForwardRefExoticComponent<
+ React.RefAttributes & GroupProps & IButtonGroupProps
+ >;
+ Spinner: React.ForwardRefExoticComponent<
+ SpinnerProps & React.RefAttributes
+ >;
+ Text: React.ForwardRefExoticComponent<
+ React.RefAttributes & TextProps
+ >;
+ Icon: React.ForwardRefExoticComponent<
+ React.RefAttributes & IconProps
+ >;
};
export type IButtonProps = InterfaceButtonProps;
diff --git a/packages/unstyled/checkbox/CHANGELOG.md b/packages/unstyled/checkbox/CHANGELOG.md
index 0ea1331c12..6c41cb60c5 100644
--- a/packages/unstyled/checkbox/CHANGELOG.md
+++ b/packages/unstyled/checkbox/CHANGELOG.md
@@ -1,5 +1,13 @@
# @gluestack-ui/checkbox
+## 0.1.27
+
+### Patch Changes
+
+- fix: ref typing issue
+- Updated dependencies
+ - @gluestack-ui/form-control@0.1.17
+
## 0.1.26
### Patch Changes
diff --git a/packages/unstyled/checkbox/package.json b/packages/unstyled/checkbox/package.json
index ea6b6476a6..9e754f0f7f 100644
--- a/packages/unstyled/checkbox/package.json
+++ b/packages/unstyled/checkbox/package.json
@@ -1,6 +1,6 @@
{
"name": "@gluestack-ui/checkbox",
- "version": "0.1.26",
+ "version": "0.1.27",
"main": "lib/commonjs/index",
"module": "lib/module/index",
"types": "lib/typescript/index.d.ts",
@@ -43,7 +43,7 @@
"typescript": "^4.7.4"
},
"dependencies": {
- "@gluestack-ui/form-control": "^0.1.16",
+ "@gluestack-ui/form-control": "^0.1.17",
"@gluestack-ui/utils": "^0.1.12",
"@react-aria/visually-hidden": "^3.8.6",
"@react-native-aria/checkbox": "^0.2.9",
diff --git a/packages/unstyled/checkbox/src/types.ts b/packages/unstyled/checkbox/src/types.ts
index 98cd63b7f6..c97e4eec82 100644
--- a/packages/unstyled/checkbox/src/types.ts
+++ b/packages/unstyled/checkbox/src/types.ts
@@ -24,11 +24,17 @@ export interface ICheckboxGroup {
}
export type ICheckboxComponentType =
- React.ForwardRefExoticComponent & {
- Indicator: React.ForwardRefExoticComponent;
- Icon: React.ForwardRefExoticComponent;
- Label: React.ForwardRefExoticComponent;
- Group: React.ForwardRefExoticComponent;
+ React.ForwardRefExoticComponent<
+ React.RefAttributes & Root & InterfaceCheckbox
+ > & {
+ Indicator: React.ForwardRefExoticComponent<
+ React.RefAttributes & Indicator
+ >;
+ Icon: React.ForwardRefExoticComponent & Icon>;
+ Label: React.ForwardRefExoticComponent & Label>;
+ Group: React.ForwardRefExoticComponent<
+ React.RefAttributes & Group & ICheckboxGroup
+ >;
};
export type ICheckboxProps = InterfaceCheckbox;
diff --git a/packages/unstyled/form-control/CHANGELOG.md b/packages/unstyled/form-control/CHANGELOG.md
index 1d51665de3..312ec510c9 100644
--- a/packages/unstyled/form-control/CHANGELOG.md
+++ b/packages/unstyled/form-control/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gluestack-ui/form-control
+## 0.1.17
+
+### Patch Changes
+
+- fix: ref typing issue
+
## 0.1.16
### Patch Changes
diff --git a/packages/unstyled/form-control/package.json b/packages/unstyled/form-control/package.json
index 9b4344ac18..87eb6387b4 100644
--- a/packages/unstyled/form-control/package.json
+++ b/packages/unstyled/form-control/package.json
@@ -1,7 +1,7 @@
{
"name": "@gluestack-ui/form-control",
"description": "A universal headless form-control component for React Native, Next.js & React",
- "version": "0.1.16",
+ "version": "0.1.17",
"main": "lib/commonjs/index",
"module": "lib/module/index",
"types": "lib/typescript/index.d.ts",
diff --git a/packages/unstyled/input/CHANGELOG.md b/packages/unstyled/input/CHANGELOG.md
index 52c4ce3eb0..84f9e2da36 100644
--- a/packages/unstyled/input/CHANGELOG.md
+++ b/packages/unstyled/input/CHANGELOG.md
@@ -1,5 +1,13 @@
# @gluestack-ui/input
+## 0.1.28
+
+### Patch Changes
+
+- fix: ref typing issue
+- Updated dependencies
+ - @gluestack-ui/form-control@0.1.17
+
## 0.1.27
### Patch Changes
diff --git a/packages/unstyled/input/package.json b/packages/unstyled/input/package.json
index fc3f2411db..d5d9baed03 100644
--- a/packages/unstyled/input/package.json
+++ b/packages/unstyled/input/package.json
@@ -1,7 +1,7 @@
{
"name": "@gluestack-ui/input",
"description": "A universal headless input component for React Native, Next.js & React",
- "version": "0.1.27",
+ "version": "0.1.28",
"main": "lib/commonjs/index",
"module": "lib/module/index",
"types": "lib/typescript/index.d.ts",
@@ -29,7 +29,7 @@
"typescript": "^4.9.4"
},
"dependencies": {
- "@gluestack-ui/form-control": "^0.1.16",
+ "@gluestack-ui/form-control": "^0.1.17",
"@gluestack-ui/utils": "^0.1.12",
"@react-native-aria/focus": "^0.2.9",
"@react-native-aria/interactions": "0.2.13"
diff --git a/packages/unstyled/input/src/types.ts b/packages/unstyled/input/src/types.ts
index 02e617995e..950e8aaf97 100644
--- a/packages/unstyled/input/src/types.ts
+++ b/packages/unstyled/input/src/types.ts
@@ -52,10 +52,14 @@ export interface IInputProps {
}
export type IInputComponentType =
- React.ForwardRefExoticComponent & {
- Icon: React.ForwardRefExoticComponent;
- Slot: React.ForwardRefExoticComponent;
- Input: React.ForwardRefExoticComponent & Root & IInputFieldProps
+ > & {
+ Icon: React.ForwardRefExoticComponent & Icon>;
+ Slot: React.ForwardRefExoticComponent & Slot>;
+ Input: React.ForwardRefExoticComponent<
+ React.RefAttributes;
diff --git a/packages/unstyled/link/CHANGELOG.md b/packages/unstyled/link/CHANGELOG.md
index b67ef139da..8c07540ec3 100644
--- a/packages/unstyled/link/CHANGELOG.md
+++ b/packages/unstyled/link/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gluestack-ui/link
+## 0.1.20
+
+### Patch Changes
+
+- fix: ref typing issue
+
## 0.1.19
### Patch Changes
diff --git a/packages/unstyled/link/package.json b/packages/unstyled/link/package.json
index 7a62eeec39..2048dbf4ad 100644
--- a/packages/unstyled/link/package.json
+++ b/packages/unstyled/link/package.json
@@ -1,6 +1,6 @@
{
"name": "@gluestack-ui/link",
- "version": "0.1.19",
+ "version": "0.1.20",
"main": "lib/commonjs/index",
"module": "lib/module/index",
"types": "lib/typescript/index.d.ts",
diff --git a/packages/unstyled/link/src/types.ts b/packages/unstyled/link/src/types.ts
index b158069468..b91144442e 100644
--- a/packages/unstyled/link/src/types.ts
+++ b/packages/unstyled/link/src/types.ts
@@ -1,4 +1,5 @@
import type { MutableRefObject } from 'react';
+import React from 'react';
import type { GestureResponderEvent, ViewProps } from 'react-native';
export interface InterfaceLinkProps extends ViewProps {
@@ -29,5 +30,7 @@ export type IUseLinkProp = {
export type ILinkComponentType =
React.ForwardRefExoticComponent & {
- Text: React.ForwardRefExoticComponent;
+ Text: React.ForwardRefExoticComponent<
+ TextProps & React.RefAttributes
+ >;
};
diff --git a/packages/unstyled/menu/CHANGELOG.md b/packages/unstyled/menu/CHANGELOG.md
index 94c4800446..48a15bad50 100644
--- a/packages/unstyled/menu/CHANGELOG.md
+++ b/packages/unstyled/menu/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gluestack-ui/menu
+## 0.2.33
+
+### Patch Changes
+
+- fix: ref typing issue
+
## 0.2.32
### Patch Changes
diff --git a/packages/unstyled/menu/package.json b/packages/unstyled/menu/package.json
index 7796623e57..48bb5b1827 100644
--- a/packages/unstyled/menu/package.json
+++ b/packages/unstyled/menu/package.json
@@ -15,7 +15,7 @@
"ios",
"nextjs"
],
- "version": "0.2.32",
+ "version": "0.2.33",
"main": "lib/commonjs/index",
"module": "lib/module/index",
"types": "lib/typescript/index.d.ts",
diff --git a/packages/unstyled/menu/src/types.ts b/packages/unstyled/menu/src/types.ts
index 36a8915f8d..5c200f070f 100644
--- a/packages/unstyled/menu/src/types.ts
+++ b/packages/unstyled/menu/src/types.ts
@@ -99,7 +99,13 @@ export interface IItemProp {
export type IMenuProps = InterfaceMenuProps;
export type IMenuComponentType =
- React.ForwardRefExoticComponent & {
- Item: React.ForwardRefExoticComponent- & IItemProp>;
- ItemLabel: React.ForwardRefExoticComponent
;
+ React.ForwardRefExoticComponent<
+ React.RefAttributes & Root & IMenuProps
+ > & {
+ Item: React.ForwardRefExoticComponent<
+ React.RefAttributes- & Item & ItemProps
- & IItemProp
+ >;
+ ItemLabel: React.ForwardRefExoticComponent<
+ React.RefAttributes
& Label
+ >;
};
diff --git a/packages/unstyled/progress/CHANGELOG.md b/packages/unstyled/progress/CHANGELOG.md
index ece2c1a3d1..ed207bb25b 100644
--- a/packages/unstyled/progress/CHANGELOG.md
+++ b/packages/unstyled/progress/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gluestack-ui/progress
+## 0.1.14
+
+### Patch Changes
+
+- fix: ref typing issue
+
## 0.1.13
### Patch Changes
diff --git a/packages/unstyled/progress/package.json b/packages/unstyled/progress/package.json
index c918a0ac95..a0d371a561 100644
--- a/packages/unstyled/progress/package.json
+++ b/packages/unstyled/progress/package.json
@@ -15,7 +15,7 @@
"ios",
"nextjs"
],
- "version": "0.1.13",
+ "version": "0.1.14",
"main": "lib/commonjs/index",
"module": "lib/module/index",
"types": "lib/typescript/index.d.ts",
diff --git a/packages/unstyled/progress/src/types.ts b/packages/unstyled/progress/src/types.ts
index 8e1c5ebcf3..214fc3657a 100644
--- a/packages/unstyled/progress/src/types.ts
+++ b/packages/unstyled/progress/src/types.ts
@@ -18,8 +18,12 @@ export interface InterfaceProgressProps {
}
export type IProgressComponentType 
+
+## Try it now
+
+Find the Figma UI Kit live [here](https://www.figma.com/community/file/1284424195134275844/gluestack-ui-v0-1-design-kit-auto-generated)!
+
diff --git a/example/storybook-nativewind/src/getting-started/figma-ui-kit/index.themed.stories.mdx b/example/storybook-nativewind/src/getting-started/figma-ui-kit/index.themed.stories.mdx
new file mode 100644
index 0000000000..f45c09d866
--- /dev/null
+++ b/example/storybook-nativewind/src/getting-started/figma-ui-kit/index.themed.stories.mdx
@@ -0,0 +1,35 @@
+---
+title: Figma UI Kit | gluestack-ui
+description: The Figma UI Kit provides a collection of ready-to-use UI components from the gluestack-ui library.
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+
+
+# Figma UI Kit
+
+The [Figma UI Kit](https://www.figma.com/@gluestack) provides a collection of ready-to-use UI components from the gluestack-ui library. So you can directly use these components in Figma and design your app. The developers won’t have a chance to say this is not possible!
+
+## Auto-generated
+
+Yes, our Figma UI Kit is auto-generated from the storybook. This helps us maintain a single source of truth, providing design-development consistency which is very important if you are building at scale.
+
+## Customize with ease
+
+- **AutoLayout support** - AutoLayout is a powerful feature in Figma that helps you create responsive and flexible designs by automatically adjusting the layout and spacing of elements within frames. It's particularly useful for designing interfaces that need to adapt to various screen sizes or content changes.
+
+- **Color Tokens** - Color tokens in Figma refer to a systematic and organized way of managing and using colors within your design projects. They help maintain consistency and make it easier to update colors across your designs by defining a centralized set of color values that can be reused throughout your project. In this Figma UI Kit we have a beautiful palette around 4312 color tokens with alpha support, covering around 48 colors with its 10 hues.
+
+- **Text Tokens** - Text tokens in Figma, sometimes referred to as text styles or text components, allow you to define and manage a consistent set of text properties such as font, size, line spacing, color, and more. Text tokens help maintain a unified text style across your design project, making it easier to ensure consistency and make global updates when needed. In this Figma UI Kit, we have two major foundation components **Text** and **Heading**, along with its sizes and font weights.
+
+- **Shadow Tokens** - Shadow tokens in Figma, sometimes referred to as effect styles, allow you to define and manage Effects, like drop shadows, stroke, blur and even images as Styles. In this Figma UI Kit, we majorly have included two shadows, named **Hard** and **Soft** shadows.
+
+- **Components** - Components in Figma are reusable design elements that allow you to create consistent and efficient designs. Components can represent UI elements, icons, buttons, or any other visual elements that you want to reuse across your design projects. This Figma UI Kit, includes around 23 components along with its instances mapped in compound components.
+
+