rnnovaui 0.1.7 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnnovaui",
-  "version": "0.1.7",
+  "version": "0.2.1",
   "description": "",
   "main": "src/index.js",
   "react-native": "src/index.js",

package/src/components/Button/UIButton.js

@@ -1,7 +1,9 @@
-import React, { memo, useCallback, useMemo } from "react";
+import React, { memo, useCallback, useMemo, useRef } from "react";
 
 import {
   ActivityIndicator,
+  Animated,
+  Easing,
   Pressable,
   StyleSheet,
   Text,
@@ -10,7 +12,7 @@ import {
 
 import { useUITheme } from "../../theme";
 
-const VARIANTS = {
+const BUTTON_VARIANTS = {
   solid: "solid",
   outline: "outline",
   ghost: "ghost",
@@ -19,14 +21,14 @@ const VARIANTS = {
   success: "success",
 };
 
-const SIZES = {
+const BUTTON_SIZES = {
   sm: "sm",
   md: "md",
   lg: "lg",
   xl: "xl",
 };
 
-const FALLBACK = {
+const FALLBACK_COLORS = {
   primary: "#FF5A1F",
   primaryPressed: "#E94D17",
   primarySoft: "#FFF0EA",
@@ -41,9 +43,10 @@ const FALLBACK = {
 
   disabledBackground: "#E5E5E5",
   disabledText: "#A3A3A3",
+  disabledBorder: "#E5E5E5",
 };
 
-function UIButton({
+function UIButtonComponent({
   title,
   children,
 
@@ -55,136 +58,146 @@ function UIButton({
 
   fullWidth = false,
 
-  leftIcon,
-  rightIcon,
+  leftIcon = null,
+  rightIcon = null,
 
   onPress,
   onLongPress,
+  onPressIn,
+  onPressOut,
 
   style,
   contentStyle,
   textStyle,
 
-  testID,
-
-  ...props
-}) {
-  const { theme } = useUITheme();
+  activeOpacity = 0.82,
 
-  const colors = theme?.colors || {};
-
-  const primary = colors.primary || FALLBACK.primary;
-
-  const primaryPressed = colors.primaryPressed || FALLBACK.primaryPressed;
+  pressAnimation = true,
 
-  const primarySoft = colors.primarySoft || FALLBACK.primarySoft;
+  pressScale = 0.97,
 
-  const success = colors.success || FALLBACK.success;
+  pressAnimationDuration = 100,
 
-  const successPressed = colors.successPressed || FALLBACK.successPressed;
+  testID,
 
-  const danger = colors.danger || FALLBACK.danger;
+  accessibilityLabel,
+  accessibilityHint,
 
-  const dangerPressed = colors.dangerPressed || FALLBACK.dangerPressed;
+  ...props
+}) {
+  const { theme } = useUITheme();
 
-  const white = colors.onPrimary || FALLBACK.white;
+  const colors = theme?.colors || {};
 
   const isDisabled = disabled || loading;
 
-  const buttonColors = useMemo(() => {
-    if (isDisabled) {
-      return {
-        background:
-          colors.buttonDisabledBackground || FALLBACK.disabledBackground,
-
-        border: colors.buttonDisabledBorder || FALLBACK.disabledBackground,
-
-        text: colors.buttonDisabledText || FALLBACK.disabledText,
-
-        borderWidth: 1,
-      };
-    }
+  /*
+   * Native Animated value.
+   *
+   * Created once and reused.
+   * This avoids creating animation
+   * objects on every render.
+   */
+  const scale = useRef(new Animated.Value(1)).current;
 
-    switch (variant) {
-      case "outline":
-        return {
-          background: "transparent",
+  const animationRef = useRef(null);
 
-          border: colors.buttonOutlineBorder || primary,
+  const safeVariant = BUTTON_VARIANTS[variant]
+    ? variant
+    : BUTTON_VARIANTS.solid;
 
-          text: colors.buttonOutlineText || primary,
+  const safeSize = BUTTON_SIZES[size] ? size : BUTTON_SIZES.md;
 
-          borderWidth: 1,
-        };
+  const buttonColors = useMemo(
+    () => getVariantColors(safeVariant, colors, isDisabled),
+    [safeVariant, colors, isDisabled],
+  );
 
-      case "ghost":
-        return {
-          background: "transparent",
+  const dimensions = useMemo(
+    () => getDimensions(safeSize, theme),
+    [safeSize, theme],
+  );
 
-          border: "transparent",
+  const stopAnimation = useCallback(() => {
+    if (animationRef.current) {
+      animationRef.current.stop();
 
-          text: colors.buttonGhostText || primary,
+      animationRef.current = null;
+    }
+  }, []);
 
-          borderWidth: 0,
-        };
+  const animateScale = useCallback(
+    (targetScale) => {
+      if (!pressAnimation || isDisabled) {
+        return;
+      }
 
-      case "soft":
-        return {
-          background: colors.buttonSoftBackground || primarySoft,
+      stopAnimation();
 
-          border: colors.buttonSoftBackground || primarySoft,
+      animationRef.current = Animated.timing(scale, {
+        toValue: targetScale,
 
-          text: colors.buttonSoftText || primary,
+        duration: pressAnimationDuration,
 
-          borderWidth: 1,
-        };
+        easing: Easing.out(Easing.quad),
 
-      case "danger":
-        return {
-          background: colors.buttonDangerBackground || danger,
+        useNativeDriver: true,
+      });
 
-          border: colors.buttonDangerBackground || danger,
+      animationRef.current.start(() => {
+        animationRef.current = null;
+      });
+    },
+    [pressAnimation, isDisabled, stopAnimation, scale, pressAnimationDuration],
+  );
 
-          text: colors.buttonDangerText || white,
+  const handlePressIn = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
 
-          borderWidth: 1,
-        };
+      animateScale(pressScale);
 
-      case "success":
-        return {
-          background: colors.buttonSuccessBackground || success,
+      onPressIn?.(event);
+    },
+    [isDisabled, animateScale, pressScale, onPressIn],
+  );
 
-          border: colors.buttonSuccessBackground || success,
+  const handlePressOut = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
 
-          text: colors.buttonSuccessText || white,
+      animateScale(1);
 
-          borderWidth: 1,
-        };
+      onPressOut?.(event);
+    },
+    [isDisabled, animateScale, onPressOut],
+  );
 
-      case "solid":
-      default:
-        return {
-          background: colors.buttonPrimaryBackground || primary,
+  const handlePress = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
 
-          border: colors.buttonPrimaryBackground || primary,
+      onPress?.(event);
+    },
+    [isDisabled, onPress],
+  );
 
-          text: colors.buttonPrimaryText || white,
+  const handleLongPress = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
 
-          borderWidth: 1,
-        };
-    }
-  }, [
-    variant,
-    isDisabled,
-    colors,
-    primary,
-    primarySoft,
-    success,
-    danger,
-    white,
-  ]);
-
-  const dimensions = useMemo(() => getDimensions(size, theme), [size, theme]);
+      onLongPress?.(event);
+    },
+    [isDisabled, onLongPress],
+  );
 
   const buttonStyle = useMemo(
     () => [
@@ -208,88 +221,187 @@ function UIButton({
         width: fullWidth ? "100%" : undefined,
 
         opacity: isDisabled ? 0.55 : 1,
+
+        transform: [
+          {
+            scale,
+          },
+        ],
       },
 
       style,
     ],
-    [dimensions, buttonColors, fullWidth, isDisabled, style],
+    [dimensions, buttonColors, fullWidth, isDisabled, scale, style],
   );
 
-  const handlePress = useCallback(
-    (event) => {
-      if (isDisabled) {
-        return;
-      }
-
-      onPress?.(event);
-    },
-    [isDisabled, onPress],
+  return (
+    <Animated.View style={buttonStyle}>
+      <Pressable
+        {...props}
+        testID={testID}
+        disabled={isDisabled}
+        onPress={handlePress}
+        onLongPress={handleLongPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        accessibilityRole="button"
+        accessibilityLabel={
+          accessibilityLabel || (typeof title === "string" ? title : undefined)
+        }
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{
+          disabled: isDisabled,
+
+          busy: loading,
+        }}
+        style={styles.pressable}
+      >
+        <View
+          style={[
+            styles.content,
+
+            {
+              gap: dimensions.gap,
+            },
+
+            contentStyle,
+          ]}
+        >
+          {loading ? (
+            <ActivityIndicator size="small" color={buttonColors.text} />
+          ) : (
+            leftIcon && <View style={styles.icon}>{leftIcon}</View>
+          )}
+
+          {children !== undefined && children !== null ? (
+            <View style={styles.children}>{children}</View>
+          ) : title !== undefined && title !== null ? (
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.text,
+
+                {
+                  color: buttonColors.text,
+
+                  fontSize: dimensions.fontSize,
+
+                  lineHeight: dimensions.lineHeight,
+                },
+
+                textStyle,
+              ]}
+            >
+              {title}
+            </Text>
+          ) : null}
+
+          {!loading && rightIcon && (
+            <View style={styles.icon}>{rightIcon}</View>
+          )}
+        </View>
+      </Pressable>
+    </Animated.View>
   );
+}
 
-  const handleLongPress = useCallback(
-    (event) => {
-      if (isDisabled) {
-        return;
-      }
+function getVariantColors(variant, colors, disabled) {
+  const primary = colors.primary || FALLBACK_COLORS.primary;
 
-      onLongPress?.(event);
-    },
-    [isDisabled, onLongPress],
-  );
+  const primarySoft = colors.primarySoft || FALLBACK_COLORS.primarySoft;
 
-  return (
-    <Pressable
-      {...props}
-      testID={testID}
-      disabled={isDisabled}
-      onPress={handlePress}
-      onLongPress={handleLongPress}
-      style={buttonStyle}
-    >
-      <View
-        style={[
-          styles.content,
+  const success = colors.success || FALLBACK_COLORS.success;
 
-          {
-            gap: dimensions.gap,
-          },
+  const successPressed =
+    colors.successPressed || FALLBACK_COLORS.successPressed;
 
-          contentStyle,
-        ]}
-      >
-        {loading ? (
-          <ActivityIndicator size="small" color={buttonColors.text} />
-        ) : (
-          leftIcon && <View style={styles.icon}>{leftIcon}</View>
-        )}
-
-        {children !== undefined && children !== null ? (
-          <View style={styles.children}>{children}</View>
-        ) : title !== undefined && title !== null ? (
-          <Text
-            numberOfLines={1}
-            style={[
-              styles.text,
-
-              {
-                color: buttonColors.text,
-
-                fontSize: dimensions.fontSize,
-
-                lineHeight: dimensions.lineHeight,
-              },
-
-              textStyle,
-            ]}
-          >
-            {title}
-          </Text>
-        ) : null}
-
-        {!loading && rightIcon && <View style={styles.icon}>{rightIcon}</View>}
-      </View>
-    </Pressable>
-  );
+  const danger = colors.danger || FALLBACK_COLORS.danger;
+
+  const dangerPressed = colors.dangerPressed || FALLBACK_COLORS.dangerPressed;
+
+  const white = colors.onPrimary || FALLBACK_COLORS.white;
+
+  if (disabled) {
+    return {
+      background:
+        colors.buttonDisabledBackground || FALLBACK_COLORS.disabledBackground,
+
+      border: colors.buttonDisabledBorder || FALLBACK_COLORS.disabledBorder,
+
+      borderWidth: 1,
+
+      text: colors.buttonDisabledText || FALLBACK_COLORS.disabledText,
+    };
+  }
+
+  switch (variant) {
+    case BUTTON_VARIANTS.outline:
+      return {
+        background: colors.buttonOutlineBackground || "transparent",
+
+        border: colors.buttonOutlineBorder || primary,
+
+        borderWidth: 1,
+
+        text: colors.buttonOutlineText || primary,
+      };
+
+    case BUTTON_VARIANTS.ghost:
+      return {
+        background: colors.buttonGhostBackground || "transparent",
+
+        border: "transparent",
+
+        borderWidth: 0,
+
+        text: colors.buttonGhostText || primary,
+      };
+
+    case BUTTON_VARIANTS.soft:
+      return {
+        background: colors.buttonSoftBackground || primarySoft,
+
+        border: colors.buttonSoftBackground || primarySoft,
+
+        borderWidth: 1,
+
+        text: colors.buttonSoftText || primary,
+      };
+
+    case BUTTON_VARIANTS.danger:
+      return {
+        background: colors.buttonDangerBackground || danger,
+
+        border: colors.buttonDangerBackground || danger,
+
+        borderWidth: 1,
+
+        text: colors.buttonDangerText || white,
+      };
+
+    case BUTTON_VARIANTS.success:
+      return {
+        background: colors.buttonSuccessBackground || success,
+
+        border: colors.buttonSuccessBackground || success,
+
+        borderWidth: 1,
+
+        text: colors.buttonSuccessText || white,
+      };
+
+    case BUTTON_VARIANTS.solid:
+    default:
+      return {
+        background: colors.buttonPrimaryBackground || primary,
+
+        border: colors.buttonPrimaryBackground || primary,
+
+        borderWidth: 1,
+
+        text: colors.buttonPrimaryText || white,
+      };
+  }
 }
 
 function getDimensions(size, theme) {
@@ -301,7 +413,7 @@ function getDimensions(size, theme) {
   const spacing = theme?.spacing || {};
 
   switch (size) {
-    case "sm":
+    case BUTTON_SIZES.sm:
       return {
         height: buttonSizes.sm || 36,
 
@@ -316,7 +428,7 @@ function getDimensions(size, theme) {
         lineHeight: 18,
       };
 
-    case "lg":
+    case BUTTON_SIZES.lg:
       return {
         height: buttonSizes.lg || 52,
 
@@ -331,7 +443,7 @@ function getDimensions(size, theme) {
         lineHeight: 22,
       };
 
-    case "xl":
+    case BUTTON_SIZES.xl:
       return {
         height: buttonSizes.xl || 60,
 
@@ -346,7 +458,7 @@ function getDimensions(size, theme) {
         lineHeight: 24,
       };
 
-    case "md":
+    case BUTTON_SIZES.md:
     default:
       return {
         height: buttonSizes.md || 44,
@@ -366,18 +478,28 @@ function getDimensions(size, theme) {
 
 const styles = StyleSheet.create({
   button: {
-    flexDirection: "row",
+    flexShrink: 0,
 
     alignItems: "center",
 
     justifyContent: "center",
+  },
 
-    overflow: "hidden",
+  pressable: {
+    width: "100%",
 
-    flexShrink: 0,
+    height: "100%",
+
+    alignItems: "center",
+
+    justifyContent: "center",
   },
 
   content: {
+    width: "100%",
+
+    height: "100%",
+
     flexDirection: "row",
 
     alignItems: "center",
@@ -404,16 +526,20 @@ const styles = StyleSheet.create({
   },
 
   text: {
+    flexShrink: 1,
+
     fontWeight: "600",
 
     textAlign: "center",
 
     includeFontPadding: false,
-
-    flexShrink: 1,
   },
 });
 
-export default memo(UIButton);
+export const UIButton = memo(UIButtonComponent);
+
+UIButton.displayName = "UIButton";
+
+export { BUTTON_VARIANTS as UIButtonVariants, BUTTON_SIZES as UIButtonSizes };
 
-export { UIButton, VARIANTS as UIButtonVariants, SIZES as UIButtonSizes };
+export default UIButton;

package/src/components/IconButton/UIIconButton.js

@@ -1,17 +1,16 @@
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useMemo, useRef } from "react";
 
-import { ActivityIndicator, Pressable, StyleSheet, View } from "react-native";
+import {
+  ActivityIndicator,
+  Animated,
+  Easing,
+  Pressable,
+  StyleSheet,
+  View,
+} from "react-native";
 
 import { useUITheme } from "../../theme";
 
-const SIZES = {
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-  xl: "xl",
-};
-
 const VARIANTS = {
   solid: "solid",
   outline: "outline",
@@ -21,19 +20,46 @@ const VARIANTS = {
   success: "success",
 };
 
+const SIZES = {
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+  xxl: "xxl",
+};
+
 const SHAPES = {
   circle: "circle",
   rounded: "rounded",
   square: "square",
 };
 
-const UIIconButtonComponent = ({
-  icon,
+const FALLBACK_COLORS = {
+  primary: "#FF5A1F",
+  primarySoft: "#FFF0EA",
+  primaryPressed: "#E94D17",
 
-  size = "md",
+  success: "#16A34A",
+  successPressed: "#128238",
+
+  danger: "#DC2626",
+  dangerPressed: "#B91C1C",
+
+  white: "#FFFFFF",
+
+  disabledBackground: "#E5E5E5",
+  disabledText: "#A3A3A3",
+  disabledBorder: "#E5E5E5",
+};
+
+function UIIconButtonComponent({
+  icon,
 
   variant = "ghost",
 
+  size = "md",
+
   shape = "circle",
 
   disabled = false,
@@ -52,264 +78,392 @@ const UIIconButtonComponent = ({
 
   iconContainerStyle,
 
-  activeOpacity = 0.82,
+  hitSlop,
 
-  android_ripple = true,
+  pressAnimation = true,
 
-  hitSlop = 8,
+  pressScale = 0.94,
+
+  pressAnimationDuration = 100,
+
+  testID,
 
   accessibilityLabel,
 
   accessibilityHint,
 
-  testID,
-
   ...props
-}) => {
+}) {
   const { theme } = useUITheme();
 
-  const safeSize = SIZES[size] ? size : SIZES.md;
+  const colors = theme?.colors || {};
+
+  const isDisabled = disabled || loading;
+
+  /*
+   * Reusable native animation value.
+   *
+   * Created once for the lifetime
+   * of this component instance.
+   */
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const animationRef = useRef(null);
 
   const safeVariant = VARIANTS[variant] ? variant : VARIANTS.ghost;
 
+  const safeSize = SIZES[size] ? size : SIZES.md;
+
   const safeShape = SHAPES[shape] ? shape : SHAPES.circle;
 
-  const isDisabled = disabled || loading;
+  const variantColors = useMemo(
+    () => getVariantColors(safeVariant, colors, isDisabled),
+    [safeVariant, colors, isDisabled],
+  );
+
+  const dimensions = useMemo(
+    () => getDimensions(safeSize, safeShape, theme),
+    [safeSize, safeShape, theme],
+  );
+
+  const stopAnimation = useCallback(() => {
+    if (animationRef.current) {
+      animationRef.current.stop();
+
+      animationRef.current = null;
+    }
+  }, []);
 
-  const dimensions = getDimensions(safeSize, theme);
+  const animateScale = useCallback(
+    (targetScale) => {
+      if (!pressAnimation || isDisabled) {
+        return;
+      }
 
-  const colors = getColors(safeVariant, theme.colors);
+      stopAnimation();
 
-  const borderRadius = getBorderRadius(safeShape, theme);
+      const animation = Animated.timing(scale, {
+        toValue: targetScale,
 
-  const handlePress = useCallback(
+        duration: pressAnimationDuration,
+
+        easing: Easing.out(Easing.quad),
+
+        useNativeDriver: true,
+      });
+
+      animationRef.current = animation;
+
+      animation.start(() => {
+        animationRef.current = null;
+      });
+    },
+    [pressAnimation, isDisabled, stopAnimation, scale, pressAnimationDuration],
+  );
+
+  const handlePressIn = useCallback(
     (event) => {
       if (isDisabled) {
         return;
       }
 
-      onPress?.(event);
+      animateScale(pressScale);
+
+      onPressIn?.(event);
     },
-    [isDisabled, onPress],
+    [isDisabled, animateScale, pressScale, onPressIn],
   );
 
-  const handleLongPress = useCallback(
+  const handlePressOut = useCallback(
     (event) => {
       if (isDisabled) {
         return;
       }
 
-      onLongPress?.(event);
+      animateScale(1);
+
+      onPressOut?.(event);
     },
-    [isDisabled, onLongPress],
+    [isDisabled, animateScale, onPressOut],
   );
 
-  const handlePressIn = useCallback(
+  const handlePress = useCallback(
     (event) => {
       if (isDisabled) {
         return;
       }
 
-      onPressIn?.(event);
+      onPress?.(event);
     },
-    [isDisabled, onPressIn],
+    [isDisabled, onPress],
   );
 
-  const handlePressOut = useCallback(
+  const handleLongPress = useCallback(
     (event) => {
       if (isDisabled) {
         return;
       }
 
-      onPressOut?.(event);
+      onLongPress?.(event);
     },
-    [isDisabled, onPressOut],
+    [isDisabled, onLongPress],
   );
 
-  const ripple = android_ripple
-    ? {
-        color: colors.ripple,
-        borderless: false,
-      }
-    : undefined;
+  const buttonStyle = useMemo(
+    () => [
+      styles.button,
+
+      {
+        width: dimensions.size,
+
+        height: dimensions.size,
+
+        minWidth: dimensions.size,
+
+        minHeight: dimensions.size,
+
+        borderRadius: dimensions.borderRadius,
+
+        backgroundColor: variantColors.background,
+
+        borderColor: variantColors.border,
+
+        borderWidth: variantColors.borderWidth,
+
+        opacity: isDisabled ? 0.55 : 1,
+
+        transform: [
+          {
+            scale,
+          },
+        ],
+      },
+
+      style,
+    ],
+    [dimensions, variantColors, isDisabled, scale, style],
+  );
 
   return (
-    <Pressable
-      {...props}
-      testID={testID}
-      disabled={isDisabled}
-      onPress={handlePress}
-      onLongPress={handleLongPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      hitSlop={hitSlop}
-      android_ripple={ripple}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      accessibilityState={{
-        disabled: isDisabled,
-        busy: loading,
-      }}
-      style={({ pressed }) => [
-        styles.button,
-
-        {
-          width: dimensions.size,
-
-          height: dimensions.size,
-
-          borderRadius,
-
-          backgroundColor: colors.background,
-
-          borderColor: colors.border,
-
-          borderWidth: colors.border ? 1 : 0,
-
-          opacity: isDisabled ? 0.5 : pressed ? activeOpacity : 1,
-        },
-
-        style,
-      ]}
-    >
-      <View style={[styles.iconContainer, iconContainerStyle]}>
-        {loading ? (
-          <ActivityIndicator size="small" color={colors.icon} />
-        ) : (
-          icon
-        )}
-      </View>
-    </Pressable>
+    <Animated.View style={buttonStyle}>
+      <Pressable
+        {...props}
+        testID={testID}
+        disabled={isDisabled}
+        onPress={handlePress}
+        onLongPress={handleLongPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        hitSlop={hitSlop}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{
+          disabled: isDisabled,
+
+          busy: loading,
+        }}
+        style={styles.pressable}
+      >
+        <View style={[styles.iconContainer, iconContainerStyle]}>
+          {loading ? (
+            <ActivityIndicator size="small" color={variantColors.icon} />
+          ) : (
+            icon
+          )}
+        </View>
+      </Pressable>
+    </Animated.View>
   );
-};
+}
 
-function getDimensions(size, theme) {
-  switch (size) {
-    case SIZES.xs:
-      return {
-        size: theme.sizes.icon.lg + theme.spacing.sm,
-      };
+function getVariantColors(variant, colors, disabled) {
+  const primary = colors.primary || FALLBACK_COLORS.primary;
 
-    case SIZES.sm:
-      return {
-        size: theme.sizes.button.sm,
-      };
+  const primarySoft = colors.primarySoft || FALLBACK_COLORS.primarySoft;
 
-    case SIZES.lg:
-      return {
-        size: theme.sizes.button.lg,
-      };
+  const primaryPressed =
+    colors.primaryPressed || FALLBACK_COLORS.primaryPressed;
 
-    case SIZES.xl:
-      return {
-        size: theme.sizes.button.xl,
-      };
+  const success = colors.success || FALLBACK_COLORS.success;
 
-    case SIZES.md:
-    default:
-      return {
-        size: theme.sizes.button.md,
-      };
-  }
-}
+  const successPressed =
+    colors.successPressed || FALLBACK_COLORS.successPressed;
 
-function getBorderRadius(shape, theme) {
-  switch (shape) {
-    case SHAPES.rounded:
-      return theme.radius.lg;
+  const danger = colors.danger || FALLBACK_COLORS.danger;
 
-    case SHAPES.square:
-      return theme.radius.sm;
+  const dangerPressed = colors.dangerPressed || FALLBACK_COLORS.dangerPressed;
 
-    case SHAPES.circle:
-    default:
-      return theme.radius.circle;
+  const white = colors.onPrimary || FALLBACK_COLORS.white;
+
+  if (disabled) {
+    return {
+      background:
+        colors.buttonDisabledBackground || FALLBACK_COLORS.disabledBackground,
+
+      border: colors.buttonDisabledBorder || FALLBACK_COLORS.disabledBorder,
+
+      borderWidth: 1,
+
+      icon: colors.buttonDisabledText || FALLBACK_COLORS.disabledText,
+    };
   }
-}
 
-function getColors(variant, colors) {
   switch (variant) {
     case VARIANTS.solid:
       return {
-        background: colors.primary,
+        background: colors.buttonPrimaryBackground || primary,
 
-        border: colors.primary,
+        border: colors.buttonPrimaryBackground || primary,
 
-        icon: colors.onPrimary,
+        borderWidth: 1,
 
-        ripple: colors.primaryPressed,
+        icon: colors.buttonPrimaryText || white,
       };
 
     case VARIANTS.outline:
       return {
-        background: colors.transparent,
+        background: colors.buttonOutlineBackground || "transparent",
 
-        border: colors.borderStrong,
+        border: colors.buttonOutlineBorder || primary,
 
-        icon: colors.text,
+        borderWidth: 1,
 
-        ripple: colors.surfaceSecondary,
+        icon: colors.buttonOutlineText || primary,
       };
 
     case VARIANTS.soft:
       return {
-        background: colors.primarySoft,
+        background: colors.buttonSoftBackground || primarySoft,
 
-        border: null,
+        border: colors.buttonSoftBackground || primarySoft,
 
-        icon: colors.primary,
+        borderWidth: 1,
 
-        ripple: colors.primary,
+        icon: colors.buttonSoftText || primary,
       };
 
     case VARIANTS.danger:
       return {
-        background: colors.danger,
+        background: colors.buttonDangerBackground || danger,
 
-        border: colors.danger,
+        border: colors.buttonDangerBackground || danger,
 
-        icon: colors.onPrimary,
+        borderWidth: 1,
 
-        ripple: colors.dangerSoft,
+        icon: colors.buttonDangerText || white,
       };
 
     case VARIANTS.success:
       return {
-        background: colors.success,
+        background: colors.buttonSuccessBackground || success,
 
-        border: colors.success,
+        border: colors.buttonSuccessBackground || success,
 
-        icon: colors.onPrimary,
+        borderWidth: 1,
 
-        ripple: colors.successSoft,
+        icon: colors.buttonSuccessText || white,
       };
 
     case VARIANTS.ghost:
     default:
       return {
-        background: colors.transparent,
+        background: colors.buttonGhostBackground || "transparent",
 
-        border: null,
+        border: "transparent",
 
-        icon: colors.text,
+        borderWidth: 0,
 
-        ripple: colors.surfaceSecondary,
+        icon: colors.buttonGhostText || primary,
       };
   }
 }
 
+function getDimensions(size, shape, theme) {
+  const iconSizes = theme?.sizes?.icon || {};
+
+  const radius = theme?.radius || {};
+
+  let resolvedSize;
+
+  switch (size) {
+    case SIZES.xs:
+      resolvedSize = iconSizes.xs ? iconSizes.xs + 16 : 32;
+      break;
+
+    case SIZES.sm:
+      resolvedSize = iconSizes.sm ? iconSizes.sm + 16 : 40;
+      break;
+
+    case SIZES.lg:
+      resolvedSize = iconSizes.lg ? iconSizes.lg + 20 : 52;
+      break;
+
+    case SIZES.xl:
+      resolvedSize = iconSizes.xl ? iconSizes.xl + 24 : 60;
+      break;
+
+    case SIZES.xxl:
+      resolvedSize = iconSizes.xxl ? iconSizes.xxl + 28 : 72;
+      break;
+
+    case SIZES.md:
+    default:
+      resolvedSize = iconSizes.md ? iconSizes.md + 20 : 44;
+      break;
+  }
+
+  let borderRadius;
+
+  switch (shape) {
+    case SHAPES.square:
+      borderRadius = radius.sm ?? 6;
+      break;
+
+    case SHAPES.rounded:
+      borderRadius = radius.button ?? 12;
+      break;
+
+    case SHAPES.circle:
+    default:
+      borderRadius = resolvedSize / 2;
+      break;
+  }
+
+  return {
+    size: resolvedSize,
+
+    borderRadius,
+  };
+}
+
 const styles = StyleSheet.create({
   button: {
     alignItems: "center",
+
+    justifyContent: "center",
+
+    flexShrink: 0,
+  },
+
+  pressable: {
+    width: "100%",
+
+    height: "100%",
+
+    alignItems: "center",
+
     justifyContent: "center",
-    overflow: "hidden",
   },
 
   iconContainer: {
+    width: "100%",
+
+    height: "100%",
+
     alignItems: "center",
+
     justifyContent: "center",
-    flex: 1,
   },
 });
 
@@ -318,7 +472,9 @@ export const UIIconButton = memo(UIIconButtonComponent);
 UIIconButton.displayName = "UIIconButton";
 
 export {
-  SIZES as UIIconButtonSizes,
   VARIANTS as UIIconButtonVariants,
+  SIZES as UIIconButtonSizes,
   SHAPES as UIIconButtonShapes,
 };
+
+export default UIIconButton;

package/src/components/IconButton/index.js

@@ -1,6 +1,6 @@
 export {
   UIIconButton,
-  UIIconButtonSizes,
   UIIconButtonVariants,
+  UIIconButtonSizes,
   UIIconButtonShapes,
 } from "./UIIconButton";

package/src/components/index.js

@@ -2,7 +2,7 @@ export { UIText } from "./Text";
 export { UIButton, UIButtonVariants, UIButtonSizes } from "./Button";
 export {
   UIIconButton,
-  UIIconButtonSizes,
   UIIconButtonVariants,
+  UIIconButtonSizes,
   UIIconButtonShapes,
 } from "./IconButton";

package/src/index.js

@@ -21,7 +21,7 @@ export {
   UIButtonVariants,
   UIButtonSizes,
   UIIconButton,
-  UIIconButtonSizes,
   UIIconButtonVariants,
+  UIIconButtonSizes,
   UIIconButtonShapes,
 } from "./components";