@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/cards/__stories__/UpsellCard.stories.js

@@ -0,0 +1,143 @@
+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 from 'react';
+import { Image, StyleSheet, useWindowDimensions } from 'react-native';
+import { coinbaseOneLogo } from '@coinbase/cds-common/internal/data/assets';
+import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { VStack } from '../../layout';
+import { Carousel } from '../../media';
+import { Text } from '../../typography/Text';
+import { UpsellCard } from '../UpsellCard';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = StyleSheet.create({
+  image: {
+    width: 130,
+    height: 174,
+    position: 'relative',
+    left: 10
+  }
+});
+const exampleProps = {
+  title: "It's Onchain Summer!",
+  description: 'Stand with crypto and mint your NFT. ',
+  media: /*#__PURE__*/_jsx(Image, {
+    accessibilityIgnoresInvertColors: true,
+    alt: "Send a crypto gift illustration",
+    source: {
+      uri: coinbaseOneLogo
+    },
+    style: styles.image
+  }),
+  action: 'Join the movement',
+  onActionPress: NoopFn,
+  onDismissPress: NoopFn
+};
+const compactProps = {
+  title: "It's Onchain Summer!",
+  description: 'Stand with crypto and mint your NFT. ',
+  media: /*#__PURE__*/_jsx(Image, {
+    accessibilityIgnoresInvertColors: true,
+    alt: "Send a crypto gift illustration",
+    source: {
+      uri: coinbaseOneLogo
+    },
+    style: styles.image
+  }),
+  onPress: NoopFn
+};
+const UpsellCardScreen = () => {
+  const theme = useTheme();
+  const customTextNodeColor = "rgb(" + theme.spectrum.gray0 + ")";
+  const customTextNodeBackgroundColor = "rgb(" + theme.spectrum.blue80 + ")";
+  const customBackgroundColor = "rgb(" + theme.spectrum.purple70 + ")";
+  const defaultBackground = "rgb(" + theme.spectrum.teal20 + ")";
+  const windowWidth = useWindowDimensions().width;
+  const carouselCardWidth = windowWidth - 48;
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Upsell Card",
+      children: /*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
+        dangerouslySetBackground: defaultBackground
+      }))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Upsell Card Compact",
+      children: /*#__PURE__*/_jsx(UpsellCard, _extends({}, compactProps, {
+        dangerouslySetBackground: defaultBackground
+      }))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Long action button text",
+      children: /*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
+        action: "This is a very long action button text that will get truncated",
+        dangerouslySetBackground: defaultBackground,
+        description: "This is a very long description text that will get truncated",
+        title: "This is a very long title text that will get truncated"
+      }))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Text Nodes",
+      children: /*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
+        action: /*#__PURE__*/_jsx(Button, {
+          compact: true,
+          flush: "start",
+          numberOfLines: 1,
+          onPress: NoopFn,
+          variant: "secondary",
+          children: "Sign up"
+        }),
+        dangerouslySetBackground: customTextNodeBackgroundColor,
+        description: /*#__PURE__*/_jsx(Text, {
+          dangerouslySetColor: customTextNodeColor,
+          font: "label2",
+          children: "Start your free 30 day trial of Coinbase One"
+        }),
+        title: /*#__PURE__*/_jsx(Text, {
+          dangerouslySetColor: customTextNodeColor,
+          font: "headline",
+          children: "Coinbase One"
+        })
+      }))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Background color",
+      children: /*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
+        dangerouslySetBackground: customBackgroundColor,
+        description: /*#__PURE__*/_jsx(Text, {
+          dangerouslySetColor: customTextNodeColor,
+          font: "label2",
+          children: "Start your free 30 day trial of Coinbase One"
+        }),
+        title: /*#__PURE__*/_jsx(Text, {
+          dangerouslySetColor: customTextNodeColor,
+          font: "headline",
+          children: "Coinbase One"
+        })
+      }))
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Width",
+      children: /*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
+        dangerouslySetBackground: defaultBackground,
+        width: "100%"
+      }))
+    }), /*#__PURE__*/_jsxs(VStack, {
+      gap: 2,
+      padding: 3,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        children: "Carousel"
+      }), /*#__PURE__*/_jsx(Carousel, {
+        gap: 2,
+        items: [/*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
+          dangerouslySetBackground: defaultBackground,
+          width: carouselCardWidth
+        }), "carouselItem1"), /*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
+          dangerouslySetBackground: defaultBackground,
+          width: carouselCardWidth
+        }), "carouselItem2"), /*#__PURE__*/_jsx(UpsellCard, _extends({}, exampleProps, {
+          dangerouslySetBackground: defaultBackground,
+          width: carouselCardWidth
+        }), "carouselItem3")]
+      })]
+    })]
+  });
+};
+export default UpsellCardScreen;

package/esm/cards/index.js

@@ -0,0 +1,12 @@
+export * from './Card';
+export * from './CardBody';
+export * from './CardFooter';
+export * from './CardGroup';
+export * from './CardHeader';
+export * from './CardMedia';
+// Card variants
+export * from './AnnouncementCard';
+export * from './FeatureEntryCard';
+export * from './FeedCard';
+// Phoenix cards
+export * from './ContentCard';

package/esm/carousel/Carousel.js

@@ -0,0 +1,391 @@
+const _excluded = ["children", "title", "hideNavigation", "hidePagination", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "goToPageAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd"];
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+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, { forwardRef, memo, useCallback, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { animated, useSpring } from '@react-spring/native';
+import { useLayout } from '../hooks/useLayout';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { Text } from '../typography/Text';
+import { DefaultCarouselNavigation } from './DefaultCarouselNavigation';
+import { DefaultCarouselPagination } from './DefaultCarouselPagination';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CarouselContext = /*#__PURE__*/React.createContext(undefined);
+export const useCarouselContext = () => {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error('useCarouselContext must be used within a Carousel component');
+  }
+  return context;
+};
+/**
+ * Calculates the locations of each item in the carousel, offset from the first item.
+ * @param itemRects - The items to get the offsets for.
+ * @returns The item offsets.
+ */
+const getItemOffsets = itemRects => {
+  const sortedItems = Object.values(itemRects).sort((a, b) => a.x - b.x);
+  const initialItemOffset = sortedItems[0].x;
+  return sortedItems.map(item => _extends({}, item, {
+    x: item.x - initialItemOffset
+  }));
+};
+
+/**
+ * Calculates the nearest page index from a given scroll offset.
+ * @param scrollOffset - The scroll offset.
+ * @param pageOffsets - The page offsets.
+ * @returns The nearest page index.
+ */
+const getNearestPageIndexFromOffset = (scrollOffset, pageOffsets) => {
+  let closestPageIndex = 0;
+  let closestDistance = Infinity;
+  pageOffsets.forEach((pageOffset, index) => {
+    const distance = Math.abs(scrollOffset - pageOffset);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestPageIndex = index;
+    }
+  });
+  return closestPageIndex;
+};
+
+/**
+ * Calculates the offsets for a given set of items grouped by item.
+ * @param items - The items to get the page offsets for.
+ * @param containerWidth - The width of the container.
+ * @param maxScrollOffset - The maximum scroll offset.
+ * @returns The page offsets and the total number of pages.
+ */
+const getSnapItemPageOffsets = (items, containerWidth, maxScrollOffset) => {
+  let lastPageStartIndex = items.length - 1;
+  const lastItem = items[lastPageStartIndex];
+  const lastItemsEndPosition = lastItem.x + lastItem.width;
+
+  // Find the last item that can start a page and still show all remaining items
+  let i = lastPageStartIndex;
+  let viewportEndIfStartingAtThisItem = lastItem.x + containerWidth;
+  while (i >= 0 && viewportEndIfStartingAtThisItem >= lastItemsEndPosition) {
+    lastPageStartIndex = i;
+    i--;
+    if (i >= 0) {
+      viewportEndIfStartingAtThisItem = items[i].x + containerWidth;
+    }
+  }
+
+  // Create pages - each item before lastPageStartIndex gets its own page
+  const offsets = [];
+  for (let i = 0; i < lastPageStartIndex; i++) {
+    const item = items[i];
+    const offset = Math.min(item.x, maxScrollOffset);
+    offsets.push(offset);
+  }
+
+  // Add the final page that shows all remaining items
+  const lastPageItem = items[lastPageStartIndex];
+  const lastPageOffset = Math.min(lastPageItem.x, maxScrollOffset);
+  offsets.push(lastPageOffset);
+  return {
+    totalPages: offsets.length,
+    pageOffsets: offsets
+  };
+};
+
+/**
+ * Calculates the offsets for a given set of items grouped by page.
+ * @param items - The items to get the page offsets for.
+ * @param containerWidth - The width of the container.
+ * @param maxScrollOffset - The maximum scroll offset.
+ * @returns The page offsets and the total number of pages.
+ */
+const getSnapPageOffsets = (items, containerWidth, maxScrollOffset) => {
+  // Find natural page breaks based on what fits in viewport
+  const offsets = [0];
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+
+    // Calculate the current viewport boundaries based on the last page offset
+    const currentViewportStart = offsets[offsets.length - 1];
+    const currentViewportEnd = currentViewportStart + containerWidth;
+
+    // If this item extends beyond current viewport, we need a new page
+    if (item.x + item.width > currentViewportEnd && item.x !== currentViewportStart) {
+      /**
+       * Clamp it to the max scroll offset in cases where the start of the item
+       * is greater than the max we would need to scroll to show all items.
+       */
+      const clampedOffset = Math.min(item.x, maxScrollOffset);
+      offsets.push(clampedOffset);
+    }
+  }
+  return {
+    totalPages: offsets.length,
+    pageOffsets: offsets
+  };
+};
+
+/**
+ * Clamps an offset value with elastic resistance.
+ * @param offset - The offset to clamp.
+ * @param maxScrollOffset - The maximum offset.
+ * @param elasticAmount - The amount of elastic resistance to apply (0 - 1), defaults to 0.5.
+ * @returns The clamped offset.
+ */
+const clampWithElasticResistance = function (offset, maxScrollOffset, elasticAmount) {
+  if (elasticAmount === void 0) {
+    elasticAmount = 0.5;
+  }
+  if (offset < 0) {
+    return offset * elasticAmount;
+  } else if (offset > maxScrollOffset) {
+    const overScroll = offset - maxScrollOffset;
+    return maxScrollOffset + overScroll * elasticAmount;
+  }
+  return offset;
+};
+
+/**
+ * Calculates which items are visible in the carousel based on scroll offset and viewport.
+ * @param itemRects - The items to get the visibility for.
+ * @param containerWidth - The width of the container viewport.
+ * @param scrollOffset - The current scroll offset (positive value).
+ * @returns Set of visible item IDs.
+ */
+const getVisibleItems = (itemRects, containerWidth, scrollOffset) => {
+  const visibleItems = new Set();
+  const viewportLeft = scrollOffset;
+  const viewportRight = scrollOffset + containerWidth;
+  Object.entries(itemRects).forEach(_ref => {
+    let [itemId, rect] = _ref;
+    const itemLeft = rect.x;
+    const itemRight = rect.x + rect.width;
+    const isVisible = itemLeft < viewportRight && itemRight > viewportLeft;
+    if (isVisible) {
+      visibleItems.add(itemId);
+    }
+  });
+  return visibleItems;
+};
+const animationConfig = {
+  tension: 200,
+  friction: 25
+};
+export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      children,
+      title,
+      hideNavigation,
+      hidePagination,
+      drag = 'snap',
+      snapMode = 'page',
+      NavigationComponent = DefaultCarouselNavigation,
+      PaginationComponent = DefaultCarouselPagination,
+      style,
+      styles,
+      nextPageAccessibilityLabel,
+      previousPageAccessibilityLabel,
+      goToPageAccessibilityLabel,
+      onChangePage,
+      onDragStart,
+      onDragEnd
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  const carouselScrollX = useRef(0);
+  const animationApi = useSpring({
+    x: carouselScrollX.current,
+    config: animationConfig
+  });
+  const [activePageIndex, setActivePageIndex] = useState(0);
+  const [containerSize, onLayout] = useLayout();
+  const [carouselItemRects, setCarouselItemRects] = useState({});
+  const [visibleCarouselItems, setVisibleCarouselItems] = useState(new Set());
+  const rootRef = useRef(null);
+  const isDragEnabled = drag !== 'none';
+  const updateActivePageIndex = useCallback(newPageIndexOrUpdater => {
+    setActivePageIndex(prevIndex => {
+      const newPageIndex = typeof newPageIndexOrUpdater === 'function' ? newPageIndexOrUpdater(prevIndex) : newPageIndexOrUpdater;
+      if (prevIndex !== newPageIndex && onChangePage) {
+        onChangePage(newPageIndex);
+      }
+      return newPageIndex;
+    });
+  }, [onChangePage]);
+  const contentWidth = useMemo(() => {
+    if (Object.keys(carouselItemRects).length === 0) return 0;
+    const items = getItemOffsets(carouselItemRects);
+    const lastItem = items[items.length - 1];
+    return lastItem.x + lastItem.width;
+  }, [carouselItemRects]);
+  const updateVisibleCarouselItems = useCallback(scrollOffset => {
+    if (containerSize.width === 0) {
+      setVisibleCarouselItems(new Set());
+      return;
+    }
+    setVisibleCarouselItems(getVisibleItems(carouselItemRects, containerSize.width, scrollOffset));
+  }, [carouselItemRects, containerSize.width]);
+  const maxScrollOffset = Math.max(0, contentWidth - containerSize.width);
+  const hasCalculatedDimensions = contentWidth > 0 && containerSize.width > 0;
+
+  // Calculate pages and their offsets based on snapMode
+  const {
+    totalPages,
+    pageOffsets
+  } = useMemo(() => {
+    if (!hasCalculatedDimensions || Object.keys(carouselItemRects).length === 0) {
+      return {
+        totalPages: 0,
+        pageOffsets: []
+      };
+    }
+    let pageOffsets;
+    if (snapMode === 'item') {
+      pageOffsets = getSnapItemPageOffsets(getItemOffsets(carouselItemRects), containerSize.width, maxScrollOffset);
+    } else {
+      pageOffsets = getSnapPageOffsets(getItemOffsets(carouselItemRects), containerSize.width, maxScrollOffset);
+    }
+    updateActivePageIndex(pageIndex => Math.min(pageIndex, pageOffsets.totalPages - 1));
+    return pageOffsets;
+  }, [hasCalculatedDimensions, carouselItemRects, snapMode, containerSize.width, maxScrollOffset, updateActivePageIndex]);
+  const goToPage = useCallback(page => {
+    const newPage = Math.max(0, Math.min(totalPages - 1, page));
+    updateActivePageIndex(newPage);
+    const targetOffset = pageOffsets[newPage];
+    carouselScrollX.current = targetOffset;
+    updateVisibleCarouselItems(targetOffset);
+    animationApi.x.start({
+      to: targetOffset,
+      config: animationConfig
+    });
+  }, [totalPages, pageOffsets, updateVisibleCarouselItems, animationApi.x, updateActivePageIndex]);
+  useImperativeHandle(ref, () => ({
+    activePageIndex,
+    totalPages,
+    goToPage
+  }), [activePageIndex, totalPages, goToPage]);
+  const handleDragStart = useCallback(() => {
+    onDragStart == null || onDragStart();
+  }, [onDragStart]);
+  const handleDragEnd = useCallback(() => {
+    onDragEnd == null || onDragEnd();
+  }, [onDragEnd]);
+  const handleDragTransition = useCallback(targetOffsetScroll => {
+    if (drag === 'none') return targetOffsetScroll;
+    const closestPageIndex = getNearestPageIndexFromOffset(targetOffsetScroll, pageOffsets);
+    updateActivePageIndex(closestPageIndex);
+    if (drag === 'snap') {
+      const snapOffset = pageOffsets[closestPageIndex];
+      updateVisibleCarouselItems(snapOffset);
+      return snapOffset;
+    }
+    updateVisibleCarouselItems(targetOffsetScroll);
+    return targetOffsetScroll;
+  }, [drag, pageOffsets, updateVisibleCarouselItems, updateActivePageIndex]);
+  const panGesture = useMemo(() => Gesture.Pan().onStart(() => {
+    if (!isDragEnabled) return;
+    handleDragStart();
+  }).onUpdate(_ref3 => {
+    let {
+      translationX
+    } = _ref3;
+    if (!isDragEnabled) return;
+    const newOffset = clampWithElasticResistance(carouselScrollX.current - translationX, maxScrollOffset);
+    animationApi.x.set(newOffset);
+  }).onEnd(_ref4 => {
+    let {
+      translationX,
+      velocityX
+    } = _ref4;
+    if (!isDragEnabled) return;
+    let projectedOffset = clampWithElasticResistance(carouselScrollX.current - translationX, maxScrollOffset);
+    const power = drag === 'free' ? 0.25 : 0.125;
+    const momentumDistance = velocityX * power;
+    projectedOffset = clampWithElasticResistance(projectedOffset - momentumDistance, maxScrollOffset, 0);
+    const finalOffset = handleDragTransition(projectedOffset);
+    carouselScrollX.current = finalOffset;
+    animationApi.x.start({
+      to: finalOffset,
+      config: _extends({}, animationConfig)
+    });
+    handleDragEnd();
+  }).runOnJS(true), [isDragEnabled, maxScrollOffset, animationApi, drag, handleDragTransition, handleDragStart, handleDragEnd]);
+  const containerStyle = useMemo(() => [{
+    flex: 1,
+    overflow: 'hidden'
+  }, style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
+  const scrollViewStyle = useMemo(() => [{
+    flex: 1
+  }, styles == null ? void 0 : styles.carouselContainer], [styles == null ? void 0 : styles.carouselContainer]);
+  const animatedStyle = useMemo(() => _extends({
+    flexDirection: 'row'
+  }, styles == null ? void 0 : styles.carousel), [styles == null ? void 0 : styles.carousel]);
+  const animatedTransform = useMemo(() => ({
+    transform: [{
+      translateX: animationApi.x.to(value => -value)
+    }]
+  }), [animationApi]);
+  const registerItem = useCallback((id, rect) => {
+    setCarouselItemRects(prev => _extends({}, prev, {
+      [id]: rect
+    }));
+    updateVisibleCarouselItems(carouselScrollX.current);
+  }, [updateVisibleCarouselItems]);
+  const unregisterItem = useCallback(id => {
+    setCarouselItemRects(prev => {
+      const newRects = _extends({}, prev);
+      delete newRects[id];
+      return newRects;
+    });
+  }, []);
+  const carouselContextValue = useMemo(() => ({
+    registerItem,
+    unregisterItem,
+    visibleCarouselItems
+  }), [registerItem, unregisterItem, visibleCarouselItems]);
+  return /*#__PURE__*/_jsx(CarouselContext.Provider, {
+    value: carouselContextValue,
+    children: /*#__PURE__*/_jsxs(VStack, _extends({
+      ref: rootRef,
+      "aria-live": "polite",
+      "aria-roledescription": "carousel",
+      gap: 2,
+      role: "group",
+      style: containerStyle
+    }, props, {
+      children: [(title || !hideNavigation) && /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        justifyContent: title ? 'space-between' : 'flex-end',
+        children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+          font: "title3",
+          style: styles == null ? void 0 : styles.title,
+          children: title
+        }) : title, !hideNavigation && /*#__PURE__*/_jsx(NavigationComponent, {
+          disableGoNext: activePageIndex >= totalPages - 1,
+          disableGoPrevious: activePageIndex <= 0,
+          nextPageAccessibilityLabel: nextPageAccessibilityLabel,
+          onGoNext: () => goToPage(activePageIndex + 1),
+          onGoPrevious: () => goToPage(activePageIndex - 1),
+          previousPageAccessibilityLabel: previousPageAccessibilityLabel,
+          style: styles == null ? void 0 : styles.navigation
+        })]
+      }), /*#__PURE__*/_jsx(GestureDetector, {
+        gesture: panGesture,
+        children: /*#__PURE__*/_jsx(View, {
+          onLayout: onLayout,
+          style: scrollViewStyle,
+          children: /*#__PURE__*/_jsx(animated.View, {
+            style: [animatedStyle, animatedTransform],
+            children: children
+          })
+        })
+      }), !hidePagination && /*#__PURE__*/_jsx(PaginationComponent, {
+        activePageIndex: activePageIndex,
+        onPressPage: goToPage,
+        paginationAccessibilityLabel: goToPageAccessibilityLabel,
+        style: styles == null ? void 0 : styles.pagination,
+        totalPages: totalPages
+      })]
+    }))
+  });
+}));

package/esm/carousel/CarouselItem.js

@@ -0,0 +1,58 @@
+const _excluded = ["children", "id", "style"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useCallback, useEffect } from 'react';
+import { useLayout } from '../hooks/useLayout';
+import { Box } from '../layout/Box';
+import { useCarouselContext } from './Carousel';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CarouselItem = /*#__PURE__*/memo(_ref => {
+  let {
+      children,
+      id,
+      style
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    registerItem,
+    unregisterItem,
+    visibleCarouselItems
+  } = useCarouselContext();
+  const [, onLayoutMeasure] = useLayout();
+  const isVisible = visibleCarouselItems.has(id);
+  const handleLayout = useCallback(event => {
+    onLayoutMeasure(event);
+    const {
+      x,
+      y,
+      width,
+      height
+    } = event.nativeEvent.layout;
+    registerItem(id, {
+      x,
+      y,
+      width,
+      height
+    });
+  }, [id, onLayoutMeasure, registerItem]);
+  useEffect(() => {
+    return () => {
+      unregisterItem(id);
+    };
+  }, [id, unregisterItem]);
+  return /*#__PURE__*/_jsx(Box, _extends({
+    "aria-hidden": !isVisible,
+    "aria-roledescription": "carousel item",
+    maxWidth: "100%",
+    onLayout: handleLayout,
+    role: "group",
+    style: [{
+      flexShrink: 0
+    }, style],
+    testID: "carousel-item-" + id
+  }, props, {
+    children: typeof children === 'function' ? children({
+      isVisible
+    }) : children
+  }));
+});

package/esm/carousel/DefaultCarouselNavigation.js

@@ -0,0 +1,52 @@
+import React, { memo, useMemo } from 'react';
+import { IconButton } from '../buttons/IconButton';
+import { useTheme } from '../hooks/useTheme';
+import { HStack } from '../layout/HStack';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarouselNavigation(_ref) {
+  var _testIDMap$previousBu, _testIDMap$nextButton;
+  let {
+    onGoPrevious,
+    onGoNext,
+    disableGoPrevious,
+    disableGoNext,
+    previousPageAccessibilityLabel = 'Previous page',
+    nextPageAccessibilityLabel = 'Next page',
+    variant = 'secondary',
+    compact,
+    previousIcon = 'caretLeft',
+    nextIcon = 'caretRight',
+    style,
+    styles,
+    testIDMap
+  } = _ref;
+  const theme = useTheme();
+
+  // Using paddingVertical here instead of HStack prop so it can be overridden by custom styles
+  const rootStyles = useMemo(() => [{
+    paddingVertical: theme.space[0.5]
+  }, style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root, theme.space]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    gap: 1,
+    style: rootStyles,
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: previousPageAccessibilityLabel,
+      compact: compact,
+      disabled: disableGoPrevious,
+      name: previousIcon,
+      onPress: onGoPrevious,
+      style: styles == null ? void 0 : styles.previousButton,
+      testID: (_testIDMap$previousBu = testIDMap == null ? void 0 : testIDMap.previousButton) != null ? _testIDMap$previousBu : 'carousel-previous-button',
+      variant: variant
+    }), /*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: nextPageAccessibilityLabel,
+      compact: compact,
+      disabled: disableGoNext,
+      name: nextIcon,
+      onPress: onGoNext,
+      style: styles == null ? void 0 : styles.nextButton,
+      testID: (_testIDMap$nextButton = testIDMap == null ? void 0 : testIDMap.nextButton) != null ? _testIDMap$nextButton : 'carousel-next-button',
+      variant: variant
+    })]
+  });
+});