@fountain-ui/core 1.19.0 → 2.0.0-beta.2

package/src/Button/ButtonProps.ts

@@ -1,13 +1,8 @@
 import React from 'react';
 import type { ButtonBaseProps } from '../ButtonBase';
-import type { OverridableComponentProps } from '../types';
+import type { OverridableComponentProps, CommonComponentColor } from '../types';
 
-export type ButtonColor =
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'warning'
-    | 'accent';
+export type ButtonColor = CommonComponentColor;
 
 export type ButtonSize = 'small' | 'medium';
 

package/src/Checkbox/Checkbox.tsx

@@ -22,6 +22,7 @@ export default function Checkbox(props: CheckboxProps) {
     const {
         checked = false,
         checkedIcon: checkedIconProp,
+        color = 'primary',
         disabled = false,
         icon: iconProp,
         onChange,
@@ -31,8 +32,8 @@ export default function Checkbox(props: CheckboxProps) {
 
     const styles = useStyles();
 
-    const uncheckedIcon = iconProp ? iconProp : <CheckboxIcon/>;
-    const checkedIcon = checkedIconProp ? checkedIconProp : <CheckboxCheckedIcon/>;
+    const uncheckedIcon = iconProp ? iconProp : <CheckboxIcon color={color}/>;
+    const checkedIcon = checkedIconProp ? checkedIconProp : <CheckboxCheckedIcon color={color}/>;
 
     const handlePress = () => {
         if (onChange) {

package/src/Checkbox/CheckboxProps.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import type { OverridableComponentProps } from '../types';
+import type { CommonComponentColor, OverridableComponentProps } from '../types';
 import type { ButtonBaseProps } from '../ButtonBase';
 
 type BaseProps = Omit<ButtonBaseProps, 'onPress'>;
 
+export type CheckboxColor = CommonComponentColor;
+
 export default interface CheckboxProps extends OverridableComponentProps<BaseProps, {
     /**
      * If `true`, the component is checked.
@@ -16,6 +18,12 @@ export default interface CheckboxProps extends OverridableComponentProps<BasePro
      */
     checkedIcon?: React.ReactElement;
 
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'primary'
+     */
+    color?: CheckboxColor;
+
     /**
      * If `true`, the checkbox is disabled.
      * @default false

package/src/Chip/Chip.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Text } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { cloneSvgIcon, createFontStyle, css, useTheme } from '../styles';
+import { createFontStyle, css, useTheme } from '../styles';
+import { cloneElementSafely } from '../utils';
 import ButtonBase from '../ButtonBase';
 import type ChipProps from './ChipProps';
 
 type ChipStyles = NamedStylesStringUnion<'root'>;
 
-const ICON_SIZE = 'tiny';
+const ICON_SIZE = 16;
 
 const useStyles: UseStyles<ChipStyles> = function (): ChipStyles {
     const theme = useTheme();
@@ -83,8 +84,14 @@ export default function Chip(props: ChipProps) {
         { textAlign: 'center' },
     ]);
 
-    const startIcon = cloneSvgIcon(startIconProp, { size: ICON_SIZE, color: fontColor });
-    const endIcon = cloneSvgIcon(endIconProp, { size: ICON_SIZE, color: fontColor });
+    const iconProps = {
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        colorValue: fontColor,
+    };
+
+    const startIcon = cloneElementSafely(startIconProp, iconProps);
+    const endIcon = cloneElementSafely(endIconProp, iconProps);
 
     return (
         <ButtonBase

package/src/Fab/Fab.tsx

@@ -2,12 +2,21 @@ import React from 'react';
 import { Text } from 'react-native';
 import ButtonBase from '../ButtonBase';
 import { useElevationStyle } from '../hooks';
-import { cloneSvgIcon, createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import { cloneElementSafely } from '../utils';
 import type FabProps from './FabProps';
+import type { FabSize } from './FabProps';
 
 const SMALL = 32;
 const MEDIUM = 48;
 
+type IconSizes = { [n in FabSize]: number };
+
+const iconSizes: IconSizes = {
+    small: 20,
+    medium: 24,
+};
+
 const styles = StyleSheet.create({
     medium: {
         borderRadius: MEDIUM * 0.5,
@@ -50,9 +59,10 @@ export default function Fab(props: FabProps) {
     const backgroundColor = theme.palette[color].main;
     const fontColor = theme.palette[color].contrastTextColor;
 
-    const icon = cloneSvgIcon(children, {
-        size,
-        color: fontColor,
+    const icon = cloneElementSafely(children, {
+        width: iconSizes[size],
+        height: iconSizes[size],
+        colorValue: fontColor,
     });
 
     const elevationStyle = useElevationStyle(elevation);

package/src/Fab/FabProps.ts

@@ -1,15 +1,9 @@
 import React from 'react';
 import type { ButtonBaseProps } from '../ButtonBase';
-import type { OverridableComponentProps } from '../types';
+import type { OverridableComponentProps, CommonComponentColor } from '../types';
 import type { Elevation } from '@fountain-ui/styles';
 
-export type FabColor =
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'warning'
-    | 'accent'
-    | 'surface';
+export type FabColor = CommonComponentColor | 'surface';
 
 export type FabSize = 'small' | 'medium';
 

package/src/IconButton/IconButton.tsx

@@ -2,11 +2,22 @@ import React from 'react';
 import { Text } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
-import { cloneSvgIcon, createFontStyle, css, useTheme } from '../styles';
+import { createFontStyle, css, useTheme } from '../styles';
+import { cloneElementSafely } from '../utils';
 import type IconButtonProps from './IconButtonProps';
+import type { IconButtonSize } from './IconButtonProps';
 
 type IconButtonStyles = NamedStylesStringUnion<'root'>;
 
+type IconSizes = { [n in IconButtonSize]: number };
+
+const iconSizes: IconSizes = {
+    tiny: 16,
+    small: 20,
+    medium: 24,
+    large: 28,
+};
+
 const useStyles: UseStyles<IconButtonStyles> = function (): IconButtonStyles {
     const theme = useTheme();
 
@@ -35,9 +46,10 @@ export default function IconButton(props: IconButtonProps) {
     const theme = useTheme();
     const styles = useStyles();
 
-    const icon = cloneSvgIcon(children, {
-        color: theme.palette[color].main,
-        size,
+    const icon = cloneElementSafely(children, {
+        width: iconSizes[size],
+        height: iconSizes[size],
+        color: color,
     });
 
     const fontStyle = createFontStyle(theme, {

package/src/IconButton/IconButtonProps.ts

@@ -1,13 +1,8 @@
 import React from 'react';
 import type { ButtonBaseProps } from '../ButtonBase';
-import type { OverridableComponentProps } from '../types';
+import type { CommonComponentColor, OverridableComponentProps } from '../types';
 
-export type IconButtonColor =
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'warning'
-    | 'accent';
+export type IconButtonColor = CommonComponentColor;
 
 export type IconButtonSize = 'medium' | 'large' | 'small' | 'tiny';
 

package/src/Image/Image.tsx

@@ -44,6 +44,8 @@ export default function Image(props: ImageProps) {
         source,
         style,
         square = false,
+        onLoad,
+        onError,
         ...otherProps
     } = props;
 
@@ -51,6 +53,14 @@ export default function Image(props: ImageProps) {
 
     const styles = useStyles();
 
+    const handleError = () => {
+        if(onError){
+            onError();
+        }
+
+        setFailed(true);
+    }
+
     return (
         <View
             style={css([
@@ -69,7 +79,8 @@ export default function Image(props: ImageProps) {
                     alt={alt}
                     height={'100%'}
                     loading={loading}
-                    onError={() => setFailed(true)}
+                    onError={handleError}
+                    onLoad={onLoad}
                     resizeMode={resizeMode}
                     source={source}
                     width={'100%'}

package/src/Image/ImageProps.ts

@@ -30,6 +30,16 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
      */
     loading?: Loading;
 
+    /**
+     * error event handler
+     */
+    onError?: () => void;
+
+    /**
+     * image loaded event handler
+     */
+    onLoad?: () => void;
+
     /**
      * The children on top this image.
      */

package/src/Radio/Radio.tsx

@@ -8,6 +8,8 @@ import type RadioProps from './RadioProps';
 
 type RadioStyles = NamedStylesStringUnion<'root'>;
 
+const ICON_SIZE = 20;
+
 const useStyles: UseStyles<RadioStyles> = function (): RadioStyles {
     return {
         root: {
@@ -43,8 +45,9 @@ export default function Radio(props: RadioProps) {
 
     const isChecked = context?.value === value ?? checked;
 
-    const color = theme.palette.tertiary.main;
-    const checkedColor = theme.palette.primary.main;
+    const icon = isChecked
+        ? <RadioCheckedIcon width={ICON_SIZE} height={ICON_SIZE} color={'primary'}/>
+        : <RadioIcon width={ICON_SIZE} height={ICON_SIZE} color={'tertiary'}/>;
 
     const rootStyle = css([
         styles.root,
@@ -58,19 +61,8 @@ export default function Radio(props: RadioProps) {
             style={rootStyle}
             {...otherProps}
         >
-            {isChecked ? (
-                <RadioCheckedIcon
-                    fill={checkedColor}
-                    height={20}
-                    width={20}
-                />
-            ) : (
-                <RadioIcon
-                    fill={color}
-                    height={20}
-                    width={20}
-                />
-            )}
+            {icon}
+
             {children ? children : null}
         </ButtonBase>
     );

package/src/SvgIcon/SvgIcon.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import Svg from 'react-native-svg';
-import { css } from '../styles';
+import { css, useTheme } from '../styles';
 import type SvgIconProps from './SvgIconProps';
 
 export default function SvgIcon(props: SvgIconProps) {
     const {
-        fill = '#000',
+        color: colorProp = 'primary',
+        colorValue,
         height = 24,
         style: styleProp,
         viewBox = '0 0 20 20',
@@ -13,14 +14,19 @@ export default function SvgIcon(props: SvgIconProps) {
         ...otherProps
     }: SvgIconProps = props;
 
+    const theme = useTheme();
+
+    const color = colorValue ?? theme.palette[colorProp].main;
+
     const style = css([
-        { flexShrink : 0 },
+        { flexShrink: 0 },
         styleProp,
     ]);
 
     return (
         <Svg
-            fill={fill}
+            color={color}
+            fill={'currentColor'}
             height={height}
             style={style}
             viewBox={viewBox}
@@ -28,4 +34,4 @@ export default function SvgIcon(props: SvgIconProps) {
             {...otherProps}
         />
     );
-};
+};

package/src/SvgIcon/SvgIconProps.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { SvgProps } from 'react-native-svg';
-import type { OverridableComponentProps } from '../types';
+import type { CommonComponentColor, OverridableComponentProps } from '../types';
+
+export type SvgIconColor = CommonComponentColor;
 
 export default interface SvgIconProps extends OverridableComponentProps<SvgProps, {
     /**
@@ -9,15 +11,15 @@ export default interface SvgIconProps extends OverridableComponentProps<SvgProps
     children: React.ReactNode;
 
     /**
-     * The color of the component.
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'primary'
      */
-    color?: SvgProps['color'];
+    color?: SvgIconColor;
 
     /**
-     * The fill color of the component.
-     * @default '#000'
+     * The color of the component. It is treated as higher priority than `color` prop if provided.
      */
-    fill?: SvgProps['fill'];
+    colorValue?: string;
 
     /**
      * The height applied to the icon.

package/src/Switch/Switch.tsx

@@ -23,7 +23,7 @@ export default function Switch(props: SwitchProps) {
         ? undefined
         : disabled
             ? disabledColor
-            : theme.palette.background.default;
+            : '#fff';
 
     const trackColor = Platform.OS === 'ios'
         ? accentColor

package/src/Switch/SwitchProps.ts

@@ -1,13 +1,7 @@
 import { SwitchProps as RNSwitchProps } from 'react-native';
-import type { OverridableComponentProps } from '../types';
+import type { CommonComponentColor, OverridableComponentProps } from '../types';
 
-export type SwitchColor =
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'warning'
-    | 'error'
-    | 'accent';
+export type SwitchColor = CommonComponentColor;
 
 export default interface SwitchProps extends OverridableComponentProps<RNSwitchProps, {
     /**

package/src/TextField/InputLabel.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { useTheme } from '../styles';
 import { inputPaddingHorizontal } from './utils';
 
 interface LabelProps {
@@ -29,6 +30,8 @@ interface LabelProps {
 type InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;
 
 const useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {
+    const theme = useTheme();
+
     return {
         background: {
             position: 'absolute',
@@ -38,14 +41,14 @@ const useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {
             right: 0,
             width: 8,
             height: 2,
-            backgroundColor: '#fff',
+            backgroundColor: theme.palette.background.default,
         },
         backgroundText: {
             position: 'absolute',
             left: 18,
             paddingHorizontal: 0,
             color: 'transparent',
-            backgroundColor: '#fff',
+            backgroundColor: theme.palette.background.default,
         },
         placeholder: {
             position: 'absolute',
@@ -216,4 +219,4 @@ const InputLabel = (props: LabelProps) => {
     ) : null);
 };
 
-export default InputLabel;
+export default InputLabel;

package/src/TextField/OutlinedTextField.tsx

@@ -34,7 +34,7 @@ const useStyles: UseStyles<OutlinedTextFieldStyles> = function (): OutlinedTextF
             left: 0,
             right: 0,
             bottom: 0,
-            backgroundColor: '#fff',
+            backgroundColor: theme.palette.background.default,
             borderRadius: theme.shape.roundness,
         },
         input: {
@@ -196,6 +196,7 @@ const OutlinedTextField = React.forwardRef<TextInput, OutlinedTextFieldProps>(fu
                 <TextInput
                     autoCapitalize={'none'}
                     autoCorrect={false}
+                    disableFullscreenUI={true}
                     ref={ref}
                     onChangeText={onChangeText}
                     placeholder={placeholder}

package/src/hooks/useFadeInAppBar.ts

@@ -4,6 +4,7 @@ import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { rgb } from '@fountain-ui/utils';
 import { useHeight } from '../internal/hooks';
+import { useTheme } from '../styles';
 import useAppbarStyles from './useAppbarStyles';
 
 type ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;
@@ -13,7 +14,6 @@ type OnScroll = ScrollViewProps['onScroll'];
 type OnLayoutCallback = ViewProps['onLayout'];
 
 export interface Options {
-    backgroundColor?: string;
     fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);
     fadeInEndY?: number | ((appBarHeight: number) => number);
     floating?: boolean;
@@ -31,7 +31,6 @@ export interface FadeInAppBar {
 }
 
 const defaultOptions: Required<Options> = {
-    backgroundColor: '#ffffff',
     fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,
     fadeInEndY: (appBarHeight) => appBarHeight,
     floating: true,
@@ -43,7 +42,6 @@ const shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined
 
 export default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {
     const {
-        backgroundColor,
         fadeInBeginY,
         fadeInEndY,
         floating,
@@ -54,6 +52,8 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         ...userOptions,
     };
 
+    const theme = useTheme();
+
     const styles = useAppbarStyles();
 
     const safeAreaInsets = useSafeAreaInsets();
@@ -76,6 +76,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
     const lastOffsetY = Animated.useSharedValue<number>(0);
     const normalized = Animated.useSharedValue<number>(0);
 
+    const backgroundColor = theme.palette.background.default;
     const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);
 
     const animatedAppBarStyle = Animated.useAnimatedStyle(() => ({

package/src/internal/icons/Checkbox.tsx

@@ -5,6 +5,6 @@ import { createSvgIcon } from '../../utils';
 export default createSvgIcon(
     <Path
         d="M13 4.5C14.3807 4.5 15.5 5.61929 15.5 7V13C15.5 14.3807 14.3807 15.5 13 15.5H7C5.61929 15.5 4.5 14.3807 4.5 13V7C4.5 5.61929 5.61929 4.5 7 4.5H13ZM7 3C4.79086 3 3 4.79086 3 7V13C3 15.2091 4.79086 17 7 17H13C15.2091 17 17 15.2091 17 13V7C17 4.79086 15.2091 3 13 3H7Z"
-        fill="#767676"
-    />
-    , 'Checkbox');
+    />,
+    'Checkbox',
+);

package/src/internal/icons/CheckboxChecked.tsx

@@ -5,12 +5,14 @@ import { createSvgIcon } from '../../utils';
 export default createSvgIcon(
     <React.Fragment>
         <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M3 7C3 4.79086 4.79086 3 7 3H13C15.2091 3 17 4.79086 17 7V13C17 15.2091 15.2091 17 13 17H7C4.79086 17 3 15.2091 3 13V7Z"
-            fill="#242424"
         />
         <Path
             d="M14.8303 7.53033L8.32856 14.0321L4.96967 10.6732L6.03033 9.61252L8.32856 11.9108L13.7697 6.46967L14.8303 7.53033Z"
             fill="#FFFFFF"
         />
-    </React.Fragment>
-    , 'CheckboxChecked');
+    </React.Fragment>,
+    'CheckboxChecked',
+);

package/src/internal/icons/ChevronDown.tsx

@@ -4,8 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
         d="M9.51967 13.2803L4.01967 7.78033L5.08033 6.71967L10.05 11.6893L15.0197 6.71967L16.0803 7.78033L10.5803 13.2803L9.51967 13.2803Z"
-    />
-    , 'ChevronDown');
+    />,
+    'ChevronDown',
+);

package/src/internal/icons/ChevronLeft.tsx

@@ -4,8 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
         d="M6.76965 9.46973L12.2697 3.96973L13.3303 5.03039L8.36064 10.0001L13.3303 14.9697L12.2697 16.0304L6.76965 10.5304L6.76965 9.46973Z"
-    />
-    , 'ChevronLeft');
+    />,
+    'ChevronLeft',
+);

package/src/internal/icons/ChevronRight.tsx

@@ -4,8 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
         d="M13.3303 10.5303L7.83032 16.0303L6.76966 14.9697L11.7393 10L6.76966 5.03033L7.83032 3.96968L13.3303 9.46967V10.5303Z"
-    />
-    , 'ChevronRight');
+    />,
+    'ChevronRight',
+);

package/src/internal/icons/Close.tsx

@@ -4,8 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
         d="M3.96968 14.9697L5.03034 16.0303L10 11.0607L14.9697 16.0303L16.0303 14.9697L11.0607 10L16.0303 5.03033L14.9697 3.96967L10 8.93934L5.03034 3.96968L3.96968 5.03033L8.93935 10L3.96968 14.9697Z"
-    />
-    , 'Close');
+    />,
+    'Close',
+);

package/src/internal/icons/Radio.tsx

@@ -4,5 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        d="M10 16.5C6.41015 16.5 3.5 13.5899 3.5 10C3.5 6.41015 6.41015 3.5 10 3.5C13.5899 3.5 16.5 6.41015 16.5 10C16.5 13.5899 13.5899 16.5 10 16.5ZM10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z"/>
-    , 'Radio');
+        d="M10 16.5C6.41015 16.5 3.5 13.5899 3.5 10C3.5 6.41015 6.41015 3.5 10 3.5C13.5899 3.5 16.5 6.41015 16.5 10C16.5 13.5899 13.5899 16.5 10 16.5ZM10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z"
+    />,
+    'Radio',
+);

package/src/internal/icons/RadioChecked.tsx

@@ -4,5 +4,7 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        d="M16.5 10C16.5 6.41015 13.5899 3.5 10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10ZM18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 15C7.23858 15 5 12.7614 5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15Z"/>
-    , 'RadioChecked');
+        d="M16.5 10C16.5 6.41015 13.5899 3.5 10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10ZM18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 15C7.23858 15 5 12.7614 5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15Z"
+    />,
+    'RadioChecked',
+);

package/src/styles/index.ts

@@ -1,4 +1,3 @@
-export { default as cloneSvgIcon } from './cloneSvgIcon';
 export { default as createFontStyle } from './createFontStyle';
 export { default as EdgeInsets } from './EdgeInsets';
 export type { EdgeInsetsType } from './EdgeInsets';

package/src/types/index.ts

@@ -13,3 +13,10 @@ export interface BaseProps extends Readonly<{
 }> {}
 
 export type { Theme } from '@fountain-ui/styles';
+
+export type CommonComponentColor =
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'warning'
+    | 'accent';

package/src/utils/cloneElementSafely.ts

@@ -0,0 +1,9 @@
+import { cloneElement, ReactElement } from 'react';
+
+type FalsyReactElement = ReactElement | null | undefined;
+
+export default function cloneElementSafely(element: FalsyReactElement, props?: any): FalsyReactElement {
+    return element
+        ? cloneElement(element, props)
+        : null;
+};

package/src/utils/index.ts

@@ -1 +1,2 @@
+export { default as cloneElementSafely } from './cloneElementSafely';
 export { default as createSvgIcon } from './createSvgIcon';