@fountain-ui/lab 1.9.2 → 1.12.0

package/build/module/Carousel/CarouselWeb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselWeb.tsx"],"names":["React","Slick","styled","mapIndexed","defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultInfinite","baseSettings","arrows","dots","draggable","lazyLoad","pauseOnFocus","pauseOnHover","rows","swipe","slidesPerRow","vertical","noop","StyledContainer","div","props","display","position","userSelect","overflow","margin","padding","outline","cursor","transform","top","left","content","clear","float","height","minHeight","inactiveSlideScale","transition","opacity","inactiveSlideOpacity","Carousel","autoplay","autoplayInterval","centerSlidePadding","data","index","infinite","onChange","renderItem","slidesToScroll","slidesToShow","slickRef","useRef","useEffect","current","slickGoTo","fixOnClickNotWorkingAfterMobileSwipe","innerSlider","clickHandler","handleAfterChange","newIndex","handleBeforeChange","undefined","item","child","cloneElement","key"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Slick, { Settings } from 'react-slick';\nimport styled from '@emotion/styled';\nimport { mapIndexed } from '@fountain-ui/utils';\nimport type CarouselProps from './CarouselProps';\nimport {\n    defaultAutoplay,\n    defaultAutoplayInterval,\n    defaultInactiveSlideOpacity,\n    defaultInactiveSlideScale,\n    defaultInfinite,\n} from './utils';\n\nconst baseSettings: Settings = {\n    arrows: false,\n    dots: false,\n    draggable: true,\n    lazyLoad: 'ondemand',\n    pauseOnFocus: true,\n    pauseOnHover: true,\n    rows: 1,\n    swipe: true,\n    slidesPerRow: 1,\n    vertical: false,\n};\n\nconst noop = () => void 0;\n\nconst StyledContainer: any = styled.div((props: any) => ({\n    ['& .slick-slider']: {\n        display: 'block',\n        position: 'relative',\n        userSelect: 'none',\n    },\n    ['& .slick-list']: {\n        display: 'block',\n        position: 'relative',\n        overflow: 'hidden',\n        margin: 0,\n        padding: 0,\n        ['&:focus']: {\n            outline: 'none',\n        },\n        ['&.dragging']: {\n            cursor: 'pointer',\n        },\n    },\n    ['& .slick-slider .slick-track, &.slick-slider .slick-list']: {\n        transform: 'translate3d(0, 0, 0)',\n    },\n    ['& .slick-track']: {\n        display: 'block',\n        position: 'relative',\n        top: 0,\n        left: 0,\n        ['&:before, &:after']: {\n            display: 'table',\n            content: '\\'\\'',\n        },\n        ['&:after']: {\n            clear: 'both',\n        },\n    },\n    ['& .slick-slide']: {\n        display: 'none',\n        float: 'left',\n        height: '100%',\n        minHeight: 1,\n        ['& > div']: {\n            display: 'flex',\n            transform: `scale(${props.inactiveSlideScale})`,\n            transition: 'transform .5s',\n            opacity: props.inactiveSlideOpacity,\n        },\n    },\n    ['& .slick-current > div']: {\n        transform: 'none',\n        opacity: 1,\n    },\n    ['& .slick-initialized .slick-slide']: {\n        display: 'block',\n    },\n}));\n\nexport default function Carousel<ItemT>(props: CarouselProps<ItemT>) {\n    const {\n        autoplay = defaultAutoplay,\n        autoplayInterval = defaultAutoplayInterval,\n        centerSlidePadding,\n        data,\n        inactiveSlideOpacity = defaultInactiveSlideOpacity,\n        inactiveSlideScale = defaultInactiveSlideScale,\n        index,\n        infinite = defaultInfinite,\n        onChange,\n        renderItem,\n        slidesToScroll = 1,\n        slidesToShow = 1,\n    } = props;\n\n    const slickRef = React.useRef<Slick | null>(null);\n\n    React.useEffect(() => {\n        if (slickRef.current) {\n            slickRef.current.slickGoTo(index, false);\n        }\n    }, [index]);\n\n    const fixOnClickNotWorkingAfterMobileSwipe = () => {\n        // @ts-ignore\n        if (slickRef.current && slickRef.current.innerSlider) {\n            // @ts-ignore\n            slickRef.current.innerSlider.clickHandler = noop;\n        }\n    };\n\n    const handleAfterChange = (newIndex: number) => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    };\n\n    const handleBeforeChange = () => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n    };\n\n    return (\n        <StyledContainer\n            inactiveSlideOpacity={inactiveSlideOpacity}\n            inactiveSlideScale={inactiveSlideScale}\n        >\n            <Slick\n                {...baseSettings}\n                afterChange={handleAfterChange}\n                autoplay={autoplay}\n                autoplaySpeed={autoplayInterval}\n                beforeChange={handleBeforeChange}\n                centerMode={centerSlidePadding !== undefined}\n                centerPadding={centerSlidePadding !== undefined ? `${centerSlidePadding}px` : undefined}\n                infinite={infinite}\n                initialSlide={index}\n                ref={slickRef}\n                slidesToScroll={centerSlidePadding !== undefined ? 1 : slidesToScroll}\n                slidesToShow={centerSlidePadding !== undefined ? 1 : slidesToShow}\n            >\n                {mapIndexed((item, index) => {\n                    const child = renderItem({ item, index });\n\n                    if (child) {\n                        return React.cloneElement(child, { key: index });\n                    }\n                    return child;\n                }, data)}\n            </Slick>\n        </StyledContainer>\n    );\n};\n"]}
+{"version":3,"sources":["CarouselWeb.tsx"],"names":["React","View","Slick","styled","ChevronLeft","ChevronRight","mapIndexed","defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultActiveSlideScale","defaultInfinite","baseSettings","dots","draggable","lazyLoad","pauseOnFocus","pauseOnHover","rows","swipe","slidesPerRow","vertical","noop","StyledContainer","div","props","display","opacity","transform","inactiveSlideScale","transition","activeSlideScale","arrowsStyle","ArrowContainer","children","height","justifyContent","alignItems","backgroundColor","borderRadius","Carousel","autoplay","autoplayInterval","centerMode","centerSlidePadding","data","inactiveSlideOpacity","index","infinite","onChange","renderItem","slidesToScroll","slidesToShow","arrows","slickRef","useRef","useEffect","current","slickGoTo","fixOnClickNotWorkingAfterMobileSwipe","innerSlider","clickHandler","handleAfterChange","newIndex","handleBeforeChange","item","child","cloneElement","key"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport Slick, { Settings } from 'react-slick';\nimport styled from '@emotion/styled';\nimport { ChevronLeft, ChevronRight } from '@fountain-ui/icons';\nimport { mapIndexed } from '@fountain-ui/utils';\nimport type CarouselProps from './CarouselProps';\nimport {\n    defaultAutoplay,\n    defaultAutoplayInterval,\n    defaultInactiveSlideOpacity,\n    defaultInactiveSlideScale,\n    defaultActiveSlideScale,\n    defaultInfinite,\n} from './utils';\n\nconst baseSettings: Settings = {\n    dots: false,\n    draggable: true,\n    lazyLoad: 'ondemand',\n    pauseOnFocus: true,\n    pauseOnHover: true,\n    rows: 1,\n    swipe: true,\n    slidesPerRow: 1,\n    vertical: false,\n};\n\nconst noop = () => void 0;\n\nconst StyledContainer: any = styled.div((props: any) => ({\n    ['& .slick-track']: {\n        display: 'flex',\n    },\n    ['& .slick-slide > div']: {\n        display: 'flex',\n        opacity: 0.2,\n        transform: `scale(${props.inactiveSlideScale})`,\n        transition: 'transform .5s',\n    },\n    [`& .slick-active.slick-current > div`]: {\n        transform: `scale(${props.activeSlideScale})`,\n        opacity: 1,\n    },\n    ...props.arrowsStyle,\n}));\n\ninterface ArrowContainerProps {\n    children: React.ReactElement;\n}\n\nconst ArrowContainer = ({ children }: ArrowContainerProps) => (\n    <View\n        style={{\n            height: '100%',\n            justifyContent: 'center',\n            alignItems: 'center',\n            backgroundColor: 'white',\n            borderRadius: 16,\n        }}\n    >\n        {children}\n    </View>\n);\n\nexport default function Carousel<ItemT>(props: CarouselProps<ItemT>) {\n    const {\n        activeSlideScale = defaultActiveSlideScale,\n        autoplay = defaultAutoplay,\n        autoplayInterval = defaultAutoplayInterval,\n        centerMode = true,\n        centerSlidePadding = 0,\n        data,\n        inactiveSlideOpacity = defaultInactiveSlideOpacity,\n        inactiveSlideScale = defaultInactiveSlideScale,\n        index,\n        infinite = defaultInfinite,\n        onChange,\n        renderItem,\n        slidesToScroll = 1,\n        slidesToShow = 1,\n        arrows = false,\n        arrowsStyle = {},\n    } = props;\n\n    const slickRef = React.useRef<Slick | null>(null);\n\n    React.useEffect(() => {\n        if (slickRef.current) {\n            slickRef.current.slickGoTo(index, false);\n        }\n    }, [index]);\n\n    const fixOnClickNotWorkingAfterMobileSwipe = () => {\n        // @ts-ignore\n        if (slickRef.current && slickRef.current.innerSlider) {\n            // @ts-ignore\n            slickRef.current.innerSlider.clickHandler = noop;\n        }\n    };\n\n    const handleAfterChange = (newIndex: number) => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    };\n\n    const handleBeforeChange = () => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n    };\n\n    return (\n        <StyledContainer\n            activeSlideScale={activeSlideScale}\n            inactiveSlideOpacity={inactiveSlideOpacity}\n            inactiveSlideScale={inactiveSlideScale}\n            arrowsStyle={arrowsStyle}\n        >\n            <Slick\n                {...baseSettings}\n                afterChange={handleAfterChange}\n                autoplay={autoplay}\n                autoplaySpeed={autoplayInterval}\n                beforeChange={handleBeforeChange}\n                centerMode={centerMode}\n                centerPadding={`${centerSlidePadding}px`}\n                infinite={infinite}\n                initialSlide={index}\n                ref={slickRef}\n                slidesToScroll={slidesToScroll}\n                slidesToShow={slidesToShow}\n                arrows={arrows}\n                prevArrow={(\n                    // If root component is not a div, there's no arrow class.\n                    <div>\n                        <ArrowContainer children={<ChevronLeft fill={'#767676'}/>}/>\n                    </div>\n                )}\n                nextArrow={(\n                    <div>\n                        <ArrowContainer children={<ChevronRight fill={'#767676'}/>}/>\n                    </div>\n                )}\n            >\n                {mapIndexed((item, index) => {\n                    const child = renderItem({ item, index });\n\n                    if (child) {\n                        return React.cloneElement(child, { key: index });\n                    }\n                    return child;\n                }, data)}\n            </Slick>\n        </StyledContainer>\n    );\n};\n"]}

package/build/module/Carousel/utils.js

@@ -2,5 +2,6 @@ export const defaultAutoplay = false;
 export const defaultAutoplayInterval = 3000;
 export const defaultInactiveSlideOpacity = 0.7;
 export const defaultInactiveSlideScale = 0.9;
+export const defaultActiveSlideScale = 0.990;
 export const defaultInfinite = false;
 //# sourceMappingURL=utils.js.map

package/build/module/Carousel/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils.ts"],"names":["defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultInfinite"],"mappings":"AAAA,OAAO,MAAMA,eAAe,GAAG,KAAxB;AAEP,OAAO,MAAMC,uBAAuB,GAAG,IAAhC;AAEP,OAAO,MAAMC,2BAA2B,GAAG,GAApC;AAEP,OAAO,MAAMC,yBAAyB,GAAG,GAAlC;AAEP,OAAO,MAAMC,eAAe,GAAG,KAAxB","sourcesContent":["export const defaultAutoplay = false;\n\nexport const defaultAutoplayInterval = 3000;\n\nexport const defaultInactiveSlideOpacity = 0.7;\n\nexport const defaultInactiveSlideScale = 0.9;\n\nexport const defaultInfinite = false;"]}
+{"version":3,"sources":["utils.ts"],"names":["defaultAutoplay","defaultAutoplayInterval","defaultInactiveSlideOpacity","defaultInactiveSlideScale","defaultActiveSlideScale","defaultInfinite"],"mappings":"AAAA,OAAO,MAAMA,eAAe,GAAG,KAAxB;AAEP,OAAO,MAAMC,uBAAuB,GAAG,IAAhC;AAEP,OAAO,MAAMC,2BAA2B,GAAG,GAApC;AAEP,OAAO,MAAMC,yBAAyB,GAAG,GAAlC;AAEP,OAAO,MAAMC,uBAAuB,GAAG,KAAhC;AAEP,OAAO,MAAMC,eAAe,GAAG,KAAxB","sourcesContent":["export const defaultAutoplay = false;\n\nexport const defaultAutoplayInterval = 3000;\n\nexport const defaultInactiveSlideOpacity = 0.7;\n\nexport const defaultInactiveSlideScale = 0.9;\n\nexport const defaultActiveSlideScale = 0.990;\n\nexport const defaultInfinite = false;\n"]}

package/build/module/StatusBarProvider/StatusBarProvider.js

@@ -54,7 +54,7 @@ export default function StatusBarProvider(props) {
     position: 'absolute',
     right: 0,
     top: 0,
-    zIndex: 10
+    zIndex: theme.zIndex.statusBar
   }]);
   return /*#__PURE__*/React.createElement(Provider, {
     value: {

package/build/module/StatusBarProvider/StatusBarProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["StatusBarProvider.tsx"],"names":["React","Platform","StatusBar","RNStatusBar","View","useSafeAreaInsets","useTheme","css","Provider","initialVisible","select","ios","android","StatusBarProvider","props","children","theme","defaultColor","palette","background","default","visible","setVisible","useState","backgroundViewColor","setBackgroundViewColor","setBackgroundColor","value","OS","setBarStyle","animated","setHidden","setTranslucent","shouldRenderBackgroundView","inset","backgroundViewStyle","backgroundColor","height","top","left","position","right","zIndex"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,QAAT,EAAmBC,SAAS,IAAIC,WAAhC,EAA6CC,IAA7C,QAAyD,cAAzD;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AACA,SAASC,QAAT,QAAyB,mBAAzB;AACA,SAASC,GAAT,QAAoB,qBAApB;AACA,OAAOC,QAAP,MAAqB,YAArB;AAGA,MAAMC,cAAc,GAAGR,QAAQ,CAACS,MAAT,CAAgB;AACnCC,EAAAA,GAAG,EAAE,IAD8B;AAEnCC,EAAAA,OAAO,EAAE;AAF0B,CAAhB,CAAvB;AAKA,eAAe,SAASC,iBAAT,CAA2BC,KAA3B,EAA0D;AACrE,QAAM;AAAEC,IAAAA;AAAF,MAAeD,KAArB;AAEA,QAAME,KAAK,GAAGV,QAAQ,EAAtB;AACA,QAAMW,YAAY,GAAGD,KAAK,CAACE,OAAN,CAAcC,UAAd,CAAyBC,OAA9C;AAEA,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBtB,KAAK,CAACuB,QAAN,CAAed,cAAf,CAA9B;AACA,QAAM,CAACe,mBAAD,EAAsBC,sBAAtB,IAAgDzB,KAAK,CAACuB,QAAN,CAAeN,YAAf,CAAtD;;AAEA,QAAMS,kBAAkB,GAAIC,KAAD,IAAmB;AAC1C,QAAI1B,QAAQ,CAAC2B,EAAT,KAAgB,SAApB,EAA+B;AAC3BzB,MAAAA,WAAW,CAACuB,kBAAZ,CAA+BC,KAA/B;AACH;;AAED,QAAI1B,QAAQ,CAAC2B,EAAT,KAAgB,KAApB,EAA2B;AACvBH,MAAAA,sBAAsB,CAACE,KAAD,CAAtB;AACH;AACJ,GARD;;AAUA,QAAME,WAAW,GAAG,CAACF,KAAD,EAAwBG,QAAxB,KAA+C;AAC/D3B,IAAAA,WAAW,CAAC0B,WAAZ,CAAwBF,KAAxB,EAA+BG,QAA/B;AACH,GAFD;;AAIA,QAAMC,SAAS,GAAIJ,KAAD,IAAoB;AAClC,QAAI1B,QAAQ,CAAC2B,EAAT,KAAgB,KAApB,EAA2B;AACvBN,MAAAA,UAAU,CAAC,CAACK,KAAF,CAAV;AACH;;AAEDxB,IAAAA,WAAW,CAAC4B,SAAZ,CAAsBJ,KAAtB;AACH,GAND;;AAQA,QAAMK,cAAc,GAAIL,KAAD,IAAoB;AACvC,QAAI1B,QAAQ,CAAC2B,EAAT,KAAgB,SAApB,EAA+B;AAC3BzB,MAAAA,WAAW,CAAC6B,cAAZ,CAA2BL,KAA3B;AACH;AACJ,GAJD;;AAMA,QAAMM,0BAA0B,GAAGhC,QAAQ,CAAC2B,EAAT,KAAgB,KAAhB,IAAyBP,OAA5D;AAEA,QAAMa,KAAK,GAAG7B,iBAAiB,EAA/B;AACA,QAAM8B,mBAAmB,GAAG5B,GAAG,CAAC,CAC5B;AACI6B,IAAAA,eAAe,EAAEZ,mBADrB;AAEIa,IAAAA,MAAM,EAAEH,KAAK,CAACI,GAFlB;AAGIC,IAAAA,IAAI,EAAE,CAHV;AAIIC,IAAAA,QAAQ,EAAE,UAJd;AAKIC,IAAAA,KAAK,EAAE,CALX;AAMIH,IAAAA,GAAG,EAAE,CANT;AAOII,IAAAA,MAAM,EAAE;AAPZ,GAD4B,CAAD,CAA/B;AAYA,sBACI,oBAAC,QAAD;AAAU,IAAA,KAAK,EAAE;AACbhB,MAAAA,kBADa;AAEbG,MAAAA,WAFa;AAGbE,MAAAA,SAHa;AAIbC,MAAAA;AAJa;AAAjB,KAMKC,0BAA0B,gBACvB,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEE;AAAb,IADuB,GAEvB,IARR,EASKpB,QATL,CADJ;AAaH","sourcesContent":["import React from 'react';\nimport type { StatusBarStyle } from 'react-native';\nimport { Platform, StatusBar as RNStatusBar, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useTheme } from '@fountain-ui/core';\nimport { css } from '@fountain-ui/styles';\nimport Provider from './Provider';\nimport type StatusBarProviderProps from './StatusBarProviderProps';\n\nconst initialVisible = Platform.select({\n    ios: true,\n    android: false,\n});\n\nexport default function StatusBarProvider(props: StatusBarProviderProps) {\n    const { children } = props;\n\n    const theme = useTheme();\n    const defaultColor = theme.palette.background.default;\n\n    const [visible, setVisible] = React.useState(initialVisible);\n    const [backgroundViewColor, setBackgroundViewColor] = React.useState(defaultColor);\n\n    const setBackgroundColor = (value: string) => {\n        if (Platform.OS === 'android') {\n            RNStatusBar.setBackgroundColor(value);\n        }\n\n        if (Platform.OS === 'ios') {\n            setBackgroundViewColor(value);\n        }\n    };\n\n    const setBarStyle = (value: StatusBarStyle, animated?: boolean) => {\n        RNStatusBar.setBarStyle(value, animated);\n    };\n\n    const setHidden = (value: boolean) => {\n        if (Platform.OS === 'ios') {\n            setVisible(!value);\n        }\n\n        RNStatusBar.setHidden(value);\n    };\n\n    const setTranslucent = (value: boolean) => {\n        if (Platform.OS === 'android') {\n            RNStatusBar.setTranslucent(value);\n        }\n    };\n\n    const shouldRenderBackgroundView = Platform.OS === 'ios' && visible;\n\n    const inset = useSafeAreaInsets();\n    const backgroundViewStyle = css([\n        {\n            backgroundColor: backgroundViewColor,\n            height: inset.top,\n            left: 0,\n            position: 'absolute',\n            right: 0,\n            top: 0,\n            zIndex: 10,\n        },\n    ]);\n\n    return (\n        <Provider value={{\n            setBackgroundColor,\n            setBarStyle,\n            setHidden,\n            setTranslucent,\n        }}>\n            {shouldRenderBackgroundView ? (\n                <View style={backgroundViewStyle}/>\n            ) : null}\n            {children}\n        </Provider>\n    );\n}"]}
+{"version":3,"sources":["StatusBarProvider.tsx"],"names":["React","Platform","StatusBar","RNStatusBar","View","useSafeAreaInsets","useTheme","css","Provider","initialVisible","select","ios","android","StatusBarProvider","props","children","theme","defaultColor","palette","background","default","visible","setVisible","useState","backgroundViewColor","setBackgroundViewColor","setBackgroundColor","value","OS","setBarStyle","animated","setHidden","setTranslucent","shouldRenderBackgroundView","inset","backgroundViewStyle","backgroundColor","height","top","left","position","right","zIndex","statusBar"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,QAAT,EAAmBC,SAAS,IAAIC,WAAhC,EAA6CC,IAA7C,QAAyD,cAAzD;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AACA,SAASC,QAAT,QAAyB,mBAAzB;AACA,SAASC,GAAT,QAAoB,qBAApB;AACA,OAAOC,QAAP,MAAqB,YAArB;AAGA,MAAMC,cAAc,GAAGR,QAAQ,CAACS,MAAT,CAAgB;AACnCC,EAAAA,GAAG,EAAE,IAD8B;AAEnCC,EAAAA,OAAO,EAAE;AAF0B,CAAhB,CAAvB;AAKA,eAAe,SAASC,iBAAT,CAA2BC,KAA3B,EAA0D;AACrE,QAAM;AAAEC,IAAAA;AAAF,MAAeD,KAArB;AAEA,QAAME,KAAK,GAAGV,QAAQ,EAAtB;AACA,QAAMW,YAAY,GAAGD,KAAK,CAACE,OAAN,CAAcC,UAAd,CAAyBC,OAA9C;AAEA,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBtB,KAAK,CAACuB,QAAN,CAAed,cAAf,CAA9B;AACA,QAAM,CAACe,mBAAD,EAAsBC,sBAAtB,IAAgDzB,KAAK,CAACuB,QAAN,CAAeN,YAAf,CAAtD;;AAEA,QAAMS,kBAAkB,GAAIC,KAAD,IAAmB;AAC1C,QAAI1B,QAAQ,CAAC2B,EAAT,KAAgB,SAApB,EAA+B;AAC3BzB,MAAAA,WAAW,CAACuB,kBAAZ,CAA+BC,KAA/B;AACH;;AAED,QAAI1B,QAAQ,CAAC2B,EAAT,KAAgB,KAApB,EAA2B;AACvBH,MAAAA,sBAAsB,CAACE,KAAD,CAAtB;AACH;AACJ,GARD;;AAUA,QAAME,WAAW,GAAG,CAACF,KAAD,EAAwBG,QAAxB,KAA+C;AAC/D3B,IAAAA,WAAW,CAAC0B,WAAZ,CAAwBF,KAAxB,EAA+BG,QAA/B;AACH,GAFD;;AAIA,QAAMC,SAAS,GAAIJ,KAAD,IAAoB;AAClC,QAAI1B,QAAQ,CAAC2B,EAAT,KAAgB,KAApB,EAA2B;AACvBN,MAAAA,UAAU,CAAC,CAACK,KAAF,CAAV;AACH;;AAEDxB,IAAAA,WAAW,CAAC4B,SAAZ,CAAsBJ,KAAtB;AACH,GAND;;AAQA,QAAMK,cAAc,GAAIL,KAAD,IAAoB;AACvC,QAAI1B,QAAQ,CAAC2B,EAAT,KAAgB,SAApB,EAA+B;AAC3BzB,MAAAA,WAAW,CAAC6B,cAAZ,CAA2BL,KAA3B;AACH;AACJ,GAJD;;AAMA,QAAMM,0BAA0B,GAAGhC,QAAQ,CAAC2B,EAAT,KAAgB,KAAhB,IAAyBP,OAA5D;AAEA,QAAMa,KAAK,GAAG7B,iBAAiB,EAA/B;AACA,QAAM8B,mBAAmB,GAAG5B,GAAG,CAAC,CAC5B;AACI6B,IAAAA,eAAe,EAAEZ,mBADrB;AAEIa,IAAAA,MAAM,EAAEH,KAAK,CAACI,GAFlB;AAGIC,IAAAA,IAAI,EAAE,CAHV;AAIIC,IAAAA,QAAQ,EAAE,UAJd;AAKIC,IAAAA,KAAK,EAAE,CALX;AAMIH,IAAAA,GAAG,EAAE,CANT;AAOII,IAAAA,MAAM,EAAE1B,KAAK,CAAC0B,MAAN,CAAaC;AAPzB,GAD4B,CAAD,CAA/B;AAYA,sBACI,oBAAC,QAAD;AAAU,IAAA,KAAK,EAAE;AACbjB,MAAAA,kBADa;AAEbG,MAAAA,WAFa;AAGbE,MAAAA,SAHa;AAIbC,MAAAA;AAJa;AAAjB,KAMKC,0BAA0B,gBACvB,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEE;AAAb,IADuB,GAEvB,IARR,EASKpB,QATL,CADJ;AAaH","sourcesContent":["import React from 'react';\nimport type { StatusBarStyle } from 'react-native';\nimport { Platform, StatusBar as RNStatusBar, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useTheme } from '@fountain-ui/core';\nimport { css } from '@fountain-ui/styles';\nimport Provider from './Provider';\nimport type StatusBarProviderProps from './StatusBarProviderProps';\n\nconst initialVisible = Platform.select({\n    ios: true,\n    android: false,\n});\n\nexport default function StatusBarProvider(props: StatusBarProviderProps) {\n    const { children } = props;\n\n    const theme = useTheme();\n    const defaultColor = theme.palette.background.default;\n\n    const [visible, setVisible] = React.useState(initialVisible);\n    const [backgroundViewColor, setBackgroundViewColor] = React.useState(defaultColor);\n\n    const setBackgroundColor = (value: string) => {\n        if (Platform.OS === 'android') {\n            RNStatusBar.setBackgroundColor(value);\n        }\n\n        if (Platform.OS === 'ios') {\n            setBackgroundViewColor(value);\n        }\n    };\n\n    const setBarStyle = (value: StatusBarStyle, animated?: boolean) => {\n        RNStatusBar.setBarStyle(value, animated);\n    };\n\n    const setHidden = (value: boolean) => {\n        if (Platform.OS === 'ios') {\n            setVisible(!value);\n        }\n\n        RNStatusBar.setHidden(value);\n    };\n\n    const setTranslucent = (value: boolean) => {\n        if (Platform.OS === 'android') {\n            RNStatusBar.setTranslucent(value);\n        }\n    };\n\n    const shouldRenderBackgroundView = Platform.OS === 'ios' && visible;\n\n    const inset = useSafeAreaInsets();\n    const backgroundViewStyle = css([\n        {\n            backgroundColor: backgroundViewColor,\n            height: inset.top,\n            left: 0,\n            position: 'absolute',\n            right: 0,\n            top: 0,\n            zIndex: theme.zIndex.statusBar,\n        },\n    ]);\n\n    return (\n        <Provider value={{\n            setBackgroundColor,\n            setBarStyle,\n            setHidden,\n            setTranslucent,\n        }}>\n            {shouldRenderBackgroundView ? (\n                <View style={backgroundViewStyle}/>\n            ) : null}\n            {children}\n        </Provider>\n    );\n}"]}

package/build/module/ViewPager/ChildrenMemoizedPage.js

@@ -22,6 +22,10 @@ export default /*#__PURE__*/React.memo(Page, (prevProps, nextProps) => {
     return false;
   }
 
+  if (prevProps.style !== nextProps.style) {
+    return false;
+  }
+
   if (prevProps.rerenderKey !== nextProps.rerenderKey) {
     return false;
   }

package/build/module/ViewPager/ChildrenMemoizedPage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ChildrenMemoizedPage.tsx"],"names":["React","View","Page","props","isVisible","otherProps","memo","prevProps","nextProps","children","rerenderKey"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;;AAGA,MAAMC,IAAI,GAAG,SAASA,IAAT,CAAcC,KAAd,EAAgC;AACzC,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BF,KAArC;AAEA,sBACI,oBAAC,IAAD;AACI,IAAA,WAAW,EAAE;AADjB,KAEQE,UAFR,EADJ;AAMH,CATD;;AAWA,4BAAeL,KAAK,CAACM,IAAN,CAAWJ,IAAX,EAAiB,CAACK,SAAD,EAAYC,SAAZ,KAA0B;AACtD,MAAID,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA1D,EAAgE;AAC5D,WAAO,IAAP;AACH;;AAED,MAAIF,SAAS,CAACH,SAAV,KAAwBI,SAAS,CAACJ,SAAtC,EAAiD;AAC7C,WAAO,KAAP;AACH;;AAED,MAAIG,SAAS,CAACG,WAAV,KAA0BF,SAAS,CAACE,WAAxC,EAAqD;AACjD,WAAO,KAAP;AACH;;AAED,SAAOH,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA7D;AACH,CAdc,CAAf","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { PageProps } from './ViewPagerProps';\n\nconst Page = function Page(props: PageProps) {\n    const { isVisible, ...otherProps } = props;\n\n    return (\n        <View\n            collapsable={false}\n            {...otherProps}\n        />\n    );\n};\n\nexport default React.memo(Page, (prevProps, nextProps) => {\n    if (prevProps.children === null && nextProps.children === null) {\n        return true;\n    }\n\n    if (prevProps.isVisible !== nextProps.isVisible) {\n        return false;\n    }\n\n    if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n        return false;\n    }\n\n    return prevProps.children !== null && nextProps.children !== null;\n});\n"]}
+{"version":3,"sources":["ChildrenMemoizedPage.tsx"],"names":["React","View","Page","props","isVisible","otherProps","memo","prevProps","nextProps","children","style","rerenderKey"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;;AAGA,MAAMC,IAAI,GAAG,SAASA,IAAT,CAAcC,KAAd,EAAgC;AACzC,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BF,KAArC;AAEA,sBACI,oBAAC,IAAD;AACI,IAAA,WAAW,EAAE;AADjB,KAEQE,UAFR,EADJ;AAMH,CATD;;AAWA,4BAAeL,KAAK,CAACM,IAAN,CAAWJ,IAAX,EAAiB,CAACK,SAAD,EAAYC,SAAZ,KAA0B;AACtD,MAAID,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA1D,EAAgE;AAC5D,WAAO,IAAP;AACH;;AAED,MAAIF,SAAS,CAACH,SAAV,KAAwBI,SAAS,CAACJ,SAAtC,EAAiD;AAC7C,WAAO,KAAP;AACH;;AAED,MAAIG,SAAS,CAACG,KAAV,KAAoBF,SAAS,CAACE,KAAlC,EAAyC;AACrC,WAAO,KAAP;AACH;;AAED,MAAIH,SAAS,CAACI,WAAV,KAA0BH,SAAS,CAACG,WAAxC,EAAqD;AACjD,WAAO,KAAP;AACH;;AAED,SAAOJ,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA7D;AACH,CAlBc,CAAf","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { PageProps } from './ViewPagerProps';\n\nconst Page = function Page(props: PageProps) {\n    const { isVisible, ...otherProps } = props;\n\n    return (\n        <View\n            collapsable={false}\n            {...otherProps}\n        />\n    );\n};\n\nexport default React.memo(Page, (prevProps, nextProps) => {\n    if (prevProps.children === null && nextProps.children === null) {\n        return true;\n    }\n\n    if (prevProps.isVisible !== nextProps.isVisible) {\n        return false;\n    }\n\n    if (prevProps.style !== nextProps.style) {\n        return false;\n    }\n\n    if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n        return false;\n    }\n\n    return prevProps.children !== null && nextProps.children !== null;\n});\n"]}

package/build/module/ViewPager/ViewPagerWeb.js

@@ -3,6 +3,8 @@ import { StyleSheet, View } from 'react-native';
 import { defaultEnableVisibleHint, defaultLoading, defaultPageComponent, usePageRenderer } from './utils';
 const styles = StyleSheet.create({
   root: {
+    // @ts-ignore
+    overflow: 'auto',
     position: 'relative'
   },
   none: {
@@ -28,10 +30,8 @@ export default function ViewPager(props) {
   });
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.root, style]
-  }, React.Children.map(renderer(children), (child, i) => /*#__PURE__*/React.createElement(View, {
-    key: i,
-    style: i !== index ? styles.none : StyleSheet.absoluteFill,
-    children: child
+  }, React.Children.map(renderer(children), (child, i) => /*#__PURE__*/React.cloneElement(child, {
+    style: i !== index ? styles.none : StyleSheet.absoluteFill
   })));
 }
 ;

package/build/module/ViewPager/ViewPagerWeb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ViewPagerWeb.tsx"],"names":["React","StyleSheet","View","defaultEnableVisibleHint","defaultLoading","defaultPageComponent","usePageRenderer","styles","create","root","position","none","display","ViewPager","props","children","enableVisibleHint","index","loading","pageComponent","pageForceRerenderKey","style","renderer","Children","map","child","i","absoluteFill"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AAEA,SAASC,wBAAT,EAAmCC,cAAnC,EAAmDC,oBAAnD,EAAyEC,eAAzE,QAAgG,SAAhG;AAEA,MAAMC,MAAM,GAAGN,UAAU,CAACO,MAAX,CAAkB;AAC7BC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,QAAQ,EAAE;AAAZ,GADuB;AAE7BC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,OAAO,EAAE;AAAX;AAFuB,CAAlB,CAAf;AAKA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,iBAAiB,GAAGb,wBAFlB;AAGFc,IAAAA,KAHE;AAIFC,IAAAA,OAAO,GAAGd,cAJR;AAKFe,IAAAA,aAAa,GAAGd,oBALd;AAMFe,IAAAA,oBANE;AAOFC,IAAAA;AAPE,MAQFP,KARJ;AAUA,QAAMQ,QAAQ,GAAGhB,eAAe,CAAC;AAC7BU,IAAAA,iBAD6B;AAE7BC,IAAAA,KAF6B;AAG7BC,IAAAA,OAH6B;AAI7BC,IAAAA,aAJ6B;AAK7BC,IAAAA;AAL6B,GAAD,CAAhC;AAQA,sBACI,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAACb,MAAM,CAACE,IAAR,EAAcY,KAAd;AAAb,KACKrB,KAAK,CAACuB,QAAN,CAAeC,GAAf,CAAmBF,QAAQ,CAACP,QAAD,CAA3B,EAAuC,CAACU,KAAD,EAAQC,CAAR,kBACpC,oBAAC,IAAD;AACI,IAAA,GAAG,EAAEA,CADT;AAEI,IAAA,KAAK,EAAEA,CAAC,KAAKT,KAAN,GAAcV,MAAM,CAACI,IAArB,GAA4BV,UAAU,CAAC0B,YAFlD;AAGI,IAAA,QAAQ,EAAEF;AAHd,IADH,CADL,CADJ;AAWH;AAAA","sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport type ViewPagerProps from './ViewPagerProps';\nimport { defaultEnableVisibleHint, defaultLoading, defaultPageComponent, usePageRenderer } from './utils';\n\nconst styles = StyleSheet.create({\n    root: { position: 'relative' },\n    none: { display: 'none' },\n});\n\nexport default function ViewPager(props: ViewPagerProps) {\n    const {\n        children,\n        enableVisibleHint = defaultEnableVisibleHint,\n        index,\n        loading = defaultLoading,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        style,\n    } = props;\n\n    const renderer = usePageRenderer({\n        enableVisibleHint,\n        index,\n        loading,\n        pageComponent,\n        pageForceRerenderKey,\n    });\n\n    return (\n        <View style={[styles.root, style]}>\n            {React.Children.map(renderer(children), (child, i) => (\n                <View\n                    key={i}\n                    style={i !== index ? styles.none : StyleSheet.absoluteFill}\n                    children={child}\n                />\n            ))}\n        </View>\n    );\n};\n"]}
+{"version":3,"sources":["ViewPagerWeb.tsx"],"names":["React","StyleSheet","View","defaultEnableVisibleHint","defaultLoading","defaultPageComponent","usePageRenderer","styles","create","root","overflow","position","none","display","ViewPager","props","children","enableVisibleHint","index","loading","pageComponent","pageForceRerenderKey","style","renderer","Children","map","child","i","cloneElement","absoluteFill"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AAEA,SAASC,wBAAT,EAAmCC,cAAnC,EAAmDC,oBAAnD,EAAyEC,eAAzE,QAAgG,SAAhG;AAEA,MAAMC,MAAM,GAAGN,UAAU,CAACO,MAAX,CAAkB;AAC7BC,EAAAA,IAAI,EAAE;AACF;AACAC,IAAAA,QAAQ,EAAE,MAFR;AAGFC,IAAAA,QAAQ,EAAE;AAHR,GADuB;AAM7BC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,OAAO,EAAE;AAAX;AANuB,CAAlB,CAAf;AASA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,iBAAiB,GAAGd,wBAFlB;AAGFe,IAAAA,KAHE;AAIFC,IAAAA,OAAO,GAAGf,cAJR;AAKFgB,IAAAA,aAAa,GAAGf,oBALd;AAMFgB,IAAAA,oBANE;AAOFC,IAAAA;AAPE,MAQFP,KARJ;AAUA,QAAMQ,QAAQ,GAAGjB,eAAe,CAAC;AAC7BW,IAAAA,iBAD6B;AAE7BC,IAAAA,KAF6B;AAG7BC,IAAAA,OAH6B;AAI7BC,IAAAA,aAJ6B;AAK7BC,IAAAA;AAL6B,GAAD,CAAhC;AAQA,sBACI,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAACd,MAAM,CAACE,IAAR,EAAca,KAAd;AAAb,KACKtB,KAAK,CAACwB,QAAN,CAAeC,GAAf,CAAmBF,QAAQ,CAACP,QAAD,CAA3B,EAAuC,CAACU,KAAD,EAAQC,CAAR,kBACpC3B,KAAK,CAAC4B,YAAN,CAAmBF,KAAnB,EAAgD;AAC5CJ,IAAAA,KAAK,EAAEK,CAAC,KAAKT,KAAN,GAAcX,MAAM,CAACK,IAArB,GAA4BX,UAAU,CAAC4B;AADF,GAAhD,CADH,CADL,CADJ;AASH;AAAA","sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport type ViewPagerProps from './ViewPagerProps';\nimport { defaultEnableVisibleHint, defaultLoading, defaultPageComponent, usePageRenderer } from './utils';\n\nconst styles = StyleSheet.create({\n    root: {\n        // @ts-ignore\n        overflow: 'auto',\n        position: 'relative',\n    },\n    none: { display: 'none' },\n});\n\nexport default function ViewPager(props: ViewPagerProps) {\n    const {\n        children,\n        enableVisibleHint = defaultEnableVisibleHint,\n        index,\n        loading = defaultLoading,\n        pageComponent = defaultPageComponent,\n        pageForceRerenderKey,\n        style,\n    } = props;\n\n    const renderer = usePageRenderer({\n        enableVisibleHint,\n        index,\n        loading,\n        pageComponent,\n        pageForceRerenderKey,\n    });\n\n    return (\n        <View style={[styles.root, style]}>\n            {React.Children.map(renderer(children), (child, i) =>\n                React.cloneElement(child as React.ReactElement, {\n                    style: i !== index ? styles.none : StyleSheet.absoluteFill,\n                }),\n            )}\n        </View>\n    );\n};\n"]}

package/build/typescript/AnimatedY/AnimatedY.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type AnimatedYProps from './AnimatedYProps';
 export default function AnimatedY(props: AnimatedYProps): JSX.Element;

package/build/typescript/BottomSheet/BottomSheetNative.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type BottomSheetProps from './BottomSheetProps';
 export default function BottomSheet(props: BottomSheetProps): JSX.Element;

package/build/typescript/BottomSheet/BottomSheetWeb.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type BottomSheetProps from './BottomSheetProps';
 export default function BottomSheet(props: BottomSheetProps): JSX.Element;

package/build/typescript/BottomSheet/TransparentBackdrop.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
 export default function TransparentBackdrop(props: BottomSheetBackdropProps): JSX.Element;

package/build/typescript/Carousel/CarouselNative.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type CarouselProps from './CarouselProps';
 export default function Carousel<ItemT>(props: CarouselProps<ItemT>): JSX.Element;

package/build/typescript/Carousel/CarouselProps.d.ts

@@ -30,6 +30,11 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
      * @default 0.9
      */
     inactiveSlideScale?: number;
+    /**
+     * Web only. Value of the 'scale' transform applied to a active slide.
+     * @default 0.990
+     */
+    activeSlideScale?: number;
     /**
      * A number representing the index of the active slide.
      */
@@ -57,5 +62,20 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
      * @default 1
      */
     slidesToShow?: number;
+    /**
+     * Web only. Enable items to display at the center.
+     * @default true
+     */
+    centerMode?: boolean;
+    /**
+     * Web only. Enable arrows to display.
+     * @default true
+     */
+    arrows?: boolean;
+    /**
+     * Web only. Style of arrows
+     * @default true
+     */
+    arrowsStyle?: object;
 }> {
 }

package/build/typescript/Carousel/CarouselWeb.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type CarouselProps from './CarouselProps';
 export default function Carousel<ItemT>(props: CarouselProps<ItemT>): JSX.Element;

package/build/typescript/Carousel/utils.d.ts

@@ -2,4 +2,5 @@ export declare const defaultAutoplay = false;
 export declare const defaultAutoplayInterval = 3000;
 export declare const defaultInactiveSlideOpacity = 0.7;
 export declare const defaultInactiveSlideScale = 0.9;
+export declare const defaultActiveSlideScale = 0.99;
 export declare const defaultInfinite = false;

package/build/typescript/DateTimePicker/DateTimePicker.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type DateTimePickerProps from './DateTimePickerProps';
 export default function DateTimePicker(props: DateTimePickerProps): JSX.Element;

package/build/typescript/DateTimePicker/YearPicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface YearPickerProps {
     date: Date;
     locale?: string;

package/build/typescript/StatusBarProvider/StatusBarProvider.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type StatusBarProviderProps from './StatusBarProviderProps';
 export default function StatusBarProvider(props: StatusBarProviderProps): JSX.Element;

package/build/typescript/ViewPager/ViewPagerNative.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type ViewPagerProps from './ViewPagerProps';
 export default function ViewPager(props: ViewPagerProps): JSX.Element;

package/build/typescript/ViewPager/ViewPagerWeb.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type ViewPagerProps from './ViewPagerProps';
 export default function ViewPager(props: ViewPagerProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "1.9.2",
+  "version": "1.12.0",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -15,14 +15,15 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@emotion/react": "^11.1.1",
+    "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.0.0",
-    "@fountain-ui/utils": "^1.0.1",
-    "react-native-calendars": "^1.830.0"
+    "@fountain-ui/icons": "^1.11.0",
+    "@fountain-ui/utils": "^1.1.0",
+    "react-native-calendars": "1.1249.0"
   },
   "peerDependencies": {
     "@fountain-ui/core": "^1.0.0-alpha.4",
-    "@gorhom/bottom-sheet": "^3.0.0",
+    "@gorhom/bottom-sheet": "^3.6.6",
     "@react-native-community/viewpager": "> 4.2.x",
     "date-fns": "^2.0.0",
     "react": "^16.8.0 || ^17.0.0",
@@ -52,15 +53,15 @@
     }
   },
   "devDependencies": {
-    "@fountain-ui/core": "^1.7.0",
-    "@gorhom/bottom-sheet": "^3.2.0",
+    "@fountain-ui/core": "^1.10.0",
+    "@gorhom/bottom-sheet": "3.6.6",
     "@react-native-community/viewpager": "^4.2.2",
-    "@types/react-native-snap-carousel": "^3.8.2",
-    "@types/react-slick": "^0.23.4",
-    "date-fns": "^2.16.1",
-    "react-native-safe-area-context": "^3.1.9",
+    "@types/react-native-snap-carousel": "^3.8.4",
+    "@types/react-slick": "^0.23.5",
+    "date-fns": "^2.23.0",
+    "react-native-safe-area-context": "^3.3.2",
     "react-native-snap-carousel": "^3.9.1",
-    "react-slick": "^0.27.13"
+    "react-slick": "^0.28.1"
   },
   "react-native-builder-bob": {
     "source": "./src",
@@ -84,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "126176b9a981a11483c92d9fec03f0017e297e7d"
+  "gitHead": "38c89201acebdf0642b1547b66af8e7f970f55e2"
 }

package/src/Carousel/CarouselProps.ts

@@ -7,66 +7,90 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
      * If `true`, enable autoplay.
      * @default false
      */
-    autoplay?: boolean,
+    autoplay?: boolean;
 
     /**
      * Delay in ms until navigating to the next item.
      * @default 3000
      */
-    autoplayInterval?: number,
+    autoplayInterval?: number;
 
     /**
      * Padding for center slide. If specified, `slidesToScroll` and `slidesToShow` set to 1.
      */
-    centerSlidePadding?: number,
+    centerSlidePadding?: number;
 
     /**
      * Delay in ms until navigating to the next item.
      */
-    data: ReadonlyArray<ItemT>,
+    data: ReadonlyArray<ItemT>;
 
     /**
      * Value of the opacity effect applied to inactive slides.
      * @default 0.7
      */
-    inactiveSlideOpacity?: number,
+    inactiveSlideOpacity?: number;
 
     /**
      * Value of the 'scale' transform applied to inactive slides.
      * @default 0.9
      */
-    inactiveSlideScale?: number,
+    inactiveSlideScale?: number;
+
+    /**
+     * Web only. Value of the 'scale' transform applied to a active slide.
+     * @default 0.990
+     */
+    activeSlideScale?: number;
 
     /**
      * A number representing the index of the active slide.
      */
-    index: number,
+    index: number;
 
     /**
      * Enable infinite loop mode.
      * @default false
      */
-    infinite?: boolean,
+    infinite?: boolean;
 
     /**
      * Callback fired when an index is changed.
      */
-    onChange?: (newIndex: number) => void,
+    onChange?: (newIndex: number) => void;
 
     /**
      * Takes an item from data and renders it into the list.
      */
-    renderItem: (info: Omit<ListRenderItemInfo<ItemT>, 'separators'>) => React.ReactElement | null,
+    renderItem: (info: Omit<ListRenderItemInfo<ItemT>, 'separators'>) => React.ReactElement | null;
 
     /**
      * Web only. Number of slides to scroll at once.
      * @default 1
      */
-    slidesToScroll?: number,
+    slidesToScroll?: number;
 
     /**
      * Web only. Number of slides to display.
      * @default 1
      */
-    slidesToShow?: number,
-}> {}
+    slidesToShow?: number;
+
+    /**
+     * Web only. Enable items to display at the center.
+     * @default true
+     */
+    centerMode?: boolean;
+
+    /**
+     * Web only. Enable arrows to display.
+     * @default true
+     */
+    arrows?: boolean;
+
+    /**
+     * Web only. Style of arrows
+     * @default true
+     */
+    arrowsStyle?: object;
+}> {}

package/src/Carousel/CarouselWeb.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import { View } from 'react-native';
 import Slick, { Settings } from 'react-slick';
 import styled from '@emotion/styled';
+import { ChevronLeft, ChevronRight } from '@fountain-ui/icons';
 import { mapIndexed } from '@fountain-ui/utils';
 import type CarouselProps from './CarouselProps';
 import {
@@ -8,11 +10,11 @@ import {
     defaultAutoplayInterval,
     defaultInactiveSlideOpacity,
     defaultInactiveSlideScale,
+    defaultActiveSlideScale,
     defaultInfinite,
 } from './utils';
 
 const baseSettings: Settings = {
-    arrows: false,
     dots: false,
     draggable: true,
     lazyLoad: 'ondemand',
@@ -27,66 +29,47 @@ const baseSettings: Settings = {
 const noop = () => void 0;
 
 const StyledContainer: any = styled.div((props: any) => ({
-    ['& .slick-slider']: {
-        display: 'block',
-        position: 'relative',
-        userSelect: 'none',
-    },
-    ['& .slick-list']: {
-        display: 'block',
-        position: 'relative',
-        overflow: 'hidden',
-        margin: 0,
-        padding: 0,
-        ['&:focus']: {
-            outline: 'none',
-        },
-        ['&.dragging']: {
-            cursor: 'pointer',
-        },
-    },
-    ['& .slick-slider .slick-track, &.slick-slider .slick-list']: {
-        transform: 'translate3d(0, 0, 0)',
-    },
     ['& .slick-track']: {
-        display: 'block',
-        position: 'relative',
-        top: 0,
-        left: 0,
-        ['&:before, &:after']: {
-            display: 'table',
-            content: '\'\'',
-        },
-        ['&:after']: {
-            clear: 'both',
-        },
+        display: 'flex',
     },
-    ['& .slick-slide']: {
-        display: 'none',
-        float: 'left',
-        height: '100%',
-        minHeight: 1,
-        ['& > div']: {
-            display: 'flex',
-            transform: `scale(${props.inactiveSlideScale})`,
-            transition: 'transform .5s',
-            opacity: props.inactiveSlideOpacity,
-        },
+    ['& .slick-slide > div']: {
+        display: 'flex',
+        opacity: 0.2,
+        transform: `scale(${props.inactiveSlideScale})`,
+        transition: 'transform .5s',
     },
-    ['& .slick-current > div']: {
-        transform: 'none',
+    [`& .slick-active.slick-current > div`]: {
+        transform: `scale(${props.activeSlideScale})`,
         opacity: 1,
     },
-    ['& .slick-initialized .slick-slide']: {
-        display: 'block',
-    },
+    ...props.arrowsStyle,
 }));
 
+interface ArrowContainerProps {
+    children: React.ReactElement;
+}
+
+const ArrowContainer = ({ children }: ArrowContainerProps) => (
+    <View
+        style={{
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'white',
+            borderRadius: 16,
+        }}
+    >
+        {children}
+    </View>
+);
+
 export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
     const {
+        activeSlideScale = defaultActiveSlideScale,
         autoplay = defaultAutoplay,
         autoplayInterval = defaultAutoplayInterval,
-        centerSlidePadding,
+        centerMode = true,
+        centerSlidePadding = 0,
         data,
         inactiveSlideOpacity = defaultInactiveSlideOpacity,
         inactiveSlideScale = defaultInactiveSlideScale,
@@ -96,6 +79,8 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
         renderItem,
         slidesToScroll = 1,
         slidesToShow = 1,
+        arrows = false,
+        arrowsStyle = {},
     } = props;
 
     const slickRef = React.useRef<Slick | null>(null);
@@ -128,8 +113,10 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
 
     return (
         <StyledContainer
+            activeSlideScale={activeSlideScale}
             inactiveSlideOpacity={inactiveSlideOpacity}
             inactiveSlideScale={inactiveSlideScale}
+            arrowsStyle={arrowsStyle}
         >
             <Slick
                 {...baseSettings}
@@ -137,13 +124,25 @@ export default function Carousel<ItemT>(props: CarouselProps<ItemT>) {
                 autoplay={autoplay}
                 autoplaySpeed={autoplayInterval}
                 beforeChange={handleBeforeChange}
-                centerMode={centerSlidePadding !== undefined}
-                centerPadding={centerSlidePadding !== undefined ? `${centerSlidePadding}px` : undefined}
+                centerMode={centerMode}
+                centerPadding={`${centerSlidePadding}px`}
                 infinite={infinite}
                 initialSlide={index}
                 ref={slickRef}
-                slidesToScroll={centerSlidePadding !== undefined ? 1 : slidesToScroll}
-                slidesToShow={centerSlidePadding !== undefined ? 1 : slidesToShow}
+                slidesToScroll={slidesToScroll}
+                slidesToShow={slidesToShow}
+                arrows={arrows}
+                prevArrow={(
+                    // If root component is not a div, there's no arrow class.
+                    <div>
+                        <ArrowContainer children={<ChevronLeft fill={'#767676'}/>}/>
+                    </div>
+                )}
+                nextArrow={(
+                    <div>
+                        <ArrowContainer children={<ChevronRight fill={'#767676'}/>}/>
+                    </div>
+                )}
             >
                 {mapIndexed((item, index) => {
                     const child = renderItem({ item, index });

package/src/Carousel/utils.ts

@@ -6,4 +6,6 @@ export const defaultInactiveSlideOpacity = 0.7;
 
 export const defaultInactiveSlideScale = 0.9;
 
-export const defaultInfinite = false;
+export const defaultActiveSlideScale = 0.990;
+
+export const defaultInfinite = false;

package/src/StatusBarProvider/StatusBarProvider.tsx

@@ -60,7 +60,7 @@ export default function StatusBarProvider(props: StatusBarProviderProps) {
             position: 'absolute',
             right: 0,
             top: 0,
-            zIndex: 10,
+            zIndex: theme.zIndex.statusBar,
         },
     ]);