fix: actionsheet

Author: Rajat Chaudhary

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

@@ -1126,4 +1126,126 @@ The Actionsheet with SectionList is a variation of the Actionsheet component tha
       argsType: {},
     }}
   />
-</Wrapper>
+</Wrapper>
+
+{/* ### Actionsheet with CTA
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App(){
+          const [showActionsheet, setShowActionsheet] = React.useState(false);
+          const handleClose = () => setShowActionsheet(false);
+          return (
+            <>
+              <Button onPress={() => setShowActionsheet(true)}>
+                <ButtonText>Open</ButtonText>
+              </Button>
+              <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
+                <ActionsheetBackdrop />
+                <ActionsheetContent className="px-5">
+                  <ActionsheetDragIndicatorWrapper>
+                    <ActionsheetDragIndicator />
+                  </ActionsheetDragIndicatorWrapper>
+                  <HStack className="justify-between w-full gap-2 mt-3">
+                    <Text
+                      size="xl"
+                      className="font-semibold text-typography-900 flex-1"
+                    >
+                      See what all new features are available in this updated
+                    </Text>
+                    <Pressable onPress={handleClose}>
+                      <Icon as={CloseIcon} size="lg" className="stroke-background-500" />
+                    </Pressable>
+                  </HStack>
+                  <VStack className="my-5 gap-3 w-full">
+                    <ActionsheetItem className="gap-3 w-full" onPress={handleClose}>
+                      <Box className="bg-success-700 rounded-full items-center justify-center w-8 h-8">
+                        <ActionsheetIcon size="sm" as={Send} className="stroke-typography-0" />
+                      </Box>
+                      <VStack className="flex-1">
+                        <Text className="text-typography-950">
+                          Simplified navigation
+                        </Text>
+                        <ActionsheetItemText size="sm">
+                          Usage of app was never that easy: all important things at your
+                          fingertips
+                        </ActionsheetItemText>
+                      </VStack>
+                    </ActionsheetItem>
+                    <ActionsheetItem className="gap-3" onPress={handleClose}>
+                      <Box className="w-8 h-8 bg-success-700 rounded-full items-center justify-center">
+                        <ActionsheetIcon
+                          size="sm"
+                          as={Percent}
+                          className="stroke-typography-0"
+                        />
+                      </Box>
+                      <VStack className="flex-1">
+                        <Text className="text-typography-950">Special offer</Text>
+                        <ActionsheetItemText size="sm">
+                          Get new offers and discounts every week right in the app
+                        </ActionsheetItemText>
+                      </VStack>
+                    </ActionsheetItem>
+                    <ActionsheetItem className="gap-3" onPress={handleClose}>
+                      <Box className="w-8 h-8 bg-success-700 rounded-full items-center justify-center">
+                        <ActionsheetIcon
+                          size="sm"
+                          as={DollarSign}
+                          className="stroke-typography-0"
+                        />
+                      </Box>
+                      <VStack className="flex-1">
+                        <Text className="text-typography-950">New cashback</Text>
+                        <ActionsheetItemText size="sm">
+                          Get daily cashback from every purchase you make and even more
+                          when you shop at our partners
+                        </ActionsheetItemText>
+                      </VStack>
+                    </ActionsheetItem>
+                  </VStack>
+                  <Button className="w-full" size="lg" onPress={handleClose}>
+                    <ButtonText>Explore all</ButtonText>
+                  </Button>
+                </ActionsheetContent>
+              </Actionsheet>
+            </>
+          );
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Actionsheet,
+        ActionsheetBackdrop,
+        ActionsheetContent,
+        ActionsheetDragIndicator,
+        ActionsheetDragIndicatorWrapper,
+        ActionsheetItem,
+        ActionsheetIcon,
+        ActionsheetItemText,
+        ActionsheetSectionList,
+        ActionsheetSectionHeaderText,
+        Button,
+        ButtonText,
+        Wrapper,
+        HStack,
+        VStack,
+        Box,
+        Text,
+        Icon,
+        CloseIcon,
+        Send,
+        Percent,
+        DollarSign,
+        Pressable
+      },
+      argsType: {},
+    }}
+  />
+</Wrapper> */}