From 49bc8db9263be0af1bfe543ad0e32a8e0f25ea00 Mon Sep 17 00:00:00 2001
From: Rajat Chaudhary <rajatchaudhary@Rajats-MacBook-Air.local>
Date: Fri, 31 May 2024 15:03:28 +0530
Subject: [PATCH 1/3] fix: issues of nativewind component in native storybook

---
 .../components/Actionsheet/Actionsheet.tsx    | 75 ++-----------------
 .../src/components/Button/Button.stories.tsx  |  2 +-
 .../src/components/Modal/Modal.tsx            | 10 +--
 .../src/components/Progress/Progress.tsx      | 18 +----
 .../src/components/Select/Select.tsx          | 18 ++---
 .../src/components/Slider/Slider.tsx          | 39 +---------
 .../src/components/Switch/Switch.stories.tsx  |  5 --
 .../src/components/Textarea/Textarea.tsx      | 21 +-----
 .../nativewind/actionsheet/index.tsx          | 18 ++---
 .../nativewind/alert/index.tsx                | 24 ++++--
 .../core-components/nativewind/menu/index.tsx |  5 +-
 example/storybook-v7/tailwind.config.js       |  1 +
 12 files changed, 55 insertions(+), 181 deletions(-)

diff --git a/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx b/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx
index ee9f35c5b9..593e0d6b4b 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx
+++ b/example/storybook-nativewind/src/components/Actionsheet/Actionsheet.tsx
@@ -1,25 +1,6 @@
-import React, { useState } from 'react';
-import {
-  Button,
-  ButtonText,
-  VStack,
-  HStack,
-  Icon,
-  Box,
-  FormControl,
-  FormControlLabel,
-  FormControlLabelText,
-  Input,
-  InputField,
-  InputIcon,
-  InputSlot,
-  AddIcon,
-  Image,
-  Text,
-  Center,
-} from '@/components/ui';
-import { config } from '@gluestack-ui/config';
-
+import React from 'react';
+import { Button, ButtonText } from '@/components/ui/button';
+import { Center } from '@/components/ui/center';
 import {
   Actionsheet,
   ActionsheetIcon,
@@ -56,10 +37,10 @@ const ActionsheetBasic = ({ showActionsheetProp, ...props }: any) => {
           <ActionsheetDragIndicatorWrapper>
             <ActionsheetDragIndicator />
           </ActionsheetDragIndicatorWrapper>
-          <ActionsheetItem onPress={handleClose} isDisabled>
+          <ActionsheetItem onPress={handleClose}>
             <ActionsheetItemText>Delete</ActionsheetItemText>
           </ActionsheetItem>
-          <ActionsheetItem onPress={handleClose}>
+          <ActionsheetItem isDisabled onPress={handleClose}>
             <ActionsheetItemText>Share</ActionsheetItemText>
           </ActionsheetItem>
           <ActionsheetItem onPress={handleClose}>
@@ -77,40 +58,12 @@ const ActionsheetBasic = ({ showActionsheetProp, ...props }: any) => {
   );
 };
 
-function FigmaActionsheetStory({ ...props }: any) {
-  return (
-    <Box w={900}>
-      <ActionsheetContent {...props} w="$full" _experimentalContent={true}>
-        <ActionsheetDragIndicatorWrapper>
-          <ActionsheetDragIndicator />
-        </ActionsheetDragIndicatorWrapper>
-        <ActionsheetItem>
-          <ActionsheetItemText>Delete</ActionsheetItemText>
-        </ActionsheetItem>
-        <ActionsheetItem>
-          <ActionsheetItemText>Share</ActionsheetItemText>
-        </ActionsheetItem>
-        <ActionsheetItem>
-          <ActionsheetItemText>Play</ActionsheetItemText>
-        </ActionsheetItem>
-        <ActionsheetItem>
-          <ActionsheetItemText>Favourite</ActionsheetItemText>
-        </ActionsheetItem>
-        <ActionsheetItem>
-          <ActionsheetItemText>Cancel</ActionsheetItemText>
-        </ActionsheetItem>
-      </ActionsheetContent>
-    </Box>
-  );
-}
-
 ActionsheetBasic.description =
   'This is a basic Actionsheet component example. Actionsheets are used to display a list of actions that can be performed on a page.';
 
 export default ActionsheetBasic;
 
 export {
-  FigmaActionsheetStory,
   Actionsheet,
   ActionsheetIcon,
   ActionsheetBackdrop,
@@ -124,22 +77,4 @@ export {
   ActionsheetSectionList,
   ActionsheetSectionHeaderText,
   ActionsheetVirtualizedList,
-  Button,
-  ButtonText,
-  VStack,
-  HStack,
-  Icon,
-  Box,
-  FormControl,
-  FormControlLabel,
-  FormControlLabelText,
-  Input,
-  InputField,
-  InputIcon,
-  InputSlot,
-  AddIcon,
-  Image,
-  Text,
-  useState,
-  config,
 };
diff --git a/example/storybook-nativewind/src/components/Button/Button.stories.tsx b/example/storybook-nativewind/src/components/Button/Button.stories.tsx
index f31a56a7d8..a1db9efd0c 100644
--- a/example/storybook-nativewind/src/components/Button/Button.stories.tsx
+++ b/example/storybook-nativewind/src/components/Button/Button.stories.tsx
@@ -33,7 +33,7 @@ const ButtonMeta: ComponentMeta<typeof Button> = {
     },
     size: {
       control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      options: ['xs', 'sm', 'md', 'lg'],
     },
     isHovered: {
       control: 'boolean',
diff --git a/example/storybook-nativewind/src/components/Modal/Modal.tsx b/example/storybook-nativewind/src/components/Modal/Modal.tsx
index 3f3f946e86..732279bf37 100644
--- a/example/storybook-nativewind/src/components/Modal/Modal.tsx
+++ b/example/storybook-nativewind/src/components/Modal/Modal.tsx
@@ -9,17 +9,16 @@ import {
   ModalFooter,
   ModalHeader,
 } from '@/components/ui/modal';
-import { Center } from '@/components/ui/center';
 import { Heading } from '@/components/ui/heading';
 import { Icon, CloseIcon } from '@/components/ui/icon';
 import { Text } from '@/components/ui/text';
 
 const ModalBasic = () => {
   const [showModal, setShowModal] = useState(false);
-  const ref = React.useRef(null);
+
   return (
-    <Center h={300}>
-      <Button onPress={() => setShowModal(true)} ref={ref}>
+    <>
+      <Button onPress={() => setShowModal(true)}>
         <ButtonText>Show Modal</ButtonText>
       </Button>
       <Modal
@@ -27,7 +26,6 @@ const ModalBasic = () => {
         onClose={() => {
           setShowModal(false);
         }}
-        finalFocusRef={ref}
       >
         <ModalBackdrop />
         <ModalContent>
@@ -69,7 +67,7 @@ const ModalBasic = () => {
           </ModalFooter>
         </ModalContent>
       </Modal>
-    </Center>
+    </>
   );
 };
 
diff --git a/example/storybook-nativewind/src/components/Progress/Progress.tsx b/example/storybook-nativewind/src/components/Progress/Progress.tsx
index 065e44032a..0592039c57 100644
--- a/example/storybook-nativewind/src/components/Progress/Progress.tsx
+++ b/example/storybook-nativewind/src/components/Progress/Progress.tsx
@@ -5,22 +5,10 @@ import { Box } from '@/components/ui/box';
 import { Heading } from '@/components/ui/heading';
 import { Center } from '@/components/ui/center';
 
-const ProgressBasic = ({ value = 50, ...props }: any) => {
+const ProgressBasic = ({ ...props }: any) => {
   return (
-    <Center>
-      <Progress
-        // sx={{
-        //   w: 300,
-        //   _web: {
-        //     w: 800,
-        //   },
-        // }}
-        style={{
-          width: 800,
-        }}
-        value={value}
-        {...props}
-      >
+    <Center className="w-full">
+      <Progress className="w-[80%]" {...props}>
         <ProgressFilledTrack />
       </Progress>
     </Center>
diff --git a/example/storybook-nativewind/src/components/Select/Select.tsx b/example/storybook-nativewind/src/components/Select/Select.tsx
index 9b898fdaf5..f48b6a0006 100644
--- a/example/storybook-nativewind/src/components/Select/Select.tsx
+++ b/example/storybook-nativewind/src/components/Select/Select.tsx
@@ -23,22 +23,18 @@ const SelectBasic = ({ size = 'md', variant = 'outline', ...props }: any) => {
       </SelectTrigger>
       <SelectPortal>
         <SelectBackdrop />
-        <SelectContent>
+        <SelectContent className="bg-red-200 web:w-[300px]">
           <SelectDragIndicatorWrapper>
             <SelectDragIndicator />
           </SelectDragIndicatorWrapper>
-          <SelectItem label="UX Research" value="UX Research" />
-          <SelectItem label="Web Development" value="Web Development" />
+          <SelectItem label="UX Research" value="ux" />
+          <SelectItem label="Web Development" value="web" />
           <SelectItem
-            label="Cross Platform Development Process"
-            value="Cross Platform Development Process"
+            label="Cross Platform Development Process Cross Platform Development Process"
+            value="cross-platform"
           />
-          <SelectItem
-            label="UI Designing"
-            value="UI Designing"
-            isDisabled={true}
-          />
-          <SelectItem label="Backend Development" value="Backend Development" />
+          <SelectItem label="UI Designing" value="ui" isDisabled={true} />
+          <SelectItem label="Backend Development" value="backend" />
         </SelectContent>
       </SelectPortal>
     </Select>
diff --git a/example/storybook-nativewind/src/components/Slider/Slider.tsx b/example/storybook-nativewind/src/components/Slider/Slider.tsx
index 34c72ee1eb..c0f929912d 100644
--- a/example/storybook-nativewind/src/components/Slider/Slider.tsx
+++ b/example/storybook-nativewind/src/components/Slider/Slider.tsx
@@ -1,17 +1,4 @@
 import React from 'react';
-import {
-  Text,
-  VStack,
-  HStack,
-  Box,
-  Icon,
-  Heading,
-  Tooltip,
-  TooltipContent,
-  Button,
-  Center,
-} from '@gluestack-ui/themed';
-
 import {
   Slider,
   SliderTrack,
@@ -19,10 +6,8 @@ import {
   SliderThumb,
 } from '@/components/ui/slider';
 
-import { Volume, Volume2Icon, LightbulbIcon } from 'lucide-react-native';
-
-const SliderBasic = ({ value, ...props }: any) => {
-  const [sliderValue, setSliderValue] = React.useState(value);
+const SliderBasic = ({ ...props }: any) => {
+  const [sliderValue, setSliderValue] = React.useState(props.value);
   const handleChange = (value: any) => {
     setSliderValue(value);
   };
@@ -49,22 +34,4 @@ SliderBasic.description =
 
 export default SliderBasic;
 
-export {
-  Slider,
-  SliderTrack,
-  SliderFilledTrack,
-  SliderThumb,
-  VStack,
-  Volume,
-  HStack,
-  Volume2Icon,
-  Text,
-  Box,
-  LightbulbIcon,
-  Icon,
-  Heading,
-  Tooltip,
-  TooltipContent,
-  Button,
-  Center,
-};
+export { Slider, SliderTrack, SliderFilledTrack, SliderThumb };
diff --git a/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx b/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx
index 4bb1c74b83..adf3bda988 100644
--- a/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx
+++ b/example/storybook-nativewind/src/components/Switch/Switch.stories.tsx
@@ -18,10 +18,6 @@ const SwitchMeta: ComponentMeta<typeof Switch> = {
       control: 'boolean',
       options: [true, false],
     },
-    isEnabled: {
-      control: 'boolean',
-      options: [true, false],
-    },
     isInvalid: {
       control: 'boolean',
       options: [true, false],
@@ -34,7 +30,6 @@ const SwitchMeta: ComponentMeta<typeof Switch> = {
   args: {
     size: 'md',
     isDisabled: false,
-    isEnabled: false,
     isInvalid: false,
     defaultValue: false,
   },
diff --git a/example/storybook-nativewind/src/components/Textarea/Textarea.tsx b/example/storybook-nativewind/src/components/Textarea/Textarea.tsx
index e646f0dc89..c09f002c92 100644
--- a/example/storybook-nativewind/src/components/Textarea/Textarea.tsx
+++ b/example/storybook-nativewind/src/components/Textarea/Textarea.tsx
@@ -1,13 +1,4 @@
 import React from 'react';
-import {
-  FormControl,
-  FormControlHelper,
-  FormControlHelperText,
-  FormControlError,
-  FormControlLabel,
-  FormControlLabelText,
-} from '@gluestack-ui/themed';
-
 import { Textarea, TextareaInput } from '@/components/ui/textarea';
 
 const TextareaBasic = ({ ...props }: any) => {
@@ -22,14 +13,4 @@ TextareaBasic.description =
   'This is a basic Textarea component example. Textareas are used to get multiline input from the user.';
 
 export default TextareaBasic;
-
-export {
-  Textarea,
-  TextareaInput,
-  FormControl,
-  FormControlHelper,
-  FormControlHelperText,
-  FormControlError,
-  FormControlLabel,
-  FormControlLabelText,
-};
+export { Textarea, TextareaInput };
diff --git a/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx
index 7d09c4eee6..8b07dbbb8e 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/actionsheet/index.tsx
@@ -16,8 +16,7 @@ import {
 
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
+import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 import { cssInterop } from 'nativewind';
 import {
   Motion,
@@ -70,14 +69,15 @@ const PrimitiveIcon = React.forwardRef(
   }
 );
 
+const ItemWrapper = React.forwardRef(({ ...props }: any, ref?: any) => {
+  return <Pressable {...props} ref={ref} />;
+});
+
 const AnimatedPressable = createMotionAnimatedComponent(Pressable);
 export const UIActionsheet = createActionsheet({
   Root: View,
-  Content: withStyleContext(Motion.View),
-  Item:
-    Platform.OS === 'web'
-      ? withStyleContext(Pressable)
-      : withStyleContextAndStates(Pressable),
+  Content: Motion.View,
+  Item: Platform.OS === 'web' ? ItemWrapper : withStates(ItemWrapper),
   ItemText: Text,
   DragIndicator: View,
   IndicatorWrapper: View,
@@ -93,7 +93,7 @@ export const UIActionsheet = createActionsheet({
 
 cssInterop(UIActionsheet, { className: 'style' });
 cssInterop(UIActionsheet.Content, { className: 'style' });
-cssInterop(UIActionsheet.Item, { className: 'style' });
+cssInterop(ItemWrapper, { className: 'style' });
 cssInterop(UIActionsheet.ItemText, { className: 'style' });
 cssInterop(UIActionsheet.DragIndicator, { className: 'style' });
 cssInterop(UIActionsheet.DragIndicatorWrapper, { className: 'style' });
@@ -124,7 +124,7 @@ const actionsheetContentStyle = tva({
 });
 
 const actionsheetItemStyle = tva({
-  base: 'w-full flex-row items-center p-3 rounded-sm disabled:opacity-40 disabled:web:pointer-events-auto disabled:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 focus:bg-background-100 web:focus-visible:bg-background-100',
+  base: 'w-full flex-row items-center p-3 rounded-sm data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-auto data-[disabled=true]:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 data-[focus=true]:bg-background-100 web:data-[focus-visible=true]:bg-background-100',
 });
 
 const actionsheetItemTextStyle = tva({
diff --git a/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
index a8194da0f8..f1b59a186d 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { createAlert } from '@gluestack-ui/alert';
-import { View, Text, Platform } from 'react-native';
+import { View, Text } from 'react-native';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import {
   withStyleContext,
@@ -10,7 +10,6 @@ import React, { useMemo } from 'react';
 import { Svg } from 'react-native-svg';
 import { cssInterop } from 'nativewind';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 
 const SCOPE = 'ALERT';
 
@@ -104,14 +103,23 @@ const alertIconStyle = tva({
 
 const PrimitiveIcon = React.forwardRef(
   (
-    { height, width, fill, color, size, stroke, as: AsComp, ...props }: any,
+    {
+      height,
+      width,
+      fill,
+      color,
+      size,
+      stroke = 'currentColor',
+      as: AsComp,
+      ...props
+    }: any,
     ref?: any
   ) => {
     const sizeProps = useMemo(() => {
       return size ? { size } : { height, width };
     }, [size, height, width]);
 
-    let colorProps =
+    const colorProps =
       stroke === 'currentColor' && color !== undefined ? color : stroke;
 
     if (AsComp) {
@@ -138,16 +146,20 @@ const PrimitiveIcon = React.forwardRef(
   }
 );
 
+const IconWrapper = React.forwardRef(({ ...props }: any, ref?: any) => {
+  return <PrimitiveIcon {...props} ref={ref} />;
+});
+
 export const UIAlert = createAlert({
   Root: withStyleContext(View, SCOPE),
   Text: Text,
-  Icon: Platform.OS === 'web' ? PrimitiveIcon : withStates(PrimitiveIcon),
+  Icon: IconWrapper,
 });
 
 cssInterop(UIAlert, { className: 'style' });
 //@ts-ignore
 cssInterop(UIAlert.Text, { className: 'style' });
-cssInterop(UIAlert.Icon, {
+cssInterop(IconWrapper, {
   className: {
     target: 'style',
     nativeStyleToProp: {
diff --git a/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
index a689d064dc..824a24b47c 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
@@ -3,9 +3,10 @@ import React from 'react';
 import { createMenu } from '@gluestack-ui/menu';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';
 import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop';
-import { Pressable, Text } from 'react-native';
+import { Pressable, Text, Platform } from 'react-native';
 import { Motion, AnimatePresence } from '@legendapp/motion';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 
 const menuStyle = tva({
   base: 'rounded bg-background-0 overflow-hidden border border-outline-200 p-1 shadow',
@@ -96,7 +97,7 @@ const Item = React.forwardRef(
 );
 export const UIMenu = createMenu({
   Root: Motion.View,
-  Item: Item,
+  Item: Platform.OS === 'web' ? Item : withStates(Item),
   Label: Text,
   Backdrop: BackdropPressable,
   AnimatePresence: AnimatePresence,
diff --git a/example/storybook-v7/tailwind.config.js b/example/storybook-v7/tailwind.config.js
index ca1d801291..376fb0b73b 100644
--- a/example/storybook-v7/tailwind.config.js
+++ b/example/storybook-v7/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
     './../storybook-nativewind/components/**/*.{html,js,jsx,ts,tsx,mdx}',
     './../../packages/**/*.{html,js,jsx,ts,tsx,mdx}',
   ],
+  safelist: ['border-error-700'],
   presets: [require('nativewind/preset')],
   theme: {
     extend: {

From 2a8aa3e61c160285baef06601b56d046c5dad3ac Mon Sep 17 00:00:00 2001
From: Rajat Chaudhary <rajatchaudhary@Rajats-MacBook-Air.local>
Date: Fri, 31 May 2024 16:39:02 +0530
Subject: [PATCH 2/3] fix: issues of skeleton component

---
 .../src/components/Skeleton/Skeleton.tsx      |  6 ++---
 .../src/components/Skeleton/SkeletonCard.tsx  | 20 ++++++++++-----
 .../nativewind/skeleton/index.tsx             | 25 ++++++++++++-------
 .../nativewind/skeleton/index.web.tsx         |  5 +---
 .../nativewind/skeleton/styles.tsx            |  2 +-
 5 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/example/storybook-nativewind/src/components/Skeleton/Skeleton.tsx b/example/storybook-nativewind/src/components/Skeleton/Skeleton.tsx
index cec6d278b9..9487d14912 100644
--- a/example/storybook-nativewind/src/components/Skeleton/Skeleton.tsx
+++ b/example/storybook-nativewind/src/components/Skeleton/Skeleton.tsx
@@ -9,11 +9,11 @@ import { Text } from '@/components/ui/text';
 
 const SkeletonExample = () => {
   return (
-    <Box className="w-[290px] h-[400px] p-4 rounded-sm bg-background-100 gap-3">
-      <Skeleton variant="rounded" className="h-44 w-64 rounded-sm">
+    <Box className="w-[290px] h-[400px] p-4 rounded-md bg-background-100 gap-3">
+      <Skeleton variant="rounded" className="h-44 w-64">
         <Image
           size="full"
-          className="h-44 w-64 rounded-sm"
+          className="h-44 w-64 rounded-md"
           source={{
             uri: 'https://images.unsplash.com/photo-1715006020121-dd50879f9821?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
           }}
diff --git a/example/storybook-nativewind/src/components/Skeleton/SkeletonCard.tsx b/example/storybook-nativewind/src/components/Skeleton/SkeletonCard.tsx
index 1069a3be6d..5c03a1c3d2 100644
--- a/example/storybook-nativewind/src/components/Skeleton/SkeletonCard.tsx
+++ b/example/storybook-nativewind/src/components/Skeleton/SkeletonCard.tsx
@@ -6,12 +6,13 @@ import { Image } from '@/components/ui/image';
 import { Text } from '@/components/ui/text';
 import { VStack } from '@/components/ui/vstack';
 import { Switch } from '@/components/ui/switch';
+import { ScrollView } from '@/components/ui/scroll-view';
 
 const SkeletonCard = () => {
   const [isLoaded, setIsLoaded] = React.useState(false);
 
   return (
-    <VStack>
+    <VStack className="w-full h-full">
       <Switch
         value={isLoaded}
         onToggle={() => {
@@ -19,13 +20,13 @@ const SkeletonCard = () => {
         }}
         className="mb-10"
       />
-      <HStack className="gap-3">
+      <ScrollView className="gap-3 w-full" horizontal={true}>
         {Array(3)
           .fill(0)
           .map((_, index) => (
             <Box
               key={index}
-              className="w-[325px] h-full gap-4 p-3 border border-gray-200 rounded-md"
+              className="w-[250px] gap-4 p-3 h-[50%] web:h-full mx-2 border border-outline-200 rounded-md"
             >
               <Skeleton
                 variant="sharp"
@@ -40,7 +41,7 @@ const SkeletonCard = () => {
                 />
               </Skeleton>
               <SkeletonText _lines={4} className="h-3" isLoaded={isLoaded}>
-                <Text className="font-medium">
+                <Text className="" size="sm">
                   Lorem ipsum dolor sit amet conseur aing ae elit. Deserunt ipsa
                   libero eius sunt quae is voluptas
                 </Text>
@@ -64,12 +65,19 @@ const SkeletonCard = () => {
                   className="h-2 w-2/5"
                   isLoaded={isLoaded}
                 >
-                  <Text className="font-medium">username</Text>
+                  <Box>
+                    <Text className="" size="xs">
+                      username
+                    </Text>
+                    <Text className="" size="xs">
+                      username
+                    </Text>
+                  </Box>
                 </SkeletonText>
               </HStack>
             </Box>
           ))}
-      </HStack>
+      </ScrollView>
     </VStack>
   );
 };
diff --git a/example/storybook-nativewind/src/core-components/nativewind/skeleton/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/skeleton/index.tsx
index 3643f3bcfb..97acd83b76 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/skeleton/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/skeleton/index.tsx
@@ -87,7 +87,7 @@ const SkeletonText = forwardRef(
       _lines,
       isLoaded = false,
       startColor = 'bg-background-200',
-      gap,
+      gap = 2,
       children,
       ...props
     }: ISkeletonTextProps,
@@ -95,17 +95,24 @@ const SkeletonText = forwardRef(
   ) => {
     if (!isLoaded) {
       if (_lines) {
-        return Array.from({ length: _lines }).map((_, index) => (
-          <Skeleton
-            key={index}
-            className={`${startColor} ${skeletonTextStyle({
+        return (
+          <View
+            className={`${skeletonTextStyle({
               gap,
-              class: className,
             })}`}
-            {...props}
             ref={ref}
-          />
-        ));
+          >
+            {Array.from({ length: _lines }).map((_, index) => (
+              <Skeleton
+                key={index}
+                className={`${startColor} ${skeletonTextStyle({
+                  class: className,
+                })}`}
+                {...props}
+              />
+            ))}
+          </View>
+        );
       } else {
         return (
           <Skeleton
diff --git a/example/storybook-nativewind/src/core-components/nativewind/skeleton/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/skeleton/index.web.tsx
index d4c7ffe3b4..1dc33730e0 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/skeleton/index.web.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/skeleton/index.web.tsx
@@ -5,7 +5,7 @@ const Skeleton = ({
   className,
   variant,
   children,
-  speed,
+  speed = 2,
   startColor = 'bg-background-200',
   isLoaded = false,
   ...props
@@ -31,7 +31,6 @@ const SkeletonText = ({
   _lines,
   isLoaded = false,
   startColor = 'bg-background-200',
-  speed = 1,
   gap = 2,
   children,
   ...props
@@ -48,7 +47,6 @@ const SkeletonText = ({
             <div
               key={index}
               className={`animate-pulse ${startColor} ${skeletonTextStyle({
-                speed,
                 class: className,
               })}`}
               {...props}
@@ -60,7 +58,6 @@ const SkeletonText = ({
       return (
         <div
           className={`animate-pulse ${startColor} ${skeletonTextStyle({
-            speed,
             class: className,
           })}`}
           {...props}
diff --git a/example/storybook-nativewind/src/core-components/nativewind/skeleton/styles.tsx b/example/storybook-nativewind/src/core-components/nativewind/skeleton/styles.tsx
index 211d5e3afa..bf9c0027ce 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/skeleton/styles.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/skeleton/styles.tsx
@@ -20,7 +20,7 @@ export const skeletonStyle = tva({
   },
 });
 export const skeletonTextStyle = tva({
-  base: 'rounded-sm w-full h-full',
+  base: 'rounded-sm w-full',
   variants: {
     speed: {
       1: 'duration-75',

From d4c616bef41b15f4519ab8e16efabc5e213a0eeb Mon Sep 17 00:00:00 2001
From: Rajat Chaudhary <rajatchaudhary@Rajats-MacBook-Air.local>
Date: Mon, 3 Jun 2024 12:24:40 +0530
Subject: [PATCH 3/3] feat: updated tailwind.config.js file

---
 .../storybook-nativewind/src/components/Select/Select.tsx   | 2 +-
 example/storybook-nativewind/tailwind.config.js             | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/example/storybook-nativewind/src/components/Select/Select.tsx b/example/storybook-nativewind/src/components/Select/Select.tsx
index f48b6a0006..75e42b623f 100644
--- a/example/storybook-nativewind/src/components/Select/Select.tsx
+++ b/example/storybook-nativewind/src/components/Select/Select.tsx
@@ -23,7 +23,7 @@ const SelectBasic = ({ size = 'md', variant = 'outline', ...props }: any) => {
       </SelectTrigger>
       <SelectPortal>
         <SelectBackdrop />
-        <SelectContent className="bg-red-200 web:w-[300px]">
+        <SelectContent>
           <SelectDragIndicatorWrapper>
             <SelectDragIndicator />
           </SelectDragIndicatorWrapper>
diff --git a/example/storybook-nativewind/tailwind.config.js b/example/storybook-nativewind/tailwind.config.js
index faa2210851..f7ca762fbf 100644
--- a/example/storybook-nativewind/tailwind.config.js
+++ b/example/storybook-nativewind/tailwind.config.js
@@ -7,7 +7,11 @@ module.exports = {
     './src/components/**/*.{html,js,jsx,ts,tsx,mdx}',
   ],
   presets: [require('nativewind/preset')],
-  safelist: ['border-error-700'],
+  safelist: [
+    {
+      pattern: /border-(error)-(0|50|100|200|300|400|500|600|800|900|950)/,
+    },
+  ],
   theme: {
     extend: {
       colors: {