@pagopa/io-app-design-system 1.0.0-0

package/lib/module/components/buttons/ButtonOutline.js

@@ -0,0 +1,208 @@
+import React, { useCallback } from "react";
+import { Pressable, StyleSheet } from "react-native";
+import Animated, { Extrapolate, interpolate, interpolateColor, useAnimatedProps, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from "react-native-reanimated";
+import { IOButtonStyles, IOColors, IOScaleValues, IOSpringValues, hexToRgba } from "../../core/";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { AnimatedIcon, IconClassComponent } from "../icons";
+import { HSpacer } from "../spacer/Spacer";
+const mapColorStates = {
+  // Primary button
+  primary: {
+    border: {
+      default: IOColors["blueIO-500"],
+      pressed: IOColors["blueIO-600"],
+      disabled: IOColors["grey-200"]
+    },
+    background: {
+      default: hexToRgba(IOColors["blueIO-50"], 0),
+      pressed: hexToRgba(IOColors["blueIO-50"], 1),
+      disabled: "transparent"
+    },
+    label: {
+      default: IOColors["blueIO-500"],
+      pressed: IOColors["blueIO-600"],
+      disabled: IOColors["grey-700"]
+    }
+  },
+  // Neutral button
+  neutral: {
+    border: {
+      default: IOColors.grey,
+      pressed: IOColors.bluegrey,
+      disabled: IOColors.bluegreyLight
+    },
+    background: {
+      default: IOColors.white,
+      pressed: IOColors.greyUltraLight,
+      disabled: "transparent"
+    },
+    label: {
+      default: IOColors.bluegrey,
+      pressed: IOColors.bluegreyDark,
+      disabled: IOColors.grey
+    }
+  },
+  // Contrast button
+  contrast: {
+    border: {
+      default: IOColors.white,
+      pressed: IOColors.white,
+      disabled: IOColors["blueIO-200"]
+    },
+    background: {
+      default: hexToRgba(IOColors["blueIO-600"], 0),
+      pressed: IOColors["blueIO-600"],
+      disabled: "transparent"
+    },
+    label: {
+      default: IOColors.white,
+      pressed: IOColors.white,
+      disabled: IOColors["blueIO-200"]
+    }
+  },
+  // Danger button
+  danger: {
+    border: {
+      default: IOColors.red,
+      pressed: IOColors.red,
+      disabled: IOColors.bluegreyLight
+    },
+    background: {
+      default: hexToRgba(IOColors.red, 0),
+      pressed: hexToRgba(IOColors.red, 0.15),
+      disabled: "transparent"
+    },
+    label: {
+      default: IOColors.red,
+      pressed: IOColors.red,
+      disabled: IOColors.grey
+    }
+  }
+};
+const DISABLED_OPACITY = 0.5;
+const IOButtonStylesLocal = StyleSheet.create({
+  label: {
+    ...makeFontStyleObject("Regular", false, "ReadexPro")
+  },
+  buttonWithBorder: {
+    borderWidth: 2
+  }
+});
+export const ButtonOutline = _ref => {
+  var _IOScaleValues$basicB;
+  let {
+    color = "primary",
+    label,
+    small = false,
+    fullWidth = false,
+    disabled = false,
+    icon,
+    iconPosition = "start",
+    onPress,
+    accessibilityLabel,
+    accessibilityHint,
+    testID
+  } = _ref;
+  const isPressed = useSharedValue(0);
+
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues === null || IOScaleValues === void 0 ? void 0 : (_IOScaleValues$basicB = IOScaleValues.basicButton) === null || _IOScaleValues$basicB === void 0 ? void 0 : _IOScaleValues$basicB.pressedState;
+
+  // Using a spring-based animation for our interpolations
+  const progressPressed = useDerivedValue(() => withSpring(isPressed.value, IOSpringValues.button));
+
+  // Interpolate animation values from `isPressed` values
+  const pressedAnimationStyle = useAnimatedStyle(() => {
+    // Link color states to the pressed states
+    const backgroundColor = interpolateColor(progressPressed.value, [0, 1], [mapColorStates[color].background.default, mapColorStates[color].background.pressed]);
+    const borderColor = interpolateColor(progressPressed.value, [0, 1], [mapColorStates[color].border.default, mapColorStates[color].border.pressed]);
+
+    // Scale down button slightly when pressed
+    const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
+    return {
+      borderColor,
+      backgroundColor,
+      transform: [{
+        scale
+      }]
+    };
+  });
+  const pressedColorLabelAnimationStyle = useAnimatedStyle(() => {
+    // Link color states to the pressed states
+
+    const labelColor = interpolateColor(progressPressed.value, [0, 1], [mapColorStates[color].border.default, mapColorStates[color].border.pressed]);
+    return {
+      color: labelColor
+    };
+  });
+
+  // Animate the <Icon> color prop
+  const pressedColorIconAnimationStyle = useAnimatedProps(() => {
+    const iconColor = interpolateColor(progressPressed.value, [0, 1], [mapColorStates[color].label.default, mapColorStates[color].label.pressed]);
+    return {
+      color: iconColor
+    };
+  });
+  const AnimatedIconClassComponent = Animated.createAnimatedComponent(IconClassComponent);
+  const onPressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const onPressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+  const Button = () => {
+    var _mapColorStates$color, _mapColorStates$color2, _mapColorStates$color3, _mapColorStates$color4, _mapColorStates$color5, _mapColorStates$color6, _mapColorStates$color7, _mapColorStates$color8, _mapColorStates$color9, _mapColorStates$color10, _mapColorStates$color11, _mapColorStates$color12, _mapColorStates$color13, _mapColorStates$color14, _mapColorStates$color15;
+    return /*#__PURE__*/React.createElement(Pressable, {
+      accessibilityLabel: accessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityRole: "button",
+      testID: testID,
+      onPress: onPress,
+      onPressIn: onPressIn,
+      onPressOut: onPressOut,
+      accessible: true,
+      disabled: disabled,
+      style: !fullWidth ? IOButtonStyles.dimensionsDefault : {}
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: [IOButtonStyles.button, IOButtonStylesLocal.buttonWithBorder, iconPosition === "end" && {
+        flexDirection: "row-reverse"
+      }, small ? IOButtonStyles.buttonSizeSmall : IOButtonStyles.buttonSizeDefault, disabled ? {
+        backgroundColor: (_mapColorStates$color = mapColorStates[color]) === null || _mapColorStates$color === void 0 ? void 0 : (_mapColorStates$color2 = _mapColorStates$color.background) === null || _mapColorStates$color2 === void 0 ? void 0 : _mapColorStates$color2.disabled,
+        borderColor: (_mapColorStates$color3 = mapColorStates[color]) === null || _mapColorStates$color3 === void 0 ? void 0 : (_mapColorStates$color4 = _mapColorStates$color3.border) === null || _mapColorStates$color4 === void 0 ? void 0 : _mapColorStates$color4.disabled,
+        opacity: DISABLED_OPACITY
+      } : {
+        backgroundColor: (_mapColorStates$color5 = mapColorStates[color]) === null || _mapColorStates$color5 === void 0 ? void 0 : (_mapColorStates$color6 = _mapColorStates$color5.background) === null || _mapColorStates$color6 === void 0 ? void 0 : _mapColorStates$color6.default,
+        borderColor: (_mapColorStates$color7 = mapColorStates[color]) === null || _mapColorStates$color7 === void 0 ? void 0 : _mapColorStates$color7.border.default
+      },
+      /* Prevent Reanimated from overriding background colors
+      if button is disabled */
+      !disabled && pressedAnimationStyle]
+    }, icon && /*#__PURE__*/React.createElement(React.Fragment, null, !disabled ? /*#__PURE__*/React.createElement(AnimatedIconClassComponent, {
+      name: icon,
+      animatedProps: pressedColorIconAnimationStyle,
+      color: (_mapColorStates$color8 = mapColorStates[color]) === null || _mapColorStates$color8 === void 0 ? void 0 : (_mapColorStates$color9 = _mapColorStates$color8.label) === null || _mapColorStates$color9 === void 0 ? void 0 : _mapColorStates$color9.default
+    }) : /*#__PURE__*/React.createElement(AnimatedIcon, {
+      name: icon,
+      color: (_mapColorStates$color10 = mapColorStates[color]) === null || _mapColorStates$color10 === void 0 ? void 0 : (_mapColorStates$color11 = _mapColorStates$color10.label) === null || _mapColorStates$color11 === void 0 ? void 0 : _mapColorStates$color11.disabled
+    }), /*#__PURE__*/React.createElement(HSpacer, {
+      size: 8
+    })), /*#__PURE__*/React.createElement(Animated.Text, {
+      style: [IOButtonStylesLocal.label, IOButtonStyles.label, small ? IOButtonStyles.labelSizeSmall : IOButtonStyles.labelSizeDefault, disabled ? {
+        color: (_mapColorStates$color12 = mapColorStates[color]) === null || _mapColorStates$color12 === void 0 ? void 0 : (_mapColorStates$color13 = _mapColorStates$color12.label) === null || _mapColorStates$color13 === void 0 ? void 0 : _mapColorStates$color13.disabled
+      } : {
+        color: (_mapColorStates$color14 = mapColorStates[color]) === null || _mapColorStates$color14 === void 0 ? void 0 : (_mapColorStates$color15 = _mapColorStates$color14.label) === null || _mapColorStates$color15 === void 0 ? void 0 : _mapColorStates$color15.default
+      }, !disabled && pressedColorLabelAnimationStyle],
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+      /* A11y-related props:
+      DON'T UNCOMMENT THEM */
+      /* allowFontScaling
+      maxFontSizeMultiplier={1.3} */
+    }, label)));
+  };
+  return /*#__PURE__*/React.createElement(Button, null);
+};
+export default ButtonOutline;
+//# sourceMappingURL=ButtonOutline.js.map

package/lib/module/components/buttons/ButtonOutline.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","Pressable","StyleSheet","Animated","Extrapolate","interpolate","interpolateColor","useAnimatedProps","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","IOButtonStyles","IOColors","IOScaleValues","IOSpringValues","hexToRgba","makeFontStyleObject","AnimatedIcon","IconClassComponent","HSpacer","mapColorStates","primary","border","default","pressed","disabled","background","label","neutral","grey","bluegrey","bluegreyLight","white","greyUltraLight","bluegreyDark","contrast","danger","red","DISABLED_OPACITY","IOButtonStylesLocal","create","buttonWithBorder","borderWidth","ButtonOutline","_ref","_IOScaleValues$basicB","color","small","fullWidth","icon","iconPosition","onPress","accessibilityLabel","accessibilityHint","testID","isPressed","animationScaleValue","basicButton","pressedState","progressPressed","value","button","pressedAnimationStyle","backgroundColor","borderColor","scale","CLAMP","transform","pressedColorLabelAnimationStyle","labelColor","pressedColorIconAnimationStyle","iconColor","AnimatedIconClassComponent","createAnimatedComponent","onPressIn","onPressOut","Button","_mapColorStates$color","_mapColorStates$color2","_mapColorStates$color3","_mapColorStates$color4","_mapColorStates$color5","_mapColorStates$color6","_mapColorStates$color7","_mapColorStates$color8","_mapColorStates$color9","_mapColorStates$color10","_mapColorStates$color11","_mapColorStates$color12","_mapColorStates$color13","_mapColorStates$color14","_mapColorStates$color15","createElement","accessibilityRole","accessible","style","dimensionsDefault","View","flexDirection","buttonSizeSmall","buttonSizeDefault","opacity","Fragment","name","animatedProps","size","Text","labelSizeSmall","labelSizeDefault","numberOfLines","ellipsizeMode"],"sourceRoot":"../../../../src","sources":["components/buttons/ButtonOutline.tsx"],"mappings":"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"}

package/lib/module/components/buttons/ButtonSolid.js

@@ -0,0 +1,142 @@
+import React, { useCallback } from "react";
+import { Pressable, StyleSheet } from "react-native";
+import Animated, { Extrapolate, interpolate, interpolateColor, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from "react-native-reanimated";
+import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
+import { IOColors } from "../../core/IOColors";
+import { IOButtonStyles } from "../../core/IOStyles";
+import { Icon } from "../icons";
+import { HSpacer } from "../spacer/Spacer";
+import { BaseTypography } from "../typography/BaseTypography";
+const colorPrimaryButtonDisabled = "grey-200";
+const DISABLED_OPACITY = 0.5;
+const styles = StyleSheet.create({
+  backgroundDisabled: {
+    backgroundColor: IOColors[colorPrimaryButtonDisabled],
+    opacity: DISABLED_OPACITY
+  }
+});
+const mapColorStates = {
+  // Primary button
+  primary: {
+    default: IOColors["blueIO-500"],
+    pressed: IOColors["blueIO-600"],
+    label: {
+      default: "white",
+      disabled: "grey-700"
+    }
+  },
+  // Danger button
+  danger: {
+    default: IOColors["error-850"],
+    pressed: IOColors["error-600"],
+    label: {
+      default: "white",
+      disabled: "grey-700"
+    }
+  },
+  // Contrast button
+  contrast: {
+    default: IOColors.white,
+    pressed: IOColors["blueIO-50"],
+    label: {
+      default: "blueIO-500",
+      disabled: "grey-700"
+    }
+  }
+};
+export const ButtonSolid = /*#__PURE__*/React.memo(_ref => {
+  var _IOScaleValues$basicB, _mapColorStates$color, _mapColorStates$color2, _mapColorStates$color3, _mapColorStates$color4;
+  let {
+    color = "primary",
+    label,
+    small = false,
+    fullWidth = false,
+    disabled = false,
+    icon,
+    iconPosition = "start",
+    onPress,
+    accessibilityLabel,
+    accessibilityHint,
+    testID
+  } = _ref;
+  const isPressed = useSharedValue(0);
+
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues === null || IOScaleValues === void 0 ? void 0 : (_IOScaleValues$basicB = IOScaleValues.basicButton) === null || _IOScaleValues$basicB === void 0 ? void 0 : _IOScaleValues$basicB.pressedState;
+
+  // Using a spring-based animation for our interpolations
+  const progressPressed = useDerivedValue(() => withSpring(isPressed.value, IOSpringValues.button));
+
+  // Interpolate animation values from `isPressed` values
+  const pressedAnimationStyle = useAnimatedStyle(() => {
+    // Link color states to the pressed states
+    const bgColor = interpolateColor(progressPressed.value, [0, 1], [mapColorStates[color].default, mapColorStates[color].pressed]);
+
+    // Scale down button slightly when pressed
+    const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
+    return {
+      backgroundColor: bgColor,
+      transform: [{
+        scale
+      }]
+    };
+  });
+  const onPressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const onPressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+
+  // Label & Icons colors
+  const foregroundColor = disabled ? (_mapColorStates$color = mapColorStates[color]) === null || _mapColorStates$color === void 0 ? void 0 : (_mapColorStates$color2 = _mapColorStates$color.label) === null || _mapColorStates$color2 === void 0 ? void 0 : _mapColorStates$color2.disabled : (_mapColorStates$color3 = mapColorStates[color]) === null || _mapColorStates$color3 === void 0 ? void 0 : (_mapColorStates$color4 = _mapColorStates$color3.label) === null || _mapColorStates$color4 === void 0 ? void 0 : _mapColorStates$color4.default;
+
+  // Icon size
+  const iconSize = small ? 16 : 20;
+  const Button = () => {
+    var _mapColorStates$color5;
+    return /*#__PURE__*/React.createElement(Pressable, {
+      accessibilityLabel: accessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityRole: "button",
+      testID: testID,
+      onPress: onPress,
+      onPressIn: onPressIn,
+      onPressOut: onPressOut,
+      accessible: true,
+      disabled: disabled,
+      style: !fullWidth ? IOButtonStyles.dimensionsDefault : {}
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: [IOButtonStyles.button, iconPosition === "end" && {
+        flexDirection: "row-reverse"
+      }, small ? IOButtonStyles.buttonSizeSmall : IOButtonStyles.buttonSizeDefault, disabled ? styles.backgroundDisabled : {
+        backgroundColor: (_mapColorStates$color5 = mapColorStates[color]) === null || _mapColorStates$color5 === void 0 ? void 0 : _mapColorStates$color5.default
+      },
+      /* Prevent Reanimated from overriding background colors
+      if button is disabled */
+      !disabled && pressedAnimationStyle]
+    }, icon && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+      name: icon,
+      size: iconSize,
+      color: foregroundColor
+    }), /*#__PURE__*/React.createElement(HSpacer, {
+      size: 8
+    })), /*#__PURE__*/React.createElement(BaseTypography, {
+      font: "ReadexPro",
+      weight: "Regular",
+      color: foregroundColor,
+      style: [IOButtonStyles.label, small ? IOButtonStyles.labelSizeSmall : IOButtonStyles.labelSizeDefault],
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+      /* A11y-related props:
+      DON'T UNCOMMENT THEM */
+      /* allowFontScaling
+      maxFontSizeMultiplier={1.3} */
+    }, label)));
+  };
+  return /*#__PURE__*/React.createElement(Button, null);
+});
+export default ButtonSolid;
+//# sourceMappingURL=ButtonSolid.js.map

package/lib/module/components/buttons/ButtonSolid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","Pressable","StyleSheet","Animated","Extrapolate","interpolate","interpolateColor","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","IOScaleValues","IOSpringValues","IOColors","IOButtonStyles","Icon","HSpacer","BaseTypography","colorPrimaryButtonDisabled","DISABLED_OPACITY","styles","create","backgroundDisabled","backgroundColor","opacity","mapColorStates","primary","default","pressed","label","disabled","danger","contrast","white","ButtonSolid","memo","_ref","_IOScaleValues$basicB","_mapColorStates$color","_mapColorStates$color2","_mapColorStates$color3","_mapColorStates$color4","color","small","fullWidth","icon","iconPosition","onPress","accessibilityLabel","accessibilityHint","testID","isPressed","animationScaleValue","basicButton","pressedState","progressPressed","value","button","pressedAnimationStyle","bgColor","scale","CLAMP","transform","onPressIn","onPressOut","foregroundColor","iconSize","Button","_mapColorStates$color5","createElement","accessibilityRole","accessible","style","dimensionsDefault","View","flexDirection","buttonSizeSmall","buttonSizeDefault","Fragment","name","size","font","weight","labelSizeSmall","labelSizeDefault","numberOfLines","ellipsizeMode"],"sourceRoot":"../../../../src","sources":["components/buttons/ButtonSolid.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAEIC,SAAS,EACTC,UAAU,QACP,cAAc;AACrB,OAAOC,QAAQ,IACXC,WAAW,EACXC,WAAW,EACXC,gBAAgB,EAChBC,gBAAgB,EAChBC,eAAe,EACfC,cAAc,EACdC,UAAU,QACP,yBAAyB;AAChC,SAASC,aAAa,EAAEC,cAAc,QAAQ,yBAAyB;AACvE,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAAkBC,IAAI,QAAQ,UAAU;AAExC,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,cAAc,QAAQ,8BAA8B;AAa7D,MAAMC,0BAAoC,GAAG,UAAU;AACvD,MAAMC,gBAAgB,GAAG,GAAG;AAE5B,MAAMC,MAAM,GAAGlB,UAAU,CAACmB,MAAM,CAAC;EAC7BC,kBAAkB,EAAE;IAChBC,eAAe,EAAEV,QAAQ,CAACK,0BAA0B,CAAC;IACrDM,OAAO,EAAEL;EACb;AACJ,CAAC,CAAC;AAeF,MAAMM,cAA2E,GAAG;EAChF;EACAC,OAAO,EAAE;IACLC,OAAO,EAAEd,QAAQ,CAAC,YAAY,CAAC;IAC/Be,OAAO,EAAEf,QAAQ,CAAC,YAAY,CAAC;IAC/BgB,KAAK,EAAE;MACHF,OAAO,EAAE,OAAO;MAChBG,QAAQ,EAAE;IACd;EACJ,CAAC;EACD;EACAC,MAAM,EAAE;IACJJ,OAAO,EAAEd,QAAQ,CAAC,WAAW,CAAC;IAC9Be,OAAO,EAAEf,QAAQ,CAAC,WAAW,CAAC;IAC9BgB,KAAK,EAAE;MACHF,OAAO,EAAE,OAAO;MAChBG,QAAQ,EAAE;IACd;EACJ,CAAC;EACD;EACAE,QAAQ,EAAE;IACNL,OAAO,EAAEd,QAAQ,CAACoB,KAAK;IACvBL,OAAO,EAAEf,QAAQ,CAAC,WAAW,CAAC;IAC9BgB,KAAK,EAAE;MACHF,OAAO,EAAE,YAAY;MACrBG,QAAQ,EAAE;IACd;EACJ;AACJ,CAAC;AAED,OAAO,MAAMI,WAAW,gBAAGnC,KAAK,CAACoC,IAAI,CAACC,IAAA,IAYd;EAAA,IAAAC,qBAAA,EAAAC,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA,EAAAC,sBAAA;EAAA,IAZe;IACnCC,KAAK,GAAG,SAAS;IACjBb,KAAK;IACLc,KAAK,GAAG,KAAK;IACbC,SAAS,GAAG,KAAK;IACjBd,QAAQ,GAAG,KAAK;IAChBe,IAAI;IACJC,YAAY,GAAG,OAAO;IACtBC,OAAO;IACPC,kBAAkB;IAClBC,iBAAiB;IACjBC;EACc,CAAC,GAAAd,IAAA;EACf,MAAMe,SAAS,GAAG1C,cAAc,CAAC,CAAC,CAAC;;EAEnC;EACA,MAAM2C,mBAAmB,GAAGzC,aAAa,aAAbA,aAAa,wBAAA0B,qBAAA,GAAb1B,aAAa,CAAE0C,WAAW,cAAAhB,qBAAA,uBAA1BA,qBAAA,CAA4BiB,YAAY;;EAEpE;EACA,MAAMC,eAAe,GAAG/C,eAAe,CAAC,MACpCE,UAAU,CAACyC,SAAS,CAACK,KAAK,EAAE5C,cAAc,CAAC6C,MAAM,CACrD,CAAC;;EAED;EACA,MAAMC,qBAAqB,GAAGnD,gBAAgB,CAAC,MAAM;IACjD;IACA,MAAMoD,OAAO,GAAGrD,gBAAgB,CAC5BiD,eAAe,CAACC,KAAK,EACrB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC/B,cAAc,CAACiB,KAAK,CAAC,CAACf,OAAO,EAAEF,cAAc,CAACiB,KAAK,CAAC,CAACd,OAAO,CACjE,CAAC;;IAED;IACA,MAAMgC,KAAK,GAAGvD,WAAW,CACrBkD,eAAe,CAACC,KAAK,EACrB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,CAAC,EAAEJ,mBAAmB,CAAC,EACxBhD,WAAW,CAACyD,KAChB,CAAC;IAED,OAAO;MACHtC,eAAe,EAAEoC,OAAO;MACxBG,SAAS,EAAE,CAAC;QAAEF;MAAM,CAAC;IACzB,CAAC;EACL,CAAC,CAAC;EAEF,MAAMG,SAAS,GAAG/D,WAAW,CAAC,MAAM;IAChC;IACAmD,SAAS,CAACK,KAAK,GAAG,CAAC;EACvB,CAAC,EAAE,CAACL,SAAS,CAAC,CAAC;EACf,MAAMa,UAAU,GAAGhE,WAAW,CAAC,MAAM;IACjC;IACAmD,SAAS,CAACK,KAAK,GAAG,CAAC;EACvB,CAAC,EAAE,CAACL,SAAS,CAAC,CAAC;;EAEf;EACA,MAAMc,eAAyB,GAAGnC,QAAQ,IAAAQ,qBAAA,GACpCb,cAAc,CAACiB,KAAK,CAAC,cAAAJ,qBAAA,wBAAAC,sBAAA,GAArBD,qBAAA,CAAuBT,KAAK,cAAAU,sBAAA,uBAA5BA,sBAAA,CAA8BT,QAAQ,IAAAU,sBAAA,GACtCf,cAAc,CAACiB,KAAK,CAAC,cAAAF,sBAAA,wBAAAC,sBAAA,GAArBD,sBAAA,CAAuBX,KAAK,cAAAY,sBAAA,uBAA5BA,sBAAA,CAA8Bd,OAAO;;EAE3C;EACA,MAAMuC,QAAQ,GAAGvB,KAAK,GAAG,EAAE,GAAG,EAAE;EAEhC,MAAMwB,MAAM,GAAGA,CAAA;IAAA,IAAAC,sBAAA;IAAA,oBACXrE,KAAA,CAAAsE,aAAA,CAACpE,SAAS;MACN+C,kBAAkB,EAAEA,kBAAmB;MACvCC,iBAAiB,EAAEA,iBAAkB;MACrCqB,iBAAiB,EAAE,QAAS;MAC5BpB,MAAM,EAAEA,MAAO;MACfH,OAAO,EAAEA,OAAQ;MACjBgB,SAAS,EAAEA,SAAU;MACrBC,UAAU,EAAEA,UAAW;MACvBO,UAAU,EAAE,IAAK;MACjBzC,QAAQ,EAAEA,QAAS;MACnB0C,KAAK,EAAE,CAAC5B,SAAS,GAAG9B,cAAc,CAAC2D,iBAAiB,GAAG,CAAC;IAAE,gBAE1D1E,KAAA,CAAAsE,aAAA,CAAClE,QAAQ,CAACuE,IAAI;MACVF,KAAK,EAAE,CACH1D,cAAc,CAAC2C,MAAM,EACrBX,YAAY,KAAK,KAAK,IAAI;QAAE6B,aAAa,EAAE;MAAc,CAAC,EAC1DhC,KAAK,GACC7B,cAAc,CAAC8D,eAAe,GAC9B9D,cAAc,CAAC+D,iBAAiB,EACtC/C,QAAQ,GACFV,MAAM,CAACE,kBAAkB,GACzB;QAAEC,eAAe,GAAA6C,sBAAA,GAAE3C,cAAc,CAACiB,KAAK,CAAC,cAAA0B,sBAAA,uBAArBA,sBAAA,CAAuBzC;MAAQ,CAAC;MACzD;AACpB;MACoB,CAACG,QAAQ,IAAI4B,qBAAqB;IACpC,GAEDb,IAAI,iBACD9C,KAAA,CAAAsE,aAAA,CAAAtE,KAAA,CAAA+E,QAAA,qBAGI/E,KAAA,CAAAsE,aAAA,CAACtD,IAAI;MAACgE,IAAI,EAAElC,IAAK;MAACmC,IAAI,EAAEd,QAAS;MAACxB,KAAK,EAAEuB;IAAgB,CAAE,CAAC,eAG5DlE,KAAA,CAAAsE,aAAA,CAACrD,OAAO;MAACgE,IAAI,EAAE;IAAE,CAAE,CACrB,CACL,eACDjF,KAAA,CAAAsE,aAAA,CAACpD,cAAc;MACXgE,IAAI,EAAC,WAAW;MAChBC,MAAM,EAAE,SAAU;MAClBxC,KAAK,EAAEuB,eAAgB;MACvBO,KAAK,EAAE,CACH1D,cAAc,CAACe,KAAK,EACpBc,KAAK,GACC7B,cAAc,CAACqE,cAAc,GAC7BrE,cAAc,CAACsE,gBAAgB,CACvC;MACFC,aAAa,EAAE,CAAE;MACjBC,aAAa,EAAC;MAClB;AAChB;MACgB;AAChB;IADgB,GAGKzD,KACW,CACL,CACR,CAAC;EAAA,CACf;EACD,oBAAO9B,KAAA,CAAAsE,aAAA,CAACF,MAAM,MAAE,CAAC;AACrB,CAAC,CAAC;AAEF,eAAejC,WAAW"}

package/lib/module/components/buttons/IconButton.js

@@ -0,0 +1,114 @@
+import React, { useCallback } from "react";
+import { Pressable } from "react-native";
+import Animated, { Extrapolate, interpolate, interpolateColor, useAnimatedProps, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from "react-native-reanimated";
+import { IOButtonStyles, IOColors, IOIconButtonStyles, IOScaleValues, IOSpringValues, hexToRgba } from "../../core";
+import { AnimatedIcon, IconClassComponent } from "../icons";
+const mapColorStates = {
+  // Primary button
+  primary: {
+    icon: {
+      default: IOColors["blueIO-500"],
+      pressed: IOColors["blueIO-600"],
+      disabled: hexToRgba(IOColors["blueIO-500"], 0.25)
+    }
+  },
+  // Neutral button
+  neutral: {
+    icon: {
+      default: IOColors.black,
+      pressed: IOColors["grey-850"],
+      disabled: IOColors.grey
+    }
+  },
+  // Contrast button
+  contrast: {
+    icon: {
+      default: IOColors.white,
+      pressed: hexToRgba(IOColors.white, 0.85),
+      disabled: hexToRgba(IOColors.white, 0.25)
+    }
+  }
+};
+const AnimatedIconClassComponent = Animated.createAnimatedComponent(IconClassComponent);
+export const IconButton = _ref => {
+  var _IOScaleValues$exagge, _mapColorStates$color, _mapColorStates$color2, _mapColorStates$color3, _mapColorStates$color4;
+  let {
+    color = "primary",
+    icon,
+    disabled = false,
+    onPress,
+    accessibilityLabel,
+    accessibilityHint,
+    testID
+  } = _ref;
+  const isPressed = useSharedValue(0);
+
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues === null || IOScaleValues === void 0 ? void 0 : (_IOScaleValues$exagge = IOScaleValues.exaggeratedButton) === null || _IOScaleValues$exagge === void 0 ? void 0 : _IOScaleValues$exagge.pressedState;
+
+  // Using a spring-based animation for our interpolations
+  const progressPressed = useDerivedValue(() => withSpring(isPressed.value, IOSpringValues.button));
+
+  // Interpolate animation values from `isPressed` values
+
+  const pressedAnimationStyle = useAnimatedStyle(() => {
+    // Scale down button slightly when pressed
+    const scale = interpolate(progressPressed.value, [0, 1], [1, animationScaleValue], Extrapolate.CLAMP);
+    return {
+      transform: [{
+        scale
+      }]
+    };
+  });
+
+  // Animate the <Icon> color prop
+  const animatedColor = useAnimatedProps(() => {
+    const iconColor = interpolateColor(progressPressed.value, [0, 1], [mapColorStates[color].icon.default, mapColorStates[color].icon.pressed]);
+    return {
+      color: iconColor
+    };
+  });
+  /* REMOVE_LEGACY_COMPONENT: End ▶ */
+
+  const handlePressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const handlePressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: IOButtonStyles.dimensionsDefault,
+    disabled: disabled
+    // Events
+    ,
+    onPress: onPress,
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut
+    // Accessibility
+    ,
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint
+    // Usability
+    // Add a touchable area around the button
+    ,
+    hitSlop: 8
+    // Test
+    ,
+    testID: testID
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [IOIconButtonStyles.buttonSizeSmall, !disabled && pressedAnimationStyle]
+  }, !disabled ? /*#__PURE__*/React.createElement(AnimatedIconClassComponent, {
+    name: icon,
+    animatedProps: animatedColor,
+    color: (_mapColorStates$color = mapColorStates[color]) === null || _mapColorStates$color === void 0 ? void 0 : (_mapColorStates$color2 = _mapColorStates$color.icon) === null || _mapColorStates$color2 === void 0 ? void 0 : _mapColorStates$color2.default
+  }) : /*#__PURE__*/React.createElement(AnimatedIcon, {
+    name: icon,
+    color: (_mapColorStates$color3 = mapColorStates[color]) === null || _mapColorStates$color3 === void 0 ? void 0 : (_mapColorStates$color4 = _mapColorStates$color3.icon) === null || _mapColorStates$color4 === void 0 ? void 0 : _mapColorStates$color4.disabled
+  })));
+};
+export default IconButton;
+//# sourceMappingURL=IconButton.js.map

package/lib/module/components/buttons/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","Pressable","Animated","Extrapolate","interpolate","interpolateColor","useAnimatedProps","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","IOButtonStyles","IOColors","IOIconButtonStyles","IOScaleValues","IOSpringValues","hexToRgba","AnimatedIcon","IconClassComponent","mapColorStates","primary","icon","default","pressed","disabled","neutral","black","grey","contrast","white","AnimatedIconClassComponent","createAnimatedComponent","IconButton","_ref","_IOScaleValues$exagge","_mapColorStates$color","_mapColorStates$color2","_mapColorStates$color3","_mapColorStates$color4","color","onPress","accessibilityLabel","accessibilityHint","testID","isPressed","animationScaleValue","exaggeratedButton","pressedState","progressPressed","value","button","pressedAnimationStyle","scale","CLAMP","transform","animatedColor","iconColor","handlePressIn","handlePressOut","createElement","style","dimensionsDefault","onPressIn","onPressOut","accessible","accessibilityRole","hitSlop","View","buttonSizeSmall","name","animatedProps"],"sourceRoot":"../../../../src","sources":["components/buttons/IconButton.tsx"],"mappings":"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"}