@fountain-ui/core 1.19.1 → 2.0.0-beta.11

package/build/typescript/internal/icons/RadioChecked.d.ts

@@ -1,18 +1,35 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
-        readonly style?: import("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
-        readonly width?: import("react-native-svg").NumberProp | undefined;
+        readonly color?: import("../..").CommonComponentColor | undefined;
+        fontFamily?: string | undefined;
+        fontSize?: import("react-native-svg").NumberProp | undefined;
+        fontWeight?: import("react-native-svg").FontWeight | undefined;
+        letterSpacing?: import("react-native-svg").NumberProp | undefined;
+        readonly fill?: import("react-native").ColorValue | undefined;
+        fontStyle?: import("react-native-svg").FontStyle | undefined;
+        testID?: string | undefined;
+        fontVariant?: import("react-native-svg").FontVariant | undefined;
+        opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
+        readonly width?: import("react-native-svg").NumberProp | undefined;
+        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
+        rotation?: import("react-native-svg").NumberProp | undefined;
+        scaleX?: import("react-native-svg").NumberProp | undefined;
+        scaleY?: import("react-native-svg").NumberProp | undefined;
+        translateX?: import("react-native-svg").NumberProp | undefined;
+        translateY?: import("react-native-svg").NumberProp | undefined;
+        readonly style?: import("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        scale?: import("react-native-svg").NumberArray | undefined;
+        skewX?: import("react-native-svg").NumberProp | undefined;
+        skewY?: import("react-native-svg").NumberProp | undefined;
+        title?: string | undefined;
         readonly viewBox?: string | undefined;
         preserveAspectRatio?: string | undefined;
-        readonly color?: import("react-native-svg").Color | undefined;
-        title?: string | undefined;
-        opacity?: import("react-native-svg").NumberProp | undefined;
-        readonly fill?: import("react-native-svg").Color | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
-        stroke?: import("react-native-svg").Color | undefined;
+        stroke?: import("react-native").ColorValue | undefined;
         strokeWidth?: import("react-native-svg").NumberProp | undefined;
         strokeOpacity?: import("react-native-svg").NumberProp | undefined;
         strokeDasharray?: import("react-native-svg").NumberProp | readonly import("react-native-svg").NumberProp[] | undefined;
@@ -20,25 +37,16 @@ declare const _default: React.MemoExoticComponent<{
         strokeLinecap?: import("react-native-svg").Linecap | undefined;
         strokeLinejoin?: import("react-native-svg").Linejoin | undefined;
         strokeMiterlimit?: import("react-native-svg").NumberProp | undefined;
+        vectorEffect?: import("react-native-svg").VectorEffect | undefined;
         clipRule?: import("react-native-svg").FillRule | undefined;
         clipPath?: string | undefined;
-        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
         translate?: import("react-native-svg").NumberArray | undefined;
-        translateX?: import("react-native-svg").NumberProp | undefined;
-        translateY?: import("react-native-svg").NumberProp | undefined;
         origin?: import("react-native-svg").NumberArray | undefined;
         originX?: import("react-native-svg").NumberProp | undefined;
         originY?: import("react-native-svg").NumberProp | undefined;
-        scale?: import("react-native-svg").NumberArray | undefined;
-        scaleX?: import("react-native-svg").NumberProp | undefined;
-        scaleY?: import("react-native-svg").NumberProp | undefined;
         skew?: import("react-native-svg").NumberArray | undefined;
-        skewX?: import("react-native-svg").NumberProp | undefined;
-        skewY?: import("react-native-svg").NumberProp | undefined;
-        rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
         pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
         onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
         onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
@@ -66,10 +74,17 @@ declare const _default: React.MemoExoticComponent<{
         markerMid?: string | undefined;
         markerEnd?: string | undefined;
         mask?: string | undefined;
+        font?: import("react-native-svg").FontObject | undefined;
+        fontStretch?: import("react-native-svg").FontStretch | undefined;
+        textAnchor?: import("react-native-svg").TextAnchor | undefined;
+        textDecoration?: import("react-native-svg").TextDecoration | undefined;
+        wordSpacing?: import("react-native-svg").NumberProp | undefined;
+        kerning?: import("react-native-svg").NumberProp | undefined;
+        fontFeatureSettings?: string | undefined;
+        fontVariantLigatures?: import("react-native-svg").FontVariantLigatures | undefined;
+        fontVariationSettings?: string | undefined;
         hitSlop?: import("react-native").Insets | undefined;
-        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
         removeClippedSubviews?: boolean | undefined;
-        testID?: string | undefined;
         nativeID?: string | undefined;
         collapsable?: boolean | undefined;
         needsOffscreenAlphaCompositing?: boolean | undefined;

package/build/typescript/styles/index.d.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/build/typescript/types/index.d.ts

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

package/build/typescript/utils/cloneElementSafely.d.ts

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

package/build/typescript/utils/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "1.19.1",
+  "version": "2.0.0-beta.11",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,8 +14,8 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^1.5.0",
-    "@fountain-ui/utils": "^1.1.0"
+    "@fountain-ui/styles": "^2.0.0-beta.7",
+    "@fountain-ui/utils": "^2.0.0-beta.3"
   },
   "peerDependencies": {
     "@react-native-community/slider": "^4.1.6",
@@ -42,7 +42,7 @@
     }
   },
   "devDependencies": {
-    "react-native-reanimated": "2.0.1",
+    "react-native-reanimated": "^2.9.1",
     "react-native-svg": "^12.1.1"
   },
   "react-native-builder-bob": {
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1624478e1427948c29a61931e3af6658db41505f"
+  "gitHead": "3de48896d62f1ba687558ea11b5f527cb91b5da6"
 }

package/src/Accordion/Accordion.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Animated from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { ChevronDown as ChevronDownIcon } from '../internal/icons';
 import ButtonBase from '../ButtonBase';
@@ -38,15 +38,15 @@ export default function Accordion(props: AccordionProps) {
     const styles = useStyles();
 
     const [isExpanded, setIsExpanded] = useState(false);
-    const rotate = Animated.useSharedValue(0);
+    const rotate = useSharedValue(0);
 
-    const animatedChevronDownStyles = Animated.useAnimatedStyle(() => ({
+    const animatedChevronDownStyles = useAnimatedStyle(() => ({
         transform: [{ rotate: `${rotate.value}deg` }],
     }));
 
     const onPress = () => {
         setIsExpanded(prev => !prev);
-        rotate.value = Animated.withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);
+        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);
     };
 
     return (
@@ -73,10 +73,7 @@ export default function Accordion(props: AccordionProps) {
 
                 <Column>
                     <Animated.View style={animatedChevronDownStyles}>
-                        {RightIcon ? RightIcon : (
-                            // @ts-ignore
-                            <ChevronDownIcon height={24} width={24}/>
-                        )}
+                        {RightIcon ? RightIcon : <ChevronDownIcon/>}
                     </Animated.View>
                 </Column>
             </ButtonBase>

package/src/AppBar/AppBar.tsx

@@ -5,11 +5,7 @@ import Paper from '../Paper';
 import { css, useTheme } from '../styles';
 import type AppBarProps from './AppBarProps';
 
-type AppBarStyleKeys =
-    | 'root'
-    | 'colorDefault'
-    | 'colorPrimary'
-    | 'colorTransparent';
+type AppBarStyleKeys = 'root';
 
 type AppBarStyles = NamedStylesStringUnion<AppBarStyleKeys>;
 
@@ -23,15 +19,6 @@ const useStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {
             width: '100%',
             zIndex: theme.zIndex.appBar,
         },
-        colorDefault: {
-            backgroundColor: theme.palette.background.default,
-        },
-        colorPrimary: {
-            backgroundColor: theme.palette.primary.main,
-        },
-        colorTransparent: {
-            backgroundColor: 'transparent',
-        },
     };
 };
 
@@ -42,26 +29,31 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
         ...otherProps
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
-    const colorStyle = color === 'default'
-        ? styles.colorDefault
-        : color === 'primary'
-            ? styles.colorPrimary
-            : styles.colorTransparent;
+    const backgroundColor = color === 'default'
+        ? theme.palette.background.default
+        : color === 'paper'
+            ? theme.palette.paper.default
+            : color === 'primary'
+                ? theme.palette.primary.main
+                : 'transparent';
 
     const paperStyle = css([
         styles.root,
-        colorStyle,
+        { backgroundColor },
         style,
     ]);
 
     return (
         <Paper
             ref={ref}
-            square
+            colorValue={backgroundColor}
             elevation={0}
             style={paperStyle}
+            square={true}
             {...otherProps}
         />
     );

package/src/AppBar/AppBarProps.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { OverridableComponentProps } from '../types';
 import type { PaperProps } from '../Paper';
 
-export type AppBarColor = 'default' | 'primary' | 'transparent';
+export type AppBarColor = 'default' | 'paper' | 'primary' | 'transparent';
 
 export default interface AppBarProps extends OverridableComponentProps<PaperProps, {
     /**

package/src/Button/Button.tsx

@@ -1,8 +1,17 @@
 import React from 'react';
 import { Linking, Text } from 'react-native';
 import ButtonBase from '../ButtonBase';
-import { cloneSvgIcon, createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import { cloneElementSafely } from '../utils';
 import type ButtonProps from './ButtonProps';
+import type { ButtonSize } from './ButtonProps';
+
+type IconSizes = { [n in ButtonSize]: number };
+
+const iconSizes: IconSizes = {
+    small: 20,
+    medium: 24,
+};
 
 const styles = StyleSheet.create({
     root: {
@@ -63,8 +72,14 @@ export default function Button(props: ButtonProps) {
         },
     };
 
-    const startIcon = cloneSvgIcon(startIconProp, { size, color: fontColor });
-    const endIcon = cloneSvgIcon(endIconProp, { size, color: fontColor });
+    const iconProps = {
+        width: iconSizes[size],
+        height: iconSizes[size],
+        fill: fontColor,
+    };
+
+    const startIcon = cloneElementSafely(startIconProp, iconProps);
+    const endIcon = cloneElementSafely(endIconProp, iconProps);
 
     const paddingSize = size === 'small' ? theme.spacing(2) : theme.spacing(4);
     const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;

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/ButtonBase/ButtonBase.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import Animated from 'react-native-reanimated';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import { useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
 import { useThrottle } from '../hooks';
 import { AnimatedPressable } from '../animated';
 import { StyleSheet } from '../styles';
@@ -13,7 +14,7 @@ const ACTIVE_OPACITY = .65;
 const ORIGINAL_SCALE = 1;
 const MINIFIED_SCALE = .96;
 
-const animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };
+const animationTimingConfig: WithTimingConfig = { duration: 150 };
 
 const styles = StyleSheet.create({
     disabled: {
@@ -39,10 +40,10 @@ export default function ButtonBase(props: ButtonBaseProps) {
         callback: onPress,
     });
 
-    const opacity = Animated.useSharedValue(ORIGINAL_OPACITY);
-    const scale = Animated.useSharedValue(ORIGINAL_SCALE);
+    const opacity = useSharedValue(ORIGINAL_OPACITY);
+    const scale = useSharedValue(ORIGINAL_SCALE);
 
-    const animatedStyle = Animated.useAnimatedStyle(() => ({
+    const animatedStyle = useAnimatedStyle(() => ({
         opacity: opacity.value,
         transform: [{ scale: scale.value }],
     }));
@@ -58,16 +59,16 @@ export default function ButtonBase(props: ButtonBaseProps) {
             if (pressIn) {
                 opacity.value = ACTIVE_OPACITY;
             } else {
-                opacity.value = Animated.withTiming(ORIGINAL_OPACITY, animationTimingConfig);
+                opacity.value = withTiming(ORIGINAL_OPACITY, animationTimingConfig);
             }
         } else if (!isHovered) {
             if (pressIn) {
-                scale.value = Animated.withDelay(
+                scale.value = withDelay(
                     100,
-                    Animated.withTiming(MINIFIED_SCALE, animationTimingConfig),
+                    withTiming(MINIFIED_SCALE, animationTimingConfig),
                 );
             } else {
-                scale.value = Animated.withTiming(ORIGINAL_SCALE, animationTimingConfig);
+                scale.value = withTiming(ORIGINAL_SCALE, animationTimingConfig);
             }
         }
     };

package/src/ButtonBase/useDisabledReaction/index.ts

@@ -1,8 +1,9 @@
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import { useAnimatedReaction } from 'react-native-reanimated';
 import { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';
 
-export default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {
-    Animated.useAnimatedReaction(
+export default function useDisabledReaction(disabled: boolean, opacity: SharedValue<number>) {
+    useAnimatedReaction(
         () => disabled,
         (result) => {
             if (result) {
@@ -12,4 +13,4 @@ export default function useDisabledReaction(disabled: boolean, opacity: Animated
             }
         },
     );
-}
+}

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,
+        fill: fontColor,
+    };
+
+    const startIcon = cloneElementSafely(startIconProp, iconProps);
+    const endIcon = cloneElementSafely(endIconProp, iconProps);
 
     return (
         <ButtonBase

package/src/CircularProgress/CircularProgress.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import Animated, { Easing } from 'react-native-reanimated';
+import Animated, {
+    Easing,
+    interpolate,
+    useAnimatedStyle,
+    useSharedValue,
+    withRepeat,
+    withTiming,
+} from 'react-native-reanimated';
 import { CircularProgress as CircularProgressIcon } from '../internal/icons';
 import { css } from '../styles';
 import { OverridableComponentProps } from '../types';
@@ -27,10 +34,10 @@ export default function CircularProgress(props: OverridableComponentProps<ViewPr
         style,
     ]);
 
-    const sharedSpin = Animated.useSharedValue(0);
+    const sharedSpin = useSharedValue(0);
 
-    const spinStyle = Animated.useAnimatedStyle(() => {
-        const interpolatedSpin = Animated.interpolate(sharedSpin.value, [0, 1], [0, 360]);
+    const spinStyle = useAnimatedStyle(() => {
+        const interpolatedSpin = interpolate(sharedSpin.value, [0, 1], [0, 360]);
 
         return {
             transform: [{ rotate: `${interpolatedSpin}deg` }],
@@ -38,8 +45,8 @@ export default function CircularProgress(props: OverridableComponentProps<ViewPr
     });
 
     React.useEffect(() => {
-        sharedSpin.value = Animated.withRepeat(
-            Animated.withTiming(1, { duration: 900, easing: Easing.linear }),
+        sharedSpin.value = withRepeat(
+            withTiming(1, { duration: 900, easing: Easing.linear }),
             -1,
             false,
         );

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],
+        fill: 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%'}