@fountain-ui/core 2.0.0-beta.93 → 2.0.0-beta.95

package/src/Tooltip/Tooltip.tsx

@@ -2,28 +2,79 @@ import React, { useEffect, useState } from 'react';
 import { Platform, Text, View, ViewProps } from 'react-native';
 import type { WithTimingConfig } from 'react-native-reanimated';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
-import { rgb } from '@fountain-ui/utils';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
-import { Close as CloseIcon } from '../internal/icons';
 import type TooltipProps from './TooltipProps';
-import UpArrow from './UpArrow';
+import type { TooltipBeakLayout, TooltipPlacement, TooltipSize } from './TooltipProps';
+import Beak from './Beaks';
+
+const DEFAULT_BEAK_LAYOUT: TooltipBeakLayout = {
+    offset: 0,
+    placement: 'middle',
+};
 
-const DEFAULT_OPACITY = 0.8;
 const INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };
 
 const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
 
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+
+const getFlexDirection = (placement: TooltipPlacement): FlexDirection => {
+    switch (placement) {
+        case 'right':
+            return 'row-reverse';
+        case 'bottom':
+            return 'column-reverse';
+        case 'left':
+            return 'row';
+        case 'top':
+        default:
+            return 'column';
+    }
+};
+
+type TooltipStyles = NamedStylesStringUnion<'root' | 'content' | 'small' | 'large'>;
+
+const useStyles: UseStyles<TooltipStyles> = function (): TooltipStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            position: 'absolute',
+            zIndex: theme.zIndex.tooltip,
+        },
+        content: {
+            backgroundColor: theme.palette.fill.base,
+            paddingHorizontal: theme.spacing(2),
+            paddingVertical: theme.spacing(1.5),
+        },
+        small: {
+            borderRadius: theme.shape.radius.sm,
+            paddingHorizontal: theme.spacing(2),
+            paddingVertical: theme.spacing(1.5),
+        },
+        large: {
+            borderRadius: 5,
+            paddingBottom: theme.spacing(2.5),
+            paddingHorizontal: theme.spacing(4),
+            paddingTop: theme.spacing(2),
+        },
+    };
+};
+
 export default function Tooltip(props: TooltipProps) {
     const {
-        arrowLayout,
+        beakLayout = DEFAULT_BEAK_LAYOUT,
         children,
         initialLayout = INITIAL_LAYOUT,
         left,
         onClose,
-        placement = 'top',
+        placement = 'top' as TooltipPlacement,
         right,
         numberOfTitleLines = 1,
+        size = 'small' as TooltipSize,
         style,
         title,
         tooltipStyle,
@@ -31,8 +82,15 @@ export default function Tooltip(props: TooltipProps) {
         visible = false,
     } = props;
 
+    const {
+        offset: beakOffset,
+        placement: beakPlacement,
+    } = beakLayout;
+
     const theme = useTheme();
 
+    const styles = useStyles();
+
     const [layout, setLayout] = useState(initialLayout);
 
     const scale = useSharedValue(0);
@@ -41,92 +99,89 @@ export default function Tooltip(props: TooltipProps) {
         transform: [{ scale: scale.value }],
     }), []);
 
-    const [r, g, b] = rgb(theme.palette.primary.main);
+    const flexDirection = getFlexDirection(placement);
 
-    const totalVerticalOffset = -(layout.height + verticalOffset);
+    const isVerticalPlacement = placement === 'top' || placement === 'bottom';
+
+    const totalOffset = -((isVerticalPlacement ? layout.height : layout.width) + verticalOffset);
     const tooltipLayoutStyle: ViewProps['style'] = {
-        alignItems: arrowLayout?.placement === 'left'
+        alignItems: beakPlacement === 'start'
             ? 'flex-start'
-            : arrowLayout?.placement === 'right'
+            : beakPlacement === 'end'
                 ? 'flex-end'
                 : 'center',
-        bottom: placement === 'bottom' ? totalVerticalOffset : undefined,
+        flexDirection,
         left,
-        position: 'absolute',
         right,
-        top: placement === 'top' ? totalVerticalOffset : undefined,
-        zIndex: theme.zIndex.tooltip,
         height: visible ? undefined : 0,
         overflow: visible ? undefined : 'hidden',
         ...Platform.select({
-           web: {
-               display: visible ? 'flex' : 'none',
-           },
+            web: {
+                display: visible ? 'flex' : 'none',
+            },
             default: {},
         }),
+        [placement]: totalOffset,
     };
 
+    const contentStyle = css([
+        styles.content,
+        styles[size],
+        isVerticalPlacement
+            ? { width: '100%' }
+            : { flexGrow: 1, flexShrink: 1 },
+    ]);
+
     useEffect(() => {
         const nextScaleValue = visible ? 1 : 0;
 
         scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);
     }, [visible]);
 
-    const touchableStyle: ViewProps['style'] = {
-        alignItems: 'center',
-        backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,
-        borderRadius: theme.shape.roundness,
-        flexDirection: 'row',
-        padding: theme.spacing(2),
-        width: '100%',
-    };
-
     const fontStyle = createFontStyle(theme, {
-        selector: (typo) => typo.caption2,
-        color: theme.palette.primary.contrastTextColor,
+        selector: (typo) => size === 'large'
+            ? typographyOf({
+                fontSize: 13,
+                lineHeight: 19.5,
+                fontFamily: 'Pretendard-Regular',
+                letterSpacing: 0,
+            })
+            // TODO: change caption2.
+            : typo.caption3.regular,
+        color: theme.palette.text.strongInverse,
     });
 
     const textStyle = css([
         fontStyle,
-        {
-            marginRight: theme.spacing(2),
-            flexShrink: 1,
-        },
+        { flexShrink: 1 },
     ]);
 
-    const arrowStyle = css({
-        ...(arrowLayout && {
-            [arrowLayout.placement]: arrowLayout.offset,
-        }),
+    const beakStyle = css({
+        transform: [isVerticalPlacement ? { translateX: beakOffset } : { translateY: beakOffset }],
     });
 
     const buttonElem = (
         <ButtonBase
             pressEffect={'none'}
             onPress={onClose}
+            style={contentStyle}
         >
-            <View style={css(touchableStyle)}>
-                <Text
-                    children={title}
-                    // TODO: Should we provide text prop customization?
-                    numberOfLines={numberOfTitleLines}
-                    style={textStyle}
-                />
-                <CloseIcon
-                    fill={theme.palette.primary.contrastTextColor}
-                    width={20}
-                    height={20}
-                />
-            </View>
+            <Text
+                // TODO: Should we provide text prop customization?
+                numberOfLines={numberOfTitleLines}
+                style={textStyle}
+            >
+                {title}
+            </Text>
         </ButtonBase>
     );
 
-    const arrowElem = (
-        <View style={arrowStyle}>
-            <UpArrow
-                upsideDown={placement === 'top'}
-                fill={theme.palette.primary.main}
-                opacity={DEFAULT_OPACITY}
+    const beakElem = (
+        <View style={beakStyle}>
+            <Beak
+                fill={theme.palette.fill.base}
+                placement={placement}
+                size={size}
             />
         </View>
     );
@@ -144,22 +199,15 @@ export default function Tooltip(props: TooltipProps) {
                     setLayout(event.nativeEvent.layout);
                 }}
                 style={[
+                    styles.root,
                     animatedStyle,
                     tooltipLayoutStyle,
                     tooltipStyle,
                 ]}
             >
-                {placement === 'top' ? (
-                    <React.Fragment>
-                        {buttonElem}
-                        {arrowElem}
-                    </React.Fragment>
-                ) : (
-                    <React.Fragment>
-                        {arrowElem}
-                        {buttonElem}
-                    </React.Fragment>
-                )}
+                {buttonElem}
+
+                {beakElem}
             </Animated.View>
         </View>
     );

package/src/Tooltip/TooltipProps.ts

@@ -3,11 +3,26 @@ import type { TextProps, ViewProps } from 'react-native';
 import type { ComponentProps } from '../types';
 import type { ButtonProps } from '../Button';
 
-export type TooltipPlacement = 'top' | 'bottom';
+export const tooltipPlacements = ['top', 'bottom', 'left', 'right'] as const;
+export type TooltipPlacement = typeof tooltipPlacements[number];
 
-export type TooltipArrowPlacement = 'left' | 'right';
+export const tooltipSizes = ['small', 'large'] as const;
+export type TooltipSize = typeof tooltipSizes[number];
 
-export type TooltipInitialLayout = { height: number, width: number, x: number, y: number };
+export const tooltipBeakPlacements = ['start', 'middle', 'end'] as const;
+export type TooltipBeakPlacement = typeof tooltipBeakPlacements[number];
+
+export type TooltipBeakLayout = {
+    placement: TooltipBeakPlacement;
+    offset: number;
+};
+
+export type TooltipInitialLayout = {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+};
 
 export default interface TooltipProps extends ComponentProps<{
     /**
@@ -59,13 +74,10 @@ export default interface TooltipProps extends ComponentProps<{
     visible?: boolean;
 
     /**
-     * Tooltip arrow layout.
-     * If 'undefined', the arrow will be centered on tooltip.
+     * Tooltip beak layout.
+     * If 'undefined', the beak will be centered on tooltip.
      */
-    arrowLayout?: {
-        placement: TooltipArrowPlacement;
-        offset: number;
-    }
+    beakLayout?: TooltipBeakLayout;
 
     /**
      * number of tooltip's title lines
@@ -77,5 +89,11 @@ export default interface TooltipProps extends ComponentProps<{
      * position of tooltip before onLayout call
      * @default  { height: 0, width: 0 , x: 0, y: 0}
      */
-    initialLayout: TooltipInitialLayout;
+    initialLayout?: TooltipInitialLayout;
+
+    /**
+     * Determines the size of the tooltip.
+     * @default  'small'
+     */
+    size?: TooltipSize;
 }> {}

package/src/Tooltip/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Tooltip';
-export type { default as TooltipProps } from './TooltipProps';
+export { default } from './LegacyTooltip';
+export type { default as TooltipProps } from './LegacyTooltipProps';

package/src/hooks/useCollapsibleAppBar.ts

@@ -160,8 +160,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
                 const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;
 
                 const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);
-                const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);
-                const dy = safeOffsetY - safeLastOffsetY;
+                const dy = safeOffsetY - lastOffsetY.value;
 
                 const newTranslateY = supportsReverseScroll
                     ? dy === 0
@@ -169,7 +168,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
                         : dy > 0
                             ? maxTy
                             : 0
-                    : safeLastOffsetY === minOffsetY
+                    : lastOffsetY.value === minOffsetY
                         ? 0
                         : maxTy;
 

package/src/index.ts

@@ -77,6 +77,9 @@ export * from './DialogTitle';
 export { default as Divider } from './Divider';
 export * from './Divider';
 
+export { default as Empty } from './Empty';
+export * from './Empty';
+
 export { default as Fab } from './Fab';
 export * from './Fab';
 

package/src/internal/icons/CheckCircle.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <React.Fragment>
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M10.3136 5.18306C10.5621 5.42714 10.5621 5.82286 10.3136 6.06694L6.49543 9.81694C6.24692 10.061 5.84399 10.061 5.59548 9.81694L4.00457 8.25444C3.75605 8.01036 3.75605 7.61464 4.00457 7.37056C4.25308 7.12648 4.65601 7.12648 4.90452 7.37056L6.04545 8.49112L9.41366 5.18306C9.66217 4.93898 10.0651 4.93898 10.3136 5.18306Z"
+        />
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7 1.875C3.83691 1.875 1.27273 4.3934 1.27273 7.5C1.27273 10.6066 3.83691 13.125 7 13.125C10.1631 13.125 12.7273 10.6066 12.7273 7.5C12.7273 4.3934 10.1631 1.875 7 1.875ZM0 7.5C0 3.70304 3.13401 0.625 7 0.625C10.866 0.625 14 3.70304 14 7.5C14 11.297 10.866 14.375 7 14.375C3.13401 14.375 0 11.297 0 7.5Z"
+        />
+    </React.Fragment>,
+    'CheckCircle',
+    '0 0 14 15',
+);

package/src/internal/icons/Clear.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <React.Fragment>
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4.68306 5.68306C4.92714 5.43898 5.32286 5.43898 5.56694 5.68306L7 7.11612L8.43306 5.68306C8.67714 5.43898 9.07286 5.43898 9.31694 5.68306C9.56102 5.92714 9.56102 6.32286 9.31694 6.56694L7.88388 8L9.31694 9.43306C9.56102 9.67714 9.56102 10.0729 9.31694 10.3169C9.07286 10.561 8.67714 10.561 8.43306 10.3169L7 8.88388L5.56694 10.3169C5.32286 10.561 4.92714 10.561 4.68306 10.3169C4.43898 10.0729 4.43898 9.67714 4.68306 9.43306L6.11612 8L4.68306 6.56694C4.43898 6.32286 4.43898 5.92714 4.68306 5.68306Z"
+        />
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7 2.375C3.8934 2.375 1.375 4.8934 1.375 8C1.375 11.1066 3.8934 13.625 7 13.625C10.1066 13.625 12.625 11.1066 12.625 8C12.625 4.8934 10.1066 2.375 7 2.375ZM0.125 8C0.125 4.20304 3.20304 1.125 7 1.125C10.797 1.125 13.875 4.20304 13.875 8C13.875 11.797 10.797 14.875 7 14.875C3.20304 14.875 0.125 11.797 0.125 8Z"
+        />
+    </React.Fragment>,
+    'Clear',
+    '0 0 14 16',
+);

package/src/internal/icons/EyeOff.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <React.Fragment>
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.0001 5.50008C9.32352 5.50008 7.75128 5.93509 6.38672 6.69786C5.90464 6.96734 5.29539 6.79499 5.02591 6.31291C4.75643 5.83083 4.92878 5.22157 5.41086 4.95209C7.06584 4.02699 8.97302 3.50008 11.0001 3.50008C16.0752 3.50008 20.377 6.79591 21.8964 11.3624C22.0349 11.7756 22.0342 12.2215 21.8961 12.6337C21.0263 15.2551 19.2405 17.4554 16.9195 18.8562C16.4467 19.1416 15.832 18.9897 15.5466 18.5168C15.2612 18.044 15.4132 17.4293 15.886 17.1439C17.8054 15.9855 19.281 14.1656 19.9984 12.0023L19.9997 11.9986L19.9987 11.9938C18.7425 8.21826 15.1866 5.50008 11.0001 5.50008ZM3.99 7.12944C4.39533 7.50457 4.41982 8.13726 4.04469 8.5426C3.13527 9.52525 1.5 11.5 2.00127 11.9938M3.99 7.12944C3.58466 6.75431 2.95197 6.7788 2.57684 7.18414L3.99 7.12944ZM2.57684 7.18414C1.47745 8.37206 0.625032 9.79392 0.102675 11.3678L2.57684 7.18414ZM0.102675 11.3678C-0.0341243 11.7798 -0.0341912 12.2254 0.102675 12.6374C1.62212 17.2039 5.92516 20.5001 11.0001 20.5001C11.731 20.5001 12.4469 20.4316 13.1413 20.3003C13.684 20.1978 14.0408 19.6747 13.9383 19.132C13.8357 18.5893 13.3126 18.2326 12.77 18.3351C12.1973 18.4433 11.6058 18.5001 11.0001 18.5001C6.81374 18.5001 3.25761 15.769 2.00127 11.9938M11 10.0001C10.5632 10.0001 10.1409 10.1437 9.79621 10.405C9.35614 10.7387 8.72888 10.6525 8.39518 10.2124C8.06148 9.77237 8.14771 9.14511 8.58778 8.81141C9.27794 8.28807 10.124 8.00008 11 8.00008C12.0601 8.00008 13.0765 8.42189 13.8257 9.17221C14.5748 9.92247 14.9953 10.9397 14.9953 12.0001C14.9953 13.0604 14.5748 14.0777 13.8257 14.828C13.4354 15.2188 12.8023 15.2193 12.4115 14.8291C12.0206 14.4388 12.0201 13.8057 12.4103 13.4149C12.7847 13.0399 12.9953 12.531 12.9953 12.0001C12.9953 11.4691 12.7847 10.9603 12.4103 10.5853C12.036 10.2104 11.5287 10.0001 11 10.0001Z"
+        />
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.99001 7.12001C3.50001 7.00002 3.50014 6.99992 2.57684 7.18414C1.47785 8.37165 0.626103 9.79192 0.103562 11.3624C-0.0349384 11.7756 -0.0342041 12.2215 0.103869 12.6337C0.973681 15.2551 2.7595 17.4554 5.08051 18.8562C5.55334 19.1416 6.168 18.9897 6.45339 18.5168C6.73877 18.044 6.58682 17.4293 6.11398 17.1439C4.19462 15.9855 1.5 13 2.00127 11.9938C2.55001 10.5 3.11383 9.5613 4 8.59063C4.22267 7.18422 4.00001 7.49999 3.99001 7.12001Z"
+        />
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2.75721 2.23398C3.18029 1.87898 3.81104 1.93416 4.16604 2.35724L19.2716 20.3593C19.6266 20.7824 19.5714 21.4131 19.1483 21.7681C18.7252 22.1231 18.0945 22.0679 17.7395 21.6449L2.63396 3.64281C2.27895 3.21974 2.33414 2.58898 2.75721 2.23398Z"
+        />
+    </React.Fragment>,
+    'EyeOff',
+    '0 0 22 24',
+);

package/src/internal/icons/EyeOn.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <React.Fragment>
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.0001 3.5C5.92306 3.5 1.61902 6.79886 0.102672 11.3677C-0.0341271 11.7797 -0.0340452 12.2257 0.102821 12.6377C1.62227 17.2043 5.92515 20.5 11.0001 20.5C16.0766 20.5 20.3803 17.2019 21.8961 12.6336C22.0342 12.2214 22.0349 11.7755 21.8964 11.3623C20.377 6.79583 16.0752 3.5 11.0001 3.5ZM11.0001 5.5C6.8 5.5 3.27 8.2 2 12C3.27 15.8 6.8 18.5 11.0001 18.5C15.2 18.5 18.7545 15.8 20 12C18.7509 8.3 15.3 5.5 11.0001 5.5Z"
+        />
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11 10C10.4713 10 9.96395 10.2103 9.58963 10.5852C9.21527 10.9602 9.00467 11.4691 9.00467 12C9.00467 12.5309 9.21527 13.0398 9.58963 13.4148C9.96395 13.7897 10.4713 14 11 14C11.5287 14 12.036 13.7897 12.4103 13.4148C12.7847 13.0398 12.9953 12.5309 12.9953 12C12.9953 11.4691 12.7847 10.9602 12.4103 10.5852C12.036 10.2103 11.5287 10 11 10ZM8.17432 9.17212C8.92346 8.42181 9.93986 8 11 8C12.0601 8 13.0765 8.42181 13.8257 9.17212C14.5747 9.92239 14.9953 10.9396 14.9953 12C14.9953 13.0604 14.5747 14.0776 13.8257 14.8279C13.0765 15.5782 12.0601 16 11 16C9.93986 16 8.92346 15.5782 8.17432 14.8279C7.42522 14.0776 7.00467 13.0604 7.00467 12C7.00467 10.9396 7.42522 9.92239 8.17432 9.17212Z"
+        />
+    </React.Fragment>,
+    'EyeOn',
+    '0 0 22 24',
+);

package/src/internal/icons/InfoCircle.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <React.Fragment>
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7 1.875C3.83691 1.875 1.27273 4.3934 1.27273 7.5C1.27273 10.6066 3.83691 13.125 7 13.125C10.1631 13.125 12.7273 10.6066 12.7273 7.5C12.7273 4.3934 10.1631 1.875 7 1.875ZM0 7.5C0 3.70304 3.13401 0.625 7 0.625C10.866 0.625 14 3.70304 14 7.5C14 11.297 10.866 14.375 7 14.375C3.13401 14.375 0 11.297 0 7.5Z"
+        />
+        <Path
+            d="M7.79545 4.84375C7.79545 5.27522 7.43932 5.625 7 5.625C6.56068 5.625 6.20455 5.27522 6.20455 4.84375C6.20455 4.41228 6.56068 4.0625 7 4.0625C7.43932 4.0625 7.79545 4.41228 7.79545 4.84375Z"
+        />
+        <Path
+            d="M6.36364 7.1875C6.36364 6.84232 6.64855 6.5625 7 6.5625C7.35145 6.5625 7.63636 6.84232 7.63636 7.1875V10.3125C7.63636 10.6577 7.35145 10.9375 7 10.9375C6.64855 10.9375 6.36364 10.6577 6.36364 10.3125V7.1875Z"
+        />
+    </React.Fragment>,
+    'InfoCircle',
+    '0 0 14 15',
+);

package/src/internal/icons/LoadingSpinner/LoadingSpinnerProps.ts

@@ -0,0 +1,11 @@
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../../../types';
+
+export type LoadingSpinnerColor = 'white' | 'gray';
+
+export type LoadingSpinnerSize = 'small' | 'medium' | 'large';
+
+export default interface LoadingSpinnerProps extends OverridableComponentProps<ViewProps, {
+    color?: LoadingSpinnerColor;
+    size?: LoadingSpinnerSize;
+}> {}

package/src/internal/icons/LoadingSpinner/index.native.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+import LottieView from 'lottie-react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import type LoadingSpinnerProps from './LoadingSpinnerProps';
+import { loadingSpinnerMap, loadingSpinnerSizeMap } from './utils';
+
+export default function LoadingSpinner(props: LoadingSpinnerProps) {
+    const {
+        color = 'gray',
+        size = 'medium',
+        ...otherProps
+    } = props;
+
+    const style: FountainUiStyle = {
+        height: loadingSpinnerSizeMap[size],
+        width: loadingSpinnerSizeMap[size],
+    };
+
+    return (
+        <View {...otherProps}>
+            <LottieView
+                autoPlay={true}
+                key={color}
+                loop={true}
+                source={loadingSpinnerMap[color]}
+                style={style}
+            />
+        </View>
+    );
+}

package/src/internal/icons/LoadingSpinner/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+import LottieView from 'react-lottie-player';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import type LoadingSpinnerProps from './LoadingSpinnerProps';
+import { loadingSpinnerMap, loadingSpinnerSizeMap } from './utils';
+
+export default function LoadingSpinner(props: LoadingSpinnerProps) {
+    const {
+        color = 'gray',
+        size = 'medium',
+        ...otherProps
+    } = props;
+
+    const style: FountainUiStyle = {
+        height: loadingSpinnerSizeMap[size],
+        width: loadingSpinnerSizeMap[size],
+    };
+
+    return (
+        <View {...otherProps}>
+            <LottieView
+                animationData={loadingSpinnerMap[color]}
+                key={color}
+                loop={true}
+                style={style}
+                play={true}
+            />
+        </View>
+    );
+}

package/src/internal/icons/LoadingSpinner/loadingSpinnerGray.json

@@ -0,0 +1 @@
+{"assets":[],"ddd":0,"fr":30,"h":100,"ip":0,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Group 1","hd":false,"sr":1,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[50,50]},"r":{"a":1,"k":[{"t":0,"s":[-90],"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167}},{"t":59.1,"s":[270],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":61,"st":0,"bm":0,"shapes":[{"ty":"gr","hd":false,"nm":"Path 1 Group","bm":0,"it":[{"ty":"sh","hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,19.882],[19.882,0],[0,-19.882],[-19.882,0]],"o":[[0,-19.882],[-19.882,0],[0,19.882],[19.882,0]],"v":[[36,0],[0,-36],[-36,0],[0,36]]}}},{"ty":"st","hd":false,"bm":0,"c":{"a":0,"k":[0.773,0.784,0.796]},"lc":2,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":10}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0},{"ty":"tm","hd":false,"bm":0,"e":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":20.1,"s":[100],"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0}},{"t":60,"s":[1],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"o":{"a":0,"k":0},"s":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167}},{"t":29.1,"s":[0],"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0}},{"t":51,"s":[0],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"m":1}]},{"ddd":0,"ind":3,"ty":4,"nm":"Screen","hd":false,"sr":1,"ks":{"a":{"a":0,"k":[50,50]},"o":{"a":0,"k":100},"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":61,"st":0,"bm":0,"shapes":[{"ty":"gr","hd":false,"nm":"Screen Group","bm":0,"it":[{"ty":"rc","hd":false,"nm":"Screen","d":1,"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]}},{"ty":"fl","hd":false,"bm":0,"c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":0}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0}]}],"meta":{"g":"@phase-software/lottie-exporter 0.7.0"},"nm":"","op":60,"v":"5.6.0","w":100}

package/src/internal/icons/LoadingSpinner/loadingSpinnerWhite.json

@@ -0,0 +1 @@
+{"assets":[],"ddd":0,"fr":30,"h":100,"ip":0,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Group 1","hd":false,"sr":1,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[50,50]},"r":{"a":1,"k":[{"t":0,"s":[-90],"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167}},{"t":59.1,"s":[270],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":61,"st":0,"bm":0,"shapes":[{"ty":"gr","hd":false,"nm":"Path 1 Group","bm":0,"it":[{"ty":"sh","hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,19.882],[19.882,0],[0,-19.882],[-19.882,0]],"o":[[0,-19.882],[-19.882,0],[0,19.882],[19.882,0]],"v":[[36,0],[0,-36],[-36,0],[0,36]]}}},{"ty":"st","hd":false,"bm":0,"c":{"a":0,"k":[1,1,1]},"lc":2,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":10}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0},{"ty":"tm","hd":false,"bm":0,"e":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":20.1,"s":[100],"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0}},{"t":60,"s":[1],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"o":{"a":0,"k":0},"s":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167}},{"t":29.1,"s":[0],"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0}},{"t":51,"s":[0],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"m":1}]},{"ddd":0,"ind":3,"ty":4,"nm":"Screen","hd":false,"sr":1,"ks":{"a":{"a":0,"k":[50,50]},"o":{"a":0,"k":100},"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":61,"st":0,"bm":0,"shapes":[{"ty":"gr","hd":false,"nm":"Screen Group","bm":0,"it":[{"ty":"rc","hd":false,"nm":"Screen","d":1,"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]}},{"ty":"fl","hd":false,"bm":0,"c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":0}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0}]}],"meta":{"g":"@phase-software/lottie-exporter 0.7.0"},"nm":"","op":60,"v":"5.6.0","w":100}

package/src/internal/icons/LoadingSpinner/utils.ts

@@ -0,0 +1,14 @@
+import loadingSpinnerGray from './loadingSpinnerGray.json';
+import loadingSpinnerWhite from './loadingSpinnerWhite.json';
+import type { LoadingSpinnerColor, LoadingSpinnerSize } from './LoadingSpinnerProps';
+
+export const loadingSpinnerMap: Record<LoadingSpinnerColor, any> = {
+    gray: loadingSpinnerGray,
+    white: loadingSpinnerWhite,
+};
+
+export const loadingSpinnerSizeMap: Record<LoadingSpinnerSize, number> = {
+    small: 16,
+    medium: 18,
+    large: 20,
+};

package/src/internal/icons/Search.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <React.Fragment>
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.25 3.5C5.3505 3.5 3 5.8505 3 8.75C3 11.6495 5.3505 14 8.25 14C9.66548 14 10.9501 13.4398 11.8943 12.5291C11.9136 12.5042 11.9346 12.4803 11.9575 12.4575C11.9803 12.4346 12.0042 12.4136 12.0291 12.3943C12.9398 11.4501 13.5 10.1655 13.5 8.75C13.5 5.8505 11.1495 3.5 8.25 3.5ZM13.5239 12.9633C14.4476 11.8085 15 10.3438 15 8.75C15 5.02208 11.9779 2 8.25 2C4.52208 2 1.5 5.02208 1.5 8.75C1.5 12.4779 4.52208 15.5 8.25 15.5C9.84376 15.5 11.3085 14.9476 12.4633 14.0239L15.22 16.7806C15.5129 17.0735 15.9877 17.0735 16.2806 16.7806C16.5735 16.4877 16.5735 16.0129 16.2806 15.72L13.5239 12.9633Z"
+        />
+    </React.Fragment>,
+    'Search',
+    '0 0 18 19',
+);

package/src/internal/icons/index.ts

@@ -2,10 +2,17 @@ export { default as Check } from './Check';
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxChecked } from './CheckboxChecked';
 export { default as CheckboxOn } from './CheckboxOn';
+export { default as CheckCircle } from './CheckCircle';
 export { default as ChevronDown } from './ChevronDown';
 export { default as ChevronLeft } from './ChevronLeft';
 export { default as ChevronRight } from './ChevronRight';
 export { default as CircularProgress } from './CircularProgress';
+export { default as Clear } from './Clear';
 export { default as Close } from './Close';
+export { default as EyeOff } from './EyeOff';
+export { default as EyeOn } from './EyeOn';
+export { default as InfoCircle } from './InfoCircle';
+export { default as LoadingSpinner } from './LoadingSpinner';
 export { default as Radio } from './Radio';
 export { default as RadioChecked } from './RadioChecked';
+export { default as Search } from './Search';