@fountain-ui/core 3.0.0-alpha.14 → 3.0.0-alpha.15

package/src/Accordion/Accordion.tsx

@@ -140,20 +140,20 @@ export default function Accordion(props: AccordionProps) {
                             />
                         </Row>
 
-                        {subTitle && variant === 'solid' ?
-                            typeof subTitle === 'string' ? (
-                                <React.Fragment>
-                                    <Spacer size={1.5}/>
+                        {subTitle && variant === 'solid' ? (
+                            <React.Fragment>
+                                <Spacer size={1.5}/>
 
+                                {typeof subTitle === 'string' ? (
                                     <Text
                                         allowFontScaling={false}
                                         children={subTitle}
                                         numberOfLines={1}
                                         style={subTitleFontStyle}
                                     />
-                                </React.Fragment>
-                            ) : (subTitle)
-                            : null}
+                                ) : (subTitle)}
+                            </React.Fragment>
+                        ) : null}
                     </Column>
 
                     <Spacer flex={1}/>

package/src/Accordion/useVariantStyleMap.ts

@@ -30,10 +30,12 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     content: {
                         borderTopColor: theme.palette.border.weak,
                         borderTopWidth: 0.5,
+                        left: 0,
                         marginHorizontal: theme.spacing(4),
                         paddingBottom: theme.spacing(5),
                         paddingTop: theme.spacing(4),
                         position: 'absolute',
+                        right: 0,
                     },
                     contentFont: createFontStyle(theme, {
                         selector: (typography) => typography.body3.regular,
@@ -69,10 +71,12 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     content: {
                         borderTopColor: theme.palette.border.weak,
                         borderTopWidth: 0.5,
+                        left: 0,
                         marginHorizontal: theme.spacing(4),
                         paddingBottom: theme.spacing(4),
                         paddingTop: theme.spacing(3),
                         position: 'absolute',
+                        right: 0,
                     },
                     contentFont: createFontStyle(theme, {
                         selector: (typography) => typography.caption2.regular,

package/src/BottomSheetTitle/BottomSheetTitle.tsx

@@ -72,6 +72,7 @@ export default function BottomSheetTitle(props: BottomSheetTitleProps) {
                 <Button
                     children={actionButtonProps.title}
                     color={'accent'}
+                    disabled={actionButtonProps.disabled ?? false}
                     disableMinWidth={true}
                     onPress={actionButtonProps.onPress}
                     size={'large'}

package/src/BottomSheetTitle/BottomSheetTitleProps.ts

@@ -2,6 +2,7 @@ import type { OverridableComponentProps } from '../types';
 import type { RowProps } from '../Row';
 
 type ActionButtonProps = {
+    disabled?: boolean | undefined;
     title: string;
     onPress: () => void;
 };

package/src/Button/Button.tsx

@@ -27,21 +27,21 @@ const useStyles: UseStyles<ButtonStyles> = function (): ButtonStyles {
             width: '100%',
         },
         large: {
-            gap: theme.spacing(2),
+            gap: 8,
             minWidth: 104,
-            paddingHorizontal: theme.spacing(6),
-            paddingVertical: theme.spacing(3.5),
+            paddingHorizontal: 24,
+            paddingVertical: 14,
         },
         medium: {
-            gap: theme.spacing(1.5),
+            gap: 6,
             minWidth: 88,
-            paddingHorizontal: theme.spacing(6),
-            paddingVertical: theme.spacing(2.75),
+            paddingHorizontal: 16,
+            paddingVertical: 11,
         },
         small: {
             minWidth: 64,
-            paddingHorizontal: theme.spacing(6),
-            paddingVertical: theme.spacing(2),
+            paddingHorizontal: 10,
+            paddingVertical: 8,
         },
         loadingSpinner: {
             position: 'absolute',
@@ -134,6 +134,7 @@ export default function Button(props: ButtonProps) {
         styles.root,
         containerStyle,
         styles[size],
+        (variant === 'capsuleSolid' || variant === 'capsuleOutlined') && size === 'small' ? { paddingHorizontal: 12 } : undefined,
         fullWidth ? styles.fullWidth : undefined,
         disableMinWidth ? { minWidth: 0 } : undefined,
         disablePadding ? { paddingHorizontal: 0, paddingVertical: 0 } : undefined,

package/src/Dialog/Dialog.tsx

@@ -6,11 +6,12 @@ import Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';
 import ShadowView from '../ShadowView';
 import type DialogProps from './DialogProps';
 import { DialogProvider } from './DialogContext';
+import FullDialogCloseButton from './FullDialogCloseButton';
 import useDialogStyle from './useDialogStyle';
 
 const TOP_ELEMENT_OFFSET = 20;
 
-export default function Dialog(props: DialogProps) {
+const Dialog = (props: DialogProps) => {
     const {
         animationType = ANIMATION_TYPE.SLIDE,
         children,
@@ -143,3 +144,7 @@ export default function Dialog(props: DialogProps) {
         </Modal>
     );
 };
+
+Dialog.FullDialogCloseButton = FullDialogCloseButton;
+
+export default Dialog;

package/src/Dialog/FullDialogCloseButton.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import type { IconButtonProps } from '../IconButton';
+import { css, useTheme } from '../styles';
+import type { OverridableComponentProps } from '../types';
+import IconButton from '../IconButton';
+import { Close } from '../internal';
+
+type TabsStyles = NamedStylesStringUnion<'root' | 'button'>;
+
+const useStyles: UseStyles<TabsStyles> = function (): TabsStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            paddingBottom: 40,
+            paddingTop: 16,
+        },
+        button: {
+            alignSelf: 'center',
+            backgroundColor: theme.palette.fill.baseAlt,
+            borderRadius: theme.shape.radius.full,
+            height: 48,
+            width: 48,
+        },
+    };
+};
+
+interface FullDialogCloseButtonProps extends OverridableComponentProps<ViewProps, {
+    onPress: IconButtonProps['onPress'];
+}> {}
+
+export default function FullDialogCloseButton(props: FullDialogCloseButtonProps) {
+    const {
+        onPress,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <View
+            style={rootStyle}
+            {...otherProps}
+        >
+            <IconButton
+                iconSize={'large'}
+                onPress={onPress}
+                style={styles.button}
+            >
+                <Close/>
+            </IconButton>
+        </View>
+    );
+}

package/src/Dialog/useDialogStyle.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { FountainUiStyle, NamedStylesStringUnion } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
 import type { DialogSize } from './DialogProps';
@@ -21,6 +22,11 @@ export default function useDialogStyle(size: DialogSize): DialogStyles {
         width: windowWidth,
     } = useWindowDimensions();
 
+    const {
+        bottom: bottomSafeAreaInset,
+        top: topSafeAreaInset,
+    } = useSafeAreaInsets();
+
     return useMemo(() => {
         const sizeStyleMap: Record<DialogSize, FountainUiStyle> = {
             small: {
@@ -34,7 +40,10 @@ export default function useDialogStyle(size: DialogSize): DialogStyles {
                 minHeight: 360,
                 width: 512,
             },
-            full: {},
+            full: {
+                paddingBottom: bottomSafeAreaInset,
+                paddingTop: topSafeAreaInset,
+            },
         };
 
         const containerPaddingVertical = 24;
@@ -62,6 +71,7 @@ export default function useDialogStyle(size: DialogSize): DialogStyles {
                 backgroundColor: theme.palette.surface.base,
                 height: '100%',
                 width: '100%',
+                ...sizeStyleMap[size],
             } : {
                 backgroundColor: theme.palette.surface.base,
                 borderRadius: theme.shape.radius.xl,
@@ -80,5 +90,5 @@ export default function useDialogStyle(size: DialogSize): DialogStyles {
                 width: '100%',
             },
         };
-    }, [theme, windowHeight, windowWidth, size]);
+    }, [theme, windowHeight, windowWidth, size, bottomSafeAreaInset, topSafeAreaInset]);
 }

package/src/ImageCore/ImageCoreNative.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext } from 'react';
 import { Animated } from 'react-native';
-import FastImage from 'react-native-fast-image';
+import FastImage from '@d11/react-native-fast-image';
 import { useAnimatedValue } from '../hooks';
 import { isNotAndroid12 } from '../utils';
 import type ImageCoreProps from './ImageCoreProps';