@fountain-ui/core 3.0.0-alpha.10 → 3.0.0-alpha.11

package/src/Chip/useChipStyle.ts

@@ -2,13 +2,14 @@ import { useMemo } from 'react';
 import type { TextStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
-import type { ChipSize, ChipStartElementVariant } from './ChipProps';
+import type { ChipColor, ChipSize, ChipStartElementVariant } from './ChipProps';
 
 interface ChipStyle {
     container: FountainUiStyle;
-    endElement?: FountainUiStyle;
+    closeButton?: FountainUiStyle;
     label: TextStyle;
     startElement?: FountainUiStyle;
+    startElementContainer?: FountainUiStyle;
 }
 
 type VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;
@@ -17,7 +18,8 @@ type VariantStyleMap = Record<ChipStartElementVariant, Partial<ChipStyle>>;
 export default function useChipStyle(
     size: ChipSize,
     startElementVariant: ChipStartElementVariant,
-    isEndElement: boolean,
+    color: ChipColor,
+    selected: boolean,
 ): ChipStyle {
     const theme = useTheme();
 
@@ -25,22 +27,22 @@ export default function useChipStyle(
         const fontStyleMap: Record<ChipSize, TextStyle> = {
             small: createFontStyle(theme, {
                 selector: (typography) => typography.caption1.medium,
-                color: theme.palette.text.strong,
+                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,
             }),
             large: createFontStyle(theme, {
                 selector: (typography) => typography.body2.medium,
-                color: theme.palette.text.strong,
+                color: selected ? theme.palette.text.strongInverse : theme.palette.text.strong,
             }),
         };
 
-        const endElementStyleMap: Record<ChipSize, FountainUiStyle> = {
+        const closeButtonStyleMap: Record<ChipSize, FountainUiStyle> = {
             small: {
                 height: 14,
                 marginLeft: theme.spacing(2),
                 width: 8.17,
             },
             large: {
-                height: 16,
+                height: 17,
                 marginLeft: theme.spacing(2.5),
                 width: 9,
             },
@@ -48,7 +50,10 @@ export default function useChipStyle(
 
         const baseContainerStyle: FountainUiStyle = {
             alignItems: 'center',
-            backgroundColor: theme.palette.fill.weaker,
+            backgroundColor: selected ? theme.palette.fill.base
+                : color === 'white'
+                    ? theme.palette.surface.base
+                    : theme.palette.fill.weaker,
             borderRadius: theme.shape.radius.full,
             flexDirection: 'row',
             overflow: 'hidden',
@@ -65,9 +70,11 @@ export default function useChipStyle(
                 },
                 startElement: {
                     borderRadius: theme.shape.radius.full,
-                    height: isLarge ? 24 : 22,
+                    height: isLarge ? 26 : 23,
+                    width: isLarge ? 26 : 23,
+                },
+                startElementContainer: {
                     marginRight: theme.spacing(isLarge ? 1.5 : 1.25),
-                    width: isLarge ? 24 : 22,
                 },
             },
             icon: {
@@ -77,11 +84,18 @@ export default function useChipStyle(
                     paddingVertical: theme.spacing(isLarge ? 1.5 : 1.25),
                 },
                 startElement: {
+                    color: selected
+                        ? theme.palette.icon.strongInverse
+                        : theme.palette.icon.strong,
+                    height: isLarge ? 17 : 16,
+                    width: isLarge ? 17 : 16,
+                },
+                startElementContainer: {
                     alignItems: 'center',
-                    height: isLarge ? 22 : 20,
+                    height: isLarge ? 24 : 21,
                     justifyContent: 'center',
                     marginRight: theme.spacing(isLarge ? 1 : 0.75),
-                    width: isLarge ? 22 : 20,
+                    width: isLarge ? 24 : 21,
                 },
             },
             image: {
@@ -91,9 +105,11 @@ export default function useChipStyle(
                 },
                 startElement: {
                     borderRadius: theme.shape.radius.full,
-                    height: isLarge ? 34 : 30,
+                    height: isLarge ? 36 : 31,
+                    width: isLarge ? 48 : 40,
+                },
+                startElementContainer: {
                     marginRight: theme.spacing(1.5),
-                    width: isLarge ? 45 : 40,
                 },
             },
             default: {
@@ -109,11 +125,12 @@ export default function useChipStyle(
             container: {
                 ...baseContainerStyle,
                 ...variantStyleMap[startElementVariant]?.container,
-                ...(isEndElement ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),
+                ...(selected ? { paddingRight: theme.spacing(isLarge ? 2.5 : 2.25) } : {}),
             },
-            endElement: endElementStyleMap[size],
+            closeButton: closeButtonStyleMap[size],
             label: fontStyleMap[size],
             startElement: variantStyleMap[startElementVariant]?.startElement,
+            startElementContainer: variantStyleMap[startElementVariant]?.startElementContainer,
         };
-    }, [theme, size, startElementVariant]);
+    }, [theme, size, startElementVariant, color, selected]);
 }

package/src/Dialog/Dialog.tsx

@@ -14,7 +14,6 @@ export default function Dialog(props: DialogProps) {
     const {
         animationType = ANIMATION_TYPE.SLIDE,
         children,
-        fullScreen = false,
         hideBackdrop,
         onClose,
         style: styleProp,
@@ -24,7 +23,7 @@ export default function Dialog(props: DialogProps) {
         ...otherProps
     } = props;
 
-    const styles = useDialogStyle(size, fullScreen);
+    const styles = useDialogStyle(size);
 
     const { height: screenHeight } = useWindowDimensions();
 
@@ -51,7 +50,7 @@ export default function Dialog(props: DialogProps) {
                 toValue: 0,
                 type: ANIMATION_TYPE.FADE,
             }];
-        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+        } else if (animationType === ANIMATION_TYPE.SLIDE) {
             return [
                 {
                     toValue: screenHeight,
@@ -70,7 +69,7 @@ export default function Dialog(props: DialogProps) {
             toValue: screenHeight,
             type: ANIMATION_TYPE.SLIDE,
         }];
-    }, [animationType, fullScreen, screenHeight]);
+    }, [animationType, screenHeight]);
 
     const openAnimation = useMemo<AnimationUnit[]>(() => {
         if (animationType === ANIMATION_TYPE.FADE) {
@@ -78,7 +77,7 @@ export default function Dialog(props: DialogProps) {
                 toValue: 1,
                 type: ANIMATION_TYPE.FADE,
             }];
-        } else if (animationType === ANIMATION_TYPE.SLIDE && !fullScreen) {
+        } else if (animationType === ANIMATION_TYPE.SLIDE) {
             return [
                 {
                     toValue: 0,
@@ -97,9 +96,9 @@ export default function Dialog(props: DialogProps) {
             toValue: 0,
             type: ANIMATION_TYPE.SLIDE,
         }];
-    }, [animationType, fullScreen]);
+    }, [animationType]);
 
-    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE && fullScreen ? 1 : undefined;
+    const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;
 
     const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;
 
@@ -124,7 +123,7 @@ export default function Dialog(props: DialogProps) {
         >
             <DialogProvider value={{ size }}>
                 {topElement ? (
-                    <Column style={fullScreen ? undefined : styles.topElementContainer}>
+                    <Column style={styles.topElementContainer}>
                         <Column
                             style={styles.topElementContent}
                             onLayout={handleTopElementLayout}

package/src/Dialog/DialogProps.ts

@@ -3,7 +3,7 @@ import type { ModalProps } from '../Modal';
 import type { OverridableComponentProps } from '../types';
 import { ANIMATION_TYPE } from '../Modal';
 
-export const dialogSizes = ['small', 'medium', 'large'] as const;
+export const dialogSizes = ['small', 'medium', 'large', 'full'] as const;
 export type DialogSize = typeof dialogSizes[number];
 
 export default interface DialogProps extends OverridableComponentProps<ModalProps, {
@@ -18,12 +18,6 @@ export default interface DialogProps extends OverridableComponentProps<ModalProp
      */
     children?: React.ReactNode;
 
-    /**
-     * If `true`, the dialog is full-screen.
-     * @default false
-     */
-    fullScreen?: boolean;
-
     /**
      * Determines the minWidth of the Dialog.
      * @default 'medium'

package/src/Dialog/useDialogSectionStyle.ts

@@ -15,15 +15,15 @@ export default function useDialogSectionStyle() {
     return useMemo<FountainUiStyle>(() => {
         const sizePaddingHorizontalMap: Record<DialogSize, FountainUiStyle> = {
             small: {
-                paddingHorizontal: theme.spacing(6),
+                paddingHorizontal: 24,
             },
             medium: {
-                // TODO: need to refactor breakpoints.
-                paddingHorizontal: theme.spacing(windowWidth >= 448 ? 8 : 6),
+                paddingHorizontal: windowWidth >= 448 ? 32 : 24,
             },
             large: {
-                paddingHorizontal: theme.spacing(8),
+                paddingHorizontal: 32,
             },
+            full: {},
         };
 
         return sizePaddingHorizontalMap[size];

package/src/Dialog/useDialogStyle.ts

@@ -13,7 +13,7 @@ type DialogStyleKeys =
 
 type DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;
 
-export default function useDialogStyle(size: DialogSize, fullScreen: boolean): DialogStyles {
+export default function useDialogStyle(size: DialogSize): DialogStyles {
     const theme = useTheme();
 
     const {
@@ -34,29 +34,31 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
                 minHeight: 360,
                 width: 512,
             },
+            full: {},
         };
 
-        const containerPaddingVertical = theme.spacing(6);
+        const containerPaddingVertical = 24;
         const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;
         const dialogMaxWidth = sizeStyleMap[size]?.maxWidth;
 
+        const isFullScreen = size === 'full';
+
         return {
             root: {
                 alignItems: 'center',
                 justifyContent: 'center',
                 zIndex: theme.zIndex.dialog,
             },
-            container: fullScreen ? {
+            container: isFullScreen ? {
                 height: '100%',
                 width: '100%',
             } : {
                 alignItems: 'center',
-                // TODO: need to refactor breakpoints.
-                paddingHorizontal: theme.spacing(windowWidth > 320 ? 6 : 4),
+                paddingHorizontal: windowWidth > theme.breakpoints.values.xs ? 24 : 16,
                 paddingVertical: containerPaddingVertical,
                 width: '100%',
             },
-            paper: fullScreen ? {
+            paper: isFullScreen ? {
                 backgroundColor: theme.palette.surface.base,
                 height: '100%',
                 width: '100%',
@@ -78,5 +80,5 @@ export default function useDialogStyle(size: DialogSize, fullScreen: boolean): D
                 width: '100%',
             },
         };
-    }, [theme, windowHeight, windowWidth, size, fullScreen]);
+    }, [theme, windowHeight, windowWidth, size]);
 }

package/src/DialogTitle/BackButton.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import type { IconButtonProps } from '../IconButton';
+import IconButton from '../IconButton';
+import { ChevronLeft } from '../internal';
+import { css } from '@fountain-ui/styles';
+
+const styles = StyleSheet.create({
+    root: {
+        height: 40,
+        left: 20,
+        paddingLeft: 5,
+        paddingRight: 11,
+        paddingVertical: 8,
+        position: 'absolute',
+        width: 40,
+    },
+});
+
+interface BackButtonProps extends Omit<IconButtonProps, 'children'> {}
+
+export default function BackButton(props: BackButtonProps) {
+    const {
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <IconButton
+            style={rootStyle}
+            {...otherProps}
+        >
+            <ChevronLeft
+                color={'strong'}
+                size={'large'}
+            />
+        </IconButton>
+    );
+}

package/src/DialogTitle/CloseButton.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import type { IconButtonProps } from '../IconButton';
+import IconButton from '../IconButton';
+import { Close } from '../internal';
+import { css } from '@fountain-ui/styles';
+
+const styles = StyleSheet.create({
+    root: {
+        height: 40,
+        left: 20,
+        padding: 8,
+        position: 'absolute',
+        width: 40,
+    },
+});
+
+interface CloseButtonProps extends Omit<IconButtonProps, 'children'> {}
+
+export default function CloseButton(props: CloseButtonProps) {
+    const {
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <IconButton
+            style={rootStyle}
+            {...otherProps}
+        >
+            <Close
+                color={'strong'}
+                size={'large'}
+            />
+        </IconButton>
+    );
+}

package/src/DialogTitle/DialogTitle.tsx

@@ -3,6 +3,8 @@ import { Text, View } from 'react-native';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useDialogSectionStyle } from '../Dialog';
 import { createFontStyle, css, useTheme } from '../styles';
+import BackButton from './BackButton';
+import CloseButton from './CloseButton';
 import type DialogTitleProps from './DialogTitleProps';
 
 type DialogTitleStyles = NamedStylesStringUnion<'root' | 'title'>;
@@ -20,7 +22,7 @@ const useStyles: UseStyles<DialogTitleStyles> = function (): DialogTitleStyles {
     };
 };
 
-export default function DialogTitle(props: DialogTitleProps) {
+const DialogTitle = (props: DialogTitleProps) => {
     const {
         children,
         style: styleProp,
@@ -62,3 +64,9 @@ export default function DialogTitle(props: DialogTitleProps) {
         </View>
     );
 };
+
+DialogTitle.BackButton = BackButton;
+
+DialogTitle.CloseButton = CloseButton;
+
+export default DialogTitle;

package/src/Divider/Divider.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import type { Theme } from '@fountain-ui/styles';
+import { commonColors } from '@fountain-ui/styles';
 import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
 import { ExtendedStyle } from '../types';
 import type DividerProps from './DividerProps';
@@ -29,6 +30,10 @@ function selectBorderColor(theme: Theme, variant: DividerVariant, vertical: bool
             return vertical ? theme.palette.border.weaker : theme.palette.border.weak;
         case 'strong':
             return vertical ? theme.palette.border.weak : theme.palette.border.base;
+        case 'strongStatic':
+            return commonColors.opacity.white['13'];
+        case 'baseStatic':
+            return commonColors.opacity.white['10'];
     }
 }
 

package/src/Divider/DividerProps.ts

@@ -5,7 +5,7 @@ import type { OverridableComponentProps } from '../types';
 export const dividerElementAligns = ['start', 'center', 'end'] as const;
 export type DividerElementAlign = typeof dividerElementAligns[number];
 
-export const dividerVariants = ['base', 'strong'] as const;
+export const dividerVariants = ['base', 'strong', 'baseStatic', 'strongStatic'] as const;
 export type DividerVariant = typeof dividerVariants[number];
 
 export default interface DividerProps extends OverridableComponentProps<ViewProps, {

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/Tabs/useTabsStyle.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import type { FountainUiStyle } from '@fountain-ui/styles';
+import { useBreakpointUp } from '../hooks';
 import { useTheme } from '../styles';
 import type { TabVariant } from '../Tab';
 
@@ -10,13 +11,15 @@ interface TabsStyle {
 export default function useTabsStyle(variant: TabVariant) {
     const theme = useTheme();
 
+    const isDesktop = useBreakpointUp('md', true, false);
+
     return useMemo<TabsStyle>(() => {
         switch (variant) {
             case 'circular':
                 return {
                     container: {
-                        paddingBottom: theme.spacing(2),
-                        paddingHorizontal: theme.spacing(3),
+                        paddingBottom: 8,
+                        paddingHorizontal: isDesktop ? 20 : 12,
                     },
                 };
             case 'bottom-navigation':
@@ -27,9 +30,9 @@ export default function useTabsStyle(variant: TabVariant) {
             default:
                 return {
                     container: {
-                        paddingHorizontal: theme.spacing(1.5),
+                        paddingHorizontal: isDesktop ? 14 : 6,
                     },
                 };
         }
-    }, [theme, variant]);
+    }, [theme, variant, isDesktop]);
 }

package/src/Toolbar/BackButton/BackButton.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import IconButton from '../../IconButton';
+import { ChevronLeft } from '../../internal';
+import type BackButtonProps from './BackButtonProps';
+import { css } from '@fountain-ui/styles';
+
+const styles = StyleSheet.create({
+    root: {
+        height: 40,
+        left: 4,
+        paddingLeft: 5,
+        paddingRight: 11,
+        paddingVertical: 8,
+        position: 'absolute',
+        width: 40,
+    },
+});
+
+export default function BackButton(props: BackButtonProps) {
+    const {
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <IconButton
+            style={rootStyle}
+            {...otherProps}
+        >
+            <ChevronLeft
+                color={'strong'}
+                size={'large'}
+            />
+        </IconButton>
+    );
+}