@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/carousel/__stories__/Carousel.stories.js

@@ -0,0 +1,740 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { Dimensions, Image, StyleSheet, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { assets, coinbaseOneLogo } from '@coinbase/cds-common/internal/data/assets';
+import { animated, useSpring } from '@react-spring/native';
+import { Button } from '../../buttons';
+import { IconButton } from '../../buttons/IconButton';
+import { ContainedAssetCard } from '../../cards/ContainedAssetCard';
+import { NudgeCard } from '../../cards/NudgeCard';
+import { UpsellCard } from '../../cards/UpsellCard';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { Box, HStack, VStack } from '../../layout';
+import { RemoteImage } from '../../media';
+import { Pressable } from '../../system/Pressable';
+import { Link, TextHeadline, TextLabel2 } from '../../typography';
+import { Text } from '../../typography/Text';
+import { Carousel } from '../Carousel';
+import { CarouselItem } from '../CarouselItem';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const styles = StyleSheet.create({
+  sampleCard: {
+    height: 192,
+    // 12rem equivalent
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 16,
+    borderWidth: 1,
+    borderStyle: 'dashed'
+  },
+  upsellImage: {
+    width: 130,
+    height: 174,
+    position: 'relative',
+    left: 10
+  },
+  assetImage: {
+    width: 32,
+    height: 32
+  }
+});
+const SampleCard = _ref => {
+  let {
+    text
+  } = _ref;
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.sampleCard, {
+      backgroundColor: theme.color.accentSubtleBlue,
+      borderColor: theme.color.accentBoldBlue
+    }],
+    children: /*#__PURE__*/_jsx(Text, {
+      color: "fgPrimary",
+      font: "label1",
+      children: text
+    })
+  });
+};
+const SampleUpsellCard = () => /*#__PURE__*/_jsx(UpsellCard, {
+  action: "Buy Bitcoin now",
+  description: "Check out the most popular assets",
+  media: /*#__PURE__*/_jsx(Image, {
+    alt: "Coinbase One",
+    source: {
+      uri: coinbaseOneLogo
+    },
+    style: styles.upsellImage
+  }),
+  onActionPress: () => console.log('pressed'),
+  title: "Headline",
+  width: "100%"
+});
+const sampleItems = [/*#__PURE__*/_jsx(SampleCard, {
+  text: "Slide 1"
+}, "1"), /*#__PURE__*/_jsx(SampleCard, {
+  text: "Slide 2"
+}, "2"), /*#__PURE__*/_jsx(SampleCard, {
+  text: "Slide 3"
+}, "3"), /*#__PURE__*/_jsx(SampleCard, {
+  text: "Slide 4"
+}, "4"), /*#__PURE__*/_jsx(SampleCard, {
+  text: "Slide 5"
+}, "5"), /*#__PURE__*/_jsx(SampleCard, {
+  text: "Slide 6"
+}, "6"), /*#__PURE__*/_jsx(SampleCard, {
+  text: "Slide 7"
+}, "7"), /*#__PURE__*/_jsx(SampleCard, {
+  text: "Slide 8"
+}, "8"), /*#__PURE__*/_jsx(SampleCard, {
+  text: "Slide 9"
+}, "9"), /*#__PURE__*/_jsx(SampleCard, {
+  text: "Slide 10"
+}, "10")];
+const SeeAllComponent = () => /*#__PURE__*/_jsx(TextHeadline, {
+  children: /*#__PURE__*/_jsx(Link, {
+    to: "https://coinbase.com/",
+    children: "See all"
+  })
+});
+const SquareAssetCard = _ref2 => {
+  let {
+    imageUrl,
+    name
+  } = _ref2;
+  return /*#__PURE__*/_jsx(ContainedAssetCard, {
+    description: /*#__PURE__*/_jsx(Text, {
+      color: "fgPositive",
+      font: "label2",
+      numberOfLines: 2,
+      children: "\u21976.37%"
+    }),
+    header: /*#__PURE__*/_jsx(RemoteImage, {
+      height: 32,
+      source: imageUrl,
+      style: styles.assetImage,
+      width: 32
+    }),
+    subtitle: name,
+    title: "$0.87"
+  });
+};
+const BasicExamples = () => {
+  const theme = useTheme();
+  const horizontalPadding = theme.space[2];
+  const windowWidth = Dimensions.get('window').width;
+  const carouselSizing = windowWidth - horizontalPadding * 2;
+  const horizontalGap = theme.space[1];
+  const twoItemsWidth = (carouselSizing - horizontalGap) / 2;
+  const threeItemsWidth = (carouselSizing - horizontalGap * 2) / 3;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      paddingX: 0,
+      children: /*#__PURE__*/_jsx(Carousel, {
+        styles: {
+          root: {
+            paddingHorizontal: horizontalPadding
+          },
+          carousel: {
+            gap: horizontalGap
+          }
+        },
+        title: "Snap Page",
+        children: sampleItems.map((item, index) => /*#__PURE__*/_jsx(CarouselItem, {
+          id: "spaced-" + index,
+          width: threeItemsWidth,
+          children: item
+        }, "spaced-" + index))
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      paddingX: 0,
+      children: /*#__PURE__*/_jsx(Carousel, {
+        drag: "snap",
+        snapMode: "item",
+        styles: {
+          root: {
+            paddingHorizontal: horizontalPadding
+          },
+          carousel: {
+            gap: horizontalGap
+          },
+          title: {
+            color: theme.color.fgPrimary
+          }
+        },
+        title: "Snap Item",
+        children: sampleItems.map((item, index) => /*#__PURE__*/_jsx(CarouselItem, {
+          id: "snap-" + index,
+          width: twoItemsWidth,
+          children: item
+        }, "snap-" + index))
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      paddingX: 0,
+      children: /*#__PURE__*/_jsx(Carousel, {
+        NavigationComponent: SeeAllComponent,
+        drag: "free",
+        snapMode: "item",
+        styles: {
+          root: {
+            paddingHorizontal: horizontalPadding
+          },
+          carousel: {
+            gap: horizontalGap
+          }
+        },
+        title: "Square Items Carousel",
+        children: Object.values(assets).map(asset => /*#__PURE__*/_jsx(CarouselItem, {
+          id: asset.symbol,
+          children: /*#__PURE__*/_jsx(SquareAssetCard, {
+            imageUrl: asset.imageUrl,
+            name: asset.symbol
+          })
+        }, asset.symbol))
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      paddingX: 0,
+      children: /*#__PURE__*/_jsxs(Carousel, {
+        drag: "snap",
+        snapMode: "page",
+        styles: {
+          root: {
+            paddingHorizontal: horizontalPadding
+          },
+          carousel: {
+            gap: theme.space[1]
+          }
+        },
+        title: "Full Width Cards",
+        children: [/*#__PURE__*/_jsx(CarouselItem, {
+          id: "upsell-1",
+          width: "100%",
+          children: /*#__PURE__*/_jsx(SampleUpsellCard, {})
+        }), /*#__PURE__*/_jsx(CarouselItem, {
+          id: "upsell-2",
+          width: "100%",
+          children: /*#__PURE__*/_jsx(SampleUpsellCard, {})
+        }), /*#__PURE__*/_jsx(CarouselItem, {
+          id: "upsell-3",
+          width: "100%",
+          children: /*#__PURE__*/_jsx(SampleUpsellCard, {})
+        }), /*#__PURE__*/_jsx(CarouselItem, {
+          id: "upsell-4",
+          width: "100%",
+          children: /*#__PURE__*/_jsx(SampleUpsellCard, {})
+        }), /*#__PURE__*/_jsx(CarouselItem, {
+          id: "upsell-5",
+          width: "100%",
+          children: /*#__PURE__*/_jsx(SampleUpsellCard, {})
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      paddingX: 0,
+      children: /*#__PURE__*/_jsx(Carousel, {
+        drag: "none",
+        styles: {
+          root: {
+            paddingHorizontal: horizontalPadding
+          },
+          carousel: {
+            gap: horizontalGap
+          }
+        },
+        title: "Navigation Only (No Drag)",
+        children: sampleItems.slice(0, 4).map((item, index) => /*#__PURE__*/_jsx(CarouselItem, {
+          id: "nav-only-" + index,
+          width: "100%",
+          children: item
+        }, "nav-only-" + index))
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      paddingX: 0,
+      children: /*#__PURE__*/_jsx(Carousel, {
+        hideNavigation: true,
+        hidePagination: true,
+        styles: {
+          root: {
+            paddingHorizontal: horizontalPadding
+          },
+          carousel: {
+            gap: horizontalGap
+          }
+        },
+        title: "Drag Only (No Navigation or Pagination)",
+        children: sampleItems.slice(0, 4).map((item, index) => /*#__PURE__*/_jsx(CarouselItem, {
+          id: "drag-only-" + index,
+          width: "100%",
+          children: item
+        }, "drag-only-" + index))
+      })
+    })]
+  });
+};
+const CustomComponentsExample = () => {
+  const theme = useTheme();
+  const CustomPaginationComponent = _ref3 => {
+    let {
+      totalPages,
+      activePageIndex,
+      onPressPage,
+      style
+    } = _ref3;
+    const canGoPrevious = activePageIndex > 0;
+    const canGoNext = activePageIndex < totalPages - 1;
+    const onPrevious = () => {
+      onPressPage(activePageIndex - 1);
+    };
+    const onNext = () => {
+      onPressPage(activePageIndex + 1);
+    };
+    return /*#__PURE__*/_jsxs(HStack, {
+      justifyContent: "space-between",
+      style: style,
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          accessibilityLabel: "Previous",
+          disabled: !canGoPrevious,
+          name: "caretLeft",
+          onPress: onPrevious,
+          variant: "foregroundMuted"
+        }), /*#__PURE__*/_jsx(IconButton, {
+          accessibilityLabel: "Next",
+          disabled: !canGoNext,
+          name: "caretRight",
+          onPress: onNext,
+          variant: "foregroundMuted"
+        })]
+      }), /*#__PURE__*/_jsx(HStack, {
+        alignItems: "center",
+        gap: 1,
+        children: Array.from({
+          length: totalPages
+        }, (_, index) => /*#__PURE__*/_jsx(Pressable, {
+          accessibilityLabel: "Go to page " + (index + 1),
+          background: index === activePageIndex ? 'bgPrimary' : 'bgSecondary',
+          borderColor: index === activePageIndex ? 'fgPrimary' : 'bgLine',
+          borderRadius: 400,
+          height: 16,
+          onPress: () => onPressPage(index),
+          width: 16
+        }, index))
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsx(Example, {
+    paddingX: 0,
+    children: /*#__PURE__*/_jsxs(Carousel, {
+      NavigationComponent: SeeAllComponent,
+      PaginationComponent: CustomPaginationComponent,
+      styles: {
+        root: {
+          paddingHorizontal: theme.space[3],
+          paddingVertical: theme.space[0.5]
+        },
+        carousel: {
+          gap: theme.space[2]
+        }
+      },
+      title: "Learn more",
+      children: [/*#__PURE__*/_jsx(CarouselItem, {
+        id: "earn-more-crypto",
+        width: "100%",
+        children: /*#__PURE__*/_jsx(NudgeCard, {
+          action: "Start earning",
+          description: "You've got unstaked crypto. Stake it now to earn more.",
+          minWidth: 0,
+          onActionPress: () => console.log('Action pressed'),
+          pictogram: "key",
+          title: "Earn more crypto",
+          width: "100%"
+        })
+      }), /*#__PURE__*/_jsx(CarouselItem, {
+        id: "secure-your-account",
+        width: "100%",
+        children: /*#__PURE__*/_jsx(NudgeCard, {
+          action: "Enable 2FA",
+          description: "Add two-factor authentication for enhanced security.",
+          minWidth: 0,
+          onActionPress: () => console.log('Enable 2FA pressed'),
+          pictogram: "shield",
+          title: "Secure your account",
+          width: "100%"
+        })
+      }), /*#__PURE__*/_jsx(CarouselItem, {
+        id: "complete-your-profile",
+        width: "100%",
+        children: /*#__PURE__*/_jsx(NudgeCard, {
+          action: "Update profile",
+          description: "Add more details to personalize your experience.",
+          minWidth: 0,
+          onActionPress: () => console.log('Update profile pressed'),
+          pictogram: "accountsNavigation",
+          title: "Complete your profile",
+          width: "100%"
+        })
+      })]
+    })
+  });
+};
+const DynamicContentExample = () => {
+  const theme = useTheme();
+  const [items, setItems] = useState(Object.values(assets).slice(0, 3));
+  function addAsset() {
+    const randomAsset = Object.values(assets)[Math.floor(Math.random() * Object.values(assets).length)];
+    setItems([...items, _extends({}, randomAsset, {
+      symbol: randomAsset.symbol + "-" + items.length
+    })]);
+  }
+  return /*#__PURE__*/_jsxs(Example, {
+    paddingX: 0,
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 2,
+      justifyContent: "flex-end",
+      paddingX: 2,
+      children: [/*#__PURE__*/_jsx(Button, {
+        compact: true,
+        onPress: addAsset,
+        children: "Add Asset"
+      }), /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        disabled: items.length === 0,
+        onPress: () => setItems(items.slice(0, -1)),
+        children: "Remove Last"
+      })]
+    }), /*#__PURE__*/_jsx(Carousel, {
+      styles: {
+        root: {
+          paddingHorizontal: theme.space[3]
+        },
+        carousel: {
+          gap: theme.space[1],
+          height: 156
+        }
+      },
+      title: "Explore Assets",
+      children: items.map(asset => /*#__PURE__*/_jsx(CarouselItem, {
+        id: asset.symbol,
+        children: /*#__PURE__*/_jsx(SquareAssetCard, {
+          imageUrl: asset.imageUrl,
+          name: asset.symbol
+        })
+      }, asset.symbol))
+    })]
+  });
+};
+const AnimatedExample = () => {
+  const theme = useTheme();
+  const SquareAssetCard = /*#__PURE__*/memo(_ref4 => {
+    let {
+      imageUrl,
+      name
+    } = _ref4;
+    const theme = useTheme();
+    const squareSize = 156;
+    const largeSize = 327;
+    const [isHighlighted, setIsHighlighted] = useState(false);
+    const [size, setSize] = useState('s');
+    const width = useSharedValue(squareSize);
+    const handleClick = useCallback(() => {
+      const newHighlighted = !isHighlighted;
+      setIsHighlighted(newHighlighted);
+      if (newHighlighted) {
+        setSize('l');
+        width.value = withSpring(largeSize);
+      } else {
+        setSize('s');
+        width.value = withSpring(squareSize);
+      }
+    }, [isHighlighted, width, largeSize, squareSize]);
+    const animatedStyle = useAnimatedStyle(() => {
+      return {
+        width: width.value,
+        overflow: 'hidden',
+        borderRadius: theme.borderRadius[500]
+      };
+    });
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: animatedStyle,
+      children: /*#__PURE__*/_jsx(ContainedAssetCard, {
+        description: /*#__PURE__*/_jsx(TextLabel2, {
+          color: "fgPositive",
+          numberOfLines: 2,
+          children: "\u21976.37%"
+        }),
+        header: /*#__PURE__*/_jsx(RemoteImage, {
+          height: 32,
+          source: imageUrl,
+          width: 32
+        }),
+        onPress: handleClick,
+        size: size,
+        subtitle: name,
+        title: "$0.87",
+        children: /*#__PURE__*/_jsx(VStack, {
+          height: squareSize,
+          justifyContent: "center",
+          padding: 1
+        })
+      })
+    });
+  });
+  return /*#__PURE__*/_jsx(Example, {
+    paddingX: 0,
+    children: /*#__PURE__*/_jsx(Carousel, {
+      styles: {
+        root: {
+          paddingHorizontal: theme.space[3]
+        },
+        carousel: {
+          gap: theme.space[1]
+        }
+      },
+      title: "Explore Assets",
+      children: Object.values(assets).map(asset => /*#__PURE__*/_jsx(CarouselItem, {
+        id: asset.symbol,
+        children: /*#__PURE__*/_jsx(SquareAssetCard, {
+          imageUrl: asset.imageUrl,
+          name: asset.symbol
+        })
+      }, asset.symbol))
+    })
+  });
+};
+const ImperativeApiExample = () => {
+  const theme = useTheme();
+  const carouselRef = useRef(null);
+  const [currentPageInfo, setCurrentPageInfo] = useState('Page 1');
+  const handleGoToPage = pageIndex => {
+    if (carouselRef.current) {
+      const clampedPageIndex = Math.max(0, Math.min(carouselRef.current.totalPages - 1, pageIndex));
+      carouselRef.current.goToPage(clampedPageIndex);
+      setCurrentPageInfo("Page " + (clampedPageIndex + 1));
+    }
+  };
+  const handleGoToFirstPage = () => {
+    handleGoToPage(0);
+  };
+  const handleGoToLastPage = () => {
+    if (carouselRef.current) {
+      handleGoToPage(carouselRef.current.totalPages - 1);
+    }
+  };
+  const handleGoToPrevPage = () => {
+    if (carouselRef.current) {
+      handleGoToPage(carouselRef.current.activePageIndex - 1);
+    }
+  };
+  const handleGoToNextPage = () => {
+    if (carouselRef.current) {
+      handleGoToPage(carouselRef.current.activePageIndex + 1);
+    }
+  };
+  return /*#__PURE__*/_jsx(Example, {
+    paddingX: 0,
+    children: /*#__PURE__*/_jsxs(VStack, {
+      gap: 2,
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        gap: 2,
+        justifyContent: "space-between",
+        paddingX: 3,
+        children: [/*#__PURE__*/_jsxs(HStack, {
+          gap: 1,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Go to first page",
+            name: "doubleChevronRight",
+            onPress: handleGoToFirstPage,
+            style: {
+              transform: [{
+                rotate: '180deg'
+              }]
+            },
+            variant: "secondary"
+          }), /*#__PURE__*/_jsx(IconButton, {
+            active: true,
+            accessibilityLabel: "Go to previous page",
+            name: "arrowLeft",
+            onPress: handleGoToPrevPage,
+            variant: "secondary"
+          })]
+        }), /*#__PURE__*/_jsx(Box, {
+          alignItems: "center",
+          background: "bgSecondary",
+          borderRadius: 500,
+          flexGrow: 1,
+          justifyContent: "center",
+          paddingX: 2,
+          paddingY: 1,
+          children: /*#__PURE__*/_jsx(Text, {
+            color: "fgMuted",
+            font: "label1",
+            children: currentPageInfo
+          })
+        }), /*#__PURE__*/_jsxs(HStack, {
+          gap: 1,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            active: true,
+            accessibilityLabel: "Go to next page",
+            name: "arrowRight",
+            onPress: handleGoToNextPage,
+            variant: "secondary"
+          }), /*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Go to last page",
+            name: "doubleChevronRight",
+            onPress: handleGoToLastPage,
+            variant: "secondary"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Carousel, {
+        ref: carouselRef,
+        hideNavigation: true,
+        hidePagination: true,
+        drag: "none",
+        snapMode: "item",
+        styles: {
+          root: {
+            paddingHorizontal: theme.space[3]
+          },
+          carousel: {
+            gap: theme.space[1]
+          }
+        },
+        title: "Explore Assets",
+        children: Object.values(assets).map(asset => /*#__PURE__*/_jsx(CarouselItem, {
+          accessibilityLabel: asset.name,
+          id: asset.symbol,
+          children: /*#__PURE__*/_jsx(SquareAssetCard, {
+            imageUrl: asset.imageUrl,
+            name: asset.symbol
+          })
+        }, asset.symbol))
+      })]
+    })
+  });
+};
+const AnimatedPaginationExample = () => {
+  const theme = useTheme();
+  const AnimatedDot = /*#__PURE__*/memo(_ref5 => {
+    let {
+      index,
+      isActive,
+      dotSize,
+      activeDotWidth,
+      onPress,
+      theme
+    } = _ref5;
+    const springProps = useSpring({
+      width: isActive ? activeDotWidth : dotSize,
+      backgroundColor: isActive ? theme.color.bgPrimary : theme.color.bgLine,
+      config: {
+        tension: 300,
+        friction: 25
+      }
+    });
+    const baseStyle = useMemo(() => ({
+      height: dotSize,
+      borderRadius: dotSize / 2
+    }), [dotSize]);
+    return /*#__PURE__*/_jsx(Pressable, {
+      accessibilityLabel: "Go to page " + (index + 1),
+      borderRadius: 1000,
+      height: dotSize,
+      onPress: onPress,
+      children: /*#__PURE__*/_jsx(animated.View, {
+        style: [baseStyle, {
+          width: springProps.width,
+          backgroundColor: springProps.backgroundColor
+        }]
+      })
+    });
+  });
+  const AnimatedPagination = /*#__PURE__*/memo(_ref6 => {
+    let {
+      totalPages,
+      activePageIndex,
+      onPressPage,
+      style
+    } = _ref6;
+    const dotSize = theme.space[1];
+    const activeDotWidth = theme.space[3];
+    return /*#__PURE__*/_jsx(HStack, {
+      alignItems: "center",
+      gap: 0.5,
+      justifyContent: "center",
+      paddingY: 0.5,
+      style: style,
+      children: Array.from({
+        length: totalPages
+      }, (_, index) => /*#__PURE__*/_jsx(AnimatedDot, {
+        activeDotWidth: activeDotWidth,
+        dotSize: dotSize,
+        index: index,
+        isActive: index === activePageIndex,
+        onPress: () => onPressPage == null ? void 0 : onPressPage(index),
+        theme: theme
+      }, index))
+    });
+  });
+  return /*#__PURE__*/_jsx(Example, {
+    paddingX: 0,
+    children: /*#__PURE__*/_jsxs(Carousel, {
+      PaginationComponent: AnimatedPagination,
+      drag: "snap",
+      snapMode: "page",
+      styles: {
+        root: {
+          paddingHorizontal: theme.space[3]
+        },
+        carousel: {
+          gap: theme.space[2]
+        }
+      },
+      title: "Animated Pagination",
+      children: [/*#__PURE__*/_jsx(CarouselItem, {
+        id: "slide-1",
+        width: "100%",
+        children: /*#__PURE__*/_jsx(NudgeCard, {
+          action: "Get started",
+          description: "Experience smooth transitions as you navigate through content.",
+          minWidth: 0,
+          onActionPress: () => console.log('Get started pressed'),
+          pictogram: "key",
+          title: "Smooth Animations",
+          width: "100%"
+        })
+      }), /*#__PURE__*/_jsx(CarouselItem, {
+        id: "slide-2",
+        width: "100%",
+        children: /*#__PURE__*/_jsx(NudgeCard, {
+          action: "Learn more",
+          description: "Active pages expand to pills while inactive ones remain as circles.",
+          minWidth: 0,
+          onActionPress: () => console.log('Learn more pressed'),
+          pictogram: "shield",
+          title: "Dynamic Sizing",
+          width: "100%"
+        })
+      }), /*#__PURE__*/_jsx(CarouselItem, {
+        id: "slide-3",
+        width: "100%",
+        children: /*#__PURE__*/_jsx(NudgeCard, {
+          action: "Explore",
+          description: "Beautiful visual feedback that enhances user experience.",
+          minWidth: 0,
+          onActionPress: () => console.log('Explore pressed'),
+          pictogram: "accountsNavigation",
+          title: "Enhanced UX",
+          width: "100%"
+        })
+      })]
+    })
+  });
+};
+export default function CarouselScreen() {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(BasicExamples, {}), /*#__PURE__*/_jsx(CustomComponentsExample, {}), /*#__PURE__*/_jsx(DynamicContentExample, {}), /*#__PURE__*/_jsx(AnimatedExample, {}), /*#__PURE__*/_jsx(ImperativeApiExample, {}), /*#__PURE__*/_jsx(AnimatedPaginationExample, {})]
+  });
+}