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 ae03c3cd1..21f8d7cb9 100644
--- a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
@@ -479,6 +479,7 @@ Button component is created using Pressable component from react-native. It exte
### 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.
<>
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 fa1b3b840..51a7d7889 100644
--- a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
@@ -594,6 +594,7 @@ Checkbox component is created using Pressable 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.
<>
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 ee033b5cb..5578d46e9 100644
--- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
@@ -334,6 +334,7 @@ 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.
<>
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 fcbd1bab1..d3db79abc 100644
--- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx
@@ -453,6 +453,7 @@ 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.
<>
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 a1b8bf15c..b172a4c93 100644
--- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx
@@ -14,7 +14,7 @@ import { Meta } from '@storybook/addon-docs';
-import { ArrowUpRightIcon, Icon, HStack, Text, Link, LinkText } from '../../core-components/nativewind';
+import { Icon, HStack, Text, Link, LinkText } from '../../core-components/nativewind';
import { transformedCode } from '../../utils';
import {
AppProvider,
@@ -27,6 +27,7 @@ import {
import Wrapper from '../../core-components/nativewind/Wrapper';
import { CollapsibleCode } from '@gluestack/design-system';
import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
+import { ArrowUpRight } from 'lucide-react-native';
This is an illustration of **Link** component.
@@ -254,6 +255,7 @@ 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.
<>
@@ -407,7 +409,7 @@ The Examples section provides visual representations of the different variants o
transformCode: (code) => {
return transformedCode(code);
},
- scope: { Link, LinkText, Wrapper, ArrowUpRightIcon, Icon, HStack, Text },
+ scope: { Link, LinkText, Wrapper, Icon, HStack, Text },
argsType: {},
}}
/>
@@ -427,7 +429,8 @@ The Examples section provides visual representations of the different variants o
Pinterest
-
+ {/* ArrowUpRight is imported from 'lucide-react-native' */}
+
@@ -435,7 +438,7 @@ The Examples section provides visual representations of the different variants o
transformCode: (code) => {
return transformedCode(code);
},
- scope: { Link, LinkText, Wrapper, ArrowUpRightIcon, Icon, HStack, Text },
+ scope: { Link, LinkText, Wrapper, ArrowUpRight, Icon, HStack, Text },
argsType: {},
}}
/>
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 acc3d0a6f..178771540 100644
--- a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx
@@ -20,7 +20,7 @@ import { transformedCode } from '../../utils';
import { AppProvider, CodePreview } from '@gluestack/design-system';
import Wrapper from '../../core-components/nativewind/Wrapper';
-import { CollapsibleCode, Tabs } from '@gluestack/design-system';
+import { CollapsibleCode, Table, TableContainer, Tabs, InlineCode } from '@gluestack/design-system';
This is an illustration of **Pressable** component.
@@ -119,6 +119,7 @@ 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.
<>
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 3fa8b9d6e..262939307 100644
--- a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
@@ -466,6 +466,7 @@ Radio component is created using Pressable component from react-native. It exten
### 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.
<>
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 8d08744f6..2de7bbf34 100644
--- a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx
@@ -385,6 +385,7 @@ 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.
<>