@coinbase/cds-mobile 8.43.2 → 8.44.1

package/esm/overlays/__stories__/TrayRedesign.stories.js

@@ -0,0 +1,1070 @@
+const _excluded = ["offset", "borderRadiusValue", "children", "styles"],
+  _excluded2 = ["screens", "initialScreen"],
+  _excluded3 = ["pictogramName", "title", "children"],
+  _excluded4 = ["footer", "footerLabel", "children"];
+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, { useCallback, useMemo, useRef, useState } from 'react';
+import { Image, ScrollView } from 'react-native';
+import { Button } from '../../buttons/Button';
+import { IconButton } from '../../buttons/IconButton';
+import { ListCell } from '../../cells/ListCell';
+import { Menu, SelectOption } from '../../controls';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useSafeBottomPadding } from '../../hooks/useSafeBottomPadding';
+import { useTheme } from '../../hooks/useTheme';
+import { Pictogram } from '../../illustrations';
+import { Box, VStack } from '../../layout';
+import { StickyFooter } from '../../sticky-footer/StickyFooter';
+import { Text } from '../../typography/Text';
+import { Tray } from '../tray/Tray';
+import { options } from './Trays';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const TrayRedesignScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic Tray",
+      children: /*#__PURE__*/_jsx(BasicTray, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Sticky Footer",
+      children: /*#__PURE__*/_jsx(TrayWithStickyFooter, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With ListCells",
+      children: /*#__PURE__*/_jsx(TrayWithListCells, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With ListCells Sticky Footer",
+      children: /*#__PURE__*/_jsx(TrayWithListCellsStickyFooter, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Illustration Tray",
+      children: /*#__PURE__*/_jsx(IllustrationTray, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Illustration with ListCells",
+      children: /*#__PURE__*/_jsx(IllustrationTrayWithListCells, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Illustration with Sticky Footer",
+      children: /*#__PURE__*/_jsx(IllustrationTrayWithStickyFooter, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Illustration with ListCells Sticky Footer",
+      children: /*#__PURE__*/_jsx(IllustrationTrayWithListCellsStickyFooter, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Full Bleed Image Tray",
+      children: /*#__PURE__*/_jsx(FullBleedImageTray, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Full Bleed Image with ListCells",
+      children: /*#__PURE__*/_jsx(FullBleedImageTrayWithListCells, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Full Bleed Image with Sticky Footer",
+      children: /*#__PURE__*/_jsx(FullBleedImageTrayWithStickyFooter, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Full Bleed Image with ListCells Sticky Footer",
+      children: /*#__PURE__*/_jsx(FullBleedImageTrayWithListCellsStickyFooter, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Floating Tray",
+      children: /*#__PURE__*/_jsx(FloatingTrayExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multi-Screen Tray",
+      children: /*#__PURE__*/_jsx(MultiScreenTrayExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Composed Illustration Tray",
+      children: /*#__PURE__*/_jsx(ComposedIllustrationTrayExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Responsive Tray",
+      children: /*#__PURE__*/_jsx(ResponsiveTrayExample, {})
+    })]
+  });
+};
+
+// ============================================================================
+// Standard Tray Examples
+// ============================================================================
+
+const BasicTray = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const trayRef = useRef(null);
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      handleBarVariant: "inside",
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: "Header",
+      children: /*#__PURE__*/_jsx(VStack, {
+        paddingX: 3,
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Curabitur commodo nulla vel dolor vulputate vestibulum. Nulla et nisl molestie, interdum lorem id, viverra."
+        })
+      })
+    })]
+  });
+};
+const TrayWithStickyFooter = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const trayRef = useRef(null);
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      footer: _ref => {
+        let {
+          handleClose
+        } = _ref;
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          background: "bgElevation2",
+          paddingX: 3,
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            children: "Close"
+          })
+        });
+      },
+      handleBarVariant: "inside",
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: "Header",
+      children: /*#__PURE__*/_jsx(VStack, {
+        paddingBottom: 1,
+        paddingX: 3,
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Curabitur commodo nulla vel dolor vulputate vestibulum. Nulla et nisl molestie, interdum lorem id, viverra."
+        })
+      })
+    })]
+  });
+};
+const TrayWithListCells = () => {
+  const safeBottomPadding = useSafeBottomPadding();
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const trayRef = useRef(null);
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  const handleScroll = useCallback(e => {
+    const scrollY = e.nativeEvent.contentOffset.y;
+    setIsScrolled(scrollY > 0);
+  }, []);
+  const scrollContentStyle = useMemo(() => ({
+    paddingBottom: safeBottomPadding
+  }), [safeBottomPadding]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      handleBarVariant: "inside",
+      headerElevation: isScrolled ? 2 : 0,
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: "Header",
+      verticalDrawerPercentageOfView: 0.9,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        contentContainerStyle: scrollContentStyle,
+        onScroll: handleScroll,
+        scrollEventThrottle: 16,
+        children: Array.from({
+          length: 20
+        }, (_, i) => /*#__PURE__*/_jsx(ListCell, {
+          accessory: "arrow",
+          description: "Description",
+          onPress: () => alert('Cell clicked!'),
+          spacingVariant: "condensed",
+          title: "Title"
+        }, i))
+      })
+    })]
+  });
+};
+const TrayWithListCellsStickyFooter = () => {
+  const safeBottomPadding = useSafeBottomPadding();
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const trayRef = useRef(null);
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  const handleScroll = useCallback(e => {
+    const scrollY = e.nativeEvent.contentOffset.y;
+    setIsScrolled(scrollY > 0);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      footer: _ref2 => {
+        let {
+          handleClose
+        } = _ref2;
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          background: "bgElevation2",
+          elevation: isScrolled ? 2 : 0,
+          paddingX: 3,
+          style: {
+            paddingBottom: safeBottomPadding
+          },
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            children: "Close"
+          })
+        });
+      },
+      handleBarVariant: "inside",
+      headerElevation: isScrolled ? 2 : 0,
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: "Header",
+      verticalDrawerPercentageOfView: 0.9,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        onScroll: handleScroll,
+        scrollEventThrottle: 16,
+        children: Array.from({
+          length: 20
+        }, (_, i) => /*#__PURE__*/_jsx(ListCell, {
+          accessory: "arrow",
+          description: "Description",
+          onPress: () => alert('Cell clicked!'),
+          spacingVariant: "condensed",
+          title: "Title"
+        }, i))
+      })
+    })]
+  });
+};
+
+// ============================================================================
+// Illustration Tray Examples
+// ============================================================================
+
+const IllustrationTray = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const [value, setValue] = useState();
+  const trayRef = useRef(null);
+  const handleOptionPress = () => {
+    var _trayRef$current;
+    (_trayRef$current = trayRef.current) == null || _trayRef$current.handleClose();
+  };
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      handleBarVariant: "inside",
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: /*#__PURE__*/_jsxs(VStack, {
+        gap: 1.5,
+        children: [/*#__PURE__*/_jsx(Pictogram, {
+          name: "addWallet"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "title3",
+          children: "Header"
+        })]
+      }),
+      children: /*#__PURE__*/_jsx(Menu, {
+        onChange: setValue,
+        value: value,
+        children: options.map(option => /*#__PURE__*/_jsx(SelectOption, {
+          description: "BTC",
+          onPress: handleOptionPress,
+          title: option,
+          value: option
+        }, option))
+      })
+    })]
+  });
+};
+const IllustrationTrayWithListCells = () => {
+  const safeBottomPadding = useSafeBottomPadding();
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const trayRef = useRef(null);
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  const handleScroll = useCallback(e => {
+    const scrollY = e.nativeEvent.contentOffset.y;
+    setIsScrolled(scrollY > 0);
+  }, []);
+  const scrollContentStyle = useMemo(() => ({
+    paddingBottom: safeBottomPadding
+  }), [safeBottomPadding]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      handleBarVariant: "inside",
+      headerElevation: isScrolled ? 2 : 0,
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: /*#__PURE__*/_jsxs(VStack, {
+        gap: 1.5,
+        children: [/*#__PURE__*/_jsx(Pictogram, {
+          name: "addWallet"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "title3",
+          children: "Header"
+        })]
+      }),
+      verticalDrawerPercentageOfView: 0.9,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        contentContainerStyle: scrollContentStyle,
+        onScroll: handleScroll,
+        scrollEventThrottle: 16,
+        children: Array.from({
+          length: 20
+        }, (_, i) => /*#__PURE__*/_jsx(ListCell, {
+          accessory: "arrow",
+          description: "Description",
+          onPress: () => alert('Cell clicked!'),
+          spacingVariant: "condensed",
+          title: "Title"
+        }, i))
+      })
+    })]
+  });
+};
+const IllustrationTrayWithStickyFooter = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const trayRef = useRef(null);
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      footer: _ref3 => {
+        let {
+          handleClose
+        } = _ref3;
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          background: "bgElevation2",
+          paddingX: 3,
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            children: "Close"
+          })
+        });
+      },
+      handleBarVariant: "inside",
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: /*#__PURE__*/_jsxs(VStack, {
+        gap: 1.5,
+        children: [/*#__PURE__*/_jsx(Pictogram, {
+          name: "addWallet"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "title3",
+          children: "Header"
+        })]
+      }),
+      children: /*#__PURE__*/_jsx(VStack, {
+        paddingBottom: 1,
+        paddingX: 3,
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Curabitur commodo nulla vel dolor vulputate vestibulum. Nulla et nisl molestie, interdum lorem id, viverra."
+        })
+      })
+    })]
+  });
+};
+const IllustrationTrayWithListCellsStickyFooter = () => {
+  const safeBottomPadding = useSafeBottomPadding();
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const trayRef = useRef(null);
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  const handleScroll = useCallback(e => {
+    const scrollY = e.nativeEvent.contentOffset.y;
+    setIsScrolled(scrollY > 0);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      footer: _ref4 => {
+        let {
+          handleClose
+        } = _ref4;
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          background: "bgElevation2",
+          elevation: isScrolled ? 2 : 0,
+          paddingX: 3,
+          style: {
+            paddingBottom: safeBottomPadding
+          },
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            children: "Close"
+          })
+        });
+      },
+      handleBarVariant: "inside",
+      headerElevation: isScrolled ? 2 : 0,
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: /*#__PURE__*/_jsxs(VStack, {
+        gap: 1.5,
+        children: [/*#__PURE__*/_jsx(Pictogram, {
+          name: "addWallet"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "title3",
+          children: "Header"
+        })]
+      }),
+      verticalDrawerPercentageOfView: 0.9,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        onScroll: handleScroll,
+        scrollEventThrottle: 16,
+        children: Array.from({
+          length: 20
+        }, (_, i) => /*#__PURE__*/_jsx(ListCell, {
+          accessory: "arrow",
+          description: "Description",
+          onPress: () => alert('Cell clicked!'),
+          spacingVariant: "condensed",
+          title: "Title"
+        }, i))
+      })
+    })]
+  });
+};
+
+// ============================================================================
+// Full Bleed Image Tray Examples
+// ============================================================================
+
+const FULL_BLEED_IMAGE_URI = 'https://static-assets.coinbase.com/design-system/placeholder/coinbaseHeader.jpg';
+const FullBleedImageTray = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const [value, setValue] = useState();
+  const trayRef = useRef(null);
+  const handleOptionPress = () => {
+    var _trayRef$current2;
+    (_trayRef$current2 = trayRef.current) == null || _trayRef$current2.handleClose();
+  };
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsxs(Tray, {
+      ref: trayRef,
+      handleBarVariant: "inside",
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      styles: {
+        handleBar: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 1
+        },
+        header: {
+          paddingHorizontal: 0,
+          paddingBottom: 0
+        }
+      },
+      title: /*#__PURE__*/_jsx(Box, {
+        background: "bgAlternate",
+        height: 180,
+        marginX: -3,
+        children: /*#__PURE__*/_jsx(Image, {
+          resizeMode: "cover",
+          source: {
+            uri: FULL_BLEED_IMAGE_URI
+          },
+          style: {
+            width: '100%',
+            height: '100%'
+          }
+        })
+      }),
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        paddingBottom: 0.75,
+        paddingTop: 2,
+        paddingX: 3,
+        children: "Header"
+      }), /*#__PURE__*/_jsx(Menu, {
+        onChange: setValue,
+        value: value,
+        children: options.map(option => /*#__PURE__*/_jsx(SelectOption, {
+          description: "BTC",
+          onPress: handleOptionPress,
+          title: option,
+          value: option
+        }, option))
+      })]
+    })]
+  });
+};
+const FullBleedImageTrayWithListCells = () => {
+  const safeBottomPadding = useSafeBottomPadding();
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const trayRef = useRef(null);
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  const scrollContentStyle = useMemo(() => ({
+    paddingBottom: safeBottomPadding
+  }), [safeBottomPadding]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      handleBarVariant: "inside",
+      header: /*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        paddingBottom: 0.75,
+        paddingTop: 2,
+        paddingX: 3,
+        children: "Header"
+      }),
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      styles: {
+        handleBar: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 1
+        },
+        header: {
+          paddingHorizontal: 0,
+          paddingBottom: 0
+        },
+        drawer: scrollContentStyle
+      },
+      title: /*#__PURE__*/_jsx(Box, {
+        background: "bgAlternate",
+        height: 180,
+        marginX: -3,
+        children: /*#__PURE__*/_jsx(Image, {
+          resizeMode: "cover",
+          source: {
+            uri: FULL_BLEED_IMAGE_URI
+          },
+          style: {
+            width: '100%',
+            height: '100%'
+          }
+        })
+      }),
+      verticalDrawerPercentageOfView: 0.9,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        contentContainerStyle: scrollContentStyle,
+        children: Array.from({
+          length: 20
+        }, (_, i) => /*#__PURE__*/_jsx(ListCell, {
+          accessory: "arrow",
+          description: "Description",
+          onPress: () => alert('Cell clicked!'),
+          spacingVariant: "condensed",
+          title: "Title"
+        }, i))
+      })
+    })]
+  });
+};
+const FullBleedImageTrayWithStickyFooter = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const trayRef = useRef(null);
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      footer: _ref5 => {
+        let {
+          handleClose
+        } = _ref5;
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          background: "bgElevation2",
+          paddingX: 3,
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            children: "Close"
+          })
+        });
+      },
+      handleBarVariant: "inside",
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      styles: {
+        handleBar: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 1
+        },
+        header: {
+          paddingHorizontal: 0,
+          paddingBottom: 0
+        }
+      },
+      title: /*#__PURE__*/_jsx(Box, {
+        background: "bgAlternate",
+        height: 180,
+        marginX: -3,
+        children: /*#__PURE__*/_jsx(Image, {
+          resizeMode: "cover",
+          source: {
+            uri: FULL_BLEED_IMAGE_URI
+          },
+          style: {
+            width: '100%',
+            height: '100%'
+          }
+        })
+      }),
+      children: /*#__PURE__*/_jsxs(VStack, {
+        paddingBottom: 1,
+        paddingX: 3,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
+          paddingBottom: 0.75,
+          paddingTop: 2,
+          children: "Header"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Curabitur commodo nulla vel dolor vulputate vestibulum. Nulla et nisl molestie, interdum lorem id, viverra."
+        })]
+      })
+    })]
+  });
+};
+const FullBleedImageTrayWithListCellsStickyFooter = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const trayRef = useRef(null);
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  const handleScroll = useCallback(e => {
+    const scrollY = e.nativeEvent.contentOffset.y;
+    setIsScrolled(scrollY > 0);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      footer: _ref6 => {
+        let {
+          handleClose
+        } = _ref6;
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          background: "bgElevation2",
+          elevation: isScrolled ? 2 : 0,
+          paddingX: 3,
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            children: "Close"
+          })
+        });
+      },
+      handleBarVariant: "inside",
+      header: /*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        paddingBottom: 0.75,
+        paddingTop: 2,
+        paddingX: 3,
+        children: "Header"
+      }),
+      headerElevation: isScrolled ? 2 : 0,
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      styles: {
+        handleBar: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 1
+        },
+        header: {
+          paddingHorizontal: 0,
+          paddingBottom: 0
+        }
+      },
+      title: /*#__PURE__*/_jsx(Box, {
+        background: "bgAlternate",
+        height: 180,
+        marginX: -3,
+        children: /*#__PURE__*/_jsx(Image, {
+          resizeMode: "cover",
+          source: {
+            uri: FULL_BLEED_IMAGE_URI
+          },
+          style: {
+            width: '100%',
+            height: '100%'
+          }
+        })
+      }),
+      verticalDrawerPercentageOfView: 0.9,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        onScroll: handleScroll,
+        scrollEventThrottle: 16,
+        children: Array.from({
+          length: 20
+        }, (_, i) => /*#__PURE__*/_jsx(ListCell, {
+          accessory: "arrow",
+          description: "Description",
+          onPress: () => alert('Cell clicked!'),
+          spacingVariant: "condensed",
+          title: "Title"
+        }, i))
+      })
+    })]
+  });
+};
+
+// ============================================================================
+// Composed Tray Examples
+// ============================================================================
+
+function FloatingTray(_ref7) {
+  let {
+      offset = 2,
+      borderRadiusValue = 600,
+      children,
+      styles
+    } = _ref7,
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded);
+  const safeBottomPadding = useSafeBottomPadding();
+  const theme = useTheme();
+  const offsetPx = theme.space[offset];
+  const borderRadius = theme.borderRadius[borderRadiusValue];
+  const floatingStyles = useMemo(() => ({
+    bottom: offsetPx + safeBottomPadding,
+    left: offsetPx,
+    right: offsetPx,
+    borderRadius,
+    width: 'auto'
+  }), [offsetPx, safeBottomPadding, borderRadius]);
+  const containerStyles = useMemo(() => [floatingStyles, styles == null ? void 0 : styles.container], [floatingStyles, styles == null ? void 0 : styles.container]);
+  const drawerStyles = useMemo(() => [{
+    paddingBottom: 0
+  }, styles == null ? void 0 : styles.drawer], [styles == null ? void 0 : styles.drawer]);
+  return /*#__PURE__*/_jsx(Tray, _extends({}, props, {
+    handleBarVariant: "inside",
+    styles: _extends({}, styles, {
+      container: containerStyles,
+      drawer: drawerStyles
+    }),
+    children: children
+  }));
+}
+const FloatingTrayExample = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), []);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), []);
+  const handleScroll = useCallback(e => {
+    const scrollY = e.nativeEvent.contentOffset.y;
+    setIsScrolled(scrollY > 0);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open Floating Tray"
+    }), isTrayVisible && /*#__PURE__*/_jsx(FloatingTray, {
+      headerElevation: isScrolled ? 2 : 0,
+      onCloseComplete: setIsTrayVisibleOff,
+      title: "Example title",
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        contentContainerStyle: {
+          paddingBottom: 0
+        },
+        onScroll: handleScroll,
+        scrollEventThrottle: 16,
+        children: /*#__PURE__*/_jsx(VStack, {
+          paddingBottom: 2,
+          children: Array.from({
+            length: 20
+          }, (_, i) => /*#__PURE__*/_jsx(ListCell, {
+            accessory: "arrow",
+            description: "Description",
+            onPress: () => alert('Cell clicked!'),
+            spacingVariant: "condensed",
+            title: "Title"
+          }, i))
+        })
+      })
+    })]
+  });
+};
+function MultiScreenTray(_ref8) {
+  let {
+      screens,
+      initialScreen = 0
+    } = _ref8,
+    props = _objectWithoutPropertiesLoose(_ref8, _excluded2);
+  const [currentScreen, setCurrentScreen] = useState(initialScreen);
+  const screen = screens[currentScreen];
+  const handleBack = useCallback(() => setCurrentScreen(0), []);
+  const handleNavigate = useCallback(index => setCurrentScreen(index), []);
+  return /*#__PURE__*/_jsx(Tray, _extends({}, props, {
+    accessibilityLabel: screen.title,
+    handleBarVariant: "inside",
+    title: /*#__PURE__*/_jsxs(VStack, {
+      alignItems: "flex-start",
+      children: [currentScreen > 0 && /*#__PURE__*/_jsx(IconButton, {
+        transparent: true,
+        accessibilityLabel: "Go back",
+        flush: "start",
+        name: "backArrow",
+        onPress: handleBack
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        children: screen.title
+      })]
+    }),
+    children: screen.render({
+      onNavigate: handleNavigate
+    })
+  }));
+}
+const MultiScreenTrayExample = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), []);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), []);
+  const screens = useMemo(() => [{
+    title: 'Settings',
+    render: _ref9 => {
+      let {
+        onNavigate
+      } = _ref9;
+      return /*#__PURE__*/_jsxs(ScrollView, {
+        scrollEventThrottle: 16,
+        children: [/*#__PURE__*/_jsx(ListCell, {
+          accessory: "arrow",
+          description: "Manage your account settings",
+          onPress: () => onNavigate(1),
+          spacingVariant: "condensed",
+          title: "Account"
+        }), /*#__PURE__*/_jsx(ListCell, {
+          accessory: "arrow",
+          description: "Configure notification preferences",
+          onPress: () => onNavigate(2),
+          spacingVariant: "condensed",
+          title: "Notifications"
+        }), /*#__PURE__*/_jsx(ListCell, {
+          accessory: "arrow",
+          description: "Review privacy settings",
+          onPress: () => onNavigate(3),
+          spacingVariant: "condensed",
+          title: "Privacy"
+        })]
+      });
+    }
+  }, {
+    title: 'Account',
+    render: () => /*#__PURE__*/_jsx(VStack, {
+      paddingX: 3,
+      children: /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        paddingBottom: 2,
+        children: "Account settings content goes here."
+      })
+    })
+  }, {
+    title: 'Notifications',
+    render: () => /*#__PURE__*/_jsx(VStack, {
+      paddingX: 3,
+      children: /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        paddingBottom: 2,
+        children: "Notification preferences content goes here."
+      })
+    })
+  }, {
+    title: 'Privacy',
+    render: () => /*#__PURE__*/_jsx(VStack, {
+      paddingX: 3,
+      children: /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        paddingBottom: 2,
+        children: "Privacy settings content goes here."
+      })
+    })
+  }], []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open Multi-Screen Tray"
+    }), isTrayVisible && /*#__PURE__*/_jsx(MultiScreenTray, {
+      onCloseComplete: setIsTrayVisibleOff,
+      screens: screens
+    })]
+  });
+};
+function ComposedIllustrationTray(_ref0) {
+  let {
+      pictogramName,
+      title,
+      children
+    } = _ref0,
+    props = _objectWithoutPropertiesLoose(_ref0, _excluded3);
+  return /*#__PURE__*/_jsx(Tray, _extends({}, props, {
+    accessibilityLabel: title,
+    handleBarVariant: "inside",
+    title: /*#__PURE__*/_jsxs(VStack, {
+      gap: 1.5,
+      children: [/*#__PURE__*/_jsx(Pictogram, {
+        name: pictogramName
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "title3",
+        children: title
+      })]
+    }),
+    children: children
+  }));
+}
+const ComposedIllustrationTrayExample = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), []);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open Illustration Tray"
+    }), isTrayVisible && /*#__PURE__*/_jsx(ComposedIllustrationTray, {
+      onCloseComplete: setIsTrayVisibleOff,
+      pictogramName: "addWallet",
+      title: "Section header",
+      children: /*#__PURE__*/_jsx(VStack, {
+        paddingX: 3,
+        children: /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "body",
+          paddingBottom: 2,
+          children: "Curabitur commodo nulla vel dolor vulputate vestibulum. Nulla et nisl molestie, interdum lorem id, viverra."
+        })
+      })
+    })]
+  });
+};
+function ResponsiveTray(_ref1) {
+  let {
+      footer,
+      footerLabel,
+      children
+    } = _ref1,
+    props = _objectWithoutPropertiesLoose(_ref1, _excluded4);
+  const resolvedFooter = footer != null ? footer : footerLabel ? _ref10 => {
+    let {
+      handleClose
+    } = _ref10;
+    return /*#__PURE__*/_jsx(StickyFooter, {
+      background: "bgElevation2",
+      paddingX: 3,
+      children: /*#__PURE__*/_jsx(Button, {
+        block: true,
+        onPress: handleClose,
+        children: footerLabel
+      })
+    });
+  } : undefined;
+  return /*#__PURE__*/_jsx(Tray, _extends({}, props, {
+    footer: resolvedFooter,
+    handleBarVariant: "inside",
+    children: children
+  }));
+}
+const ResponsiveTrayExample = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), []);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open Responsive Tray"
+    }), isTrayVisible && /*#__PURE__*/_jsx(ResponsiveTray, {
+      footerLabel: "Close",
+      onCloseComplete: setIsTrayVisibleOff,
+      title: "Example title",
+      children: /*#__PURE__*/_jsx(VStack, {
+        paddingX: 3,
+        children: /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          paddingBottom: 2,
+          children: "Curabitur commodo nulla vel dolor vulputate vestibulum. Nulla et nisl molestie, interdum lorem id, viverra."
+        })
+      })
+    })]
+  });
+};
+export default TrayRedesignScreen;