rnnovaui 0.1.6 → 0.2.0

package/package.json

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

package/src/components/Button/UIButton.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useMemo } from "react";
 
 import {
   ActivityIndicator,
@@ -10,7 +10,7 @@ import {
 
 import { useUITheme } from "../../theme";
 
-const BUTTON_VARIANTS = {
+const VARIANTS = {
   solid: "solid",
   outline: "outline",
   ghost: "ghost",
@@ -19,171 +19,224 @@ const BUTTON_VARIANTS = {
   success: "success",
 };
 
-const BUTTON_SIZES = {
+const SIZES = {
   sm: "sm",
   md: "md",
   lg: "lg",
   xl: "xl",
 };
 
-const DEFAULT_COLORS = {
-  buttonPrimaryBackground: "#FF5A1F",
+const FALLBACK = {
+  primary: "#FF5A1F",
+  primaryPressed: "#E94D17",
+  primarySoft: "#FFF0EA",
 
-  buttonPrimaryPressed: "#E94D17",
+  success: "#16A34A",
+  successPressed: "#128238",
 
-  buttonPrimaryText: "#FFFFFF",
+  danger: "#DC2626",
+  dangerPressed: "#B91C1C",
 
-  buttonOutlineBackground: "transparent",
+  white: "#FFFFFF",
 
-  buttonOutlineBorder: "#FF5A1F",
+  disabledBackground: "#E5E5E5",
+  disabledText: "#A3A3A3",
+};
 
-  buttonOutlineText: "#FF5A1F",
+function UIButton({
+  title,
+  children,
 
-  buttonGhostBackground: "transparent",
+  variant = "solid",
+  size = "md",
 
-  buttonGhostText: "#FF5A1F",
+  disabled = false,
+  loading = false,
 
-  buttonSoftBackground: "#FFF0EA",
+  fullWidth = false,
 
-  buttonSoftText: "#FF5A1F",
+  leftIcon,
+  rightIcon,
 
-  buttonDangerBackground: "#DC2626",
+  onPress,
+  onLongPress,
 
-  buttonDangerPressed: "#B91C1C",
+  style,
+  contentStyle,
+  textStyle,
 
-  buttonDangerText: "#FFFFFF",
+  testID,
 
-  buttonSuccessBackground: "#16A34A",
+  ...props
+}) {
+  const { theme } = useUITheme();
 
-  buttonSuccessPressed: "#128238",
+  const colors = theme?.colors || {};
 
-  buttonSuccessText: "#FFFFFF",
+  const primary = colors.primary || FALLBACK.primary;
 
-  buttonDisabledBackground: "#E5E5E5",
+  const primaryPressed = colors.primaryPressed || FALLBACK.primaryPressed;
 
-  buttonDisabledText: "#A3A3A3",
+  const primarySoft = colors.primarySoft || FALLBACK.primarySoft;
 
-  buttonDisabledBorder: "#E5E5E5",
+  const success = colors.success || FALLBACK.success;
 
-  buttonRipple: "rgba(255,255,255,0.20)",
-};
+  const successPressed = colors.successPressed || FALLBACK.successPressed;
 
-const UIButtonComponent = ({
-  title,
+  const danger = colors.danger || FALLBACK.danger;
 
-  children,
+  const dangerPressed = colors.dangerPressed || FALLBACK.dangerPressed;
 
-  variant = "solid",
+  const white = colors.onPrimary || FALLBACK.white;
 
-  size = "md",
+  const isDisabled = disabled || loading;
 
-  disabled = false,
+  const buttonColors = useMemo(() => {
+    if (isDisabled) {
+      return {
+        background:
+          colors.buttonDisabledBackground || FALLBACK.disabledBackground,
 
-  loading = false,
+        border: colors.buttonDisabledBorder || FALLBACK.disabledBackground,
 
-  fullWidth = false,
+        text: colors.buttonDisabledText || FALLBACK.disabledText,
 
-  leftIcon = null,
+        borderWidth: 1,
+      };
+    }
 
-  rightIcon = null,
+    switch (variant) {
+      case "outline":
+        return {
+          background: "transparent",
 
-  onPress,
+          border: colors.buttonOutlineBorder || primary,
 
-  onLongPress,
+          text: colors.buttonOutlineText || primary,
 
-  onPressIn,
+          borderWidth: 1,
+        };
 
-  onPressOut,
+      case "ghost":
+        return {
+          background: "transparent",
 
-  style,
+          border: "transparent",
 
-  contentStyle,
+          text: colors.buttonGhostText || primary,
 
-  textStyle,
+          borderWidth: 0,
+        };
 
-  activeOpacity = 0.82,
+      case "soft":
+        return {
+          background: colors.buttonSoftBackground || primarySoft,
 
-  testID,
+          border: colors.buttonSoftBackground || primarySoft,
 
-  accessibilityLabel,
+          text: colors.buttonSoftText || primary,
 
-  accessibilityHint,
+          borderWidth: 1,
+        };
 
-  ...props
-}) => {
-  const { theme } = useUITheme();
+      case "danger":
+        return {
+          background: colors.buttonDangerBackground || danger,
 
-  const colors = {
-    ...DEFAULT_COLORS,
-    ...(theme?.colors || {}),
-  };
+          border: colors.buttonDangerBackground || danger,
 
-  const safeVariant = BUTTON_VARIANTS[variant]
-    ? variant
-    : BUTTON_VARIANTS.solid;
+          text: colors.buttonDangerText || white,
 
-  const safeSize = BUTTON_SIZES[size] ? size : BUTTON_SIZES.md;
+          borderWidth: 1,
+        };
 
-  const isDisabled = disabled || loading;
+      case "success":
+        return {
+          background: colors.buttonSuccessBackground || success,
 
-  const variantStyle = getVariantStyle(safeVariant, colors, isDisabled);
+          border: colors.buttonSuccessBackground || success,
 
-  const sizeStyle = getSizeStyle(safeSize, theme);
+          text: colors.buttonSuccessText || white,
 
-  const handlePress = useCallback(
-    (event) => {
-      if (isDisabled) {
-        return;
-      }
+          borderWidth: 1,
+        };
 
-      if (typeof onPress === "function") {
-        onPress(event);
-      }
-    },
-    [isDisabled, onPress],
-  );
+      case "solid":
+      default:
+        return {
+          background: colors.buttonPrimaryBackground || primary,
 
-  const handleLongPress = useCallback(
-    (event) => {
-      if (isDisabled) {
-        return;
-      }
+          border: colors.buttonPrimaryBackground || primary,
 
-      if (typeof onLongPress === "function") {
-        onLongPress(event);
-      }
-    },
-    [isDisabled, onLongPress],
+          text: colors.buttonPrimaryText || white,
+
+          borderWidth: 1,
+        };
+    }
+  }, [
+    variant,
+    isDisabled,
+    colors,
+    primary,
+    primarySoft,
+    success,
+    danger,
+    white,
+  ]);
+
+  const dimensions = useMemo(() => getDimensions(size, theme), [size, theme]);
+
+  const buttonStyle = useMemo(
+    () => [
+      styles.button,
+
+      {
+        height: dimensions.height,
+
+        minHeight: dimensions.height,
+
+        paddingHorizontal: dimensions.paddingHorizontal,
+
+        borderRadius: dimensions.borderRadius,
+
+        backgroundColor: buttonColors.background,
+
+        borderColor: buttonColors.border,
+
+        borderWidth: buttonColors.borderWidth,
+
+        width: fullWidth ? "100%" : undefined,
+
+        opacity: isDisabled ? 0.55 : 1,
+      },
+
+      style,
+    ],
+    [dimensions, buttonColors, fullWidth, isDisabled, style],
   );
 
-  const handlePressIn = useCallback(
+  const handlePress = useCallback(
     (event) => {
       if (isDisabled) {
         return;
       }
 
-      if (typeof onPressIn === "function") {
-        onPressIn(event);
-      }
+      onPress?.(event);
     },
-    [isDisabled, onPressIn],
+    [isDisabled, onPress],
   );
 
-  const handlePressOut = useCallback(
+  const handleLongPress = useCallback(
     (event) => {
       if (isDisabled) {
         return;
       }
 
-      if (typeof onPressOut === "function") {
-        onPressOut(event);
-      }
+      onLongPress?.(event);
     },
-    [isDisabled, onPressOut],
+    [isDisabled, onLongPress],
   );
 
-  const hasChildren = children !== undefined && children !== null;
-
   return (
     <Pressable
       {...props}
@@ -191,281 +244,118 @@ const UIButtonComponent = ({
       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={({ pressed }) => {
-        const backgroundColor = isDisabled
-          ? colors.buttonDisabledBackground
-          : pressed
-            ? variantStyle.pressedBackground
-            : variantStyle.backgroundColor;
-
-        const borderColor = isDisabled
-          ? colors.buttonDisabledBorder
-          : variantStyle.borderColor;
-
-        const textColor = isDisabled
-          ? colors.buttonDisabledText
-          : variantStyle.textColor;
-
-        return [
-          styles.button,
-
-          {
-            height: sizeStyle.height,
-
-            minHeight: sizeStyle.height,
-
-            paddingHorizontal: sizeStyle.paddingHorizontal,
-
-            borderRadius: sizeStyle.borderRadius,
-
-            backgroundColor,
-
-            borderColor,
-
-            borderWidth: variantStyle.borderWidth,
-
-            width: fullWidth ? "100%" : undefined,
-
-            opacity: isDisabled ? 0.55 : 1,
-          },
-
-          style,
-        ];
-      }}
+      style={buttonStyle}
     >
       <View
         style={[
           styles.content,
 
           {
-            gap: sizeStyle.gap,
+            gap: dimensions.gap,
           },
 
           contentStyle,
         ]}
       >
         {loading ? (
-          <ActivityIndicator size="small" color={variantStyle.textColor} />
+          <ActivityIndicator size="small" color={buttonColors.text} />
         ) : (
           leftIcon && <View style={styles.icon}>{leftIcon}</View>
         )}
 
-        {hasChildren ? (
+        {children !== undefined && children !== null ? (
           <View style={styles.children}>{children}</View>
-        ) : (
-          title !== undefined &&
-          title !== null && (
-            <Text
-              numberOfLines={1}
-              style={[
-                styles.text,
-
-                {
-                  color: isDisabled
-                    ? colors.buttonDisabledText
-                    : variantStyle.textColor,
-
-                  fontSize: sizeStyle.fontSize,
-
-                  lineHeight: sizeStyle.lineHeight,
-                },
-
-                textStyle,
-              ]}
-            >
-              {title}
-            </Text>
-          )
-        )}
-
-        {!loading && rightIcon && <View style={styles.icon}>{rightIcon}</View>}
-      </View>
-    </Pressable>
-  );
-};
-
-function getVariantStyle(variant, colors, disabled) {
-  if (disabled) {
-    return {
-      backgroundColor: colors.buttonDisabledBackground,
-
-      pressedBackground: colors.buttonDisabledBackground,
-
-      borderColor: colors.buttonDisabledBorder,
-
-      borderWidth: 1,
-
-      textColor: colors.buttonDisabledText,
-    };
-  }
-
-  switch (variant) {
-    case BUTTON_VARIANTS.outline:
-      return {
-        backgroundColor: colors.buttonOutlineBackground,
-
-        pressedBackground: colors.buttonSoftBackground,
-
-        borderColor: colors.buttonOutlineBorder,
+        ) : title !== undefined && title !== null ? (
+          <Text
+            numberOfLines={1}
+            style={[
+              styles.text,
 
-        borderWidth: 1,
-
-        textColor: colors.buttonOutlineText,
-      };
-
-    case BUTTON_VARIANTS.ghost:
-      return {
-        backgroundColor: colors.buttonGhostBackground,
-
-        pressedBackground: colors.buttonSoftBackground,
+              {
+                color: buttonColors.text,
 
-        borderColor: colors.transparent,
-
-        borderWidth: 0,
-
-        textColor: colors.buttonGhostText,
-      };
-
-    case BUTTON_VARIANTS.soft:
-      return {
-        backgroundColor: colors.buttonSoftBackground,
+                fontSize: dimensions.fontSize,
 
-        pressedBackground: colors.primaryMuted || colors.buttonSoftBackground,
+                lineHeight: dimensions.lineHeight,
+              },
 
-        borderColor: colors.buttonSoftBackground,
-
-        borderWidth: 1,
-
-        textColor: colors.buttonSoftText,
-      };
-
-    case BUTTON_VARIANTS.danger:
-      return {
-        backgroundColor: colors.buttonDangerBackground,
-
-        pressedBackground: colors.buttonDangerPressed,
-
-        borderColor: colors.buttonDangerBackground,
-
-        borderWidth: 1,
+              textStyle,
+            ]}
+          >
+            {title}
+          </Text>
+        ) : null}
 
-        textColor: colors.buttonDangerText,
-      };
-
-    case BUTTON_VARIANTS.success:
-      return {
-        backgroundColor: colors.buttonSuccessBackground,
-
-        pressedBackground: colors.buttonSuccessPressed,
-
-        borderColor: colors.buttonSuccessBackground,
-
-        borderWidth: 1,
-
-        textColor: colors.buttonSuccessText,
-      };
-
-    case BUTTON_VARIANTS.solid:
-    default:
-      return {
-        backgroundColor: colors.buttonPrimaryBackground,
-
-        pressedBackground: colors.buttonPrimaryPressed,
-
-        borderColor: colors.buttonPrimaryBackground,
-
-        borderWidth: 1,
-
-        textColor: colors.buttonPrimaryText,
-      };
-  }
+        {!loading && rightIcon && <View style={styles.icon}>{rightIcon}</View>}
+      </View>
+    </Pressable>
+  );
 }
 
-function getSizeStyle(size, theme) {
+function getDimensions(size, theme) {
   const buttonSizes = theme?.sizes?.button || {};
 
-  const themeRadius = theme?.radius?.button;
-
-  const buttonRadius = typeof themeRadius === "number" ? themeRadius : 12;
+  const radius =
+    typeof theme?.radius?.button === "number" ? theme.radius.button : 12;
 
   const spacing = theme?.spacing || {};
 
-  const spacingSM = typeof spacing.sm === "number" ? spacing.sm : 8;
-
-  const spacingMD = typeof spacing.md === "number" ? spacing.md : 16;
-
-  const spacingLG = typeof spacing.lg === "number" ? spacing.lg : 20;
-
-  const spacingXL = typeof spacing.xl === "number" ? spacing.xl : 24;
-
   switch (size) {
-    case BUTTON_SIZES.sm:
+    case "sm":
       return {
-        height: buttonSizes.sm ?? 36,
+        height: buttonSizes.sm || 36,
 
-        paddingHorizontal: spacingMD,
+        paddingHorizontal: spacing.md || 16,
 
-        gap: spacingSM,
+        gap: 6,
 
-        borderRadius: buttonRadius,
+        borderRadius: radius,
 
         fontSize: 13,
 
         lineHeight: 18,
       };
 
-    case BUTTON_SIZES.lg:
+    case "lg":
       return {
-        height: buttonSizes.lg ?? 52,
+        height: buttonSizes.lg || 52,
 
-        paddingHorizontal: spacingLG,
+        paddingHorizontal: spacing.lg || 20,
 
-        gap: spacingSM,
+        gap: 8,
 
-        borderRadius: buttonRadius,
+        borderRadius: radius,
 
         fontSize: 16,
 
         lineHeight: 22,
       };
 
-    case BUTTON_SIZES.xl:
+    case "xl":
       return {
-        height: buttonSizes.xl ?? 60,
+        height: buttonSizes.xl || 60,
 
-        paddingHorizontal: spacingXL,
+        paddingHorizontal: spacing.xl || 24,
 
-        gap: spacingSM,
+        gap: 8,
 
-        borderRadius: buttonRadius,
+        borderRadius: radius,
 
         fontSize: 17,
 
         lineHeight: 24,
       };
 
-    case BUTTON_SIZES.md:
+    case "md":
     default:
       return {
-        height: buttonSizes.md ?? 44,
+        height: buttonSizes.md || 44,
 
-        paddingHorizontal: spacingLG,
+        paddingHorizontal: spacing.md || 16,
 
-        gap: spacingSM,
+        gap: 8,
 
-        borderRadius: buttonRadius,
+        borderRadius: radius,
 
         fontSize: 14,
 
@@ -476,13 +366,15 @@ function getSizeStyle(size, theme) {
 
 const styles = StyleSheet.create({
   button: {
-    flexShrink: 0,
+    flexDirection: "row",
 
     alignItems: "center",
 
     justifyContent: "center",
 
     overflow: "hidden",
+
+    flexShrink: 0,
   },
 
   content: {
@@ -496,11 +388,11 @@ const styles = StyleSheet.create({
   },
 
   children: {
-    flexShrink: 1,
-
     alignItems: "center",
 
     justifyContent: "center",
+
+    flexShrink: 1,
   },
 
   icon: {
@@ -512,18 +404,16 @@ const styles = StyleSheet.create({
   },
 
   text: {
-    flexShrink: 1,
-
     fontWeight: "600",
 
     textAlign: "center",
 
     includeFontPadding: false,
+
+    flexShrink: 1,
   },
 });
 
-export const UIButton = memo(UIButtonComponent);
-
-UIButton.displayName = "UIButton";
+export default memo(UIButton);
 
-export { BUTTON_VARIANTS as UIButtonVariants, BUTTON_SIZES as UIButtonSizes };
+export { UIButton, VARIANTS as UIButtonVariants, SIZES as UIButtonSizes };

package/src/components/IconButton/UIIconButton.js

@@ -1,17 +1,9 @@
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useMemo } from "react";
 
 import { ActivityIndicator, 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 +13,47 @@ 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",
+
+  border: "#E5E5E5",
+
+  disabledBackground: "#E5E5E5",
+  disabledBorder: "#E5E5E5",
+};
+
+function UIIconButtonComponent({
+  icon,
 
   variant = "ghost",
 
+  size = "md",
+
   shape = "circle",
 
   disabled = false,
@@ -52,35 +72,31 @@ const UIIconButtonComponent = ({
 
   iconContainerStyle,
 
-  activeOpacity = 0.82,
-
-  android_ripple = true,
+  hitSlop,
 
-  hitSlop = 8,
+  testID,
 
   accessibilityLabel,
 
   accessibilityHint,
 
-  testID,
-
   ...props
-}) => {
+}) {
   const { theme } = useUITheme();
 
-  const safeSize = SIZES[size] ? size : SIZES.md;
-
-  const safeVariant = VARIANTS[variant] ? variant : VARIANTS.ghost;
-
-  const safeShape = SHAPES[shape] ? shape : SHAPES.circle;
+  const colors = theme?.colors || {};
 
   const isDisabled = disabled || loading;
 
-  const dimensions = getDimensions(safeSize, theme);
-
-  const colors = getColors(safeVariant, theme.colors);
+  const resolvedColors = useMemo(
+    () => getVariantColors(variant, colors, isDisabled),
+    [variant, colors, isDisabled],
+  );
 
-  const borderRadius = getBorderRadius(safeShape, theme);
+  const dimensions = useMemo(
+    () => getDimensions(size, shape, theme),
+    [size, shape, theme],
+  );
 
   const handlePress = useCallback(
     (event) => {
@@ -126,12 +142,34 @@ const UIIconButtonComponent = ({
     [isDisabled, onPressOut],
   );
 
-  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: resolvedColors.background,
+
+        borderColor: resolvedColors.border,
+
+        borderWidth: resolvedColors.borderWidth,
+
+        opacity: isDisabled ? 0.55 : 1,
+      },
+
+      style,
+    ],
+    [dimensions, resolvedColors, isDisabled, style],
+  );
 
   return (
     <Pressable
@@ -143,173 +181,221 @@ const UIIconButtonComponent = ({
       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,
-      ]}
+      style={buttonStyle}
     >
       <View style={[styles.iconContainer, iconContainerStyle]}>
         {loading ? (
-          <ActivityIndicator size="small" color={colors.icon} />
+          <ActivityIndicator size="small" color={resolvedColors.icon} />
         ) : (
           icon
         )}
       </View>
     </Pressable>
   );
-};
+}
 
-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 || "#A3A3A3",
+
+      pressed:
+        colors.buttonDisabledBackground || FALLBACK_COLORS.disabledBackground,
+    };
   }
-}
 
-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,
+
+        pressed: colors.buttonPrimaryPressed || primaryPressed,
       };
 
     case VARIANTS.outline:
       return {
-        background: colors.transparent,
+        background: "transparent",
+
+        border: colors.buttonOutlineBorder || primary,
 
-        border: colors.borderStrong,
+        borderWidth: 1,
 
-        icon: colors.text,
+        icon: colors.buttonOutlineText || primary,
 
-        ripple: colors.surfaceSecondary,
+        pressed: colors.buttonSoftBackground || primarySoft,
       };
 
     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,
+
+        pressed: colors.primaryMuted || primarySoft,
       };
 
     case VARIANTS.danger:
       return {
-        background: colors.danger,
+        background: colors.buttonDangerBackground || danger,
+
+        border: colors.buttonDangerBackground || danger,
 
-        border: colors.danger,
+        borderWidth: 1,
 
-        icon: colors.onPrimary,
+        icon: colors.buttonDangerText || white,
 
-        ripple: colors.dangerSoft,
+        pressed: colors.buttonDangerPressed || dangerPressed,
       };
 
     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,
+
+        pressed: colors.buttonSuccessPressed || successPressed,
       };
 
     case VARIANTS.ghost:
     default:
       return {
-        background: colors.transparent,
+        background: "transparent",
+
+        border: "transparent",
 
-        border: null,
+        borderWidth: 0,
 
-        icon: colors.text,
+        icon: colors.buttonGhostText || primary,
 
-        ripple: colors.surfaceSecondary,
+        pressed: colors.buttonSoftBackground || primarySoft,
       };
   }
 }
 
+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",
+
     overflow: "hidden",
+
+    flexShrink: 0,
   },
 
   iconContainer: {
+    width: "100%",
+
+    height: "100%",
+
     alignItems: "center",
+
     justifyContent: "center",
-    flex: 1,
   },
 });
 
@@ -318,7 +404,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";