@fountain-ui/core 3.0.0-alpha.5 → 3.0.0-alpha.50

package/src/Image/ImageProps.ts

@@ -28,6 +28,13 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
      */
     disableLongClick?: boolean,
 
+    /**
+     * If true, disables the fade-in opacity animation on image load.
+     * Only affects native platforms.
+     * @default false
+     */
+    disableFadeIn?: boolean;
+
     /**
      * If `true`, the image outline is not rendered.
      * @default false

package/src/Image/OverlayCloseButton/OverlayCloseButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { commonColors } from '@fountain-ui/styles';
+import IconButton from '../../IconButton';
+import { CloseCircleFillPierced } from '../../internal';
+import { css, StyleSheet } from '../../styles';
+import type OverlayCloseButtonProps from './OverlayCloseButtonProps';
+
+const styles = StyleSheet.create({
+    root: {
+        height: 40,
+        left: 8,
+        position: 'absolute',
+        top: 8,
+        width: 40,
+    },
+});
+
+export default function OverlayCloseButton(props: OverlayCloseButtonProps) {
+    const {
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <IconButton
+            style={rootStyle}
+            {...otherProps}
+        >
+            <CloseCircleFillPierced
+                fill={commonColors.static.baseOpacityInverse}
+                height={21}
+                width={21}
+            />
+        </IconButton>
+    );
+}

package/src/Image/OverlayCloseButton/OverlayCloseButtonProps.ts

@@ -0,0 +1,3 @@
+import type { IconButtonProps } from '../../IconButton';
+
+export default interface OverlayCloseButtonProps extends Omit<IconButtonProps, 'children'> {}

package/src/Image/OverlayCloseButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './OverlayCloseButton';
+export type { default as OverlayCloseButtonProps } from './OverlayCloseButtonProps';

package/src/Image/preload.native.ts

@@ -0,0 +1,6 @@
+import FastImage from '@d11/react-native-fast-image';
+import type { ImageSource } from '../ImageCore';
+
+export default function preload(sources: ImageSource[]) {
+    FastImage.preload(sources.map(({ uri }) => ({ uri })));
+}

package/src/Image/preload.ts

@@ -0,0 +1,5 @@
+import type { ImageSource } from '../ImageCore';
+
+export default function preload(_sources: ImageSource[]) {
+    // No-op on web
+}

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 { Animated, DimensionValue } from 'react-native';
+import FastImage from '@d11/react-native-fast-image';
 import { useAnimatedValue } from '../hooks';
 import { isNotAndroid12 } from '../utils';
 import type ImageCoreProps from './ImageCoreProps';
@@ -17,6 +17,7 @@ const ANIMATION_DURATION = 200;
 export default function ImageCore(props: ImageCoreProps) {
     const {
         cache,
+        disableFadeIn,
         height,
         onError,
         onLoad,
@@ -25,19 +26,21 @@ export default function ImageCore(props: ImageCoreProps) {
         width,
     } = props;
 
-    const opacity = useAnimatedValue(INITIAL_OPACITY);
+    const opacity = useAnimatedValue(disableFadeIn ? LOADED_OPACITY : INITIAL_OPACITY);
 
     const acceptHeader = useContext(ImageFileExtensionContext);
 
     const handleLoad = useCallback(() => {
-        Animated.timing(opacity, {
-            toValue: LOADED_OPACITY,
-            duration: ANIMATION_DURATION,
-            useNativeDriver: isNotAndroid12,
-        }).start();
+        if (!disableFadeIn) {
+            Animated.timing(opacity, {
+                toValue: LOADED_OPACITY,
+                duration: ANIMATION_DURATION,
+                useNativeDriver: isNotAndroid12,
+            }).start();
+        }
 
         onLoad?.();
-    }, [onLoad]);
+    }, [disableFadeIn, onLoad]);
 
     return (
         <AnimatedFastImage
@@ -53,7 +56,7 @@ export default function ImageCore(props: ImageCoreProps) {
             }}
             style={[
                 { opacity },
-                { width, height },
+                { width: width as DimensionValue, height: height as DimensionValue },
             ]}
         />
     );

package/src/ImageCore/ImageCoreProps.ts

@@ -12,6 +12,7 @@ export default interface ImageCoreProps extends Readonly<{
     alt?: string;
     cache?: CacheControl;
     disableDrag?: boolean,
+    disableFadeIn?: boolean,
     disableLongClick?: boolean,
     height?: number | string;
     loading: Loading;

package/src/ListItem/ListItem.tsx

@@ -8,28 +8,22 @@ import Row from '../Row';
 import { createFontStyle, css, useTheme } from '../styles';
 import type ListItemProps from './ListItemProps';
 
-type ListItemStyles = NamedStylesStringUnion<'content' | 'description' | 'divider' | 'dividerWrapper'>;
+type ListItemStyles = NamedStylesStringUnion<'content' | 'description'>;
 
 const useStyles: UseStyles<ListItemStyles> = function (): ListItemStyles {
     const theme = useTheme();
 
     return {
         content: {
+            borderBottomColor: theme.palette.border.weak,
+            borderBottomWidth: 0.5,
             gap: theme.spacing(2),
             paddingVertical: theme.spacing(3.75),
-            paddingHorizontal: theme.spacing(4),
             width: '100%',
         },
         description: {
             paddingRight: theme.spacing(20),
         },
-        divider: {
-            borderBottomColor: theme.palette.border.weak,
-            borderBottomWidth: 0.5,
-        },
-        dividerWrapper: {
-            paddingHorizontal: theme.spacing(4),
-        },
     };
 };
 
@@ -61,8 +55,8 @@ export default function ListItem(props: ListItemProps) {
 
     const descriptionFontStyle = createFontStyle(theme, {
         selector: (_) => typographyOf({
-            fontSize: 13,
-            lineHeight: 18.2,
+            fontSize: 14,
+            lineHeight: 19.6,
             fontFamily: 'PretendardStd-Regular',
             letterSpacing: 0,
         }),
@@ -102,10 +96,6 @@ export default function ListItem(props: ListItemProps) {
                     {content}
                 </View>
             )}
-
-            <View style={styles.dividerWrapper}>
-                <View style={styles.divider}/>
-            </View>
         </View>
     );
 };

package/src/ListItemText/ListItemText.tsx

@@ -30,8 +30,8 @@ export default function ListItemText(props: ListItemTextProps) {
 
     const fontStyle = createFontStyle(theme, {
         selector: (_) => typographyOf({
-            fontSize: 15,
-            lineHeight: 18,
+            fontSize: 16,
+            lineHeight: 19.2,
             fontFamily: 'PretendardStd-Medium',
             letterSpacing: 0,
         }),

package/src/ListSubheader/ListSubheader.tsx

@@ -27,7 +27,7 @@ export default function ListSubheader(props: ListSubheaderProps) {
                 <Typography
                     children={children}
                     color={'strong'}
-                    variant={'caption3'}
+                    variant={'caption2'}
                 />
             )}
         </Row>

package/src/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { KeyboardAvoidingView, Platform, View } from 'react-native';
 import { css, StyleSheet } from '../styles';
 import { useElevationStyle } from '../hooks';
 import type ModalProps from './ModalProps';
@@ -23,7 +23,8 @@ export const createModalCloseEvent = (reason: ModalCloseReasonType) => ({
 export default function Modal(props: ModalProps) {
     const {
         animationStyle,
-        backdropOpacity = 0.5,
+        avoidKeyboard = false,
+        backdropOpacity = 0.75,
         children,
         closeAnimation,
         disableAnimation = false,
@@ -76,8 +77,15 @@ export default function Modal(props: ModalProps) {
         }
     }
 
+    const Container = avoidKeyboard ? KeyboardAvoidingView : View;
+    const containerProps = avoidKeyboard ? {
+        behavior: Platform.OS === 'ios' ? 'padding' : undefined,
+    } : {};
+
     return (
-        <View
+        // @ts-expect-error
+        <Container
+            {...containerProps}
             style={css([
                 StyleSheet.absoluteFill,
                 elevationStyle,
@@ -108,6 +116,6 @@ export default function Modal(props: ModalProps) {
                     visible={visible}
                 />
             ) : children}
-        </View>
+        </Container>
     );
 };

package/src/Modal/ModalProps.ts

@@ -33,6 +33,15 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
      */
     children: React.ReactElement;
 
+    /**
+     * If `true`, the modal wraps its content in a `KeyboardAvoidingView` so
+     * that on iOS the visible area shrinks when the software keyboard appears.
+     * Intended for centered modals; leave `false` for bottom-anchored or
+     * full-screen overlays that manage their own keyboard handling.
+     * @default false
+     */
+    avoidKeyboard?: boolean;
+
     /**
      * If `true`, the animation is disabled.
      * @default false

package/src/Pagination/NumberPagination.tsx

@@ -45,7 +45,7 @@ export default function NumberPagination(props: NumberPaginationProps) {
     const typography = typographyOf({
         fontSize: 9.5,
         lineHeight: 11.4,
-        fontFamily: 'Pretendard-SemiBold',
+        fontFamily: 'PretendardStd-SemiBold',
         letterSpacing: -0.19,
     });
 
@@ -61,7 +61,12 @@ export default function NumberPagination(props: NumberPaginationProps) {
 
     return (
         <Row style={styles.root}>
-            <Text style={currentFontStyle}>
+            <Text
+                style={[
+                    currentFontStyle,
+                    { fontVariant: ['tabular-nums'] },
+                ]}
+            >
                 {currentPage + 1}
             </Text>
 

package/src/Pagination/Pagination.tsx

@@ -8,7 +8,7 @@ import IconButton from '../IconButton';
 import PaginationItem from '../PaginationItem';
 import NumberPagination from './NumberPagination';
 import type PaginationProps from './PaginationProps';
-import type { PaginationVariant } from './PaginationProps';
+import type { PaginationColor, PaginationVariant } from './PaginationProps';
 
 type PaginationStyleKeys =
     | 'root'
@@ -65,6 +65,7 @@ export default function Pagination(props: PaginationProps) {
     const {
         bundleSize = 1,
         children,
+        color = 'base' as PaginationColor,
         count,
         disabled = false,
         hideIndicator = false,
@@ -134,7 +135,7 @@ export default function Pagination(props: PaginationProps) {
                 currentPage={page}
                 maxPage={count}
             />
-        ) : times(i => renderItem({ index: i, disabled, selected: i === page }), count)
+        ) : times(i => renderItem({ color, index: i, disabled, selected: i === page }), count)
     ) : null;
 
     const containerProps = {

package/src/Pagination/PaginationProps.ts

@@ -2,10 +2,19 @@ import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 
+export const paginationColors = ['base', 'static'] as const;
+export type PaginationColor = typeof paginationColors[number];
+
 export const paginationVariants = ['dot', 'number'] as const;
 export type PaginationVariant = typeof paginationVariants[number];
 
 export interface PaginationRenderItemParams {
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
+
     /**
      * Index of the pagination item.
      */
@@ -34,6 +43,12 @@ export default interface PaginationProps extends OverridableComponentProps<ViewP
      */
     children?: React.ReactNode;
 
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
+
     /**
      * The total number of pages.
      */

package/src/Pagination/index.ts

@@ -1,3 +1,3 @@
 export { default } from './Pagination';
-export type { default as PaginationProps } from './PaginationProps';
-export { paginationVariants } from './PaginationProps';
+export type { default as PaginationProps, PaginationColor, PaginationVariant } from './PaginationProps';
+export { paginationColors, paginationVariants } from './PaginationProps';

package/src/PaginationItem/PaginationItem.tsx

@@ -1,47 +1,54 @@
 import React from 'react';
-import { View } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import { commonColors, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { PaginationColor } from '../Pagination';
 import { css, useTheme } from '../styles';
 import type PaginationItemProps from './PaginationItemProps';
 
-type PaginationItemStyles = NamedStylesStringUnion<'root' | 'selected' | 'unselected'>;
+const DEFAULT_SIZE = 6;
 
-const useStyles: UseStyles<PaginationItemStyles> = function (): PaginationItemStyles {
+const styles = StyleSheet.create({
+    root: {
+        width: DEFAULT_SIZE,
+        height: DEFAULT_SIZE,
+        borderRadius: DEFAULT_SIZE * 0.5,
+        marginHorizontal: 4,
+    },
+});
+
+function getBackgroundColor(color: PaginationColor, selected: boolean): ViewStyle['backgroundColor'] {
     const theme = useTheme();
 
-    const size = 6;
-
-    return {
-        root: {
-            width: size,
-            height: size,
-            borderRadius: size * 0.5,
-            marginHorizontal: theme.spacing(1),
-        },
-        selected: {
-            backgroundColor: theme.palette.fill.base,
-        },
-        unselected: {
-            backgroundColor: theme.palette.status.disabled,
-        },
-    };
-};
+    switch (color) {
+        case 'static':
+            return selected
+                ? commonColors.static.strongInverse
+                : commonColors.static.weakOpacityInverse;
+        case 'base':
+        default:
+            return selected
+                ? theme.palette.fill.base
+                : theme.palette.status.disabled;
+
+    }
+}
 
 function PaginationItem(props: PaginationItemProps) {
     const {
+        color = 'base' as PaginationColor,
         disabled,
-        selected,
+        selected = false,
         style,
         ...otherProps
     } = props;
 
-    const styles = useStyles();
+    const backgroundColor = getBackgroundColor(color, selected);
 
     return (
         <View
             style={css([
                 styles.root,
-                selected ? styles.selected : styles.unselected,
+                { backgroundColor },
                 style,
             ])}
             {...otherProps}

package/src/PaginationItem/PaginationItemProps.ts

@@ -1,7 +1,14 @@
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
+import { PaginationColor } from '../Pagination';
 
 export default interface PaginationItemProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * Set color of dot.
+     * @default 'base'
+     */
+    color?: PaginationColor;
+
     /**
      * If `true`, the pagination item is disabled.
      * @default false

package/src/Radio/Radio.tsx

@@ -2,12 +2,16 @@ import React, { useContext } from 'react';
 import { Text } from 'react-native';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
+import Column from '../Column';
 import { Check as CheckedIcon } from '../internal';
 import Row from '../Row';
 import { createFontStyle, css, useTheme } from '../styles';
 import { cloneElementSafely } from '../utils';
 import { RadioContext } from '../RadioGroup/RadioContextProvider';
 import type RadioProps from './RadioProps';
+import Typography from '../Typography';
+
+const DEFAULT_START_ICON_SIZE = 21;
 
 type RadioStyles = NamedStylesStringUnion<'root' | 'content'>;
 
@@ -17,12 +21,15 @@ const useStyles: UseStyles<RadioStyles> = function (): RadioStyles {
     return {
         root: {
             alignItems: 'center',
+            borderBottomColor: theme.palette.border.weak,
+            borderBottomWidth: 0.5,
             flexDirection: 'row',
-            gap: theme.spacing(8),
+            gap: 32,
             justifyContent: 'space-between',
+            paddingVertical: 14,
         },
         content: {
-            gap: theme.spacing(2),
+            gap: 8,
             minHeight: 20,
         },
     };
@@ -38,6 +45,7 @@ export default function Radio(props: RadioProps) {
         startIcon: startIconProp,
         style,
         value,
+        description,
         ...otherProps
     } = props;
 
@@ -54,16 +62,21 @@ export default function Radio(props: RadioProps) {
         }
     };
 
-    const isChecked = context?.value === value ?? checked;
+    const isChecked = context
+        ? context.value === value
+        : checked;
 
     const defaultCheckedIcon = (
         <CheckedIcon color={'accent'}/>
     );
 
     const checkedIcon = checkIconProp ?? defaultCheckedIcon;
-    const icon = isChecked ? checkedIcon : null;
 
-    const startIcon = cloneElementSafely(startIconProp, { color: 'strong' });
+    const startIcon = cloneElementSafely(startIconProp, {
+        color: 'strong',
+        height: DEFAULT_START_ICON_SIZE,
+        width: DEFAULT_START_ICON_SIZE,
+    });
 
     const rootStyle = css([
         styles.root,
@@ -82,19 +95,35 @@ export default function Radio(props: RadioProps) {
             style={rootStyle}
             {...otherProps}
         >
-            <Row
-                alignItems={'center'}
-                style={styles.content}
+            <Column
+                gap={2}
+                flexShrink={1}
             >
-                {startIcon}
-
-                <Text
-                    children={children}
-                    style={fontStyle}
-                />
-            </Row>
-
-            {icon}
+                <Row
+                    alignItems={'center'}
+                    style={styles.content}
+                >
+                    {startIcon}
+
+                    <Text
+                        children={children}
+                        style={fontStyle}
+                    />
+                </Row>
+
+                {description ? (
+                    <Typography
+                        variant={'body3'}
+                        color={'base'}
+                        weight={'regular'}
+                        children={description}
+                    />
+                ) : null}
+            </Column>
+
+            <Column style={{ opacity: Number(isChecked) }}>
+                {checkedIcon}
+            </Column>
         </ButtonBase>
     );
 };

package/src/Radio/RadioProps.ts

@@ -41,4 +41,10 @@ export default interface RadioProps extends OverridableComponentProps<BaseProps,
      * Value of the component.
      */
     value: string;
+
+
+    /**
+     * Helper text displayed below the children.
+     */
+    description?: string;
 }> {}

package/src/RadioGroup/RadioGroup.tsx

@@ -1,26 +1,8 @@
-import React, { Children } from 'react';
+import React from 'react';
 import { View } from 'react-native';
-import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { useTheme } from '../styles';
-import type { FalsyReactElement } from '../utils';
-import { cloneElementSafely } from '../utils';
 import RadioContextProvider from './RadioContextProvider';
 import type RadioGroupProps from './RadioGroupProps';
 
-type RadioItemStyles = NamedStylesStringUnion<'root'>;
-
-const useStyles: UseStyles<RadioItemStyles> = function (): RadioItemStyles {
-    const theme = useTheme();
-
-    return {
-        root: {
-            borderBottomColor: theme.palette.border.weak,
-            borderBottomWidth: 0.5,
-            paddingVertical: theme.spacing(3.5),
-        },
-    };
-};
-
 export default function RadioGroup(props: RadioGroupProps) {
     const {
         children,
@@ -29,18 +11,10 @@ export default function RadioGroup(props: RadioGroupProps) {
         ...otherProps
     } = props;
 
-    const styles = useStyles();
-
-    const radios = Children.map(children, (child) => (
-        <View style={styles.root}>
-            {cloneElementSafely(child as FalsyReactElement)}
-        </View>
-    ));
-
     return (
         <RadioContextProvider value={{ value, onChange }}>
             <View {...otherProps}>
-                {radios}
+                {children}
             </View>
         </RadioContextProvider>
     );

package/src/ShadowView/ShadowView.native.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import type { FountainUiStyle, ShadowVariant } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
 import type ShadowViewProps from './ShadowViewProps';
@@ -22,7 +22,7 @@ export default function ShadowView(props: ShadowViewProps) {
         maxHeight,
         maxWidth,
         width,
-    } = styleProp as FountainUiStyle;
+    } = StyleSheet.flatten(styleProp) as FountainUiStyle ?? {};
 
     return nativeShadows.reduce((accumulator, nativeShadow) => {
         return (

package/src/Slider/Slider.tsx

@@ -37,6 +37,7 @@ export default React.forwardRef<RNSlider, SliderProps>(function Slider(props, re
     const thumbTintColor = Platform.OS === 'android' ? theme.palette.primary.main : undefined;
 
     return (
+        // @ts-ignore - @react-native-community/slider has incorrect type definitions for JSX usage
         <RNSlider
             disabled={disabled}
             maximumValue={maximumValue}