diff --git a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx
index 29672e017..ecf1c8753 100644
--- a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx
@@ -240,6 +240,7 @@ 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.
@@ -479,12 +480,11 @@ We have outlined the various features that ensure the Accordion component is acc
- VoiceOver: When the Accordion Item is focused, the screen reader will announce the Accordion's title text and the state of the Accordion trigger (expanded or collapsed).
-
-## Examples
+### 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.
-### Customized Component
+#### Customized Component
The following example demonstrates how easily you can customize the Accordion component to suit your needs.
@@ -627,7 +627,7 @@ Wrapper,
-### Rounded corners
+#### Rounded corners
The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components.
@@ -723,7 +723,7 @@ function App(){
/>
-### Disabled item
+#### Disabled item
You can disable an item by setting the isDisabled prop to true. This will prevent the user from interacting with the item and its content. You can also disable the whole accordion by setting the isDisabled prop to true on the Accordion component.
@@ -821,7 +821,7 @@ function App(){
/>
-### Default value
+#### Default value
Use the defaultValue prop to define the open item by default.
@@ -943,7 +943,7 @@ function App(){
/>
-### Nested Components
+#### Nested Components
You can nest Accordion components to create a nested accordion. This is useful when you want to group related content together. In the following example, we have created a nested accordion to group the states of USA by region.
@@ -1064,7 +1064,7 @@ function App(){
/>
-### Controlled Accordion
+#### Controlled Accordion
A component is controlled when it's managed by its parent using props.
You can make the Accordion component controlled by passing the value prop to the Accordion and setting the onValueChange to update the value prop. In the following example, we have created a controlled accordion to display the expanded state of the accordion.
@@ -1189,13 +1189,3 @@ function App(){
}}
/>
-
-
-
-
-
-
-
-
-
-
diff --git a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
index 37d36b5ef..ae03c3cd1 100644
--- a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
@@ -477,6 +477,95 @@ Button component is created using Pressable component from react-native. It exte
> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.
+
+### Data Attributes Table
+Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling.
+
+<>
+
+
+
+
+
+ State
+
+
+ Data Attribute
+
+
+ Values
+
+
+
+
+
+
+
+ hover
+
+
+
+
+ data-hover
+
+
+
+
+ true | false
+
+
+
+
+
+
+ active
+
+
+
+ data-active
+
+
+
+ true | false
+
+
+
+
+
+
+ disabled
+
+
+
+ data-disabled
+
+
+
+ true | false
+
+
+
+
+
+
+ focusVisible
+
+
+
+ data-focus-visible
+
+
+
+ true | false
+
+
+
+
+
+
+
+
+
### 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.
diff --git a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
index 59284e127..fa1b3b840 100644
--- a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
@@ -592,6 +592,124 @@ Checkbox component is created using Pressable component from react-native. It ex
> Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.
+
+### Data Attributes Table
+Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling.
+
+<>
+
+
+
+
+
+ State
+
+
+ Data Attribute
+
+
+ Values
+
+
+
+
+
+
+
+ hover
+
+
+
+
+ data-hover
+
+
+
+
+ true | false
+
+
+
+
+
+
+ active
+
+
+
+ data-active
+
+
+
+ true | false
+
+
+
+
+
+
+ disabled
+
+
+
+ data-disabled
+
+
+
+ true | false
+
+
+
+
+
+
+ focusVisible
+
+
+
+ data-focus-visible
+
+
+
+ true | false
+
+
+
+
+
+
+ invalid
+
+
+
+ data-invalid
+
+
+
+ true | false
+
+
+
+
+
+
+ checked
+
+
+
+ data-checked
+
+
+
+ true | false
+
+
+
+
+
+
+
+
### 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.
diff --git a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
index 38bcfa1d0..ee033b5cb 100644
--- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
@@ -333,6 +333,61 @@ The following are the lists of all the libraries and packages the component reli
Fab component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props).
+### Data Attributes Table
+Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling.
+
+<>
+
+
+
+
+
+ State
+
+
+ Data Attribute
+
+
+ Values
+
+
+
+
+
+
+
+ focus
+
+
+
+ data-focus
+
+
+
+ true | false
+
+
+
+
+
+
+ focusVisible
+
+
+
+ data-focus-visible
+
+
+
+ true | false
+
+
+
+
+
+
+
+
#### Fab
<>
diff --git a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
index 5a0f462e9..fcbd1bab1 100644
--- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
@@ -452,6 +452,93 @@ We have outlined the various features that ensure the Input component is accessi
Input component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props) and the props mentioned below.
+### Data Attributes Table
+Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling.
+
+<>
+
+
+
+
+
+ State
+
+
+ Data Attribute
+
+
+ Values
+
+
+
+
+
+
+
+ hover
+
+
+
+
+ data-hover
+
+
+
+
+ true | false
+
+
+
+
+
+
+ disabled
+
+
+
+ data-disabled
+
+
+
+ true | false
+
+
+
+
+
+
+ focus
+
+
+
+ data-focus
+
+
+
+ true | false
+
+
+
+
+
+
+ invalid
+
+
+
+ data-invalid
+
+
+
+ true | false
+
+
+
+
+
+
+
+
#### Input
<>
diff --git a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
index 28c703229..a1b8bf15c 100644
--- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
@@ -253,6 +253,95 @@ We have outlined the various features that ensure the Link component is accessib
Link component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props).
+### Data Attributes Table
+Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling.
+
+<>
+
+
+
+
+
+ State
+
+
+ Data Attribute
+
+
+ Values
+
+
+
+
+
+
+
+ hover
+
+
+
+
+ data-hover
+
+
+
+
+ true | false
+
+
+
+
+
+
+ active
+
+
+
+ data-active
+
+
+
+ true | false
+
+
+
+
+
+
+ disabled
+
+
+
+ data-disabled
+
+
+
+ true | false
+
+
+
+
+
+
+ focusVisible
+
+
+
+ data-focus-visible
+
+
+
+ true | false
+
+
+
+
+
+
+
+
+### Examples
+
#### Link
<>
diff --git a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
index 0dfaf4032..acc3d0a6f 100644
--- a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
@@ -118,6 +118,61 @@ This section provides a comprehensive reference list for the component props, de
It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component.
+### Data Attributes Table
+Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling.
+
+<>
+
+
+
+
+
+ State
+
+
+ Data Attribute
+
+
+ Values
+
+
+
+
+
+
+
+ disabled
+
+
+
+ data-disabled
+
+
+
+ true | false
+
+
+
+
+
+
+ focusVisible
+
+
+
+ data-focus-visible
+
+
+
+ true | false
+
+
+
+
+
+
+
+
### 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.
diff --git a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
index 5b9904d49..3fa8b9d6e 100644
--- a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
@@ -464,6 +464,109 @@ We have outlined the various features that ensure the Radio component is accessi
Radio component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props).
+
+### Data Attributes Table
+Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling.
+
+<>
+
+
+
+
+
+ State
+
+
+ Data Attribute
+
+
+ Values
+
+
+
+
+
+
+
+ hover
+
+
+
+
+ data-hover
+
+
+
+
+ true | false
+
+
+
+
+
+
+ active
+
+
+
+ data-active
+
+
+
+ true | false
+
+
+
+
+
+
+ disabled
+
+
+
+ data-disabled
+
+
+
+ true | false
+
+
+
+
+
+
+ focusVisible
+
+
+
+ data-focus-visible
+
+
+
+ true | false
+
+
+
+
+
+
+ invalid
+
+
+
+ data-invalid
+
+
+
+ true | false
+
+
+
+
+
+
+
+
### 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.
diff --git a/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx
index 5b16f1764..d95454e50 100644
--- a/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx
@@ -663,6 +663,93 @@ Select component is created using View component from react-native. It extends a
+### Data Attributes Table
+Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling.
+
+<>
+
+
+
+
+
+ State
+
+
+ Data Attribute
+
+
+ Values
+
+
+
+
+
+
+
+ hover
+
+
+
+
+ data-hover
+
+
+
+
+ true | false
+
+
+
+
+
+
+ disabled
+
+
+
+ data-disabled
+
+
+
+ true | false
+
+
+
+
+
+
+ focus
+
+
+
+ data-focus
+
+
+
+ true | false
+
+
+
+
+
+
+ invalid
+
+
+
+ data-invalid
+
+
+
+ true | false
+
+
+
+
+
+
+
+
### 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.
diff --git a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx
index 7b9adc2bb..1cf28cba2 100644
--- a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx
@@ -430,17 +430,74 @@ We have outlined the various features that ensure the Slider component is access
Slider 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).
-
+### Data Attributes Table
+Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling.
+
+<>
+
+
+
+
+
+ State
+
+
+ Data Attribute
+
+
+ Values
+
+
+
+
+
+
+
+ disabled
+
+
+
+ data-disabled
+
+
+
+ true | false
+
+
+
+
+
+
+ focus
+
+
+
+ data-focus
+
+
+
+ true | false
+
+
+
+
+
+
+ invalid
+
+
+
+ data-invalid
+
+
+
+ true | false
+
+
+
+
+
+
+
+
+
diff --git a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
index 7b87eb320..8d08744f6 100644
--- a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
@@ -384,6 +384,92 @@ Textarea component is created using TextInput component from react-native. It ex
+### Data Attributes Table
+Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling.
+
+<>
+
+
+
+
+
+ State
+
+
+ Data Attribute
+
+
+ Values
+
+
+
+
+
+
+
+ hover
+
+
+
+
+ data-hover
+
+
+
+
+ true | false
+
+
+
+
+
+
+ focus
+
+
+
+ data-focus
+
+
+
+ true | false
+
+
+
+
+
+
+ disabled
+
+
+
+ data-disabled
+
+
+
+ true | false
+
+
+
+
+
+
+ invalid
+
+
+
+ data-invalid
+
+
+
+ true | false
+
+
+
+
+
+
+
### Examples